A league of
your own.

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 900 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.

Typography

Two voices: Archivo for identity and hierarchy, Inter for using the product. The character comes from the relationship between them, not from adding another font to every kind of information.

A scale with distinct jobs

Archivo Black and Oswald remain supported for existing campaign assets and kit artwork. They are not additional product UI roles. New controls use the two-face system above; no new font downloads are needed.

Surfaces & depth

Start with the page. Add a surface when information belongs together or the entire region is interactive. A heading, a statistic, or a group of buttons does not need its own card.

Solid fill, a single quiet border, 10px corners. A static container stays still on hover. Interactive cards must contain a real link or button and expose a visible keyboard focus state.

The pitch and original kit illustrations retain their depth: it explains the sporting object. Generic product chrome gets no floodlights, glass blur, ambient orbs, or decorative gradient.

Motion you can feel

A press has contact. Saving has progress. A panel arrives from the edge it belongs to. Play each example to see the timing.

CSS animates transform and opacity. Keyboard focus appears immediately and stays visible. Reduced motion keeps every state change while removing spatial movement and spinning. Routine saves finish quietly.

In the product the same rules give five small moves: the tab underline travels to the new tab, the step line fills as a step completes, a choice ticks when it is taken, a run arrow steps forward under the pointer, and a screen's headline arrives once. Nothing loops, glows or bounces. Try the devices in Core kit.

Core kit

The book and product load the same foundation CSS. One clear primary action per decision. Labels name the action; prices and consequences stay visible beside it.

Buttons

48px high, 8px corners, Inter 600 at 15px. The primary is lit from above and rests on a short soft shadow, with no light frame around it. A press settles it 1px in 120ms. Secondary actions sit on a quiet hairline; tertiary and destructive actions stay quiet until needed.

Every button state

Inputs

Visible labels. Constant 1px borders. 16px input text. Helpers and errors share a reserved slot below the field. Validation uses text and aria-describedby; a red outline alone is incomplete.

Numbers and status

Existing book values shown as type specimens. Align the value and its label; no individual cards. Gold identifies money, green identifies live or positive results.

Status is readable without color. No badge glow, flashing deadline, or automatic pulsing.

Devices

The product is built from the manager's own documents: the scoreline, the team sheet and the tactics board. A number sits on the page. A list is ruled rows. A link that goes somewhere makes a run. styles/brand-devices.css holds every device below; the book embeds the same bytes.

Scoreline and leader. Value over label with a hairline between, never a box per number. The dotted run of a team sheet joins a label to its money. Gold is money and green is live, nothing else.

Team sheet. Ruled rows for any list of things: leagues, tools, payouts. Rankings always use the standings device in App components, so every leaderboard looks the same.

Tabline, segmented, status and the run. Tabs are words with one underline that travels; filters sit on a soft track that is never violet. Status tags are quiet and the words carry the meaning. The run arrow, two dashes of trail and a head, marks a move to another place; disclosure keeps its chevron.

Kit wall, choice and step line. A competition is told with three of our own shirts, never a federation mark. A taken choice gets one violet border and a tick. Progress is a line that fills, not numbered circles.

08App components

These existing specimens map the product beyond the shared foundations. They are retained for the next migration pass; the 3.1 typography, surface, and motion rules above take precedence over legacy treatment shown here.

Navigation chrome

gaffer

HomeMy TeamsBrowseAnalytics

$128.40

Home

Teams

Create

Browse

Stats

Legacy navigation specimen: sticky .nav-surface navbar, 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. Remove decorative scroll-progress treatments in the navigation migration.

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. In the mixed matchday view, upcoming dates stay violet rounded pills while completed players switch to solid, squared points tags: green for positive, slate for zero, red for negative. 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. Matchday status panels sit in the document flow above the field and never cover a player.

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. This one standings device runs every game format. 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. In the migration, dialogs use a quiet opacity entry, drawers use positional feedback, and validation uses inline messages without shaking fields.

Component reference

Game formats

Every format is a league with its own win rule. The page keeps its shape: the rule sits in one line under the name, and the standings show exactly what decides the rank. These are the five families in the format builder.

Every format uses the same standings as App components: podium ranks in metal, your row tinted with a left rule, one dashed line where the prize ends in gold or where the game ends in red. Formats change the numbers and the line, never the row. Inverted scoring uses the same pages, and its rule line says lowest wins.

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 starts with a neutral field and white team-sheet cards. Dark ink carries the names; violet identifies fixtures, selection, and actions. Softer kit shadows keep the shirts clear without muddying the surface.

Starting XI + bench · Live Points

The same 11-player formation holds its position after deadline. Points replace price. Players on the pitch right now get a solid green points bar, a green ring and the minute; finished players go neutral with FT. Benched points stay visible but 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."

Copy budget

A heading is two to five words. One supporting line at most, and only for a fact the screen does not already show. No label above a heading that repeats it. Numbers beat adjectives. If a control explains itself, its explanation goes.

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

Implementation rules

A component is ready when its real content, states, and mobile layout are resolved. A new screen must extend this system, not invent another one.

1. Use the shared foundationsstyles/brand-tokens.css, styles/brand-foundation.css and styles/brand-devices.css define the product controls and devices. This book embeds those exact bytes. The build checks parity.
2. Give every typeface one jobArchivo for identity and major headings. Inter for the product. Mono only for code and technical references. Sentence case and natural tracking are the default.
3. Remove decoration before adding a componentNo glass cards, CTA sheen, hover lift, ambient orbs, glow labels, tracked capital eyebrows, pill tags, or a box per statistic. Reach for the devices first: scoreline, team sheet, leader, tabline, run arrow.
4. Review states at actual sizeKeyboard focus, pressed, disabled, loading, error, success. Check dark and light at 320, 375, 414, 768, and desktop widths. Confirm contrast; do not infer it from the palette.
5. Keep the remaining migration honestCustom pitch controls, premium league cards, navigation, campaign artwork, and old page-local styles still need their own review. Their existing examples are migration references, not permission to reintroduce retired chrome.

This book owns Gaffer’s visual decisions. The 3.1 foundation rules supersede conflicting legacy recipes. Product delivery status lives in docs/MASTER-PLAN.md. Identity, pitch geometry, and kit artwork retain their existing contracts. Future intentional changes update the book, shared implementation, and handover together.