web: a two-colour brand mark that survives favicon and PWA icon sizes

Component plan: build this from the components named in docs/designs/822-mui-revamp.md. The rule is "reused, never rebuilt" — composing MUI primitives into a screen wrapper is expected; reimplementing behaviour a shared component already has is not. Say in the PR which row of that table covers this screen.

Part of #674. Inherited from #656 (closed 2026-09-13), question 3 of 3.

Today's mark is a generic single-stroke egg outline that will not survive favicon and PWA icon
sizes. Wants a two-colour mark that holds up small.

Deliverables: the mark itself, the favicon set, and the PWA manifest icons. vite-plugin-pwa
generates the precache manifest, so icon changes touch web/public/ and the manifest together.

Verify at 16px and 32px, not only at display size — the whole point is small.

docs(designs): MUI revamp design doc, component map, layout system, IA (

feat(web): whole-app MUI baseline, theme policy guard and the #740 ph…

Five two-colour marks, and what each one does at 16px

Design gate for this slice. Nothing is built yet — pick one (or reject the set) and I build the
mark, the favicon set and the PWA manifest icons from it.

All five are drawn on the existing favicon's 32-unit grid, so 16px and 32px land on whole
pixels, and all five use exactly two flat colours: the --brand field #4a154b and the
--on-brand/lavender mark #f9f0ff. No gradients, no partial alpha. Today's mark has a 55%-alpha
highlight ellipse, which is the first thing to die at 16px.

Each also has a one-colour sidebar form. The nav rail is lavender paper with accent text
(#864), not a brand slab, so the mark there is --stat-accent on the rail and its counters are
the rail showing through. That is why the subtractive candidates (Hour, Cee, Yolk) carry over
cleanly and the two-piece ones do not.

The candidates

Hour — a pie slice cut from the egg, apex at its centre. Cluckwork is clockwork, and a wedge is
the boldest cut a 16px grid holds. My first version used a tapered clock hand; at 16px it closed
up into a nick and the hand did not read at all, so it became a full slice. It survives 16px now,
but the first reading at that size is "bitten disc", not "clock". Best concept, second-best
execution.

Cee — a thick C whose outer edge stays an egg. The most legible of the five at 16px and the
most distinctive in a tab strip, and it carries the initial. The cost is real: at 16px it reads as
a C, and the egg is gone. If you want the mark to say Cluckwork rather than eggs, this is it.

Ledger — an egg over a rule, speaking #864's ruled-ledger language. I am rejecting this one on
the evidence, and it is worth saying why: the rule is the first element to go. In the real tab
strip above it is a pale smudge, so the mark degrades at 16px into a plain egg outline — which is
exactly what this issue exists to replace. It looks good at 192px, which is the trap.

Yolk — a solid egg with the yolk punched out, set low and left. I moved it off-centre after the
first pass, where a concentric counter read as a zero rather than a yolk. Nothing in it is under
2px at 16px, it is the only candidate that still reads as an egg at 16px, and it has the
cleanest maskable crop and the clearest sidebar glyph.

Crack — one egg, opened. A straight full-width break survives 16px where two separate eggs merge
into a blob (I tried the two-egg "batch" idea first; at 16px it was mush). Strong at 192 and at the
60px home-screen size. Weak at the sidebar's 20px, where the lower piece nearly disappears and it
reads as a dome.

Recommendation

Yolk, with Cee as the runner-up.

Yolk is the only one that satisfies the issue's actual test — survives favicon and PWA icon sizes —
without giving up the motif. It is one silhouette and one large counter, which is the shape class
that degrades best; it is the strongest of the five as a single-colour sidebar glyph; and the
aubergine tile gives it its own field, so it holds on a light and a dark browser chrome alike.

Take Cee instead if you would rather the mark read as the product's initial than as an egg. It
beats Yolk on raw legibility at 16px and loses on motif. Those are the two ends of the trade and I
do not think the other three beat either of them.

Ready to build whichever you pick. #835 is being built in the same PR meanwhile.

Decision: the five candidates are rejected; the current mark stays

Owner's call. None of the five new marks posted above (Hour, Cee, Ledger, Yolk, Crack) is adopted.

The current mark is kept and only touched up so it survives favicon and PWA icon sizes, under
four constraints:

the same single egg outline shape and proportions;
a slightly thicker stroke, snapped to the 32-unit grid so 16px and 32px land on whole pixels;
the 55%-alpha highlight replaced by a solid highlight in one of the two flat colours;
still two flat colours, no gradients and no partial alpha.

It must read as the same logo at a glance. The touch-up is in the next comment, awaiting approval;
nothing is built until it is approved.

The touched-up mark, against the current one

Nothing is built yet. This is the touch-up for approval; the favicon set, the manifest icons and the
sidebar mark follow once you say go.

What changed, and only this.

Same egg, same proportions. The curve is taken from web/public/favicon.svg's own path (the
horizontal control point at 0.605r, the shoulder 0.64r above the bottom circle's centre), so this is
that egg re-cut on the grid, not a new one that resembles it.
Snapped to even units, so 16px (half a pixel per unit) and 32px both land on whole pixels: sides
8 to 24, top 6, bottom 26. The current egg is 7.4 to 24.6, top 5, bottom 26. That is the
entire silhouette change, and it is what makes the 16px edge stop being a blur.
The 55%-alpha white highlight becomes solid #4a154b.
Thicker outline in the rail. Today the sidebar uses lucide's egg at stroke 1.5 in a 24-unit box,
which is 2 units on this grid; the touched-up outline is 3.
Two flat colours throughout, #4a154b and #f9f0ff. No gradients, no partial alpha, no third colour.

One departure, shown rather than assumed

The size sheets carry three rows, not two. Solid in place is your instruction taken literally: the
same ellipse, same position, same size, just solid. At 192px it reads as an eye, which changes the
mark's character more than the snapping does. Touched up is that same shine tilted 28 degrees and moved
off the egg's axis, which reads as a specular highlight instead. I tried six treatments before picking it;
a crescent hugging the rim reads best at display size and disappears entirely at 16px, which is the one
size this issue exists for.

Take Solid in place if you would rather I change nothing but the opacity, and I will build that instead.

One thing I could not snap

The tilted shine's own edges do not land on whole pixels, because a rotated shape cannot. The silhouette
is fully snapped, and that is the edge that defines the mark. Say the word if you want the shine axis-aligned
instead; it costs a little of the shine read.

Also worth knowing

Today the sidebar and the favicon are two different eggs (lucide's, and the favicon's own, which have
different proportions). The touch-up puts both renditions on one shape. The rail rendition stays an
outline with no highlight, exactly as today, because that rail is lavender paper with accent text
(#864) and the mark there is one colour.

Third option: the same egg, no highlight

A solid highlight had to be the purple field colour, and at full opacity that reads as a dark eye or a
scratch. So here is the mark with nothing inside the egg at all.

The snapped silhouette only: sides 8 to 24, top 6, bottom 26, all even, so 16px and 32px
land on whole pixels. A plain #f9f0ff egg on the #4a154b field. Two flat colours, no gradients, no
partial alpha. The sidebar rail keeps its outline form, unchanged from today.

Two things I can see in these and should say rather than let you find:

The snapping is now doing all of the work. Removing the highlight costs nothing at 16px, where it
was invisible anyway. What changes at 16px is the edge, which stops fringing. Compare the two 16 AT 10X panels.
The egg is slightly narrower than today's (16 units wide against 17.2), because snapping the sides
to even units is what makes the edge land on whole pixels. Height is unchanged at 20 against 21.

Nothing is built. Say which of the three you want and I build it.

Closed as not planned (owner decision, 2026-09-24). The owner keeps the current logo unchanged.

The five new marks were rejected (see the design-gate comment above).
A touch-up of the current mark was tried: the highlight made solid read as an eye, and with the highlight removed the logo looked the same as today, so it was not worth a change.

PR #948 ships only #835.

Navigation Menu

Repository navigation

web: a two-colour brand mark that survives favicon and PWA icon sizes #836