The Ball Society · Style guide

Colour

01

A single accent on a white page

Claret means “this is ours”: buttons, index numbers, the champion row, the progress bar. Green is reserved for one job only: marking data that is real. Nothing else gets a colour.

Core palette

Siam Claret--accent #8B1D3FPrimary buttons, eyebrow dots, index numbers, highlights, focus ring.

Deep Claret--deep #761936Primary hover state and the photo band background.

Claret Tint--atint #F1E4E8Selected chip, avatar disc, highlighted table row, “source” tag, your-side message bubble.

Ink--ink #0A0A0AHeadlines, body emphasis, selected tabs and age chips, the dynamic island.

Body#333333Running text, lede, list items. Never pure black for paragraphs.

Muted--muted #6B6B6BEyebrows, captions, secondary nav, table headers, GD column.

Index grey#9A9A9ASection index (01, 02), FAQ numbers, unselected tab numbers, ladder separators.

Hairline--hair #E6E6E6Every border and divider on the page. One weight: 1px.

Tint background--tintbg #F7F7F7Alternate sections, table header row, icon tiles, offer right column.

Paper--paper #FFFFFFPage, cards, phones. The default.

Stage#FDFBFCDevice stage base, with a claret radial glow and a 28px dot grid in #ECE6E8.

Semantic · “real data” green

Win--win #0C9247The dot inside the “real” tag. Nowhere else.

Win background--winbg #E3F4EA“Real” tag and safeguarding stamp fill.

Win text--wintx #0A6B36Text on the green fill.

Tier chips · the player ladder

Sundaybg #F3E8DF · text #8A5A36Warm sand. Entry tier.

Academygradient #EDEEF0→#D5D8DC · text #3A4048Silver. Also the player-card tier badge.

Probg #F6E8C8 · text #7A5A10Gold.

World classbg #DCE6EF · text #1F2933Steel blue. Top tier.

Approved pairings

White on ClaretPrimary button, crest disc on band. Contrast 8.9:1.

Claret on TintSelected chip, source tag, avatar initials. Contrast 5.5:1.

White on InkSelected tab, age chip, footer pill, code blocks.

82% white on DeepBand sub-copy. Headlines on the band are 100% white.

Body on TintAlternate sections. Never put claret text on tint background.

Muted on PaperCaptions and eyebrows. 5.4:1, passes AA at 11px bold uppercase.

Typography

02

Space Grotesk speaks, Inter explains

Headlines, numbers, scores, wordmark and section indices are Space Grotesk 600, tight-tracked. Everything you read at length is Inter. Both load from Google Fonts with display=swap; the fallback stack is system-ui.

Display / H1Space Grotesk 600
clamp(36px, 5.2vw, 74px)
tracking −.035em · leading .98

Run your league. We do the rest.

StatementSpace Grotesk 600
clamp(30px, 4.8vw, 62px)
tracking −.035em · leading 1 · max 18ch
One em word in claret

Parents get one app, not seven chats.

H2 / sectionSpace Grotesk 600
clamp(30px, 3.6vw, 46px)
tracking −.03em · leading 1.04

A single accent on a white page

H3 / card titleSpace Grotesk 600
21px bento · 19px steps · 18px safeguarding
tracking −.02em

Fixtures across all your pitches

LedeInter 400
clamp(16px, 1.35vw, 19px)
leading 1.6 · colour #333 · max 60ch

Fixtures across your pitches, matchday scoring with scorers, tables, cups and player cards, with parent-held accounts.

BodyInter 400
16px · leading 1.55 · #333
List items 15px

Real data appears exactly as its source publishes it. Screens marked example use fictional children, first name and initial only.

EyebrowInter 600
11px · tracking .14em · uppercase
muted, or claret with .acc

Safeguarding Partners 04

Caption / smallInter 400
13px · muted
Footer 13px · fine print 12.5–13px

BPYC is shown as an illustration of the product and is not (yet) a partner league.

Big numberSpace Grotesk 600
46px · tracking −.04em · leading .9
tabular figures · claret on player card, ink on match centre (44px)

81 · 3

WordmarkSpace Grotesk 700
13px · tracking .2em · uppercase
28×2px claret rule underneath

