Semantic Colors

Use-case tokens for surface, ink, and outline. They map to the palette and swap with the theme.

surface

Use for cards, panels, page chrome, alert backgrounds. Steps from soft (gray-1) to inverted (gray-7).

bg-surface-base → neutral-white
#ffffff
bg-surface-gray-1 → gray-50
#f8f8f8
bg-surface-gray-2 → gray-100
#f3f3f3
bg-surface-gray-3 → gray-200
#ededed
bg-surface-gray-4 → gray-300
#e2e2e2
bg-surface-gray-5 → gray-400
#c7c7c7
bg-surface-gray-6 → gray-500
#999999
bg-surface-gray-7 → gray-600
#7c7c7c
bg-surface-gray-8 → gray-700
#525252
bg-surface-gray-9 → gray-800
#383838
bg-surface-gray-10 → gray-900
#171717
bg-surface-sidebar → gray-50
#f8f8f8
bg-surface-elevation-1 → neutral-white
#ffffff
bg-surface-elevation-2 → neutral-white
#ffffff
bg-surface-elevation-3 → neutral-white
#ffffff
bg-surface-red-1 → red-50
#fff5f5
bg-surface-red-2 → red-100
#ffe7e7
bg-surface-red-3 → red-200
#ffd8d8
bg-surface-red-4 → red-300
#fdc2c2
bg-surface-red-5 → red-400
#f79596
bg-surface-red-6 → red-500
#e03434
bg-surface-red-7 → red-600
#ce2c2c
bg-surface-red-8 → red-700
#b41d1d
bg-surface-red-9 → red-800
#941f1f
bg-surface-red-10 → red-900
#6b1515
bg-surface-blue-1 → blue-50
#f1f8fe
bg-surface-blue-2 → blue-100
#e6f4ff
bg-surface-blue-3 → blue-200
#d1eaff
bg-surface-blue-4 → blue-300
#b5ddfd
bg-surface-blue-5 → blue-400
#61afef
bg-surface-blue-6 → blue-500
#0d8ef8
bg-surface-blue-7 → blue-600
#077ddf
bg-surface-blue-8 → blue-700
#0375d3
bg-surface-blue-9 → blue-800
#005cad
bg-surface-blue-10 → blue-900
#004880
bg-surface-green-1 → green-50
#f0faf3
bg-surface-green-2 → green-100
#e4faeb
bg-surface-green-3 → green-200
#bdefcc
bg-surface-green-4 → green-300
#a8e6be
bg-surface-green-5 → green-400
#7edaa1
bg-surface-green-6 → green-500
#43ac79
bg-surface-green-7 → green-600
#268c5c
bg-surface-green-8 → green-700
#14804d
bg-surface-green-9 → green-800
#075e35
bg-surface-green-10 → green-900
#173b2c
bg-surface-amber-1 → amber-50
#fdf8ed
bg-surface-amber-2 → amber-100
#fff4d3
bg-surface-amber-3 → amber-200
#f6eac0
bg-surface-amber-4 → amber-300
#f3e3b4
bg-surface-amber-5 → amber-400
#f4cd80
bg-surface-amber-6 → amber-500
#df9311
bg-surface-amber-7 → amber-600
#ca7e0c
bg-surface-amber-8 → amber-700
#bb6f0c
bg-surface-amber-9 → amber-800
#91400d
bg-surface-amber-10 → amber-900
#763813
bg-surface-violet-1 → violet-50
#f7f6fe
bg-surface-violet-2 → violet-100
#eee8ff
bg-surface-violet-3 → violet-200
#dbd5ff
bg-surface-violet-4 → violet-300
#d2c5fc
bg-surface-violet-5 → violet-400
#b5a1fc
bg-surface-violet-6 → violet-500
#7757ee
bg-surface-violet-7 → violet-600
#6e57d1
bg-surface-violet-8 → violet-700
#4f3da1
bg-surface-violet-9 → violet-800
#392980
bg-surface-violet-10 → violet-900
#251959
bg-surface-yellow-1 → yellow-50
#fcfbe8
bg-surface-yellow-2 → yellow-100
#fff7d3
bg-surface-yellow-3 → yellow-200
#f7e9a8
bg-surface-yellow-4 → yellow-300
#f5e171
bg-surface-yellow-5 → yellow-400
#f2d14b
bg-surface-yellow-6 → yellow-500
#edba13
bg-surface-yellow-7 → yellow-600
#ab790d
bg-surface-yellow-8 → yellow-700
#9a6304
bg-surface-yellow-9 → yellow-800
#8c5600
bg-surface-yellow-10 → yellow-900
#733f12
bg-surface-orange-1 → orange-50
#fff4ed
bg-surface-orange-2 → orange-100
#ffefe4
bg-surface-orange-3 → orange-200
#ffdec5
bg-surface-orange-4 → orange-300
#ffcba3
bg-surface-orange-5 → orange-400
#f4b07f
bg-surface-orange-6 → orange-500
#e86c13
bg-surface-orange-7 → orange-600
#d35a09
bg-surface-orange-8 → orange-700
#bd3e0c
bg-surface-orange-9 → orange-800
#9e3513
bg-surface-orange-10 → orange-900
#6b2711
bg-surface-teal-1 → teal-50
#eefbf8
bg-surface-teal-2 → teal-100
#e6f7f4
bg-surface-teal-3 → teal-200
#bae8e1
bg-surface-teal-4 → teal-300
#97ded4
bg-surface-teal-5 → teal-400
#73d1c4
bg-surface-teal-6 → teal-500
#36baad
bg-surface-teal-7 → teal-600
#0a857b
bg-surface-teal-8 → teal-700
#0f736b
bg-surface-teal-9 → teal-800
#115c57
bg-surface-teal-10 → teal-900
#114541
bg-surface-cyan-1 → cyan-50
#f2fbfd
bg-surface-cyan-2 → cyan-100
#ddf7ff
bg-surface-cyan-3 → cyan-200
#b3e8f7
bg-surface-cyan-4 → cyan-300
#99e2f8
bg-surface-cyan-5 → cyan-400
#72d5f3
bg-surface-cyan-6 → cyan-500
#3bbde5
bg-surface-cyan-7 → cyan-600
#1f8cad
bg-surface-cyan-8 → cyan-700
#1d7f9d
bg-surface-cyan-9 → cyan-800
#125c73
bg-surface-cyan-10 → cyan-900
#164759
bg-surface-purple-1 → purple-50
#f8f3fb
bg-surface-purple-2 → purple-100
#f6e9ff
bg-surface-purple-3 → purple-200
#ecd3ff
bg-surface-purple-4 → purple-300
#e2b9fc
bg-surface-purple-5 → purple-400
#bf78fa
bg-surface-purple-6 → purple-500
#9c45e3
bg-surface-purple-7 → purple-600
#8e49ca
bg-surface-purple-8 → purple-700
#6e399d
bg-surface-purple-9 → purple-800
#5c2f83
bg-surface-purple-10 → purple-900
#401863
bg-surface-pink-1 → pink-50
#fff7fc
bg-surface-pink-2 → pink-100
#fde8f5
bg-surface-pink-3 → pink-200
#ffd5f0
bg-surface-pink-4 → pink-300
#f9b9e0
bg-surface-pink-5 → pink-400
#f77cc6
bg-surface-pink-6 → pink-500
#e34aa6
bg-surface-pink-7 → pink-600
#cf3a96
bg-surface-pink-8 → pink-700
#9c2671
bg-surface-pink-9 → pink-800
#801458
bg-surface-pink-10 → pink-900
#570f3e
bg-surface-alert-button-default → neutral-white
#ffffff
bg-surface-alert-button-info → neutral-white
#ffffff
bg-surface-alert-button-success → neutral-white
#ffffff
bg-surface-alert-button-warning → neutral-white
#ffffff
bg-surface-alert-button-error → neutral-white
#ffffff

