CSS Tokens

All design values are defined as CSS custom properties in docs/src/styles/tokens.css (for the docs site) and mirrored in the main app at src/styles/tokens.css. This file is the single source of truth — never hardcode values that have a token equivalent.

How to use

/* Reference any token with var() */
.my-component {
  background: var(--surface);
  color: var(--ink);
  border: var(--bevel) solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-raise);
  font-size: var(--fs-2);
  transition: color var(--tr), background var(--tr);
}

---

Section accent triad

Defined in :root — theme-independent.

Token	Value	Purpose
--c-ops	#3b82f6	Operations accent (blue)
--c-ops-bright	#6ea8ff	Operations bright — links, highlights
--c-consulting	#34c58a	Consulting accent (green)
--c-consulting-bright	#5fe3a9	Consulting bright
--c-admin	#f2913d	Admin accent (orange)
--c-admin-bright	#ffb066	Admin bright
--accent	var(--c-ops)	Active section accent (overridden by data-section)
--accent-bright	var(--c-ops-bright)	Active section bright

---

Typography tokens

Defined in :root — theme-independent.

Token	Value	Purpose
--font-sans	"Inter", "Segoe UI", system-ui, …	Primary UI typeface
--font-mono	"JetBrains Mono", "Cascadia Code", …	Code / data typeface
--fs-0	0.82rem	Caption, badge
--fs-1	0.92rem	Small / sidebar
--fs-2	1rem	Body (default)
--fs-3	1.18rem	Lead / large body
--fs-4	1.5rem	Heading h2
--fs-5	2rem	Heading h1
--fs-6	2.6rem	Display / hero
--lh	1.7	Default line height

---

Geometry tokens

Defined in :root — theme-independent.

Token	Value	Purpose
--r-sm	8px	Small border radius — buttons, chips, sidebar items
--r	13px	Default border radius — panels, cards
--r-lg	20px	Large border radius — content panels, modals
--r-pill	999px	Pill / fully-rounded — tags, scrollbars
--space	1rem	Base spacing unit
--bevel	1px	Border width for surface edges
--tr	160ms cubic-bezier(.2,.7,.3,1)	Standard transition timing

---

Surface tokens (dark theme)

Token	Value	Purpose
--bg	#161a21	Page background — deepest surface
--surface	#1d222b	Primary raised surface
--surface-2	#232a35	Nested surface
--surface-sink	#161a21	Inset well (same as --bg)
--line	#313a48	Border / divider
--ink	#e7ebf3	Primary text
--ink-dim	#9aa6b8	Secondary text
--ink-faint	#6b7585	Tertiary text / labels
--link	var(--c-ops-bright)	Hyperlink colour

---

Surface tokens (light theme)

Token	Value	Purpose
--bg	#e7eaf0	Page background
--surface	#eef1f6	Primary surface
--surface-2	#f7f9fc	Nested surface
--surface-sink	#dde2ea	Inset well
--line	#c7cedb	Border / divider
--ink	#1c2230	Primary text
--ink-dim	#535d70	Secondary text
--ink-faint	#8a93a4	Tertiary text
--link	#2563eb	Hyperlink colour

---

Shadow tokens (dark theme)

Raise shadow — --sh-raise

Simulates a surface physically elevated above the base. Inner top highlight + inner bottom shadow + layered outer drop shadow.

--sh-raise:
    0 2px 0 rgba(255,255,255,.10) inset,    /* top highlight */
    0 -2px 0 rgba(0,0,0,.60) inset,          /* bottom edge shadow */
    0 1px 1px rgba(255,255,255,.04) inset,   /* subtle top sheen */
    0 26px 50px -18px rgba(0,0,0,.92),       /* large soft shadow */
    0 10px 22px -10px rgba(0,0,0,.78),       /* mid shadow */
    0 3px 8px -2px rgba(0,0,0,.6);           /* tight base shadow */

Inset shadow — --sh-inset

Simulates a cavity carved into the surface.

--sh-inset:
    0 14px 26px -8px rgba(0,0,0,.85) inset,  /* deep cavity shadow */
    0 4px 10px rgba(0,0,0,.7) inset,          /* inner depth */
    0 -2px 0 rgba(255,255,255,.05) inset,     /* bottom highlight */
    0 2px 0 rgba(255,255,255,.04);            /* outer top sheen */

Press shadow — --sh-press

Deeper inset for :active states.

--sh-press:
    0 10px 20px -4px rgba(0,0,0,.8) inset,
    0 3px 7px rgba(0,0,0,.7) inset,
    0 -1px 0 rgba(255,255,255,.04) inset;

Header shadow — --sh-header

For the glass navigation bar.

--sh-header:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 16px 32px -20px rgba(0,0,0,.9),
    0 5px 12px -8px rgba(0,0,0,.6);

Glow shadows

--sh-glow-ops:        /* blue ring + outer glow */
--sh-glow-consulting: /* green ring + outer glow */
--sh-glow-admin:      /* orange ring + outer glow */
--sh-glow:            /* resolves to current section glow */

---

Glass tokens

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)

---

Token file location

Context	File
Docs site	docs/src/styles/tokens.css
Next.js app	src/styles/tokens.css (or equivalent global CSS)
Starlight bridge	docs/src/styles/starlight.css

The docs site imports tokens via customCss in docs/astro.config.mjs. The Next.js app imports via src/app/globals.css.