XDS — Design System

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.

Token	Value
--color-accent	#0064E0 / #2694FE
--color-accent-muted	#0082FB33 / #0082FB3F
--color-on-accent	#FFFFFF
--color-neutral	rgba(5 / 54, 89, 0.1), rgba(223, 226, 229, 0.2)
--color-background-surface	#FFFFFF / #1F1F22
--color-background-body	#F1F4F7 / #111112
--color-overlay	#01122866 / #11111299
--color-overlay-hover	#0536590C / #FFFFFF0C
--color-overlay-pressed	#05365919 / #FFFFFF19
--color-background-muted	#0536590C / #1111127F
--color-text-primary	#0A1317 / #DFE2E5
--color-text-secondary	#4E606F / #AAAFB5
--color-text-disabled	#A4B0BC / #6F747C
--color-text-accent	#0064E0 / #3E9EFB
--color-on-dark	#FFFFFF
--color-on-light	#000000
--color-icon-accent	#0064E0 / #2694FE
--color-icon-primary	#0A1317 / #DFE2E5
--color-icon-secondary	#4E606F / #AAAFB5
--color-icon-disabled	#A4B0BC / #6F747C
--color-background-card	#FFFFFF / #1F1F22
--color-background-popover	#FFFFFF / #28292C
--color-background-inverted	#0A1317 / #FFFFFF
--color-background-error-inverted	#AA071E / #E3193B
--color-success	#0D8626
--color-success-muted	#0B991F33 / #0B991F3F
--color-on-success	#FFFFFF
--color-error	#E3193B / #F5394F
--color-error-muted	#E3193B33 / #F5394F3F
--color-on-error	#FFFFFF
--color-warning	#E9AF08 / #F2C00B
--color-warning-muted	#E2A40033 / #E2A4003F
--color-on-warning	#0A1317
--color-border	#05365919 / #F2F4F619
--color-border-emphasized	#CCD3DB / #494D53
--color-skeleton	#CCD3DB / #5A5E66
--color-shadow	rgba(5 / 54, 89, 0.1), rgba(0, 0, 0, 0.3)
--color-tint-hover	black / white
--color-background-blue	#0171E333
--color-border-blue	#0064E0 / #2694FE
--color-icon-blue	#0064E0 / #2694FE
--color-text-blue	#042F97 / #AFD7FF
--color-background-cyan	#03A7D733
--color-border-cyan	#089DD0 / #0171A4
--color-icon-cyan	#00ACC1 / #26C6DA
--color-text-cyan	#014975 / #A1EEF9
--color-background-gray	#0A131733 / #666A724C
--color-border-gray	#647685 / #748695
--color-icon-gray	#4E606F / #AAAFB5
--color-text-gray	#0A1317 / #E7EAED
--color-background-green	#24BB5E33
--color-border-green	#0D8626 / #0B991F
--color-icon-green	#0D8626 / #26A756
--color-text-green	#09441F / #A5F690
--color-background-orange	#F2790233
--color-border-orange	#EB6E00 / #B34A01
--color-icon-orange	#E9690B / #FB8C00
--color-text-orange	#6B2203 / #FDB876
--color-background-pink	#E638B333
--color-border-pink	#F351C0 / #C02294
--color-icon-pink	#C2185B / #EC407A
--color-text-pink	#650053 / #FEADE3
--color-background-purple	#7952FF33
--color-border-purple	#9081FF / #7340FE
--color-icon-purple	#5B08D8 / #7952FF
--color-text-purple	#3E0697 / #B3B0FE
--color-background-red	#E3193B33
--color-border-red	#E3193B / #F5394F
--color-icon-red	#D31130 / #E3193B
--color-text-red	#7B0210 / #FFB2B8
--color-background-teal	#0DB7AF33
--color-border-teal	#08A3A3 / #08767D
--color-icon-teal	#009688 / #26A69A
--color-text-teal	#083943 / #40DCCD
--color-background-yellow	#E2A40033
--color-border-yellow	#C58600 / #B47700
--color-icon-yellow	#FBC02D / #FFEE58
--color-text-yellow	#753F07 / #FBCE03
--color-syntax-keyword	#cf222e / #ff7b72
--color-syntax-string	#0a3069 / #a5d6ff
--color-syntax-comment	#6e7781 / #8b949e
--color-syntax-number	#0550ae / #79c0ff
--color-syntax-function	#8250df / #d2a8ff
--color-syntax-type	#953800 / #ffa657
--color-syntax-variable	#24292f / #e6edf3
--color-syntax-operator	#cf222e / #ff7b72
--color-syntax-constant	#0550ae / #79c0ff
--color-syntax-tag	#116329 / #7ee787
--color-syntax-attribute	#0550ae / #79c0ff
--color-syntax-property	#0550ae / #79c0ff
--color-syntax-punctuation	#24292f / #c9d1d9
--color-syntax-background	#ffffff / #0d1117
--color-data-categorical-blue	#0171E3
--color-data-categorical-orange	#EB6E00
--color-data-categorical-purple	#6B1EFD
--color-data-categorical-green	#0B991F
--color-data-categorical-pink	#F351C0
--color-data-categorical-cyan	#0171A4
--color-data-categorical-red	#F5394F
--color-data-categorical-teal	#08A3A3
--color-data-categorical-brown	#965E03
--color-data-categorical-indigo	#6F8AFF
--color-data-neutral	#8494A3 / #8C939B
--color-data-blue-5	#02165E
--color-data-blue-4	#004CBC
--color-data-blue-3	#2694FE
--color-data-blue-2	#78BEFF
--color-data-blue-1	#DBECFF
--color-data-shamrock-5	#0B603D
--color-data-shamrock-4	#138546
--color-data-shamrock-3	#24BB5E
--color-data-shamrock-2	#8EF7AA
--color-data-shamrock-1	#D6FEE4
--color-data-orange-5	#A13F04
--color-data-orange-4	#D66100
--color-data-orange-3	#FD9537
--color-data-orange-2	#FDB876
--color-data-orange-1	#FFE6CF
--color-data-pink-5	#8E1073
--color-data-pink-4	#D123A1
--color-data-pink-3	#F989D3
--color-data-pink-2	#FEADE3
--color-data-pink-1	#FCE3F4
--color-data-purple-5	#3E0697
--color-data-purple-4	#6B1EFD
--color-data-purple-3	#9081FF
--color-data-purple-2	#B3B0FE
--color-data-purple-1	#E8E8FB
--color-data-red-5	#9D0519
--color-data-red-4	#D31130
--color-data-red-3	#FB7D87
--color-data-red-2	#FFB2B8
--color-data-red-1	#FEE4E6
--color-data-teal-5	#08767D
--color-data-teal-4	#0C9293
--color-data-teal-3	#0DB7AF
--color-data-teal-2	#6CE6D8
--color-data-teal-1	#D7FCF8
--color-data-yellow-5	#8A5001
--color-data-yellow-4	#D69804
--color-data-yellow-3	#FBCE03
--color-data-yellow-2	#FCEC85
--color-data-yellow-1	#FDF6BA
--color-data-gray-5	#25363F / #333338
--color-data-gray-4	#5D6C7B / #666A72
--color-data-gray-3	#AFB9C4 / #B2B8BE
--color-data-gray-2	#CCD3DB / #D0D3D6
--color-data-gray-1	#F1F4F7 / #F2F4F6

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

Guidance	Practices
Do	Use semantic tokens (--color-text-primary) instead of raw hex values.
Do	Rely on the surface hierarchy (body → surface → card → popover) for layering.
Do	Use status colors (success, error, warning) only for their semantic meaning.
Don't	Hardcode hex values — they won't adapt to dark mode or custom themes.
Don't	Mix accent colors with status colors in the same context.
Don't	Use --color-on-accent on non-accent backgrounds.