Colors
A warm, organic color palette inspired by natural materials - cedar wood, gold accents, and soft paper tones.
Background Colors
Layered surfaces create depth and hierarchy.
#584840
Primary
--bg-primary
#60504a
Secondary
--bg-secondary
#685852
Tertiary
--bg-tertiary
#70605a
Elevated
--bg-elevated
#2a2420
Code
--bg-code
Text Colors
Text colors optimized for readability on dark backgrounds.
#faf6f0
Primary
--text-primary
#f0ebe4
Secondary
--text-secondary
#e8e2da
Muted
--text-muted
#ddd6cc
Dimmed
--text-dimmed
Accent Colors (Gold)
Warm gold accents for CTAs, links, and highlights.
#d4a84a
Primary
--accent-primary
#e0bc6a
Hover
--accent-hover
#c49a3a
Pressed
--accent-pressed
#e8c870
Text
--accent-text
Semantic Colors
Consistent colors for success, error, warning, and info states.
#6bc48f
Success
--success
#e07575
Error
--error
#e0b860
Warning
--warning
#7da6cf
Info
--info
Persona Colors
Each AI persona has a unique color identity that reflects their personality.
#4a6741
Ferni
--persona-ferni
#3a6b73
Peter
--persona-peter
#a67a6a
Maya
--persona-maya
#5a6b8a
Alex
--persona-alex
#c4856a
Jordan
--persona-jordan
#b8956a
Nayan
--persona-nayan
Usage
/* Background layering */
.surface { background: var(--bg-primary); }
.card { background: var(--bg-elevated); }
.code-block { background: var(--bg-code); }
/* Text hierarchy */
h1 { color: var(--text-primary); }
p { color: var(--text-secondary); }
.caption { color: var(--text-muted); }
/* Interactive elements */
.button { background: var(--accent-primary); }
.button:hover { background: var(--accent-hover); }
.link { color: var(--accent-text); }
/* Persona-specific elements */
.avatar--ferni { background: var(--persona-ferni); }
.badge--maya { background: var(--persona-maya-glow); }