Token reference

Generated at build time from fds.tokens.json — the same registry the package exports. This page cannot drift from the source.

Contrast matrix (WCAG 2.2 AA)

The pairs the design system guarantees, with actual ratios in both schemes. CI fails if any cell drops below its minimum.

Foreground	Background	Min	Light	Dark
color.text	color.bg	4.5:1	17.85:1	19.28:1
color.text	color.surface	4.5:1	17.85:1	17.06:1
color.text-muted	color.bg	4.5:1	7.58:1	13.59:1
color.text-muted	color.surface	4.5:1	7.58:1	12.02:1
color.on-primary	color.primary	4.5:1	5.17:1	7.93:1
color.on-secondary	color.secondary	4.5:1	7.58:1	7.87:1
color.on-success	color.success	4.5:1	5.02:1	6.12:1
color.on-warning	color.warning	4.5:1	5.02:1	6.33:1
color.on-danger	color.danger	4.5:1	6.47:1	4.83:1
color.on-info	color.info	4.5:1	5.36:1	5.48:1

Semantic tokens

border.* 5 tokens

Token	CSS variable	Value
border.0	--fx-border-0	{ref.border-width.0} → 0px
border.1	--fx-border-1	{ref.border-width.1} → 1px
border.2	--fx-border-2	{ref.border-width.2} → 2px
border.4	--fx-border-4	{ref.border-width.4} → 4px
border.8	--fx-border-8	{ref.border-width.8} → 8px

bp.* 3 tokens

Token	CSS variable	Value
bp.desktop	--fx-bp-desktop	{ref.breakpoint.desktop} → 1280px
bp.tablet	--fx-bp-tablet	{ref.breakpoint.tablet} → 1024px
bp.wide	--fx-bp-wide	{ref.breakpoint.wide} → 1536px

color.* 26 tokens

Token	CSS variable	Value
color.bg	--fx-color-bg	{ref.neutral.0} → #ffffff
color.border	--fx-color-border	{ref.neutral.200} → #e2e8f0
color.border-strong	--fx-color-border-strong	{ref.neutral.300} → #cbd5e1
color.danger	--fx-color-danger	{ref.danger.600} → #b91c1c
color.focus-ring	--fx-color-focus-ring	{ref.brand.500} → #3b82f6
color.info	--fx-color-info	{ref.info.600} → #0e7490
color.on-danger	--fx-color-on-danger	{ref.neutral.0} → #ffffff
color.on-info	--fx-color-on-info	{ref.neutral.0} → #ffffff
color.on-primary	--fx-color-on-primary	{ref.neutral.0} → #ffffff
color.on-secondary	--fx-color-on-secondary	{ref.neutral.0} → #ffffff
color.on-success	--fx-color-on-success	{ref.neutral.0} → #ffffff
color.on-warning	--fx-color-on-warning	{ref.neutral.0} → #ffffff
color.primary	--fx-color-primary	{ref.brand.600} → #2563eb
color.primary-active	--fx-color-primary-active	{ref.brand.800} → #1e40af
color.primary-hover	--fx-color-primary-hover	{ref.brand.700} → #1d4ed8
color.scrim	--fx-color-scrim	rgba(0,0,0,0.4)
color.secondary	--fx-color-secondary	{ref.neutral.600} → #475569
color.secondary-active	--fx-color-secondary-active	{ref.neutral.800} → #1e293b
color.secondary-hover	--fx-color-secondary-hover	{ref.neutral.700} → #334155
color.success	--fx-color-success	{ref.success.600} → #15803d
color.surface	--fx-color-surface	{ref.neutral.0} → #ffffff
color.surface-alt	--fx-color-surface-alt	{ref.neutral.50} → #f8fafc
color.text	--fx-color-text	{ref.neutral.900} → #0f172a
color.text-muted	--fx-color-text-muted	{ref.neutral.600} → #475569
color.text-subtle	--fx-color-text-subtle	{ref.neutral.400} → #94a3b8
color.warning	--fx-color-warning	{ref.warning.600} → #b45309

font.* 2 tokens

Token	CSS variable	Value
font.family-base	--fx-font-family-base	system-ui, -apple-system, Segoe UI, Roboto, sans-serif
font.family-heading	--fx-font-family-heading	system-ui, -apple-system, Segoe UI, Roboto, sans-serif

motion.* 7 tokens

