Brand Designer
Overview
Brand Designer creates complete visual identity systems from discovery through asset delivery. It covers logo design with SVG components, color palette generation with accessibility compliance, typography scale configuration, brand guidelines documentation, and template creation for social media and print collateral.
When to use: New brand identity projects, logo design with SVG variants, color palette creation with Tailwind integration, typography system setup, brand guidelines documentation, social media template generation, brand asset file organization.
When NOT to use: UI component library design (use design-system), image optimization pipelines (use asset-manager), Figma-to-code workflows (use figma-developer), marketing copy or content strategy.
Quick Reference
| Pattern |
Approach |
Key Points |
| Logo design |
SVG component with full/icon/wordmark variants |
Design monochrome first, then add color |
| Color palette |
Primary, secondary, neutral, semantic layers |
60/30/10 rule: neutral/primary/accent |
| Typography system |
Display + body font pair with CSS custom props |
Maximum two font families |
| Brand guidelines |
Logo usage, colors, typography, voice and tone |
Include clear space rules and minimum sizes |
| Social templates |
SVG templates at platform-specific dimensions |
1200x630 for Open Graph, 400x400 for profiles |
| Asset organization |
Structured directories: logo, colors, fonts |
SVG as primary format, PNG at @1x/@2x/@3x |
| Favicon generation |
Sharp-based script from SVG source |
Generate 16, 32, 48, 64, 128, 256px sizes |
| Accessibility |
WCAG AA contrast ratios for text on backgrounds |
Verify primary color passes AA on white |
Brand Discovery Checklist
| Question |
Purpose |
| What does the company do? |
Industry context |
| Who is the target audience? |
Demographic and psychographic targeting |
| What are the brand values? |
Core identity pillars |
| What feeling should the logo evoke? |
Emotional direction |
| Any colors or symbols to avoid? |
Constraints and sensitivities |
| Who are the competitors? |
Differentiation opportunities |
Common Mistakes
| Mistake |
Correct Pattern |
| Designing the logo in color first |
Design in monochrome first; logo must work in a single color before adding palette |
| Skipping the brand discovery checklist |
Always gather company values, audience, competitors, and constraints before design |
| Using more than two font families |
Limit to one display font and one body font for cohesion |
| Not providing logo variants |
Create full, icon-only, and wordmark-only variants plus monochrome versions |
| Exporting logos only as PNG |
Provide SVG as primary format; add PNG at @1x, @2x, @3x for raster needs |
| Using brand color for large backgrounds |
Follow 60/30/10 rule: 60% neutral, 30% primary, 10% accent |
| Adding effects to logo (shadows, gradients) |
Logo is used as-is from approved variants only |
| Missing clear space rules |
Define clear space equal to height of tallest letter around logo |
| No minimum size specification |
Digital: 120px full / 40px icon; Print: 1in full / 0.25in icon |
Delegation
When working on brand design, delegate to:
design-system -- Token hierarchy and component architectureasset-manager -- Image optimization and asset pipelinefigma-developer -- Figma-to-code implementation
References
- Logo Design -- SVG logo component with full, icon, and wordmark variants
- Color Palette -- Brand color definitions, Tailwind config, usage guidelines
- Typography -- Font selection, CSS custom properties, React typography components
- Brand Guidelines -- Complete guidelines template with voice, tone, and visual rules
- Templates -- Social media, business card, and profile image SVG templates
- Asset Management -- File organization, favicon generation, HTML meta tags
1---2name: brand-designer3description: Creates cohesive brand identities including logos, color palettes, typography systems, and brand guidelines documents. Generates SVG logo components with variants, configures Tailwind color tokens, builds type scales, and produces social media and business card templates. Use when designing a logo, building a color palette, setting up typography systems, creating brand guidelines, generating social media templates, or organizing brand asset files. Use for branding, visual identity, logo design, brand guidelines, color systems.4license: MIT5---6
7# Brand Designer
8
9## Overview
10
11Brand Designer creates complete visual identity systems from discovery through asset delivery. It covers logo design with SVG components, color palette generation with accessibility compliance, typography scale configuration, brand guidelines documentation, and template creation for social media and print collateral.
12
13**When to use:** New brand identity projects, logo design with SVG variants, color palette creation with Tailwind integration, typography system setup, brand guidelines documentation, social media template generation, brand asset file organization.
14
15**When NOT to use:** UI component library design (use `design-system`), image optimization pipelines (use `asset-manager`), Figma-to-code workflows (use `figma-developer`), marketing copy or content strategy.
16
17## Quick Reference
18
19| Pattern | Approach | Key Points |
20| ------------------ | ----------------------------------------------- | --------------------------------------------- |
21| Logo design | SVG component with full/icon/wordmark variants | Design monochrome first, then add color |
22| Color palette | Primary, secondary, neutral, semantic layers | 60/30/10 rule: neutral/primary/accent |
23| Typography system | Display + body font pair with CSS custom props | Maximum two font families |
24| Brand guidelines | Logo usage, colors, typography, voice and tone | Include clear space rules and minimum sizes |
25| Social templates | SVG templates at platform-specific dimensions | 1200x630 for Open Graph, 400x400 for profiles |
26| Asset organization | Structured directories: logo, colors, fonts | SVG as primary format, PNG at @1x/@2x/@3x |
27| Favicon generation | Sharp-based script from SVG source | Generate 16, 32, 48, 64, 128, 256px sizes |
28| Accessibility | WCAG AA contrast ratios for text on backgrounds | Verify primary color passes AA on white |
29
30## Brand Discovery Checklist
31
32| Question | Purpose |
33| ----------------------------------- | --------------------------------------- |
34| What does the company do? | Industry context |
35| Who is the target audience? | Demographic and psychographic targeting |
36| What are the brand values? | Core identity pillars |
37| What feeling should the logo evoke? | Emotional direction |
38| Any colors or symbols to avoid? | Constraints and sensitivities |
39| Who are the competitors? | Differentiation opportunities |
40
41## Common Mistakes
42
43| Mistake | Correct Pattern |
44| ------------------------------------------- | ---------------------------------------------------------------------------------- |
45| Designing the logo in color first | Design in monochrome first; logo must work in a single color before adding palette |
46| Skipping the brand discovery checklist | Always gather company values, audience, competitors, and constraints before design |
47| Using more than two font families | Limit to one display font and one body font for cohesion |
48| Not providing logo variants | Create full, icon-only, and wordmark-only variants plus monochrome versions |
49| Exporting logos only as PNG | Provide SVG as primary format; add PNG at @1x, @2x, @3x for raster needs |
50| Using brand color for large backgrounds | Follow 60/30/10 rule: 60% neutral, 30% primary, 10% accent |
51| Adding effects to logo (shadows, gradients) | Logo is used as-is from approved variants only |
52| Missing clear space rules | Define clear space equal to height of tallest letter around logo |
53| No minimum size specification | Digital: 120px full / 40px icon; Print: 1in full / 0.25in icon |
54
55## Delegation
56
57When working on brand design, delegate to:
58
59- `design-system` -- Token hierarchy and component architecture
60- `asset-manager` -- Image optimization and asset pipeline
61- `figma-developer` -- Figma-to-code implementation
62
63## References
64
65- [Logo Design](references/logo-design.md) -- SVG logo component with full, icon, and wordmark variants
66- [Color Palette](references/color-palette.md) -- Brand color definitions, Tailwind config, usage guidelines
67- [Typography](references/typography.md) -- Font selection, CSS custom properties, React typography components
68- [Brand Guidelines](references/brand-guidelines.md) -- Complete guidelines template with voice, tone, and visual rules
69- [Templates](references/templates.md) -- Social media, business card, and profile image SVG templates
70- [Asset Management](references/asset-management.md) -- File organization, favicon generation, HTML meta tags
oakoss