Quoin — identity

Working sheet. Three concepts, the iterations on the one that won, the six shipping variants, and the size tests. Concepts that were killed stay on the sheet — the reasoning is the point.

1 · Three concepts

A is the idea — a quoin is the dressed corner that binds two walls, and the stepped edge is what that looks like. But as a solid it reads as a staircase, not masonry.
A2 has the right information (courses alternate long and short) and the wrong form: left-aligned bars read as a bar chart.
B is competent and dead. Every second property firm in Britain has a square monogram; the keystone counter isn't enough to rescue it, and the accent tail looks bolted on.
C is the most Bath and the least ownable — it is a window icon, and it will be mistaken for a grid, a table or a spreadsheet at any size below 32px.

2 · Iterating A — the corner has to turn

A and A2 each hold half of it. A has the corner, A2 has the alternation. Four passes at putting them together.

Rendered and looked at. i is an F. ii is an E. iii has the right idea but the accent stones float free of the courses. iv closes the silhouette and is the first one that reads as bonded masonry rather than a chart — but it is a rectangle, and a rectangle is inert. The corner still isn't turning.

2b · Iterating again — make the corner turn

The missing idea: a quoin is seen on two faces at once. Put a fold down the middle, run the courses across it, and alternate which face each stone is longer on — which is what a real quoin does, and what makes it structural rather than decorative.

3 · Size test — the only test that matters

vii wins. v is a C. vi is a clean running bond and completely mute — it could belong to a bricklayer, a bakery or a database. vii is the only one where the corner turns: the fold at x=16 splits a front face from a returning face, each course is long on one side and short on the other, and that alternation is the actual structural job a quoin does. It survives 24px, and it does not read as a bar chart because the tonal step stops the eye reading the bars as a series.

4 · Refining the winner — the wordmark

The wordmark is drawn from the mark's own vocabulary: 3.2 stroke, 20 cap height, square terminals, no curve anywhere. Masonry has no curves in it, so a humanist or didone wordmark would have been a second unrelated idea sitting next to the first.

The first Q tail was a tick level with the bottom stroke. Rendered at 132px it merged into the stroke it was meant to break and the word read OUOIN. The tail is now a rake that starts inside the counter, crosses the corner and descends 2.6 below the baseline. Also opened I→N to 6, because a narrow post leaves optically tight sidebearings at a uniform 5.

5 · The six shipping variants

1 · primary lockup — logo/primary.svg

2 · stacked — logo/stacked.svg

3 · icon — logo/icon.svg

4a · monochrome, light ground

4b · monochrome, dark ground

5 · reversed on a brand field — 11.4:1

6 · favicon — redrawn to 3 courses

6 · Size tests — icon and favicon

icon — required to hold at 24

favicon — required to hold at 32

icon on ink — same file, no CSS

7 · Why the shipped mark is not currentColor

A theme logo travels as logo: 'data:image/svg+xml;utf8,…'. A data URL is a separate document: it cannot read the page's CSS, so currentColor resolves to black and the mark is invisible on three of the six palettes. The shipped files therefore carry two fixed tones — #8A6224 front face, #B8862F return — chosen by search rather than eye:

Both clear 3:1 against the lightest of the six palette backgrounds (#FCF9F7) and against the darkest (#0F1315) — worst case 3.09:1 — while holding 1.68:1 between themselves so the fold survives. The darker tone takes the front face, so the larger area is the more legible one on the light palettes that are the default.

Inside these HTML pages the header mark is inline SVG using currentColor, which does track all six palettes. Both are correct; they are solving different problems. See README.md.