RitmoFit · Web Planning Surface

Page mockups

How the finished web app should look — rendered against the real design tokens (espresso black + copper, cyan controls, plasma reserved for the drop), Martian Mono for every BPM and timecode, and the signature energy-arc ribbon. Each tile opens a full-screen page.

RitmoFit
01

Sign in / Sign up

Email + password against Better Auth. The quiet front door — one focused card on the warm-black field.

02

Class Builder ★

The heart of the product. 3-pane workstation: class library, the energy ribbon + timeline + song rows, and the track inspector with cues & moves.

SEATED CLIMB
03

Live Mode

The cue prompter the instructor runs a class against — maximum contrast, on-beat pulse, the All-Out drop. Cue-by-Cue and Full-List views.

04

Explore

Public classes other instructors have published. Preview the run, or save a copy into your own library.

A M J
05

Teams & Share

Create a team, manage members by email, and share a class at view/edit — the Google-Drive sharing model.

What these mockups encode