Supporters Club · design research

The adidas kit DNA, translated for the web

A set of reusable CSS weaves drawn from the era-defining adidas shirts of 1988 to 1992. Every fill now carries a club's two kit colours, split like the poster plates, so it reads as a shirt. Over that split runs the tonal woven thread, a light thread and a dark thread blended into genuine lighter and darker shades of each colour, mixed thick and thin, so both colours keep real fabric depth rather than sitting flat.

Step 3 · the treatments

Swatch board

Every fill is pure CSS. Drop a class on a block, set --kit-a and --kit-b to the club's two colours, and the woven threads print across both as tonal shades. Add base-stripe or base-hoop for a striped or hooped shirt.

Man United · red / white
Hero band

Shadow-jacquard facet

The core. Tone-on-tone diamonds woven across both colours. The white half carries a soft off-white shadow so it reads as fabric, not flat white.

Liverpool · red / yellow
Guide masthead

Facet, fine scale

The same weave at a tighter pitch for card mastheads, split across the away-kit red and yellow.

Dortmund · black / yellow
Feature panel

Facet, bold scale

A wider weave with a broad shadow valley for large full-bleed panels, in the Yellow Wall's black and yellow.

Aston Villa · claret / blue
Section band

Tonal chevron

A soft zig-zag with a fine bright ridge, split across Villa's claret and sky blue. For section dividers.

Man City · sky / white
CTA band

Tonal stripe

The most direct lift of the poster-plate stripes. Wide light and dark bands over a sky-and-white split.

Celtic · green / white
Stat strip

Shadow-hoop

Broad green-and-white hoops with a fine woven seam, straight off a hooped shirt. For banner and figures strips.

Roma · claret / gold
Membership panel

Diamond argyle

A bold diamond outline with a finer diamond inside it, the classic terrace-knit note, split across Roma's claret and gold.

Rangers · blue / white
Card body

Fine pinstripe

Whisper-quiet woven hairlines over a royal-blue and white split, for the calmer surfaces of a card.

Barcelona · claret / blue
Section masthead

Striped grid weave

The gentlest jacquard over Barcelona's claret-and-blue stripes, so the woven grid sits inside the bands.

devices
Accent · anywhere

Three-stripe + confetti

The signature marks, kept as they are. The sheared three-stripe as a masthead edge; triangle confetti as a corner flourish.

Step 4 · in context

Applied: hero band

A Man United red-and-white kit, split on the diagonal. The white side is woven, not flat, so it carries white and off-white fabric depth; the headline sits on the pale half and stays fully legible.

Away days · 2026/27

Plan the trip. Not just the match.

Fixtures, flights and the ground-to-bar walk, in one place. Built for supporters who travel.

Applied: guide cards

Each card takes a two-colour club masthead with a woven weave and the three-stripe, over a clean body.

City guide · black & yellow

Dortmund in 48 hours

Where to drink before kick-off, how the Yellow Wall fills up, and the last train back to the Hauptbahnhof.

Read the guide →
City guide · claret & blue

Barcelona in 48 hours

Tapas before the walk to the ground, where the away end gathers, and the metro line that actually moves.

Read the guide →

Join the away-day beta.

The tonal stripe weave over a red-and-cobalt split, the same fabric idea carried across every surface.

Join the beta