Design Tokens
Colors
Section titled “Colors”Backgrounds
Section titled “Backgrounds”| Token | Description |
|---|---|
--bg | Primary background |
--bg-alt | Alternate/subtle background |
--border | Border color |
| Token | Description |
|---|---|
--fg | Primary text |
--fg-muted | Secondary text |
--fg-subtle | Tertiary text |
--fg-faint | Faint/disabled text |
Accent
Section titled “Accent”| Token | Description |
|---|---|
--accent | Primary accent color |
--accent-fg | Text on accent background |
Status
Section titled “Status”| Token | Description |
|---|---|
--success / --success-fg | Success state |
--error / --error-fg | Error state |
--warning / --warning-fg | Warning state |
--info / --info-fg | Info state |
Typography
Section titled “Typography”| Token | Value |
|---|---|
--font | System sans-serif stack |
--font-mono | System monospace stack |
--font-semibold | 600 |
--text-xs | 0.75rem |
--text-sm | 0.875rem |
--text-base | 1rem |
--text-lg | 1.125rem |
--text-xl | 1.25rem |
--text-2xl | 1.5rem |
--text-3xl | 1.875rem |
--text-4xl | 2.25rem |
Spacing
Section titled “Spacing”| Token | Value |
|---|---|
--space-xs | 0.25rem |
--space-sm | 0.35rem |
--space-md | 0.75rem |
--space-lg | 1.5rem |
--space-xl | 2.5rem |
| Token | Value |
|---|---|
--radius | 0.25rem |
--radius-lg | 0.5rem |
--shadow | Subtle shadow |
--shadow-lg | Larger shadow |
--transition | 150ms ease |