SmashDay UX redesign

Style guide — Clubhouse & Floodlight

Warm daylight paper for running the tournament; dark floodlit surfaces only where something is live right now. Royal blue is the one action colour. Status is never a colour fill — a neutral surface, a coloured rail, and a sentence.

Type

Sunday Society League

Masthead — Archivo, wide and heavy. One per page.

Eyebrow label

Eyebrow — small caps tracking; sits above a masthead or names a card group.

₹12,900

figure-xl — big tabular numerals for the one number a screen is about.

Palettes

Ground & action

paper paper-deep card ink ink-soft act act-wash

Royal blue is the one action colour. Red exists only for LIVE and for errors, and always arrives with a word.

Team pastels — categorical

1 Smashers 2 Rally Kings 3 Court Kings 4 Drop Shots 5 Net Ninjas 6 Shuttle Squad 7 Smash Bros 8 Baseline Boys

Pastel fills with dark ink, one per team, no order implied. Never used for grades or roles.

Grade colours — ordinal

1st · A 2nd · B 3rd · C 4th · D 5th · E 6th · F 7th 8th mixed

Saturated mid-darks with white ink, in strength order. Ordinal, never decorative — and never mixed with team pastels or role line-work.

Role colours — line-work only

AMOrganizer PSCo-organizer SPTreasurer KRReferee MICaptain NGPlayer SSpectator

Roles are drawn in outline and text only, never as fills — so they can never be mistaken for a team or a grade.

Floodlit & volt

night night-card volt

Dark inverts only where something is live right now. Volt figures exist only on floodlit surfaces — never on paper.

Buttons
Tick the check above — the app cannot see your bank.

One solid button per view, doing the main thing. Every disabled control carries a visible sentence saying why. Danger is bordered red, and always two-step.

Status rails
Saved — everything is on the record.
Waiting — 2 changes will send when the network is back.
Refused — sign-ups are closed, this change did not land.
Live — Round 3 is under way on 2 courts.

Status is never a colour fill: neutral surface, a coloured inline-start rail, and a sentence with a bold word. Red rails are reserved for errors and LIVE.

Chips

Filters and toggles. The active chip goes ink, never blue — blue is kept for actions.

Badges
CK SM Court Kings · Captain
A B C D E F ?

Team badge wears the team pastel; grade badge wears the ordinal colour; hollow dashed means not graded yet. The two systems never swap clothes.

Stat tile
Players
48
Collected
₹12,900
Courts
3

A label and a counted number. Derived values say they derive — "Counted, never typed."

Table & form strip
PWPtsForm
1SMSmashers548WWLWW
2CKCourt Kings548WLWWW

Numeric columns are right-aligned tabular figures. Wide tables scroll inside the card, never the page.

Tab bar

Peer views of one screen. The active tab lifts to card white — no colour needed.

Step track

Setup progress. Green is done, blue is now, grey is still to come.

Code hero & link object
K7M-3QF

The public code — display type, shouted, safe to share.

A capability link — mono in a 2px ink border, the loudest thing on its screen, because losing it means losing the way in. Tokens are copied, never rendered where they can leak.

Expando
Add a player at the desk

Secondary work folds away until asked for.

Native details/summary. Nothing important hides inside one.

Tick ring — freshness
Updated 8 seconds ago Cannot reach the server · showing 3 minutes ago

The public page's honesty gauge — it says how old what you see is, instead of pretending.

Live chip
LIVE

The only red that pulses. Red is reserved for LIVE and errors, and always arrives with a word or a labelled dot in context.

Sync strip
Everything saved
2 not saved yet — will send when the network is back
1 change refused — sign-ups are closed

On every shelled screen. Refusals name their reason — never a bare error.

Floodlit — live surfaces only
Tap zone, game pips (volt when won), serve dot. Volt figures live only here.

Dark inverts only where something is live right now — courtside scoring and the public Live pane. Volt never appears on paper.

Empty state

Nobody is waiting. Share the code and they will be.

An empty screen says what would fill it and hands over the way to fill it.

Block ink
Nothing personal is on this page.

Reserved for rules the user acts on — deliberate emphasis, used rarely so it stays loud.