Roosevelt Docs

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.

ContextWaardeContrastWCAG
Light mode#5F210412.31:1 op witAAA
Dark mode#C4854A4.6:1 op #0a0a0aAA

Brand Light

--color-brand

#5F2104

Brand Dark

--color-brand

#C4854A

Semantic Color Rollen

Label (Tekst)

TokenRolLightDark
label-primaryHoofdtekst, headings#0A0F1A#ededed
label-secondarySubtekst, beschrijvingen#334155#a1a1a1
label-tertiaryPlaceholder, metadata#8d95a3#737373
label-criticalError berichten#DC2626#DC2626
label-highlightLinks, interactieve accenten#3B82F6#3B82F6
label-on-colorTekst 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)

TokenRolLightDark
surface-primaryPagina achtergrond#ffffff#0a0a0a
surface-secondaryCards, secties#F8FAFC#171717
surface-accentHighlights, selected#DBEAFE
surface-darkDark sections, footer#0A0F1A#000000
surface-criticalError achtergrond#DC2626
surface-successPositieve feedback#059669
surface-warningWaarschuwingen#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)

TokenRolLightDark
outline-defaultStandaard borders#E2E8F0#2a2a2a
outline-strongInput borders, emphasis#CBD5E1#404040
outline-activeFocus 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?

SituatieToken
Hoofdtekstlabel-primary
Beschrijving onder headinglabel-secondary
Timestamp, meta-infolabel-tertiary
Error messagelabel-critical
Link of interactief elementlabel-highlight
Tekst op een gekleurde buttonlabel-on-color
Pagina achtergrondsurface-primary
Card achtergrondsurface-secondary
Logo tekstbrand 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.

On this page