Brand Identity Generator

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 weight | Low contrast

Apple Health

• Feel: Clinical but friendly, data-forward
• Best for: Health, fitness tracking, medical
• Design DNA: Neutral temperature | Moderate spacing | Rounded radius | No shadows | Geometric type | Light weight | Moderate contrast

Bold / Consumer

Spotify

• Feel: Dark, vibrant, high-energy
• Best for: Entertainment, media, content platforms
• Design DNA: Cool temperature | Moderate spacing | Pill radius | No shadows | Geometric type | Heavy weight | High contrast

Duolingo

• Feel: Playful, cartoonish, addictive
• Best for: Education, gamified experiences, learning
• Design DNA: Warm temperature | Spacious spacing | Rounded radius | Moderate shadows | Geometric type | Heavy weight | High contrast

Robinhood

• Feel: Simple, green, "investing is easy"
• Best for: Consumer fintech, simplified complex tools
• Design DNA: Neutral temperature | Spacious spacing | Moderate radius | No shadows | Geometric type | Light weight | Moderate contrast

Data / Dashboard

Datadog

• Feel: Dense, dark, information-rich
• Best for: Monitoring, infrastructure, observability
• Design DNA: Cool temperature | Dense spacing | Sharp radius | No shadows | Monospace-accented type | Medium weight | Moderate contrast

Mixpanel

• Feel: Clean data viz, chart-forward
• Best for: Analytics, reporting, metrics dashboards
• Design DNA: Cool temperature | Moderate spacing | Moderate radius | Subtle shadows | Geometric type | Light weight | Moderate contrast

Airtable

• Feel: Colorful, organized, approachable complexity
• Best for: Structured data, spreadsheet-like tools, databases
• Design DNA: Warm temperature | Moderate spacing | Rounded radius | Subtle shadows | Geometric type | Medium weight | High contrast

---

Output Template

This is the exact structure for the generated BRAND-IDENTITY.md. Every field must be filled — no optional sections, no "TBD," no placeholders. Every gap is an invitation for AI to fill with generic defaults. Leave no gaps.

````markdown

Brand Identity — [Product Name]

> Generated by brand-identity-generator. This file is the single source of truth for all visual decisions. > Every AI tool building UI for this project should read this file first.

---

1. Brand Context

• Product: [What it is — one sentence]
• Audience: [Who uses it, in what context, how often, on what devices]
• Feel: [Plain-English feeling — 1-2 sentences]
• Reference brands: [1-2 brands] — [what to take from each, specifically]

---

2. Colors

Primary

| State | Hex | Usage | |-------|-----|-------| | Default | #XXXXXX | Primary buttons, links, active indicators | | Hover | #XXXXXX | Darkened/lightened on hover | | Active | #XXXXXX | While being pressed | | Disabled | #XXXXXX | Disabled primary elements (pair with opacity 0.5) |

Secondary Accent

| State | Hex | Usage | |-------|-----|-------| | Default | #XXXXXX | Secondary buttons, accent elements | | Hover | #XXXXXX | Hover state | | Active | #XXXXXX | Active/pressed state | | Disabled | #XXXXXX | Disabled state |

Neutral Scale

| Shade | Hex | Usage | |-------|-----|-------| | 50 | #XXXXXX | Page backgrounds, subtle fills | | 100 | #XXXXXX | Card backgrounds, hover states on white | | 150 | #XXXXXX | Dividers on light backgrounds | | 200 | #XXXXXX | Input borders, secondary dividers | | 300 | #XXXXXX | Disabled text, placeholder text | | 400 | #XXXXXX | Icon default color, helper text | | 500 | #XXXXXX | Secondary text, labels | | 600 | #XXXXXX | Body text on light backgrounds | | 700 | #XXXXXX | Strong text, emphasis | | 800 | #XXXXXX | Headings | | 900 | #XXXXXX | Primary text, highest contrast | | 950 | #XXXXXX | Near-black, use sparingly |

Semantic Colors

| Role | Text | Background | Border | |------|------|------------|--------| | Success | #XXXXXX | #XXXXXX | #XXXXXX | | Warning | #XXXXXX | #XXXXXX | #XXXXXX | | Error | #XXXXXX | #XXXXXX | #XXXXXX | | Info | #XXXXXX | #XXXXXX | #XXXXXX |

Surface Colors

| Surface | Hex | Usage | |---------|-----|-------| | Page background | #XXXXXX | `` background | | Card background | #XXXXXX | Card, panel, popover backgrounds | | Elevated surface | #XXXXXX | Dropdowns, tooltips, floating elements | | Overlay backdrop | rgba(X,X,X,0.X) | Behind modals and drawers |

