Initial deploy setup

docs/design/DESIGN_SYSTEM.md

@@ -0,0 +1,121 @@
+# Design system
+
+## 1. Merkgevoel
+
+Rustig, betrouwbaar, helder en licht technisch. De interface moet focus geven, niet gamificeren. Geen confetti, eindeloze badges of agressieve notificatiekleuren.
+
+## 2. Visuele tokens
+
+De implementatie staat in `static/css/app.css`. Gebruik semantische custom properties in plaats van losse kleuren in componenten.
+
+Aanbevolen tokenrollen:
+
+```css
+--surface-page
+--surface-card
+--surface-raised
+--text-primary
+--text-secondary
+--text-muted
+--border-subtle
+--accent
+--accent-strong
+--success
+--warning
+--danger
+--focus-ring
+--shadow-card
+--radius-sm
+--radius-md
+--radius-lg
+--space-1 ... --space-8
+```
+
+Donkere modus volgt `prefers-color-scheme` en behoudt semantische contrastrollen.
+
+## 3. Typografie
+
+- systeemfontstack, geen externe fontrequest;
+- basis 16px;
+- body line-height ongeveer 1,55;
+- compacte metadata 0,8–0,9rem maar nooit onder bruikbare leesgrootte;
+- titels met duidelijke schaal, niet alleen gewicht;
+- cijfers voor scores mogen tabular nums gebruiken.
+
+## 4. Spacing en layout
+
+- 4/8px-gebaseerde schaal;
+- contentcontainer ongeveer 1180–1280px;
+- kaarten met consistente padding 20–24px desktop, 16px mobiel;
+- minimaal 44×44px touch targets voor primaire interactie;
+- grids breken onder 900px en 640px logisch af;
+- vaste/sticky elementen mogen content niet bedekken.
+
+## 5. Componenten
+
+### Button
+
+Varianten:
+
+- primary — één primaire actie per context;
+- secondary — normale navigatie/opslaan;
+- ghost — lage nadruk;
+- danger — destructief met bevestiging;
+- compact icon+label — vacaturefeedback.
+
+States: hover, focus-visible, active, disabled, busy. Disabled blijft leesbaar en verklaarbaar.
+
+### Badge/status pill
+
+Bevat altijd tekst. Rollen: strong, possible, weak, hidden, active, review, deny, quarantined, expired. Gebruik niet alleen rood/groen.
+
+### Card
+
+Semantische header/body/footer. Hele kaart niet klikbaar wanneer er meerdere interne acties zijn; titel/link is de primaire link.
+
+### Score
+
+Score = getal/100 + recommendationtekst. Confidence wordt als “Datakwaliteit hoog/middel/laag” of exact percentage in detail getoond. Geen cirkeldiagram nodig voor één waarde.
+
+### Form
+
+- label boven veld;
+- hint vóór fout;
+- fout gekoppeld via `aria-describedby`;
+- required expliciet;
+- JSON-achtige lijstvelden uiteindelijk vervangen door chips/multi-select;
+- opslaan bevestigt, maar verliest scroll/focus niet onnodig.
+
+### Alert
+
+Info/success/warning/error met icoon, titel en tekst. Alerts zijn `role=status` of `role=alert` afhankelijk van urgentie.
+
+### Table/list
+
+Kolomkoppen semantisch; op mobiel cards of stacked definition list. Actiekolom niet te breed.
+
+## 6. Motion
+
+- alleen functionele transities 120–200ms;
+- respecteer `prefers-reduced-motion`;
+- geen automatische carrousels, pulserende scores of decoratieve parallax.
+
+## 7. Iconen
+
+Gebruik eenvoudige inline SVG's met `aria-hidden=true` naast zichtbare tekst. Geen externe iconfont. Een icon-only button vereist accessible label/tooltips.
+
+## 8. Datavisualisatie
+
+Gebruik balken voor scorecomponenten met numerieke tekst. Kleur ondersteunt, maar label/waarde draagt betekenis. Grafieken zijn niet nodig zolang data laag-volume is.
+
+## 9. Designreviewchecklist
+
+- primaire taak binnen één scherm duidelijk;
+- geen ruwe technische identifiers in dagelijkse UI;
+- empty/error/loading states aanwezig;
+- focusvolgorde logisch;
+- contrast en zoom 200% gecontroleerd;
+- mobiel 320px breed bruikbaar;
+- lange titels/werkgevers/URL's breken veilig;
+- Nederlands consistent;
+- scoreverklaring niet verstopt achter kleur.