Three concepts · five iterations · six variants

Identity sheet

The whole trail, kept so the reasoning shows: what was tried, what was rejected, and the specific defect that killed each losing pass.

The constraint that shaped everything

Two fixed colours, no gradient

A FastSites theme logo ships as a data URL and cannot read page CSS, so currentColor is unavailable and the mark has to be legible against all six palettes on its own. The usual answer is a self-sufficient gradient with stops solved into a narrow luminance band.

Kilo does not do that. Both colours are fixed and solved instead: each was chosen to clear 3:1 against every one of the six page backgrounds, so the mark is palette-neutral by design. That also means no gradientUnits trap and no gradient-id collisions when several variants sit on one page — both of which are live hazards in this codebase.

Logo colour contrast against every page background
Colour	On white	Darkest palette	Minimum
Steel #666E7B	5.15:1	3.78:1	3.78:1
Red #D8323C	4.73:1	4.12:1	4.12:1
Reversed white	—	—	7.77:1

Bar is 3:1 for graphics. The reversed variant is measured against the three brand fills instead, where its worst case is 7.77:1.

Pass one

Three concepts

32 dark

A · Side elevation

A loaded bar seen from the side rather than the three-quarter view every stock gym icon uses. Plate geometry is measured: all IWF competition discs are 450 mm across, so the inner pair are equal height and the outer pair are 5 kg change plates.

Through to iteration

Reads at 24 px. But the centre span is 25% of the mark and a barbell's is 60%, so it reads as a dumbbell.

32 dark

B · Load stack

Four bands whose heights are the real Eleiko plate thicknesses — 10 kg 35 mm, 15 kg 39 mm, 20 kg 50 mm, 25 kg 58 mm. Entirely derived from published measurements.

Rejected as a mark

Four bands and three gaps collapse into grey mush below 32 px, and the silhouette says "bar chart" before it says "barbell". Survives as the theme's section device — art/loadbar.svg, the rule under every hero and the divider above every footer.

32 dark

C · Collar K

A K monogram pierced by the 50.5 mm bore every competition disc shares, drawn at true relative scale against a 450 mm plate.

Rejected

The bore closes up below 32 px and it becomes a generic corporate K. A monogram is also the convention of property marks, not strength ones. Its diagonal weight distribution fed straight into the final wordmark's K, and its cross-hatch idea became art/knurl.svg.

Passes two to four

Five iterations on concept A

Each row is one specific defect being fixed. Every pass was rendered at six sizes on both light and dark and looked at before the next one was drawn.

24 dk

1 · Grip proportion

Discs pushed outboard so the centre span goes from 25% to 54%. Collars and change plates dropped — at 24 px they read as extra plates and thickened the silhouette. Fixed the dumbbell read. Now too plain.

24 dk

2 · The loading story back

One 5 kg change plate per side and two knurl ticks on the shaft. Worked at 84 px, failed at 24 px — the ticks merged into the shaft and simply fattened it, and the whole mark greyed out.

24 dk

3 · Optical correction

The shaft was visually heavier than the discs below 32 px, inverting the hierarchy: you saw a line with dots. Shaft 2.6 → 2.2, discs 5.6 → 6.4, ticks gone. Held down to 24 px — but still a complete barbell floating in a box.

24 dk

4 · The crop — winner

The shaft runs off both edges, so the mark is a fragment of a 2200 mm bar rather than an object posed in a square. A dumbbell cannot be cropped this way, which is what finally killed the read that survived passes 1–3. Discs grow to 92% of the frame now they are not sharing it with shaft end-caps.

24 dk

5 · Crop plus loading order

Same crop, with a steel 20 kg disc outboard of each red 25 kg one so the mark states the real loading convention. Rejected: four discs merge into a picket fence at 24 px. The loading order moved to the plate key on the home page, where it has room to be read.

Final

The six variants

1 · Primary lockup

Icon and wordmark, horizontal. Both centred on y = 24 so the bar shaft lines up with the O's counter; the 16-unit gap is the width of that counter.

2 · Stacked lockup

Narrow chrome and the mobile header. The icon is scaled to 0.78 so its disc height sits just under the wordmark's cap height — stacked, the type has to lead.

3 · Icon alone

Tested at every size below. The 24 px cell is the bar the brief sets, and it clears it.

24 ✓

4 · Monochrome

One colour, for single-colour print, embroidery and stamped vinyl. Light-field and dark-field versions.

5 · Reversed

On brand-coloured fields. The red disc is not retained — on the Twenty-Five palette's red brand fill it would vanish, and a reversed mark that works on two fills out of three is not a reversed mark.

6 · Favicon

A 32 px simplification, not the mark shrunk. Shaft 2.4 → 4 units (at 32 px the mark's shaft lands on 1.6 device pixels and smudges), discs 7 → 9 and moved inboard, stadium radius 3.5 → 2.5.

32 ✓

32 dk

icon, unmodified — compare

Drawn, not set

The wordmark

Hand-drawn geometry rather than type. A font-only wordmark is excluded by the brief, and text inside an SVG that ships as a data URL would not render at all without the font.

Cap height 40, stem weight 9.5, flat terminals. The O is a true stadium — 31 wide by 40 tall, so its straight sides are exactly the 9-unit difference — which is the same construction as the plate edges in the icon. That is the one shape rule the whole identity shares: round is the plate, square is the platform.

It is why the theme's cards, inputs and buttons have a radius of zero while the navigation pills are fully round.

Beyond the mark

The drawn vocabulary

Load bar

Concept B, redeployed. Band widths are the real plate thicknesses. Sits under every hero image and above every footer.

Plate key

All four discs are 450 mm across and differ only in thickness. Drawn to scale on both axes, bore included.

Section icons

A rack head-on, platforms in a row, a hand cue. Drawn on a 24-unit grid with a 2-unit stroke and square caps — not from an icon library.

See it in use

The mark in header chrome, the load bar as a section rule, and the plate key doing actual work.

Back to the site