The OFFSIDER identity system
A visual identity system for certified construction offsiders — built to feel premium, precise, and quietly confident. This sheet governs colour, type, logo use, and UI components across every OFFSIDER touchpoint.
The idea
Deep navy tones and confident blue read as grounded, established, and premium — closer to a private members' club than a template SaaS page. Blue carries the weight of trust and craftsmanship; the near-black navies give it room to breathe.
How to use this sheet
Every colour, type size, and component below maps directly onto common selectors — h1, .eyebrow, .stat .n and so on — so any page can be reskinned by swapping tokens, not rebuilding structure.
Who OFFSIDER is
OFFSIDER trains and places certified, AI-empowered construction offsiders — dedicated, office-based team members certified on a client's own platforms and workflows before day one. The mission is simple: help builders buy back their time, and run tighter jobs.
Certified before deployment, always
No operator deploys below the certification threshold — every operator is certified on the client's own platforms before day one.
AI-empowered, not just AI-aware
Every operator is trained to use AI tools across customer service, content, reporting, and admin.
Built by third-generation builders
The operator training curriculum is built directly on Paul Waddy's frameworks — coach to brands turning over $500m+ a year.
Backed by a genuine replacement guarantee
If a placed operator can't continue for reasons covered under the Trading Terms, WrkPod replaces them at no additional recruitment cost.
How OFFSIDER sounds
Conversational but professional. Short sentences. Active voice. Real outcomes over vague promises — we speak to builders as peers, people who've run jobs and know what actually needs to get done.
We Are
- Ambitious
- Warm
- Credible
- Direct
- Encouraging
- Entrepreneurial
We Are Never
- Corporate
- Stiff
- Jargon-heavy
- Overly salesy
- Condescending
- Cost-cutting focused, not growth-focused
Phrases We Use
- “Buy back your time”
- “Get back on the tools”
- “AI-empowered construction offsiders”
- “Your team, just based offshore”
Phrases We Avoid
- “Cheap labour” or “cheap staff”
- “Outsourcing” used purely as a cost-cutting term
- Corporate jargon — “leverage synergies,” “end-to-end solutions”
- “VA” or “virtual assistant” as the primary term — always “operator”
Palette & usage
Eight core tones carry the entire system. Deep navies hold the structure, blue does the pointing, light grey and off-white give the eye somewhere to rest.
Primary dark background — sections, nav, footer
Feature panel — pairs with Deep Navy
Background gradient partner — pairs with Deep Navy
Logo, icons, highlights, primary CTA
Accent blue — hover states, fine details, dividers
Light section background, alt panels
Text on dark backgrounds; base for clean sections
Secondary text, captions, muted labels
Archivo + Inter
Archivo carries every headline, eyebrow, stat and button. Inter handles everything you actually read at length.
- 500 Medium
- 700 Bold
- 800 ExtraBold
- 900 Black
- 400 Regular
- 500 Medium
- 600 SemiBold
- 700 Bold
Type & colour mapping
| Token | CSS variable | Where it applies |
|---|---|---|
| Deep Navy | --navy | Section backgrounds, nav, dark panels |
| Navy Ink | --navy-ink | Footer, gradient partner |
| Charcoal | --charcoal | Feature panel gradient partner |
| Primary Blue | --blue | Eyebrows, icons, stats, primary CTA fill |
| Bright Blue | --blue-light | Hover states, gradient top stop |
| Light Grey | --light-grey | Alternate light section background |
| Off-White | --off-white | Base light background, text on dark |
| Slate Grey | --slate | Secondary copy on dark |
| Hairline | --hairline | 1px borders, dividers, card outlines |
| Display face | --font-display | h1–h4, eyebrow, button, stat |
| Body face | --font-sans | body, p, li, input, caption |
Marks & clear space
Two marks cover every surface. Choose by background, never by preference.
On Deep Navy / Navy Ink — wordmark in white
On Light Grey / Off-White — wordmark in Deep Navy
clear space = icon heightDo
- Use the supplied SVG marks only — never re-typeset the wordmark.
- Keep clear space equal to the icon height on every side.
- Use the on-dark mark on Deep Navy or Navy Ink, the on-light mark on Light Grey or Off-White.
Don't
- Don't recolour the mark or apply a full blue fill to the wordmark.
- Don't stretch, rotate, or add drop shadows and outlines.
- Don't place the mark on a busy photo without a navy overlay behind it.
UI in the brand voice
Live components, not screenshots — everything below is the same code the marketing site renders.
Order & catalogue accuracy target
Inventory & catalogue
Listings, variants, pricing and stock kept accurate across every channel you sell on.
Gradient & surface direction
Hero and footer surfaces use a subtle navy-to-ink gradient. Blue gradients are reserved for CTAs and the logo — never full section fills.
Get back on the tools
Book a straight-talking call and we’ll go through where your business is bottlenecked, which admin can move offshore, and what your first OFFSIDER could take off your desk.