ColorSemantic color tokens for surfaces, text, icons, borders, and status indicators.
OverviewXDS colors are semantic — tokens describe purpose, not appearance. Every color adapts automatically between light and dark modes via CSS light-dark(). Themes override the resolved values, so your code never references raw hex colors.
Surface ColorsLayered surface hierarchy: body → surface → card → popover. Each level sits visually above the previous one.
TokenLightDark
--color-accent
#0064E0
#0064E0
--color-accent-muted
#0082FB33
#0082FB33
--color-on-accent
#FFFFFF
#FFFFFF
--color-neutral
light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2))
light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2))
--color-background-surface
#FFFFFF
#FFFFFF
--color-background-body
#F1F4F7
#F1F4F7
--color-overlay
#01122866
#01122866
--color-overlay-hover
#0536590C
#0536590C
--color-overlay-pressed
#05365919
#05365919
--color-background-muted
#0536590C
#0536590C
--color-text-primary
#0A1317
#0A1317
--color-text-secondary
#4E606F
#4E606F
--color-text-disabled
#A4B0BC
#A4B0BC
--color-text-accent
#0064E0
#0064E0
--color-on-dark
#FFFFFF
#FFFFFF
--color-on-light
#000000
#000000
--color-icon-accent
#0064E0
#0064E0
--color-icon-primary
#0A1317
#0A1317
--color-icon-secondary
#4E606F
#4E606F
--color-icon-disabled
#A4B0BC
#A4B0BC
--color-background-card
#FFFFFF
#FFFFFF
--color-background-popover
#FFFFFF
#FFFFFF
--color-background-inverted
#0A1317
#0A1317
--color-background-error-inverted
#AA071E
#AA071E
--color-success
#0D8626
#0D8626
--color-success-muted
#0B991F33
#0B991F33
--color-on-success
#FFFFFF
#FFFFFF
--color-error
#E3193B
#E3193B
--color-error-muted
#E3193B33
#E3193B33
--color-on-error
#FFFFFF
#FFFFFF
--color-warning
#E9AF08
#E9AF08
--color-warning-muted
#E2A40033
#E2A40033
--color-on-warning
#0A1317
#0A1317
--color-border
#05365919
#05365919
--color-border-emphasized
#CCD3DB
#CCD3DB
--color-skeleton
#CCD3DB
#CCD3DB
--color-shadow
light-dark(rgba(5, 54, 89, 0.1), rgba(0, 0, 0, 0.3))
light-dark(rgba(5, 54, 89, 0.1), rgba(0, 0, 0, 0.3))
--color-tint-hover
black
black
--color-background-blue
#0171E333
#0171E333
--color-border-blue
#0064E0
#0064E0
--color-icon-blue
#0064E0
#0064E0
--color-text-blue
#042F97
#042F97
--color-background-cyan
#03A7D733
#03A7D733
--color-border-cyan
#089DD0
#089DD0
--color-icon-cyan
#00ACC1
#00ACC1
--color-text-cyan
#014975
#014975
--color-background-gray
#0A131733
#0A131733
--color-border-gray
#647685
#647685
--color-icon-gray
#4E606F
#4E606F
--color-text-gray
#0A1317
#0A1317
--color-background-green
#24BB5E33
#24BB5E33
--color-border-green
#0D8626
#0D8626
--color-icon-green
#0D8626
#0D8626
--color-text-green
#09441F
#09441F
--color-background-orange
#F2790233
#F2790233
--color-border-orange
#EB6E00
#EB6E00
--color-icon-orange
#E9690B
#E9690B
--color-text-orange
#6B2203
#6B2203
--color-background-pink
#E638B333
#E638B333
--color-border-pink
#F351C0
#F351C0
--color-icon-pink
#C2185B
#C2185B
--color-text-pink
#650053
#650053
--color-background-purple
#7952FF33
#7952FF33
--color-border-purple
#9081FF
#9081FF
--color-icon-purple
#5B08D8
#5B08D8
--color-text-purple
#3E0697
#3E0697
--color-background-red
#E3193B33
#E3193B33
--color-border-red
#E3193B
#E3193B
--color-icon-red
#D31130
#D31130
--color-text-red
#7B0210
#7B0210
--color-background-teal
#0DB7AF33
#0DB7AF33
--color-border-teal
#08A3A3
#08A3A3
--color-icon-teal
#009688
#009688
--color-text-teal
#083943
#083943
--color-background-yellow
#E2A40033
#E2A40033
--color-border-yellow
#C58600
#C58600
--color-icon-yellow
#FBC02D
#FBC02D
--color-text-yellow
#753F07
#753F07
--color-syntax-keyword
#cf222e
#cf222e
--color-syntax-string
#0a3069
#0a3069
--color-syntax-comment
#6e7781
#6e7781
--color-syntax-number
#0550ae
#0550ae
--color-syntax-function
#8250df
#8250df
--color-syntax-type
#953800
#953800
--color-syntax-variable
#24292f
#24292f
--color-syntax-operator
#cf222e
#cf222e
--color-syntax-constant
#0550ae
#0550ae
--color-syntax-tag
#116329
#116329
--color-syntax-attribute
#0550ae
#0550ae
--color-syntax-property
#0550ae
#0550ae
--color-syntax-punctuation
#24292f
#24292f
--color-syntax-background
#ffffff
#ffffff
--color-data-categorical-blue
#0171E3
#0171E3
--color-data-categorical-orange
#EB6E00
#EB6E00
--color-data-categorical-purple
#6B1EFD
#6B1EFD
--color-data-categorical-green
#0B991F
#0B991F
--color-data-categorical-pink
#F351C0
#F351C0
--color-data-categorical-cyan
#0171A4
#0171A4
--color-data-categorical-red
#F5394F
#F5394F
--color-data-categorical-teal
#08A3A3
#08A3A3
--color-data-categorical-brown
#965E03
#965E03
--color-data-categorical-indigo
#6F8AFF
#6F8AFF
--color-data-neutral
#8494A3
#8494A3
--color-data-blue-5
#02165E
#02165E
--color-data-blue-4
#004CBC
#004CBC
--color-data-blue-3
#2694FE
#2694FE
--color-data-blue-2
#78BEFF
#78BEFF
--color-data-blue-1
#DBECFF
#DBECFF
--color-data-shamrock-5
#0B603D
#0B603D
--color-data-shamrock-4
#138546
#138546
--color-data-shamrock-3
#24BB5E
#24BB5E
--color-data-shamrock-2
#8EF7AA
#8EF7AA
--color-data-shamrock-1
#D6FEE4
#D6FEE4
--color-data-orange-5
#A13F04
#A13F04
--color-data-orange-4
#D66100
#D66100
--color-data-orange-3
#FD9537
#FD9537
--color-data-orange-2
#FDB876
#FDB876
--color-data-orange-1
#FFE6CF
#FFE6CF
--color-data-pink-5
#8E1073
#8E1073
--color-data-pink-4
#D123A1
#D123A1
--color-data-pink-3
#F989D3
#F989D3
--color-data-pink-2
#FEADE3
#FEADE3
--color-data-pink-1
#FCE3F4
#FCE3F4
--color-data-purple-5
#3E0697
#3E0697
--color-data-purple-4
#6B1EFD
#6B1EFD
--color-data-purple-3
#9081FF
#9081FF
--color-data-purple-2
#B3B0FE
#B3B0FE
--color-data-purple-1
#E8E8FB
#E8E8FB
--color-data-red-5
#9D0519
#9D0519
--color-data-red-4
#D31130
#D31130
--color-data-red-3
#FB7D87
#FB7D87
--color-data-red-2
#FFB2B8
#FFB2B8
--color-data-red-1
#FEE4E6
#FEE4E6
--color-data-teal-5
#08767D
#08767D
--color-data-teal-4
#0C9293
#0C9293
--color-data-teal-3
#0DB7AF
#0DB7AF
--color-data-teal-2
#6CE6D8
#6CE6D8
--color-data-teal-1
#D7FCF8
#D7FCF8
--color-data-yellow-5
#8A5001
#8A5001
--color-data-yellow-4
#D69804
#D69804
--color-data-yellow-3
#FBCE03
#FBCE03
--color-data-yellow-2
#FCEC85
#FCEC85
--color-data-yellow-1
#FDF6BA
#FDF6BA
--color-data-gray-5
#25363F
#25363F
--color-data-gray-4
#5D6C7B
#5D6C7B
--color-data-gray-3
#AFB9C4
#AFB9C4
--color-data-gray-2
#CCD3DB
#CCD3DB
--color-data-gray-1
#F1F4F7
#F1F4F7
Usage
Applying color tokens
tsx
import * as stylex from '@stylexjs/stylex';
import {colorVars} from '@xds/core/theme/tokens.stylex';
​
const styles = stylex.create({
  container: {
    backgroundColor: colorVars['--color-background-surface'],
    color: colorVars['--color-text-primary'],
    borderColor: colorVars['--color-border'],
  },
  accent: {
    color: colorVars['--color-text-accent'],
  },
});
Best Practices
GuidancePractices
DoUse semantic tokens (--color-text-primary) instead of raw hex values.
DoRely on the surface hierarchy (body → surface → card → popover) for layering.
DoUse status colors (success, error, warning) only for their semantic meaning.
Don'tHardcode hex values — they won't adapt to dark mode or custom themes.
Don'tMix accent colors with status colors in the same context.
Don'tUse --color-on-accent on non-accent backgrounds.