Design Tokens
Design Tokens
Section titled “Design Tokens”| Token | Value | Use |
|---|---|---|
color.canvas | #010102 | Page and preview background |
color.surface.1 | #101114 | Cards and raised surfaces |
color.surface.2 | #181a20 | Hovered or nested surface |
color.surface.3 | #23252a | Strong surface and borders |
color.ink | #f7f8f8 | Primary text on dark |
color.inkMuted | #a9adb7 | Secondary text |
color.hairline | #23252a | Default border |
color.primary | #5e6ad2 | Primary action and focus |
color.primaryHover | #828fff | Primary hover |
color.primaryFocus | #5e69d1 | Focus ring |
Typography
Section titled “Typography”| Token | Value | Use |
|---|---|---|
font.sans | Inter, ui-sans-serif, system-ui, sans-serif | Product UI |
font.mono | ui-monospace, SFMono-Regular, Menlo, monospace | Code, IDs, technical values |
type.display.lg | 56px / 1.1 / 600 | Section opener |
type.heading.md | 24px / 1.25 / 600 | Panel and page heading |
type.body.md | 16px / 1.6 / 400 | Body text |
type.body.sm | 14px / 1.5 / 400 | Control text and captions |
Spacing, Radius, Shadow
Section titled “Spacing, Radius, Shadow”| Token | Value |
|---|---|
space.1 | 4px |
space.2 | 8px |
space.3 | 12px |
space.4 | 16px |
space.6 | 24px |
space.8 | 32px |
radius.sm | 6px |
radius.md | 8px |
radius.lg | 12px |
radius.xl | 16px |
shadow.panel | 0 12px 32px rgb(0 0 0 / 0.28) |
Motion
Section titled “Motion”| Token | Value |
|---|---|
motion.fast | 120ms |
motion.base | 180ms |
motion.slow | 260ms |
motion.ease.out | cubic-bezier(0.16, 1, 0.3, 1) |