Colors
Semantisch kleurenpalet met brand, label, surface en outline rollen
Colors
Het kleurensysteem is opgebouwd rond semantische rollen, niet specifieke hex-waarden. Elke kleur heeft een duidelijke functie.
Brand
#5F2104 is het ankerpunt — een warm, donker bruin dat Roosevelt's Art Deco identiteit weerspiegelt.
| Context | Waarde | Contrast | WCAG |
|---|---|---|---|
| Light mode | #5F2104 | 12.31:1 op wit | AAA |
| Dark mode | #C4854A | 4.6:1 op #0a0a0a | AA |
Brand Light
--color-brand
#5F2104
Brand Dark
--color-brand
#C4854A
Semantic Color Rollen
Label (Tekst)
| Token | Rol | Light | Dark |
|---|---|---|---|
label-primary | Hoofdtekst, headings | #0A0F1A | #ededed |
label-secondary | Subtekst, beschrijvingen | #334155 | #a1a1a1 |
label-tertiary | Placeholder, metadata | #8d95a3 | #737373 |
label-critical | Error berichten | #DC2626 | #DC2626 |
label-highlight | Links, interactieve accenten | #3B82F6 | #3B82F6 |
label-on-color | Tekst op kleurvlakken | #ffffff | #ffffff |
Label Primary
--color-label-primary
#0A0F1A
Label Secondary
--color-label-secondary
#334155
Label Tertiary
--color-label-tertiary
#8d95a3
Label Critical
--color-label-critical
#DC2626
Label Highlight
--color-label-highlight
#3B82F6
Label On Color
--color-label-on-color
#ffffff
Surface (Achtergrond)
| Token | Rol | Light | Dark |
|---|---|---|---|
surface-primary | Pagina achtergrond | #ffffff | #0a0a0a |
surface-secondary | Cards, secties | #F8FAFC | #171717 |
surface-accent | Highlights, selected | #DBEAFE | — |
surface-dark | Dark sections, footer | #0A0F1A | #000000 |
surface-critical | Error achtergrond | #DC2626 | — |
surface-success | Positieve feedback | #059669 | — |
surface-warning | Waarschuwingen | #D97706 | — |
Surface Primary
--color-bg-primary
#ffffff
Surface Secondary
--color-bg-secondary
#F8FAFC
Surface Accent
--color-bg-accent
#DBEAFE
Surface Dark
--color-bg-dark
#0A0F1A
Surface Critical
--color-bg-critical
#DC2626
Surface Success
--color-bg-success
#059669
Surface Warning
--color-bg-warning
#D97706
Outline (Border)
| Token | Rol | Light | Dark |
|---|---|---|---|
outline-default | Standaard borders | #E2E8F0 | #2a2a2a |
outline-strong | Input borders, emphasis | #CBD5E1 | #404040 |
outline-active | Focus rings, active state | #0A0F1A | #ededed |
Outline Default
--color-outline-default
#E2E8F0
Outline Strong
--color-outline-strong
#CBD5E1
Outline Active
--color-outline-active
#0A0F1A
Wanneer Welk Token?
| Situatie | Token |
|---|---|
| Hoofdtekst | label-primary |
| Beschrijving onder heading | label-secondary |
| Timestamp, meta-info | label-tertiary |
| Error message | label-critical |
| Link of interactief element | label-highlight |
| Tekst op een gekleurde button | label-on-color |
| Pagina achtergrond | surface-primary |
| Card achtergrond | surface-secondary |
| Logo tekst | brand met font-logo |
Don'ts
Gebruik --color-brand (#5F2104) nooit als body tekst — het is bedoeld voor grote branding elementen. Op dark backgrounds is het onleesbaar; gebruik dan --color-label-primary.