Dark Mode

[Either provide a full mapping for dark mode:]

| Light token | Dark equivalent | |-------------|-----------------| | Page background #XXXXXX | #XXXXXX | | Card background #XXXXXX | #XXXXXX | | Primary text #XXXXXX | #XXXXXX | | Secondary text #XXXXXX | #XXXXXX | | Border #XXXXXX | #XXXXXX | | Primary #XXXXXX | #XXXXXX (adjust for dark bg contrast) | [...complete mapping for every token above]

[Or explicitly opt out:]

> Dark mode not supported. Do not generate dark mode variants.

---

3. Typography

Font Stack

• Headings: [Font Name], [fallback stack]
• Body: [Font Name], [fallback stack]
• Monospace: [Font Name], [fallback stack] (if applicable — omit if no code/data display)

Type Scale

| Role | Size (rem / px) | Weight | Line Height | Letter Spacing | |------|-----------------|--------|-------------|----------------| | Display | X.Xrem / XXpx | XXX | 1.1 | -0.02em | | H1 | X.Xrem / XXpx | XXX | 1.2 | -0.01em | | H2 | X.Xrem / XXpx | XXX | 1.25 | -0.005em | | H3 | X.Xrem / XXpx | XXX | 1.3 | 0 | | H4 | X.Xrem / XXpx | XXX | 1.35 | 0 | | Body Large | X.Xrem / XXpx | XXX | 1.6 | 0 | | Body | 1rem / 16px | 400 | 1.5 | 0 | | Body Small | X.Xrem / XXpx | XXX | 1.5 | 0 | | Caption | X.Xrem / XXpx | XXX | 1.4 | 0.01em | | Overline | X.Xrem / XXpx | XXX | 1.4 | 0.05em |

Typography Rules

• Max line width: 65ch for body text, 45ch for narrow columns
• Min body size: 16px — never go smaller for body text
• Font loading: Use font-display: swap and `` for custom fonts

---

4. Spacing & Layout

Base Unit

• Base: Xpx

Spacing Scale

All values are multiples of the base unit.

| Token | Value | Common Use | |-------|-------|------------| | space-0 | 0px | No spacing | | space-1 | Xpx | Tight inline spacing, icon-to-text gap | | space-2 | Xpx | Input padding (vertical), badge padding | | space-3 | Xpx | Button padding (vertical), list item gap | | space-4 | Xpx | Card padding (internal), form field gap | | space-5 | Xpx | Group separation, field-to-field gap | | space-6 | Xpx | Section padding, card spacing | | space-8 | Xpx | Large section breaks | | space-10 | Xpx | Page-level vertical rhythm | | space-12 | Xpx | Major content separations | | space-16 | Xpx | Hero sections, page-level spacing | | space-20 | Xpx | Full-page section gaps | | space-24 | Xpx | Maximum spacing (hero to content) |

Component Padding

| Component | Padding | |-----------|---------| | Button (sm) | Xpx Xpx | | Button (md) | Xpx Xpx | | Button (lg) | Xpx Xpx | | Input | Xpx Xpx | | Card | Xpx | | Modal | Xpx | | Section spacing | Xpx (between major page sections) |

Breakpoints

| Name | Min Width | Columns | Gutter | |------|-----------|---------|--------| | sm | XXXpx | X | Xpx | | md | XXXpx | X | Xpx | | lg | XXXpx | XX | Xpx | | xl | XXXXpx | XX | Xpx |

Container

| Breakpoint | Max Width | |------------|-----------| | sm | 100% (padding Xpx) | | md | XXXpx | | lg | XXXXpx | | xl | XXXXpx |

---

5. Shape & Elevation

Corner Radius Scale

| Token | Value | Usage | |-------|-------|-------| | radius-none | 0px | Tables, full-bleed elements | | radius-sm | Xpx | Badges, chips, small elements | | radius-default | Xpx | Buttons, inputs | | radius-md | Xpx | Cards, dropdowns | | radius-lg | Xpx | Modals, large panels | | radius-xl | Xpx | Feature cards, hero sections | | radius-full | 9999px | Avatars, pill buttons, indicators |

Shadow Scale

| Token | CSS Value | Usage | |-------|-----------|-------| | shadow-none | none | Flat elements, bordered cards | | shadow-xs | 0 1px 2px rgba(X,X,X,0.XX) | Subtle lift, input focus | | shadow-sm | 0 1px 3px rgba(X,X,X,0.X

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: whawkinsiv
• Source: whawkinsiv/solo-founder-skills
• License: MIT

Install and usage instructions live in the source repository linked above.