Colour System

The colour system is defined entirely as CSS custom properties in docs/src/styles/tokens.css. All colours in interfaces must reference these tokens — never hardcode hex values.

Section accent triad

Three colours identify the three operational domains of the platform. The accent is the primary identity signal for interactive and active states.

Domain	Token	Hex	Bright variant	Use
Operations	`--c-ops`	`#3b82f6`	`--c-ops-bright: #6ea8ff`	Infrastructure, system status, ops dashboard
Consulting	`--c-consulting`	`#34c58a`	`--c-consulting-bright: #5fe3a9`	Client work, consulting pages, portfolio
Admin	`--c-admin`	`#f2913d`	`--c-admin-bright: #ffb066`	Settings, configuration, admin tools

The default accent maps to Operations blue:

:root {
  --accent:        var(--c-ops);
  --accent-bright: var(--c-ops-bright);
}

Apply per-section accent by setting data-section on the <html> element:

[data-section="ops"]        { --accent: var(--c-ops);        --accent-bright: var(--c-ops-bright);        }
[data-section="consulting"] { --accent: var(--c-consulting);  --accent-bright: var(--c-consulting-bright); }
[data-section="admin"]      { --accent: var(--c-admin);       --accent-bright: var(--c-admin-bright);      }

Dark mode surface hierarchy

The dark theme uses a layered surface stack — each level is slightly lighter than the one beneath, creating a sense of physical depth without relying on shadows alone.

Token	Hex	Perceived depth	Use
`--bg`	`#161a21`	Deepest — base	Page background
`--surface`	`#1d222b`	+1 — raised	Primary content panels, sidebar
`--surface-2`	`#232a35`	+2 — raised further	Nested panels, hover backgrounds
`--surface-sink`	`#161a21`	Same as `--bg`	Inset wells (code blocks, inputs) — same colour as bg creates depth illusion
`--line`	`#313a48`	—	Borders, dividers, hairlines

[data-theme="dark"] {
  --bg:           #161a21;
  --surface:      #1d222b;
  --surface-2:    #232a35;
  --surface-sink: #161a21;
  --line:         #313a48;
}

Dark ink hierarchy

Token	Hex	Use
`--ink`	`#e7ebf3`	Primary text — headings, body
`--ink-dim`	`#9aa6b8`	Secondary text — nav items, table cells
`--ink-faint`	`#6b7585`	Tertiary text — labels, captions, group headers
`--link`	`var(--c-ops-bright)`	Hyperlinks

Light mode surface hierarchy

The light theme inverts the depth model: surfaces are light, wells are grey.

Token	Hex	Use
`--bg`	`#e7eaf0`	Page background
`--surface`	`#eef1f6`	Primary panels
`--surface-2`	`#f7f9fc`	Nested panels (lighter in light mode — inverse of dark)
`--surface-sink`	`#dde2ea`	Inset wells
`--line`	`#c7cedb`	Borders, dividers

[data-theme="light"] {
  --bg:           #e7eaf0;
  --surface:      #eef1f6;
  --surface-2:    #f7f9fc;
  --surface-sink: #dde2ea;
  --line:         #c7cedb;
}

Light ink hierarchy

Token	Hex	Use
`--ink`	`#1c2230`	Primary text
`--ink-dim`	`#535d70`	Secondary text
`--ink-faint`	`#8a93a4`	Tertiary text
`--link`	`#2563eb`	Hyperlinks

Glass chrome

Used exclusively for floating navigation surfaces.

Token	Dark value	Light value
`--glass-bg`	`rgba(29,34,43,.72)`	`rgba(247,249,252,.7)`
`--glass-blur`	`saturate(160%) blur(10px)`	`saturate(150%) blur(8px)`

Colour usage rules

Never hardcode hex values in component CSS. Always use var(--token).
Ink hierarchy must be respected. Primary content uses --ink; supporting/metadata text uses --ink-dim or --ink-faint.
Accent colours are state signals, not decoration. Apply --accent to borders, glows, and focus rings — not background fills.
Surface hierarchy must be sequential. Content nested inside a --surface panel should use --surface-2; do not skip levels.
WCAG AA contrast is maintained for all ink-on-surface combinations in both themes. Verify with a contrast checker before introducing new colour pairings.

Accent on backgrounds

When using an accent colour as a fill (e.g. hover backgrounds), reduce opacity to preserve legibility:

/* Hover background — accent at 9% opacity */
background: color-mix(in srgb, var(--accent) 9%, transparent);

/* Subtle accent tint */
background: rgba(59, 130, 246, 0.12);

Glow shadows

Section-specific glow effects are available for featured panels and active states:

Token	Effect
`--sh-glow-ops`	Blue glow ring + soft outer shadow
`--sh-glow-consulting`	Green glow ring + soft outer shadow
`--sh-glow-admin`	Orange glow ring + soft outer shadow
`--sh-glow`	Resolves to current section’s glow

.featured-panel {
  box-shadow: var(--sh-raise), var(--sh-glow);
}