Brand Identity System Generator

Generate an 18-deliverable brand identity system with visual assets, design tokens, vector logos, and a printable brand guide. This produces the same output as a $100k+ branding agency engagement — strategy through governance, digital through print.

Setup Verification

The agent should verify the following before using this skill:

1. Check nano-banana skill: Required for visual asset generation (19 raster images). Verify: python3 -c "from google import genai; print('ok')"
2. Check API key: GEMINI_API_KEY must be set in environment or .env file
3. Check pngquant (optional): which pngquant — needed only if generating transparent web-ready assets. Install: brew install pngquant (macOS) or apt install pngquant (Linux)
4. Sub-agents: Strongly recommended for parallelizing the 18 deliverables across 4 execution waves

If nano-banana is unavailable, the system still works — all 18 document deliverables generate normally, and visual asset locations are referenced as planned paths for later generation.

Phase 1: Brand Intake

Before generating anything, gather inputs from the user. Present the Essential Questions as a numbered list and wait for answers. After the essentials, offer the Deep Dive questions for anyone who wants more control.

Essential Questions (Always Ask These)

Deep Dive Questions (Offer After Essentials)

Present these grouped by category. The user can answer any, all, or none.

Audience & Market:

• Target audience — describe 2-3 user personas
• Top 3 competitors
• Key differentiator — what makes this different
• Industry/category

Brand Foundation:

• Brand values — 3-5 core values (e.g., transparency, craftsmanship)
• Parent company — name and visibility level (if any)
• Voice traits — how should the brand sound in writing?
• What the brand should NEVER sound like
• Key messages — 3-5 most important things to communicate
• Sensitive topics needing careful handling (payments, privacy, AI trust)

Visual Details:

• Mascot concept — brief description (if wanted)
• Reference brands — 2-3 brands whose visual style you admire
• Dark mode — needed or light-only?
• Print specifications — Pantone/CMYK needed?

Technical:

• Tech stack — web framework, CSS framework (default: Next.js + Tailwind v4)
• Mobile platforms — iOS, Android, or web-only?
• Design tool — Figma, Sketch, or Adobe? (default: Figma)
• Existing brand assets — file paths to reference for consistency

Defaults for Missing Inputs

When the user doesn't answer optional questions, make creative decisions silently:

Phase 2: Generate Brand Brief

Before launching sub-agents, synthesize all user inputs into a Brand Brief — a structured reference document that every sub-agent receives. This ensures consistency across all 18 deliverables.

The brand brief should contain:

1. Identity — name, pitch, tagline, parent company
2. Personality — adjectives, voice traits, what to avoid
3. Audience — personas, competitors, differentiator
4. Visual Direction — colors (with hex codes), fonts (with weights), logo concept, aesthetic, illustration style
5. Technical — tech stack, platforms, design tool
6. Key Messages — value propositions, trust messages, sensitive topics

Write this as an internal working document (not a deliverable). Save it as _BRAND-BRIEF.md in the output directory for reference.

Phase 3: Execute Deliverables

Generate all 18 deliverables using sub-agents for parallelization. Read references/deliverable-specs.md for detailed specifications for each deliverable — it contains the required sections, content requirements, size targets, and sub-agent prompt guidance.

Execution Order

The deliverables have dependencies. Execute in this order:

Wave 1 — Foundation (launch first, 4-5 parallel agents):

• 01 Brand Strategy & Positioning
• 03 Color System (needs palette from intake)
• 04 Typography System (needs fonts from intake)
• 15 Brand Architecture (if parent company exists)

Wave 2 — Visual Systems (launch after Wave 1 colors/type are done, 5-6 parallel agents):

• 02 Logo Production System
• 05 Art Direction Guide
• 06 Iconography System
• 07 Pattern & Texture Library
• 08 Motion & Animation System

Wave 3 — Applications & Content (launch in parallel, 4-5 agents):

• 09 Brand Applications
• 10 Social Media Templates
• 11 Email Templates (Production HTML)
• 12 Responsive Grid & Layout System
• 13 UI Component Design System

