Binectics
Prototype index · v1.0

The operating system
for fitness.

A full visual + product prototype for Binectics — brand identity, design system, provider profile, three operational dashboards, and an admin console. 150 screens, one design language.

DirectionOperating system
Files150 screens · 1 CSS
Roles5 (mem, gym, trnr, diet, adm)
Countries52 · 8 currencies
TypeGeist · Instrument Serif
BuiltMay 11 · 2026
01

Foundations

01 · BRAND Brand identity Logo construction, wordmark, application across surfaces, voice & tone.
All audiences→
The grid · the type · the rules.
02 · SYSTEM Design system Color tokens, type scale, spacing, buttons, badges, forms, tables, cards.
Designers · Engineers→
02

Consumer surfaces

03 · PROVIDER Provider profile Gallery, plans, amenities, reviews, sticky booking card.
Members · Providers→
03

Operational dashboards

04 · GYM Gym owner dashboard KPIs, revenue chart, members table, today's classes, payouts, action queue.
Iron Lab · Lerato M.→
05 · TRAINER Trainer dashboard Today's session timeline, active clients, mini calendar, inbox, earnings.
Sarah Okafor · CPT→
06 · DIETITIAN Dietitian dashboard Consult timeline, client adherence sparklines, macro tracking, plan templates, earnings.
Dr Nadia Hassan · RD→
07 · ADMIN Admin console Listings queue, fraud signals, country GMV, dispute resolution.
Super admin→
04

Flows & moments

08 · ONBOARDING Multi‑role onboarding 5‑step flow with role picker, summary rail, verification checklist. Trainer track shown.
Consumer · Trainer · Gym · Dietitian→
✓
09 · MOMENT QR check‑in success The one celebratory moment in the system — kiosk + motion spec panel with live timeline scrubber.
2,050 ms · 4 member variants→
05

Booking spine · phase 1

verified.
10 · AUTH Sign in · sign up · 2FA · reset Single file with 5 panels. SMS code, OAuth, password reset. Editorial right rail with social proof.
All roles→
1
2
3
11 · BOOKING Booking flow · 3 steps Date + time → add‑ons + questions → payment. Wired state, live summary rail, real currency math.
Consumer→
✓Confirmed
MAY
20
12 · CONFIRMED Booking confirmation Hold‑not‑charged messaging, QR for check‑in, 5‑step timeline of what happens next, receipt.
Consumer→
UPCOMING 3
PAST 12
CANCELLED
20
22
27
13 · BOOKINGS My bookings Upcoming / past / cancelled / recurring tabs with sticky detail rail, status pills, QR, receipts.
Consumer→
14 · BOOKING DETAIL Single booking · reschedule · cancel · refund Manage screen with three modal flows: pick new slot, full‑refund cancellation, multi‑step refund dispute.
Consumer · F4 · F5 · F6→
15 · SETTINGS Member settings & billing Profile · preferences · 8‑channel notification matrix · payment methods · billing history · 2FA & sessions · privacy · linked accounts · close account.
Consumer · F14 · F15 · F16→
16 · EMAILS Email · push · SMS templates 12 emails · 8 push · 4 SMS · grouped by booking / payment / verification / account · with merge variables, performance metrics, and principles.
All audiences · M (kit)→
17 · SUPPORT Support console Dispute workbench · queue with SLA timers · 3‑party conversation with internal notes · resolution picker that executes refunds inline.
Admin · Customer support→
05.5

System primitives

empty · skeleton · toast
18 · PATTERNS Modals · drawers · toasts 13 system primitives in one file — confirm flows, refund modal, notifications drawer, command bar, toast stack, banners, empty states, skeletons.
Reused across every surface→
06

Provider loop · phase 2

LM
19 · CLIENT Single client view Hero with badges + KPIs, program progress, weight/strength chart, session history, coaching notes.
Trainer · Dietitian · Gym→
20 · MESSAGES Messages · inbox + thread Three‑pane: inbox with tags & filters, thread with date dividers, context rail with client snapshot.
All providers · Consumer→
M
T
W
T
F
S
S
21 · CALENDAR Calendar & availability Week view with hour grid, color‑coded sessions, working hours editor, booking rules, calendar sync.
All providers→
07

Deep work · phase 3

22 · PLAN BUILDER Program builder Drag‑from‑library workout builder — 12 weeks, sets table, RPE, volume chart, AI suggestions inspector.
Trainer · Dietitian template→
23 · PROFILE EDIT Edit my profile 9‑section form with live preview, drag‑sortable packages, verification status, search‑rank tip.
All providers→
08

Admin · platform internals

24 · USERS Users directory 418k searchable across roles · LTV in local currency · refund-abuse and ID-mismatch flags surface inline.
Admin · support · trust→
25 · REFUNDS Refund queue 14 awaiting review · 3 over SLA · chargeback defense workbench and one-click auto-refunds on duplicate charges.
Support · finance→
26 · TICKETS Help tickets Triage + thread + reply on a single screen · macros and Claude-suggested replies · live device context auto-pulled into ticket.
Customer support→
27 · COUNTRIES Countries footprint 52 markets · 38 live, 9 beta, 5 onboarding · GMV table, payout-rail mix, currency / language matrix per country.
Ops · growth→
28 · PAYMENTS Payments ops Volume by gateway · live health (Stripe, Flutterwave, M-Pesa, Razorpay) · streaming transaction log with 3DS & chargeback states.
Finance · oncall→
18:42INFOuser.bypass_qr
18:41ALERTfraud.flag
18:38WARNrefund.approve
18:32INFOflag.toggle
18:28ALERTuser.suspend
18:24WARNpayment.chargeback
18:18INFOuser.role_change
18:12OKpayout.run
29 · AUDIT Audit log Immutable record of every privileged action — 14.8k events / 24h · queryable up to 7 years · SOC 2 compliant.
Security · compliance→
30 · FLAGS Feature flags 42 flags · 18 in rollout · per-country & per-role targeting · linked to experiments and rollback dashboards.
Engineering · PM→

Suggested reading order

  1. Brand — why the mark looks like that
  2. System — the building blocks
  3. Provider — the profile members book from
  4. Then the three dashboards in any order

Direction

Binectics is positioned closer to Stripe Dashboard and Linear than to a wellness lifestyle app. Disciplined neutrals, one signal color, role accents at matched lightness so dense multi‑role views harmonize. Warmth lives in photography, not in chrome.

Not yet built

  • · Member mobile app (iOS + Android)
  • · Push notification templates
  • · Localization deep-dive (RTL, currency formats)
  • · Component playground (Storybook-style)
  • · Public API + webhook docs