01Brand core

Gaffer lets managers build fantasy leagues around their own sport, rules, and prize structure. The league belongs to the group; Gaffer provides the competition and settlement rails.

One sentence, used everywhere: "Run the league your way. Set the rules, set the prize, and let the contract settle it."

A gaffer is the manager: picks the team, takes the blame, lifts the cup. The brand lives in the manager's world, the touchline, the team sheet, the flat cap. The cap is the signature; the expanded uppercase wordmark gives it authority at product scale.

Personality

Competitive, not aggressive

Group-chat-on-deadline-day energy. Banter, never trash talk that punches down.

Confident, not guru

Receipts over opinions: points, prices, payouts. No hype, no "unlock your potential".

Serious about money

Money moments are calm, precise, and gold. Numbers are always real; no data means an honest empty state, never a fake number.

Alive on match day

Live is a state, not a decoration. Green appears only when something is actually happening.

Non-negotiables

• Skill-based contest language: "entry fee", "prize pool", "settle". Never "bet", "gamble", "wager", "odds", "casino", "house".
• The contract holds the money, we never say "we hold" anything.
• Players appear as names, stats, and original kit graphics only. No photos, no crests, no sponsor marks, no AI likenesses, until licensed.
• Plain English in every user-facing string. No "on-chain", "gas", or "signer" in the UI.

02Logo

The mark is the violet flat cap, refined July 2026 (v3.0). The lockup pairs it with an expanded Archivo Black wordmark and a flat violet full stop. In product, components/brand/Logo.js renders both <Wordmark /> and <Monogram /> so color and scale stay consistent.

GAFFER

GAFFER

The full lockup, the monogram (avatar, favicon, tight slots), and the lockup on light mode, where only the text flips to near-black. The cap stays violet on every background.

Rules

• The cap keeps its natural landscape aspect. Never squash it into a square box.
• Cap height is 0.92× the wordmark size; gap is 0.22×. Logo.js already does this, don't rebuild it by hand.
• The product lockup is uppercase. Logo.js sets it in Archivo 900, expanded to 125%; prose uses normal-title-case Gaffer.
• Assets: cap-480.png (UI), icon-*.png (PWA), og-default.png (social). The April silhouette-tile SVGs (mark*.svg, wordmark.svg) are retired, do not use them.

03Color

Gaffer has two equal presentation modes: floodlit dark and paper-light. Both carry the same violet identity and the same semantic split: gold is money, electric green is live. Violet replaced green as identity because green was borrowed FPL clothing and locked us to football; mode changes the surface, never the meaning.

Text uses the --ink-1 through --ink-5 scale: pale ink on dark, near-black through slate on light. Use the tokens, not hardcoded text or surface colors. Light mode is a designed paper system with flatter elevation and deeper violet—not a CSS inversion.

Data colors

Fixture difficulty (never grey, every fixture is color-coded) and position colors, from lib/designTokens.js. These are data colors: they never leak into chrome or CTAs.

League themes

Per-league theming overrides five variables (--league-primary, -secondary, -bg, -bg-card, -text-accent) and nothing else. Money, live, and danger never re-theme. This is the entire mechanism that makes Gaffer sport-agnostic.

04Typography

Five faces, five defined jobs, all self-hosted. Archivo carries the identity in two widths: expanded for the wordmark and poster headlines, condensed for numerals and codes. IBM Plex Mono handles stamps, labels, and data. Archivo Black is reserved for cover moments, Inter handles long-form reading and UI, and Oswald is used only for broadcast information on the pitch. Space Grotesk is retired.

Heading scale, as shipped

05Surfaces & depth

Dark matte surfaces do most of the work. Glass is reserved for navigation, drawers, and controls that visibly sit above content. Resting cards use one hairline border and a low shadow; sheen and texture belong only to prize and celebration surfaces. Radii: 20px cards, 14px inputs and buttons, 10px chips. Depth is semantic:

06Motion

CSS only, GPU-composited, no JS animation libraries. Animate transform and opacity only, never width, height, position, or spacing. Entry animations play once on mount; the only loops are state loops: live pulse, urgency pulse, captain glow, skeleton shimmer. Everything collapses to instant under prefers-reduced-motion.

See it move

Live demos of the shipped classes. Hover and press the card; replay the entries. Only transform and opacity ever animate; everything collapses under prefers-reduced-motion.

07Core kit

The shipped controls, rendered from the same specs as globals.css. Each view gets one clear primary action; secondary controls stay quiet.

Buttons

Primary: violet with glow and hover sheen. Secondary: glass. Danger: red tint, destructive actions only. There is also a bare .btn-ghost for tertiary actions.

Inputs & controls

Form input with violet focus ring (click in), the Toggle switch, and the create-league Wizard progress dots: completed and active fill violet, the active step gets a glow ring.

Stat chips

Archivo tabular numerals. Gold only when the number is money; green only when it is live.

Badges & status

