Identity

Three concepts, four iterations, one mark

Everything that was drawn is on this page, including the things that did not work, because the reason the winner won is only visible next to what it beat.

Round one — three concepts

A tattoo shop's mark has two traps: the swallow-skull-anchor clip art that every studio in Britain already owns, and the abstract monogram that could belong to a letting agent. Each of these tries to get at something the trade actually does.

A — the groupingA 7RL round liner seen end-on: seven needles in hexagonal close packing, the seventh left as the void the packing creates. Nobody outside the trade would invent this shape.

B — the tapering lineOne stroke, thin where it starts and heavy where the machine settles, bent into an L. On the name, and dead on arrival: at any size it is a bracket, and a bracket is what a corner-radius setting looks like.

C — the signwriter's rulesFour descending weights, the way a signwriter racks a border. Reads as a paragraph of text at icon size — but it was too good to bin, and it came back as the section divider in art/pattern-rules.svg.

A wins, with a problem. Six circles round a hole is a flower. It is a flower at 120px and it is a flower at 24px, and a flower is the single worst thing a tattoo studio's mark could accidentally be.

Round two — fixing the flower

Four attempts at stopping the grouping reading as a blossom.

A2 — rotate itFlat-top packing instead of pointy-top. It is a flower that has been turned 30 degrees.

A4 — frame itA cut square around the grouping. The frame takes the mark over, the grouping shrinks to nothing, and at 24px it is a blob in a box.

A3b — a tapered barRight idea, wrong execution. The taper is invisible above 48px and looks like a printing fault below it.

A3d — the grouping and its line ✔A solid bar under the tool, exactly as wide as the tool. Needle above, line below; the name in the mark. Heavier than looks right at 100px, because at 24px a thin bar disappears and takes the anchor with it.

The suite — six variants

All hand-authored SVG. Source is in logo/, one file each, commented.

1 · Primary lockupThe rule runs under the mark and the word — the needle is drawing the wordmark's own baseline. That is why this is the primary rather than a mark-beside-name arrangement.

2 · StackedFor narrow chrome and mobile headers, below about 180px wide where the wordmark's 22-unit stems start to fill in. Reading order is the process: tool, line, name.

3 · Icon markSquare, for tiles and tight chrome. Legibility at 24px is tested below.

4a · Monochrome, inkSingle colour for consent forms, aftercare cards, rubber stamps and anything that goes through a photocopier.

4b · Monochrome, paperThe dark-field counterpart. No optical weight correction is applied — at a 22-unit stem on a 100 cap the reversal bloom is invisible.

5 · ReversedKnocked out of a vermilion plate for stickers, glass and receipts. The rule runs off both edges: the mark ends, the line does not.

6 · FaviconA genuine simplification, not the mark shrunk: it drops from a 7RL to a 3RL — the finest liner grouping a tattooist owns. Same tool, fewer needles. The bar keeps full weight because it is what still reads at 16px.

Size tests

The brief asks for legibility at 24px for the mark and 32px for the favicon. Both are rendered here at true size — no scaling, no zoom.

Icon mark, on paper

96

48

32

24 ✔

16

Icon mark, on ink

96

48

32

24 ✔

16

Favicon — 3RL simplification

64

32 ✔

16

7RL at 32

7RL at 16

The last two are the comparison that justifies the simplification: at 16px the 7RL closes up and the void disappears, while the 3RL still has three distinct needles.

Lockup, small

340 wide

220 wide

160 — too small, use stacked

Why the logo is a fixed vermilion

A theme logo ships as a data: URL inside the theme file. It cannot read page CSS, so currentColor and var(--c-brand-600) are both unavailable to it — the mark has to carry its own colour and survive every palette on its own.

Vermilion #C8462F was chosen because it is the one hue that clears the 3:1 non-text contrast bar against all six palette backgrounds in both modes — and because it is traditional tattoo red, which is the correct answer for this trade anyway. Measured ratios are in README.md.

Switch palette and mode with the control at the bottom right — the four swatches above are live and the mark does not change with them. That is the point.

The one place vermilion is not used: on a vermilion field. Red on red is not a contrast problem you can solve with a tint, so that case gets its own file — logo/reversed.svg, knocked out in white.

The wordmark has no curves

Not one. Every letter is cut from rectangles and diagonals on a single grid — cap height 100, stem 22, standard width 68 (I 22, L 62, W 118, K 74), sidebearing 16. The O is a square with a square counter; the R has a straight bowl and a slanted leg.

This is not a stylistic tic, it is the theme's own rule made visible: --fs-radius-card, --fs-radius-control and --fs-radius-pill are all 0, so a shop whose every corner is square cannot have a round O. It leaves the mark's six circles as the only curves in the entire system — because the needle is round, and nothing else is.

Cap line, stem line, and baseline. No overshoot on the O — a square O has no round to correct, and adding it would make the O measurably taller than the L.