Data & media demo
Token map: table borders use color-muted, row hover uses color-surface, stat number reads text-h2, avatars resize via size-avatar-sm / size-avatar-md.
Data table with row actions
Table header: text-h4. Body: text-small. Borders: color-muted. Row hover: color-surface. Action icon size: size-icon-md.
| Name | Role | Actions | |
|---|---|---|---|
| Alice Martin | alice@example.com | Admin | |
| Bob Chen | bob@example.com | Editor | |
| Carol Davis | carol@example.com | Viewer | |
| Diana Prince | diana@example.com | Editor | |
| Evan Torres | evan@example.com | Viewer |
Media card
Container: color-surface + color-muted border. Image placeholder: CSS gradient, no network fetch. CTA: color-accent.
Intro to Design Tokens
Design tokens are the smallest atomic values in a design system — spacing, colour, typography — stored as CSS custom properties and shared across every component.
Stat cards
Big number: semantic font token text-h2 + color-primary. Label: text-small + color-muted. No hardcoded font-size.
Profile card
Avatar: size-avatar-md (tweak in panel to resize). Name: text-h4. Role: text-small color-muted.
Avatar row
Each avatar reads size-avatar-sm (tweak in panel to resize all at once). Background: palette-1–palette-4 via inline style.