RitmoFit
Canonical reference

One system. Distinct modes.

Builder stays calm. Live earns the heat. Marketing and share artifacts carry the swagger. Every surface uses the same color channels, type roles, spacing, geometry, and accessibility rules.

Color channels

Meaning before hue.

Surface / #0B0A08
Brand / #E07E3C
Interactive / #3AC0D4
Peak only / #FF2E88
Discipline Copper is identity and primary action. Cyan is interaction and focus. Plasma is never a control.
Empty and recovery states

Every dead end gets a next move.

Empty class

Start with a track.

Shape the room from there.

Open Library
Music connection lost

Your music link dropped.

Reconnect to keep building. Your class structure is still here.

Provider connection

Every provider state is explicit.

Spotify connected Reconnecting…
Disconnected
Session expired
Permission needed
Provider error

Color reinforces; the label and glyph carry the meaning. Every failure state pairs with an inline recovery action — see Builder states for these in context.

Class sections

Segments read by label, tinted by role.

Warm-up Climb Sprint Recovery Cool-down

Filter chips toggle on a raised surface; the selected chip adds a cyan border and heavier weight, never color alone.

Typography

The numbers carry the brand.

Display / Bricolage Grotesque Shape the room. Marketing, section heroes, and Live headers.
Data / Azeret Mono 138 BPM, timecodes, zones, durations, and counts.
Controls

One primary action per surface.

Intensity

Zone + bars + label + color.

Zone 0 · None 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.