Identity sheet

Three concepts, four iterations, one mark

Everything here is the file that ships — this page inlines the SVGs from logo/ rather than copying them, so it cannot drift. The palette switcher at the bottom right applies to this page too: the mark has to survive all six.

Stage one — three concepts

Rendered side by side at 120px, 40px and 24px, because a mark that only works large is a poster, not an identity.

A — VesicaTwo circles intersecting: a biconvex lens and an eye are the same shape. Elegant, and the most generic — half the opticians in Britain draw an eye.

B — DialThe phoropter's lens carousel. The most ownable of the three; nobody outside optics has this shape. Turns to mush below about 32px.

C — Tumbling EThe Snellen optotype on its 5×5 grid, three sizes, rotated as the test rotates them. Best small-size performance, but reads as an E plus noise.

Stage two — four iterations of the winner

B had the best idea and the worst legibility, so the work was making the carousel survive small. Iteration 4 is kept here because the reason it failed is more useful than the fact that it did.

1 — dial + lensB's carousel with A's vesica in the middle aperture. Better idea, same small-size problem: eight apertures become texture.

2 — four aperturesApertures cut to four, on the diagonals. Survives 24px, but four holes in a ring reads as a button, not an instrument.

3 — the axis scaleApertures dropped for the thing a lens cell actually carries: the 0–180° cylinder axis scale. This is the one.

4 — datum across the lensRejected. A heavy axis tick drawn through the lens reads as a scratch on the glass, not a reading on the dial.

The mark

Lens in an axis dial ELLARD & ROE — the mark. "Lens in an axis dial." Iteration 5, from concept B (phoropter carousel) crossed with concept A (vesica lens), after iteration 4 was rejected: a heavy axis tick drawn across the lens read as a scratch, not a reading.

Ring        r = 27 at (32,32), stroke 2.6
  Lens        true vesica, half-width 10 -> generating radius
              R = 2*10/sqrt(3) = 11.547, so width:height = sqrt(3):1
  Axis scale  a cylinder axis runs 0-180 only, so the scale occupies
              the UPPER half alone. Minor ticks every 30 deg
              (r 21.5 -> 26), major at 0/90/180 (r 20 -> 26).
  Datum       the 150 deg tick is heavier and sits in the outer band
              only (r 22 -> 26) so it never touches the lens: a real
              cylinder axis reading, and the one asymmetry that
              gives the mark a direction to be read in.

ConstructionEvery coordinate is derived; nothing was nudged by eye.

Stage three — the six variants

1 · Primary lockupMark + wordmark, horizontal.

2 · Stacked lockupNarrow chrome and mobile.

3 · Icon aloneMust read at 24px — tested below.

4 · Monochrome, light groundOne ink.

5 · Monochrome, dark groundThe same single ink, reversed out.

6 · Reversed on brand The field ships with the asset so the clear space — one ring radius, 27 units — cannot be cropped away by whoever places it.

Size tests

The icon at 40, 24 and 16px, then the favicon — which is a redraw, not a reduction. At 32px the axis scale is noise and a 2.6-unit ring stroke falls below one device pixel, so the favicon drops the ticks, thickens the ring to 5 and widens the lens.

icon 40

icon 24

icon 16

favicon 32

favicon 16

in a tab

The shipped variant, and why it is that colour

A theme logo travels as logo: 'data:image/svg+xml;utf8,…' inside an <img>. It cannot read page CSS, so currentColor resolves to black and a mark tuned for one palette disappears on another. #5C7AA5 was solved for rather than picked: it is the slate blue that maximises the worst-case contrast across all six palette backgrounds. Every swatch below is a real palette background from tokens.css, with the shipped file on it.

Cobalt light · 4.39

Duochrome light · 4.27

Tortoise light · 4.32

Cobalt dark · 4.38

Duochrome dark · 4.27

Tortoise dark · 4.32

Those six hex values are the only raw colours on this page, and they are here precisely because the point is to show the mark against literal palette backgrounds rather than against tokens that would move with the switcher.

The wordmark is drawn, not set

Same reason: an <img> pointing at a data URL cannot reach the page's webfonts, so a <text> element would fall back to whatever generic sans the browser has. Eleven glyphs are built from explicit centrelines on one grid — cap height 48, monolinear stroke 7, bowl radii fixed by their own depth so they land exactly on the glyph box edge.

The ampersand is the mark's own vesica. A lens standing in for and ties the wordmark to the symbol, and a geometric ampersand drawn to this grid would have been the weakest glyph in the set.