Skip to main content
odebase

brand-kit

Auto-load

Attaches itself automatically when a prompt matches.

Apply a user's existing brand identity (colors, fonts, logo, voice) consistently across a generated site or app. Use when the user provides brand assets — hex codes, font names, a brand PDF, an existing site — and wants the new build to match. NOT for inventing a brand from scratch (use theme-kit for that).

Scaffolds

next
react
vanilla

Instructions

The full instruction set the agent receives when this skill is active.

Brand Kit

When the user has an existing brand, the goal is fidelity, not creativity. Don't reinterpret. Apply exactly what they've supplied.

Step 1 — Collect

Ask for (or extract from supplied materials):

  • Primary color — exact hex
  • Secondary / accent color(s) — hex; max 2-3, usually fewer
  • Neutral palette — text color, background color, optional surface tints
  • Heading font — name + weight + license (if Google Fonts, perfect; if custom, ask for the WOFF2)
  • Body font — same
  • Logo — SVG ideal; PNG with transparent background acceptable
  • Voice / tone notes — single sentence or three adjectives ("warm, direct, never corporate")

If the user supplied a brand PDF, extract these manually from it — don't ask the user to re-paste what's already in the file.

Step 2 — Wire it in

scaffold-next / scaffold-react

  1. Colors — extend tailwind.config.ts:
    ts
    extend: { colors: { brand: { primary: '#USER_PRIMARY', accent: '#USER_ACCENT', text: '#USER_TEXT', bg: '#USER_BG', surface: '#USER_SURFACE', }, }, }
  2. Fonts — use next/font/google in scaffold-next:
    tsx
    import { Inter, Playfair_Display } from 'next/font/google'; const body = Inter({ subsets: ['latin'], variable: '--font-body' }); const display = Playfair_Display({ subsets: ['latin'], variable: '--font-display' });
    Apply via className={${body.variable} ${display.variable}} on <html>.
  3. Logo — drop the SVG into public/logo.svg and reference it. Don't recreate the logo in code unless it's a wordmark in a system font.

scaffold-vanilla

  1. Colors — CSS custom properties at the top of the stylesheet.
  2. Fonts — Google Fonts <link> tags in <head>.
  3. Logo — <img src="/logo.svg" alt="Brand"> or inline SVG.

Step 3 — Apply consistently

  • Headings always use --font-display (or whichever is the heading family)
  • Body always uses --font-body
  • Primary CTA buttons always use brand-primary fill
  • Links use brand-accent or brand-primary depending on whether primary is used elsewhere on the page
  • Never introduce a fourth color "to add visual interest" — if the brand is two colors + neutrals, you have two colors to work with

Voice

If the user supplied voice notes, apply them to body copy, button labels, empty states, error messages. "Submit" vs "Send it" vs "Yes, sign me up" — the right choice depends on voice.

Avoid

  • Mixing the user's brand colors with one of the [[theme-kit]] palettes. Pick one source of truth.
  • Inventing a "supporting" palette the user didn't ask for.
  • Reaching for animations or effects that contradict the user's described voice (no playful bouncing on a "serious medical" brand).

See also: [[theme-kit]] (only if user has no brand yet), [[frontend-design]].

brand-kit skill — Codebase