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
#ffffffbg-surface-gray-1 → gray-50
#f8f8f8bg-surface-gray-2 → gray-100
#f3f3f3bg-surface-gray-3 → gray-200
#edededbg-surface-gray-4 → gray-300
#e2e2e2bg-surface-gray-5 → gray-400
#c7c7c7bg-surface-gray-6 → gray-500
#999999bg-surface-gray-7 → gray-600
#7c7c7cbg-surface-gray-8 → gray-700
#525252bg-surface-gray-9 → gray-800
#383838bg-surface-gray-10 → gray-900
#171717bg-surface-sidebar → gray-50
#f8f8f8bg-surface-elevation-1 → neutral-white
#ffffffbg-surface-elevation-2 → neutral-white
#ffffffbg-surface-elevation-3 → neutral-white
#ffffffbg-surface-red-1 → red-50
#fff5f5bg-surface-red-2 → red-100
#ffe7e7bg-surface-red-3 → red-200
#ffd8d8bg-surface-red-4 → red-300
#fdc2c2bg-surface-red-5 → red-400
#f79596bg-surface-red-6 → red-500
#e03434bg-surface-red-7 → red-600
#ce2c2cbg-surface-red-8 → red-700
#b41d1dbg-surface-red-9 → red-800
#941f1fbg-surface-red-10 → red-900
#6b1515bg-surface-blue-1 → blue-50
#f1f8febg-surface-blue-2 → blue-100
#e6f4ffbg-surface-blue-3 → blue-200
#d1eaffbg-surface-blue-4 → blue-300
#b5ddfdbg-surface-blue-5 → blue-400
#61afefbg-surface-blue-6 → blue-500
#0d8ef8bg-surface-blue-7 → blue-600
#077ddfbg-surface-blue-8 → blue-700
#0375d3bg-surface-blue-9 → blue-800
#005cadbg-surface-blue-10 → blue-900
#004880bg-surface-green-1 → green-50
#f0faf3bg-surface-green-2 → green-100
#e4faebbg-surface-green-3 → green-200
#bdefccbg-surface-green-4 → green-300
#a8e6bebg-surface-green-5 → green-400
#7edaa1bg-surface-green-6 → green-500
#43ac79bg-surface-green-7 → green-600
#268c5cbg-surface-green-8 → green-700
#14804dbg-surface-green-9 → green-800
#075e35bg-surface-green-10 → green-900
#173b2cbg-surface-amber-1 → amber-50
#fdf8edbg-surface-amber-2 → amber-100
#fff4d3bg-surface-amber-3 → amber-200
#f6eac0bg-surface-amber-4 → amber-300
#f3e3b4bg-surface-amber-5 → amber-400
#f4cd80bg-surface-amber-6 → amber-500
#df9311bg-surface-amber-7 → amber-600
#ca7e0cbg-surface-amber-8 → amber-700
#bb6f0cbg-surface-amber-9 → amber-800
#91400dbg-surface-amber-10 → amber-900
#763813bg-surface-violet-1 → violet-50
#f7f6febg-surface-violet-2 → violet-100
#eee8ffbg-surface-violet-3 → violet-200
#dbd5ffbg-surface-violet-4 → violet-300
#d2c5fcbg-surface-violet-5 → violet-400
#b5a1fcbg-surface-violet-6 → violet-500
#7757eebg-surface-violet-7 → violet-600
#6e57d1bg-surface-violet-8 → violet-700
#4f3da1bg-surface-violet-9 → violet-800
#392980bg-surface-violet-10 → violet-900
#251959bg-surface-yellow-1 → yellow-50
#fcfbe8bg-surface-yellow-2 → yellow-100
#fff7d3bg-surface-yellow-3 → yellow-200
#f7e9a8bg-surface-yellow-4 → yellow-300
#f5e171bg-surface-yellow-5 → yellow-400
#f2d14bbg-surface-yellow-6 → yellow-500
#edba13bg-surface-yellow-7 → yellow-600
#ab790dbg-surface-yellow-8 → yellow-700
#9a6304bg-surface-yellow-9 → yellow-800
#8c5600bg-surface-yellow-10 → yellow-900
#733f12bg-surface-orange-1 → orange-50
#fff4edbg-surface-orange-2 → orange-100
#ffefe4bg-surface-orange-3 → orange-200
#ffdec5bg-surface-orange-4 → orange-300
#ffcba3bg-surface-orange-5 → orange-400
#f4b07fbg-surface-orange-6 → orange-500
#e86c13bg-surface-orange-7 → orange-600
#d35a09bg-surface-orange-8 → orange-700
#bd3e0cbg-surface-orange-9 → orange-800
#9e3513bg-surface-orange-10 → orange-900
#6b2711bg-surface-teal-1 → teal-50
#eefbf8bg-surface-teal-2 → teal-100
#e6f7f4bg-surface-teal-3 → teal-200
#bae8e1bg-surface-teal-4 → teal-300
#97ded4bg-surface-teal-5 → teal-400
#73d1c4bg-surface-teal-6 → teal-500
#36baadbg-surface-teal-7 → teal-600
#0a857bbg-surface-teal-8 → teal-700
#0f736bbg-surface-teal-9 → teal-800
#115c57bg-surface-teal-10 → teal-900
#114541bg-surface-cyan-1 → cyan-50
#f2fbfdbg-surface-cyan-2 → cyan-100
#ddf7ffbg-surface-cyan-3 → cyan-200
#b3e8f7bg-surface-cyan-4 → cyan-300
#99e2f8bg-surface-cyan-5 → cyan-400
#72d5f3bg-surface-cyan-6 → cyan-500
#3bbde5bg-surface-cyan-7 → cyan-600
#1f8cadbg-surface-cyan-8 → cyan-700
#1d7f9dbg-surface-cyan-9 → cyan-800
#125c73bg-surface-cyan-10 → cyan-900
#164759bg-surface-purple-1 → purple-50
#f8f3fbbg-surface-purple-2 → purple-100
#f6e9ffbg-surface-purple-3 → purple-200
#ecd3ffbg-surface-purple-4 → purple-300
#e2b9fcbg-surface-purple-5 → purple-400
#bf78fabg-surface-purple-6 → purple-500
#9c45e3bg-surface-purple-7 → purple-600
#8e49cabg-surface-purple-8 → purple-700
#6e399dbg-surface-purple-9 → purple-800
#5c2f83bg-surface-purple-10 → purple-900
#401863bg-surface-pink-1 → pink-50
#fff7fcbg-surface-pink-2 → pink-100
#fde8f5bg-surface-pink-3 → pink-200
#ffd5f0bg-surface-pink-4 → pink-300
#f9b9e0bg-surface-pink-5 → pink-400
#f77cc6bg-surface-pink-6 → pink-500
#e34aa6bg-surface-pink-7 → pink-600
#cf3a96bg-surface-pink-8 → pink-700
#9c2671bg-surface-pink-9 → pink-800
#801458bg-surface-pink-10 → pink-900
#570f3ebg-surface-alert-button-default → neutral-white
#ffffffbg-surface-alert-button-info → neutral-white
#ffffffbg-surface-alert-button-success → neutral-white
#ffffffbg-surface-alert-button-warning → neutral-white
#ffffffbg-surface-alert-button-error → neutral-white
#ffffffsurface-alpha
Use when a surface needs transparency over variable backgrounds, overlays, or layered chrome.
bg-surface-alpha-base → neutral-white
#ffffffbg-surface-alpha-gray-1 → gray-alpha-50
#00000008bg-surface-alpha-gray-2 → gray-alpha-100
#0000000bbg-surface-alpha-gray-3 → gray-alpha-200
#00000012bg-surface-alpha-gray-4 → gray-alpha-300
#0000001dbg-surface-alpha-gray-5 → gray-alpha-400
#00000038bg-surface-alpha-gray-6 → gray-alpha-500
#00000066bg-surface-alpha-gray-7 → gray-alpha-600
#00000083bg-surface-alpha-gray-8 → gray-alpha-700
#000000adbg-surface-alpha-gray-9 → gray-alpha-800
#000000c7bg-surface-alpha-gray-10 → gray-alpha-900
#000000e8bg-surface-alpha-sidebar → gray-50
#f8f8f8bg-surface-alpha-elevation-1 → neutral-white
#ffffffbg-surface-alpha-elevation-2 → neutral-white
#ffffffbg-surface-alpha-elevation-3 → neutral-white
#ffffffbg-surface-alpha-gray-2-overlay → overlay-black-50
#00000017ink
Use for typography, icons, and any glyph-style fill. gray-8 is body text; gray-4/5 is secondary.
text-ink-base → neutral-white
#fffffftext-ink-gray-1 → gray-200
#edededtext-ink-gray-2 → gray-300
#e2e2e2text-ink-gray-3 → gray-400
#c7c7c7text-ink-gray-4 → gray-500
#999999text-ink-gray-5 → gray-600
#7c7c7ctext-ink-gray-6 → gray-700
#525252text-ink-gray-7 → gray-800
#383838text-ink-gray-8 → gray-900
#171717text-ink-gray-9 → gray-950
#0f0f0ftext-ink-red-1 → neutral-white
#fffffftext-ink-red-2 → red-100
#ffe7e7text-ink-red-3 → red-200
#ffd8d8text-ink-red-4 → red-300
#fdc2c2text-ink-red-5 → red-400
#f79596text-ink-red-6 → red-500
#e03434text-ink-red-7 → red-600
#ce2c2ctext-ink-red-8 → red-700
#b41d1dtext-ink-red-9 → red-800
#941f1ftext-ink-red-10 → red-900
#6b1515text-ink-blue-1 → neutral-white
#fffffftext-ink-blue-2 → blue-100
#e6f4fftext-ink-blue-3 → blue-200
#d1eafftext-ink-blue-4 → blue-300
#b5ddfdtext-ink-blue-5 → blue-400
#61afeftext-ink-blue-6 → blue-500
#0d8ef8text-ink-blue-7 → blue-600
#077ddftext-ink-blue-8 → blue-700
#0375d3text-ink-blue-9 → blue-800
#005cadtext-ink-blue-10 → blue-900
#004880text-ink-green-1 → neutral-white
#fffffftext-ink-green-2 → green-100
#e4faebtext-ink-green-3 → green-200
#bdefcctext-ink-green-4 → green-300
#a8e6betext-ink-green-5 → green-400
#7edaa1text-ink-green-6 → green-500
#43ac79text-ink-green-7 → green-600
#268c5ctext-ink-green-8 → green-700
#14804dtext-ink-green-9 → green-800
#075e35text-ink-green-10 → green-900
#173b2ctext-ink-amber-1 → neutral-white
#fffffftext-ink-amber-2 → amber-100
#fff4d3text-ink-amber-3 → amber-200
#f6eac0text-ink-amber-4 → amber-300
#f3e3b4text-ink-amber-5 → amber-400
#f4cd80text-ink-amber-6 → amber-500
#df9311text-ink-amber-7 → amber-600
#ca7e0ctext-ink-amber-8 → amber-700
#bb6f0ctext-ink-amber-9 → amber-800
#91400dtext-ink-amber-10 → amber-900
#763813text-ink-violet-1 → neutral-white
#fffffftext-ink-violet-2 → violet-100
#eee8fftext-ink-violet-3 → violet-200
#dbd5fftext-ink-violet-4 → violet-300
#d2c5fctext-ink-violet-5 → violet-400
#b5a1fctext-ink-violet-6 → violet-500
#7757eetext-ink-violet-7 → violet-600
#6e57d1text-ink-violet-8 → violet-700
#4f3da1text-ink-violet-9 → violet-800
#392980text-ink-violet-10 → violet-900
#251959text-ink-yellow-1 → neutral-white
#fffffftext-ink-yellow-2 → yellow-100
#fff7d3text-ink-yellow-3 → yellow-200
#f7e9a8text-ink-yellow-4 → yellow-300
#f5e171text-ink-yellow-5 → yellow-400
#f2d14btext-ink-yellow-6 → yellow-500
#edba13text-ink-yellow-7 → yellow-600
#ab790dtext-ink-yellow-8 → yellow-700
#9a6304text-ink-yellow-9 → yellow-800
#8c5600text-ink-yellow-10 → yellow-900
#733f12text-ink-orange-1 → neutral-white
#fffffftext-ink-orange-2 → orange-100
#ffefe4text-ink-orange-3 → orange-200
#ffdec5text-ink-orange-4 → orange-300
#ffcba3text-ink-orange-5 → orange-400
#f4b07ftext-ink-orange-6 → orange-500
#e86c13text-ink-orange-7 → orange-600
#d35a09text-ink-orange-8 → orange-700
#bd3e0ctext-ink-orange-9 → orange-800
#9e3513text-ink-orange-10 → orange-900
#6b2711text-ink-teal-1 → neutral-white
#fffffftext-ink-teal-2 → teal-100
#e6f7f4text-ink-teal-3 → teal-200
#bae8e1text-ink-teal-4 → teal-300
#97ded4text-ink-teal-5 → teal-400
#73d1c4text-ink-teal-6 → teal-500
#36baadtext-ink-teal-7 → teal-600
#0a857btext-ink-teal-8 → teal-700
#0f736btext-ink-teal-9 → teal-800
#115c57text-ink-teal-10 → teal-900
#114541text-ink-cyan-1 → neutral-white
#fffffftext-ink-cyan-2 → cyan-100
#ddf7fftext-ink-cyan-3 → cyan-200
#b3e8f7text-ink-cyan-4 → cyan-300
#99e2f8text-ink-cyan-5 → cyan-400
#72d5f3text-ink-cyan-6 → cyan-500
#3bbde5text-ink-cyan-7 → cyan-600
#1f8cadtext-ink-cyan-8 → cyan-700
#1d7f9dtext-ink-cyan-9 → cyan-800
#125c73text-ink-cyan-10 → cyan-900
#164759text-ink-purple-1 → neutral-white
#fffffftext-ink-purple-2 → purple-100
#f6e9fftext-ink-purple-3 → purple-200
#ecd3fftext-ink-purple-4 → purple-300
#e2b9fctext-ink-purple-5 → purple-400
#bf78fatext-ink-purple-6 → purple-500
#9c45e3text-ink-purple-7 → purple-600
#8e49catext-ink-purple-8 → purple-700
#6e399dtext-ink-purple-9 → purple-800
#5c2f83text-ink-purple-10 → purple-900
#401863text-ink-pink-1 → neutral-white
#fffffftext-ink-pink-2 → pink-100
#fde8f5text-ink-pink-3 → pink-200
#ffd5f0text-ink-pink-4 → pink-300
#f9b9e0text-ink-pink-5 → pink-400
#f77cc6text-ink-pink-6 → pink-500
#e34aa6text-ink-pink-7 → pink-600
#cf3a96text-ink-pink-8 → pink-700
#9c2671text-ink-pink-9 → pink-800
#801458text-ink-pink-10 → pink-900
#570f3etext-ink-alert-button-default → gray-900
#171717text-ink-alert-button-info → gray-900
#171717text-ink-alert-button-success → gray-900
#171717text-ink-alert-button-warning → gray-900
#171717text-ink-alert-button-error → gray-900
#171717text-ink-blue-link → blue-500
#0d8ef8outline
Use for borders, dividers, focus rings, outlined controls.
border-outline-base → neutral-white
#ffffffborder-outline-gray-1 → gray-200
#edededborder-outline-gray-2 → gray-300
#e2e2e2border-outline-gray-3 → gray-400
#c7c7c7border-outline-gray-4 → gray-500
#999999border-outline-gray-5 → gray-600
#7c7c7cborder-outline-gray-6 → gray-700
#525252border-outline-gray-7 → gray-800
#383838border-outline-gray-8 → gray-900
#171717border-outline-gray-9 → gray-950
#0f0f0fborder-outline-red-1 → red-100
#ffe7e7border-outline-red-2 → red-200
#ffd8d8border-outline-red-3 → red-300
#fdc2c2border-outline-red-4 → red-400
#f79596border-outline-red-5 → red-500
#e03434border-outline-red-6 → red-600
#ce2c2cborder-outline-red-7 → red-700
#b41d1dborder-outline-red-8 → red-800
#941f1fborder-outline-red-9 → red-900
#6b1515border-outline-red-10 → red-950
#4c0d0dborder-outline-blue-1 → blue-100
#e6f4ffborder-outline-blue-2 → blue-200
#d1eaffborder-outline-blue-3 → blue-300
#b5ddfdborder-outline-blue-4 → blue-400
#61afefborder-outline-blue-5 → blue-500
#0d8ef8border-outline-blue-6 → blue-600
#077ddfborder-outline-blue-7 → blue-700
#0375d3border-outline-blue-8 → blue-800
#005cadborder-outline-blue-9 → blue-900
#004880border-outline-blue-10 → blue-950
#032e63border-outline-green-1 → green-100
#e4faebborder-outline-green-2 → green-200
#bdefccborder-outline-green-3 → green-300
#a8e6beborder-outline-green-4 → green-400
#7edaa1border-outline-green-5 → green-500
#43ac79border-outline-green-6 → green-600
#268c5cborder-outline-green-7 → green-700
#14804dborder-outline-green-8 → green-800
#075e35border-outline-green-9 → green-900
#173b2cborder-outline-green-10 → green-950
#0a3020border-outline-amber-1 → amber-100
#fff4d3border-outline-amber-2 → amber-200
#f6eac0border-outline-amber-3 → amber-300
#f3e3b4border-outline-amber-4 → amber-400
#f4cd80border-outline-amber-5 → amber-500
#df9311border-outline-amber-6 → amber-600
#ca7e0cborder-outline-amber-7 → amber-700
#bb6f0cborder-outline-amber-8 → amber-800
#91400dborder-outline-amber-9 → amber-900
#763813border-outline-amber-10 → amber-950
#4e2209border-outline-violet-1 → violet-100
#eee8ffborder-outline-violet-2 → violet-200
#dbd5ffborder-outline-violet-3 → violet-300
#d2c5fcborder-outline-violet-4 → violet-400
#b5a1fcborder-outline-violet-5 → violet-500
#7757eeborder-outline-violet-6 → violet-600
#6e57d1border-outline-violet-7 → violet-700
#4f3da1border-outline-violet-8 → violet-800
#392980border-outline-violet-9 → violet-900
#251959border-outline-violet-10 → violet-950
#150655border-outline-yellow-1 → yellow-100
#fff7d3border-outline-yellow-2 → yellow-200
#f7e9a8border-outline-yellow-3 → yellow-300
#f5e171border-outline-yellow-4 → yellow-400
#f2d14bborder-outline-yellow-5 → yellow-500
#edba13border-outline-yellow-6 → yellow-600
#ab790dborder-outline-yellow-7 → yellow-700
#9a6304border-outline-yellow-8 → yellow-800
#8c5600border-outline-yellow-9 → yellow-900
#733f12border-outline-yellow-10 → yellow-950
#542e0dborder-outline-orange-1 → orange-100
#ffefe4border-outline-orange-2 → orange-200
#ffdec5border-outline-orange-3 → orange-300
#ffcba3border-outline-orange-4 → orange-400
#f4b07fborder-outline-orange-5 → orange-500
#e86c13border-outline-orange-6 → orange-600
#d35a09border-outline-orange-7 → orange-700
#bd3e0cborder-outline-orange-8 → orange-800
#9e3513border-outline-orange-9 → orange-900
#6b2711border-outline-orange-10 → orange-950
#491605border-outline-teal-1 → teal-100
#e6f7f4border-outline-teal-2 → teal-200
#bae8e1border-outline-teal-3 → teal-300
#97ded4border-outline-teal-4 → teal-400
#73d1c4border-outline-teal-5 → teal-500
#36baadborder-outline-teal-6 → teal-600
#0a857bborder-outline-teal-7 → teal-700
#0f736bborder-outline-teal-8 → teal-800
#115c57border-outline-teal-9 → teal-900
#114541border-outline-teal-10 → teal-950
#053734border-outline-cyan-1 → cyan-100
#ddf7ffborder-outline-cyan-2 → cyan-200
#b3e8f7border-outline-cyan-3 → cyan-300
#99e2f8border-outline-cyan-4 → cyan-400
#72d5f3border-outline-cyan-5 → cyan-500
#3bbde5border-outline-cyan-6 → cyan-600
#1f8cadborder-outline-cyan-7 → cyan-700
#1d7f9dborder-outline-cyan-8 → cyan-800
#125c73border-outline-cyan-9 → cyan-900
#164759border-outline-cyan-10 → cyan-950
#05383fborder-outline-purple-1 → purple-100
#f6e9ffborder-outline-purple-2 → purple-200
#ecd3ffborder-outline-purple-3 → purple-300
#e2b9fcborder-outline-purple-4 → purple-400
#bf78faborder-outline-purple-5 → purple-500
#9c45e3border-outline-purple-6 → purple-600
#8e49caborder-outline-purple-7 → purple-700
#6e399dborder-outline-purple-8 → purple-800
#5c2f83border-outline-purple-9 → purple-900
#401863border-outline-purple-10 → purple-950
#2d084eborder-outline-pink-1 → pink-100
#fde8f5border-outline-pink-2 → pink-200
#ffd5f0border-outline-pink-3 → pink-300
#f9b9e0border-outline-pink-4 → pink-400
#f77cc6border-outline-pink-5 → pink-500
#e34aa6border-outline-pink-6 → pink-600
#cf3a96border-outline-pink-7 → pink-700
#9c2671border-outline-pink-8 → pink-800
#801458border-outline-pink-9 → pink-900
#570f3eborder-outline-pink-10 → pink-950
#40062cborder-outline-elevation-1 → gray-200
#edededborder-outline-elevation-2 → gray-200
#edededoutline-alpha
Use for borders and dividers that should preserve translucency across layered surfaces.
border-outline-alpha-base → neutral-white
#ffffffborder-outline-alpha-gray-1 → gray-alpha-200
#00000012border-outline-alpha-gray-2 → gray-alpha-300
#0000001dborder-outline-alpha-gray-3 → gray-alpha-400
#00000038border-outline-alpha-gray-4 → gray-alpha-500
#00000066border-outline-alpha-gray-5 → gray-alpha-600
#00000083border-outline-alpha-gray-6 → gray-alpha-700
#000000adborder-outline-alpha-gray-7 → gray-alpha-800
#000000c7border-outline-alpha-gray-8 → gray-alpha-900
#000000e8border-outline-alpha-gray-9 → gray-alpha-950
#000000f0border-outline-alpha-elevation-1 → gray-alpha-200
#00000012border-outline-alpha-elevation-2 → gray-alpha-200
#00000012