XDS — Design System

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	Light	Dark
--color-accent	#0064E0	#2694FE
--color-accent-muted	#0082FB33	#0082FB3F
--color-on-accent	#FFFFFF	#FFFFFF
--color-neutral	light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2))	light-dark(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	#FFFFFF
--color-on-light	#000000	#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	#0D8626
--color-success-muted	#0B991F33	#0B991F3F
--color-on-success	#FFFFFF	#FFFFFF
--color-error	#E3193B	#F5394F
--color-error-muted	#E3193B33	#F5394F3F
--color-on-error	#FFFFFF	#FFFFFF
--color-warning	#E9AF08	#F2C00B
--color-warning-muted	#E2A40033	#E2A4003F
--color-on-warning	#0A1317	#0A1317
--color-border	#05365919	#F2F4F619
--color-border-emphasized	#CCD3DB	#494D53
--color-skeleton	#CCD3DB	#5A5E66
--color-shadow	light-dark(rgba(5, 54, 89, 0.1), rgba(0, 0, 0, 0.3))	light-dark(rgba(5, 54, 89, 0.1), rgba(0, 0, 0, 0.3))
--color-tint-hover	black	white
--color-background-blue	#0171E333	#0171E333
--color-border-blue	#0064E0	#2694FE
--color-icon-blue	#0064E0	#2694FE
--color-text-blue	#042F97	#AFD7FF
--color-background-cyan	#03A7D733	#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	#24BB5E33
--color-border-green	#0D8626	#0B991F
--color-icon-green	#0D8626	#26A756
--color-text-green	#09441F	#A5F690
--color-background-orange	#F2790233	#F2790233
--color-border-orange	#EB6E00	#B34A01
--color-icon-orange	#E9690B	#FB8C00
--color-text-orange	#6B2203	#FDB876
--color-background-pink	#E638B333	#E638B333
--color-border-pink	#F351C0	#C02294
--color-icon-pink	#C2185B	#EC407A
--color-text-pink	#650053	#FEADE3
--color-background-purple	#7952FF33	#7952FF33
--color-border-purple	#9081FF	#7340FE
--color-icon-purple	#5B08D8	#7952FF
--color-text-purple	#3E0697	#B3B0FE
--color-background-red	#E3193B33	#E3193B33
--color-border-red	#E3193B	#F5394F
--color-icon-red	#D31130	#E3193B
--color-text-red	#7B0210	#FFB2B8
--color-background-teal	#0DB7AF33	#0DB7AF33
--color-border-teal	#08A3A3	#08767D
--color-icon-teal	#009688	#26A69A
--color-text-teal	#083943	#40DCCD
--color-background-yellow	#E2A40033	#E2A40033
--color-border-yellow	#C58600	#B47700
--color-icon-yellow	#FBC02D	#FFEE58
--color-text-yellow	#753F07	#FBCE03

Token	Light	Dark
--color-accent	#0064E0	#0064E0
--color-accent-muted	#0082FB33	#0082FB33
--color-on-accent	#FFFFFF	#FFFFFF
--color-neutral	light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2))	light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2))
--color-background-surface	#FFFFFF	#FFFFFF
--color-background-body	#F1F4F7	#F1F4F7
--color-overlay	#01122866	#01122866
--color-overlay-hover	#0536590C	#0536590C
--color-overlay-pressed	#05365919	#05365919
--color-background-muted	#0536590C	#0536590C
--color-text-primary	#0A1317	#0A1317
--color-text-secondary	#4E606F	#4E606F
--color-text-disabled	#A4B0BC	#A4B0BC
--color-text-accent	#0064E0	#0064E0
--color-on-dark	#FFFFFF	#FFFFFF
--color-on-light	#000000	#000000
--color-icon-accent	#0064E0	#0064E0
--color-icon-primary	#0A1317	#0A1317
--color-icon-secondary	#4E606F	#4E606F
--color-icon-disabled	#A4B0BC	#A4B0BC
--color-background-card	#FFFFFF	#FFFFFF
--color-background-popover	#FFFFFF	#FFFFFF
--color-background-inverted	#0A1317	#0A1317
--color-background-error-inverted	#AA071E	#AA071E
--color-success	#0D8626	#0D8626
--color-success-muted	#0B991F33	#0B991F33
--color-on-success	#FFFFFF	#FFFFFF
--color-error	#E3193B	#E3193B
--color-error-muted	#E3193B33	#E3193B33
--color-on-error	#FFFFFF	#FFFFFF
--color-warning	#E9AF08	#E9AF08
--color-warning-muted	#E2A40033	#E2A40033
--color-on-warning	#0A1317	#0A1317
--color-border	#05365919	#05365919
--color-border-emphasized	#CCD3DB	#CCD3DB
--color-skeleton	#CCD3DB	#CCD3DB
--color-shadow	light-dark(rgba(5, 54, 89, 0.1), rgba(0, 0, 0, 0.3))	light-dark(rgba(5, 54, 89, 0.1), rgba(0, 0, 0, 0.3))
--color-tint-hover	black	black
--color-background-blue	#0171E333	#0171E333
--color-border-blue	#0064E0	#0064E0
--color-icon-blue	#0064E0	#0064E0
--color-text-blue	#042F97	#042F97
--color-background-cyan	#03A7D733	#03A7D733
--color-border-cyan	#089DD0	#089DD0
--color-icon-cyan	#00ACC1	#00ACC1
--color-text-cyan	#014975	#014975
--color-background-gray	#0A131733	#0A131733
--color-border-gray	#647685	#647685
--color-icon-gray	#4E606F	#4E606F
--color-text-gray	#0A1317	#0A1317
--color-background-green	#24BB5E33	#24BB5E33
--color-border-green	#0D8626	#0D8626
--color-icon-green	#0D8626	#0D8626
--color-text-green	#09441F	#09441F
--color-background-orange	#F2790233	#F2790233
--color-border-orange	#EB6E00	#EB6E00
--color-icon-orange	#E9690B	#E9690B
--color-text-orange	#6B2203	#6B2203
--color-background-pink	#E638B333	#E638B333
--color-border-pink	#F351C0	#F351C0
--color-icon-pink	#C2185B	#C2185B
--color-text-pink	#650053	#650053
--color-background-purple	#7952FF33	#7952FF33
--color-border-purple	#9081FF	#9081FF
--color-icon-purple	#5B08D8	#5B08D8
--color-text-purple	#3E0697	#3E0697
--color-background-red	#E3193B33	#E3193B33
--color-border-red	#E3193B	#E3193B
--color-icon-red	#D31130	#D31130
--color-text-red	#7B0210	#7B0210
--color-background-teal	#0DB7AF33	#0DB7AF33
--color-border-teal	#08A3A3	#08A3A3
--color-icon-teal	#009688	#009688
--color-text-teal	#083943	#083943
--color-background-yellow	#E2A40033	#E2A40033
--color-border-yellow	#C58600	#C58600
--color-icon-yellow	#FBC02D	#FBC02D
--color-text-yellow	#753F07	#753F07
--color-syntax-keyword	#cf222e	#cf222e
--color-syntax-string	#0a3069	#0a3069
--color-syntax-comment	#6e7781	#6e7781
--color-syntax-number	#0550ae	#0550ae
--color-syntax-function	#8250df	#8250df
--color-syntax-type	#953800	#953800
--color-syntax-variable	#24292f	#24292f
--color-syntax-operator	#cf222e	#cf222e
--color-syntax-constant	#0550ae	#0550ae
--color-syntax-tag	#116329	#116329
--color-syntax-attribute	#0550ae	#0550ae
--color-syntax-property	#0550ae	#0550ae
--color-syntax-punctuation	#24292f	#24292f
--color-syntax-background	#ffffff	#ffffff
--color-data-categorical-blue	#0171E3	#0171E3
--color-data-categorical-orange	#EB6E00	#EB6E00
--color-data-categorical-purple	#6B1EFD	#6B1EFD
--color-data-categorical-green	#0B991F	#0B991F
--color-data-categorical-pink	#F351C0	#F351C0
--color-data-categorical-cyan	#0171A4	#0171A4
--color-data-categorical-red	#F5394F	#F5394F
--color-data-categorical-teal	#08A3A3	#08A3A3
--color-data-categorical-brown	#965E03	#965E03
--color-data-categorical-indigo	#6F8AFF	#6F8AFF
--color-data-neutral	#8494A3	#8494A3
--color-data-blue-5	#02165E	#02165E
--color-data-blue-4	#004CBC	#004CBC
--color-data-blue-3	#2694FE	#2694FE
--color-data-blue-2	#78BEFF	#78BEFF
--color-data-blue-1	#DBECFF	#DBECFF
--color-data-shamrock-5	#0B603D	#0B603D
--color-data-shamrock-4	#138546	#138546
--color-data-shamrock-3	#24BB5E	#24BB5E
--color-data-shamrock-2	#8EF7AA	#8EF7AA
--color-data-shamrock-1	#D6FEE4	#D6FEE4
--color-data-orange-5	#A13F04	#A13F04
--color-data-orange-4	#D66100	#D66100
--color-data-orange-3	#FD9537	#FD9537
--color-data-orange-2	#FDB876	#FDB876
--color-data-orange-1	#FFE6CF	#FFE6CF
--color-data-pink-5	#8E1073	#8E1073
--color-data-pink-4	#D123A1	#D123A1
--color-data-pink-3	#F989D3	#F989D3
--color-data-pink-2	#FEADE3	#FEADE3
--color-data-pink-1	#FCE3F4	#FCE3F4
--color-data-purple-5	#3E0697	#3E0697
--color-data-purple-4	#6B1EFD	#6B1EFD
--color-data-purple-3	#9081FF	#9081FF
--color-data-purple-2	#B3B0FE	#B3B0FE
--color-data-purple-1	#E8E8FB	#E8E8FB
--color-data-red-5	#9D0519	#9D0519
--color-data-red-4	#D31130	#D31130
--color-data-red-3	#FB7D87	#FB7D87
--color-data-red-2	#FFB2B8	#FFB2B8
--color-data-red-1	#FEE4E6	#FEE4E6
--color-data-teal-5	#08767D	#08767D
--color-data-teal-4	#0C9293	#0C9293
--color-data-teal-3	#0DB7AF	#0DB7AF
--color-data-teal-2	#6CE6D8	#6CE6D8
--color-data-teal-1	#D7FCF8	#D7FCF8
--color-data-yellow-5	#8A5001	#8A5001
--color-data-yellow-4	#D69804	#D69804
--color-data-yellow-3	#FBCE03	#FBCE03
--color-data-yellow-2	#FCEC85	#FCEC85
--color-data-yellow-1	#FDF6BA	#FDF6BA
--color-data-gray-5	#25363F	#25363F
--color-data-gray-4	#5D6C7B	#5D6C7B
--color-data-gray-3	#AFB9C4	#AFB9C4
--color-data-gray-2	#CCD3DB	#CCD3DB
--color-data-gray-1	#F1F4F7	#F1F4F7

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

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

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

