Token reference
Generated by
scripts/build-tokens.mjsfrom the Figma variables. Do not edit by hand.
Every token is a CSS variable available in css/styles.css and tailwind/theme.css. Figma names use /; code uses -.
Color · primitives
| Variable | Value |
|---|---|
--color-surface-50 |
#ffffff |
--color-surface-100 |
#f7f9fd |
--color-surface-200 |
#ecedee |
--color-surface-300 |
#cbcfd2 |
--color-surface-400 |
#a7aeb4 |
--color-surface-500 |
#8e979f |
--color-surface-600 |
#6b767f |
--color-surface-700 |
#4f575e |
--color-surface-800 |
#33383d |
--color-surface-900 |
#202327 |
--color-primary-50 |
#f8f5ff |
--color-primary-100 |
#e3d7ff |
--color-primary-200 |
#cebafe |
--color-primary-300 |
#b99cfc |
--color-primary-400 |
#9b76fa |
--color-primary-500 |
#7d49f8 |
--color-primary-600 |
#6528f7 |
--color-primary-700 |
#501bce |
--color-primary-800 |
#4017a8 |
--color-primary-900 |
#350192 |
--color-secondary-50 |
#e8f1fc |
--color-secondary-100 |
#c1daf8 |
--color-secondary-200 |
#9cc2f4 |
--color-secondary-300 |
#77a9ee |
--color-secondary-400 |
#4c8ce7 |
--color-secondary-500 |
#1b6ddf |
--color-secondary-600 |
#175ec1 |
--color-secondary-700 |
#1450a3 |
--color-secondary-800 |
#114388 |
--color-secondary-900 |
#0e376f |
--color-success-50 |
#f6fefb |
--color-success-100 |
#caf1e2 |
--color-success-200 |
#9de3c8 |
--color-success-300 |
#6bd4ac |
--color-success-400 |
#1bc590 |
--color-success-500 |
#16a377 |
--color-success-600 |
#12825f |
--color-success-700 |
#0e674b |
--color-success-800 |
#0a4834 |
--color-success-900 |
#073929 |
--color-warning-50 |
#fffdfa |
--color-warning-100 |
#fcecd7 |
--color-warning-200 |
#f9dbb5 |
--color-warning-300 |
#f6c487 |
--color-warning-400 |
#f2ab53 |
--color-warning-500 |
#ee9322 |
--color-warning-600 |
#c97a18 |
--color-warning-700 |
#a6620d |
--color-warning-800 |
#8c5414 |
--color-warning-900 |
#7b4706 |
--color-danger-50 |
#fbeaea |
--color-danger-100 |
#f8cbcb |
--color-danger-200 |
#f2acab |
--color-danger-300 |
#ea8c8b |
--color-danger-400 |
#e16b6b |
--color-danger-500 |
#c92929 |
--color-danger-600 |
#a92323 |
--color-danger-700 |
#8b1d1d |
--color-danger-800 |
#6e1717 |
--color-danger-900 |
#581111 |
--color-neutral-dark-50 |
#8e9398 |
--color-neutral-dark-100 |
#74787d |
--color-neutral-dark-200 |
#5a5e63 |
--color-neutral-dark-300 |
#44484d |
--color-neutral-dark-400 |
#35383d |
--color-neutral-dark-500 |
#282c30 |
--color-neutral-dark-600 |
#1e2226 |
--color-neutral-dark-700 |
#181b1f |
--color-neutral-dark-800 |
#111418 |
--color-neutral-dark-900 |
#0a0e12 |
--color-alpha-primary-10 |
#7d49f81a |
--color-alpha-primary-20 |
#7d49f833 |
--color-alpha-secondary-10 |
#1b6ddf1a |
--color-alpha-secondary-20 |
#1b6ddf33 |
--color-alpha-success-10 |
#16a3771a |
--color-alpha-success-20 |
#16a37733 |
--color-alpha-warning-10 |
#ee93221a |
--color-alpha-warning-20 |
#ee932233 |
--color-alpha-danger-10 |
#c929291a |
--color-alpha-danger-20 |
#c9292933 |
--color-alpha-black-5 |
#0a0e120d |
--color-alpha-black-10 |
#0a0e121a |
--color-alpha-black-60 |
#0a0e1299 |
--color-alpha-black-80 |
#0a0e12cc |
--color-alpha-white-5 |
#ffffff0d |
--color-alpha-white-10 |
#ffffff1a |
--color-alpha-white-20 |
#ffffff33 |
--color-alpha-black-25 |
#0a0e1240 |
--color-alpha-black-40 |
#0a0e1266 |
--color-alpha-primary-30 |
#7d49f84d |
--color-alpha-secondary-30 |
#1b6ddf4d |
--color-alpha-success-30 |
#16a3774d |
--color-alpha-warning-30 |
#ee93224d |
--color-alpha-danger-30 |
#c929294d |
Color · semantic (light / dark)
| Variable | Light | Dark |
|---|---|---|
--color-bg-canvas |
→ --color-surface-100 |
→ --color-neutral-dark-800 |
--color-bg-surface |
→ --color-surface-50 |
→ --color-neutral-dark-700 |
--color-bg-surface-raised |
→ --color-surface-50 |
→ --color-neutral-dark-600 |
--color-bg-surface-sunken |
→ --color-surface-200 |
→ --color-neutral-dark-900 |
--color-bg-inverse |
→ --color-surface-900 |
→ --color-surface-50 |
--color-bg-overlay |
→ --color-alpha-black-60 |
→ --color-alpha-black-80 |
--color-bg-brand-subtle |
→ --color-primary-50 |
→ --color-alpha-primary-20 |
--color-bg-info-subtle |
→ --color-secondary-50 |
→ --color-alpha-secondary-20 |
--color-bg-success-subtle |
→ --color-success-50 |
→ --color-alpha-success-20 |
--color-bg-warning-subtle |
→ --color-warning-50 |
→ --color-alpha-warning-20 |
--color-bg-danger-subtle |
→ --color-danger-50 |
→ --color-alpha-danger-20 |
--color-text-primary |
→ --color-surface-900 |
→ --color-surface-50 |
--color-text-secondary |
→ --color-surface-700 |
→ --color-surface-300 |
--color-text-tertiary |
→ --color-surface-600 |
→ --color-surface-400 |
--color-text-disabled |
→ --color-surface-500 |
→ --color-neutral-dark-100 |
--color-text-inverse |
→ --color-surface-50 |
→ --color-surface-900 |
--color-text-on-action |
→ --color-surface-50 |
→ --color-surface-50 |
--color-text-on-warning |
→ --color-surface-900 |
→ --color-surface-900 |
--color-text-brand |
→ --color-primary-600 |
→ --color-primary-300 |
--color-text-link |
→ --color-secondary-600 |
→ --color-secondary-300 |
--color-text-success |
→ --color-success-700 |
→ --color-success-400 |
--color-text-warning |
→ --color-warning-800 |
→ --color-warning-400 |
--color-text-danger |
→ --color-danger-600 |
→ --color-danger-400 |
--color-icon-primary |
→ --color-surface-900 |
→ --color-surface-50 |
--color-icon-secondary |
→ --color-surface-600 |
→ --color-surface-400 |
--color-icon-disabled |
→ --color-surface-500 |
→ --color-neutral-dark-100 |
--color-icon-inverse |
→ --color-surface-50 |
→ --color-surface-900 |
--color-icon-on-action |
→ --color-surface-50 |
→ --color-surface-50 |
--color-icon-brand |
→ --color-primary-500 |
→ --color-primary-300 |
--color-icon-info |
→ --color-secondary-500 |
→ --color-secondary-300 |
--color-icon-success |
→ --color-success-600 |
→ --color-success-400 |
--color-icon-warning |
→ --color-warning-500 |
→ --color-warning-400 |
--color-icon-danger |
→ --color-danger-500 |
→ --color-danger-400 |
--color-border-default |
→ --color-surface-300 |
→ --color-neutral-dark-400 |
--color-border-subtle |
→ --color-surface-200 |
→ --color-neutral-dark-500 |
--color-border-strong |
→ --color-surface-500 |
→ --color-neutral-dark-200 |
--color-border-focus |
→ --color-primary-500 |
→ --color-primary-300 |
--color-border-disabled |
→ --color-surface-300 |
→ --color-neutral-dark-500 |
--color-border-brand |
→ --color-primary-500 |
→ --color-primary-400 |
--color-border-success |
→ --color-success-600 |
→ --color-success-400 |
--color-border-warning |
→ --color-warning-500 |
→ --color-warning-400 |
--color-border-danger |
→ --color-danger-500 |
→ --color-danger-400 |
--color-action-primary-default |
→ --color-primary-500 |
→ --color-primary-500 |
--color-action-primary-hover |
→ --color-primary-600 |
→ --color-primary-600 |
--color-action-primary-pressed |
→ --color-primary-700 |
→ --color-primary-700 |
--color-action-primary-subtle |
→ --color-primary-50 |
→ --color-alpha-primary-10 |
--color-action-neutral-default |
→ --color-surface-50 |
→ --color-neutral-dark-700 |
--color-action-neutral-hover |
→ --color-surface-100 |
→ --color-neutral-dark-600 |
--color-action-neutral-pressed |
→ --color-surface-200 |
→ --color-neutral-dark-500 |
--color-action-danger-default |
→ --color-danger-500 |
→ --color-danger-500 |
--color-action-danger-hover |
→ --color-danger-600 |
→ --color-danger-600 |
--color-action-danger-pressed |
→ --color-danger-700 |
→ --color-danger-700 |
--color-action-success-default |
→ --color-success-600 |
→ --color-success-600 |
--color-action-success-hover |
→ --color-success-700 |
→ --color-success-700 |
--color-action-success-pressed |
→ --color-success-800 |
→ --color-success-800 |
--color-action-warning-default |
→ --color-warning-400 |
→ --color-warning-400 |
--color-action-warning-hover |
→ --color-warning-500 |
→ --color-warning-300 |
--color-action-warning-pressed |
→ --color-warning-600 |
→ --color-warning-500 |
--color-action-disabled |
→ --color-surface-200 |
→ --color-neutral-dark-500 |
--color-shadow-subtle |
→ --color-alpha-black-5 |
→ --color-alpha-black-40 |
--color-shadow-default |
→ --color-alpha-black-10 |
→ --color-alpha-black-60 |
--color-shadow-strong |
→ --color-alpha-black-25 |
→ --color-alpha-black-80 |
--color-bg-contrast |
→ --color-surface-900 |
→ --color-neutral-dark-900 |
--color-text-on-contrast |
→ --color-surface-50 |
→ --color-surface-50 |
--color-text-on-contrast-secondary |
→ --color-surface-300 |
→ --color-surface-300 |
--color-icon-on-contrast |
→ --color-surface-50 |
→ --color-surface-50 |
--color-action-primary-subtle-hover |
→ --color-primary-100 |
→ --color-alpha-primary-20 |
--color-action-primary-subtle-pressed |
→ --color-primary-200 |
→ --color-alpha-primary-30 |
--color-action-danger-subtle |
→ --color-danger-50 |
→ --color-alpha-danger-10 |
--color-action-danger-subtle-hover |
→ --color-danger-100 |
→ --color-alpha-danger-20 |
--color-action-danger-subtle-pressed |
→ --color-danger-200 |
→ --color-alpha-danger-30 |
--color-action-success-subtle |
→ --color-success-50 |
→ --color-alpha-success-10 |
--color-action-success-subtle-hover |
→ --color-success-100 |
→ --color-alpha-success-20 |
--color-action-success-subtle-pressed |
→ --color-success-200 |
→ --color-alpha-success-30 |
--color-action-warning-subtle |
→ --color-warning-50 |
→ --color-alpha-warning-10 |
--color-action-warning-subtle-hover |
→ --color-warning-100 |
→ --color-alpha-warning-20 |
--color-action-warning-subtle-pressed |
→ --color-warning-200 |
→ --color-alpha-warning-30 |
--color-action-neutral-subtle |
→ --color-surface-200 |
→ --color-neutral-dark-600 |
--color-action-neutral-subtle-hover |
→ --color-surface-300 |
→ --color-neutral-dark-500 |
--color-action-neutral-subtle-pressed |
→ --color-surface-400 |
→ --color-neutral-dark-400 |
--color-action-inverse-default |
→ --color-surface-900 |
→ --color-surface-50 |
--color-action-inverse-hover |
→ --color-surface-800 |
→ --color-surface-200 |
--color-action-inverse-pressed |
→ --color-surface-700 |
→ --color-surface-300 |
--color-action-info-default |
#1b6ddf |
#1b6ddf |
Space
| Variable | Value |
|---|---|
--space-0 |
0 |
--space-0_5 |
0.125rem |
--space-1 |
0.25rem |
--space-1_5 |
0.375rem |
--space-2 |
0.5rem |
--space-2_5 |
0.625rem |
--space-3 |
0.75rem |
--space-3_5 |
0.875rem |
--space-4 |
1rem |
--space-5 |
1.25rem |
--space-6 |
1.5rem |
--space-7 |
1.75rem |
--space-8 |
2rem |
--space-9 |
2.25rem |
--space-10 |
2.5rem |
--space-11 |
2.75rem |
--space-12 |
3rem |
--space-14 |
3.5rem |
--space-16 |
4rem |
--space-20 |
5rem |
--space-24 |
6rem |
--space-28 |
7rem |
--space-32 |
8rem |
--space-36 |
9rem |
--space-40 |
10rem |
--space-44 |
11rem |
--space-48 |
12rem |
--space-52 |
13rem |
--space-56 |
14rem |
--space-60 |
15rem |
--space-64 |
16rem |
--space-72 |
18rem |
--space-80 |
20rem |
--space-96 |
24rem |
Size
| Variable | Value |
|---|---|
--size-icon-xs |
→ --space-3 |
--size-icon-sm |
→ --space-4 |
--size-icon-md |
→ --space-5 |
--size-icon-lg |
→ --space-6 |
--size-icon-xl |
→ --space-8 |
--size-control-sm |
→ --space-8 |
--size-control-md |
→ --space-10 |
--size-control-lg |
→ --space-12 |
--size-touch-target |
→ --space-11 |
--size-avatar-sm |
→ --space-6 |
--size-avatar-md |
→ --space-8 |
--size-avatar-lg |
→ --space-10 |
--size-avatar-xl |
→ --space-14 |
--size-chip-sm |
→ --space-6 |
--size-chip-md |
→ --space-8 |
Radius
| Variable | Value |
|---|---|
--radius-none |
0 |
--radius-xs |
0.125rem |
--radius-sm |
0.25rem |
--radius-md |
0.375rem |
--radius-lg |
0.5rem |
--radius-xl |
0.75rem |
--radius-2xl |
1rem |
--radius-3xl |
1.5rem |
--radius-4xl |
2rem |
--radius-full |
9999px |
--radius-control |
→ --radius-lg |
--radius-badge |
→ --radius-sm |
--radius-card |
→ --radius-xl |
--radius-overlay |
→ --radius-lg |
--radius-dialog |
→ --radius-2xl |
--radius-pill |
→ --radius-full |
Border
| Variable | Value |
|---|---|
--border-width-0 |
0px |
--border-width-1 |
1px |
--border-width-2 |
2px |
--border-width-4 |
4px |
--focus-ring-width |
→ --border-width-2 |
--focus-ring-offset |
2px |
Opacity
| Variable | Value |
|---|---|
--opacity-0 |
0 |
--opacity-5 |
0.05 |
--opacity-10 |
0.1 |
--opacity-20 |
0.2 |
--opacity-25 |
0.25 |
--opacity-40 |
0.4 |
--opacity-50 |
0.5 |
--opacity-60 |
0.6 |
--opacity-75 |
0.75 |
--opacity-80 |
0.8 |
--opacity-90 |
0.9 |
--opacity-100 |
1 |
--opacity-disabled |
→ --opacity-40 |
--opacity-hover-overlay |
→ --opacity-10 |
Effects
| Variable | Value |
|---|---|
--blur-xs |
4px |
--blur-sm |
8px |
--blur-md |
12px |
--blur-lg |
16px |
--blur-xl |
24px |
--blur-2xl |
40px |
--blur-3xl |
64px |
Motion
| Variable | Value |
|---|---|
--duration-instant |
75ms |
--duration-fast |
150ms |
--duration-base |
200ms |
--duration-slow |
300ms |
--duration-slower |
500ms |
--ease-standard |
cubic-bezier(0.4, 0, 0.2, 1) |
--ease-enter |
cubic-bezier(0, 0, 0.2, 1) |
--ease-exit |
cubic-bezier(0.4, 0, 1, 1) |
Z-index
| Variable | Value |
|---|---|
--z-base |
0 |
--z-raised |
10 |
--z-dropdown |
1000 |
--z-sticky |
1100 |
--z-overlay |
1300 |
--z-modal |
1400 |
--z-popover |
1500 |
--z-toast |
1600 |
--z-tooltip |
1700 |
Breakpoints
| Variable | Value |
|---|---|
--breakpoint-sm |
40rem |
--breakpoint-md |
48rem |
--breakpoint-lg |
64rem |
--breakpoint-xl |
80rem |
--breakpoint-2xl |
96rem |
Typography · text sizes
| Variable | Size | Line height | Letter spacing | Tailwind |
|---|---|---|---|---|
--text-display |
128px | 1.2 | -0.025em | text-display |
--text-heading-xxl |
96px | 1.2 | -0.025em | text-heading-xxl |
--text-heading-xl |
72px | 1.2 | -0.025em | text-heading-xl |
--text-heading-lg |
60px | 1.2 | -0.025em | text-heading-lg |
--text-heading-md |
48px | 1.2 | -0.025em | text-heading-md |
--text-heading-sm |
36px | 1.2 | 0 | text-heading-sm |
--text-heading-xs |
30px | 1.35 | 0 | text-heading-xs |
--text-title-md |
24px | 1.35 | 0 | text-title-md |
--text-title-sm |
20px | 1.35 | 0 | text-title-sm |
--text-body-xl |
18px | 1.5 | 0 | text-body-xl |
--text-body-lg |
16px | 1.5 | 0 | text-body-lg |
--text-body-md |
14px | 1.5 | 0 | text-body-md |
--text-body-sm |
12px | 1.5 | 0 | text-body-sm |
--text-caption |
10px | 1.5 | 0.025em | text-caption |
Shadow & elevation
| Variable | Tailwind |
|---|---|
--shadow-elevation-raised |
shadow-elevation-raised |
--shadow-elevation-sticky |
shadow-elevation-sticky |
--shadow-elevation-overlay |
shadow-elevation-overlay |
--shadow-elevation-dialog |
shadow-elevation-dialog |
--shadow-2xs |
shadow-2xs |
--shadow-xs |
shadow-xs |
--shadow-sm |
shadow-sm |
--shadow-md |
shadow-md |
--shadow-lg |
shadow-lg |
--shadow-xl |
shadow-xl |
--shadow-2xl |
shadow-2xl |
--shadow-inset-xs |
shadow-inset-xs |
--shadow-focus-ring |
shadow-focus-ring |
Layout (responsive)
| Variable | base | sm | md | lg | xl | 2xl |
|---|---|---|---|---|---|---|
--grid-columns |
4 | 4 | 8 | 12 | 12 | 12 |
--grid-gutter |
--space-4 |
--space-4 |
--space-6 |
--space-6 |
--space-6 |
--space-8 |
--grid-margin |
--space-4 |
--space-4 |
--space-8 |
--space-10 |
--space-16 |
--space-20 |
--container-max-width |
360 | --breakpoint-sm |
--breakpoint-md |
--breakpoint-lg |
--breakpoint-xl |
--breakpoint-2xl |
--card-min-width |
156 | 180 | 200 | 220 | 240 | 260 |
--section-gap |
--space-12 |
--space-12 |
--space-16 |
--space-16 |
--space-20 |
--space-24 |
--stack-gap |
--space-4 |
--space-4 |
--space-6 |
--space-6 |
--space-8 |
--space-8 |