Token	CSS variable	Value
motion.duration-fast	--fx-motion-duration-fast	{ref.duration.fast} → 120ms
motion.duration-normal	--fx-motion-duration-normal	{ref.duration.normal} → 240ms
motion.duration-slow	--fx-motion-duration-slow	{ref.duration.slow} → 400ms
motion.easing-in	--fx-motion-easing-in	{ref.easing.in} → 0.4, 0, 1, 1
motion.easing-in-out	--fx-motion-easing-in-out	{ref.easing.in-out} → 0.4, 0, 0.2, 1
motion.easing-out	--fx-motion-easing-out	{ref.easing.out} → 0, 0, 0.2, 1
motion.easing-standard	--fx-motion-easing-standard	{ref.easing.standard} → 0.2, 0, 0, 1

opacity.* 2 tokens

Token	CSS variable	Value
opacity.disabled	--fx-opacity-disabled	{ref.opacity.50} → 0.5
opacity.muted	--fx-opacity-muted	{ref.opacity.75} → 0.75

radius.* 7 tokens

Token	CSS variable	Value
radius.2xl	--fx-radius-2xl	{ref.radius.2xl} → 1rem
radius.full	--fx-radius-full	{ref.radius.full} → 9999px
radius.lg	--fx-radius-lg	{ref.radius.lg} → 0.5rem
radius.md	--fx-radius-md	{ref.radius.md} → 0.375rem
radius.none	--fx-radius-none	{ref.radius.none} → 0rem
radius.sm	--fx-radius-sm	{ref.radius.sm} → 0.125rem
radius.xl	--fx-radius-xl	{ref.radius.xl} → 0.75rem

shadow.* 4 tokens

Token	CSS variable	Value
shadow.lg	--fx-shadow-lg	{ref.shadow.lg} → color: rgba(15,23,42,0.12) · offsetX: 0 · offsetY: 12px · blur: 20px · spread: -4px
shadow.md	--fx-shadow-md	{ref.shadow.md} → color: rgba(15,23,42,0.10) · offsetX: 0 · offsetY: 4px · blur: 8px · spread: -2px
shadow.sm	--fx-shadow-sm	{ref.shadow.sm} → color: rgba(15,23,42,0.08) · offsetX: 0 · offsetY: 1px · blur: 2px · spread: 0
shadow.xl	--fx-shadow-xl	{ref.shadow.xl} → color: rgba(15,23,42,0.16) · offsetX: 0 · offsetY: 24px · blur: 40px · spread: -8px

size.* 5 tokens

Token	CSS variable	Value
size.container-full	--fx-size-container-full	100%
size.container-lg	--fx-size-container-lg	1024px
size.container-md	--fx-size-container-md	768px
size.container-sm	--fx-size-container-sm	640px
size.container-xl	--fx-size-container-xl	1280px

space.* 13 tokens

Token	CSS variable	Value
space.0	--fx-space-0	{ref.space.0} → 0rem
space.1	--fx-space-1	{ref.space.1} → 0.25rem
space.10	--fx-space-10	{ref.space.10} → 2.5rem
space.12	--fx-space-12	{ref.space.12} → 3rem
space.16	--fx-space-16	{ref.space.16} → 4rem
space.2	--fx-space-2	{ref.space.2} → 0.5rem
space.20	--fx-space-20	{ref.space.20} → 5rem
space.24	--fx-space-24	{ref.space.24} → 6rem
space.3	--fx-space-3	{ref.space.3} → 0.75rem
space.4	--fx-space-4	{ref.space.4} → 1rem
space.5	--fx-space-5	{ref.space.5} → 1.25rem
space.6	--fx-space-6	{ref.space.6} → 1.5rem
space.8	--fx-space-8	{ref.space.8} → 2rem

text.* 6 tokens

Token	CSS variable	Value
text.body	--fx-text-body	fontFamily: {font.family-base} · fontSize: {ref.font-size.base} · fontWeight: {ref.font-weight.regular} · lineHeight: {ref.line-height.normal}
text.body-sm	--fx-text-body-sm	fontFamily: {font.family-base} · fontSize: {ref.font-size.sm} · fontWeight: {ref.font-weight.regular} · lineHeight: {ref.line-height.normal}
text.heading-lg	--fx-text-heading-lg	fontFamily: {font.family-heading} · fontSize: {ref.font-size.3xl} · fontWeight: {ref.font-weight.bold} · lineHeight: {ref.line-height.tight}
text.heading-md	--fx-text-heading-md	fontFamily: {font.family-heading} · fontSize: {ref.font-size.2xl} · fontWeight: {ref.font-weight.semibold} · lineHeight: {ref.line-height.tight}
text.heading-xl	--fx-text-heading-xl	fontFamily: {font.family-heading} · fontSize: {ref.font-size.4xl} · fontWeight: {ref.font-weight.bold} · lineHeight: {ref.line-height.tight}
text.label	--fx-text-label	fontFamily: {font.family-base} · fontSize: {ref.font-size.sm} · fontWeight: {ref.font-weight.medium} · lineHeight: {ref.line-height.normal}

