RWF · theme exploration
One design system, thirteen complete skins — the original five plus the V2 board expansion. Every theme re-points all core tokens — surfaces, text, action colour, type, radii, shadow — so each reads like a different product, not a hue swap.
01 · The catalogue — five originals + the V2 board eight
02 · Side by side — the same screens, every skin
Live components — the countdowns tick, the log sheet converts,
the DZ banner cycles. Scroll the strip sideways; each frame is a real page
(demo.html?t=…) wearing one theme.
03 · Full preview — theme
Every real fg-* component from
design/figma-components.css — same markup as /system, zero edits,
purely re-tokened.
Battle card
You're 2nd — 36 RUF behind Sam
Leaderboard — 400ms spring
Countdown — 3 DZ levels
Danger-zone banner — click to cycle
Quick-log sheet
20 push-ups = 20 RUF · takes you to 92%
Events
Dialogs
Your next 10 minutes of reps count 3×. One per day — make it count.
25 squats (25 RUF) will be removed from today's total.
Feed
Power-ups
Reps count 3× for the next 10 minutes
Take 10% of an opponent's total (SAMPLE cap)
Badges
States
Create your first battle or join a mate's.
Multiple battles need Reps Pro.
Reps Pro paywall
04 · Checks — computed styles + WCAG, live in this page
Reads each frame's computed tokens (same-origin), then
recomputes WCAG ratios in-browser. The offline source of truth is
scripts/styles_contrast.py; the headless walk is
apps/styles/e2e.mjs.