surface-alpha

Use when a surface needs transparency over variable backgrounds, overlays, or layered chrome.

bg-surface-alpha-base → neutral-white
#ffffff
bg-surface-alpha-gray-1 → gray-alpha-50
#00000008
bg-surface-alpha-gray-2 → gray-alpha-100
#0000000b
bg-surface-alpha-gray-3 → gray-alpha-200
#00000012
bg-surface-alpha-gray-4 → gray-alpha-300
#0000001d
bg-surface-alpha-gray-5 → gray-alpha-400
#00000038
bg-surface-alpha-gray-6 → gray-alpha-500
#00000066
bg-surface-alpha-gray-7 → gray-alpha-600
#00000083
bg-surface-alpha-gray-8 → gray-alpha-700
#000000ad
bg-surface-alpha-gray-9 → gray-alpha-800
#000000c7
bg-surface-alpha-gray-10 → gray-alpha-900
#000000e8
bg-surface-alpha-sidebar → gray-50
#f8f8f8
bg-surface-alpha-elevation-1 → neutral-white
#ffffff
bg-surface-alpha-elevation-2 → neutral-white
#ffffff
bg-surface-alpha-elevation-3 → neutral-white
#ffffff
bg-surface-alpha-gray-2-overlay → overlay-black-50
#00000017