z.* 7 tokens

Token	CSS variable	Value
z.base	--fx-z-base	{ref.z.base} → 0
z.dropdown	--fx-z-dropdown	{ref.z.dropdown} → 1000
z.fixed	--fx-z-fixed	{ref.z.fixed} → 1200
z.modal	--fx-z-modal	{ref.z.modal} → 1300
z.popover	--fx-z-popover	{ref.z.popover} → 1400
z.sticky	--fx-z-sticky	{ref.z.sticky} → 1100
z.tooltip	--fx-z-tooltip	{ref.z.tooltip} → 1500

Component tokens

c.button.* 3 tokens

Token	CSS variable	Value
c.button.padding-x	--fx-c-button-padding-x	{space.4} → 1rem
c.button.padding-y	--fx-c-button-padding-y	{space.2} → 0.5rem
c.button.radius	--fx-c-button-radius	{radius.md} → 0.375rem

Primitive tokens (ref)

ref.border-width.* 5 tokens

Token	CSS variable	Value
ref.border-width.0	--fx-ref-border-width-0	0px
ref.border-width.1	--fx-ref-border-width-1	1px
ref.border-width.2	--fx-ref-border-width-2	2px
ref.border-width.4	--fx-ref-border-width-4	4px
ref.border-width.8	--fx-ref-border-width-8	8px

ref.brand.* 10 tokens

Token	CSS variable	Value
ref.brand.100	--fx-ref-brand-100	#dbeafe
ref.brand.200	--fx-ref-brand-200	#bfdbfe
ref.brand.300	--fx-ref-brand-300	#93c5fd
ref.brand.400	--fx-ref-brand-400	#60a5fa
ref.brand.50	--fx-ref-brand-50	#eff6ff
ref.brand.500	--fx-ref-brand-500	#3b82f6
ref.brand.600	--fx-ref-brand-600	#2563eb
ref.brand.700	--fx-ref-brand-700	#1d4ed8
ref.brand.800	--fx-ref-brand-800	#1e40af
ref.brand.900	--fx-ref-brand-900	#1e3a8a

ref.breakpoint.* 3 tokens

Token	CSS variable	Value
ref.breakpoint.desktop	--fx-ref-breakpoint-desktop	1280px
ref.breakpoint.tablet	--fx-ref-breakpoint-tablet	1024px
ref.breakpoint.wide	--fx-ref-breakpoint-wide	1536px

ref.danger.* 2 tokens

Token	CSS variable	Value
ref.danger.500	--fx-ref-danger-500	#dc2626
ref.danger.600	--fx-ref-danger-600	#b91c1c

ref.duration.* 3 tokens

Token	CSS variable	Value
ref.duration.fast	--fx-ref-duration-fast	120ms
ref.duration.normal	--fx-ref-duration-normal	240ms
ref.duration.slow	--fx-ref-duration-slow	400ms

ref.easing.* 4 tokens

Token	CSS variable	Value
ref.easing.in	--fx-ref-easing-in	0.4, 0, 1, 1
ref.easing.in-out	--fx-ref-easing-in-out	0.4, 0, 0.2, 1
ref.easing.out	--fx-ref-easing-out	0, 0, 0.2, 1
ref.easing.standard	--fx-ref-easing-standard	0.2, 0, 0, 1

ref.font-size.* 9 tokens

Token	CSS variable	Value
ref.font-size.2xl	--fx-ref-font-size-2xl	1.5rem
ref.font-size.3xl	--fx-ref-font-size-3xl	1.875rem
ref.font-size.4xl	--fx-ref-font-size-4xl	2.25rem
ref.font-size.5xl	--fx-ref-font-size-5xl	3rem
ref.font-size.base	--fx-ref-font-size-base	1rem
ref.font-size.lg	--fx-ref-font-size-lg	1.125rem
ref.font-size.sm	--fx-ref-font-size-sm	0.875rem
ref.font-size.xl	--fx-ref-font-size-xl	1.25rem
ref.font-size.xs	--fx-ref-font-size-xs	0.75rem

ref.font-weight.* 4 tokens

Token	CSS variable	Value
ref.font-weight.bold	--fx-ref-font-weight-bold	700
ref.font-weight.medium	--fx-ref-font-weight-medium	500
ref.font-weight.regular	--fx-ref-font-weight-regular	400
ref.font-weight.semibold	--fx-ref-font-weight-semibold	600

ref.info.* 2 tokens

Token	CSS variable	Value
ref.info.500	--fx-ref-info-500	#0891b2
ref.info.600	--fx-ref-info-600	#0e7490

ref.line-height.* 3 tokens

