Color

The color system is built on a two-tier model: primitive tokens define the raw palette, and semantic tokens assign meaning to those values within the UI.

The primary UI theme uses a light background (Background/Primary #FCFDFD) with dark foreground content (Content/Primary #191C1E). The "Inverse" semantic tokens represent the dark-background variant.

Primitive Colors

Raw palette — 14 color groups, steps 0 (darkest) to 100 (lightest). Click any hex value to copy.

Blue

#172632
0

#19344A
10

#184366
20

#135286
30

#0B62A9
40

#0072CF
50

#2F8AD4
60

#5CA1DA
70

#88B9E1
80

#BFD8ED
90

#E3EEF7
100

Cyan

#152629
0

#19383D
10

#1A4B54
20

#18606D
30

#147788
40

#0D90A6
50

#39A1B3
60

#63B3C0
70

#8DC5CF
80

#B6D9DF
90

#DDEDEF
100

Grape

#302234
0

#442B4B
10

#5A3264
20

#713680
30

#89389D
40

#A338BD
50

#B15CC6
60

#C07FD0
70

#D0A1DB
80

#E0C3E7
90

#F0E3F3
100

Green

#1E2D21
0

#26412B
10

#2B5734
20

#2F6F3B
30

#318942
40

#31A547
50

#56B268
60

#7AC188
70

#9ED0A7
80

#C0DFC6
90

#E2F0E5
100

Lime

#232C18
0

#31421B
10

#3F5A1C
20

#4E751B
30

#5D9217
40

#6CB210
50

#85BC3B
60

#9DC866
70

#B6D58F
80

#CFE2B7
90

#E9F1DE
100

Magenta

#372129
0

#502836
10

#6D2C43
20

#8C2E4F
30

#AD2C5A
40

#D22864
50

#D74F7F
60

#DD769A
70

#E49BB5
80

#ECBFCF
90

#F6E1E9
100

Neutral

#191C1E
0

#2E3133
10

#454748
20

#5D5E5F
30

#6F7071
40

#909191
50

#ABABAB
60

#C6C6C7
70

#E2E2E2
80

#F1F1F1
90

#F5F5F5
95

#FCFDFD
100

Orange

#3C281E
0

#593522
10

#794122
20

#9E4B1F
30

#C65518
40

#F25D0D
50

#F07A3A
60

#F09665
70

#F2B28F
80

#F5CDB7
90

#FAE8DE
100

Red

#540000
0

#710000
10

#8E0101
20

#AA0404
30

#C60707
40

#E00B0B
50

#E23838
60

#E56464
70

#EA8E8E
80

#F0B6B6
90

#F7DEDE
100

Teal

#132620
0

#16382E
10

#164D3D
20

#14644C
30

#107E5D
40

#099A6E
50

#35A986
60

#61B99E
70

#8BC9B6
80

#B4DBCF
90

#DCEEE8
100

Translucid Black

#0000001A
10

#00000033
20

#0000004D
30

#00000066
40

#00000080
50

#00000099
60

#000000B2
70

#000000CC
80

#000000E5
90

Translucid White

#FFFFFF1A
10

#FFFFFF33
20

#FFFFFF4D
30

#FFFFFF66
40

#FFFFFF80
50

#FFFFFF99
60

#FFFFFFB2
70

#FFFFFFCC
80

#FFFFFFE5
90

Violet

#2E293C
0

#3D3457
10

#4B3D74
20

#574394
30

#6347B6
40

#6D48DA
50

#876ADE
60

#A18AE3
70

#BAAAE9
80

#D2C8EF
90

#EAE6F7
100

Yellow

#423C29
0

#605533
10

#817039
20

#A68C3D
30

#CDAA3D
40

#F8C93A
50

#F6D15F
60

#F5D982
70

#F6E2A4
80

#F8EBC5
90

#FBF6E4
100

Semantic Colors

Role-based tokens mapped from the primitive palette.

Background

Token	Hex	Swatch
`color.semantic.Background.Attention`	`#F07A3A`
`color.semantic.Background.AttentionSubtle`	`#9E4B1F`
`color.semantic.Background.Brand`	`#2F8AD4`
`color.semantic.Background.BrandHover`	`#5CA1DA`
`color.semantic.Background.BrandPressed`	`#88B9E1`
`color.semantic.Background.BrandSubtle`	`#19344A`
`color.semantic.Background.Disabled`	`#5D5E5F`
`color.semantic.Background.Hover`	`#FFFFFF1A`
`color.semantic.Background.Info`	`#876ADE`
`color.semantic.Background.InfoSubtle`	`#3D3457`
`color.semantic.Background.Inverse`	`#F5F5F5`
`color.semantic.Background.InverseHover`	`#0000001A`
`color.semantic.Background.InversePressed`	`#00000033`
`color.semantic.Background.Negative`	`#E00B0B`
`color.semantic.Background.NegativeSubtle`	`#AA0404`
`color.semantic.Background.Positive`	`#099A6E`
`color.semantic.Background.PositiveSubtle`	`#14644C`
`color.semantic.Background.Pressed`	`#FFFFFF33`
`color.semantic.Background.Primary`	`#191C1E`
`color.semantic.Background.Selected`	`#184366`
`color.semantic.Background.Tonal`	`#454748`
`color.semantic.Background.TonalHover`	`#5D5E5F`
`color.semantic.Background.TonalPressed`	`#6F7071`

Border

Token	Hex	Swatch
`color.semantic.Border.Attention`	`#F07A3A`
`color.semantic.Border.Brand`	`#2F8AD4`
`color.semantic.Border.Disabled`	`#C6C6C7`
`color.semantic.Border.Focus`	`#2F8AD4`
`color.semantic.Border.Info`	`#876ADE`
`color.semantic.Border.Inverse`	`#FCFDFD`
`color.semantic.Border.Mono`	`#FCFDFD`
`color.semantic.Border.Negative`	`#E23838`
`color.semantic.Border.Positive`	`#61B99E`
`color.semantic.Border.Primary`	`#E2E2E2`
`color.semantic.Border.Secondary`	`#C6C6C7`
`color.semantic.Border.Tertiary`	`#6F7071`

Content

Token	Hex	Swatch
`color.semantic.Content.Attention`	`#F07A3A`
`color.semantic.Content.AttentionBold`	`#F5CDB7`
`color.semantic.Content.Brand`	`#2F8AD4`
`color.semantic.Content.Disabled`	`#6F7071`
`color.semantic.Content.Info`	`#876ADE`
`color.semantic.Content.InfoBold`	`#D2C8EF`
`color.semantic.Content.Link`	`#2F8AD4`
`color.semantic.Content.LinkHover`	`#5CA1DA`
`color.semantic.Content.LinkPressed`	`#88B9E1`
`color.semantic.Content.Negative`	`#E23838`
`color.semantic.Content.NegativeBold`	`#F0B6B6`
`color.semantic.Content.Positive`	`#35A986`
`color.semantic.Content.PositiveBold`	`#B4DBCF`
`color.semantic.Content.Primary`	`#FCFDFD`
`color.semantic.Content.PrimaryInverse`	`#191C1E`
`color.semantic.Content.Secondary`	`#F1F1F1`
`color.semantic.Content.SecondaryInverse`	`#2E3133`
`color.semantic.Content.Tertiary`	`#E2E2E2`
`color.semantic.Content.TertiaryInverse`	`#454748`

Usage Guidelines

Always use semantic tokens in component design — never raw primitive values.
Use Background/Primary (#191C1E) for main surfaces.
Use Background/Inverse (#F5F5F5) for light-background contexts.
Use Content/Disabled (#6F7071) for disabled states — never custom grays.
Brand blue = Blue/50 (#0072CF) = Background/Brand = Content/Brand.

Do

Apply Border/Primary for default borders; Border/Focus on focused inputs.
Use Translucid Black / Translucid White tokens for overlays and scrim layers.

Don't

Don't use primitive tokens directly in component specs.
Don't create new one-off colors — always map to an existing primitive.