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 `app/globals.css` `:root`, set the four brand tokens: `--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 `pnpm 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. The repository is always the newest version: https://github.com/srisenmay/bringthefront-template. Clone the template and you get every recipe locally, versioned with the release you are on.