ink

Use for typography, icons, and any glyph-style fill. gray-8 is body text; gray-4/5 is secondary.

text-ink-base → neutral-white
#ffffff
text-ink-gray-1 → gray-200
#ededed
text-ink-gray-2 → gray-300
#e2e2e2
text-ink-gray-3 → gray-400
#c7c7c7
text-ink-gray-4 → gray-500
#999999
text-ink-gray-5 → gray-600
#7c7c7c
text-ink-gray-6 → gray-700
#525252
text-ink-gray-7 → gray-800
#383838
text-ink-gray-8 → gray-900
#171717
text-ink-gray-9 → gray-950
#0f0f0f
text-ink-red-1 → neutral-white
#ffffff
text-ink-red-2 → red-100
#ffe7e7
text-ink-red-3 → red-200
#ffd8d8
text-ink-red-4 → red-300
#fdc2c2
text-ink-red-5 → red-400
#f79596
text-ink-red-6 → red-500
#e03434
text-ink-red-7 → red-600
#ce2c2c
text-ink-red-8 → red-700
#b41d1d
text-ink-red-9 → red-800
#941f1f
text-ink-red-10 → red-900
#6b1515
text-ink-blue-1 → neutral-white
#ffffff
text-ink-blue-2 → blue-100
#e6f4ff
text-ink-blue-3 → blue-200
#d1eaff
text-ink-blue-4 → blue-300
#b5ddfd
text-ink-blue-5 → blue-400
#61afef
text-ink-blue-6 → blue-500
#0d8ef8
text-ink-blue-7 → blue-600
#077ddf
text-ink-blue-8 → blue-700
#0375d3
text-ink-blue-9 → blue-800
#005cad
text-ink-blue-10 → blue-900
#004880
text-ink-green-1 → neutral-white
#ffffff
text-ink-green-2 → green-100
#e4faeb
text-ink-green-3 → green-200
#bdefcc
text-ink-green-4 → green-300
#a8e6be
text-ink-green-5 → green-400
#7edaa1
text-ink-green-6 → green-500
#43ac79
text-ink-green-7 → green-600
#268c5c
text-ink-green-8 → green-700
#14804d
text-ink-green-9 → green-800
#075e35
text-ink-green-10 → green-900
#173b2c
text-ink-amber-1 → neutral-white
#ffffff
text-ink-amber-2 → amber-100
#fff4d3
text-ink-amber-3 → amber-200
#f6eac0
text-ink-amber-4 → amber-300
#f3e3b4
text-ink-amber-5 → amber-400
#f4cd80
text-ink-amber-6 → amber-500
#df9311
text-ink-amber-7 → amber-600
#ca7e0c
text-ink-amber-8 → amber-700
#bb6f0c
text-ink-amber-9 → amber-800
#91400d
text-ink-amber-10 → amber-900
#763813
text-ink-violet-1 → neutral-white
#ffffff
text-ink-violet-2 → violet-100
#eee8ff
text-ink-violet-3 → violet-200
#dbd5ff
text-ink-violet-4 → violet-300
#d2c5fc
text-ink-violet-5 → violet-400
#b5a1fc
text-ink-violet-6 → violet-500
#7757ee
text-ink-violet-7 → violet-600
#6e57d1
text-ink-violet-8 → violet-700
#4f3da1
text-ink-violet-9 → violet-800
#392980
text-ink-violet-10 → violet-900
#251959
text-ink-yellow-1 → neutral-white
#ffffff
text-ink-yellow-2 → yellow-100
#fff7d3
text-ink-yellow-3 → yellow-200
#f7e9a8
text-ink-yellow-4 → yellow-300
#f5e171
text-ink-yellow-5 → yellow-400
#f2d14b
text-ink-yellow-6 → yellow-500
#edba13
text-ink-yellow-7 → yellow-600
#ab790d
text-ink-yellow-8 → yellow-700
#9a6304
text-ink-yellow-9 → yellow-800
#8c5600
text-ink-yellow-10 → yellow-900
#733f12
text-ink-orange-1 → neutral-white
#ffffff
text-ink-orange-2 → orange-100
#ffefe4
text-ink-orange-3 → orange-200
#ffdec5
text-ink-orange-4 → orange-300
#ffcba3
text-ink-orange-5 → orange-400
#f4b07f
text-ink-orange-6 → orange-500
#e86c13
text-ink-orange-7 → orange-600
#d35a09
text-ink-orange-8 → orange-700
#bd3e0c
text-ink-orange-9 → orange-800
#9e3513
text-ink-orange-10 → orange-900
#6b2711
text-ink-teal-1 → neutral-white
#ffffff
text-ink-teal-2 → teal-100
#e6f7f4
text-ink-teal-3 → teal-200
#bae8e1
text-ink-teal-4 → teal-300
#97ded4
text-ink-teal-5 → teal-400
#73d1c4
text-ink-teal-6 → teal-500
#36baad
text-ink-teal-7 → teal-600
#0a857b
text-ink-teal-8 → teal-700
#0f736b
text-ink-teal-9 → teal-800
#115c57
text-ink-teal-10 → teal-900
#114541
text-ink-cyan-1 → neutral-white
#ffffff
text-ink-cyan-2 → cyan-100
#ddf7ff
text-ink-cyan-3 → cyan-200
#b3e8f7
text-ink-cyan-4 → cyan-300
#99e2f8
text-ink-cyan-5 → cyan-400
#72d5f3
text-ink-cyan-6 → cyan-500
#3bbde5
text-ink-cyan-7 → cyan-600
#1f8cad
text-ink-cyan-8 → cyan-700
#1d7f9d
text-ink-cyan-9 → cyan-800
#125c73
text-ink-cyan-10 → cyan-900
#164759
text-ink-purple-1 → neutral-white
#ffffff
text-ink-purple-2 → purple-100
#f6e9ff
text-ink-purple-3 → purple-200
#ecd3ff
text-ink-purple-4 → purple-300
#e2b9fc
text-ink-purple-5 → purple-400
#bf78fa
text-ink-purple-6 → purple-500
#9c45e3
text-ink-purple-7 → purple-600
#8e49ca
text-ink-purple-8 → purple-700
#6e399d
text-ink-purple-9 → purple-800
#5c2f83
text-ink-purple-10 → purple-900
#401863
text-ink-pink-1 → neutral-white
#ffffff
text-ink-pink-2 → pink-100
#fde8f5
text-ink-pink-3 → pink-200
#ffd5f0
text-ink-pink-4 → pink-300
#f9b9e0
text-ink-pink-5 → pink-400
#f77cc6
text-ink-pink-6 → pink-500
#e34aa6
text-ink-pink-7 → pink-600
#cf3a96
text-ink-pink-8 → pink-700
#9c2671
text-ink-pink-9 → pink-800
#801458
text-ink-pink-10 → pink-900
#570f3e
text-ink-alert-button-default → gray-900
#171717
text-ink-alert-button-info → gray-900
#171717
text-ink-alert-button-success → gray-900
#171717
text-ink-alert-button-warning → gray-900
#171717
text-ink-alert-button-error → gray-900
#171717
text-ink-blue-link → blue-500
#0d8ef8

