All Tokens

Complete reference for spacing, color, radius, typography, shadow, motion, and size tokens.

Color Tokens

Semantic colors for consistent theming. All colors use light-dark() for automatic mode switching.

Token	Value
--color-accent	#15110C / #DFE2E5
--color-accent-muted	rgba(21 / 17, 12, 0.08), rgba(223, 226, 229, 0.14)
--color-on-accent	#FFFFFF / #15110C
--color-neutral	rgba(5 / 54, 89, 0.1), rgba(223, 226, 229, 0.2)
--color-background-surface	#FFFFFF / #1F1F22
--color-background-body	#F8F4ED / #111112
--color-overlay	#01122866 / #11111299
--color-overlay-hover	#0536590C / #FFFFFF0C
--color-overlay-pressed	#05365919 / #FFFFFF19
--color-background-muted	#0536590C / #1111127F
--color-text-primary	#15110C / #DFE2E5
--color-text-secondary	#4E606F / #AAAFB5
--color-text-disabled	#A4B0BC / #6F747C
--color-text-accent	#15110C / #DFE2E5
--color-on-dark	#FFFFFF
--color-on-light	#000000
--color-icon-accent	#15110C / #DFE2E5
--color-icon-primary	#15110C / #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	var(--color-text-accent)
--color-syntax-string	var(--color-text-green)
--color-syntax-comment	var(--color-text-secondary)
--color-syntax-number	var(--color-text-orange)
--color-syntax-function	var(--color-text-blue)
--color-syntax-type	var(--color-text-purple)
--color-syntax-variable	var(--color-text-primary)
--color-syntax-operator	var(--color-text-cyan)
--color-syntax-constant	var(--color-text-orange)
--color-syntax-tag	var(--color-text-red)
--color-syntax-attribute	var(--color-text-teal)
--color-syntax-property	var(--color-text-cyan)
--color-syntax-punctuation	var(--color-text-disabled)
--color-syntax-background	var(--color-background-muted)
--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
--color-brand	#225BFF / #3D87FF

Spacing Tokens

Spacing 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 Tokens

Control heights for consistent sizing across buttons, inputs, and selectors.

Token	Value
--size-element-sm	28px
--size-element-md	32px
--size-element-lg	36px

Border Tokens

Border width for card and input borders.

Token	Value	Example
--border-width	1px

Radius Tokens

Numeric scale based on a 4dp base unit. Tokens scale with the theme's radius multiplier; --radius-none and --radius-full are fixed.

Token	Value	Example
--radius-none	0px
--radius-inner	8px
--radius-element	12px
--radius-container	16px
--radius-page	32px
--radius-chat	28px
--radius-full	9999px

Shadow Tokens

Elevation shadows (low to med to 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 Tokens

Motion 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	230ms
--duration-medium-min	310ms
--duration-medium	410ms
--duration-medium-max	550ms
--duration-slow-min	730ms
--duration-slow	975ms
--duration-slow-max	1300ms

Easing Tokens

Easing curves for animations and transitions.

Token	Value
--ease-standard	cubic-bezier(0.24, 1, 0.4, 1)

Font Family Tokens

Font family stacks for body, code, and heading text.

Token	Value	Example
--font-family-body	var(--font-figtree,Figtree)	The 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	var(--font-figtree,Figtree)	The quick brown fox jumps over the lazy dog

Font Size Tokens

Geometric type scale: round(14 × 1.2^step). Base is 14px (--font-size-base).

Token	Value	Example
--font-size-4xs	0.375rem	The quick brown fox jumps over the lazy dog
--font-size-3xs	0.4375rem	The quick brown fox jumps over the lazy dog
--font-size-2xs	0.5rem	The quick brown fox jumps over the lazy dog
--font-size-xs	0.625rem	The quick brown fox jumps over the lazy dog
--font-size-sm	0.75rem	The quick brown fox jumps over the lazy dog
--font-size-base	0.875rem	The quick brown fox jumps over the lazy dog
--font-size-lg	1.0625rem	The quick brown fox jumps over the lazy dog
--font-size-xl	1.25rem	The quick brown fox jumps over the lazy dog
--font-size-2xl	1.5rem	The quick brown fox jumps over the lazy dog
--font-size-3xl	1.8125rem	The quick brown fox jumps over the lazy dog
--font-size-4xl	2.1875rem	The quick brown fox jumps over the lazy dog
--font-size-5xl	2.625rem	The quick brown fox jumps over the lazy dog

Font Weight Tokens

Font weight values for body, emphasis, and headings.

Token	Value	Example
--font-weight-normal	400	The quick brown fox jumps over the lazy dog
--font-weight-medium	500	The quick brown fox jumps over the lazy dog
--font-weight-semibold	600	The quick brown fox jumps over the lazy dog
--font-weight-bold	700	The quick brown fox jumps over the lazy dog

Type Scale Tokens

Semantic 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) · var(--font-figtreevar(--font-weight-semibold) · 1.3333
H2	var(--font-size-xl) · var(--font-figtreevar(--font-weight-semibold) · 1.4
H3	var(--font-size-lg) · var(--font-figtreevar(--font-weight-semibold) · 1.4118
H4	var(--font-size-base) · var(--font-figtreevar(--font-weight-semibold) · 1.4286
H5	var(--font-size-sm) · var(--font-figtreevar(--font-weight-semibold) · 1.6667
H6	var(--font-size-xs) · var(--font-figtreevar(--font-weight-semibold) · 1.6
Display 1	var(--font-size-5xl) · var(--font-figtreevar(--font-weight-semibold) · 1.2381
Display 2	var(--font-size-4xl) · var(--font-figtreevar(--font-weight-semibold) · 1.2571
Display 3	var(--font-size-3xl) · var(--font-figtreevar(--font-weight-semibold) · 1.2414
Large	var(--font-size-lg) · var(--font-figtreevar(--font-weight-semibold) · 1.4118
Body	var(--font-size-base) · var(--font-figtreevar(--font-weight-normal) · 1.4286
Label	var(--font-size-base) · var(--font-figtreevar(--font-weight-medium) · 1.4286
Code	var(--font-size-base) · "SF Mono"var(--font-weight-normal) · 1.4286
Supporting	var(--font-size-sm) · var(--font-figtreevar(--font-weight-normal) · 1.6667

Usage in StyleX

Using token imports

tsx
import * as stylex from '@stylexjs/stylex';
import {colorVars, spacingVars, sizeVars, radiusVars} from '@astryxdesign/core';
const styles = stylex.create({
  card: {
    padding: spacingVars['--spacing-4'],
    backgroundColor: colorVars['--color-background-surface'],
    borderRadius: radiusVars['--radius-container'],
  },
  button: {
    height: sizeVars['--size-element-md'],
  },
});

See npx astryx docs styling for how to apply tokens via xstyle, className, and compound component patterns. See npx astryx docs theme for overriding tokens with defineTheme.