Minstrel gets a mark — favicon, header lockup, Android adaptive icon #117

2026-08-03T20:52:17-04:00

bvandeusen commented

2026-08-03 20:52:17 -04:00

Minstrel had no mark. web/static/favicon.png was a 1×1 pixel placeholder, so every tab showed the browser's blank-page glyph, and Android shipped legacy bitmaps only — meaning modern launchers letterboxed a square instead of masking it to the device's icon shape.

The mark

A Didone M whose right leg is an eighth note: stem, flag and notehead in the accent as one object, the letter in the text colour. Traced from the operator's reference at 99.74% IoU (potrace, 26 + 22 path segments), so the geometry is theirs rather than an approximation of it.

Subject-neutral on purpose. "Minstrel" pulls hard toward a lute, a bard, a troubadour — any of which would tell a new user this is a player for renaissance-faire music rather than for everything they own. A geometric letter plus universal notation says music without saying which music. The family look arrives through palette and drawing style instead of through the subject.

That principle is now recorded in the house design system, because the rule as written banned a vocabulary ("never fantasy iconography") where what was actually wanted was a test ("would a new user assume the product is for something narrower than it is?"). Those come apart badly: heraldry is explicitly sanctioned by the old wording, and a crest is one of the strongest medieval-fantasy signals available. Two drafts of this mark passed the ban and failed the intent before the test was written down.

Why each surface is treated differently

Parchment on white is invisible — the operator caught this on a draft. The letter therefore has to flip with its background, while the accent note stays constant because teal holds against either:

Surface	Treatment	Why
Header	`MinstrelMark.svelte`, inline, `currentColor`	Takes the surrounding text colour, so one asset covers both palettes
Browser tab	`brand/favicon.svg`, literal colours + `prefers-color-scheme`	A favicon sits on chrome we don't control and has no cascade to inherit from
Tab fallback, iOS, Android	plated on obsidian	A PNG can't respond to colour scheme, and iOS composites onto white regardless

The component is inlined rather than <img src> because an <img> cannot inherit currentColor, and inheriting it is the entire mechanism.

Icon ordering in app.html is load-bearing and commented: browsers take the last icon they understand, so the PNG must come first or it wins over the SVG in Chrome and the scheme swap is lost.

Plate colour chosen by measurement, not taste

Obsidian #14171A, not the raised-surface iron. The accent note only clears the 3:1 non-text contrast threshold against the darker value — 3.04:1 vs iron's 2.70:1.

Worth recording that the intuitive fix was wrong: lightening the plate makes this worse (slate measures 2.21:1), because the note is a dark colour and lifting the plate closes the gap. The house style now carries a measured-not-eyeballed clause for exactly this.

Construction

Traced as a full ink silhouette with the note painted over it, rather than as two separate shapes. Separate shapes needed either a 2px seam where letter and note touch, or an anti-aliasing fringe — 2,430 misclassified pixels — around the note. Painting over avoids both, matches how it'd be built by hand, and yields a monochrome version for free: the base layer alone is the whole mark in one colour, which is what mipmap-anydpi-v26's <monochrome> slot uses for themed icons.

Android's foreground sits at 61% of the 108dp canvas so it stays inside the 66dp safe zone and no launcher mask can clip it.

Verify

CI green on both lanes. mergeDebugResources and processDebugResources both ran, so the new adaptive-icon XML and colors.xml are aapt-validated. Rendered and checked at 16/20/32/64/180 on obsidian, white, parchment and plated — one optical size holds across the whole range.

What CI cannot reach:

The launcher. Masking, the safe-zone crop and the themed-icon monochrome slot only show up on a real device.
The tab strip. Whether the prefers-color-scheme swap actually fires in your browser, and whether the mark reads at 16px in a crowded tab bar.

🤖 Generated with Claude Code

https://claude.ai/code/session_01N6vZoJ4Se5YyaqdtGVkap5

