TOKENS

Brand colour is the only hand-authored token layer. It lives in app/css/theme.css (@theme), and Tailwind generates the --color-* custom properties plus the matching utilities (text-primary-500, border-primary-subtle). The swatches below are read directly from theme.css — one source, no drift.

Type, spacing, motion, and z-index use Tailwind's standard scale (with arbitrary values where the design needs a specific number). They are not tokenised separately, so the tables below document the scale as it is used.

Color

Six ordinal families, each a 50–900 ramp defined in @theme. Swatches read their values straight from theme.css.

primary · green (the brand)

--color-primary-50#eafff0

--color-primary-100#c4ffd8

--color-primary-200#8ff2b2

--color-primary-300#5ae07bAnnotations, gutters

--color-primary-400#4ade80Secondary text, labels

--color-primary-500#00ff41Headings, accents, interactive elements

--color-primary-600#28c840

--color-primary-700#1e9b32

--color-primary-800#166f24

--color-primary-900#0c4015

--color-primary-subtle#00ff4166Borders, dividers (green 40%)

--color-primary-border#00ff4133Default border (green 20%)

--color-primary-faint#00ff411fVery subtle background (green 12%)

--color-primary-quiet#00ff411aHover background (green 10%)

secondary · black (surfaces)

--color-secondary-50#e8e8e8

--color-secondary-100#cfcfcf

--color-secondary-200#a8a8a8

--color-secondary-300#808080

--color-secondary-400#5c5c5c

--color-secondary-500#3d3d3d

--color-secondary-600#262626

--color-secondary-700#141414

--color-secondary-800#0a0a0a

--color-secondary-900#050505Shell / terminal backgrounds

--color-secondary-950#000000Page background

tertiary · white (foreground)

--color-tertiary-50#e6ffe6Body text (13:1+ contrast on black)

--color-tertiary-100#dbf2db

--color-tertiary-200#c4d9c4

--color-tertiary-300#a9bda9

--color-tertiary-400#8a9d8a

--color-tertiary-500#6b7c6b

--color-tertiary-600#515f51

--color-tertiary-700#3a463a

--color-tertiary-800#262f26

--color-tertiary-900#161b16

quaternary · cyan

--color-quaternary-50#ecfbff

--color-quaternary-100#d0f5ff

--color-quaternary-200#a8ecff

--color-quaternary-300#8de8ff

--color-quaternary-400#7fe4ffCool syntax highlight accents

--color-quaternary-500#45cdf0

--color-quaternary-600#22a8cc

--color-quaternary-700#1a7f9b

--color-quaternary-800#155a6e

--color-quaternary-900#0e3a47

quinary · yellow

--color-quinary-50#fff8e6

--color-quinary-100#ffeebf

--color-quinary-200#ffe293

--color-quinary-300#ffd86bWarm syntax highlight accents

--color-quinary-400#ffca47

--color-quinary-500#febc2eWindow-chrome minimize dot

--color-quinary-600#d99a1f

--color-quinary-700#a8741a

--color-quinary-800#785214

--color-quinary-900#4a330c

senary · red

--color-senary-50#fff0f0

--color-senary-100#ffdcdc

--color-senary-200#ffb3b3

--color-senary-300#ff8a8aError states, validation messages

--color-senary-400#ff7570

--color-senary-500#ff5f57Window-chrome close dot

--color-senary-600#e03e36

--color-senary-700#b02b25

--color-senary-800#801e1a

--color-senary-900#4f110f

Type Scale

Applied with Tailwind text-* utilities; arbitrary values (text-[32px]) are used where a heading needs a specific size. Headings use the --font-display (Inter 900) face; everything else is --font-mono (JetBrains Mono). Both are self-hosted via next/font/local (exposed as --font-*-src) and surfaced as Tailwind tokens in theme.css.

Utility	Size
`text-xs`	0.75rem / 12px
`text-sm`	0.875rem / 14px
`text-base`	1rem / 16px
`text-lg`	1.125rem / 18px
`text-xl`	1.25rem / 20px
`text-2xl`	1.5rem / 24px
`text-3xl`	1.875rem / 30px

Spacing

Tailwind's 4px scale, applied with padding / margin / gap utilities. Step N = N × 0.25rem.

Step	rem	px
`1`	0.25rem	4px
`2`	0.5rem	8px
`3`	0.75rem	12px
`4`	1rem	16px
`6`	1.5rem	24px
`8`	2rem	32px
`12`	3rem	48px
`16`	4rem	64px

Motion

Durations are applied with Tailwind duration-* utilities, easing with ease-out. All motion is suppressed under prefers-reduced-motion: reduce.

Utility	Value	Usage
`duration-[80ms]`	80ms	micro transitions (hover, press)
`duration-100`	100ms	fast UI feedback
`duration-200`	200ms	standard transitions
`ease-out`	—	the one shared easing curve

Layers

z-index is applied with Tailwind z-[N] utilities — there is no CSS-var token layer. The cross-cutting contract:

Layer	z-index	Usage
content	`z-[1]`	page content above the CRT overlay
header chrome	`z-[110]`	DesktopTopbar / StatusBar (MobileTitleBar `z-[109]`)
mobile dock	`z-[120]`	bottom navigation dock
skip link	`9999`	skip-to-content link, always on top

Component-local stacking (CRT effect layers 1–5) is intentionally not part of the contract.