Color

Semantic color tokens for surfaces, text, icons, borders, and status indicators.

Overview

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.

Color Tokens

Layered surface hierarchy: body → surface → card → popover. Each level sits visually above the previous one.

Semantic colors for consistent theming. All colors use light-dark() for automatic mode switching.

Token	Value
--color-accent	#1b1b1b / #f1f1f1
--color-accent-muted	#f1f1f1 / #262626
--color-on-accent	#ffffff / #111111
--color-neutral	#0000000F / #ffffff1A
--color-background-surface	#ffffff / #262626
--color-background-body	#f1f1f1 / #1b1b1b
--color-overlay	#00000080 / #000000CC
--color-overlay-hover	#0000000D / #ffffff0D
--color-overlay-pressed	#0000001A / #ffffff1A
--color-background-muted	#f1f1f1 / #1b1b1b
--color-text-primary	#000000 / #ffffff
--color-text-secondary	#474747 / #9e9e9e
--color-text-disabled	#919191 / #525252
--color-text-accent	#1b1b1b / #f1f1f1
--color-on-dark	#ffffff
--color-on-light	#111111
--color-icon-accent	#1b1b1b / #f1f1f1
--color-icon-primary	#000000 / #ffffff
--color-icon-secondary	#6a6a6a / #9e9e9e
--color-icon-disabled	#919191 / #525252
--color-background-card	#ffffff / #1b1b1b
--color-background-popover	#ffffff / #1b1b1b
--color-background-inverted	#0A1317 / #FFFFFF
--color-background-error-inverted	#AA071E / #E3193B
--color-success	#00490b / #a4d6a3
--color-success-muted	#bce0bb / #90ca903D
--color-on-success	#ffffff / #111111
--color-error	#76000c / #ffc4be
--color-error-muted	#ffc4be / #ff98903D
--color-on-error	#ffffff / #111111
--color-warning	#4b3900 / #f8d36a
--color-warning-muted	#fae19e / #e2b6233D
--color-on-warning	#111111
--color-border	#00000014 / #ffffff1A
--color-border-emphasized	#d4d4d4 / #525252
--color-skeleton	#f1f1f1 / #525252
--color-track	#CCD3DB / #5A5E66
--color-shadow	#0000001A / #0000004D
--color-tint-hover	black / white
--color-background-blue	#b9d7ff / #253c5a
--color-border-blue	#a1caff / #5aa0f8
--color-icon-blue	#003978 / #88bcff
--color-text-blue	#003978 / #a1caff
--color-background-cyan	#9ae2f4 / #274046
--color-border-cyan	#85d5e9 / #49adc4
--color-icon-cyan	#004351 / #71c7dd
--color-text-cyan	#004351 / #85d5e9
--color-background-gray	#e2e2e2 / #303030
--color-border-gray	#d4d4d4 / #262626
--color-icon-gray	#474747 / #9e9e9e
--color-text-gray	#1b1b1b / #d4d4d4
--color-background-green	#bce0bb / #2b422b
--color-border-green	#aad4a9 / #6ab26b
--color-icon-green	#00490b / #90ca90
--color-text-green	#00490b / #90ca90
--color-background-orange	#ffc7a1 / #503424
--color-border-orange	#ffc7a1 / #df843f
--color-icon-orange	#622700 / #ff9e55
--color-text-orange	#622700 / #ffb37e
--color-background-pink	#ffc0d7 / #572b3d
--color-border-pink	#ffc0d7 / #fc78b1
--color-icon-pink	#70003f / #fd92bd
--color-text-pink	#70003f / #ffa9ca
--color-background-purple	#f7d5ff / #4a2f51
--color-border-purple	#f3bfff / #d885eb
--color-icon-purple	#5c0e6c / #e496f6
--color-text-purple	#5c0e6c / #eaacf8
--color-background-red	#ffc4be / #5b2b28
--color-border-red	#ffaea7 / #fa6762
--color-icon-red	#76000c / #ff9890
--color-text-red	#76000c / #ffaea7
--color-background-teal	#a9e2d6 / #28413c
--color-border-teal	#90d7c8 / #4fb1a0
--color-icon-teal	#00463d / #81c9bb
--color-text-teal	#00463d / #90d7c8
--color-background-yellow	#fae19e / #453a1c
--color-border-yellow	#e3c36c / #c29900
--color-icon-yellow	#4b3900 / #e2b623
--color-text-yellow	#4b3900 / #eec448
--color-syntax-keyword	#6b187c / #efa8ff
--color-syntax-string	#0b5615 / #a4d6a3
--color-syntax-comment	#6a6a6a / #9e9e9e
--color-syntax-number	#733100 / #ffb37e
--color-syntax-function	#00458c / #a1caff
--color-syntax-type	#6b187c / #efa8ff
--color-syntax-variable	#111111 / #e2e2e2
--color-syntax-operator	#6a6a6a / #9e9e9e
--color-syntax-constant	#733100 / #ffb37e
--color-syntax-tag	#8a0011 / #ffaea7
--color-syntax-attribute	#584400 / #eec448
--color-syntax-property	#005348 / #90d7c8
--color-syntax-punctuation	#6a6a6a / #9e9e9e
--color-syntax-background	#ffffff / #111111
--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
--color-brand

Use color tokens in StyleX

Import the typed color tokens and use them in stylex.create(); they resolve to the active theme and color mode.

Applying color tokens

tsx
import * as stylex from '@stylexjs/stylex';
import {colorVars} from '@astryxdesign/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, since 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.