Clarity over decoration
Typography, spacing, hierarchy and contrast do most of the visual work.
Loading workspace
Candidate / brand system
One brand.
Two deliberate modes.
Candidate helps people manage the work behind getting hired with clarity, context and a next useful move.
A lightweight living guide for the public marketing surface and the authenticated product.
01
Principles
The quality bar
Candidate is restrained by design. Use the system to make the useful thing easier to see.
Quiet confidence
Direct, calm and useful beats hype, noise or exaggerated promises.
One brand, two densities
Marketing can breathe. The application stays compact and operational.
Product first
Show the real work Candidate helps with, and let expressive imagery stay in its place.
02
Logo
Recognisable at a glance
The mark and wordmark are shared across both modes. Keep them clear, quiet and generously spaced.
Light usageDark mark on light surfaces.
Dark usageLight mark on dark surfaces or imagery.
Clear space
Keep at least one detached-square width (40 drawing units) clear around the horizontal logo. The SVG safety margin does not include this clear space. Never stretch, recolour, outline or place it over busy detail.
03
Typography
A single typographic character
Inter is the shared sans across marketing and product. Marketing uses a 36px medium H1, 21px medium H2s, 15px regular H3s and 14px regular paragraphs. Geist Mono stays reserved for metadata, labels and system detail.
Marketing H1 · Inter 500 · 36px
--marketing-display-size--marketing-display-weightManage your search
with clarity.
Marketing section · Inter 500
--marketing-section-heading-size--marketing-section-heading-weightThe system should feel easy.
Product page · Inter 600
--candidate-type-product-page--candidate-type-product-page-weightApplications
Body / control · Inter 400 / 500
--candidate-type-product-body--candidate-type-product-body-weight--candidate-type-ui-weightKeep the next useful move visible and easy to act on.
Metadata
--candidate-font-monoUPDATED TODAY · 10:30 · 3 APPLICATIONS
04
Colour
Mostly neutral, deliberately expressive
The interface uses Candidate v2 semantic roles. Light marketing shares the pure white canvas, graphite text and quiet borders with the product. Semantic colour belongs to product state; expressive colour belongs to imagery and atmospheric panels.
Canvas
--v2-canvasQuiet surface
--v2-quietSubtle border
--v2-border-subtleBorder
--v2-borderSecondary text
--v2-text-secondaryPrimary text
--v2-text-primarySemantic state
In progress / process
Complete / ready
Needs attention
Destructive / blocked
Do not add a bright marketing accent to interface chrome. Let the Candidate ambient gradient carry the colour.
Marketing canvasSpacious / editorial
--marketing-canvasProduct canvasCompact / operational
--candidate-product-canvas-dark05
Geometry
Soft corners, firm edges
Borders do more work than shadows. Use a small radius set and reserve round shapes for statuses, avatars and controls that need to read as toggles.
Small
--candidate-radius-smMedium
--candidate-radius-mdLarge
--candidate-radius-lgControl
--candidate-control-height-mdBorder first. One-pixel rules, quiet surfaces and consistent control heights keep both modes related.
06
Buttons & controls
Clear actions, no performance
Primary, secondary, outline, ghost and destructive actions use the same geometry and motion philosophy. The product applies its compact semantic skin through tracker-button.
07
Iconography
One quiet icon family
Lucide React is the shared icon family: open stroke, consistent proportions and semantic use. Keep icons supportive, never decorative UI tiles.
UI / 16px
UI / 16px
UI / 16px
UI / 16px
Marketing detail
16px is the standard product icon, 20px supports marketing feature moments, and icon-only controls always need an accessible name and a touch target of at least 44px.
08
Imagery
Soft gradients, useful atmosphere
Candidate imagery is abstract, palette-aware and grainy. Soft colour fields add atmosphere without turning into literal scenery or competing with the product.
Marketing only
Use the Candidate v2 ambient palette to support a message or frame a product moment. Marketing may use a broader crop while keeping the same muted gradient and refined grain.
Product screens keep ambient imagery restrained and away from dense readable content. Literal city, mountain and landmark imagery is outside the brand system.
09
Motion
Smooth, restrained, functional
Marketing may use a low-amplitude transition such as the homepage shrinking hero. Product motion is reserved for tooltips, popovers, dialogs, sidebar transitions and small state changes.
Low amplitude
160ms for controls; 260ms for larger public transitions.
Useful feedback
Motion should explain a state change or preserve context.
Reduced motion
Respect prefers-reduced-motion everywhere.
10 / 11 · expressions
Same brand, different mode.
Marketing can breathe and product can stay dense. The continuity comes from the logo, Geist, neutral palette, measured geometry, Lucide icons, borders and quiet motion.
Marketing expression
Make the next move feel possible.
Spacious editorial layouts, real product moments, generous type and Candidate ambient gradients.
See the public siteProduct expression
Keep the next useful move visible.
Compact workspaces, monochrome surfaces, concise labels, operational rows and semantic state.
Open the workspace12
Voice
Direct, calm, practical
Candidate speaks with quiet confidence. Say what the product does and let the user move on.
Use
Manage your job search with clarity.
No spreadsheets. No scattered notes. Just your next move.
Avoid
Revolutionise your career journey with AI-powered synergy.
A delightful, magical command centre for winning the job market.
13
Accessibility
Quality people can use
Accessibility is part of Candidate quality: contrast, focus-visible, keyboard interaction, semantic HTML, named controls, touch targets and reduced motion are built into the bar.
Contrast
Neutral text and surfaces must remain readable in both light and dark modes.
Keyboard first
Every link, control, dialog and disclosure is reachable and visibly focused.
Target size
Icon-only controls are named and provide at least a 44px touch target.
Semantic HTML
Use headings, landmarks, labels and status semantics before adding ARIA.
14
Do / don't
A short final check
Do
- Let hierarchy and whitespace lead.
- Use muted gradient colour only where it adds atmosphere.
- Keep the product dense, quiet and precise.
Don't
- Add bright accent tiles without semantic meaning.
- Stack cards inside cards to create false complexity.
- Bring marketing imagery or oversized display type into the app.