Wave 4 — Governance & Tooling (launch after Waves 1-3, 3-4 agents):

• 14 Brand Governance & Usage Guide
• 16 Design Tokens Ecosystem
• 17 SVG Vector Assets
• 18 Brand Guide (HTML) & Figma Setup Guide

Sub-Agent Prompt Pattern

Every sub-agent prompt must include:

1. The complete brand brief (from Phase 2)
2. The specific deliverable spec (from references/deliverable-specs.md)
3. The exact output file path
4. Explicit color hex codes, font names, and spacing values — never let sub-agents guess
5. Cross-references to related deliverables they should align with
6. Quality standards: "This is a premium agency deliverable. Every value must be exact. No placeholder content."

Phase 4: Visual Asset Generation

After the document deliverables are complete, generate visual assets using the nano-banana skill (Gemini image generation). Read references/visual-assets.md for the full prompt templates.

Asset Categories

Generating with nano-banana

Use the nano-banana generate_image.py script for all assets:

# Standard reference card (opaque background, JPG is fine)
python3 scripts/generate_image.py "{prompt from visual-assets.md}" \
  --output ./02-logo-system/assets/ --filename logo-construction-grid.jpg --aspect-ratio 16:9

# State illustration that needs to float on a website background
# Use the 4-pass web-asset pipeline from nano-banana:
python3 scripts/generate_image.py "{illustration prompt}, on a simple white background" \
  --output ./05-art-direction/assets/ --filename state-error-raw.png --aspect-ratio 1:1

python3 scripts/edit_image.py \
  "Remove the background completely. Make the background fully transparent. Keep only the main subject with clean edges. Output as PNG with alpha transparency." \
  --images ./05-art-direction/assets/state-error-raw.png \
  --output ./05-art-direction/assets/ --filename state-error-keyed.png

python3 scripts/make_transparent.py ./05-art-direction/assets/state-error-keyed.png \
  --output ./05-art-direction/assets/ --filename state-error-transparent.png

pngquant --quality=65-85 --force --output ./05-art-direction/assets/state-error-transparent.png \
  ./05-art-direction/assets/state-error-transparent.png

When to Use Transparent PNG vs JPG

Asset Generation Notes

• Every nano-banana prompt must include the brand's color hex codes, aesthetic direction, and illustration style
• Use --aspect-ratio 16:9 for landscape references, 1:1 for icons/avatars, 9:16 for stories
• Generate assets to the assets/ subdirectory within each deliverable's folder
• Name files descriptively: logo-construction-grid.jpg, not image-001.jpg
• For transparent PNGs, use the -transparent.png suffix naming convention
• QA every asset — expect ~20% rejection rate. Regenerate from Pass 1 if quality doesn't meet the bar
• If nano-banana is unavailable, the system still works — documents reference the planned asset locations

Phase 5: SVG Vector Assets

Generate SVG logo files as part of deliverable 17. Read references/tooling-specs.md for detailed SVG specifications.

Key SVGs to generate (14 files):

• Wordmark (3 color variants: primary, white, accent color)
• Mark (3 variants: primary, white/inverted, outline)
• Lockups (4: horizontal, horizontal-white, stacked, stacked-white)
• Tagline lockup
• Favicon SVG
• Simplified mascot outline
• Brand pattern tile (repeatable)

All SVGs must:

• Use viewBox only (no fixed width/height) for infinite scaling
• Include <title> and role="img" for accessibility
• Use exact brand hex colors — never #000000
• Include font conversion instructions in comments

Phase 6: Design Tokens & Platform Exports

Generate as part of deliverable 16. Read references/tooling-specs.md for the complete token structure.

Token files (W3C DTCG format): color, typography, spacing, elevation, radii, motion, breakpoints Figma Tokens: Single JSON for Tokens Studio plugin import Style Dictionary: Config + build script for automated platform exports Platform exports: CSS variables, Tailwind v4 config, iOS Swift extensions, Android XML resources

Every value must be derived from the brand brief — hex codes, font names, spacing scale, shadow values. No generic defaults.