Glow states the meaning: green live, gold money, violet brand. The DeadlineCountdown pill turns gold and pulses inside the final hours.

08App components

These examples show the main product states at working size. The reference table maps the remaining components to their files.

Navigation chrome

gaffer

HomeMy TeamsBrowseAnalytics

$128.40

Home

Teams

Create

Browse

Stats

Top: sticky .nav-surface navbar (rgba(8,3,18,0.92) + blur), active link underlined in violet, wallet chip with tabular numerals (never coerces a null balance to $0), notification bell. Bottom: mobile nav, five tabs, active tab gets a violet pip and icon. A 2px violet scroll-progress bar runs along the top of every page.

On-pitch chrome

Captain is gold, vice is silver, and triple captain shows ×3. Fixture chips combine the FDR dot, venue, and opponent code; double gameweeks stack two fixtures, while blanks and TBDs are stated directly. Higher live totals strengthen the green ring without adding novelty labels. Chip banners use violet for wildcard, green for bench boost, and gold for triple captain.

Leaderboard

A quiet list, not cards: metal rank colors for the podium (gold, silver, bronze), your row tinted violet with a left rule, live GW points in green, and a gold dashed payout line marking the prize cutoff. Chip usage shows as small WC / BB / TC tags; live rows carry a match progress bar with the breathing green dot.

Money moments

SettlementBanner is amber and provisional. WinnerBanner moves from projected to sending to arrived, then links the receipt in plain English. League cards, wallet balance, and payout progress use gold only for the money itself.

Feedback

Skeleton shimmer for every loading surface (never spinners on content), the EmptyState pattern (icon tile in violet tint, honest copy, one action), and the version toast that nudges stale tabs after a deploy. Modals enter with .animate-scale-in over a blurred black overlay; sheets slide up as .drawer; rejected inputs .animate-shake.

Component reference

09Kits & cards 26/27

For 26/27, on-pitch picks use an original dimensional shirt silhouette instead of a crest tile. Every garment uses the same controlled three-quarter angle; the pitch adds depth while Gaffer color and chrome own the surface.

Asset boundary

• The silhouette, lighting, seams, and folds are original Gaffer artwork.
• Club identity is limited to color, a generic geometric pattern, and the 3-letter code.
• Never add crests, sponsors, manufacturer marks, league marks, or replica kit graphics.
• Use player names and stats, but no photos or likenesses until licensed.

Full squad · Pick Team

All 15 selections are visible in one system: the starting XI on the field and four ordered substitutes below it. Price stays gold because it is money; selection state stays violet.

The cards are compact, rectangular, and optically aligned. Shirt, name, and fixture form one bounded object; no floating white labels, mismatched radii, or translucent green boxes.

Full squad · Light mode

The formation, card footprint, and information hierarchy are identical. Only the surface system changes: paper cards, mineral turf, dark violet markings, and flatter elevation.

Light mode is deliberately Gaffer: violet owns selection and field geometry, while green remains limited to live and points semantics.

Starting XI + bench · Live Points

The same 11-player formation holds its position after deadline. Price gives way to points emphasis, live players gain a restrained green signal, and benched points remain visible but intentionally quieter.

Layout does not jump between Pick Team and Live Points. Only the information hierarchy changes: points first, live state second, fixture context third.

Short format · 5-a-side

Short-format contests use the same card and pitch grammar at a larger scale. This 1–2–1–1 example has five starters and no substitutes; seven- and nine-player modes use the same line-based reflow.

Density is a layout variable, not a redesign. Fewer players create more breathing room and larger shirts while the Gaffer header, field, status color, and card geometry remain unchanged.

Kit patterns

Every club variant uses the same original three-quarter silhouette, asymmetric light model, and controlled 8-degree turn. Color combines with eight controlled pattern types: solid, contrast sleeves, stripes, pinstripes, hoops, sash, hem fade, and tonal diagonals.

Premier League 26/27

The 20-team sheet uses the current 26/27 club list. Each row reduces the home identity to color and generic geometry on the same Gaffer garment. Keep these values synchronized with lib/teamColors.js.

Season direction

Season 26/27 uses violet as the primary accent under cool stadium light. Gold returns to its single job: money. The Global 26 interaction patterns remain, but its champagne-and-navy treatment does not.

/* Season 26/27 theme, paste-ready for globals.css.
   Same 5-variable contract as every league theme. */
:root[data-theme='season2627'] {
  --league-primary: #8b5cf6;
  --league-primary-rgb: 139,92,246;
  --league-primary-glow: rgba(139,92,246,0.28);
  --league-secondary: #37003c;
  --league-bg: #0c0618;
  --league-bg-card: #110a1e;
  --league-text-accent: #ffffff;
  /* Hero + ambience, successor of the g26-* set */
  --s27-hero-start: #a78bfa;
  --s27-hero-mid:   #d946ef;
  --s27-hero-end:   #38bdf8;
  --s27-floodlight: rgba(139,92,246,0.07);
}

