Token reference
66 semantic tokens point at 132 primitives. Components and the Baseline layer are meant to use the semantic tier; the primitives are the raw scales it maps from.
Semantic tokens
Section titled “Semantic tokens”colors
Section titled “colors”From packages/tokens/tokens/semantic/colors.json.
| Token | Points to | Resolves to | Purpose |
|---|---|---|---|
--color-bg-surface |
--color-white |
#ffffff |
Default background for surfaces like cards, panels |
--color-bg-raised |
--color-gray-50 |
#f9fafb |
Elevated surfaces, modals, popovers |
--color-bg-sunken |
--color-gray-100 |
#f3f4f6 |
Recessed areas, wells |
--color-bg-canvas |
--color-gray-50 |
#f9fafb |
Page/app background |
--color-bg-interactive |
--color-blue-600 |
#2563eb |
Primary interactive elements (buttons, links) |
--color-bg-interactive-hover |
--color-blue-700 |
#1d4ed8 |
Hover state for interactive elements |
--color-bg-interactive-active |
--color-blue-800 |
#1e40af |
Active/pressed state for interactive elements |
--color-bg-subtle |
--color-gray-100 |
#f3f4f6 |
Subtle background for secondary actions |
--color-bg-subtle-hover |
--color-gray-200 |
#e5e7eb |
Hover state for subtle backgrounds |
--color-text-primary |
--color-gray-900 |
#111827 |
Primary text color |
--color-text-secondary |
--color-gray-600 |
#4b5563 |
Secondary, less emphasized text |
--color-text-tertiary |
--color-gray-500 |
#6b7280 |
Tertiary, de-emphasized text |
--color-text-on-interactive |
--color-white |
#ffffff |
Text on interactive backgrounds |
--color-text-link |
--color-blue-600 |
#2563eb |
Link text color |
--color-text-link-hover |
--color-blue-700 |
#1d4ed8 |
Link hover color |
--color-text-disabled |
--color-gray-400 |
#9ca3af |
Disabled text |
--color-border-default |
--color-gray-200 |
#e5e7eb |
Default border color |
--color-border-strong |
--color-gray-300 |
#d1d5db |
Stronger borders for emphasis |
--color-border-subtle |
--color-gray-100 |
#f3f4f6 |
Subtle borders |
--color-border-interactive |
--color-blue-600 |
#2563eb |
Interactive element borders |
--color-border-focus |
--color-blue-500 |
#3b82f6 |
Focus ring color |
--color-border-error |
--color-red-500 |
#ef4444 |
Error state borders |
--color-border-success |
--color-green-500 |
#22c55e |
Success state borders |
--color-status-success-bg |
--color-green-50 |
#f0fdf4 |
|
--color-status-success-text |
--color-green-700 |
#15803d |
|
--color-status-success-border |
--color-green-200 |
#bbf7d0 |
|
--color-status-error-bg |
--color-red-50 |
#fef2f2 |
|
--color-status-error-text |
--color-red-700 |
#b91c1c |
|
--color-status-error-border |
--color-red-200 |
#fecaca |
|
--color-status-warning-bg |
--color-amber-50 |
#fffbeb |
|
--color-status-warning-text |
--color-amber-700 |
#b45309 |
|
--color-status-warning-border |
--color-amber-200 |
#fde68a |
|
--color-status-info-bg |
--color-blue-50 |
#eff6ff |
|
--color-status-info-text |
--color-blue-700 |
#1d4ed8 |
|
--color-status-info-border |
--color-blue-200 |
#bfdbfe |
spacing
Section titled “spacing”From packages/tokens/tokens/semantic/spacing.json.
| Token | Points to | Resolves to | Purpose |
|---|---|---|---|
--spacing-touch-target |
--space-11 |
2.75rem |
Smallest hit area for anything a finger has to press (WCAG 2.5.5) |
--spacing-card-padding |
--space-6 |
1.5rem |
Default padding for cards |
--spacing-card-gap |
--space-4 |
1rem |
Gap between card elements |
--spacing-button-padding-x |
--space-4 |
1rem |
Horizontal padding for buttons |
--spacing-button-padding-y |
--space-2 |
0.5rem |
Vertical padding for buttons |
--spacing-button-gap |
--space-2 |
0.5rem |
Gap between button icon and text |
--spacing-input-padding-x |
--space-3 |
0.75rem |
Horizontal padding for inputs |
--spacing-input-padding-y |
--space-2 |
0.5rem |
Vertical padding for inputs |
--spacing-section-padding |
--space-8 |
2rem |
Section padding |
--spacing-section-gap |
--space-6 |
1.5rem |
Gap between sections |
--spacing-page-padding-x |
--space-6 |
1.5rem |
Horizontal page gutters |
--spacing-page-padding-y |
--space-8 |
2rem |
Vertical page padding |
--spacing-stack-gap-tight |
--space-2 |
0.5rem |
|
--spacing-stack-gap-normal |
--space-4 |
1rem |
|
--spacing-stack-gap-loose |
--space-6 |
1.5rem |
|
--spacing-cluster-gap-tight |
--space-2 |
0.5rem |
|
--spacing-cluster-gap-normal |
--space-3 |
0.75rem |
|
--spacing-cluster-gap-loose |
--space-4 |
1rem |
typography
Section titled “typography”From packages/tokens/tokens/semantic/typography.json.
| Token | Points to | Resolves to | Purpose |
|---|---|---|---|
--typography-body-font-family |
--font-family-sans |
system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
|
--typography-body-font-size |
--font-size-base |
1rem |
|
--typography-body-font-weight |
--font-weight-normal |
400 |
|
--typography-body-line-height |
--font-lineHeight-normal |
1.5 |
|
--typography-heading-font-family |
--font-family-sans |
system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
|
--typography-heading-font-weight |
--font-weight-bold |
700 |
|
--typography-heading-line-height |
--font-lineHeight-tight |
1.25 |
|
--typography-label-font-size |
--font-size-sm |
0.875rem |
|
--typography-label-font-weight |
--font-weight-medium |
500 |
|
--typography-caption-font-size |
--font-size-xs |
0.75rem |
|
--typography-caption-line-height |
--font-lineHeight-snug |
1.375 |
|
--typography-code-font-family |
--font-family-mono |
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace |
|
--typography-code-font-size |
--font-size-sm |
0.875rem |
Primitives
Section titled “Primitives”colors
Section titled “colors”From packages/tokens/tokens/primitives/colors.json.
| Token | Value | Type |
|---|---|---|
--color-gray-50 |
#f9fafb |
color |
--color-gray-100 |
#f3f4f6 |
color |
--color-gray-200 |
#e5e7eb |
color |
--color-gray-300 |
#d1d5db |
color |
--color-gray-400 |
#9ca3af |
color |
--color-gray-500 |
#6b7280 |
color |
--color-gray-600 |
#4b5563 |
color |
--color-gray-700 |
#374151 |
color |
--color-gray-800 |
#1f2937 |
color |
--color-gray-900 |
#111827 |
color |
--color-gray-950 |
#030712 |
color |
--color-blue-50 |
#eff6ff |
color |
--color-blue-100 |
#dbeafe |
color |
--color-blue-200 |
#bfdbfe |
color |
--color-blue-300 |
#93c5fd |
color |
--color-blue-400 |
#60a5fa |
color |
--color-blue-500 |
#3b82f6 |
color |
--color-blue-600 |
#2563eb |
color |
--color-blue-700 |
#1d4ed8 |
color |
--color-blue-800 |
#1e40af |
color |
--color-blue-900 |
#1e3a8a |
color |
--color-blue-950 |
#172554 |
color |
--color-green-50 |
#f0fdf4 |
color |
--color-green-100 |
#dcfce7 |
color |
--color-green-200 |
#bbf7d0 |
color |
--color-green-300 |
#86efac |
color |
--color-green-400 |
#4ade80 |
color |
--color-green-500 |
#22c55e |
color |
--color-green-600 |
#16a34a |
color |
--color-green-700 |
#15803d |
color |
--color-green-800 |
#166534 |
color |
--color-green-900 |
#14532d |
color |
--color-green-950 |
#052e16 |
color |
--color-red-50 |
#fef2f2 |
color |
--color-red-100 |
#fee2e2 |
color |
--color-red-200 |
#fecaca |
color |
--color-red-300 |
#fca5a5 |
color |
--color-red-400 |
#f87171 |
color |
--color-red-500 |
#ef4444 |
color |
--color-red-600 |
#dc2626 |
color |
--color-red-700 |
#b91c1c |
color |
--color-red-800 |
#991b1b |
color |
--color-red-900 |
#7f1d1d |
color |
--color-red-950 |
#450a0a |
color |
--color-amber-50 |
#fffbeb |
color |
--color-amber-100 |
#fef3c7 |
color |
--color-amber-200 |
#fde68a |
color |
--color-amber-300 |
#fcd34d |
color |
--color-amber-400 |
#fbbf24 |
color |
--color-amber-500 |
#f59e0b |
color |
--color-amber-600 |
#d97706 |
color |
--color-amber-700 |
#b45309 |
color |
--color-amber-800 |
#92400e |
color |
--color-amber-900 |
#78350f |
color |
--color-amber-950 |
#451a03 |
color |
--color-white |
#ffffff |
color |
--color-black |
#000000 |
color |
motion
Section titled “motion”From packages/tokens/tokens/primitives/motion.json.
| Token | Value | Type |
|---|---|---|
--motion-duration-instant |
0ms |
duration |
--motion-duration-fast |
150ms |
duration |
--motion-duration-base |
250ms |
duration |
--motion-duration-slow |
350ms |
duration |
--motion-duration-slower |
500ms |
duration |
--motion-easing-linear |
cubic-bezier(0, 0, 1, 1) |
cubicBezier |
--motion-easing-in |
cubic-bezier(0.4, 0, 1, 1) |
cubicBezier |
--motion-easing-out |
cubic-bezier(0, 0, 0.2, 1) |
cubicBezier |
--motion-easing-inOut |
cubic-bezier(0.4, 0, 0.2, 1) |
cubicBezier |
--motion-easing-spring |
cubic-bezier(0.34, 1.56, 0.64, 1) |
cubicBezier |
From packages/tokens/tokens/primitives/radii.json.
| Token | Value | Type |
|---|---|---|
--radius-none |
0 |
dimension |
--radius-sm |
0.125rem |
dimension |
--radius-base |
0.25rem |
dimension |
--radius-md |
0.375rem |
dimension |
--radius-lg |
0.5rem |
dimension |
--radius-xl |
0.75rem |
dimension |
--radius-2xl |
1rem |
dimension |
--radius-3xl |
1.5rem |
dimension |
--radius-full |
9999px |
dimension |
shadows
Section titled “shadows”From packages/tokens/tokens/primitives/shadows.json.
| Token | Value | Type |
|---|---|---|
--shadow-sm |
0 1px 2px 0 rgba(0, 0, 0, 0.05) |
shadow |
--shadow-base |
0 1px 3px 0 rgba(0, 0, 0, 0.1) |
shadow |
--shadow-md |
0 4px 6px -1px rgba(0, 0, 0, 0.1) |
shadow |
--shadow-lg |
0 10px 15px -3px rgba(0, 0, 0, 0.1) |
shadow |
--shadow-xl |
0 20px 25px -5px rgba(0, 0, 0, 0.1) |
shadow |
--shadow-none |
0 0 0 0 transparent |
shadow |
spacing
Section titled “spacing”From packages/tokens/tokens/primitives/spacing.json.
| Token | Value | Type |
|---|---|---|
--space-0 |
0 |
dimension |
--space-1 |
0.25rem |
dimension |
--space-2 |
0.5rem |
dimension |
--space-3 |
0.75rem |
dimension |
--space-4 |
1rem |
dimension |
--space-5 |
1.25rem |
dimension |
--space-6 |
1.5rem |
dimension |
--space-7 |
1.75rem |
dimension |
--space-8 |
2rem |
dimension |
--space-10 |
2.5rem |
dimension |
--space-11 |
2.75rem |
dimension |
--space-12 |
3rem |
dimension |
--space-14 |
3.5rem |
dimension |
--space-16 |
4rem |
dimension |
--space-20 |
5rem |
dimension |
--space-24 |
6rem |
dimension |
--space-32 |
8rem |
dimension |
--space-40 |
10rem |
dimension |
--space-48 |
12rem |
dimension |
--space-56 |
14rem |
dimension |
--space-64 |
16rem |
dimension |
typography
Section titled “typography”From packages/tokens/tokens/primitives/typography.json.
| Token | Value | Type |
|---|---|---|
--font-family-sans |
system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
fontFamily |
--font-family-serif |
Georgia, Cambria, "Times New Roman", Times, serif |
fontFamily |
--font-family-mono |
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace |
fontFamily |
--font-size-xs |
0.75rem |
dimension |
--font-size-sm |
0.875rem |
dimension |
--font-size-base |
1rem |
dimension |
--font-size-lg |
1.125rem |
dimension |
--font-size-xl |
1.25rem |
dimension |
--font-size-2xl |
1.5rem |
dimension |
--font-size-3xl |
1.875rem |
dimension |
--font-size-4xl |
2.25rem |
dimension |
--font-size-5xl |
3rem |
dimension |
--font-size-6xl |
3.75rem |
dimension |
--font-size-7xl |
4.5rem |
dimension |
--font-weight-thin |
100 |
fontWeight |
--font-weight-extralight |
200 |
fontWeight |
--font-weight-light |
300 |
fontWeight |
--font-weight-normal |
400 |
fontWeight |
--font-weight-medium |
500 |
fontWeight |
--font-weight-semibold |
600 |
fontWeight |
--font-weight-bold |
700 |
fontWeight |
--font-weight-extrabold |
800 |
fontWeight |
--font-weight-black |
900 |
fontWeight |
--font-lineHeight-none |
1 |
number |
--font-lineHeight-tight |
1.25 |
number |
--font-lineHeight-snug |
1.375 |
number |
--font-lineHeight-normal |
1.5 |
number |
--font-lineHeight-relaxed |
1.625 |
number |
--font-lineHeight-loose |
2 |
number |