Color

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

Overview

Copy link

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

Copy link

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

Token	Value
--color-accent	#262626 / #ebebeb
--color-accent-muted	#f1f1f1 / #262626
--color-on-accent	#ffffff / #171717
--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	#171717 / #fafafa
--color-text-secondary	#737373 / #a3a3a3
--color-text-disabled	#a3a3a3 / #525252
--color-text-accent	#262626 / #ebebeb
--color-on-dark	#ffffff
--color-on-light	#171717
--color-icon-accent	#262626 / #ebebeb
--color-icon-primary	#171717 / #fafafa
--color-icon-secondary	#737373 / #a3a3a3
--color-icon-disabled	#a3a3a3 / #525252
--color-background-card	#ffffff / #1b1b1b
--color-background-popover	#ffffff / #1b1b1b
--color-background-inverted	#0A1317 / #FFFFFF
--color-background-error-inverted	#AA071E / #E3193B
--color-success	#007004 / #9fe59b
--color-success-muted	#c5e5c0 / #84c9803D
--color-on-success	#ffffff / #171717
--color-error	#a50c25 / #ffc6c1
--color-error-muted	#facecb / #ff9e973D
--color-on-error	#ffffff / #171717
--color-warning	#745b00 / #fdcf4f
--color-warning-muted	#f8da9d / #deb4333D
--color-on-warning	#171717
--color-border	#ebebeb / #FFFFFF1A
--color-border-emphasized	#d4d4d4 / #525252
--color-skeleton	#ebebeb / #525252
--color-track	#CCD3DB / #5A5E66
--color-shadow	#0000001A / #0000004D
--color-tint-hover	black / white
--color-background-blue	#c4ddfb / #9eb7ff3D
--color-border-blue	#b1c9e7 / #6d9cfe
--color-icon-blue	#00458c / #9eb7ff
--color-text-blue	#00458c / #c7d3ff
--color-background-cyan	#a3e0ef / #83c2d43D
--color-border-cyan	#91d3e3 / #67a7b8
--color-icon-cyan	#00505f / #83c2d4
--color-text-cyan	#00505f / #9edef0
--color-background-gray	#e5e5e5 / var(--color-neutral)
--color-border-gray	#d4d4d4 / #262626
--color-icon-gray	#525252 / #a3a3a3
--color-text-gray	#262626 / #e5e5e5
--color-background-green	#c5e5c0 / #84c9803D
--color-border-green	#b2d1ac / #69ad67
--color-icon-green	#0c5700 / #84c980
--color-text-green	#0c5700 / #9fe59b
--color-background-orange	#fad0b5 / #ffa2583D
--color-border-orange	#e6bda2 / #e2883e
--color-icon-orange	#6e3500 / #ffa258
--color-text-orange	#6e3500 / #ffc9a2
--color-background-pink	#fccadc / #ff99c33D
--color-border-pink	#e7b7c8 / #f273aa
--color-icon-pink	#83004b / #ff99c3
--color-text-pink	#83004b / #ffc3da
--color-background-purple	#eccef3 / #f297ff3D
--color-border-purple	#d8bbdf / #dd74f0
--color-icon-purple	#700084 / #f297ff
--color-text-purple	#700084 / #fac1ff
--color-background-red	#facecb / #ff9e973D
--color-border-red	#e6bab8 / #ff6f6c
--color-icon-red	#89001a / #ff9e97
--color-text-red	#89001a / #ffc6c1
--color-background-teal	#a5e3d6 / #7ec6b83D
--color-border-teal	#94d6c8 / #63ab9d
--color-icon-teal	#005348 / #7ec6b8
--color-text-teal	#005348 / #99e2d3
--color-background-yellow	#f8da9d / #deb4333D
--color-border-yellow	#e4c279 / #c0990e
--color-icon-yellow	#584400 / #deb433
--color-text-yellow	#584400 / #fdcf4f
--color-syntax-keyword	#700084 / #efa8ff
--color-syntax-string	#005600 / #a6d2a2
--color-syntax-comment	#737373 / #a3a3a3
--color-syntax-number	#6e3500 / #ffb37f
--color-syntax-function	#00458c / #a0caff
--color-syntax-type	#700084 / #efa8ff
--color-syntax-variable	#171717 / #e5e5e5
--color-syntax-operator	#737373 / #a3a3a3
--color-syntax-constant	#6e3500 / #ffb37f
--color-syntax-tag	#89001a / #ffaeaa
--color-syntax-attribute	#584400 / #eec12f
--color-syntax-property	#005348 / #83dac9
--color-syntax-punctuation	#a3a3a3 / #525252
--color-syntax-background	#fafafa / #0a0a0a
--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

Usage

Copy link

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

Copy link

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.