Every token, component, and rule below is what the app actually ships. Written rules live in docs/DESIGN.md.
01 — The mark
Two seeds feed a matchup; one line comes out the other side in Whistle Red. It reads as a bracket, a schedule, and a decision at once — and it is the only place red appears in the identity by default.
Grid
64 × 64 units. Inputs y18 / y46, output y32.
Stroke
6 units, round caps. Never re-weight by eye.
Clearspace
28 units — the connector height — all sides.
Minimum
20 px on screen. Below that, drop the red line.
Lockup: text 0.53× mark, gap 0.28×
02 — Colour
Night Court
#17171A
Text, dark panels
72 66 61 71 · PMS Black 6 C
Whistle Red
#C9242C
The one action
12 100 96 3 · PMS 1795 C
Court Blue
#8FA6BF
The ground
43 26 15 0 · PMS 5435 C
Sideline Cream
#F1EFE8
Cards, paper
4 3 7 0 · PMS 7527 C
Bench Blue
#4E7CA8 · Slot chips, tags
Red Tint
#F7DCDC · Active rows, tracks
Paper White
#FFFFFF · Nested rows
Ratio
60% Court Blue · 30% cream and white · 8% Night Court · 2% Whistle Red. Two background colours per surface, maximum.
Contrast
Text on Court Blue is white at 500 or heavier. Never Night Court body copy on Court Blue.
School colours
Team colours live inside team badges and bracket rows only — never on Intramural chrome or buttons.
03 — Typography
Display 72/0.94/600
Run your league like the pros.Heading 36/1.05/600
Everything a season needsBody 17/1.55/400
Games go into named slots — Lunch A, Free Period 6, After School — matched to when both teams actually have players free. Body copy never exceeds 62 characters a line.Data JetBrains Mono 13/0.16em/500
Rules
Numbers
Anything a student would argue about — scores, picks, clock, seeds, plus/minus — sets in JetBrains Mono, tabular. Everything else is Outfit. Never mix the two inside one word.
04 — Components
Buttons — 999px radius, 14/24 padding
One red button per view. On Court Blue, secondary buttons become 22% white fill with white text.
Chips — slots and stat actions
Rows — 12px radius, mono index left
Bars and geometry
Cards 18–24px
Rows 12–14px
Pills 999px
Grid 8px
Card pad 24px
Section pad 96px
Shadow only on
floating overlays
0 30px 80px / 18%
Identity
Avatars are Night Court. Team colour appears only in the badge.
Roles
Mono numeral, mono label
05 — Voice
We write
“Zero to drafted-and-scheduled in under 20 minutes.”
“Two taps per event, undo anything.”
“Warriors send Cohen to Hawks for Levy and Katz.”
“Gym 1 is taken at Lunch A. Pick another slot.”
We don’t
“Revolutionize your athletic engagement ecosystem.”
“Let’s get this bread”
“Seamless, powerful, best-in-class scheduling.”
“Oops! Something went wrong.”
Verbs first
Start a league. Propose a trade. Lock the deadline.
Real nouns
Gyms, periods, seeds, picks — not “resources”.
No emoji
Ever. The stat chips carry the energy instead.
Errors name the fix
Say what is wrong and what to do next.
06 — Court motif and empty states
Thin white court lines on Court Blue are the one decorative device: 2px strokes, true proportions, never rotated for effect.
No games scheduled
Every empty state names what fills it and who acts next.