brand-identity-generator

What this skill does

# Brand Identity Generator

Generate a complete `BRAND-IDENTITY.md` file for the user's project root — a single reference document that specifies every visual decision so AI tools never guess.

**Two modes:**
- **Guided discovery** (default) — Ask one question, propose a full identity, refine from reactions. The user never needs design vocabulary.
- **Expert shortcut** — Detect when the user already provides specific design tokens (hex codes, font names, spacing values). Acknowledge what they've specified, fill gaps with smart defaults, skip discovery.

The output is a project-level reference file, not a skill. Once generated, any AI tool (Claude Code, Lovable, Cursor, Replit) can read `BRAND-IDENTITY.md` and build consistent UI without repeated instructions.

> Logo guidance, decision frameworks, and common branding mistakes are included at the end.

---

## Discovery Process

**Core principle: The user should never need to use design vocabulary. They react to your proposals. You do the heavy lifting.**

### Default Path (Guided Discovery)

**Step 1 — Ask ONE question:**

> "What are you building and who is it for?"

That's it. One question. Do not ask about colors, fonts, or design preferences.

**Step 2 — Select reference brands:**

Based on their answer, select the 1-2 closest reference brands from the Reference Brand Library below. Use the "Best for" field to match.

**Step 3 — Propose a complete identity in plain English:**

Write a human-readable recommendation. Talk about feeling, not specs. Example tone:

> "Your users are developers who'll have this open all day. Products that succeed in this space — like Linear and GitHub — use calm, minimal aesthetics because your users stare at this 8 hours a day. I'd go with a dark-compatible palette built around a single cool accent, tight spacing so information density is high, and geometric type that feels fast. Here's what I'd recommend and why..."

Then present a summary covering:
- Overall feel in plain words
- Which reference brands you're drawing from and why
- Color direction (warm/cool, light/dark, accent character)
- Typography character (not font names — "clean and precise" vs "warm and readable")
- Density and spacing feel
- Component personality (sharp and fast vs soft and friendly)

Do NOT present the full 12-section spec yet. Keep it conversational.

**Step 4 — User reacts:**

They might say things like:
- "Love it"
- "Warmer"
- "I hate green"
- "More like Notion"
- "Can we make it feel more premium?"
- "Less corporate"

Adjust and re-propose. This loop usually takes 1-3 rounds.

**Step 5 — Generate the full BRAND-IDENTITY.md:**

Once the user approves, generate the complete output using the Output Template below. Write it to the project root as `BRAND-IDENTITY.md`.

### Expert Path

Detect when the user provides specific design tokens — hex codes, font names, radius values, spacing scales. Signs of an expert:
- They paste CSS custom properties or Tailwind config
- They name specific fonts ("Inter for headings, Source Sans for body")
- They provide hex codes
- They reference specific component libraries

When detected:
1. Acknowledge exactly what they've specified
2. Fill every gap with smart defaults that complement their choices
3. Skip the discovery conversation
4. Generate the full BRAND-IDENTITY.md
5. Still apply ALL enforced best practices (accessibility, responsive, etc.)

---

## Reference Brand Library

25 brands across 7 categories. Use the "Feel" to describe brands to users. Use the "Design DNA" internally to derive specific values.

### Minimal / Precise

**Stripe**
- Feel: Precise, confident, no wasted space
- Best for: Financial tools, APIs, B2B platforms
- Design DNA: Cool temperature | Moderate spacing | Moderate radius | Subtle shadows | Geometric type | Medium weight | High contrast

**Linear**
- Feel: Fast, quiet, stays out of your way
- Best for: Dev tools, productivity apps, task management
- Design DNA: Cool temperature | Moderate spacing | Moderate radius | Minimal shadows | Geometric type | Light weight | High contrast

**Vercel**
- Feel: Bold, dark, futuristic
- Best for: Technical platforms, dev tools, infrastructure
- Design DNA: Cool temperature | Moderate spacing | Sharp radius | No shadows | Geometric type | Heavy weight | High contrast

