PR
#015 April 15, 2026 · 5 min read

Rebranding in 30 Minutes: Design System as Deferral Buffer

Mid-testing, my product changed names. Deployed the same hour. No scope delay. Here's the design-system discipline that made 30 minutes possible.

stella-protocol oda design-system house-of-riddle

The short version

House of Riddle rebranded from 'Riddle Room' mid-testing. Total work: 30 minutes, mostly build and deploy time. The reason: ODA (the design satellite in Stella Protocol) forced me to centralize brand references on day one — one doc file, one runtime copy file, design tokens by reference. Upfront discipline is a deferral buffer for the changes that always come.

Mid-testing, my product changed names. Deployed the same hour. No scope delay.

The product is House of Riddle — a community riddle game platform I’m building with Next.js 16 + Supabase + shadcn/ui. Before the rebrand, it was called “Riddle Room.” Two weeks into testing, I realized the name was flat. “Room” didn’t capture the community and gamified vibe that was actually there — admin-built towers, community-generated riddles, leaderboards, 14 achievement badges. “Room” made the product sound like one static space, when what was built is a house with many rooms inside.

The rebrand decision was made at midday. By that evening, the new name was deployed. 30 minutes of technical work. No scope slipped.

What you'll learn
01
Why most mid-project rebrands take a week — and the three rules that compress the work to under an hour.
02
A minimal 20-line design-system file that's right-sized for V0 — and the mistake of scaling it prematurely.
03
Why upfront design-system discipline is insurance, not perfectionism — and the changes it pays out for.

Why mid-testing rebrands are usually a disaster

If you’ve ever rebranded a product at this stage, you know the list:

  • Brand assets (logo, favicon, OG image)
  • UI components with the product name hardcoded
  • Marketing copy on landing, email, error messages
  • Domain and URLs
  • SEO meta tags
  • Database seeds referencing the old name
  • README and docs

Default developer instinct: grep the codebase, replace strings, pray.

Default designer instinct: redo every asset from Figma, export, push to production.

Both take days, not minutes. A rebrand usually becomes the reason for a minimum one-week launch delay.

Why House of Riddle only took 30 minutes

One reason: ODA — the design satellite in Stella Protocol, my AI-PM methodology — forced upfront discipline on the design system. Before writing any component, I had to fill in brain/design-system.md.

Three rules enforced from day one:

  1. All brand references (name, tagline, voice) live in one file: brain/design-system.md as the documentation source-of-truth, and src/lib/copy.ts for runtime strings.
  2. Components consume design tokens by reference, not hardcoded. Colors come from a CSS variable or Tailwind config, not a hex literal in JSX.
  3. The product name is never a string literal inside a component. Always imported from copy.ts.

The effect: when the name changed, the touchpoints were few and deterministic.

The actual walkthrough

8:00pm. Timer starts.

Minute 0–5. Update the Brand section of brain/design-system.md. New name, tagline, voice notes. This file is the documentation anchor — ODA reads it for consistency reviews later.

Minute 5–10. Update src/lib/copy.ts. One file. Constants for brand name, tagline, meta description. TypeScript immediately catches every place in the app that consumes it.

// src/lib/copy.ts
export const BRAND = {
  name: "House of Riddle",
  shortName: "HoR",
  tagline: "Solve the tower, write your own",
  voice: "mysterious, direct, playful",
} as const;

Minute 10–20. Regenerate favicon and OG image. I prompted an image tool using the voice reference from design-system.md. Downloaded, dropped into /public, updated app/layout.tsx metadata (which already references BRAND.name).

Minute 20–25. pnpm build. TypeScript passes, tests pass (9 unit, 3 integration for server-side answer verification). No grep-and-replace needed because every reference is single-source.

Minute 25–30. Deploy via Vercel CLI. riddle.thepunkrecords.com was already mapped, so no DNS work. Smoke test the landing, sign in with Google OAuth, solve a riddle to confirm answer verification still works. Green.

Total: 30 minutes, most of it waiting on build and deploy.

Skeleton brain/design-system.md

This file is intentionally minimal. Don’t over-engineer a V0 design system.

# Design System — [Project Name]

## Brand
- Name: House of Riddle
- Tagline: Solve the tower, write your own
- Voice: mysterious, direct, playful
- Voice don'ts: corporate, overly cheerful, exclamation-heavy

## Color Tokens
- --primary: #...
- --surface: #...
- --accent: #...

## Typography
- Heading: [font, weights, scales]
- Body: [font, weights, scales]

## Naming Rules
- Components: PascalCase
- Files: kebab-case
- CSS custom properties: --kebab-case

## Copy Style
- Buttons: imperative, lowercase-first ("solve this riddle" not "Click to Solve")
- Errors: friendly, specific, actionable
- Empty states: punchy, 1 sentence max

House of Riddle has a longer file because the UI scope is large (21 routes, tower builder, community submission, admin panel). But on smaller projects — Stoka, V0 — the design-system.md is only 20 lines. Scale the file to the project size. Don’t write 200 lines for a static landing page.

The broader lesson

ODA upfront = cheap optionality later.

A 1-hour design-system discussion during the DEFINE phase feels like overhead when the energy to code is high. The price is an insurance premium against changes that are definitely coming: rebrand, redesign, dark mode, accessibility pass, i18n.

If I had hardcoded “Riddle Room” across 40 component files, the rebrand would have been a one-week project instead of 30 minutes. If I had hardcoded hex colors in JSX, dark mode would be a refactor, not a variable toggle.

This discipline isn’t perfectionism. It’s a deferral buffer. Pay for the conversation now while there’s no pressure, or pay for the refactor later under a deadline.

Caveat

This isn’t an excuse to overthink the design system at V0. If you’re still searching for product-market fit, 20 lines of design-system.md is enough. Three color tokens, one font family, two naming rules. That’s it.

What’s dangerous isn’t a small design system. What’s dangerous is no single place for brand references. If the product name is scattered across 15 different files, a rebrand hurts regardless of project size.

Lesson

Design-system discipline upfront turns future-expensive changes into cheap ones. Pay for the conversation now, or pay for the refactor later.

Related:

Key Takeaways

  1. Centralize brand references on day one, not day eighty. One doc file, one runtime copy file, design tokens by reference. A rebrand that touches 3 files takes 30 minutes; one that touches 40 takes a week.
  2. Scale the design-system doc to the project, not to your ambition. 20 lines is fine for a V0. The mistake isn’t a small design system — it’s having no single source of truth at all.
  3. Upfront discipline is a deferral buffer for the changes that always come. Rebrand, dark mode, accessibility, i18n. Each of these is a refactor if you hardcoded, a variable toggle if you didn’t. Pay without pressure now, or pay under deadline later.

Satellite: ODA (design) · Morgans (this post) · Pipeline: DESIGN — ODA → Morgans

All Satellite Logs