Design

Color Palette

Full color system including accent palettes, semantic colors, and brand colors.

Primary Accent: Indigo (Default)

Role	Light	Dark
Accent	`#4f46ff`	`#4f46ff`
Press	`#3a32d6`	`#3a32d6`
Soft	`#a5a0ff`	`#8b85ff`
Ink (on accent)	`#fff`	`#fff`
Tint bg	`#eeedff`	`rgba(79,70,255,.14)`
Border	`#dcd9ff`	`rgba(79,70,255,.42)`

Accent Palette: Green (Verification / Receipt)

Role	Light	Dark
Accent	`#15803d`	`#3cf28c`
Press	`#166534`	`#2ed57a`
Soft	`#4ade80`	`#9ff7c6`
Tint	`#e9f6ec`	`#0e2b1d`

Accent Palette: Lime (Brutalist Statement)

Role	Light	Dark
Accent	`#3f6212`	`#c6f24e`
Press	`#365314`	`#b3e03a`
Soft	`#84cc16`	`#e0faa0`
Tint	`#f2f9e3`	`#1e2a0c`

Accent Palette: Amber (Gate / Caution)

Role	Light	Dark
Accent	`#b45309`	`#ffb020`
Press	`#92400e`	`#f59e0b`
Soft	`#f59e0b`	`#ffcf7a`
Tint	`#fdf2e3`	`#2a1f08`

Accent Palette: Cyan (OTEL / Telemetry)

Role	Light	Dark
Accent	`#0e7490`	`#22d3ee`
Press	`#155e75`	`#0ea5c9`
Soft	`#06b6d4`	`#7ee7f8`
Tint	`#e5f6fa`	`#07262e`

Semantic Colors

State	Light	Dark	Usage
Success / Grounded	`#16a34a`	`#4ade80`	Verdicts, success toasts
Warning / Ungrounded	`#d97706`	`#f5a623`	Verdicts, warnings
Error / Silent Failure	`#dc2626`	`#ff5c62`	Verdicts, errors

Neutral Palette (Surfaces)

Token	Light	Dark
bg	`#ffffff`	`#08080a`
bg-subtle	`#f8f8f8`	`#0f0f13`
bg-sunken	`#f3f3f3`	`#16161c`
panel	`#ffffff`	`#0a0a0a`
panel-2	`#f6f6f7`	`#161616`
side	`#fafafa`	`#0a0a0a`
ink	`#0a0a0b`	`#f4f4f5`
soft	`#3f3f46`	`#d4d4d8`
muted	`#6b6b6b`	`#a1a1aa`
faint	`#a1a1aa`	`#6f6f78`
line	`#f0f0f0`	`#1f1f26`
line-2	`#e2e2e6`	`#2c2c35`

Gradient System

Name	Value	Usage
Brand button	`linear-gradient(var(--acc), #3a32d6)`	Primary CTA buttons
Avatar	`linear-gradient(135deg, #a5a0ff, #4f46ff)`	User avatars, logo marks
Cost bar	`linear-gradient(90deg, var(--acc), #7a73ff)`	Cost attribution bars
Green bar	`linear-gradient(var(--green), #16a34a)`	Success bars

Usage

html

<!-- Text colors -->
<p class="text-ink">Primary text</p>
<p class="text-soft">Body text</p>
<p class="text-muted-foreground">Secondary label</p>
<p class="text-faint">Tertiary text</p>

<!-- Backgrounds -->
<div class="bg-bg">Page background</div>
<div class="bg-panel">Card background</div>
<div class="bg-panel-2">Hover / elevation surface</div>

<!-- Accent -->
<button class="bg-acc text-acc-ink">Primary action</button>
<a class="text-acc-ink hover:text-acc-press">Link</a>

<!-- Semantic -->
<span class="text-green">Success</span>
<span class="text-amber">Warning</span>
<span class="text-red">Error</span>