| name | elite-brand-design |
| description | Brand identity creation and visual identity strategy. Covers defining brand personality, positioning, tone of voice, color psychology, typography as voice, visual identity systems, and living brand documentation. Use when asked about: brand design, visual identity, logo, brand guidelines, brand system, brand strategy, branding, brand colors, brand typography, style guide, brand refresh, brand personality, tone of voice, brand identity, logo design, brand consistency, visual branding, brand guidelines creation, brand package, generate brand assets, brand deliverables, brand identity package, or when translating a brand brief into web design decisions. Brand decisions translate to implementation via elite-design-core (tokens), elite-gsap (motion language), and elite-ux-strategy (conversion copy).
|
Elite Brand Design
Strategic brand identity creation — from personality definition to visual system.
Quick Reference
Related Skills
- elite-design-core — Design tokens, spacing, type scales (the implementation layer)
- elite-gsap — Logo animation, motion language
- elite-css-animations — CSS-native brand motion effects
- elite-layouts — Brand-consistent layout systems
- elite-performance — Brand asset optimization
- elite-accessibility — Inclusive design requirements
- elite-ux-strategy — Brand as conversion driver
- elite-inspiration — Archetype case studies
Brand vs Design
Brand is what people feel when they encounter you. It exists in their minds, not in your files.
Branding is the deliberate act of shaping that perception through consistent signals.
Brand identity is the system of visual, verbal, and experiential elements that carry those signals.
This skill covers creating brand identity from scratch — the strategic decisions that inform every design choice downstream.
Brand Creation Process
Phase 1: Discovery
Who are you? Who are you for? What do you believe?
→ See brand-fundamentals.md
Phase 2: Personality
What archetype fits? What traits define your voice?
→ See brand-fundamentals.md
Phase 3: Visual Identity
Logo, color, typography, texture — the visible system.
→ See visual-identity-system.md, brand-color-psychology.md, brand-typography.md
Phase 4: Verbal Identity
Tone of voice, messaging hierarchy, microcopy.
→ See brand-tone-voice.md
Phase 5: Documentation
Living style guide that scales with the team.
→ See brand-style-guide.md
Brand Archetype Framework
Five production archetypes showing how brand personality maps to design:
| Archetype | Personality | Type Signal | Color Signal | Shape Signal |
|---|
| Modern/Bold | Confident, direct, technical | Geometric sans (Space Grotesk) | High-contrast dark + saturated accent | Moderate radius |
| Luxury/Editorial | Refined, aspirational, sensory | High-contrast serif (Cormorant Garamond) | Warm metallics on neutral | Soft radius |
| Warm/Inclusive | Safe, empathetic, human | Soft variable serif (Fraunces) | Muted expanded palette (plum/sage/lavender) | Generous radius |
| Authoritative | Commanding, trustworthy, established | Sturdy serif (Gelasio) | Traditional power colors (navy/gold) | Zero radius (sharp) |
| Professional | Competent, reliable, caring | Paired serif+sans (DM family) | Clean, functional neutrals | Standard radius |
How Personality Translates to Code
- "Authoritative" → serif display font +
border-radius: 0 !important globally + navy/gold tokens
- "Warm/Inclusive" → variable font with
SOFT axis + plum-tinted shadows + generous border-radius
- "Modern/Bold" → geometric sans + tight letter-spacing + grain texture overlay
- "Luxury/Editorial" → high-contrast serif + italic accent font + gold/warm-neutral tokens
→ See elite-design-core for token implementation, elite-gsap for motion language.
Common Pitfalls
- Starting with colors — Start with personality and audience. Colors follow.
- Too many fonts — Two families maximum. Three font roles (display, body, mono) is the ceiling.
- Inconsistent application — A brand system only works if every touchpoint follows it. Document everything.
- Copying competitors — Differentiation is the point. Study competitors to avoid their choices.
- Ignoring accessibility — A brand that can't be perceived by all users isn't a complete brand.
- Decoration over purpose — Every brand element should communicate something. If it's just decoration, remove it.
- Skipping verbal identity — Tone of voice is as important as visual identity. A beautiful site with generic copy feels hollow.
Generating the Brand Package
After completing brand discovery (Phases 1-5), generate a complete brand-assets/ folder with all deliverables:
→ See brand-package.md
This produces:
- Design tokens (Tailwind v4 @theme + semantic layer)
- Logo placeholders (icon, wordmark, combination SVGs)
- Favicon set (SVG favicon + Apple touch icon)
- Social templates (OG image + profile image)
- Starter CSS (base styles + component library)
- Brand guidelines document
All branded with the user's discovery answers — not generic templates.
