122 lines
3.5 KiB
Markdown
122 lines
3.5 KiB
Markdown
# 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.
|