All TokensComplete reference for spacing, color, radius, typography, shadow, motion, and size tokens.
Color TokensSemantic colors for consistent theming. All colors use light-dark() for automatic mode switching.
| Token | Value |
|---|---|
| --color-accent | #0064E0 / #2694FE |
| --color-accent-muted | #0082FB33 / #0082FB3F |
| --color-on-accent | #FFFFFF |
| --color-neutral | rgba(5 / 54, 89, 0.1), rgba(223, 226, 229, 0.2) |
| --color-background-surface | #FFFFFF / #1F1F22 |
| --color-background-body | #F1F4F7 / #111112 |
| --color-overlay | #01122866 / #11111299 |
| --color-overlay-hover | #0536590C / #FFFFFF0C |
| --color-overlay-pressed | #05365919 / #FFFFFF19 |
| --color-background-muted | #0536590C / #1111127F |
| --color-text-primary | #0A1317 / #DFE2E5 |
| --color-text-secondary | #4E606F / #AAAFB5 |
| --color-text-disabled | #A4B0BC / #6F747C |
| --color-text-accent | #0064E0 / #3E9EFB |
| --color-on-dark | #FFFFFF |
| --color-on-light | #000000 |
| --color-icon-accent | #0064E0 / #2694FE |
| --color-icon-primary | #0A1317 / #DFE2E5 |
| --color-icon-secondary | #4E606F / #AAAFB5 |
| --color-icon-disabled | #A4B0BC / #6F747C |
| --color-background-card | #FFFFFF / #1F1F22 |
| --color-background-popover | #FFFFFF / #28292C |
| --color-background-inverted | #0A1317 / #FFFFFF |
| --color-background-error-inverted | #AA071E / #E3193B |
| --color-success | #0D8626 |
| --color-success-muted | #0B991F33 / #0B991F3F |
| --color-on-success | #FFFFFF |
| --color-error | #E3193B / #F5394F |
| --color-error-muted | #E3193B33 / #F5394F3F |
| --color-on-error | #FFFFFF |
| --color-warning | #E9AF08 / #F2C00B |
| --color-warning-muted | #E2A40033 / #E2A4003F |
| --color-on-warning | #0A1317 |
| --color-border | #05365919 / #F2F4F619 |
| --color-border-emphasized | #CCD3DB / #494D53 |
| --color-skeleton | #CCD3DB / #5A5E66 |
| --color-track | #CCD3DB / #5A5E66 |
| --color-shadow | rgba(5 / 54, 89, 0.1), rgba(0, 0, 0, 0.3) |
| --color-tint-hover | black / white |
| --color-background-blue | #0171E333 |
| --color-border-blue | #0064E0 / #2694FE |
| --color-icon-blue | #0064E0 / #2694FE |
| --color-text-blue | #042F97 / #AFD7FF |
| --color-background-cyan | #03A7D733 |
| --color-border-cyan | #089DD0 / #0171A4 |
| --color-icon-cyan | #00ACC1 / #26C6DA |
| --color-text-cyan | #014975 / #A1EEF9 |
| --color-background-gray | #0A131733 / #666A724C |
| --color-border-gray | #647685 / #748695 |
| --color-icon-gray | #4E606F / #AAAFB5 |
| --color-text-gray | #0A1317 / #E7EAED |
| --color-background-green | #24BB5E33 |
| --color-border-green | #0D8626 / #0B991F |
| --color-icon-green | #0D8626 / #26A756 |
| --color-text-green | #09441F / #A5F690 |
| --color-background-orange | #F2790233 |
| --color-border-orange | #EB6E00 / #B34A01 |
| --color-icon-orange | #E9690B / #FB8C00 |
| --color-text-orange | #6B2203 / #FDB876 |
| --color-background-pink | #E638B333 |
| --color-border-pink | #F351C0 / #C02294 |
| --color-icon-pink | #C2185B / #EC407A |
| --color-text-pink | #650053 / #FEADE3 |
| --color-background-purple | #7952FF33 |
| --color-border-purple | #9081FF / #7340FE |
| --color-icon-purple | #5B08D8 / #7952FF |
| --color-text-purple | #3E0697 / #B3B0FE |
| --color-background-red | #E3193B33 |
| --color-border-red | #E3193B / #F5394F |
| --color-icon-red | #D31130 / #E3193B |
| --color-text-red | #7B0210 / #FFB2B8 |
| --color-background-teal | #0DB7AF33 |
| --color-border-teal | #08A3A3 / #08767D |
| --color-icon-teal | #009688 / #26A69A |
| --color-text-teal | #083943 / #40DCCD |
| --color-background-yellow | #E2A40033 |
| --color-border-yellow | #C58600 / #B47700 |
| --color-icon-yellow | #FBC02D / #FFEE58 |
| --color-text-yellow | #753F07 / #FBCE03 |
| --color-syntax-keyword | #cf222e / #ff7b72 |
| --color-syntax-string | #0a3069 / #a5d6ff |
| --color-syntax-comment | #6e7781 / #8b949e |
| --color-syntax-number | #0550ae / #79c0ff |
| --color-syntax-function | #8250df / #d2a8ff |
| --color-syntax-type | #953800 / #ffa657 |
| --color-syntax-variable | #24292f / #e6edf3 |
| --color-syntax-operator | #cf222e / #ff7b72 |
| --color-syntax-constant | #0550ae / #79c0ff |
| --color-syntax-tag | #116329 / #7ee787 |
| --color-syntax-attribute | #0550ae / #79c0ff |
| --color-syntax-property | #0550ae / #79c0ff |
| --color-syntax-punctuation | #24292f / #c9d1d9 |
| --color-syntax-background | #ffffff / #0d1117 |
| --color-data-categorical-blue | #0171E3 |
| --color-data-categorical-orange | #EB6E00 |
| --color-data-categorical-purple | #6B1EFD |
| --color-data-categorical-green | #0B991F |
| --color-data-categorical-pink | #F351C0 |
| --color-data-categorical-cyan | #0171A4 |
| --color-data-categorical-red | #F5394F |
| --color-data-categorical-teal | #08A3A3 |
| --color-data-categorical-brown | #965E03 |
| --color-data-categorical-indigo | #6F8AFF |
| --color-data-neutral | #8494A3 / #8C939B |
| --color-data-blue-5 | #02165E |
| --color-data-blue-4 | #004CBC |
| --color-data-blue-3 | #2694FE |
| --color-data-blue-2 | #78BEFF |
| --color-data-blue-1 | #DBECFF |
| --color-data-shamrock-5 | #0B603D |
| --color-data-shamrock-4 | #138546 |
| --color-data-shamrock-3 | #24BB5E |
| --color-data-shamrock-2 | #8EF7AA |
| --color-data-shamrock-1 | #D6FEE4 |
| --color-data-orange-5 | #A13F04 |
| --color-data-orange-4 | #D66100 |
| --color-data-orange-3 | #FD9537 |
| --color-data-orange-2 | #FDB876 |
| --color-data-orange-1 | #FFE6CF |
| --color-data-pink-5 | #8E1073 |
| --color-data-pink-4 | #D123A1 |
| --color-data-pink-3 | #F989D3 |
| --color-data-pink-2 | #FEADE3 |
| --color-data-pink-1 | #FCE3F4 |
| --color-data-purple-5 | #3E0697 |
| --color-data-purple-4 | #6B1EFD |
| --color-data-purple-3 | #9081FF |
| --color-data-purple-2 | #B3B0FE |
| --color-data-purple-1 | #E8E8FB |
| --color-data-red-5 | #9D0519 |
| --color-data-red-4 | #D31130 |
| --color-data-red-3 | #FB7D87 |
| --color-data-red-2 | #FFB2B8 |
| --color-data-red-1 | #FEE4E6 |
| --color-data-teal-5 | #08767D |
| --color-data-teal-4 | #0C9293 |
| --color-data-teal-3 | #0DB7AF |
| --color-data-teal-2 | #6CE6D8 |
| --color-data-teal-1 | #D7FCF8 |
| --color-data-yellow-5 | #8A5001 |
| --color-data-yellow-4 | #D69804 |
| --color-data-yellow-3 | #FBCE03 |
| --color-data-yellow-2 | #FCEC85 |
| --color-data-yellow-1 | #FDF6BA |
| --color-data-gray-5 | #25363F / #333338 |
| --color-data-gray-4 | #5D6C7B / #666A72 |
| --color-data-gray-3 | #AFB9C4 / #B2B8BE |
| --color-data-gray-2 | #CCD3DB / #D0D3D6 |
| --color-data-gray-1 | #F1F4F7 / #F2F4F6 |
Spacing TokensSpacing scale used for padding, gap, and margin. Component gap props map spacing steps to these tokens.
| Token | Value |
|---|---|
| --spacing-0 | 0px |
| --spacing-0-5 | 2px |
| --spacing-1 | 4px |
| --spacing-1-5 | 6px |
| --spacing-2 | 8px |
| --spacing-3 | 12px |
| --spacing-4 | 16px |
| --spacing-5 | 20px |
| --spacing-6 | 24px |
| --spacing-7 | 28px |
| --spacing-8 | 32px |
| --spacing-9 | 36px |
| --spacing-10 | 40px |
| --spacing-11 | 44px |
| --spacing-12 | 48px |
Size TokensControl heights for consistent sizing across buttons, inputs, and selectors.
| Token | Value |
|---|---|
| --size-element-sm | 28px |
| --size-element-md | 32px |
| --size-element-lg | 36px |
Border TokensBorder width for card and input borders.
| Token | Value |
|---|---|
| --border-width | 1px |
Radius TokensNumeric scale based on a 4dp base unit. Tokens scale with the theme's radius multiplier; --radius-none and --radius-full are fixed.
| Token | Value |
|---|---|
| --radius-none | 0px |
| --radius-inner | 4px |
| --radius-element | 8px |
| --radius-container | 12px |
| --radius-page | 28px |
| --radius-full | 9999px |
Shadow TokensElevation shadows (low → med → high) and inset shadows for input state rings.
| Token | Preview |
|---|---|
| --shadow-low | |
| --shadow-med | |
| --shadow-high | |
| --shadow-inset-hover | |
| --shadow-inset-selected | |
| --shadow-inset-success | |
| --shadow-inset-warning | |
| --shadow-inset-error |
Duration TokensMotion duration primitives. Three bands: fast (micro-interactions), medium (entrance/exit), slow (continuous). Min/max variants derive from base × ratio.
| Token | Value |
|---|---|
| --duration-fast-min | 130ms |
| --duration-fast | 175ms |
| --duration-fast-max | 235ms |
| --duration-medium-min | 310ms |
| --duration-medium | 410ms |
| --duration-medium-max | 545ms |
| --duration-slow-min | 730ms |
| --duration-slow | 975ms |
| --duration-slow-max | 1300ms |
Easing TokensEasing curves for animations and transitions.
| Token | Value |
|---|---|
| --ease-standard |
Font Family TokensFont family stacks for body, code, and heading text.
| Token | Value |
|---|---|
| --font-family-body | -apple-systemThe quick brown fox jumps over the lazy dog |
| --font-family-code | "SF Mono"The quick brown fox jumps over the lazy dog |
| --font-family-heading | -apple-systemThe quick brown fox jumps over the lazy dog |
Font Size TokensGeometric type scale: round(14 × 1.2^step). Base is 14px (--font-size-base).
| Token | Value |
|---|---|
| --font-size-4xs | 0.375remThe quick brown fox jumps over the lazy dog |
| --font-size-3xs | 0.4375remThe quick brown fox jumps over the lazy dog |
| --font-size-2xs | 0.5remThe quick brown fox jumps over the lazy dog |
| --font-size-xs | 0.625remThe quick brown fox jumps over the lazy dog |
| --font-size-sm | 0.75remThe quick brown fox jumps over the lazy dog |
| --font-size-base | 0.875remThe quick brown fox jumps over the lazy dog |
| --font-size-lg | 1.0625remThe quick brown fox jumps over the lazy dog |
| --font-size-xl | 1.25remThe quick brown fox jumps over the lazy dog |
| --font-size-2xl | 1.5remThe quick brown fox jumps over the lazy dog |
| --font-size-3xl | 1.8125remThe quick brown fox jumps over the lazy dog |
| --font-size-4xl | 2.1875remThe quick brown fox jumps over the lazy dog |
| --font-size-5xl | 2.625remThe quick brown fox jumps over the lazy dog |
Font Weight TokensFont weight values for body, emphasis, and headings.
| Token | Value |
|---|---|
| --font-weight-normal | 400The quick brown fox jumps over the lazy dog |
| --font-weight-medium | 500The quick brown fox jumps over the lazy dog |
| --font-weight-semibold | 600The quick brown fox jumps over the lazy dog |
| --font-weight-bold | 700The quick brown fox jumps over the lazy dog |
Type Scale TokensSemantic tokens for headings, body, labels, code, supporting text, and display text. References font size and weight tokens. Override via typography.scale in defineTheme.
| Sample | Tokens |
|---|---|
| H1 | var(--font-size-2xl) · -apple-systemvar(--font-weight-semibold) · 1.3333 |
| H2 | var(--font-size-xl) · -apple-systemvar(--font-weight-semibold) · 1.4 |
| H3 | var(--font-size-lg) · -apple-systemvar(--font-weight-semibold) · 1.4118 |
| H4 | var(--font-size-base) · -apple-systemvar(--font-weight-semibold) · 1.4286 |
| H5 | var(--font-size-sm) · -apple-systemvar(--font-weight-semibold) · 1.6667 |
| H6 | var(--font-size-xs) · -apple-systemvar(--font-weight-semibold) · 1.6 |
| Display 1 | var(--font-size-5xl) · -apple-systemvar(--font-weight-normal) · 1.2381 |
| Display 2 | var(--font-size-4xl) · -apple-systemvar(--font-weight-normal) · 1.2571 |
| Display 3 | var(--font-size-3xl) · -apple-systemvar(--font-weight-normal) · 1.3793 |
| Large | var(--font-size-lg) · -apple-systemvar(--font-weight-semibold) · 1.4118 |
| Body | var(--font-size-base) · -apple-systemvar(--font-weight-normal) · 1.4286 |
| Label | var(--font-size-base) · -apple-systemvar(--font-weight-medium) · 1.4286 |
| Code | var(--font-size-base) · "SF Mono"var(--font-weight-normal) · 1.4286 |
| Supporting | var(--font-size-sm) · -apple-systemvar(--font-weight-normal) · 1.6667 |
Usage in StyleX
Using token imports
See `npx xds docs styling` for how to apply tokens via xstyle, className, and compound component patterns. See `npx xds docs theme` for overriding tokens with defineTheme.tsx