Skip to content

Semantic Colors

Meaningful interface roles that preserve intent while Light and Dark use different material responses.

Color / meaning

Semantic color roles

The left marker resolves in the current site color mode. Light and Dark values stay visible side by side, proving that component intent remains stable while the color mode changes.
Light Dark

Brand signal

6 roles
primary
#FF5A1F#FF5A1F
hover
#EE430F#FF742F
pressed
#C9320A#EE430F
muted
#FFE0CC#451005
subtle
#FFF1E8#7F2511
on-primary
#FFFFFF#FFFFFF

Background

6 roles
canvas
#E4E5E4#07090A
surface
#F7F8F8#0E1214
raised
#FCFDFD#171C1F
inset
#D5D7D6#000000
overlay
#FFFFFF#171C1F
scrim
rgba(0, 0, 0, 0.48)rgba(0, 0, 0, 0.80)

Foreground

5 roles
default
#0E1214#F7F8F8
muted
#424B52#9EA9B1
subtle
#5A656D#77838C
disabled
#7C8180#5A656D
inverse
#FCFDFD#0E1214

Icon

4 roles
default
#22282C#EFF0F0
muted
#5A656D#9EA9B1
disabled
#7C8180#5A656D
inverse
#FCFDFD#0E1214

Border

5 roles
subtle
#E4E5E4#171C1F
default
#BEC1C0#30373C
strong
#7C8180#5A656D
focus
#FF5A1F#FF5A1F
inverse
rgba(255, 255, 255, 0.32)rgba(0, 0, 0, 0.32)

Physical edge

5 roles
highlight
rgba(255, 255, 255, 0.80)rgba(255, 255, 255, 0.16)
highlight-soft
rgba(255, 255, 255, 0.48)rgba(255, 255, 255, 0.08)
shadow
rgba(0, 0, 0, 0.24)rgba(0, 0, 0, 0.64)
shadow-strong
rgba(0, 0, 0, 0.48)rgba(0, 0, 0, 0.80)
contact
rgba(0, 0, 0, 0.32)rgba(0, 0, 0, 0.80)

Action

13 roles
primary.default
#171C1F#F7F8F8
primary.hover
#22282C#FFFFFF
primary.pressed
#0E1214#E4E5E4
primary.disabled
#D5D7D6#30373C
primary.on
#FCFDFD#0E1214
secondary.default
#EFF0F0#22282C
secondary.hover
#FCFDFD#30373C
secondary.pressed
#D5D7D6#171C1F
secondary.disabled
#E4E5E4#171C1F
secondary.on
#171C1F#F7F8F8
ghost.default
rgba(0, 0, 0, 0.04)rgba(255, 255, 255, 0.04)
ghost.hover
rgba(0, 0, 0, 0.08)rgba(255, 255, 255, 0.08)
ghost.pressed
rgba(0, 0, 0, 0.12)rgba(255, 255, 255, 0.12)

Interaction

6 roles
hover
rgba(0, 0, 0, 0.04)rgba(255, 255, 255, 0.04)
pressed
rgba(0, 0, 0, 0.08)rgba(255, 255, 255, 0.08)
selected
#FFF1E8#451005
selected-strong
#FF5A1F#FF5A1F
focus-ring
#FF5A1F#FF742F
disabled
rgba(0, 0, 0, 0.08)rgba(255, 255, 255, 0.08)

data

22 roles
plot
#EFF0F0#0E1214
plot-inset
#E4E5E4#000000
grid
#BEC1C0#30373C
axis
#5A656D#77838C
label
#30373C#9EA9B1
value
#0E1214#FCFDFD
focus
#FF5A1F#FF742F
positive
#168747#3CC275
negative
#D12F20#FA6B59
series.1
#171C1F#F7F8F8
series.2
#FF5A1F#FF742F
series.3
#365FD0#659BFA
series.4
#168747#3CC275
series.5
#7440DB#AA82FF
series.6
#117FA1#70D8F1
series.7
#BA6B06#EDAF21
series.8
#D12F20#FA6B59
sequential.1
#D5D7D6#22282C
sequential.2
#9EA9B1#424B52
sequential.3
#5A656D#77838C
sequential.4
#30373C#C2CAD0
sequential.5
#0E1214#FCFDFD

Status

16 roles
success.signal
#168747#3CC275
success.surface
#EAFBF0#082719
success.border
#70D99A#166B3B
success.text
#165532#A7EBC0
warning.signal
#D98F0B#EDAF21
warning.surface
#FFF8DF#3A1906
warning.border
#F4C84B#954A0A
warning.text
#793B10#F9DE86
danger.signal
#D12F20#FA6B59
danger.surface
#FFF0EE#410E0A
danger.border
#FF9D90#AF2519
danger.text
#91231B#FFC5BD
info.signal
#365FD0#659BFA
info.surface
#EEF5FF#17213F
info.border
#90BBFF#2E4DAA
info.text
#293F86#BDD7FF

Optical

7 roles
glass
rgba(255, 255, 255, 0.64)rgba(255, 255, 255, 0.08)
ice
#DCEBFF#BDD7FF
blue
#8FB5FF#659BFA
violet
#C9B7FF#AA82FF
rose
#FFD1E8#FF9D90
orange
#FFD2AE#FF742F
mint
#C7F4E8#70D8F1

display

7 roles
background
#07090A#000000
background-raised
#0E1214#07090A
foreground
#FCFDFD#FCFDFD
muted
#9EA9B1#77838C
trace
#FF742F#FF742F
border
#000000#000000
reflection
rgba(255, 255, 255, 0.08)rgba(255, 255, 255, 0.12)