XpertDirect Design System
The single reference everyone building or designing XpertDirect must follow. Use these tokens, components and rules exactly — consistency is the product's credibility.
Direct. Fast. Proven.How to use this system
This is the source of truth for the XpertDirect interface. Anything you build — a page, a component, a marketing asset — must be assembled from the tokens and components defined here. If something you need isn't defined, propose an addition rather than inventing a one-off.
Click any colour swatch or the “Copy” button on a code block to copy its value. The whole page uses the real brand fonts and tokens, so what you see is what production should look like.
Brand & voice
Personality: engineered, direct, premium, evidence-led. Closer to a credible fintech or developer-tools product than a recruitment agency. Confident navy, one sharp technical accent, generous space, monospaced numerals for anything measured. Restraint signals proof; clutter signals sell.
Voice: clear, direct, premium, evidence-led — never hype-led, never generic SaaS, never agency language. British English throughout (organise, optimise, programme, behaviour). Short sentences. Numbers over adjectives.
Approved lines
- “Hire the specialist. Skip the middleman. In hours.”
- “Direct. Fast. Proven.”
- “This is direct hiring.”
- “Five per cent. Not twenty-five.”
- “We publish what most platforms hide.”
Words to avoid
- platform / engine / OS — unless a visual backs it
- candidate, CV, shortlist desk, consultant, recruiter
- world-class, cutting-edge, seamless, leverage, synergy
- AI-powered (as a headline)
- best / fastest / leading — unaudited superlatives
Logo
The primary logo is the connection glyph plus the “XpertDirect” wordmark in Space Grotesk Bold. The glyph is two nodes joined by one direct line inside a signal-blue square — a solid navy origin and a white destination node (the direct hire).
Do
- Keep clear space ≥ the glyph height on all sides.
- Use navy wordmark on light, white wordmark on navy/dark.
- Use the SVG as the production asset.
- Minimum wordmark height 20px on screen.
Don't
- Recolour, stretch, rotate or add effects to the logo.
- Place it on a busy photo or low-contrast colour.
- Recreate the wordmark in another font.
- Separate the glyph proportions from the lockup.
Colour
Navy anchors; signal blue is the single accent (it carries CTAs and emphasis — use it sparingly for impact). Verify-green only ever attaches to genuinely audited things. Gold/bronze is retired.
Accessibility pairings: white or #AEB8C7 text on navy; ink (#0A1422) or navy text on white/light; white text on signal-blue (passes AA for buttons). Never put grey text on signal blue, and never signal-blue text on navy for body copy.
Typography
| Role | Family / weight | Size / line-height |
|---|---|---|
| H1 | Space Grotesk 700 | 48–60px / 1.2 |
| H2 | Space Grotesk 700 | 32–40px / 1.2 |
| H3 | Space Grotesk 600 | 22–26px / 1.2 |
| Body | Inter 400 | 16–18px / 1.6 |
| UI / buttons | Inter 600 | 15px |
| Caption / label | Inter 500 | 13–14px |
| Metric / numeral | IBM Plex Mono 500–600 | contextual |
| Fallback | system-ui, sans-serif | — |
Spacing & grid
8px base unit; all spacing in multiples of 8. 12-column grid, max content width 1120–1200px, centred. Section padding 96px top/bottom desktop, 56px mobile. Card padding 24–32px. Gutters 24px desktop / 16px mobile.
Spacing scale: 4 · 8 · 16 · 24 · 32 · 48 · 64 · 96. Corner radius: 8px (controls), 12px (cards), 20–23px (pills).
Cards
Card
White fill, 1px #E2E6EC border, 12px radius, subtle shadow (0 1px 3px rgba(10,20,34,.06)). No heavy drop shadows.
Filled three regulated hires in 11 days
Commitment
4-hour first-match SLA — or we credit the platform fee. Contractual, not aspirational.
Read the SLA →Metric & proof
Proof is the product's personality. Metric cards render from one shared source so the same number is identical everywhere. The green badge and pill attach only to genuinely audited facts.
Forms
Single column, generous fields (48px), label above input, signal-blue focus ring, inline validation (never modal errors). Ask only for the minimum.
No card, no retainer, no spam. Your brief stays private.
Brand devices
Category quadrant
Pricing contrast
Product imagery
Make the product visible. Build abstracted product UI (matching dashboard, Xpert AI brief builder) as real HTML/CSS components with anonymised data (initials/refs like “XD-A1042”), then present them screenshot-styled in a browser frame. One consistent UI kit across every mock — same palette, Inter + IBM Plex Mono. Stylised, but software-credible; never a generic marketing illustration. The node-graph device is reserved for the Partnerships/asset surface only.
Accessibility
| Area | Requirement |
|---|---|
| Contrast | Body and UI text meet WCAG AA (≥4.5:1). White on signal-blue and white on navy pass; verify with a checker for any new pairing. |
| Focus | Visible focus ring on all interactive elements (signal-blue 3px glow). |
| Targets | Tap targets ≥44px. Field height 48px. |
| Semantics | One H1 per page; logical heading order; alt text on product mockups; labels on every input. |
| Motion | Subtle only; respect prefers-reduced-motion. No autoplay carousels. |
Do & don't
Do
- Use signal blue sparingly, for the one action that matters.
- Render every measured number in IBM Plex Mono.
- Pull all metrics from one source so they match everywhere.
- Keep generous whitespace; let proof breathe.
- Attach the green “Audited” badge only to audited facts.
Don't
- Introduce new colours, gradients, or the retired gold.
- Use a platform/engine word with no on-screen product.
- Show negative live counters (“last shortlist N hours ago”).
- Lead with a vanity/over-precise metric.
- Reword the primary CTA or restyle core components.
Code tokens
CSS variables
:root{
--navy:#0B1F3A; --ink:#0A1422;
--signal:#2D5BFF; --verify:#12B981; --amber:#B45309;
--grey:#5A6472; --border:#E2E6EC; --light:#F5F7FA; --white:#FFFFFF;
--radius-control:8px; --radius-card:12px; --radius-pill:23px;
--maxw:1120px; --space:8px;
--font-heading:'Space Grotesk',system-ui,sans-serif;
--font-body:'Inter',system-ui,sans-serif;
--font-mono:'IBM Plex Mono',monospace;
}Tailwind theme
// tailwind.config.js → theme.extend
colors:{
navy:'#0B1F3A', ink:'#0A1422', signal:'#2D5BFF',
verify:'#12B981', amber:'#B45309', grey:'#5A6472',
border:'#E2E6EC', light:'#F5F7FA',
},
fontFamily:{
heading:['Space Grotesk','system-ui','sans-serif'],
body:['Inter','system-ui','sans-serif'],
mono:['IBM Plex Mono','monospace'],
},
borderRadius:{ control:'8px', card:'12px', pill:'23px' },
maxWidth:{ content:'1120px' },Google Fonts
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">XpertDirect Design System · v1.0 · June 2026 · Direct. Fast. Proven.