Color
An alchemical palette grounded in deep obsidian, lit by gold, ember, and
azure. All values are defined as design tokens in
src/palette/tokens.json and generated to CSS custom
properties via just tokens.
Semantic Colors
Role-based colors for consistent application across all surfaces.
Primary
#d4990f --brand-color-semantic-primary Primary Light
#ecc55c --brand-color-semantic-primary-light Primary Dark
#935b0b --brand-color-semantic-primary-dark Secondary
#3668b0 --brand-color-semantic-secondary Accent
#d95a1a --brand-color-semantic-accent Surface
#0a0b14 --brand-color-semantic-surface Surface Raised
#11121e --brand-color-semantic-surface-raised Text
#fafaf9 --brand-color-semantic-text Text Muted
#a1a3b0 --brand-color-semantic-text-muted Gold
The primary brand color — warmth, transformation, value.
50
#fdf8ed 100
#f9eccc 200
#f3d994 300
#ecc55c 400
#e5b233 500
#d4990f 600
#b8790a 700
#935b0b 800
#6e4410 900
#4a2e0e Obsidian
Surfaces and text — deep, dark, grounded.
50
#f4f4f6 100
#e4e4e8 200
#c8c9d1 300
#a1a3b0 400
#71748a 500
#4e5169 600
#3a3c52 700
#2b2d40 800
#1d1e2e 900
#11121e 950
#0a0b14 Ember
Accent and energy — urgency, warmth, action.
50
#fef3ed 100
#fce0cc 200
#f9bd94 300
#f5965c 400
#f17433 500
#d95a1a 600
#b54412 700
#8c3310 800
#662510 900
#44190d Azure
Secondary and informational — depth, trust, clarity.
50
#eef3fa 100
#d4e2f4 200
#a9c5e9 300
#7ba5db 400
#5488cc 500
#3668b0 600
#2a5290 700
#213e6e 800
#192c4e 900
#111d34 Using Tokens
/* In CSS — reference generated custom properties */
.element {
background: var(--brand-color-semantic-surface);
color: var(--brand-color-semantic-text);
border-color: var(--brand-color-semantic-primary);
}
/* In SCSS — use variables directly */
.element {
background: $brand-color-semantic-surface;
color: $brand-color-semantic-text;
}