Basis
Kleur
Het palet en hoe je het gebruikt.
Het idee
Het product is neutraal: wit en nacht, met grijzen. Kleur heeft een betekenis:
- Koraal betekent bekend, of het merk. De stip naast wat we weten, het logo. Niets anders.
- Het verloop is het merk, en alleen in merkvlakken.
- Statuskleuren zeggen of iets gelukt is, aandacht vraagt of misging.
Merkkleuren
| Naam | Hex | Waar |
|---|---|---|
| Nacht | #08090D | Donkere achtergrond, de primaire knop op licht |
| Wit | #FFFFFF | Lichte achtergrond, de primaire knop op donker |
| Koraal | #FF5A36 | Het logo en de stip: bekend |
Koraal #FF5A36 haalt op wit 3,1:1: genoeg voor een stip of vlak, niet voor tekst. Koraal is daarom nooit tekst, ook niet in een donkerdere tint. Wat we weten, laat de stip zien; de waarde zelf staat in de tekstkleur.
Het verloop
Eén warme familie: #FFB020 amber → #FF5A36 koraal → #C2283A dieprood.
- Op de site: als zachte hoek rechtsboven in de lichte header, met de kop op wit.
- Als textuur: de stippen van de kaart van Nederland, in dezelfde warme kleuren, in de afsluitende band, op social en op de deelafbeelding.
- Nooit in het product, in tabellen, in grafieken of achter lopende tekst.
- Het logo op het verloop: zie Logo.
Status
| Rol | Licht | Donker | Waar |
|---|---|---|---|
| Gelukt | #1F7A4D | #5FD3A3 | Opgeslagen, verzonden, 200, GET in de docs |
| Let op | #955800 | #F5D06B | Bijna aan je limiet, POST in de docs |
| Fout | #A61B1B | #FF8A73 | Iets ging mis, 4xx en 5xx |
Een status heeft altijd een icoon en tekst, nooit alleen een kleur.
Status en het verloop
Het verloop loopt van amber via koraal naar dieprood: dezelfde tinten als waarschuwen en fout. Op tint alleen houd je ze dus niet uit elkaar. Daarom drie regels:
- Nooit op hetzelfde vlak. Het verloop staat alleen in merkvlakken, statuskleuren alleen in het product en de docs.
- Nooit dezelfde kleur. Een statuskleur ligt minstens ΔE 5 (OKLab) van elke merkkleur, zodat ze nooit met het merk samenvallen.
- Nooit alleen kleur. Een status heeft een icoon en tekst.
Daarom is waarschuwen op donker lichtgeel #F5D06B en niet amber, en fout op licht #A61B1B en niet het dieprood van het verloop.
Selectie is een neutrale tint met een rand links in de tekstkleur. Focus is een ring van 2px in de tekstkleur. Links zijn tekstkleur met een onderstreping. Koraal is nooit de kleur van een knop, link, selectie of foutmelding.
Rollen
| Rol | Licht | Donker |
|---|---|---|
| bg | #FFFFFF | #08090D |
| surface | #FBFBFD | #0E0F15 |
| surface-high | #EFEEF5 | #1B1D27 |
| border | #E7E6EE | #22242F |
| border-strong | #8A8C9B | #5D6070 |
| text | #0D0E14 (19,3:1) | #F4F4F8 (18,1:1) |
| muted | #5F6273 (6,0:1) | #9A9CAB (7,3:1) |
De tokens zelf staan op Tokens.