Foundations · Color

Accent & semantic

The FTB "civic navy" accent and the semantic ladder that everything reads from. Components reference these purpose-named tokens — never raw hues — so the whole UI stays consistent. Dark is the default skin.

Accent · interactive states

--accent

oklch(0.640 0.135 260)

--accent-hover

oklch(0.700 0.130 259)

--accent-strong

oklch(0.550 0.140 261)

--on-accent

oklch(0.985 0.005 260)

link

--link

oklch(0.730 0.120 258)

Accent in context · hover / active / focus wired live

default · --accent

:hover · --accent-hover

:active · --accent-strong

:focus-visible · --accent-ring

Case assigned to Northbourne shelter — open the file (second link pinned to :hover).

The first button is live — hover, click and Tab it. The rest are pinned to a state via an is-* class; the real :hover/:active/:focus-visible rules are wired to the same tokens.

Surface elevation ladder · bg < surface < surface-2 < surface-3

--bg #0c0e13 · page canvas

--surface #12151a · cards

--surface-2 #191c22 · nested / raised

--surface-3 #21242b · inputs / wells

Text hierarchy · over --surface

Primary — rescuer intake notes read at full contrast.--text #e2e5e9

Muted — secondary metadata, helper copy and labels.--muted #adb1b9

Faint — timestamps, captions and placeholders.--faint #71747c

--accent / -hover / -strong

One accent, three states: base fill, a lighter :hover, a darker :active/pressed. Re-pointed per skin — dark pulls brighter oklch stops for legibility on near-black.

--on-accent

The near-white ink that sits ON an accent fill (buttons, badges). Always pair with an accent background — never use as a surface.

--link / --accent-ring

Links use a brighter beryl (--link) so inline text clears contrast on surfaces; --accent-ring is the translucent focus halo fed into the two-layer ring.

surface ladder

A tight near-black stack: bg (canvas) → surface (cards) → surface-2 (raised/nested) → surface-3 (inputs). In dark, elevation reads via tone + a 1px hairline, not drop shadow.

text tiers

text (primary, inherited from body) → muted (secondary) → faint (quietest, still passes AA). Never drop below faint for meaningful copy.