Show the RD monogram beside the wordmark in the storefront header #76

Closed
opened 2026-08-20 11:01:30 -05:00 by bermudalamb · 0 comments
Owner

Filed retroactively. The work is already implemented on a branch — it was started from a direct request in chat without an issue behind it, which is exactly the gap that prompted the "every branch has an issue" rule. Recording it properly rather than merging something the tracker has never heard of.

Problem

#70 added the RD monogram as the favicon and Apple touch icon, but the storefront header still shows the wordmark on its own. The mark appears in the browser tab and on a home screen, and nowhere in the application itself.

Change

Put the monogram to the left of "Redefined Designs" in the site header.

Rendered as an inline SVG component (src/components/BrandMark.tsx) rather than <img src="/favicon.svg">, for two reasons:

  • It has to follow the app's own theme switch. The tile is drawn in currentColor, so it picks up the antd text token and inverts with the in-app toggle. The favicon file inverts on prefers-color-scheme, which tracks the operating system — it would disagree with the app whenever someone toggles the theme themselves.
  • The letters are knocked out with a mask rather than painted in the header's background colour, so the mark sits correctly on any surface instead of carrying a backdrop that only matches this one header.

The mask id is generated per instance, since two marks on a page would otherwise share an id and the second would reference the first. It is marked aria-hidden — the wordmark beside it already says the name, so announcing it twice is noise.

Scope

Storefront header only. The Admin (Admin) and Cart (Your Cart) headers show page names rather than the brand name and were deliberately left alone; extending the mark to them is a separate decision, not an oversight.

Verified

Screenshotted in both light and dark themes rather than reasoned about — the tile inverts correctly and the knockout shows the header background through the letters. Build and lint clean.

Filed retroactively. The work is already implemented on a branch — it was started from a direct request in chat without an issue behind it, which is exactly the gap that prompted the "every branch has an issue" rule. Recording it properly rather than merging something the tracker has never heard of. ## Problem #70 added the RD monogram as the favicon and Apple touch icon, but the storefront header still shows the wordmark on its own. The mark appears in the browser tab and on a home screen, and nowhere in the application itself. ## Change Put the monogram to the left of "Redefined Designs" in the site header. Rendered as an inline SVG component (`src/components/BrandMark.tsx`) rather than `<img src="/favicon.svg">`, for two reasons: - **It has to follow the app's own theme switch.** The tile is drawn in `currentColor`, so it picks up the antd text token and inverts with the in-app toggle. The favicon file inverts on `prefers-color-scheme`, which tracks the operating system — it would disagree with the app whenever someone toggles the theme themselves. - **The letters are knocked out with a mask** rather than painted in the header's background colour, so the mark sits correctly on any surface instead of carrying a backdrop that only matches this one header. The mask id is generated per instance, since two marks on a page would otherwise share an id and the second would reference the first. It is marked `aria-hidden` — the wordmark beside it already says the name, so announcing it twice is noise. ## Scope Storefront header only. The **Admin** (`Admin`) and **Cart** (`Your Cart`) headers show page names rather than the brand name and were deliberately left alone; extending the mark to them is a separate decision, not an oversight. ## Verified Screenshotted in both light and dark themes rather than reasoned about — the tile inverts correctly and the knockout shows the header background through the letters. Build and lint clean.
bermudalamb added this to the Code Quality and Hardening project 2026-08-20 15:21:15 -05:00
bermudalamb self-assigned this 2026-08-20 15:21:22 -05:00
bermudalamb moved this to Ready for Release in Code Quality and Hardening on 2026-08-20 15:21:27 -05:00
bermudalamb moved this to Released in Code Quality and Hardening on 2026-08-21 12:12:09 -05:00
Sign in to join this conversation.
No labels
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: bermudalamb/redefined-designs#76