# SmashDay redesign — "Clubhouse & Floodlight"

A ground-up UX for SmashDay: every feature and workflow of the current product,
re-thought and rebuilt as a clickable, responsive HTML prototype. No backend, no
framework — each screen is a real page with realistic data, and the whole thing is
walkable end-to-end from `index.html`.

## The one idea

The current app wears a dark broadcast skin everywhere — the organizer files an
expense inside the same TV-graphics world in which a rally is scored. This redesign
splits those two moods deliberately:

- **Clubhouse (daylight paper).** Running a tournament is clerical, calm work —
  rosters, fees, court bookings. It gets a warm paper ground, white cards, quiet
  hairlines, an editorial voice. Restful to read for three hours at a desk.
- **Floodlight (dark, volt numerals).** The moment something is *live*, the surface
  inverts: near-black green-tinged ground, volt `#c9f24e` figures you can read from
  the next court. Only two places earn it — courtside scoring and the public Live
  pane. Dark stops being a theme and becomes *information*: if the screen is dark,
  a shuttle is in the air.

## Colour discipline

| System | Treatment | Why |
|---|---|---|
| Action | one royal blue | a single "this does something" colour |
| LIVE | red, always with the word or pulsing dot | the broadcast convention, reserved |
| Status | neutral surface + coloured edge rail + a sentence | colour never carries meaning alone |
| Teams | 8 pastels, dark ink | categorical — identity, not rank |
| Skill levels | 8 saturated ordinal hues, white ink, positional | rank, survives renames |
| Roles | line-work only (borders/text, never fills) | jobs are labels, not factions |
| Volt | floodlit surfaces only | scarcity keeps it electric |

## Type

**Archivo** (variable width) — display, slightly expanded for mastheads, athletic
without shouting; **Inter** for body and every table numeral (tabular figures);
**Spline Sans Mono** for the two objects users must treat as *artifacts*: the public
code and capability links.

## What changed beyond the skin

1. **Reversals got a first-class UI.** The log has always supported
   `collection.reversed` / `expense.reversed`, but no screen ever offered it. Money
   now has "Reverse…" on every ledger row, with the append-only story told plainly:
   *"A reversal is a new entry that cancels this one. Nothing is ever deleted."*
2. **The two unbuilt screens are designed ahead of build.** "On court" (the
   referee's working view) and "What I owe" (a player's dues) exist as full designs,
   each flagged *designed ahead of build* — so the SOON chips now point at something.
3. **Navigation is grouped by tempo** — Now / Play / People / Team league / Money /
   Admin — and filtered per role; the shell's footer keeps the tournament switcher,
   the person-and-role row, and the three-state sync strip on every screen.
4. **The public page pins its tabs to the phone's bottom edge** (thumb reach), stays
   printable as the draw sheet, and keeps the freshness gauge that admits staleness.
5. Everything the product's laws demand is preserved: peek-then-accept links,
   save-this-link as the loudest object, honest refusals per role, honest "not
   built" panels, two-step destructive actions that name their consequence,
   grade-locked pickers that only offer legal choices, phone numbers behind
   per-row reveal, nothing personal on public surfaces.

## Driving the prototype

Open `index.html`. Every page carries a floating **UX ▸** control (bottom right):

- **Viewing as** — organizer, co-organizer, treasurer, referee, captain, player,
  spectator. The menu, in-page affordances, and refusal screens all follow.
- **Sync state** — saved / pending / refused, shown in the shell on every screen.
- **Screen state** — each screen's named states (e.g. claim: offered → granted →
  taken → revoked → network-broke).

The prototype bar, and everything it does, is scaffolding — not part of the design.