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.

Surface Colors

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

Token	Value
--color-accent	#15110C / #DFE2E5
--color-accent-muted	rgba(21 / 17, 12, 0.08), rgba(223, 226, 229, 0.14)
--color-on-accent	#FFFFFF / #15110C
--color-neutral	rgba(5 / 54, 89, 0.1), rgba(223, 226, 229, 0.2)
--color-background-surface	#FFFFFF / #1F1F22
--color-background-body	#F8F4ED / #111112
--color-overlay	#01122866 / #11111299
--color-overlay-hover	#0536590C / #FFFFFF0C
--color-overlay-pressed	#05365919 / #FFFFFF19
--color-background-muted	#0536590C / #1111127F
--color-text-primary	#15110C / #DFE2E5
--color-text-secondary	#4E606F / #AAAFB5
--color-text-disabled	#A4B0BC / #6F747C
--color-text-accent	#15110C / #DFE2E5
--color-on-dark	#FFFFFF
--color-on-light	#000000
--color-icon-accent	#15110C / #DFE2E5
--color-icon-primary	#15110C / #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-track	#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	var(--color-text-accent)
--color-syntax-string	var(--color-text-green)
--color-syntax-comment	var(--color-text-secondary)
--color-syntax-number	var(--color-text-orange)
--color-syntax-function	var(--color-text-blue)
--color-syntax-type	var(--color-text-purple)
--color-syntax-variable	var(--color-text-primary)
--color-syntax-operator	var(--color-text-cyan)
--color-syntax-constant	var(--color-text-orange)
--color-syntax-tag	var(--color-text-red)
--color-syntax-attribute	var(--color-text-teal)
--color-syntax-property	var(--color-text-cyan)
--color-syntax-punctuation	var(--color-text-disabled)
--color-syntax-background	var(--color-background-muted)
--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	#225BFF / #3D87FF

Usage

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.