gaffer

Brand kit.

v1.0 · locked · 2026

00 · Assets

Final artefacts

Locked v2.0 after the /design/brand review on 2026-04-24. All five files embed the manager silhouette as base64, single-file, no external references, safe to use anywhere (favicons, OG images, email signatures, merch prep).

Mark · on violet

128×128 rounded square with the manager silhouette. Source for favicon, PWA icon, apple-touch-icon, and any avatar slot.

Open raw · /brand/mark.svg

Mark · white silhouette

White silhouette, transparent background. For inline use on surfaces already carrying the violet accent (buttons, cards, navbars).

Open raw · /brand/mark-white.svg

Mark · black silhouette

Black silhouette, transparent background. Light surfaces, print, merch, stamps.

Open raw · /brand/mark-black.svg

Wordmark · /brand/wordmark.svg · 420×96

Full horizontal lockup: mark + “gaffer” + whistle dot. Drop-in for email signatures, landing page hero, press kits.

Open raw · /brand/wordmark.svg

OG default · /brand/og-default.svg · 1200×630

The image Twitter / Slack / Discord scrape for any link to Gaffer. Wired via og:image in _app.js.

Open raw · /brand/og-default.svg

Favicon study · browser tab · Apple touch · PWA

16px

32px

48px

96px

180px

16 / 32 → browser tab favicon. 48 → Windows shortcut. 96 → Android Chrome. 180 → apple-touch-icon. All served from a single /brand/mark.svg.

01 · Identity

Wordmark

Primary · dark

gaffer

Primary · light

gaffer

Clearspace · minimum padding equals the height of the dot

gaffer

Don't · stretch

gaffer

Don't · change case

Gaffer

Don't · drop the dot

gaffer

02 · Colour

Palette

Violet is the sport-agnostic identity colour. Gold carries money moments. Electric green was demoted from brand to semantic, it now means exactly “live / positive / confirmed” and nothing else. Each per-sport league theme overrides --league-primary but the semantic tokens stay constant.

Primary

identity · CTAs · active states

#8B5CF6

Primary Deep

hover · pressed

#6D28D9

Money

prize · winner · entry fee

#F59E0B

Live · Positive

in-play · points gained · confirm

#00FF87

Danger

destructive · error

#F87171

Surface

card background

#150E24

Applied · navbar + stats + CTA

gaffer

DashboardTeamsBrowse

250.00

GW Points

Prize Pool

$2.5K

Live

8/11

itamardvirr

Mbappé · Kane

871,247

03 · Typography

Type system

Space Grotesk is the default display face, it runs every H2/H3, section label, button, nav link, and stat chip. Archivo Black is reserved for cover moments: page hero titles (via .hero-headline), big stat numbers, celebrations, OG images. Inter is the body. Every number is rendered with tabular-numsso digits don't shift on a live tick.

gaffer

Cover · hero (Archivo Black)

72px

Choose your battlefield

Cover · H1 (Archivo Black)

48px

Set the rules

Display · H2 (Space Grotesk 700)

32px

SQUAD COMPOSITION

Section label (Space Grotesk 700)

11px

Pick your starting XI and a bench before the deadline.

Body · large (Inter 500)

18px

Captain points multiply by 2x. Vice-captain only scores if captain doesn’t play.

Body · regular (Inter 500)

14px

1,247

Stat hero (Archivo Black)

44px

04 · Motion

Motion vocabulary

Only transform and opacity are animated, GPU-composited, never a reflow. prefers-reduced-motion collapses all of this to instant. No Framer Motion.

--dur-fast150mshover tint · icon nudges · chevron spins

--dur-base240mscard lift · modal open · accordion expand

--dur-slow400mspage transitions · celebrations · count-ups

--ease-out-softcubic-bezier(0.22, 1, 0.36, 1)default · arrives and settles

--ease-springcubic-bezier(0.34, 1.56, 0.64, 1)rank change · prize win · captain chip pop

05 · Iconography

Icon system

Lucide React, stroke 2–2.25, always rendered at 12/14/16/20/24px. Never mix with emoji. Filled glyphs are reserved for active/pressed states.

06 · Components

Core primitives

Buttons

Chips

AllLiveFreePaid

2.99/mo 48d Live

Input + focus

Focus ring always three-layered: 3px outer halo, 1px border, inner inset highlight.

Card · premium

Collectible

card-premium + holo-noise

Every hero surface uses this shell, dashboard, pitch cards, league cards, wizard steps.

07 · Applications

In the wild

Avatar · 96 / 64px

Favicon · 16 / 32 / 64px

OG · 1200 × 630 (scaled)

gaffer

Your league.
Your rules.

Configurable leagues · USDC escrow · any sport

Loading state

08 · Voice

Copy & tone

We write like

“Set your squad.”
“Time to pick your XI.”
“Deadline locks in 2h 14m.”
“$2,500 on the line.”
“Share the code. Friends paste it to join.”

Short sentences. Direct instruction. Touchline, not broadcast booth. Numbers front and centre.

We never

Use “bet”, “gamble”, “odds”, “wager”, “house”.
Use emojis in UI copy.
Use em-dashes anywhere. Not in copy, not in commits.
Say “fantasy football” when we mean any sport.
Market to minors.

Skill-based contests. Entry fees. Prize pools. That's the vocabulary.