7.4 KiB
name, colors, typography, rounded, spacing
| name | colors | typography | rounded | spacing | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Intelligence Cockpit |
|
|
|
|
Brand & Style
The design system is anchored in the concept of "Intelligent Discovery." It positions the product not just as a job board, but as a sophisticated radar system for career growth. The aesthetic is a refined blend of Modern Corporate and Technical Minimalist, evoking the feeling of a high-end data cockpit.
The target audience consists of professionals who value efficiency, precision, and a calm user experience. The UI should feel like a trusted advisor: quiet until it finds something significant, then clear and authoritative in its presentation. We avoid literal military metaphors in favor of abstract "signal" patterns, subtle data visualizations, and high-quality finishes that suggest a premium, automated service.
Colors
The palette is centered on a "Professional Dark" foundation to reduce cognitive load and emphasize the intelligence-gathering nature of the platform.
- Primary (Signal Cyan):
#00F5FF. Used for active radar pulses, high-confidence matches, and primary calls to action. It represents the "discovery" aspect. - Secondary (Success Emerald):
#10B981. Reserved for "Healthy" system statuses and finalized matches. - Tertiary (Intelligence Indigo):
#6366F1. Used for automation indicators and background accents to provide depth. - Neutrals: A range of Slate and Navy tones (from
#0F172Ato#94A3B8) form the structural layers.
In Light Mode, the deep navies are replaced with crisp whites and soft slates, but the Primary Cyan remains the focal point for interaction.
Typography
This design system utilizes a tiered typographic approach to balance human readability with a technical edge.
- Headlines: Using Geist, these are sharp and modern, providing a clear hierarchy for job titles and section headers.
- Body: Inter is used for all descriptive text, ensuring maximum legibility during long reading sessions of job descriptions.
- Data & Metadata: JetBrains Mono is employed for small labels, status indicators, and automation logs. This reinforces the "Radar" and "Automated" personality of the brand.
Dutch language nuances (long compound words) are handled through generous line-heights and flexible container widths.
Layout & Spacing
The layout follows a Fixed Grid model on desktop to maintain a controlled "Cockpit" feel, centered within the viewport.
- Desktop: 12-column grid with 24px gutters. Content is often organized into a narrow sidebar for navigation/filters and a wide main area for the "Radar Feed."
- Mobile: A single-column fluid layout with 16px side margins.
- Spacing Rhythm: An 8px base unit drives all padding and margins. Vertical stacking uses "stack-md" (16px) for related elements and "stack-lg" (32px) for distinct sections.
Elevation & Depth
Hierarchy is established through Tonal Layers and Subtle Glows rather than heavy shadows.
- Background: The base layer uses the darkest neutral.
- Surface-Low: Cards and containers use a slightly lighter slate with a 1px low-opacity border.
- Surface-High: Elements in focus or "Strong Matches" utilize a "Signal Glow"—a faint, primary-colored outer shadow (
0 0 15px rgba(0, 245, 255, 0.15)) and a subtle inner gradient. - Backdrop Blur: Modals and navigation overlays use a 12px blur to maintain the glass-like cockpit aesthetic without sacrificing legibility.
Shapes
The shape language is Soft (0.25rem). This provides a professional, geometric look that feels precise and modern.
- Standard Elements: Buttons and inputs use a 4px (0.25rem) radius.
- Large Containers: Main cards and sections use an 8px (0.5rem) radius.
- Status Indicators: Chips and small badges use a fully rounded (pill) shape to contrast against the structured grid of the cards.
Components
Cards (Vacaturekaarten)
Cards are the primary data vessel. They feature a 1px border (#334155). For "Sterke Matches" (Strong Matches), the border color transitions to the Primary Cyan, and a subtle glow is applied.
Score Indicators (Match-score)
A combination of a bold numeric percentage in Geist and a qualitative label in JetBrains Mono.
- Example: 94% [STERKE MATCH]
- Color reflects the score: Cyan for >80%, Indigo for 50-80%, Slate for <50%.
Status Chips (Automatisering)
Small, pill-shaped indicators for system health:
- Scanning: Primary Cyan text with a pulsing dot icon.
- Healthy: Secondary Emerald background (low opacity) with dark text.
- Degraded: Amber/Orange for system warnings.
Buttons (Actieknoppen)
- Primary: Solid Cyan with dark text for high contrast.
- Ghost: Transparent with a Slate-400 border, used for secondary actions like "Bewaar" (Save).
Input Fields
Dark backgrounds with a 1px border. On focus, the border glows with the Primary Cyan signal. Labels use the mono font for a technical feel.
Navigation
Compact, icon-driven sidebar on desktop to maximize the workspace for the Radar Feed. Icons are stroke-based (2px weight) for a clean, technical look.