RitmoFit
Opt-in light theme

Same channels. Cream ground.

This page ships under data-theme="light" so the generated light palette is visible at rest, not just behind a toggle. Every value here is emitted from tokens.json into the [data-theme="light"] block and gated by scripts/check-contrast.mjs (LIGHT) for WCAG AA. The color channels are unchanged: copper is identity, cyan is interaction, plasma is peak affect only.

Documented carve-outs Live mode stays dark in both themes (a performance surface for dim studios). Glass and shadow have no light variant yet — only the semantic color layer flips. Both are tracked follow-ups, not bugs.
Color channels

Meaning before hue — on cream.

Surface / #F3EDE2
Brand / #C8682A
Interactive / #0C6B7A
Peak only / #FF2E88

The interactive channel steps to cyan-700 and the brand eyebrow to copper-600 on a light ground so small text clears AA — see 02 — Color System.

Typography

The numbers still carry the brand.

Display / Space Grotesk Shape the room. Marketing, section heroes, and Live headers.
Data / Martian Mono 138 BPM, timecodes, zones, durations, and counts.
Controls

One primary action per surface.

Class sections

Segments read by label, tinted by role.

Warm-up Climb Sprint Recovery Cool-down
Provider connection

Every provider state is explicit.

Spotify connected Reconnecting…
Disconnected
Session expired
Permission needed
Provider error
Intensity

Zone + bars + label + color.

Zone 1 · Build Zone 2 · Push Zone 3 · Attack Zone 4 · All Out
03 The Marble Has a Beat North Room · 3:42 Z3 · Attack 132BPM
Class shape

Height carries the meaning.

45-minute class · 3 peaks · All Out at 32:10 The textual summary preserves the same information for screen-reader users.