The color system is built on a warm gray scale that harmonizes with magenta accents. All tokens use light-dark() to switch automatically between light and dark modes.

Brand palette

The raw color scale used to build semantic tokens.

Semantic surfaces

Background colors for different elevations and contexts.

Token	Light value	Dark value
--of-bg-base	#FBF9FB	#0B0810
--of-bg-elevated	#ffffff	#14101A
--of-bg-recessed	#F6F3F6	#211B23
--of-bg-sunken	#ECE7EC	#0F0B15

Foreground colors

Text colors that adapt to the background.

Token	Light	Dark	Usage
--of-fg-default	#14101A	#F6F3F6	Body text
--of-fg-muted	#504551	#DCD4DC	Secondary text
--of-fg-subtle	#6E626F	#958997	Placeholder, metadata
--of-fg-brand	#80074D	#F53FA5	Links, accents

Status colors

For badges, alerts, and status indicators.

Brand gradient

For hero moments, featured cards, and logo marks.

--of-gradient-brand: linear-gradient(135deg, #80074D 0%, #B01273 45%, #FB41AA 100%);

Border colors

Token	Usage
--of-border-line	Default dividers and borders
--of-border-strong	Emphasized borders, active states
--of-border-subtle	Light separators, section dividers
--of-border-brand	Focus rings, active indicators

Color tokens reference

/* Brand */
--of-fg-brand         /* Primary accent text */
--of-bg-brand         /* Primary button background */
--of-bg-brand-hover   /* Button hover state */
--of-bg-brand-tint    /* Subtle brand surfaces */

/* Surfaces */
--of-bg-base          /* Page background */
--of-bg-elevated      /* Cards, panels */
--of-bg-recessed      /* Inputs, code blocks */
--of-bg-sunken        /* Deep inset areas */

/* Status backgrounds */
--of-bg-success-tint
--of-bg-warning-tint
--of-bg-danger-tint
--of-bg-info-tint