Mookie's Mushrooms

The brief pulled two ways: close to the earth, real mushrooms, warm and friendly, and also careful and exact. An apothecary is where those meet, with glass jars, hand-set labels and specimen tags. The identity takes a warm serif with an italic turn, soft radii and pill buttons on a warm ground, set against mono labels like specimen tags, hairline rules and a deep navy anchor.

The original concept put the founder’s Pomeranian on the logo. I proposed moving the dog to the founder story, since on Amazon a dog on a supplement jar can read as a pet product. The signed-off direction did that.

When I built the site, I measured every pairing instead of trusting how the colors looked. Two values had to change. The guide’s grey for secondary text missed AA on its own ivory ground, and the palette had no gold that could be set as text on light. I darkened one and added the other, and both are written down as deliberate so a brand-fidelity check doesn’t revert them.

A component that appears on both a light section and a dark band gets two color definitions, scoped by surface. The site does this for form feedback, the focus ring and the capture button.

I audited the built site with an agent doing the measuring: every text and background pair, with translucent text composited over its real ground first. Its fix for the success message was one line: use teal. Applied everywhere, that fixes the hero and breaks the footer, where teal reads 3.51:1. The shipped fix is scoped by surface, with a comment in the stylesheet saying why.

I wireframed the page in greyscale first, on purpose, so the founder’s feedback landed on structure and message rather than on shades of navy. Each section has a stated purpose.

• Hero. Pass the five-second test: say what this is and who it’s for, and ask for the email before the visitor scrolls.
• Promise line. A short breath that states the philosophy and earns the scroll. It was marked as the first cut if the page ran long.
• Founder story. The trust anchor. Skeptical visitors join because of the person behind the brand.
• Commitments and trust bar. The reasons to believe, written as intent until review clears, placed right before the main ask.
• Waitlist band. The dedicated ask for anyone who scrolled past the hero, with nothing else around it.
• FAQ. Remove the last objections, and quietly set the expectation that the buy happens on Amazon.

Each block also notes what it becomes at launch, so the page can flip from waitlist to Amazon funnel without a rebuild.

The form. One required field. The founder and I settled on email plus an optional interest toggle, so the list could be segmented without adding friction. Validation runs inline on blur, clears as soon as the entry is fixed, and returns focus to the field. The button guards against double submits, the field uses email autocomplete, and since the audit every error is tied to its input with aria-invalid and aria-describedby. Success and error colors are scoped per surface, so both read on cream and on navy. On small phones the field and button stack. The product cards’ notify links preset the interest and jump focus to the email field.

One gap is still open. The hero and footer forms submit without an interest value, so only the main band segments the list. My read is that it’s a defect against the agreed segmentation, and the fix is a toggle in the hero.

The FAQ. Native details and summary with a shared name, so only one answer is open at a time, with no script. Older browsers fall back to independent items. It sits after the main ask, because its job is the last objection, and at launch the timing question becomes a where-to-buy question.

The nav. A sticky header with a skip link, anchor links instead of pages, and Join the Waitlist always visible. On tablets and phones the links fold away and the button stays. On small phones the full lockup gives way to the mark. At launch the button becomes Shop on Amazon.

I ran a UX/UI audit of the built site with an agent doing the measuring. It covered Nielsen’s heuristics, WCAG 2.1 and 2.2 AA, the path from hero to waitlist, and a responsive walk at phone, tablet and desktop widths. Every text and background pair was computed, with translucent text composited over its real ground, and every interaction was tested live.

It also confirmed what held: inline validation and focus return, the exclusive accordion, no horizontal overflow at any width, landmarks, a skip link and a single h1.

Four conversion ideas came out of the audit and were flagged for the founder rather than applied, because each changes signed-off copy or structure: a concrete founding-member incentive, the FAQ higher on the page, the interest toggle in the hero, and early third-party social proof.

One more turned up while I prepared this page. The FAQ has its own focus rule that still uses gold on paper, at 2.18:1, below the 3:1 bar. It’s flagged for the next pass.

The site has one page and two jobs: build the waitlist now, and send people to Amazon at launch. Every section can swap “Join the Waitlist” for “Shop on Amazon” without a rebuild.

I built it in code from the system: one spacing scale, two shared rhythm values that every section uses, pill-shaped controls and touch targets sized for thumbs. Motion has fallbacks for reduced motion and for browsers where animation stalls, and the page renders in full with JavaScript off.

The first identity doc set body copy in Inter. I moved it to Source Serif 4 in the build, which matched what the style guide already said. Leading rises with the measure: tight at display sizes, loosest in the longest column. The mono is always uppercase and tracked.

Hero copy replaced with stand-in text

The build follows Hero 1 closely.

On a phone, the mark stands in for the lockup.

On navy, type switches to the dark text set.

On paper, an open question turns gold text, at 4.77:1.

Every section takes its text set from its ground, down to the focus ring.

On the waitlist site a line can state an intention. On Amazon the same sentence sits next to a buy button and reads as a statement about a product for sale, so nothing claim-like goes on the Amazon layout until it’s cleared. The one headline that had to be shortened for a module is flagged for the client’s sign-off.

The main product image is the one place the brand doesn’t appear: product on white, nothing else. The brand lives in the supporting images and the Brand Story. In every Amazon template, anything per-product is a variable, so naming the products is an edit, not a redesign.

The shipped stylesheet is the audited, measured implementation, and it wins on values. The design-system skill holds what code can’t: forbidden pairings, what each component is for, and how the system changes between screen, label and Amazon. Agents load it before any design work. The identity doc and style guide hold the direction, the logo system and the voice, and they’re superseded on values where the divergence register says so.

The divergence register lists every place the shipped system departs from the identity doc, and why, so a brand-fidelity pass doesn’t undo an accessibility fix.