**Superhuman**
- Feel: Luxurious, dense, keyboard-driven
- Best for: Premium productivity, power-user tools
- Design DNA: Cool temperature | Dense spacing | Moderate radius | Subtle shadows | Geometric type | Medium weight | High contrast

### Warm / Approachable

**Notion**
- Feel: Warm, inviting, like a blank notebook
- Best for: Creative tools, knowledge work, wikis
- Design DNA: Warm temperature | Spacious spacing | Moderate radius | Subtle shadows | Humanist type | Light weight | Moderate contrast

**Basecamp**
- Feel: Honest, unpretentious, handmade feel
- Best for: Small business tools, project management
- Design DNA: Warm temperature | Spacious spacing | Rounded radius | No shadows | Humanist type | Medium weight | Moderate contrast

**Mailchimp**
- Feel: Quirky, fun, doesn't take itself too seriously
- Best for: Small business marketing, email tools
- Design DNA: Warm temperature | Spacious spacing | Rounded radius | Subtle shadows | Humanist type | Medium weight | Moderate contrast

**Canva**
- Feel: Bright, encouraging, "you can do this"
- Best for: Creative tools for non-designers, visual editors
- Design DNA: Warm temperature | Moderate spacing | Rounded radius | Subtle shadows | Geometric type | Medium weight | High contrast

### Collaborative / Social

**Slack**
- Feel: Friendly, colorful, energetic
- Best for: Team communication, workplace tools
- Design DNA: Warm temperature | Moderate spacing | Rounded radius | Subtle shadows | Humanist type | Medium weight | High contrast

**Figma**
- Feel: Playful, creative, multiplayer
- Best for: Design collaboration, real-time editing
- Design DNA: Neutral temperature | Moderate spacing | Rounded radius | Subtle shadows | Geometric type | Medium weight | High contrast

**Loom**
- Feel: Personal, casual, lightweight
- Best for: Async video, screen recording, communication
- Design DNA: Warm temperature | Spacious spacing | Rounded radius | Moderate shadows | Humanist type | Light weight | Moderate contrast

**Discord**
- Feel: Bold, youthful, expressive
- Best for: Community platforms, social features, gaming
- Design DNA: Cool temperature | Moderate spacing | Rounded radius | Moderate shadows | Geometric type | Heavy weight | High contrast

### Trust / Authority

**Plaid**
- Feel: Trustworthy, institutional, safe
- Best for: Fintech infrastructure, banking integrations
- Design DNA: Cool temperature | Moderate spacing | Moderate radius | No shadows | Geometric type | Medium weight | High contrast

**Gusto**
- Feel: Approachable authority, grown-up but not stuffy
- Best for: HR, payroll, compliance tools
- Design DNA: Warm temperature | Spacious spacing | Rounded radius | Subtle shadows | Humanist type | Medium weight | Moderate contrast

**Mercury**
- Feel: Sleek, premium, quietly confident
- Best for: Business banking, financial dashboards
- Design DNA: Cool temperature | Spacious spacing | Moderate radius | Subtle shadows | Geometric type | Light weight | High contrast

**Wise**
- Feel: Transparent, clean, no-nonsense
- Best for: International finance, money transfer, transparent pricing
- Design DNA: Cool temperature | Spacious spacing | Moderate radius | No shadows | Geometric type | Light weight | High contrast

### Calm / Wellness

**Calm**
- Feel: Soft, spacious, like a deep breath
- Best for: Meditation, wellness, self-care
- Design DNA: Warm temperature | Spacious spacing | Rounded radius | No shadows | Humanist type | Light weight | Low contrast

**Headspace**
- Feel: Warm, illustrated, gentle
- Best for: Mental health, habit tracking, guided experiences
- Design DNA: Warm temperature | Spacious spacing | Pill radius | No shadows | Geometric type | Medium