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.

4.0 KiB Raw Blame History