130 lines
4.1 KiB
Markdown
130 lines
4.1 KiB
Markdown
# 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:
|
||
|
||
```css
|
||
--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 1600px zodat de cockpit op brede schermen bruikbaar blijft;
|
||
- 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 onder 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.
|