Design system

The interface uses a sharp, minimal, business-grade visual language: flat near-black surfaces, 1px borders that carry structure (no blur or glow), one disciplined lime accent, and square 2px corners (no pills). The token contract lives in css/app.css :root, with css/tokens.css (--ac-*) realigned to match so the observability surface inherits the same look.

Tokens

All visual values flow from CSS custom properties on :root. Prefer these tokens over hard-coded colors, radii, or font stacks when adding UI.

Surfaces

Flat and opaque: there is no glassmorphism. Avoid backdrop-filter: blur().

Token	Value	Use
--bg	#0a0a0b	Page background, inset fields, recessed wells.
--surface	#121214	Default panel/card surface.
--surface-raised	#17171a	Raised elements: popovers, dropdowns, inputs.
--panel	#121214	Main panel background (alias of --surface).
--panel-soft	#131316	Slightly lifted panel variant.

Borders

Borders carry the structure, so most separation is a 1px solid line rather than a shadow.

Token	Value	Use
--line	rgba(255,255,255,0.08)	Default 1px borders and separators.
--line-strong	rgba(255,255,255,0.16)	Emphasized borders, dashed drop zones.

Text

Token	Value	Use
--text	rgba(255,255,255,0.92)	Primary text.
--muted	rgba(255,255,255,0.6)	Secondary text, labels.
--muted-2	rgba(255,255,255,0.4)	De-emphasized captions.

Accent

A single accent unifies the two old limes (#d8ff00 / #caff00). It is reserved for primary CTAs, the active tab/state, focus rings, and the key live dot. No glow shadows: hover and press shift the flat background instead.

Token	Value	Use
--accent	#c8f000	Primary accent (CTA, active, focus, live dot).
--accent-strong	#d6ff1a	Hover state.
--accent-dim	#9bb800	Pressed/active state.
--on-accent	#0a0a0b	Text/icon color on an accent fill.

Semantic

Status only: not decoration.

Token	Value
--danger	#f9634c
--success	#34bb84
--warning	#e0b341

Legacy aliases

The pre-revamp palette names are kept so any un-swept rule degrades gracefully to the new palette. New code should not use these: use --accent or the neutral text tokens directly.

--lime: var(--accent);
--aqua: var(--accent);
--pink: var(--accent);
--orange: var(--accent);
--yellow: var(--accent);
--blue: var(--muted);

Radii

Sharp by default. There are no pills (999px); every rounded control uses --radius, and full-bleed stage corners use --radius-0.

Token	Value	Use
--radius	2px	Cards, inputs, buttons, tags.
--radius-0	0px	Squared/full-bleed corners.

Typography

Two self-hosted Geist variable fonts ship from public/fonts/, declared via @font-face in css/app.css (no CDN, no FOUT). A single variable woff2 per family covers weights 100-900.

Token	Stack
--font-ui	"Geist", ui-sans-serif, system-ui, …
--font-mono	"Geist Mono", ui-monospace, SFMono-Regular, Consolas, …

Monospace is used for terminal-like surfaces: the status bar, .kbd, the diagnostics panel, and metric/activity values.

Tabular numerals

Live-updating readouts (the cortical response score, per-region values, and the telemetry windows) set font-variant-numeric: tabular-nums (or font-feature-settings: "tnum" 1) so digit widths stay fixed and the numbers do not jitter as they update. Do not set a conflicting font-feature-settings: "tnum" 0 on an ancestor: the inherited low-level setting overrides the high-level tabular-nums and reintroduces the jitter.

Type scale

Base is 14px; the scale runs 10 / 12 / 14 / 16 / 20 / 28. Headings use weight 600 with tight letter-spacing (-0.02em); section labels are small (12px), uppercase, with 0.06em tracking; body weights are 400-500.

Motion

Transitions are kept (≈0.15s ease), but the playful offset-shadow on the CTA was replaced with a flat background shift between --accent → --accent-strong (hover) → --accent-dim (press).

3D stage palette

The brain canvas is deliberately neutral so the accent reads as signal, not chrome (src/brain-ui.ts):

• Neurons: near-white #e6e6e6.
• Axons: dim grey #3a3a3e.
• Signal pulses: accent lime #c8f000 for high-intensity bursts, neutral grey #8a9099 for the baseline.

The canvas grid and radial glow were neutralized to a faint white grid; this is reversible via the #canvas-container rule if a more vivid stage is wanted.