Warm court. Hard ink. One action.

School pages: colour, spacing and actions

A shared system for middle-school overviews and high-school school/team pages. The school identity and results come first; club invitations follow useful content and return at the end.

• Spacing: 28px between sections and inside cards; 20–22px on phones. Team cards form two columns on desktop and one on phones.
• Cream school header; grape-soft club invitations only for the Club Access offer; pale mint results; ink outlines and offset shadows. Record tiles stay quiet paper/cream with ink text.
• Club conversion uses grape — never lime competing with the school page’s primary task. Closing invitation repeats grape pricing and a subscriber-aware action.
• Secondary actions: outlined, filled pills for team pages, section navigation and brackets. Tertiary links: sources, breadcrumbs and contextual navigation.
• Visible school search at the top and bottom. Search inputs use 16px text, controls are at least 44px tall, keyboard focus is visible, and long match lists expand without JavaScript.
• School access remains free. Club coverage can be explored before signup; colours do not imply additional clubs or results are available.

Uses existing global tokens: --ink, --cream, --grape-soft, --grape, --mint-pale, --mint, --pink and --lime. Shared layout rules live in school-pages.css.

Color

Token names stayed; hues evolved off the old Mojo-adjacent kit. Do not copy mojopmm.com art, mascot, or Rauschen B.

Type & structure

HUNT 25–18, 25–20

Archivo for tables, captions, and the sentences parents need. Keep display lines short.

Radius: --radius-sm / --radius / --radius-pill. Shadow: --shadow-sm / --shadow / --shadow-lg. Focus: --focus-ring (ink, not grape).

Panels, chips, and filters

Panels and tournament cards use cream; winner rows use mint (--mint). Both keep ink outlines and offset shadows. Chips are for status. District and league choice uses labeled selects so mobile gets a native picker. Data tables stack into labeled rows on a phone. Brackets keep their sideways scroll. Style lives in the footer, not the primary nav.

DefaultGrape · clubPink · statusLime · actionMint · win

Tournament brackets

Team rows align individual set points and a large sets-won total. Winners use --bracket-winner: var(--mint) plus a visible “✓ Winner” label. Reported winners use --bracket-reported: var(--grape-soft) and “Reported winner”; disputed results receive no winner treatment.

Winners and losers each use the printed tournament’s narrowing tree: four opening fixtures, two centered semifinals, and one centered final. The same opening fixtures appear in both views; their winners feed the championship side and their losers feed the consolation side. Placement games sit below the main tree with dotted loser connections. Every semifinal and main final is vertically centered between its feeders. Both boards flow right and keep horizontal scrolling on phones. Match numbers follow the printed fixture IDs. Green routes carry winners and purple dotted routes carry losers; linked match numbers also describe progression. Named imported opponents determine visual winner/loser links when a generic path label conflicts; stored tournament data is unchanged.

Local development includes /tournaments/bracket-lab with fictional sample stages. The lab returns 404 in production and does not write to the catalog.

Score provenance

Tournament slots show reported winners and losers with a lilac “Awaiting confirmation” label. When both opponents are known, parents can report the next match while this label remains visible. Disputed or unknown opponents keep score entry closed. The label clears once the feeder path is confirmed.

Demo states only. Parent-report badges use pink; reported-winner rows use lilac; accepted winner rows use mint. Parent agreement remains provisional until Rank One verification. Text always carries the meaning; tap or press Enter for details.

Report forms use named team choices, 16px inputs, optional point details, visible keyboard focus, and inline status messages. No parent names or email addresses appear publicly.

Sun court

The brand's place: a North Texas afternoon sky, the sun drawn as a volleyball, and a maple court with the net at center. Add .sun-court to a landing hero (home, tournaments, school events, club season). Interior data pages stay on paper so tables read cleanly. Sky, sun, and court are atmosphere only, never an action or status color. The sun's sway stops under reduced motion.

Usage rules

• Follow docs/product/visual-system.md. Mojo is not the north star.
• A button never uses the same fill as the surface behind it. Cream sits on a colored panel. On a cream panel, a plain chip is paper. Lime is the one action. Pink is a status or the current nav item. Grape is only the club offer. Mint is only Courtside or a win.
• One action color per screen. Do not hover every control to pink.
• Landing heroes wear the sun court. Sky, sun, and maple are never a button, a status, or a table fill.
• Text fields and dropdowns in a form stack share the ink outline, cream fill, and offset shadow. Focus uses --focus-ring.
• Sample scores always wear a sample chip or caption.
• Unknown team, district, and tournament slugs use the same chrome as this page, still as HTTP 404.
• Do not hardcode a district in a page. Read regions from league.json.
• Visitor pages can show city/country, never IPs.
• Flag a score is a site-wide report, not a public comment wall.
• School pages stay free and login-free. Do not invent official live scores.

A task page

Default interior template. A parent opens a tournament to name the other teams in the first pool. The page is built for that, on a phone and on a desktop.

• The order is the headline, the date, the status chip, then one card. The eye moves down that line. The lime button sits at the end of the card, full width, close to the fields.
• One choice is on screen. Naming the teams is the step. Reading names from a link or a photo stays closed. Filing a result that is not in the pool stays closed, and its button is paper, not a second lime.
• The card is the group. The team that is already in, the name fields, and Save this pool live in that one outline. Three fields is the chunk. An empty result does not get a heading of its own.
• Paper and cream are most of the page. Ink is the outline. Lime is the small accent, and it is only the next action. Pink is the status word.
• Fields are 16px Archivo with the label above them. The button names the action. A problem is one sentence that says what to do next. Nothing on the page jumps in after it loads.
• The same stack is the layout everywhere. The nav stays the site nav. There is no splash, no permission prompt, and no settings control on the task.

Journey reminders

• Home is brand-led with one-tap find — not five equal product banners.
• Signed-in Club Access lands on my selected team season; finder is one tap away.
• Courtside is contextual on a match or the scoring hub — not a primary header peer.