Design Tokens

Het Roosevelt design system gebruikt een twee-laags token architectuur geïnspireerd door Adyen/Bento: Core tokens definiëren rauwe waarden, Semantic tokens geven ze een rol.

Architectuur

Core Layer          →  Semantic Layer        →  Tailwind Utility
─────────────────────────────────────────────────────────────────
#5F2104             →  --color-brand         →  text-brand
#0A0F1A             →  --color-label-primary →  text-label-primary
#ffffff             →  --color-bg-primary    →  bg-surface-primary
14px                →  --text-body-size      →  text-body
8px                 →  --space-4             →  (custom spacing)

✦

Waarom semantic tokens?

Semantic tokens maken dark mode, theming en refactoring mogelijk zonder component-code aan te passen. Verander één token, en het hele systeem volgt.

Color Tokens

Brand

Token	Light	Dark	Tailwind
`--color-brand`	`#5F2104`	`#C4854A`	`text-brand` / `bg-brand`

Label (Text)

Token	Light	Dark	Tailwind	Rol
`--color-label-primary`	`#0A0F1A`	`#ededed`	`text-label-primary`	Hoofdtekst
`--color-label-secondary`	`#334155`	`#a1a1a1`	`text-label-secondary`	Subtekst
`--color-label-tertiary`	`#8d95a3`	`#737373`	`text-label-tertiary`	Placeholder, meta
`--color-label-critical`	`#DC2626`	`#DC2626`	`text-label-critical`	Errors
`--color-label-highlight`	`#3B82F6`	`#3B82F6`	`text-label-highlight`	Links, accenten
`--color-label-on-color`	`#ffffff`	`#ffffff`	`text-label-on-color`	Tekst op kleurvlak

Background (Surface)

Token	Light	Dark	Tailwind
`--color-bg-primary`	`#ffffff`	`#0a0a0a`	`bg-surface-primary`
`--color-bg-secondary`	`#F8FAFC`	`#171717`	`bg-surface-secondary`
`--color-bg-accent`	`#DBEAFE`	—	`bg-surface-accent`
`--color-bg-dark`	`#0A0F1A`	`#000000`	`bg-surface-dark`
`--color-bg-critical`	`#DC2626`	—	`bg-surface-critical`
`--color-bg-success`	`#059669`	—	`bg-surface-success`
`--color-bg-warning`	`#D97706`	—	`bg-surface-warning`

Outline (Border)

Token	Light	Dark	Tailwind
`--color-outline-default`	`#E2E8F0`	`#2a2a2a`	`border-outline`
`--color-outline-strong`	`#CBD5E1`	`#404040`	`border-outline-strong`
`--color-outline-active`	`#0A0F1A`	`#ededed`	`border-outline-active`

Typography Tokens

Token	Waarde	Tailwind
`--text-caption-size`	12px / 18px	`text-caption`
`--text-body-size`	14px / 20px	`text-body`
`--text-subtitle-size`	16px / 26px	`text-subtitle`
`--text-title-size`	16px / 26px	`text-title`
`--text-title-l-size`	24px / 32px	`text-title-l`
`--text-display-size`	39px / 1.1	`text-display`
`--text-hero-size`	49px / 1.1	`text-hero`

Spacing Tokens

Gebaseerd op een 2px grid (geen 7, 9 of 11 — bewust weggelaten).

Token	Waarde	Token	Waarde
`--space-0`	0px	`--space-10`	20px
`--space-1`	2px	`--space-12`	24px
`--space-2`	4px	`--space-16`	32px
`--space-3`	6px	`--space-20`	40px
`--space-4`	8px	`--space-24`	48px
`--space-5`	10px	`--space-28`	56px
`--space-6`	12px	`--space-32`	64px
`--space-8`	16px

Radius Tokens

Token	Waarde	Gebruik
`--radius-xs`	2px	Badges, tags
`--radius-s`	4px	Buttons, inputs
`--radius-m`	8px	Cards
`--radius-l`	12px	Modals, grote cards
`--radius-xl`	24px	Pills, volledig afgerond

Shadow Tokens

Token	Waarde	Gebruik
`--shadow-low`	`0px 2px 4px rgba(10,15,26,0.04), 0px 1px 2px rgba(10,15,26,0.02)`	Cards standaard
`--shadow-md`	`0 4px 6px rgba(10,15,26,0.07)`	Hover states
`--shadow-lg`	`0 10px 15px rgba(10,15,26,0.1)`	Modals, overlays

Motion Tokens

Token	Waarde	Gebruik
`--transition-fast`	`150ms ease`	Hover, focus states
`--transition-base`	`250ms ease`	Layout changes, modals

Token Override Voorbeeld

/* globals.css — dark mode override via semantic layer */
@media (prefers-color-scheme: dark) {
  :root {
    --color-brand: #C4854A;
    --color-label-primary: #ededed;
    --color-bg-primary: #0a0a0a;
  }
}

Design Tokens

On this page