THE BALL SOCIETY

Layout

03

Twelve columns, one gutter, hairline everywhere

Every section head puts the eyebrow in columns 1–3 and the title in 4–11. Two-up content splits 1–6 / 7–12. Below 860px everything collapses to a single column.

Grid · max 1200px · 24px gutter

123456789101112

Claret = eyebrow (1/4) · pink = title (4/12) · tint = free gutter column.

Vertical rhythm

Section

clamp(72px, 9vw, 120px) top and bottom · 1px hairline top

Head → content

clamp(36px, 5vw, 60px)

Eyebrow → H1

22px

Title → lede

18px

Card padding

28px 26px bento · 22px whats · 44px 40px offer

List row

13px 0 · 36px number column · 12px gap

Radius scale

6tier chip, stamp

10icon tile

12mini table, format tile

14bubble, phone button

16card, bento, facts

20whats, on-call

24stage, offer

48phone

pillbuttons, tags, chips

Breakpoints

1000Pocket strip & steps go horizontal-scroll with snap
980Bento 4 → 2 columns · run tiles reflow
960Nav links hidden; only wordmark + CTA remain
900Showcase, feature, safeguarding stack · side phones hidden
860Section heads, hero, offer single column
560Bento 1 column · FAQ numbers hidden

Components

04

The parts, exactly as shipped

Copy the class names. Every component below uses the live CSS from the landing page, so what you see here is what renders there.

Buttons

Book a partner call See the screens

Nav size Nav ghost

48px tall, 24px radius, 22px side padding, Inter 600 15px. Nav variant 38px / 19px / 14px. Hover lifts 1px and darkens to Deep. Ghost border #CFCFCF → ink on hover. One primary per viewport.

<a class="btn btn-primary">…</a>  <a class="btn btn-ghost">…</a>

Data provenance tags

RealExampleSource · Pitchero

Every screen, table and photo carries one. Real = published by the league, shown verbatim. Example = fictional children and illustrative scores. Source = attribution pill. 22px, pill, 10.5px uppercase.

Stamp & toggle

Built inSafeguarding stamp and DM toggle (40×22, claret when on)

Age chips & tier ladder

U8U10U12U14U16

Sunday→Academy→Pro→World class

Age chips: 38px pill, ink when selected, 55% opacity when dimmed. Tier chips: 24px, 6px radius, 11px bold uppercase. Ladder separators in index grey, Space Grotesk.

Numbered list

01Fixtures across every pitch you run
02Matchday scoring with scorers and player of the match
03Tables and cups published the moment the whistle goes

Hairline top and per-row. Index in Space Grotesk 11px claret; .list.cross turns it muted for the “what you don’t do” variant.

Bento cards

01

Academies

Run an in-house league across your age groups with one organiser login.

02

Schools

Inter-school fixtures with parent-held accounts and no adult-to-child messaging.

03

Clubs & venues

Fill your pitches on Saturday morning with a league you own.

1px hairline gaps made with a hairline background and 1px grid gap, never with borders on the cells. 16px outer radius, overflow hidden. Index → H3 → description pushed to the bottom with margin-top:auto.

Icon tile & message bubbles

36px, 10px radius, tint fill, claret glyph at 18px, 2px stroke.

Coach DanKick-off moved to 9:15, pitch 3.

YouGot it, thanks.

Their side: tint fill, 14/14/14/4 radius. Your side: claret tint, 14/14/4/14, text #4A0F23. Used only to show the problem, never as a product feature.

FAQ accordion

01Who holds the account?+

A parent or guardian. Children never sign up directly and no adult can message a child.

02Can we keep our own league name?+

Yes. Your crest, your divisions, your venue.

Native <details>. Summary in Space Grotesk 600, 44px number column, 24px plus disc that rotates 45° and turns claret when open.

Phone grammar

05

The app screens are HTML, not screenshots

Every phone on the landing is a 390×844 DOM device scaled with a single --s variable. Screens are built from a small vocabulary so a new one takes minutes and matches the rest.

9:41●●●

League

Bangkok Premier Youth Championship

U13 · Division 1 · Term 1