Minstrel had no mark. `web/static/favicon.png` was a **1×1 pixel placeholder**, so every tab showed the browser's blank-page glyph, and Android shipped legacy bitmaps only — meaning modern launchers letterboxed a square instead of masking it to the device's icon shape. ## The mark A **Didone M whose right leg is an eighth note**: stem, flag and notehead in the accent as one object, the letter in the text colour. Traced from the operator's reference at **99.74% IoU** (potrace, 26 + 22 path segments), so the geometry is theirs rather than an approximation of it. **Subject-neutral on purpose.** "Minstrel" pulls hard toward a lute, a bard, a troubadour — any of which would tell a new user this is a player for renaissance-faire music rather than for everything they own. A geometric letter plus universal notation says *music* without saying *which* music. The family look arrives through palette and drawing style instead of through the subject. That principle is now recorded in the house design system, because the rule as written banned a *vocabulary* ("never fantasy iconography") where what was actually wanted was a *test* ("would a new user assume the product is for something narrower than it is?"). Those come apart badly: heraldry is explicitly sanctioned by the old wording, and a crest is one of the strongest medieval-fantasy signals available. Two drafts of this mark passed the ban and failed the intent before the test was written down. ## Why each surface is treated differently Parchment on white is invisible — the operator caught this on a draft. The letter therefore has to flip with its background, while the accent note stays constant because teal holds against either: | Surface | Treatment | Why | |---|---|---| | Header | `MinstrelMark.svelte`, inline, `currentColor` | Takes the surrounding text colour, so one asset covers both palettes | | Browser tab | `brand/favicon.svg`, literal colours + `prefers-color-scheme` | A favicon sits on chrome we don't control and has no cascade to inherit from | | Tab fallback, iOS, Android | **plated** on obsidian | A PNG can't respond to colour scheme, and iOS composites onto white regardless | The component is **inlined rather than `<img src>`** because an `<img>` cannot inherit `currentColor`, and inheriting it is the entire mechanism. Icon ordering in `app.html` is load-bearing and commented: browsers take the *last* icon they understand, so the PNG must come **first** or it wins over the SVG in Chrome and the scheme swap is lost. ## Plate colour chosen by measurement, not taste Obsidian `#14171A`, not the raised-surface iron. The accent note only clears the **3:1** non-text contrast threshold against the darker value — 3.04:1 vs iron's 2.70:1. Worth recording that the intuitive fix was wrong: *lightening* the plate makes this worse (slate measures 2.21:1), because the note is a dark colour and lifting the plate closes the gap. The house style now carries a measured-not-eyeballed clause for exactly this. ## Construction Traced as a full ink silhouette with the note painted **over** it, rather than as two separate shapes. Separate shapes needed either a 2px seam where letter and note touch, or an anti-aliasing fringe — 2,430 misclassified pixels — around the note. Painting over avoids both, matches how it'd be built by hand, and yields a **monochrome version for free**: the base layer alone is the whole mark in one colour, which is what `mipmap-anydpi-v26`'s `<monochrome>` slot uses for themed icons. Android's foreground sits at 61% of the 108dp canvas so it stays inside the 66dp safe zone and no launcher mask can clip it. ## Verify CI green on both lanes. `mergeDebugResources` and `processDebugResources` both ran, so the new adaptive-icon XML and `colors.xml` are aapt-validated. Rendered and checked at 16/20/32/64/180 on obsidian, white, parchment and plated — one optical size holds across the whole range. What CI **cannot** reach: - **The launcher.** Masking, the safe-zone crop and the themed-icon monochrome slot only show up on a real device. - **The tab strip.** Whether the `prefers-color-scheme` swap actually fires in your browser, and whether the mark reads at 16px in a crowded tab bar. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01N6vZoJ4Se5YyaqdtGVkap5

bvandeusen added 1 commit 2026-08-03 20:52:17 -04:00

feat(brand): Minstrel mark — favicon, header lockup, Android adaptive icon

test-web / test (push) Successful in 45s

Details

android / Build + lint + test (push) Successful in 4m14s

Details

e1e591b520

A Didone M whose right leg is an eighth note: stem, flag and notehead in the
accent, the letter in parchment. Traced from the operator's reference at
99.74% IoU (potrace, 26 + 22 segments), so the geometry is theirs, not an
approximation of it.

Subject-neutral on purpose. "Minstrel" pulls toward a lute or a bard, which
would tell a new user this is a renaissance-faire player rather than one for
all music. A geometric letter plus universal notation says "music" without
saying which music. The family look arrives through palette and drawing
style instead of through the subject — see the design-system discussion.

Starting state: web/static/favicon.png was a 1x1 PIXEL placeholder, so there
was effectively no favicon at all; Android had legacy bitmaps only, so modern
launchers letterboxed the square instead of masking it.

## The colour problem, and why each surface differs

Parchment on white is invisible — the operator caught this. The M therefore
has to flip with its background, while the accent note holds in both:

  - mark.svg / MinstrelMark.svelte use currentColor, so the letter takes the
    surrounding text colour and one asset covers both palettes.
  - favicon.svg bakes colours with a prefers-color-scheme swap, because a
    favicon sits on browser chrome and has no cascade to inherit from.
  - PNG fallback, apple-touch-icon and Android are PLATED. A PNG can't
    respond to scheme and iOS composites onto white regardless.

MinstrelMark is inlined rather than <img src>, because an <img> cannot
inherit currentColor and inheriting it is the entire point.

## Plate colour chosen by measurement

Obsidian (#14171A), not the raised-surface iron. The accent note only clears
the 3:1 non-text contrast threshold against the darker value: 3.04:1 vs iron's
2.70:1. My own earlier suggestion — lighten the plate — is WRONG and the
numbers say so: slate scores 2.21:1, worse, because the note is a dark colour
and lifting the plate closes the gap. Recorded in colors.xml so the reasoning
sits with the value.

## Construction

Traced as a full ink silhouette with the note painted OVER it, rather than as
two separate shapes. Separate shapes needed either a 2px seam where letter and
note touch, or an anti-aliasing fringe (2,430 misclassified pixels) around the
note. Painting over avoids both and yields a monochrome version for free — the
base layer alone is the whole mark in one colour, which is what
mipmap-anydpi-v26's <monochrome> uses for themed icons.

Android foreground sits at 61% of the 108dp canvas so it stays inside the
66dp safe zone and no launcher mask can clip it.

Paths are duplicated between the component and the two static SVGs, since one
needs currentColor and the others need literals. A comment in each names the
others.

Verified by render at 16/20/32/64/180 on obsidian, white, parchment and
plated; one optical size holds across the whole range.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

bvandeusen merged commit fa7ea41ccf into main

2026-08-03 20:52:27 -04:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: bvandeusen/minstrel#117