# 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.