VacatureRadar/docs/design/DESIGN_SYSTEM.md

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:

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