---
name: Intelligence Cockpit
colors:
  surface: '#0b1326'
  surface-dim: '#0b1326'
  surface-bright: '#31394d'
  surface-container-lowest: '#060e20'
  surface-container-low: '#131b2e'
  surface-container: '#171f33'
  surface-container-high: '#222a3d'
  surface-container-highest: '#2d3449'
  on-surface: '#dae2fd'
  on-surface-variant: '#b9caca'
  inverse-surface: '#dae2fd'
  inverse-on-surface: '#283044'
  outline: '#849495'
  outline-variant: '#3a494a'
  surface-tint: '#00dce5'
  primary: '#e9feff'
  on-primary: '#003739'
  primary-container: '#00f5ff'
  on-primary-container: '#006c71'
  inverse-primary: '#00696e'
  secondary: '#4edea3'
  on-secondary: '#003824'
  secondary-container: '#00a572'
  on-secondary-container: '#00311f'
  tertiary: '#fcf8ff'
  on-tertiary: '#1000a9'
  tertiary-container: '#dbdaff'
  on-tertiary-container: '#4c4ed9'
  error: '#ffb4ab'
  on-error: '#690005'
  error-container: '#93000a'
  on-error-container: '#ffdad6'
  primary-fixed: '#63f7ff'
  primary-fixed-dim: '#00dce5'
  on-primary-fixed: '#002021'
  on-primary-fixed-variant: '#004f53'
  secondary-fixed: '#6ffbbe'
  secondary-fixed-dim: '#4edea3'
  on-secondary-fixed: '#002113'
  on-secondary-fixed-variant: '#005236'
  tertiary-fixed: '#e1e0ff'
  tertiary-fixed-dim: '#c0c1ff'
  on-tertiary-fixed: '#07006c'
  on-tertiary-fixed-variant: '#2f2ebe'
  background: '#0b1326'
  on-background: '#dae2fd'
  surface-variant: '#2d3449'
typography:
  headline-lg:
    fontFamily: Geist
    fontSize: 32px
    fontWeight: '600'
    lineHeight: '1.2'
    letterSpacing: -0.02em
  headline-lg-mobile:
    fontFamily: Geist
    fontSize: 24px
    fontWeight: '600'
    lineHeight: '1.2'
  headline-md:
    fontFamily: Geist
    fontSize: 20px
    fontWeight: '500'
    lineHeight: '1.4'
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.6'
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '400'
    lineHeight: '1.5'
  metadata-caps:
    fontFamily: JetBrains Mono
    fontSize: 12px
    fontWeight: '500'
    lineHeight: '1.0'
    letterSpacing: 0.05em
  label-mono:
    fontFamily: JetBrains Mono
    fontSize: 13px
    fontWeight: '400'
    lineHeight: '1.0'
rounded:
  sm: 0.125rem
  DEFAULT: 0.25rem
  md: 0.375rem
  lg: 0.5rem
  xl: 0.75rem
  full: 9999px
spacing:
  container-max: 1280px
  gutter: 24px
  margin-mobile: 16px
  stack-sm: 8px
  stack-md: 16px
  stack-lg: 32px
---

## 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 `#0F172A` to `#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.