Paint branding and design tone

If Supabase is wired up through 04-real-backend.md, this step repaints the placeholder screens with your SaaS name and tone. When it ends, the screen on your dev server is no longer the base’s gray placeholder — it is the first impression of your SaaS.

The path begins with one slash command. The AI asks one decision at a time and you fill them in. You do not need to push through in one sitting. If the tone is not pinned down yet, you can skip this page and stay on the base’s defaults for now.

When does this page apply

Situation	Where to go
Neither the concept nor the tone is decided	Leave the base defaults as is. Come back when they are
Concept yes, design not yet	Start at concept decision (/3-analyze-saas) first
Both in your head already	Follow the flow below
You want to tweak Tailwind tokens directly	Jump to “Editing tokens.css by hand” below

Trigger

In the Claude Code prompt:

/5-customize-saas

Or in plain words: swap in my branding. Either way calls the 5-customize-saas skill. It walks the following seats in one breath.

If you have run this once before, the AI asks first:

Branding is already in place. Re-do it? — 5-a branding / 5-b theme / 5-c route tree / 5-d pricing page

For the first run, doing the full pass is the fastest path. From the second run on, you pick only the parts you want to redo.

5-a) Branding — name, logo, one-line description

First question:

What is your SaaS called? One or two words (e.g. Linear, Notion, MyApp)

After you give the name, the next question follows:

Add a one-line description. (e.g. “A tool for getting team decisions to land asynchronously and fast.”)

The name and one-liner land in package.json, the <title> and <meta> in index.html, the first paragraph of README.md, the site-header widget, and the landing page hero. Touching one seat means five seats follow.

If you have an SVG for a logo, drop it in public/logo.svg. The AI wires that file into the header and favicon seats. If you do not have one yet, the first letter of your name shows as a text logo and the step moves on. When the real logo arrives, it overwrites the same seat.

5-b) Theme — Tailwind v4 color tokens

Next question:

How would you like to set the color tone?

• tell me a one-word tone (e.g. “professional blue”, “warm beige”)
• auto-extract from a Figma file (needs the Figma MCP)
• hand-set hex values

For a first time, a one-word tone is the fastest path. The AI puts together a primary, secondary, background, and text color set in that tone and writes them into the @theme block in src/shared/ui/tokens.css.

@theme {
  --color-primary: oklch(0.62 0.18 250);
  --color-primary-foreground: oklch(0.98 0 0);
  --color-secondary: oklch(0.75 0.04 250);
  /* ... */
}

Tailwind v4 makes CSS variables the standard seat for tokens. Utilities like bg-primary or text-primary-foreground on a component read those variables. Change one seat, the whole site follows.

If you do not like the suggestion, call the same phase again with a different tone word (darker blue, more saturated, softer beige). A fresh suggestion lands each time.

The Figma route only shows up if you registered the Figma MCP in 01-prerequisites.md. That seat is optional, so if you skipped it, the flow goes straight to the other branch.

5-c) Route tree, auto-generated

Based on the routing mode you picked in phase 4 (/4-design-saas) — one of marketing-app, app-only, multi-tenant, or docs-heavy — the route entry points get written into src/pages/.

What auto-generates on marketing-app mode:

• src/pages/landing/ — public landing
• src/pages/pricing/ — pricing page
• src/pages/auth/login/, src/pages/auth/signup/ — auth
• src/pages/app/ — post-login main (behind the RequireAuth guard)
• src/pages/app/settings/, src/pages/app/billing/ — sub-pages inside the protected zone
• src/pages/checkout-result/ — checkout completed and canceled

Inside each page, ui/<PageName>.tsx and index.ts (public API) get written. The base fills in placeholder body copy, so even before design lands, every route already navigates.

Every route path is defined in one seat: the ROUTES const inside src/shared/lib/routing/routes.ts. When you add a page or change a path, that one seat updates and the router, every <Link to=...>, and every navigate(...) follow.

5-d) Pricing page skeleton, auto-generated

Based on the pricing model you picked in phase 4 (pricing-config.json), a pricing card grid gets written. Free / Pro / Enterprise is the default skeleton, and the prices for your SaaS get filled in from your phase 4 choices.

src/widgets/pricing-grid/
├── ui/PricingGrid.tsx
├── model/plans.ts        ← price data (kept in sync with Stripe Price IDs)
└── index.ts

Stripe Price IDs only land once you register the prices on your own Stripe dashboard under Products. Register Pro and Enterprise in test mode first, then paste those IDs into model/plans.ts. This is one of the spots that fills in when you fork. At the base time, placeholder Price IDs sit there — pressing the pricing button takes you into a dummy Stripe Checkout state and stops.

Editing tokens.css by hand

You can also edit the @theme block in src/shared/ui/tokens.css directly. When the secondary the AI suggested feels off and you want it a notch darker, that one seat is where it ends:

@theme {
  --color-primary: oklch(0.55 0.20 250);   /* a notch darker */
  --color-secondary: oklch(0.72 0.06 250); /* saturation nudged up */
}

This seat survives a re-call of phase 5. Anywhere the base suggestion and your hand-edited value differ gets flagged in manual_overrides inside brand.json, and the next phase 5 run skips those seats.

Confirm what you painted

By the time the work wraps, the dev server has probably auto-reloaded with the new tone already painted. If not, a hard refresh:

# in a new terminal, or shut down the dev server and start again
pnpm dev

Refresh http://localhost:5173. The landing hero, the pricing cards, and the header logo should show your SaaS info.

If colors do not change, it is usually one of two things:

• Browser cache — force-refresh (Cmd+Shift+R or Ctrl+Shift+R)
• The dev server is holding an old build — Ctrl+C and bring pnpm dev back up

A second pass — after the concept shifts

If you redo the concept in phase 3 (/3-analyze-saas), phase 5 follows. The name and one-liner regenerate from the new concept; color tokens preserve every seat you hand-edited.

If you want the hand-edited values overwritten too, the AI confirms once with an explicit prompt:

manual_overrides has two entries, primary and secondary. Overwrite with the new concept’s recommended values?

Next

If branding and tone are painted, head to 06-when-ai-gets-stuck.md for the two slash commands that unblock the workflow itself. Real distribution lives in 08-distribution.md. If something broke, the build and cache entries in 09-troubleshooting.md come first.