outline

Use for borders, dividers, focus rings, outlined controls.

border-outline-base → neutral-white
#ffffff
border-outline-gray-1 → gray-200
#ededed
border-outline-gray-2 → gray-300
#e2e2e2
border-outline-gray-3 → gray-400
#c7c7c7
border-outline-gray-4 → gray-500
#999999
border-outline-gray-5 → gray-600
#7c7c7c
border-outline-gray-6 → gray-700
#525252
border-outline-gray-7 → gray-800
#383838
border-outline-gray-8 → gray-900
#171717
border-outline-gray-9 → gray-950
#0f0f0f
border-outline-red-1 → red-100
#ffe7e7
border-outline-red-2 → red-200
#ffd8d8
border-outline-red-3 → red-300
#fdc2c2
border-outline-red-4 → red-400
#f79596
border-outline-red-5 → red-500
#e03434
border-outline-red-6 → red-600
#ce2c2c
border-outline-red-7 → red-700
#b41d1d
border-outline-red-8 → red-800
#941f1f
border-outline-red-9 → red-900
#6b1515
border-outline-red-10 → red-950
#4c0d0d
border-outline-blue-1 → blue-100
#e6f4ff
border-outline-blue-2 → blue-200
#d1eaff
border-outline-blue-3 → blue-300
#b5ddfd
border-outline-blue-4 → blue-400
#61afef
border-outline-blue-5 → blue-500
#0d8ef8
border-outline-blue-6 → blue-600
#077ddf
border-outline-blue-7 → blue-700
#0375d3
border-outline-blue-8 → blue-800
#005cad
border-outline-blue-9 → blue-900
#004880
border-outline-blue-10 → blue-950
#032e63
border-outline-green-1 → green-100
#e4faeb
border-outline-green-2 → green-200
#bdefcc
border-outline-green-3 → green-300
#a8e6be
border-outline-green-4 → green-400
#7edaa1
border-outline-green-5 → green-500
#43ac79
border-outline-green-6 → green-600
#268c5c
border-outline-green-7 → green-700
#14804d
border-outline-green-8 → green-800
#075e35
border-outline-green-9 → green-900
#173b2c
border-outline-green-10 → green-950
#0a3020
border-outline-amber-1 → amber-100
#fff4d3
border-outline-amber-2 → amber-200
#f6eac0
border-outline-amber-3 → amber-300
#f3e3b4
border-outline-amber-4 → amber-400
#f4cd80
border-outline-amber-5 → amber-500
#df9311
border-outline-amber-6 → amber-600
#ca7e0c
border-outline-amber-7 → amber-700
#bb6f0c
border-outline-amber-8 → amber-800
#91400d
border-outline-amber-9 → amber-900
#763813
border-outline-amber-10 → amber-950
#4e2209
border-outline-violet-1 → violet-100
#eee8ff
border-outline-violet-2 → violet-200
#dbd5ff
border-outline-violet-3 → violet-300
#d2c5fc
border-outline-violet-4 → violet-400
#b5a1fc
border-outline-violet-5 → violet-500
#7757ee
border-outline-violet-6 → violet-600
#6e57d1
border-outline-violet-7 → violet-700
#4f3da1
border-outline-violet-8 → violet-800
#392980
border-outline-violet-9 → violet-900
#251959
border-outline-violet-10 → violet-950
#150655
border-outline-yellow-1 → yellow-100
#fff7d3
border-outline-yellow-2 → yellow-200
#f7e9a8
border-outline-yellow-3 → yellow-300
#f5e171
border-outline-yellow-4 → yellow-400
#f2d14b
border-outline-yellow-5 → yellow-500
#edba13
border-outline-yellow-6 → yellow-600
#ab790d
border-outline-yellow-7 → yellow-700
#9a6304
border-outline-yellow-8 → yellow-800
#8c5600
border-outline-yellow-9 → yellow-900
#733f12
border-outline-yellow-10 → yellow-950
#542e0d
border-outline-orange-1 → orange-100
#ffefe4
border-outline-orange-2 → orange-200
#ffdec5
border-outline-orange-3 → orange-300
#ffcba3
border-outline-orange-4 → orange-400
#f4b07f
border-outline-orange-5 → orange-500
#e86c13
border-outline-orange-6 → orange-600
#d35a09
border-outline-orange-7 → orange-700
#bd3e0c
border-outline-orange-8 → orange-800
#9e3513
border-outline-orange-9 → orange-900
#6b2711
border-outline-orange-10 → orange-950
#491605
border-outline-teal-1 → teal-100
#e6f7f4
border-outline-teal-2 → teal-200
#bae8e1
border-outline-teal-3 → teal-300
#97ded4
border-outline-teal-4 → teal-400
#73d1c4
border-outline-teal-5 → teal-500
#36baad
border-outline-teal-6 → teal-600
#0a857b
border-outline-teal-7 → teal-700
#0f736b
border-outline-teal-8 → teal-800
#115c57
border-outline-teal-9 → teal-900
#114541
border-outline-teal-10 → teal-950
#053734
border-outline-cyan-1 → cyan-100
#ddf7ff
border-outline-cyan-2 → cyan-200
#b3e8f7
border-outline-cyan-3 → cyan-300
#99e2f8
border-outline-cyan-4 → cyan-400
#72d5f3
border-outline-cyan-5 → cyan-500
#3bbde5
border-outline-cyan-6 → cyan-600
#1f8cad
border-outline-cyan-7 → cyan-700
#1d7f9d
border-outline-cyan-8 → cyan-800
#125c73
border-outline-cyan-9 → cyan-900
#164759
border-outline-cyan-10 → cyan-950
#05383f
border-outline-purple-1 → purple-100
#f6e9ff
border-outline-purple-2 → purple-200
#ecd3ff
border-outline-purple-3 → purple-300
#e2b9fc
border-outline-purple-4 → purple-400
#bf78fa
border-outline-purple-5 → purple-500
#9c45e3
border-outline-purple-6 → purple-600
#8e49ca
border-outline-purple-7 → purple-700
#6e399d
border-outline-purple-8 → purple-800
#5c2f83
border-outline-purple-9 → purple-900
#401863
border-outline-purple-10 → purple-950
#2d084e
border-outline-pink-1 → pink-100
#fde8f5
border-outline-pink-2 → pink-200
#ffd5f0
border-outline-pink-3 → pink-300
#f9b9e0
border-outline-pink-4 → pink-400
#f77cc6
border-outline-pink-5 → pink-500
#e34aa6
border-outline-pink-6 → pink-600
#cf3a96
border-outline-pink-7 → pink-700
#9c2671
border-outline-pink-8 → pink-800
#801458
border-outline-pink-9 → pink-900
#570f3e
border-outline-pink-10 → pink-950
#40062c
border-outline-elevation-1 → gray-200
#ededed
border-outline-elevation-2 → gray-200
#ededed

outline-alpha

Use for borders and dividers that should preserve translucency across layered surfaces.

border-outline-alpha-base → neutral-white
#ffffff
border-outline-alpha-gray-1 → gray-alpha-200
#00000012
border-outline-alpha-gray-2 → gray-alpha-300
#0000001d
border-outline-alpha-gray-3 → gray-alpha-400
#00000038
border-outline-alpha-gray-4 → gray-alpha-500
#00000066
border-outline-alpha-gray-5 → gray-alpha-600
#00000083
border-outline-alpha-gray-6 → gray-alpha-700
#000000ad
border-outline-alpha-gray-7 → gray-alpha-800
#000000c7
border-outline-alpha-gray-8 → gray-alpha-900
#000000e8
border-outline-alpha-gray-9 → gray-alpha-950
#000000f0
border-outline-alpha-elevation-1 → gray-alpha-200
#00000012
border-outline-alpha-elevation-2 → gray-alpha-200
#00000012