Data & media demo
Token map: table borders use color-muted, row hover uses color-surface, stat number reads text-page-title, avatars resize via size-avatar-sm / size-avatar-md.
Data table with row actions
Table header: text-subsection-title. Body: text-helper. 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-page-title + color-primary. Label: text-helper + color-muted. No hardcoded font-size.
Profile card
Avatar: size-avatar-md (tweak in panel to resize). Name: text-subsection-title. Role: text-helper 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.