Border TokensBorder width for card and input borders.

Token	Value
--border-width	1px

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

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	Value
--shadow-low	0px 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), 0px 2px 8px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2))
--shadow-med	0px 1px 2px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), 0px 2px 12px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2))
--shadow-high	0px 2px 2px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), 0px 8px 24px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3))
--shadow-inset-hover	inset 0px 0px 0px 2px rgba(1, 113, 227, 0.3)
--shadow-inset-selected	inset 0px 0px 0px 2px rgba(1, 113, 227, 0.5)
--shadow-inset-success	inset 0px 0px 0px 2px rgba(38, 167, 86, 0.3)
--shadow-inset-warning	inset 0px 0px 0px 2px rgba(226, 164, 0, 0.3)
--shadow-inset-error	inset 0px 0px 0px 2px rgba(227, 25, 59, 0.3)

Token	Value
--shadow-low	0px 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), 0px 2px 8px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2))
--shadow-high	0px 2px 2px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), 0px 8px 24px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3))
--shadow-inset-error	inset 0px 0px 0px 2px rgba(227, 25, 59, 0.3)
--shadow-inset-hover	inset 0px 0px 0px 2px rgba(1, 113, 227, 0.3)
--shadow-inset-selected	inset 0px 0px 0px 2px rgba(1, 113, 227, 0.5)
--shadow-inset-success	inset 0px 0px 0px 2px rgba(38, 167, 86, 0.3)
--shadow-inset-warning	inset 0px 0px 0px 2px rgba(226, 164, 0, 0.3)
--shadow-med	0px 1px 2px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), 0px 2px 12px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2))

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

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	cubic-bezier(0.24, 1, 0.4, 1)

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

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

