Index

Lab sheet · identity

Three concepts, three passes, six variants.

The concepts and the rejected passes are kept on this sheet on purpose. A mark that arrives fully formed on the first attempt has usually not been looked at, and the reasoning is worth more to whoever ports this than the finished file is.

Stage one

Three concepts, drawn properly before choosing.

Concept A: a lead line with fathom ticks and a lead weight.

A · The Sounding

The marked lead line, ticks alternating long and short. Honest to the name and dead at small sizes: it reads as a ruler or a thermometer before it reads as depth, and the lead vanishes below about 32px.

Rejected — but the tick rhythm became favFathomSounding

Concept B: a double-ruled square with corner ticks, a graticule cross and F and R monogram letters.

B · The Cartouche

The neatline as a monogram — double rule, corner ticks, graticule cross, letters in the quadrants. Handsome at 96px, mud at 24px. Four elements inside a frame is three too many.

Rejected — but the neatline became favFathomPlate

Concept C: nested contour rings with a solid summit, broken where a vertical rule crosses them.

C · Landfall

The two words drawn as one object. FATHOM is the contour interval closing on a summit; RULE is the straightedge. The contours break where the rule crosses them, which is what a cartographer actually draws.

Chosen — three further passes below

Stage two

Landfall, three passes.

Pass one: four thin nested contour rings with a vertical bar laid over the top.

Pass 1

Four rings at 1.4 stroke. Two failures, both visible immediately: the rings collapse into a grey smear, and the rule sits on the drawing rather than belonging to it.

Pass two: three contour rings breaking across a wide vertical channel.

Pass 2

Down to three rings, and the move that made it: the contours are masked out of a channel, so they break at the rule. Still wrong — the channel is 8 units wide, the middle ring loses its whole right lobe, and a hole opens up.

Pass three, final: three contours, channel narrowed, innermost ring filled.

Pass 3 — final

Channel narrowed 8 → 6.4 so the middle ring keeps a lobe. Strokes up to 2.2 / 1.9. Innermost ring filled rather than stroked, which is what gives it a core solid enough to survive 24px.

Shipped

Stage three

The size test, which is the only test that matters.

Rendered at actual size — nothing here is scaled up for the screenshot. The brief asks for legibility at 24px for the mark and 32px for the favicon; 16px is included because that is where a browser tab actually draws it.

Icon mark

Icon mark at 96 pixels.96 Icon mark at 48 pixels.48 Icon mark at 32 pixels.32 Icon mark at 24 pixels.24 Icon mark at 16 pixels.16

Holds to 24, where you still read three intervals and a rule. At 16 the middle contour merges with the outer — which is exactly why the favicon is a separate drawing rather than this file made smaller.

Favicon

Favicon at 96 pixels.96 Favicon at 48 pixels.48 Favicon at 32 pixels.32 Favicon at 16 pixels.16

One ring, a bigger solid core, stroke 3, everything pushed to the edges and the mask channel dropped. Legible at 32 and still parseable at 16 — the tab for these four pages is drawing it now, top of the window.

Stage four

The suite.

Primary lockup: the mark beside the words FATHOM AND RULE.

1 · Primary lockup

Mark plus wordmark, horizontal. This is the file that ships in THEME.json as the logo data URL. Self-contained gradient, and a font stack that names Bodoni Moda first but degrades to Didot / Bodoni MT / Georgia when a data URL cannot reach the page's fonts.

Stacked lockup: the mark above a two-line wordmark separated by a neatline.

2 · Stacked lockup

Narrow chrome — mobile header, avatar, footer column. Split on the ampersand so the two lines are close in length, with the neatline between mark and words rather than a generic divider.

The icon mark alone.

3 · Icon mark alone

The mark with no words. Tested at 24px above, which it passes. Fills its 40-unit box edge to edge so it never needs a wrapper to look optically centred.

FATHOM & RULE

4 · Monochrome

One ink, via currentColor. Flip the mode switch and watch it follow — that is the property, and it is also exactly why this variant cannot be the one in the theme file. A data URL renders outside the cascade, where currentColor resolves to black and dies on a dark palette.

Reversed lockup in paper cream on a brand-coloured field.

5 · Reversed

Knocked out in paper cream, for the brand-coloured CTA band in light mode and the page itself in dark. Fixed ink, not currentColor — a reversed mark that follows its container's text colour is not reversed, it is broken.

The favicon drawing at 96 pixels.

6 · Favicon

Redrawn on a 32 grid. Middle contour dropped, mask channel dropped, stroke up to 3, geometry to the edges. A simplification, not a reduction — the silhouette that identifies the mark survives, the detail that would not does not.

The awkward question

A data URL cannot read your CSS.

A theme logo ships as logo: 'data:image/svg+xml;utf8,…', which is rendered outside the document — no custom properties, no currentColor, no palette. So the shipped mark has to carry its own colour and be legible against six backgrounds and six surfaces in two modes. The approach here is a self-sufficient two-stop gradient, with both stops chosen to sit in the narrow luminance band that clears 3:1 against the lightest paper and the darkest ink in the whole theme.

Mark on the current palette's background. on background
Mark on the current palette's surface. on paper
Reversed mark on the brand colour. reversed on brand

Cycle P1 / P2 / P3 and the light–dark toggle bottom right. The gradient does not change; the ground under it changes six times, and the mark holds on all of them. Measured ratios, worst case across the six: 3.44:1 for the blue stop and 3.82:1 for the brass — both above the 3:1 bar for graphical objects, with the margin sitting in the brass.