Token	CSS variable	Value
ref.line-height.normal	--fx-ref-line-height-normal	1.5
ref.line-height.relaxed	--fx-ref-line-height-relaxed	1.75
ref.line-height.tight	--fx-ref-line-height-tight	1.2

ref.neutral.* 12 tokens

Token	CSS variable	Value
ref.neutral.0	--fx-ref-neutral-0	#ffffff
ref.neutral.100	--fx-ref-neutral-100	#f1f5f9
ref.neutral.200	--fx-ref-neutral-200	#e2e8f0
ref.neutral.300	--fx-ref-neutral-300	#cbd5e1
ref.neutral.400	--fx-ref-neutral-400	#94a3b8
ref.neutral.50	--fx-ref-neutral-50	#f8fafc
ref.neutral.500	--fx-ref-neutral-500	#64748b
ref.neutral.600	--fx-ref-neutral-600	#475569
ref.neutral.700	--fx-ref-neutral-700	#334155
ref.neutral.800	--fx-ref-neutral-800	#1e293b
ref.neutral.900	--fx-ref-neutral-900	#0f172a
ref.neutral.950	--fx-ref-neutral-950	#020617

ref.opacity.* 7 tokens

Token	CSS variable	Value
ref.opacity.0	--fx-ref-opacity-0	0
ref.opacity.10	--fx-ref-opacity-10	0.1
ref.opacity.100	--fx-ref-opacity-100	1
ref.opacity.25	--fx-ref-opacity-25	0.25
ref.opacity.5	--fx-ref-opacity-5	0.05
ref.opacity.50	--fx-ref-opacity-50	0.5
ref.opacity.75	--fx-ref-opacity-75	0.75

ref.radius.* 7 tokens

Token	CSS variable	Value
ref.radius.2xl	--fx-ref-radius-2xl	1rem
ref.radius.full	--fx-ref-radius-full	9999px
ref.radius.lg	--fx-ref-radius-lg	0.5rem
ref.radius.md	--fx-ref-radius-md	0.375rem
ref.radius.none	--fx-ref-radius-none	0rem
ref.radius.sm	--fx-ref-radius-sm	0.125rem
ref.radius.xl	--fx-ref-radius-xl	0.75rem

ref.shadow.* 4 tokens

Token	CSS variable	Value
ref.shadow.lg	--fx-ref-shadow-lg	color: rgba(15,23,42,0.12) · offsetX: 0 · offsetY: 12px · blur: 20px · spread: -4px
ref.shadow.md	--fx-ref-shadow-md	color: rgba(15,23,42,0.10) · offsetX: 0 · offsetY: 4px · blur: 8px · spread: -2px
ref.shadow.sm	--fx-ref-shadow-sm	color: rgba(15,23,42,0.08) · offsetX: 0 · offsetY: 1px · blur: 2px · spread: 0
ref.shadow.xl	--fx-ref-shadow-xl	color: rgba(15,23,42,0.16) · offsetX: 0 · offsetY: 24px · blur: 40px · spread: -8px

ref.space.* 13 tokens

Token	CSS variable	Value
ref.space.0	--fx-ref-space-0	0rem
ref.space.1	--fx-ref-space-1	0.25rem
ref.space.10	--fx-ref-space-10	2.5rem
ref.space.12	--fx-ref-space-12	3rem
ref.space.16	--fx-ref-space-16	4rem
ref.space.2	--fx-ref-space-2	0.5rem
ref.space.20	--fx-ref-space-20	5rem
ref.space.24	--fx-ref-space-24	6rem
ref.space.3	--fx-ref-space-3	0.75rem
ref.space.4	--fx-ref-space-4	1rem
ref.space.5	--fx-ref-space-5	1.25rem
ref.space.6	--fx-ref-space-6	1.5rem
ref.space.8	--fx-ref-space-8	2rem

ref.success.* 2 tokens

Token	CSS variable	Value
ref.success.500	--fx-ref-success-500	#16a34a
ref.success.600	--fx-ref-success-600	#15803d

ref.warning.* 2 tokens

Token	CSS variable	Value
ref.warning.500	--fx-ref-warning-500	#d97706
ref.warning.600	--fx-ref-warning-600	#b45309

ref.z.* 7 tokens

Token	CSS variable	Value
ref.z.base	--fx-ref-z-base	0
ref.z.dropdown	--fx-ref-z-dropdown	1000
ref.z.fixed	--fx-ref-z-fixed	1200
ref.z.modal	--fx-ref-z-modal	1300
ref.z.popover	--fx-ref-z-popover	1400
ref.z.sticky	--fx-ref-z-sticky	1100
ref.z.tooltip	--fx-ref-z-tooltip	1500