This page demonstrates all design token utilities working together. Toggle between light and dark mode to see theme switching.
This card demonstrates all design token utilities working together. Notice how colors, spacing, typography, and shadows all come from our token system. Everything adapts automatically in dark mode.
Created with design tokens
bg-app
Background color
bg-card
Card background
bg-badge
Badge background
bg-modal
Modal background
gap-tiny (2px)
gap-small (6px)
gap-medium (8px)
gap-large (12px)
gap-section (16px)
font-size-title (18px) - Large headings
font-size-body (13px) - Regular body text
font-size-small (12px) - Small captions and labels
font-weight-regular (400) - Normal weight
font-weight-medium (500) - Medium weight
font-family-primary - Inter font
font-family-secondary - Geist font
radius-card
4px radius
radius-modal
8px radius
shadow-modal
Large shadow for modal dialogs
This demonstrates multiple utilities working together seamlessly.
All colors, spacing, typography, borders, and shadows use design tokens