Kleur
Zwart, grijs en wit. Kleur is alleen een signaal: als er iets misgaat of aandacht nodig heeft.
Neutral-schaal
Gegenereerd in OKLCH met R = G = B. Fijne stappen aan beide uiteinden, waar achtergronden en lijnen zitten, grotere stappen in het midden. Dit is grondstof: componenten gebruiken de semantische tokens hieronder.
Onderste getal: contrast ten opzichte van de lichte achtergrond (25).
Semantische tokens
Gebruik in componenten alleen deze namen. Ze wisselen vanzelf mee met light en dark.
| Token | Light | Dark | Gebruik |
|---|---|---|---|
--bg | 25 | 950 | Pagina |
--surface | 0 | 900 | Kaarten, panelen, inputs |
--surface-hover | 50 | 850 | Hover op rijen en items |
--surface-active | 100 | 850 | Geselecteerd |
--border-subtle | 100 | 850 | Scheidingslijn binnen een kaart |
--border | 150 | 800 | Rand van kaarten en inputs |
--border-strong | 200 | 700 | Hover op inputs |
--text-title | 90016,5 | 5017,5 | Koppen, belangrijke waarden |
--text-body | 80010,4 | 30010,2 | Lopende tekst |
--text-muted | 6005,3 | 5005,0 | Labels, meta, secundair |
--text-disabled | 4002,5 | 6003,5 | Uitgeschakeld, niet voor leestekst |
--inverse | 900 | 50 | Primaire knop, nummerpil |
Status
Alleen danger en warning hebben kleur. Succes en info zijn ink met een icoon. Per status is er één signaalkleur, gelijk in light en dark.
Framboos
--danger · Fouten, mislukte acties, destructieve bevestiging
#e2406f · #ffeff1 · #33141b
Mandarijn
--warning · Let op, verloopt binnenkort, onvolledig
#d45e00 · #fff0e9 · #321708
Kleur is nooit tekst
De statuskleur zit in het icoon, een bolletje, de rand van een veld of een lichte tint. De tekst zelf blijft ink.
Rand en icoon in framboos, tekst in ink.
Gekleurde tekst zonder icoon: minder leesbaar en alleen kleur draagt de betekenis.