Make it your brand
How do I rebrand this without touching the code?
Fill-in-the-blank prompt: name, colors, words. Tokens do the rest — the whole site recolors, and it stays on the upgrade path because you never edited a component.
Typical effort: 15 minutes
The recipe — paste this to your AI
# Task prompt — "Skin this site to my brand" Copy the block below into your AI assistant **together with this repo**, fill in the blanks, and it will re-brand the whole site without touching a page. (What it's doing under the hood: [`../skinning.md`](../skinning.md) and [`../themes.md`](../themes.md).) --- > This is the Genesis frontend-template. Re-skin it to my brand — **tokens only, no page > edits**: > > - Company: **___** · tagline: **___** · description (one sentence): **___** > - Primary brand color: **___** (hex) · font: **___** (or keep the default) > - Feel: **___** (e.g. "sharp and corporate" / "soft and friendly" — pick radius to match) > > Do exactly this: > 1. In `site.config.ts`, set `tenant.brandPalette` (one of the nine curated palettes) or > `tenant.brandColor` for an exact hex, plus `tenant.brand.fontFamily` / `.radius` / > `.surfaceCard`. That is config: it never conflicts on an upgrade. ONLY if the config cannot > express what you need, go deeper in `app/globals.css` `:root` — you then own that file — and > set the four brand tokens there instead: `--brand-primary`, > `--brand-surface-card`, `--brand-radius-md`, `--brand-font-family`. Nothing else in the > token blocks. > 2. In `site.config.ts`, set `tenant` (name, tagline, description, url, brandColor), > `marketing.nav` (pages I listed), and `analytics` if I gave you IDs. > 3. If my primary color is unusual (very light / very saturated), check it against > `docs/themes.md`'s proven-safe guidance rather than eyeballing, and keep the > high-contrast and outdoor schemes legible — they are user rights, never remove them. > 4. Do NOT write any `dark:` classes, raw palette colors (`bg-blue-600`), or `!important`; > custom CSS, if truly needed, goes in the `@layer addons` block. > 5. Know what a token reskin does NOT touch: the member portal (`/m/…`) and the lead-capture > landing (`/lp/…`) pull their logo, name, and brand color **from the API** (each company's > own branding via `GET /member/bootstrap/:slug`) — by design, so every company on the > platform keeps its own identity there. Your `--brand-*` tokens reskin the operator app > and the marketing pages only. > 6. If you have no Genesis backend, set `NEXT_PUBLIC_DEMO=1` in `.env.local` first — the app > pages then render sample data so you can actually SEE your reskin on the dashboard. > 7. Prove it: run `npm run verify` (must stay green — it checks contrast on all four schemes) > and `npm run dev`, then show me the home page, `/components`, and one dashboard page in > light and dark. --- If you want a whole palette rather than one color, browse the proven catalog in `lib/theme/catalog.ts` and say "use the ___ theme" — custom themes go in `lib/theme-catalog.custom.ts` (never overwritten by upgrades).
Source of truth
This recipe ships inside the template as docs/prompts/skin-my-site.md — this page renders that exact file. Your own copy is always the newest version: take the template and you get every recipe locally, versioned with the release you are on, and each upgrade brings the newer ones with it. How to get it →