TableFixturesCups

2013201420152016

#TeamPPtsGD

1BCBangkok Centre of Excellence412+7

2FCBFC Bangkok46+17

3FBFutboys46+6

4SUSuksawat United40−34

Player of the match

JM

Jack M.

2 goals · U13 · example

ACADEMY

Enter score

Share table

01Frame 390×844, radius 48, border #DCDCDC, drop shadow 0 30px 60px -36px rgba(10,10,10,.35). Wrap in .fit and set --s to scale.
02Chrome island 124×36 ink · status bar 54px · header 48px with a 17px Space Grotesk title · content pads 12px 20px.
03Selection tabs go ink when on; chips go claret tint with a claret border. Two different signals for two different levels.
04League table .tb3 grid 30 / 1fr / 36 / 40 / 46, rows 56px, header row 36px on tint. Position and points in Space Grotesk, champion position in claret, your row highlighted with a 3px inset claret bar.
05Badges 26px disc with 2–3 letter initials, or the real crest on white. Never a child’s photo.
06Buttons 50px tall, 14px radius. .pri claret, .ghost2 ink outline. Full width in content.
07Numbers always font-variant-numeric: tabular-nums so columns line up. Scores at 44px, overall rating at 46px claret.
08Tier badge silver gradient pill with an 8px dot; sits on the player card only.

<div class="fit" style="--s:.62">
  <div class="phone">
    <div class="island"></div>
    <div class="sb">…</div> <div class="hd">…</div>
    <div class="ct"> …screen… </div>
  </div>
</div>

Surfaces

06

Three backgrounds, one dark moment

Paper, tint and the device stage alternate down the page. The claret photo band is the only dark surface and it appears once.

Real

Device stage

#FDFBFC base · 28px dot grid in #ECE6E8 · claret radial glow at 14% from the bottom · 24px radius · fade-out at the foot.

Real partners band

Eight real Thai clubs, one example season.

Photo desaturated, multiplied with Deep → #4A0F23. Crests sit on 64px white discs with a soft shadow.

+5

Motion & access

07

Quiet by default

Four transitions in the whole page. All of them switch off under prefers-reduced-motion.

Reveal on scrollElements with .rv start 14px low at 0 opacity and settle over 0.5s ease when an IntersectionObserver adds .on..rv → .rv.on

Button hoverLift 1px, background to Deep, 0.15s ease. Ghost border to ink.transform:translateY(-1px)

AccordionPlus disc rotates 45° in 0.2s and turns claret. Content shows instantly.details[open] .pm

TabsColour only, 0.15s. Underline is a 2px claret border-bottom on the selected tab.[aria-selected="true"]

Focus2px claret outline, 3px offset, 4px radius, on :focus-visible only.outline:2px solid var(--accent)

Skip linkOff-screen until focused, then a claret pill top-left at z-index 100..skip:focus

Sticky nav82% white with 18px blur and 1.4 saturate, hairline bottom. 64px tall.backdrop-filter:blur(18px)

Reduced motionScroll-behavior auto, every transition and animation off, .rv fully visible.@media (prefers-reduced-motion)

Content rules

08

Children first, then the product

These rules outrank any visual rule on this page. They are what makes a kids’ league partner trust the product before they have read a feature.

Always

Tag every screen, table and photo Real or Example. Real data is shown exactly as its source publishes it, with the source named.
Fictional children are first name and initial only (Jack M.), with illustrative scores.
Crests only with attribution in the footer; four are provided by their clubs, the rest are used for illustration pending permission.
Say “parent-held accounts” and “no adult-to-child messaging” in the safeguarding section, in those words.
Say BPYC is not (yet) a partner league wherever BPYC appears.
British spelling. Sentence case headlines. Numbers as digits.

Never

Photos containing identifiable children, anywhere in the repo or the deploy.
A second accent colour. No signal red, no green outside the Real tag.
Dark mode. The claret band is the only dark surface.
Screenshots of the app; screens are built in the phone grammar so they stay in sync with the copy.
Chat-style DM as a feature. Bubbles appear only in the problem section, to show what parents suffer today.
More than one primary button per viewport.