|
1
|
--- |
|
2
|
name: branding-generator |
|
3
|
description: Create brand identity kits — logos, color palettes, typography, naming, and style guides. |
|
4
|
--- |
|
5
|
|
|
6
|
# Branding Generator |
|
7
|
|
|
8
|
Create brand identity kits. Interview the user, research the space, then deliver 3 distinct brand directions with visual assets. |
|
9
|
|
|
10
|
## When to Use |
|
11
|
|
|
12
|
- "I need branding / a brand identity / brand kit" |
|
13
|
- "I need a logo" / "design me a logo" |
|
14
|
|
|
15
|
- "What colors should I use?" / "help me pick colors" |
|
16
|
- "What fonts should I use?" / "help me choose typography" |
|
17
|
|
|
18
|
- "I need a style guide" / "brand guidelines" / "brand book" / "brand assets" |
|
19
|
- "I need a visual identity" / "design system" |
|
20
|
|
|
21
|
- "Help me name my company / app / product" |
|
22
|
- "I'm starting a new business/product" (early-stage founders needing naming + identity) |
|
23
|
|
|
24
|
- "Make my app look more professional" / "my app looks generic" (signals a visual identity gap) |
|
25
|
- Color palettes, typography, visual identity from scratch |
|
26
|
|
|
27
|
- Rebranding or brand refresh |
|
28
|
- Brand naming |
|
29
|
|
|
30
|
## When NOT to Use |
|
31
|
|
|
32
|
- Full UI design (use design skill) · Slide decks (use slides skill) |
|
33
|
|
|
34
|
## Step 1: Brand Interview |
|
35
|
|
|
36
|
Conduct this like a real branding agency discovery session. Ask these questions **conversationally, not as a wall of text** — adapt based on answers, ask follow-ups, go deeper where it matters. Group into 2-3 messages max. |
|
37
|
|
|
38
|
### Round 1 — The Business |
|
39
|
|
|
40
|
- What does your company/product do, in one sentence? |
|
41
|
- Who is your target audience? (Be specific — age, role, lifestyle, not just "everyone") |
|
42
|
|
|
43
|
- What problem do you solve that nobody else does? |
|
44
|
- What's your pricing position? (Budget / mid-market / premium / luxury) |
|
45
|
|
|
46
|
- **Do you already have a name, or do you need naming help?** |
|
47
|
|
|
48
|
### Round 2 — The Feeling |
|
49
|
|
|
50
|
- Name 3 brands you admire (any industry) and what you admire about them |
|
51
|
- If your brand were a person, how would they dress? How would they speak? |
|
52
|
|
|
53
|
- What emotions should someone feel when they see your brand for the first time? |
|
54
|
- What's the one word you'd want people to associate with you? |
|
55
|
|
|
56
|
- Any colors, styles, or aesthetics you absolutely hate? |
|
57
|
|
|
58
|
### Round 3 — Practical Constraints |
|
59
|
|
|
60
|
- Do you have any existing brand assets (logo, colors, fonts) you want to keep? |
|
61
|
- Where will this brand primarily live? (Web app, mobile app, physical product, social media, print) |
|
62
|
|
|
63
|
- Any industry conventions you need to follow — or deliberately break? |
|
64
|
- Competitor URLs or screenshots? (If provided, extract their palettes with colorthief for contrast analysis) |
|
65
|
|
|
66
|
### Round 4 — Brand Touchpoints |
|
67
|
|
|
68
|
- What is the **single most important touchpoint** for your brand? (e.g., mobile app icon, website hero, packaging, storefront, email newsletter, social media profile) |
|
69
|
- List 3-5 specific contexts where people will encounter your brand (e.g., "app store listing", "trade show banner", "Instagram stories", "invoice PDF", "product unboxing") |
|
70
|
|
|
71
|
- Which of these touchpoints is the first impression for most users? |
|
72
|
|
|
73
|
Prioritize the most important touchpoints when building mockups in Step 5. The "Brand in Action" board should focus on the touchpoints the user actually cares about, not generic website pages. |
|
74
|
|
|
75
|
**Do not proceed until you have solid answers.** Push back if answers are vague — "everyone" is not a target audience, "clean and modern" is not a personality. |
|
76
|
|
|
77
|
## Step 2: Research |
|
78
|
|
|
79
|
After the interview, do targeted research before generating directions: |
|
80
|
|
|
81
|
- **Competitor visual audit** — Search for 3-5 competitors' visual identities. Extract their color palettes, typography, and logo styles. Present a side-by-side summary of what's common in the space so the new brand can visually stand apart — not just conceptually, but with measurable color distance. |
|
82
|
- **Mood/reference gathering** — Search for visual references matching the interview answers (e.g., "minimalist premium SaaS branding", "bold playful fintech design"). |
|
83
|
|
|
84
|
- **Industry conventions** — What do users in this space expect? Where is there room to stand out? |
|
85
|
|
|
86
|
## Step 2.5: Brand Naming (if needed) |
|
87
|
|
|
88
|
If the user doesn't have a name, generate name candidates as part of each brand direction. For each direction, propose 2-3 name options. |
|
89
|
|
|
90
|
### Naming criteria |
|
91
|
|
|
92
|
- **Memorable** — short (ideally 1-2 syllables, max 3), easy to say and spell |
|
93
|
- **Distinctive** — doesn't sound like existing competitors in the space |
|
94
|
|
|
95
|
- **Meaningful** — connects to the brand concept, even if abstractly |
|
96
|
- **Domain-friendly** — check `.com`availability via`webSearch("site:instantdomainsearch.com [name]")` or similar |
|
97
|
|
|
98
|
- **Social-friendly** — the name should work as a handle (@name) on major platforms |
|
99
|
|
|
100
|
#### Name generation approaches |
|
101
|
|
|
102
|
1. **Portmanteau** — blend two relevant words (e.g., Pinterest = Pin + Interest) |
|
103
|
2. **Action verb** — conveys what the product does (e.g., Grab, Snap, Dash) |
|
104
|
|
|
105
|
3. **Abstract/invented** — coined word that sounds right (e.g., Spotify, Figma) |
|
106
|
4. **Real word, new context** — existing word reframed (e.g., Slack, Notion, Linear) |
|
107
|
|
|
108
|
5. **Foreign/multilingual** — borrow from another language for freshness |
|
109
|
|
|
110
|
Present names alongside each direction so the name and visual identity feel cohesive. |
|
111
|
|
|
112
|
## Step 3: Generate 3 Brand Directions |
|
113
|
|
|
114
|
**Always present exactly 3 distinct directions.** Each should feel like a different creative team's pitch — not slight variations. |
|
115
|
|
|
116
|
For each direction, provide: |
|
117
|
|
|
118
|
1. **Brand name**(if naming)**& concept narrative** — 1-2 sentence strategic thinking behind this direction |
|
119
|
2. **Color palette** — primary, secondary, accent with hex + OKLCH values. Include neutral scale (50-900) tinted toward the primary hue. Verify WCAG AA contrast for all text/background pairs. |
|
120
|
|
|
121
|
3. **Typography** — display + body font pairing from Google Fonts with rationale |
|
122
|
4. **Voice** — 3-5 adjectives defining how the brand speaks, plus copy examples across multiple contexts: |
|
123
|
|
|
124
|
- An example **headline** (marketing/hero) |
|
125
|
- An example **onboarding welcome message** (first-time user greeting) |
|
126
|
|
|
127
|
- An example **error message** (something went wrong) |
|
128
|
- An example **empty state message** (no data yet) |
|
129
|
|
|
130
|
- An example **call-to-action** (button or prompt) |
|
131
|
|
|
132
|
These examples make the voice tangible and testable — abstract adjectives alone are not enough. |
|
133
|
|
|
134
|
1. **Visual mood** — overall aesthetic description (photography style, illustration approach, texture usage). Reference 2-3 real-world brands that share elements. |
|
135
|
2. **Exportable tokens** — provide CSS custom properties and Tailwind config alongside each direction (not just at the end) so developers can start experimenting immediately: |
|
136
|
|
|
137
|
```css |
|
138
|
|
|
139
|
/* Direction A tokens */ |
|
140
|
|
|
141
|
--primary: \#1A1A2E; |
|
142
|
|
|
143
|
--primary-oklch: oklch(18% 0.02 270); |
|
144
|
|
|
145
|
--accent: \#D4A855; |
|
146
|
|
|
147
|
--background: \#F5F0EB; |
|
148
|
|
|
149
|
``` |
|
150
|
|
|
151
|
```js |
|
152
|
|
|
153
|
// Tailwind extend |
|
154
|
|
|
155
|
colors: { |
|
156
|
|
|
157
|
primary: { 50: '...', 100: '...', /* ... */ 900: '...' }, |
|
158
|
|
|
159
|
accent: { 50: '...', /* ... */ 900: '...' } |
|
160
|
|
|
161
|
} |
|
162
|
|
|
163
|
``` |
|
164
|
|
|
165
|
## Step 4: User Picks a Direction |
|
166
|
|
|
167
|
Present all 3 and ask the user to pick one or mix elements. Use structured prompts to make mixing easier: |
|
168
|
|
|
169
|
- "Which **name** resonates most?" |
|
170
|
- "Which **color palette** feels right for your brand?" |
|
171
|
|
|
172
|
- "Which **voice/tone** matches how you want to speak to users?" |
|
173
|
- "Which **visual mood** would you want your product to feel like?" |
|
174
|
|
|
175
|
The user can pick Direction A's name with Direction B's colors and Direction C's tone — facilitate that mixing explicitly. Don't proceed to assets until they approve a direction (or hybrid). |
|
176
|
|
|
177
|
## Step 4.5: Refine the Chosen Direction |
|
178
|
|
|
179
|
Before building the full brand kit, offer a focused refinement round on the selected (or hybrid) direction. Present the consolidated direction summary and ask: |
|
180
|
|
|
181
|
- "Would you like the palette **warmer or cooler**? Lighter or darker overall?" |
|
182
|
- "Should the typography feel **heavier/bolder**or**lighter/more refined**?" |
|
183
|
|
|
184
|
- "Is the voice **too formal, too casual, or just right**?" |
|
185
|
- "Any specific element from the other directions you'd still like to pull in?" |
|
186
|
|
|
187
|
Apply requested tweaks and present the updated direction for final approval. This avoids costly rework after the full kit is built. Limit to **2 refinement rounds max** — if the user is still unsure after two rounds, recommend proceeding and iterating on the finished boards where changes are easier to visualize. |
|
188
|
|
|
189
|
## Step 5: Deliver the Brand Kit |
|
190
|
|
|
191
|
Once a direction is approved, **delegate to the design subagent** (`subagent`with`specialization="DESIGN"`) to build polished visual boards. Embed them as iframes on the canvas. |
|
192
|
|
|
193
|
### Deliverables |
|
194
|
|
|
195
|
**Board 1 — Color & Typography:** Color swatches with hex + OKLCH values, shade ramps (50-900), typography specimen at heading/body/caption sizes with Google Fonts loaded, contrast audit table, dark mode variant. |
|
196
|
|
|
197
|
**Board 2 — Logo Concepts:**3-4 logo variations (wordmark, icon+text, icon-only, monogram) built as**inline SVG**. Show on light and dark backgrounds at multiple sizes (large display + 32px favicon size). Include SVG source for export. |
|
198
|
|
|
199
|
Logo quality checklist: |
|
200
|
|
|
201
|
- Every logo must be **recognizable at 32px** (favicon/app icon test) |
|
202
|
- Include a **single-color version** for monochrome contexts (printing, embossing, watermarks) |
|
203
|
|
|
204
|
- Test on **both light and dark backgrounds** — the logo must work on both without modification or with a simple color inversion |
|
205
|
- Use **geometric simplicity** — avoid fine details that collapse at small sizes |
|
206
|
|
|
207
|
- Provide the icon in a **rounded-square container** variant for app store / social profile use |
|
208
|
|
|
209
|
**Board 3 — Brand in Action:**Realistic mockups showing the brand applied to the**user's actual product type**, not generic pages. If the user is building a marketplace, show a listing card, search results, and app header. If they're building a SaaS dashboard, show the dashboard. Match the mockups to what they're actually building. This board should feel like seeing their real product with the new brand applied. |
|
210
|
|
|
211
|
**Board 4 — Brand Guidelines:** Color usage rules, typography hierarchy, voice & tone guidelines, 1-2 sample applications (business card, social post). |
|
212
|
|
|
213
|
### Accessibility Checklist |
|
214
|
|
|
215
|
Every brand kit must address accessibility beyond just color contrast: |
|
216
|
|
|
217
|
- **Minimum font sizes** — body text no smaller than 16px on web, 14px on mobile. Captions no smaller than 12px. |
|
218
|
- **Touch target sizing** — interactive elements must be at least 44x44px (iOS) / 48x48dp (Android). Specify this in the guidelines so designers don't shrink branded buttons below usable sizes. |
|
219
|
|
|
220
|
- **Motion sensitivity** — if the brand identity includes animations or transitions, provide a `prefers-reduced-motion` alternative. Note which brand animations are decorative (can be removed) vs. functional (must be preserved in reduced form). |
|
221
|
- **Font legibility** — verify that the chosen display and body fonts remain legible at the specified minimum sizes. Decorative display fonts must not be used for body copy or UI labels. |
|
222
|
|
|
223
|
- **Icon clarity** — any branded iconography must be distinguishable at 24px and not rely solely on color to convey meaning. |
|
224
|
|
|
225
|
Include these standards in Board 4 (Brand Guidelines) as a dedicated "Accessibility Standards" section. |
|
226
|
|
|
227
|
### Export & Deliverable Formats |
|
228
|
|
|
229
|
Before building the final kit, ask the user which export formats they need. Present as a checklist: |
|
230
|
|
|
231
|
- **Design tokens** — CSS custom properties, Tailwind config, SCSS variables (included by default) |
|
232
|
- **Asset package** — ZIP containing logo SVGs, PNG exports at 1x/2x/3x, favicon ICO/PNG, and Open Graph image (1200x630) |
|
233
|
|
|
234
|
- **Social media templates** — dimensions and safe zones for Instagram post (1080x1080), Instagram story (1080x1920), X/Twitter header (1500x500), LinkedIn banner (1584x396) |
|
235
|
- **Print-ready files** — CMYK color values, bleed specifications, business card layout (3.5x2in) |
|
236
|
|
|
237
|
- **Brand book PDF** — a single-document summary of all guidelines, suitable for sharing with external vendors or team members |
|
238
|
|
|
239
|
Generate the formats the user selects. At minimum, always deliver design tokens and the asset package. |
|
240
|
|
|
241
|
## Step 5.5: Domain & Social Handle Check |
|
242
|
|
|
243
|
After the user approves a direction and name, verify availability: |
|
244
|
|
|
245
|
- **Domain**: Search for `.com`,`.co`,`.app`,`.io` availability |
|
246
|
- **Social handles**: Check `@name` availability on major platforms via web search (Instagram, TikTok, X/Twitter) |
|
247
|
|
|
248
|
- **Trademark conflicts**: Quick web search for existing trademarks in the same industry |
|
249
|
|
|
250
|
Present findings clearly: |
|
251
|
|
|
252
|
```text |
|
253
|
|
|
254
|
Name: SWAPD |
|
255
|
|
|
256
|
- swapd.com — ❌ taken |
|
257
|
- swapd.co — ✅ available |
|
258
|
|
|
259
|
- swapd.app — ✅ available |
|
260
|
- @swapd (Instagram) — ❌ taken |
|
261
|
|
|
262
|
- @getswapd (Instagram) — ✅ available |
|
263
|
- @swapd (TikTok) — ✅ available |
|
264
|
|
|
265
|
``` |
|
266
|
|
|
267
|
If the primary domain or key handles are taken, suggest variations (get-, try-, use- prefixes, or alternate TLDs) before the user commits. |
|
268
|
|
|
269
|
## Color Science |
|
270
|
|
|
271
|
- Work in OKLCH color space (perceptually uniform — same L = same perceived lightness across hues) |
|
272
|
- Use color harmony from OKLCH hue space: complementary (H+180°), analogous (H±30°), triadic (H±120°), split-comp (H+150°/H+210°) |
|
273
|
|
|
274
|
- Generate shade ramps by stepping L linearly in OKLCH — avoids the muddy-middle problem of RGB interpolation |
|
275
|
- WCAG 2.2 AA: 4.5:1 contrast for normal text, 3:1 for large text and UI components |
|
276
|
|
|
277
|
- Use chroma-js or apcach for programmatic contrast verification |
|
278
|
- Dark mode: backgrounds at `oklch(15-20% 0.01 H)` not pure black. Desaturate brand colors slightly (reduce C by ~0.02). |
|
279
|
|
|
280
|
## Limitations |
|
281
|
|
|
282
|
- Logo concepts are starting points — final production logos should be refined with a dedicated designer |
|
283
|
- Fonts limited to Google Fonts / open-source unless user provides custom fonts |
|
284
|
|
|
285
|
- Domain/handle availability checks are point-in-time — availability can change; register quickly once decided |
|
286
|
- Trademark search is a surface-level web check, not a legal opinion — recommend a proper trademark search for high-stakes brands |