59 lines
4.0 KiB
Markdown
59 lines
4.0 KiB
Markdown
# 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.
|