↓ PNGGoalkeeper.com
The position-first platform — content, commerce and proprietary goalkeeper data.
Goalkeeper.com operates from the position that the keeper is the entire focus, not a footnote of a wider football site. The brand spans the storefront (editorial + commerce), Goalkeeper xG (proprietary goalkeeper data for clubs, leagues and associations), The Keeper's Call (a hand-illustrated children's book), the vendor portal and the editorial CMS.
The system is dark-first: every surface boots dark, and light mode is a fully tokenised override that darkens the primary green for AA contrast on off-white.
Goalkeeper.com
The green G-mark is the primary brand icon (header, favicon, mobile nav). "Dark" files are dark artwork for light backgrounds; "white" files are light artwork for dark backgrounds.
Goalkeeper xG
The data sub-brand keeps the G-mark and adds the "xG" lockup. Green is the default; magenta is the alternate colourway.
Brand
Primary green is the brand — CTAs, focus rings, active nav, the G-mark and the signature glow. Light mode darkens it to pass AA on off-white.
Primary — Goalkeeper green
CTAs, focus rings, active nav, the G-mark, the glow.
Primary light
Hover state of primary elements.
Primary dark
Pressed state of primary elements.
Accent — purple
Secondary callouts and "premium" tier hints. Use sparingly.
Accent light — pink
Always The Keeper's Call; "Buy on Amazon"-style CTAs.
Surfaces
Near-black, never pure black — cards lift one step or shift to a faint blue-tinted alt. Light mode mirrors with off-whites, never
Base
Page background.
Surface
Cards and panels.
Surface hover
Hovered surfaces.
Surface alt
Alt cards, pills, card headers.
Border
1px borders and dividers.
Text
Text
Headings and primary text.
Content body
Body copy, including editorial Playfair.
Muted light
Secondary headings.
Subtle
De-emphasised text.
Muted
Meta, captions, placeholders, outline-button borders.
Status
Danger red
Destructive actions only. Alias --color-danger.
Legacy — avoid in new work
Being phased out. Don't introduce these in new designs.
Dark green 1
Dark green 2
Mint green
Soft grey 1
Soft grey 2
Soft grey 3
Dark grey 1
Dark grey 2
Dark grey 3
Dark grey 4
Aa
Built for the keepers.
Aa
Gear engineered for the keeper's craft — reviews, durability data and exclusive drops.
Aa
A bedtime favourite that has made grown goalkeepers cry.
Aa
POSITION-FIRST · WHO WE ARE
Corner radii
Cards are 14px — generous but not pill-y. Buttons are a tight 8px. Pills are fully round.
Spacing
Section spacing is deliberately non-linear — md (32px) is smaller than sm (48px).
Shadows
The neon glow is primary green — the signature. The pink glow exists only for the pink CTA's hover.
Motion, overlays & tints
| Name | Value | Usage |
|---|---|---|
| The signature — primary CTA lifts on hover, sinks on press. Everything else eases at .15s (colour) / .2s (layout). | ||
| Dark overlay on imagery | ||
| Dark overlay on imagery | ||
| Dark overlay on imagery | ||
| Outline-primary button and tinted pill backgrounds (12% in light mode) | ||
| Their borders (32% in light mode) | ||
| Faint green section wash (4% in light mode) |
Buttons
The primary CTA uses the bouncy easing — lifts 1px and glows on hover, sinks and darkens on press.
Pills & eyebrows
Mono, uppercase, wide tracking — never emoji. The tinted pill with a 6px dot is the "position-first" kicker.
Featured cards
The signature 3px top accent border — green for the primary variant, pink for the accent variant. Lifts 2px on hover with a colour-matched shadow.
Cards
Surface background, 1px border, 14px radius. The form card adds an 18px radius, a 3px gradient line on the top edge and — on the most important card per page — the ambient green glow.
Inputs
8px radius like buttons; the focus ring is primary green.
Hero gradients
The hero is the only place for gradients — a radial wash of the theme colour over near-black. Primary, accent or accent-light; never a multi-stop purple-blue blend.
Custom monochrome set, stroke style (1.5–2px). Shipped black; inverted with a CSS filter on dark backgrounds rather than as a second file. Sizes 20px (mobile chrome), 22px (desktop chrome), 24px (inline). Click an icon to download its SVG.
account
arrow back
arrow forth
bag
bag 2
bars
check
check circle
chevron up
chevron down
chevron left
chevron right
cog
exclamation
G goalkeeper
help
home
link
pencil
play
play circle
play solid
plus circle
plus solid
return
rocket
search
shipping box
spinner
star
truck
truck outlined
x
x mark
x mark solid
facebook
instagram
linkedin
reddit
telegram
twitter
youtube
australia
united kingdom
united states
countryVoice — 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.
PDFBrand kitThe full Goalkeeper.com brand kit as a printable document.353 KBZIPAll logosEvery lockup above — PNG renders plus SVG where available.939 KBZIPAll iconsThe complete monochrome SVG icon set.56 KBCSSDesign tokensCSS custom properties for colour, type, radii, spacing and shadows — dark default with a :root.light override.10 KBCSSComponent stylesButtons, pills, cards, inputs and hero gradients, built on the tokens.11 KB