Guidelines

Voice — stewardship, not commerce

The brand reads as a community institution, not a retailer. The flagship line is "Built by goalkeepers for goalkeepers" — so "we" shows up often. Calls to the reader are second person ("for the keepers", "every keeper, everywhere, always") and rarely commanding.

Use "we" for Goalkeeper.com; call the community "keepers".
Treat "the position" as almost a proper noun — the position deserves.
Lead with stats when introducing data — "50,000+ shots analysed per season".
Write British English in editorial copy — favourite, analysed, grassroots.

Adjective-led claims about data.
Hard-sell, commanding retail language.

Casing & punctuation

Sentence case for body copy and most headings.
Title Case for product names — The Keeper's Call, Goalkeeper xG.
ALL CAPS in Space Mono, tracked 0.18em, for eyebrows, nav labels, pills and kickers — WHO WE ARE.
Clean CTAs — "Discover the Book", "Learn more →". The → arrow is the only Unicode glyph in regular use.

Emoji — in product copy, nav, marketing or admin chrome.
Exclamation marks in body copy.

Mood, surfaces & colour

Dark by default, near-black rather than pure black. Cards lift one step (#141414) or shift to the faint blue-tinted alt (#1C2430). Primary green owns CTAs and focus; purple is a sparing secondary; pink belongs to The Keeper's Call.

Design in dark first — tokens flip automatically in light mode.
Use transparent tints (10–15% dark, 20–28% light) for active chips and badges.

Pure #FFFFFF or #000000 surfaces — always one step toward grey.
Purple-blue multi-stop gradients.

Gradients & photography

The hero is the only place for gradients: a radial wash of the theme colour over near-black. Photography is a divider device, not wallpaper — warm, slightly desaturated (floodlit match days, muted training greens), always under a light dark overlay with a mono photo-credit pill.

Repeating textures or patterns.
High-contrast, punchy-saturated imagery.

Borders, cards & shadows

1px borders in the border colour. The featured card adds a 3px green or pink top border — a recognisable signature. Section dividers are full-bleed photographs with a dark overlay, not horizontal rules.

Lift cards 2px on hover with a colour-matched shadow.
Reserve the neon glow for primary green.

Left-border-only colour accents — the top border is the pattern.
Glow in purple or pink (except the pink CTA's own hover).

Motion & interaction

The signature is the bouncy cubic-bezier(.34, 1.56, .64, 1) on the primary CTA: hover lifts 1px, brightens and glows; press sinks 1px and scales to .98. Everything else is linear/ease at .15s for colour and .2s for layout. Links turn primary green on hover; ghost links widen their arrow gap.

Bounces, parallax or scroll-jacking elsewhere.
Ignoring prefers-reduced-motion — the news marquee pauses for it.

Transparency & blur

Backdrop blur only on small capsules over imagery — photo credits and overlay chips (rgba(0,0,0,.55), 8px blur, a 1px white 15% border). Full-bleed overlays use a gradient instead.

Blur entire panels or use glass as the main card style.

Layout

Content sits in a 1152px container (px-5 sm:px-6 lg:px-0). Section spacing tokens are 48 (sm), 32 (md), 80 (default) and 120px (lg). The header is sticky, 54px tall on desktop, with a 1px bottom border; mobile gets a bottom nav for app-shell parity.