VacatureRadar/docs/design/DESIGN_SYSTEM.md

Design system

Geactualiseerd voor VR-118. De volledige Stitch-mapping en bewuste afwijkingen staan in docs/design/STITCH_INTEGRATION_PLAN.md.

1. Merkgevoel

Rustig, betrouwbaar, helder en technisch precies. De interface voelt als een professionele intelligence-cockpit: donker marineblauw als standaard, signaalcyaan voor primaire interactie en tonale lagen in plaats van zware schaduwen. De lichte variant behoudt dezelfde hiërarchie. Geen confetti, fictieve grafieken, 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.

Geïmplementeerde tokenrollen omvatten onder meer:

--bg
--bg-deep
--surface
--surface-low
--surface-high
--surface-bright
--text
--text-soft
--muted
--border
--border-strong
--primary
--primary-strong
--positive
--warning
--danger
--signal-glow
--radius-sm
--radius

Donkere modus is de productstandaard. De gebruiker kan lokaal wisselen via data-theme; opslag is progressief en mag in een afgeschermde browsercontext uitvallen zonder de bediening te breken.

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 maximaal 2240px; vanaf 1850px gebruikt de cockpit extra resultaatkolommen en contextpanelen in plaats van alleen langere tekstregels;
• kaarten met consistente padding 20–24px desktop, 16px mobiel;
• minimaal 44×44px touch targets voor primaire interactie;
• vaste zijbalk van 272px boven 900px, toegankelijke uitschuifnavigatie daaronder;
• grids breken rond 1850px, 1350px, 1180px, 900px en 680px 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.