Colour

RisingSwamp uses a dark-first palette driven by clinical argument (Moderate Brain Arousal model), not preference. Colour space is OKLCH for perceptually uniform lightness across hues. Contrast validation uses APCA (Advanced Perceptual Contrast Algorithm), not WCAG 2.1.

Two-Plane Rule

• Plane 1 (UI): Only --cyan as chromatic accent. No delight phenomenon colours.
• Plane 2 (Environment): Atmospheric — aurora, foxfire, elmo, glory colours live here exclusively.

Delight colours in a UI element permanently destroys the scarcity-based neurological impact.

Surface Tokens

Surface · Plane 1

Background#0e1115--bg

Background 2#131820--bg2

Surface#1b1b22--surface

Surface 2#1c2330--surface2

Dim#1e2530--dim

Border#242f3e--border

Token	Semantic	Hex	Use
--color-background-base	--bg	#0e1115	Page background — deepest layer
--color-background-secondary	--bg2	#131820	Secondary page background
--color-background-surface	--surface	#161b22	Cards, primary panels
--color-background-surface-alt	--surface2	#1c2330	Inputs, nested elements
--color-background-dim	--dim	#1e2530	Subtle dividers, hover states
--color-border-default	--border	#242f3e	All borders

Text Tokens

Text · Plane 1

Aa

Primary#e4ecf0--white

Aa

Secondary#90aabb--text2

Aa

Tertiary#06afc4--mid

Aa

Muted#7a90a4--muted

Token	Hex	Min Size	Use
--color-text-primary	#e4eaf0	Any	Primary text
--color-text-secondary	#99aabb	--fs-base	Secondary body text
--color-text-tertiary	#96afc4	--fs-sm	Labels, descriptive copy
--color-text-muted	#7a90a4	--fs-xs	Metadata, hints. Never below --fs-xs.

Accent Tokens

Accent · Saltie's colour

Cyan#00F5FF--cyan

Cyan dimrgba(0,245,255,0.12)--cyan-dim

Token	Value	Use
--color-accent-primary	#00F5FF	Saltie’s colour; focus rings; interactive affordances
--color-accent-primary-dim	rgba(0,245,255,.12)	Focus ring fill; subtle cyan backgrounds
--color-accent-primary-glow	rgba(0,245,255,.25)	Glow shadow on primary buttons

Delight Phenomena — Plane 2 Only

Delight phenomena · Plane 2 only

Bioluminescence#00F5FF--cyan

Aurora#00ff88--aurora-g

St. Elmo's fire#b8ddff--elmo

Foxfire#7fff00--foxfire

Morning glory#ffcc88--glory

Token	Hex	Phenomenon
--color-delight-aurora-green	#00ff88	Aurora australis — green band
--color-delight-aurora-violet	#9b5fff	Aurora australis — violet band
--color-delight-elmo	#b8d4ff	St. Elmo’s fire
--color-delight-foxfire	#7fff00	Foxfire fungi
--color-delight-glory	#ffcc88	Morning glory clouds

These tokens must never appear in any Plane 1 element.

Elevation

No shadows. Depth via background tone only:

--bg (#0e1115) → --surface (#161b22) → --surface2 (#1c2330)

Three levels. No further nesting.

Contrast Requirements

All text must pass APCA at its rendered size and weight:

• Body text: Lc 60+
• Large text (≥24px / ≥18.5px bold): Lc 45+
• --muted at --fs-xs is the floor — do not go smaller

Do

• Use semantic tokens in component styles, never primitives
• Validate contrast with APCA, not WCAG 2.1 ratio

Don’t

• Use raw hex values in component code
• Use delight colours in any Plane 1 element
• Use --muted below --fs-xs
• Use drop shadows for elevation