COMPLETE DISSEMINATION
Every element, component, style — and where the build stands
The living reference for Reps With Friends: design system, feature inventory, progress metrics, and system map. If it exists, it's on this page.
01 · Design tokens
Single source of truth: design/tokens.css. Every page, app and bot card consumes these — nothing hardcodes colour.
Colour
Rule: lime is earned — it marks effort, verification, winning, action. Coral is heat (comeback, HR, down-states). Amber is pending. Sky is information. Contrast chips: WCAG ratio vs --bg.
Type
Space · radius · motion
02 · Component library
18 primitives, rendered live. Every screen in the app, site, hub console and bot cards composes from these. The 13 Figma-adopted families live in section 03 below.
Buttons
Actions. Primary = one per view, lime, earned.
Tags & status dots
System + match status. Dots carry glow when healthy.
Tier pills
Handicap identity. Colour-coded, multiplier on the face.
Comeback badge
Appears when >30% behind leader. Pulses until used.
Progress bar
Raw-rep progress to target. 700ms fill, lime; coral when comeback-armed.
Standings row
The core game surface — medals, tier, bar, adjusted vs raw.
Chat bubbles
Bot ↔ player surface (demo page, app feed). Bot bolds in lime.
Taunt card
AI-generated with canned fallback. Cheeky, never mean.
Charity pot card
Winner directs, never receives. Employer-fundable.
Ladder row
Season standings: position, streak, points.
Command chips
The chat grammar — identical on WhatsApp and Slack.
Result card
Generated as branded 1200×675 SVG/PNG — the shareable artefact.
Stat card
Numbers with meaning. Mono numerals, lime emphasis.
Status pill
Lifecycle states across hub console + matches.
QR connect
wa.me deep link as QR — gym-floor onboarding.
Empty state
Friendly copy + one action. Never a blank screen.
Toast
Transient confirmations. Auto-dismiss 2.4s, stack bottom-up, max three on screen.
Confetti burst
Victory moments — match close, PRs, photo finish. Canvas particles at 60fps; reduced-motion → single flash.
03 · From Figma — adopted craft
Ben's component language (figma/assets/, audited by lane F2) rebuilt on our tokens — every ✅-adopt component-level row from docs/13 §7. No hex literals: his values are token values, alpha variants are color-mix(). Structural decisions (fairness, platform, rhythm, power-ups-in-MVP) are founder calls — these are visual components only. Full variant matrix + spec citations: /figma (local).
Bottom nav + central LOG
from Figma — mapped #FFC821→--lime · #0B0A12→--bg · inactive #63637A→--faint (AA). §7/4 adopt: logging is the daily action → central 64px pill.
Quick-log sheet — ≤3 taps
Log reps
20 push-ups = 20 RUF · takes you to 92%
from Figma — mapped #14121F→--surface · r28→--radius-xl · RUF preview→--lime. §7/26 adopt: chips are live — conversion + CTA follow.
Battle card
The Sunday Showdown
You're 2nd — 36 RUF behind Sam
from Figma — mapped gradient #2A1F4D→#0B0A12 = --energy-tint→--bg · avatars→--energy-tint/--energy-light · Anton 26→--font-display.
Leaderboard row — 400ms spring
from Figma — mapped leader stroke→color-mix(--lime 70%) · you-row #8B5CF6→--energy · completion % primary (rides the fairness call). §7/16 adopt.
Countdown — dual clock
from Figma — mapped DZ ramp→--lime/--urgency/--danger @80 · #2A1020→--dz3-surface. §7/28 adopt: group clock + local equivalent. Ticks live; DZ3 heartbeats the timer only.
Danger-zone banner — 3 levels
from Figma — mapped #FF4D5E→--danger, levels→--lime/--urgency/--danger. Click to cycle: icon+label at every level, layout never changes. §7/23 adopt.
Event banner
from Figma — mapped Thunder→--lime · Storm #8B5CF6→--energy · CloseCall→--urgency · Charity→--success. V1.x events, components now.
Dialog — confirm / destructive / money
Use Lightning Round?
Your next 10 minutes of reps count 3×. One per day — make it count.
Delete this entry?
25 squats (25 RUF) will be removed from today's total. This can't be undone after the edit window.
from Figma — mapped #1B1830→--surface-2 · destructive→--danger · r20→--radius-xl. Money variant drops all banter (§7/15).
Feed item — reactions
from Figma — mapped bubbles @15%→color-mix on --success/--lime/--energy/--urgency/--sky. §7/32 hybrid: bot taunts stay, reactions added.
Power-up card — rarity visual only
Lightning Round
Reps count 3× for the next 10 minutes
Rep Steal
Take 10% of an opponent's total (SAMPLE cap)
from Figma — mapped rare #4DA3FF→--sky · epic→--energy · legendary→--lime · active→--success. §7/24 is a ☎ call — no engine wiring.
Subscription card — Reps Pro
Reps Pro
from Figma — mapped selected plan→--energy-tint + --lime stroke · SAVE%→--urgency. Prices SAMPLE; paywall logic is F4/engine.
System state — 6 states
No battles yet
Create your first battle or join a mate's with an invite code.
Pro feature
Multiple battles need Reps Pro. Your first crew is always free.
from Figma — mapped error→--danger · locked→--lime · skeleton→--line. §7/17 adopt: superset — locked + restricted map to Pro + region gates.
Badge system — 5 types
from Figma — mapped streak→--energy-tint + --urgency flame · premium→--ink-brand-tint + --energy crown · danger→--danger. Inter 600 11 kept.
04 · Feature families — all 36 elements
Full backlog with status. Families A–F approved and largely built; G is the proposed second wave.
05 · Progress & roadmap
What's working today
- 90+ tests green across engine, bots and API — CI-gated on every push
- Push-to-deploy: GitHub → Cloudflare Pages, live in ~20s
- Full game loop playable: match → handicap → comeback → close → MVP vote → charity pot → season
- WhatsApp bot (via Qalarc Hub) + Slack bot (Bolt) on one command grammar
- AI layer live on the public site (guide, narrator, taunts) with graceful fallbacks
- Ops + corporate console with live state polling
Top blockers (full register: docs/15)
06 · Systems map
CLIENTS
EDGE
CORE
Full detail: docs/11_SYSTEMS_OVERVIEW.md · hosting decision: docs/16_HOSTING.md