System Colors
The algorithmic color primitives and their semantic mappings automatically mapped from our central JSON dictionary sequence.
Semantic Aliases
brand
color.brand.default#C04828
color.brand.hover#993A20
color.brand.subtle#F9D5C8
color.brand.on-brand#FFFFFF
surface
color.surface.base#0F0F0E
color.surface.raised#1A1A18
color.surface.overlay#2A2A28
text
color.text.primary#FFFFFF
color.text.secondary#ABABAB
color.text.tertiary#5C5C58
color.text.disabled#3D3D3A
color.text.inverse#0F0F0E
border
color.border.default#2A2A28
color.border.subtle#1A1A18
color.border.strong#3D3D3A
status
color.status.success#1D9E75
color.status.warning#EF9F27
color.status.error#E24B4A
color.status.info#378ADD
Base Primitives
coral Base Scale
50
100
200
300
400
500
600
700
800
900
gray Base Scale
50
100
200
300
400
500
600
700
800
900
Light Mode
Semantic aliases for light contexts. These map to the same base primitives as the dark tokens — only the meaning changes, not the scale.
Light context preview
color.light.brand.default#C04828
color.light.brand.hover#993A20
color.light.surface.base#F7F7F5
color.light.surface.raised#FFFFFF
color.light.surface.overlayrgba(255, 255, 255, 0.8)
color.light.text.primary#0F0F0E
color.light.text.secondary#3D3D3A
color.light.text.tertiary#888880
color.light.border.default#D4D4CF
color.light.border.subtle#EDEDEA
color.light.status.error#E02424
color.light.status.success#0E9F6E
color.light.status.warning#D08112
color.light.status.info#3F83F8
CSS: --gfk-color-light-* — apply on a .light or [data-theme="light"] selector