:root[data-mode='light'][data-theme='season2627'] {
  --league-primary: #7c3aed;
  --league-primary-rgb: 124,58,237;
  --league-primary-glow: rgba(124,58,237,0.18);
  --league-secondary: #ede9fe;
  --league-bg: #f5f5f7;
  --league-bg-card: #ffffff;
  --league-text-accent: #171125;
  --s27-floodlight: rgba(124,58,237,0.05);
}

Move the existing .g26-hero, floodlight, and win-probability styles to season-neutral classes, then point them at these tokens.

10Match-day graphics

Social and marketing graphics are match-day artifacts, not SaaS marketing. Tokens alone (palette + type + glow) produce generic startup cards; what makes a graphic unmistakably Gaffer is a football-native device carrying the layout. Every card is assembled from one of the three named devices below, never improvised from scratch. Coded templates live in social-agents/templates/cards/ (rendered via scripts/render-card.mjs); the shared assets partial (_assets.html) carries these fonts, the cap mark, and the jersey vector, so template output is brandbook-faithful by construction.

The three devices

• The team sheet (announcement.html) — an official squad-list document: ruled rows, violet number tiles, dotted leaders, a letterspaced stamp header, one gold money line in the footer. For announcements and any copy-led card; the sheet gives the copy a football object to sit beside.
• The kit wall (stat.html) — the owned vector jerseys in club colorways as the hero of player and stat cards. Names and numbers are facts; the shirt does the identity work. Violet bars for magnitude, gold for the value itself.
• The fixture block (fixture.html) — oversized Archivo tabular type (3-letter codes, scores, times) with kits flanking a lowercase v. Scoreboard typography at poster scale; the numbers are the design.

Composition rules

• The pitch is a grid, not a watermark. Halfway line and center circle sit behind content at hairline opacity and align to the layout (a column edge, a focal center), never floated arbitrarily.
• One device per card. A team sheet next to a kit wall is noise. Pick the device that matches the message.
• Gold is spent on exactly one money moment per card; violet carries brand and hierarchy; electric green stays semantic (live, positive) and never appears in marketing cards.
• Footer contract: hairline rule, Archivo footer line left, playgaffer.xyz right. Compliance-sensitive cards carry "free everywhere · paid where the rules allow it" verbatim.
• Copy rules ride along: lowercase, no emojis, no hashtags, no gambling words, no web3 jargon, no player likenesses — the quality gate applies to pixels, not just tweets.

Do / don't

Reference renders: social-agents/data/cards/2627-one-league.json → the announcement card that replaced the "don't" example above.

11Voice & language

Gaffer talks like the sharpest manager in your league's group chat: quick, specific, a bit cocky, never corporate. If a sentence works without a word, the word goes.

Vocabulary

Tone by moment

Deadline

Urgent, playful. "2h to deadline. Your bench is stronger than your XI. Fix it."

Live match

Short, present tense, points-first. "Saliba clean sheet · +6".

Money

Calm and exact. Full amounts, no exclamation marks. "You won $620. It's already in your account."

Errors

What happened, what to do, no apology theatre. "Squad over budget by $2.3m. Sell one player to save."

Social runs on the intern voice at @Play_Gaffer: over-eager, footy-brained, never corporate. No emojis, no hashtags, no threads, receipts over opinions.

12Launch worklist

The season opens in under a month. P1 ships before the opener, P2 during the first gameweeks, P3 when it hurts. Check items off, then delete them; this section should be empty by winter.

1. Season 26/27 theme + heroLand the season2627 tokens, generalize the g26-* machinery (hero, floodlight, win-prob, confetti) to season classes, and point the PL surfaces at it before GW1.
   P1
2. 26/27 club list + kit rowsRe-run the season seeder when the fixture list drops; sync CLUB_COLORS to the 26/27 colorways in section 09 (COV / HUL / IPS rows, CRY sash, BHA pinstripes, LEE hoops, MCI fade, TOT tonal, CHE gold trim) and verify all 20 kits render legibly on the pitch.
   P1
3. OG / share image kitAdd the shirt system to league invites, winner cards, and gameweek recaps.
   P2
4. Extract tokens from globals.css2,200+ lines of tokens, components, and page styles in one file. Split tokens into their own layer so V2 components consume one source.
   P2
5. Domain: gaffer.io vs playgaffer.xyzplaygaffer.xyz is canonical today; gaffer.io is the upgrade path. Decide before printing anything physical.
   P3

This brandbook is the locked single source of truth for Gaffer 27 identity and product presentation. The implementation lives in src/frontend/tailwind.config.js + styles/globals.css (tokens), components/brand/Logo.js + public/brand/ (logo), lib/teamColors.js + lib/playerIdentity.js (kits), and public/fonts/brand/ (fonts). Those files must implement the system defined here. Any intentional brand change starts in this book and updates the implementation in the same commit; legacy screenshots, drafts, and older handovers are not authority.