Color

Color tokens define the full palette available in the design system. They are organized into three semantic groups and a primitives layer:

FG (Foreground) — Text, icons, and other foreground elements that respond to light and dark mode.
BG (Background) — Surface and container backgrounds across elevation levels.
Border — Strokes and dividers.
Primitives — Raw color swatches (brand palette, orange, stone, blue, etc.). These are the base values that semantic tokens reference. Use them only when building the token system itself, not directly in components.

163 tokens

Name	Value	Description
FG
`fg/primary`	`var(--colors-axon-v2-Opacity-Black-92)`	—
`fg/secondary`	`var(--colors-axon-v2-Opacity-Black-76)`	—
`fg/tertiary`	`var(--colors-axon-v2-Opacity-Black-56)`	—
`fg/inverse/primary`	`var(--colors-axon-v2-Opacity-White-92)`	—
`fg/inverse/secondary`	`var(--colors-axon-v2-Opacity-White-76)`	—
`fg/inverse/tertiary`	`var(--colors-axon-v2-Opacity-White-56)`	—
`fg/inverse/disabled`	`var(--colors-axon-v2-Opacity-White-24)`	—
`fg/interactive/selected`	`var(--brand-primary-700)`	—
BG
`bg/base`	`var(--colors-axon-v2-stone-100)`	—
`bg/elevation/1`	`var(--colors-axon-v2-Opacity-White-100)`	—
`bg/elevation/2`	`var(--colors-axon-v2-stone-100-50)`	—
`bg/inversed`	`var(--colors-axon-v2-blue-975)`	—
`bg/underlay`	`var(--colors-axon-v2-Opacity-Black-24)`	—
Border
`border/primary`	`var(--colors-axon-v2-Opacity-Black-8)`	—
Primitives
`brand/test`	`#FFAA00FF`	—
`brand/primary/100`	`var(--colors-axon-v2-blue-100)`	—
`brand/accent/100`	`var(--colors-axon-v2-orange-100)`	—
`brand/primary/200`	`var(--colors-axon-v2-blue-200)`	—
`brand/primary/300`	`var(--colors-axon-v2-blue-300)`	—
`brand/primary/400`	`var(--colors-axon-v2-blue-400)`	—
`brand/primary/500`	`var(--colors-axon-v2-blue-500)`	—
`brand/primary/600`	`var(--colors-axon-v2-blue-600)`	—
`brand/primary/700`	`var(--colors-axon-v2-blue-700)`	—
`brand/primary/800`	`var(--colors-axon-v2-blue-800)`	—
`brand/primary/900`	`var(--colors-axon-v2-blue-900)`	—
`colors/axon/v2/orange/100`	`#FFECDBFF`	—
`colors/axon/v2/orange/100/50`	`#FFECDB80`	—
`colors/axon/v2/orange/200`	`#FFD2AAFF`	—
`colors/axon/v2/orange/300`	`#FFAD65FF`	—
`colors/axon/v2/orange/400`	`#E68520FF`	—
`colors/axon/v2/orange/500`	`#CF7013FF`	—
`colors/axon/v2/orange/500/16`	`#CF701329`	—
`colors/axon/v2/orange/600`	`#AB5E15FF`	—
`colors/axon/v2/orange/700`	`#8B4D15FF`	—
`colors/axon/v2/orange/800`	`#6F3E14FF`	—
`colors/axon/v2/orange/900`	`#482A11FF`	—
`colors/axon/v2/stone/100`	`#F2EDEBFF`	—
`colors/axon/v2/stone/100/50`	`#F2EDEB80`	—
`colors/axon/v2/stone/200`	`#E1D7D2FF`	—
`colors/axon/v2/stone/200/56`	`#E1D7D28F`	—
`colors/axon/v2/stone/300`	`#CCBCB3FF`	—
`colors/axon/v2/stone/400`	`#B59E90FF`	—
`colors/axon/v2/stone/500`	`#A08270FF`	—
`colors/axon/v2/stone/600`	`#886B5AFF`	—
`colors/axon/v2/stone/700`	`#6F584AFF`	—
`colors/axon/v2/stone/800`	`#59463BFF`	—
`colors/axon/v2/stone/900`	`#3B2E27FF`	—
`colors/axon/v2/blue/100`	`#E7F0FCFF`	—
`colors/axon/v2/green/50`	`#F0FDF4FF`	—
`colors/axon/v2/green/100`	`#DCFCE7FF`	—
`colors/axon/v2/green/200`	`#B9F8CFFF`	—
`colors/axon/v2/green/300`	`#7BF1A8FF`	—
`colors/axon/v2/green/300/56`	`#7BF1A88F`	—
`colors/axon/v2/green/400`	`#05DF72FF`	—
`colors/axon/v2/green/400/56`	`#05DF728F`	—
`colors/axon/v2/green/500`	`#00C950FF`	—
`colors/axon/v2/green/600`	`#00A63EFF`	—
`colors/axon/v2/green/700`	`#008236FF`	—
`colors/axon/v2/green/800`	`#016630FF`	—
`colors/axon/v2/green/800/76`	`#008236EB`	—
`colors/axon/v2/green/900`	`#0D542BFF`	—
`colors/axon/v2/green/950`	`#032E15FF`	—
`colors/axon/v2/yellow/50`	`#FEFCE8FF`	—
`colors/axon/v2/yellow/100`	`#FEF9C2FF`	—
`colors/axon/v2/yellow/200`	`#FFF085FF`	—
`colors/axon/v2/yellow/200/56`	`#FFF0858F`	—
`colors/axon/v2/yellow/300`	`#FFDF20FF`	—
`colors/axon/v2/yellow/400`	`#FDC700FF`	—
`colors/axon/v2/yellow/400/48`	`#FDC70066`	—
`colors/axon/v2/yellow/500`	`#F0B100FF`	—
`colors/axon/v2/yellow/600`	`#D08700FF`	—
`colors/axon/v2/yellow/700`	`#A65F00FF`	—
`colors/axon/v2/yellow/800`	`#894B00FF`	—
`colors/axon/v2/yellow/800/76`	`#A65F00EB`	—
`colors/axon/v2/yellow/900`	`#733E0AFF`	—
`colors/axon/v2/yellow/950`	`#432004FF`	—
`colors/axon/v2/red/50`	`#FEF2F2FF`	—
`colors/axon/v2/pink/100`	`#FFEAEFFF`	—
`colors/axon/v2/pink/200`	`#FFCEDBFF`	—
`colors/axon/v2/pink/300`	`#FFA6BFFF`	—
`colors/axon/v2/pink/300/56`	`#FFA6BF8F`	—
`colors/axon/v2/pink/400`	`#FB78A1FF`	—
`colors/axon/v2/pink/500`	`#F24588FF`	—
`colors/axon/v2/pink/600`	`#CC3671FF`	—
`colors/axon/v2/pink/700`	`#A5305CFF`	—
`colors/axon/v2/pink/800`	`#83294AFF`	—
`colors/axon/v2/pink/800/76`	`#83294AEB`	—
`colors/axon/v2/pink/900`	`#531F31FF`	—
`colors/axon/v2/red/100`	`#FFE2E2FF`	—
`colors/axon/v2/red/200`	`#FFC9C9FF`	—
`colors/axon/v2/red/300`	`#FFA2A2FF`	—
`colors/axon/v2/red/400`	`#FF6467FF`	—
`colors/axon/v2/red/400/56`	`#FF64678F`	—
`colors/axon/v2/red/500`	`#FB2C36FF`	—
`colors/axon/v2/red/600`	`#E7000BFF`	—
`colors/axon/v2/red/700`	`#C10007FF`	—
`colors/axon/v2/red/800`	`#9F0712FF`	—
`colors/axon/v2/red/800/76`	`#C10007EB`	—
`colors/axon/v2/red/900`	`#82181AFF`	—
`colors/axon/v2/red/950`	`#460809FF`	—
`colors/axon/v2/teal/100`	`#E5F1F8FF`	—
`colors/axon/v2/teal/200`	`#C0DFEFFF`	—
`colors/axon/v2/teal/300`	`#8DC7E3FF`	—
`colors/axon/v2/teal/300/56`	`#8DC7E38F`	—
`colors/axon/v2/teal/400`	`#47AED6FF`	—
`colors/axon/v2/teal/500`	`#2993B9FF`	—
`colors/axon/v2/teal/600`	`#287A98FF`	—
`colors/axon/v2/teal/700`	`#26637CFF`	—
`colors/axon/v2/teal/800`	`#224F62FF`	—
`colors/axon/v2/teal/800/76`	`#224F62EB`	—
`colors/axon/v2/teal/900`	`#1B3440FF`	—
`colors/axon/v2/Opacity/Black/0`	`#00000000`	—
`colors/axon/v2/Opacity/Black/2`	`#00000005`	—
`colors/axon/v2/Opacity/Black/4`	`#0000000A`	—
`colors/axon/v2/Opacity/Black/8`	`#00000014`	—
`colors/axon/v2/Opacity/Black/12`	`#0000001F`	—
`colors/axon/v2/Opacity/Black/16`	`#00000029`	—
`colors/axon/v2/Opacity/Black/24`	`#0000003D`	—
`colors/axon/v2/Opacity/Black/44`	`#00000070`	—
`colors/axon/v2/Opacity/Black/56`	`#0000008F`	—
`colors/axon/v2/Opacity/Black/68`	`#000000AD`	—
`colors/axon/v2/Opacity/Black/76`	`#000000C2`	—
`colors/axon/v2/Opacity/Black/92`	`#000000EB`	—
`colors/axon/v2/Opacity/Black/100`	`#000000FF`	—
`colors/axon/v2/Opacity/White/2`	`#FFFFFF05`	—
`colors/axon/v2/Opacity/White/4`	`#FFFFFF0A`	—
`colors/axon/v2/Opacity/White/8`	`#FFFFFF14`	—
`colors/axon/v2/Opacity/White/16`	`#FFFFFF29`	—
`colors/axon/v2/Opacity/White/24`	`#FFFFFF3D`	—
`colors/axon/v2/Opacity/White/44`	`#FFFFFF70`	—
`colors/axon/v2/Opacity/White/56`	`#FFFFFF8F`	—
`colors/axon/v2/Opacity/White/68`	`#FFFFFFAD`	—
`colors/axon/v2/Opacity/White/76`	`#FFFFFFC2`	—
`colors/axon/v2/Opacity/White/92`	`#FFFFFFEB`	—
`colors/axon/v2/Opacity/White/100`	`#FFFFFFFF`	—
`colors/axon/v2/blue/200`	`#C6DCF8FF`	—
`colors/axon/v2/blue/300`	`#9CC2F3FF`	—
`colors/axon/v2/blue/400`	`#6DA5EDFF`	—
`colors/axon/v2/blue/500`	`#3F88E8FF`	—
`colors/axon/v2/blue/500/4`	`#3F88E80A`	—
`colors/axon/v2/blue/500/8`	`#3F88E814`	—
`colors/axon/v2/blue/500/12`	`#3F88E81F`	—
`colors/axon/v2/blue/500/16`	`#3F88E829`	—
`colors/axon/v2/blue/500/20`	`#3F88E833`	—
`colors/axon/v2/blue/500/24`	`#3F88E83D`	—
`colors/axon/v2/blue/600`	`#1B6ED9FF`	—
`colors/axon/v2/blue/700`	`#175AB2FF`	—
`colors/axon/v2/blue/800`	`#13488EFF`	—
`colors/axon/v2/blue/900/4`	`#0D305F0A`	—
`colors/axon/v2/blue/900/8`	`#0D305F14`	—
`colors/axon/v2/blue/900/12`	`#0D305F1F`	—
`colors/axon/v2/blue/900/16`	`#0D305F29`	—
`colors/axon/v2/blue/900/20`	`#0D305F33`	—
`colors/axon/v2/blue/900/24`	`#0D305F3D`	—
`colors/axon/v2/blue/900/32`	`#0D305F52`	—
`colors/axon/v2/blue/900/48`	`#0D305F7A`	—
`colors/axon/v2/blue/900`	`#0D305FFF`	—
`colors/axon/v2/blue/950`	`#0D305FFF`	—
`colors/axon/v2/blue/975`	`#092242FF`	—
`colors/axon/v2/blue/1000`	`#04101FFF`	—
`white`	`#FFFFFFFF`	—
`black`	`#000000FF`	—
`transparent`	`#00000000`	—