Design System

Het Roosevelt design system volgt Atomic Design principes, van tokens tot pages. De architectuur is geïnspireerd door Adyen/Bento: een twee-laags token systeem waar Core tokens rauwe waarden definiëren en Semantic tokens ze een rol geven.

Token Architectuur

Core Layer (hex waarden, px)
    ↓
Semantic Layer (--color-brand, --text-body-size)
    ↓
Tailwind Utilities (text-brand, text-body, bg-surface-primary)

Wijzig één semantic token en het hele systeem — inclusief dark mode — volgt automatisch.