Token	Value
--font-family-body	-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
--font-family-code	"SF Mono", Monaco, Consolas, monospace
--font-family-heading	-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif

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.375rem
--font-size-3xs	0.4375rem
--font-size-2xs	0.5rem
--font-size-xs	0.625rem
--font-size-sm	0.75rem
--font-size-base	0.875rem
--font-size-lg	1.0625rem
--font-size-xl	1.25rem
--font-size-2xl	1.5rem
--font-size-3xl	1.8125rem
--font-size-4xl	2.1875rem
--font-size-5xl	2.625rem

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	400
--font-weight-medium	500
--font-weight-semibold	600
--font-weight-bold	700

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.

Token	Value
--text-heading-1-size	var(--font-size-2xl)
--text-heading-1-weight	var(--font-weight-semibold)
--text-heading-1-leading	1.3333
--text-heading-2-size	var(--font-size-xl)
--text-heading-2-weight	var(--font-weight-semibold)
--text-heading-2-leading	1.4
--text-heading-3-size	var(--font-size-lg)
--text-heading-3-weight	var(--font-weight-semibold)
--text-heading-3-leading	1.4118
--text-heading-4-size	var(--font-size-base)
--text-heading-4-weight	var(--font-weight-semibold)
--text-heading-4-leading	1.4286
--text-heading-5-size	var(--font-size-sm)
--text-heading-5-weight	var(--font-weight-semibold)
--text-heading-5-leading	1.6667
--text-heading-6-size	var(--font-size-xs)
--text-heading-6-weight	var(--font-weight-semibold)
--text-heading-6-leading	1.6
--text-body-size	var(--font-size-base)
--text-body-weight	var(--font-weight-normal)
--text-body-leading	1.4286
--text-large-size	var(--font-size-lg)
--text-large-weight	var(--font-weight-semibold)
--text-large-leading	1.4118
--text-label-size	var(--font-size-base)
--text-label-weight	var(--font-weight-medium)
--text-label-leading	1.4286
--text-code-size	var(--font-size-base)
--text-code-weight	var(--font-weight-normal)
--text-code-leading	1.4286
--text-supporting-size	var(--font-size-sm)
--text-supporting-weight	var(--font-weight-normal)
--text-supporting-leading	1.6667
--text-display-1-size	var(--font-size-5xl)
--text-display-1-weight	var(--font-weight-normal)
--text-display-1-leading	1.2381
--text-display-2-size	var(--font-size-4xl)
--text-display-2-weight	var(--font-weight-normal)
--text-display-2-leading	1.2571
--text-display-3-size	var(--font-size-3xl)
--text-display-3-weight	var(--font-weight-normal)
--text-display-3-leading	1.2414

Style	Font	Size	Weight	Leading
H1	-apple-system	var(--font-size-2xl)	var(--font-weight-semibold)	1.3333
H2	-apple-system	var(--font-size-xl)	var(--font-weight-semibold)	1.4
H3	-apple-system	var(--font-size-lg)	var(--font-weight-semibold)	1.4118
H4	-apple-system	var(--font-size-base)	var(--font-weight-semibold)	1.4286
H5	-apple-system	var(--font-size-sm)	var(--font-weight-semibold)	1.6667
H6	-apple-system	var(--font-size-xs)	var(--font-weight-semibold)	1.6
Display 1	-apple-system	var(--font-size-5xl)	var(--font-weight-normal)	1.2381
Display 2	-apple-system	var(--font-size-4xl)	var(--font-weight-normal)	1.2571
Display 3	-apple-system	var(--font-size-3xl)	var(--font-weight-normal)	1.3793
Large	-apple-system	var(--font-size-lg)	var(--font-weight-semibold)	1.4118
Body	-apple-system	var(--font-size-base)	var(--font-weight-normal)	1.4286
Label	-apple-system	var(--font-size-base)	var(--font-weight-medium)	1.4286
Code	"SF Mono"	var(--font-size-base)	var(--font-weight-normal)	1.4286
Supporting	-apple-system	var(--font-size-sm)	var(--font-weight-normal)	1.6667

Usage in StyleX

Using token imports

tsx
import * as stylex from '@stylexjs/stylex';
import {colorVars, spacingVars, sizeVars, radiusVars} from '@xds/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 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.