Phase 7: Assembly & Verification

After all deliverables and assets are generated:

1. Create master index — BRAND-LOOKBOOK.md at the root of the output directory. This is the table of contents for the entire system with links to every document and asset inventory.
2. Create tracking document — MASTER-PLAN.md with a deliverable tracker table showing status, size, and location for all 18 items.
3. Verify completeness — Run a file check confirming:
   • All 18 document files exist and are non-empty
   • All 19 visual assets exist (if nano-banana was available)
   • All 14 SVGs exist and are valid XML
   • All design token JSON files parse cleanly
   • Platform export files exist (CSS, Tailwind, Swift, Android)
   • Brand guide HTML exists
4. Report to user — Present a final summary table showing all deliverables, file counts, and total size.

Deliverable Inventory

Directory Structure

[output-directory]/
├── BRAND-LOOKBOOK.md                    # Master index
├── MASTER-PLAN.md                       # Deliverable tracker
├── _BRAND-BRIEF.md                      # Internal working document
├── assets/                              # Core brand assets
│   ├── wordmark.jpg
│   ├── mark.jpg
│   ├── color-palette.jpg
│   ├── type-specimen.jpg
│   └── logo-usage.jpg
├── 01-brand-strategy/
│   └── BRAND-STRATEGY.md
├── 02-logo-system/
│   ├── LOGO-SYSTEM.md
│   └── assets/ (4 visual assets)
├── 03-color-system/
│   ├── COLOR-SYSTEM.md
│   └── assets/ (4 visual assets)
├── 04-typography/
│   └── TYPOGRAPHY.md
├── 05-art-direction/
│   ├── ART-DIRECTION.md
│   └── assets/ (3 state illustrations)
├── 06-iconography/
│   └── ICONOGRAPHY.md
├── 07-patterns-textures/
│   ├── PATTERNS-TEXTURES.md
│   └── assets/ (1 pattern library)
├── 08-motion-animation/
│   ├── MOTION-ANIMATION.md
│   └── assets/ (2 visual assets)
├── 09-brand-applications/
│   ├── BRAND-APPLICATIONS.md
│   └── assets/ (3 mockups)
├── 10-social-templates/
│   ├── SOCIAL-TEMPLATES.md
│   └── assets/ (1 template kit)
├── 11-email-templates/
│   ├── EMAIL-TEMPLATES.md
│   └── assets/ (1 email mockup)
├── 12-grid-layout/
│   └── GRID-LAYOUT.md
├── 13-ui-components/
│   └── UI-COMPONENTS.md
├── 14-brand-governance/
│   └── BRAND-GOVERNANCE.md
├── 15-brand-architecture/
│   └── BRAND-ARCHITECTURE.md
├── 16-design-tokens/
│   ├── DESIGN-TOKENS.md
│   ├── tokens/ (7 .tokens.json files)
│   ├── figma/figma-tokens.json
│   ├── style-dictionary/ (config + build script)
│   └── platforms/ (css/, tailwind/, ios/, android/)
├── 17-vector-assets/
│   ├── VECTOR-ASSETS.md
│   ├── svg/ (14 SVG files)
│   └── production/PRODUCTION-NOTES.md
└── 18-brand-guide/
    ├── brand-guide.html
    └── FIGMA-SETUP.md

Quality Standards

Every deliverable must meet these standards:

1. No placeholder content — every section has real, specific, actionable content
2. Exact values — hex codes, font names, spacing values, easing curves are precise and consistent across all documents
3. Cross-referencing — documents reference each other where relevant (e.g., color system references accessibility matrix, typography references the deprecated fonts)
4. Implementation-ready — CSS, TSX, Swift, Android code must be syntactically correct and copy-pasteable
5. Accessible — WCAG contrast ratios documented, reduced-motion fallbacks included, SVGs have titles
6. No cool grays or pure black — if the brand uses warm tones (most do), enforce warm neutrals everywhere
7. Consistent naming — token names, CSS variables, file names follow the same conventions throughout

Reference Files

Read these for detailed specifications when generating each deliverable: