# VacatureRadar design system

Dit document beschrijft de enige normale productiefrontend vanaf versie 0.3.0. De visuele bron van waarheid is de Stitch Intelligence Cockpit; het bindende contract en de schermmapping staan in `STITCH_FRONTEND_CONTRACT.md` en `STITCH_INTEGRATION_REPORT.md`.

## Visuele identiteit

De standaardervaring is een donkere, technische navycockpit. Signal Cyan markeert focus en primaire acties, Emerald aantoonbaar positieve of gezonde status, Intelligence Indigo automatisering en Amber/Coral aandacht of fout. Tonale oppervlakken en fijne borders vormen de hiërarchie; glows zijn beperkt tot focus en sterke signalen.

De productietokens staan uitsluitend in `static/css/tokens.css`:

- oppervlakken: `--surface-lowest`, `--surface`, `--surface-low`, `--surface-container`, `--surface-high`, `--surface-highest`, `--surface-bright`;
- tekst: `--text`, `--text-strong`, `--text-muted`, `--text-faint`;
- signalen: `--cyan`, `--cyan-dim`, `--emerald`, `--indigo`, `--amber`, `--coral`, `--danger`;
- structuur: `--outline`, `--outline-strong`, `--sidebar-width`, `--topbar-height`, `--content-gutter`, radii en `--shadow-signal`.

De light variant gebruikt dezelfde semantische tokens en informatiehiërarchie. Component-CSS bevat geen eigen hardcoded palette; uitzonderingen zijn alleen documentmetadata zoals `theme-color` en e-mailtemplates buiten de cockpit.

## Typografie en iconen

- Headlines: lokale systeemstack die Geist benadert (`Segoe UI Variable Display`, Aptos Display, Segoe UI).
- Body: `Segoe UI Variable Text`, Aptos en systeemfallbacks.
- Technische metadata: Cascadia Mono, SFMono/Consolas.
- Geen externe font- of iconrequest; iconen komen uit één lokale inline SVG-sprite.
- Score, datum en metadata blijven tekstueel leesbaar en steunen nooit alleen op kleur of vorm.

## Layoutsysteem

- Vaste technische sidebar van 256 px en contexttopbar op desktop.
- Flexibel datacanvas met een maximum van 2240 px; op 1920/2560 px benutten feeds en intelligencepanelen de extra breedte.
- Bij 1180 px stapelen de zwaarste rails; bij 820 px wordt de sidebar een drawer met mobiele tabbar; bij 560 px worden cards, forms en intelligenceblokken éénkoloms.
- Kanban, pipeline en datatabellen mogen alleen binnen een gelabelde lokale container horizontaal scrollen. Het document zelf heeft geen horizontale overflow.
- Sticky actions houden rekening met de mobiele tabbar en bedekken geen essentiële informatie.

## Kerncomponenten

- `cockpit-sidebar`, `cockpit-topbar`, `mobile-tabbar`: globale shell en navigatie.
- `cockpit-heading`, `section-heading`, `eyebrow`, `section-kicker`: informatiehiërarchie.
- `stat-card`, `panel`, `tonal-panel`, `result-card`: tonale contentlagen.
- `pill-*`, `status-beacon`: status met zichtbare tekst naast kleur.
- `intelligence-score`, `hero-score`, `score-components`: match en datakwaliteit als afzonderlijke begrippen.
- `filter-console`, `active-filters`: server-side filters en deelbare querystrings.
- `pipeline-board`, `activity-timeline`, `data-table-wrap`: taakgerichte datapatronen met toegankelijke fallback.
- `form-section`, `choice-field`, `profile-preview`: echte Django-formulieren met begeleide selecties en server-rendered bewijs.
- `empty-state`, `toast-stack`, fouttemplates: consistente lege, success-, fout- en onbekende staten.

## Interactie

Vanilla JavaScript is alleen progressive enhancement voor drawer, disclosures, viewtoggle, zoekshortcut en thema. Alle links, filters, formulieren, statuswijzigingen en mutaties werken server-side. Motion is functioneel, kort en uitgeschakeld via `prefers-reduced-motion`.

## Reviewchecklist

- één duidelijke primaire taak en één `h1` per pagina;
- echte data of expliciet “Niet gemeten/Onbekend/Niet geconfigureerd”;
- geen controls zonder serveractie;
- consistente focusring, tekstlabels en minimaal bruikbare touch targets;
- reflow zonder documentoverflow op 360 px en dynamische benutting tot 2560 px;
- lange Nederlandse labels, werkgeversnamen en URL's breken veilig;
- geen externe runtimeassets, oude shell of parallel frontendpad.