Otterbrook Studio: A Storefront for a Solo Digital-Product Maker

Portfolio Demo — Otterbrook Studio is a fictional business created by Upstate Web Co. for portfolio purposes. All names, product counts, customer counts, revenue figures, and quotes are illustrative. The storefront, license-key system, customer portal, and marketing toolkit shown are the same ones we ship to working clients.

The situation

The digital-product creator economy is a category that doesn't get talked about enough. A solo designer with a strong audience, a steady stream of templates or design systems or icon packs, and a real customer base can do $200-600K a year on a one-person operation with no inventory, no shipping, and no employees.

Otterbrook had reached that range — 47 live products, 4,200 customers, $250K annualized — on Gumroad. The platform had been the right call at five products and forty customers. At forty-seven and four thousand, it was the wrong call. Customers couldn't search. License keys lived in Stripe metadata that she had to dig out manually whenever someone emailed asking for theirs. Every product update meant either re-uploading to all 47 listings or just letting customers know via a newsletter they might not read. The platform's brand was on every checkout page; her brand was a logo at the top.

She didn't want to leave the audience-building work she'd been doing on Twitter. She wanted to own the rest.

What we built

This was an Online Store-tier project ($5K range), with a few extensions that mattered for digital-product businesses specifically.

License keys, not just receipts. Every purchase generates a unique key tied to the customer's email. The customer's portal page lists every product they've bought, every license they hold, every download URL, every version they've received. They can re-download anything any time. Support tickets that used to come through email now resolve themselves.

Versioned products + auto-update emails. Each product has a changelog. When she ships v2, the system identifies every customer who bought v1 and queues a personalized email with the new file + the changelog entry. She approves the send; the system handles the rest.

Hover-preview videos on every product card. The category lives or dies on the visual. We built a custom hover-video implementation that auto-plays a 6-second loop of the actual product (a Notion template scrolling, a Figma kit being applied) on hover. Average product-page time-on-page tripled.

What's running on retainer

Growth Partner ($400/mo): launch campaigns for new product releases, support-deflection content (the "how do I customize this template" guides that prevent tickets), seasonal sale email production, customer-portal feature additions as the catalog grows. UWC handles the platform; she ships templates.

How this build was validated (UWC pipeline run)

Otterbrook Studio is the fourth demo through the full UWC pipeline — and the first one where we deliberately changed the reference-picking heuristic to fix a problem the prior three surfaced.

The pattern we caught. Drystack, Foldspace, and Halverstone were all picked from the same aesthetic family — operator-blogger-restrained-type (Andrew Chen, Benedict Evans, AVC, Both Sides, Reforge). Anti-references told the generator what NOT to be (UWC + sister demos), but client references told it WHERE to land — and they all landed in one place: cream/paper backgrounds, editorial serif display, restrained palette, single-column reading. Three demos, three palettes that felt like sibling sites.

The fix. For Otterbrook (and every demo from here forward) we pick references by empirical earnings/traffic/ranking instead of taste, and we deliberately span aesthetic families. Eighteen client references were extracted, three each from six families: indie creator commerce (easlo, gumroad, basecamp shop), premium type foundry (klim.co.nz, pangrampangram, fontshare), viral commerce (mschf, liquiddeath, aesop), power-tool product (arc.net, linear, vercel), template marketplace (figma community, ui8, dribbble shop), and creator-as-product premium (mymind, raycast, threejsjourney). Plus four anti-references with an explicit family ban: "operator-blogger-restrained-type aesthetic is forbidden — no cream, no paper, no editorial serif, no single-column reading layout." Aesthetic ambition was pushed to immersive_award, look-and-feel to signature — the most distant band from where every prior demo had collapsed.

Intake → AI scoring. Persona scored Hot/Store tier ($6,500-9,500) — running business with $250K/yr validated revenue, 4,200 customers, clear pain (outgrew Gumroad), realistic timeline. Auto-converted at Store tier ($7,500) per the demo's intent.

Brand questionnaire (Rule 73 inputs). All 18 cross-family references picked by public earnings/traffic credentials: Easlo cleared $1M+/yr in Notion templates publicly; Klim is the highest-grossing solo type designer worldwide ($1M+/yr publicly); MSCHF raised $15M and ships $1M+ drops; ThreeJS Journey by Bruno Simon cleared $1M+ publicly; Liquid Death is at $1B+ valuation; Figma Community has ~50M MAUs. Plus four anti-references including the three sister demos.

Reference signature extraction. 20 of 22 succeeded (Mschf + Liquid Death transient bot blocks). Extracted accents alone showed the cross-family variance landing: #FB3A4D, #EA64D9, #0070F3, #8B5CF6, #F00007, #FFE926, #c4ff00, #4a6b4f — six different hue families across the set.

3 design-direction candidates generated, all genuinely cross-family:

• A. Ultraviolet Commerce — Neue Haas Grotesk Display + Inter Tight · #0a0a0a + #8b5cf6 ultraviolet · Marketplace Grid with Featured Hero · Motion E Product Kinetics. Family: power-tool (Arc / Linear).
• B. Hot Coral Signal — ABC Diatype + ABC Diatype Mono · #ffffff + #ff6b6b coral · Product Specimen Grid · Motion F Kinetic Type. Family: premium type foundry (Klim / Pangram).
• C. Sulphur Electric — GT Walsheim + Söhne · #121212 charcoal + #ffed4e sulphur yellow · Full-Bleed Product Theater · Motion G Immersive Narrative. Anti: "This site is NOT a text-heavy consultant portfolio with restrained type and three-pillar layouts — it is a full-theater product experience where hover-preview videos and saturated yellow accents dominate every surface." Family: creator-as-product premium (Raycast / mymind / Liquid Death theatricality).

Direction C picked. Reasons: (a) #ffed4e sulphur on #121212 charcoal is maximum thumbnail contrast yet zero overlap with prior demos (UWC rust+cream, Drystack slate-cyan, Foldspace lime-electric, Halverstone ink+moss); (b) GT Walsheim is bold geometric not serif — the family ban on operator-blogger-restrained held; (c) Full-Bleed Product Theater layout matches the catalog-of-47-SKUs structure; (d) the anti-commitment moves the build deliberately away from where every other UWC demo has been.

For the demo build, GT Walsheim + Söhne + PP Mori (all licensed) substituted with Plus Jakarta Sans + Manrope + Space Grotesk (all free Google Fonts). A real production build would license the picked typefaces.

Build + visual-diff scoring. Deployed at phase-a-build.otterbrook-studio.pages.dev. Scored by Ghost User against the picked direction. Verdict: 9/10 pass. Ghost User cited "specimen hierarchy identical to Klim foundry pages, monogram theatre identical to Pangrampangram product cards" — the live build encoded the cross-family references that drove the generator, not the operator-blogger family the prior three demos collapsed into.

Toolset breadth showcased on this demo: Stripe-backed checkout with per-purchase license keys, customer portal with full purchase history + license-key UI + version-update activity log, product changelog with cross-feed from every product, AI fit-screener (chat scoped to catalog — refuses to overpromise outcomes, redirects no-fits to alternatives or to founder email), hover-preview frames on every product card, marketing dashboard mention with role-scoped editor workspace (editor scoped to product copy + changelog drafting + social clip queueing only), newsletter with welcome-drip preview + monthly product roundup.

This is the fourth demo where the same pipeline produced a visually + structurally distinct site for a distinct persona — and the first where we corrected the reference-family monoculture problem. The toolmaker thesis is defensible because the pipeline really runs, and because the pipeline can self-correct when its inputs collapse into a single family.

Post-governance sharpening (2026-04-28)

Ran a post-build governance pass. The synthesis flagged the hero copy as missing the founder-trust anchor — "Premium templates for indie operators" was benefit-statement SaaS where the picked direction (Founder-Studio, Sulphur Accent) needed creator-trust framing. Rewrote the hero to "I'm the operator. These are my tools." with body copy that names the studio's three-year history on Notion + Figma + the founder's first-person relationship to each product line (Founder Kit = the workspace I use, brand templates = systems clients ask for, roadmap = what I needed next). The studio-of-one positioning is now visible above the fold. Re-deployed; same URL.