Brand Identity

/brand-identity - Complete Brand Identity System v2.1

Display the banner above when starting.

CRITICAL: 100% AUTONOMOUS EXECUTION

This skill runs FULLY AUTONOMOUSLY from Phase 0 through Phase 7.

Rules:

• NEVER ask "should I continue to the next phase?" — Always auto-proceed.
• NEVER ask "ready for Phase X?" — Just do it.
• NEVER ask permission between phases — The only acceptable questions are branding/discovery questions (Phase 0-1) that gather actual project information from the user.
• After Phase 1 (intake) is complete, ALL remaining phases execute without any user interaction.
• Phase transitions are silent: finish one phase → start the next immediately.
• If something fails (build error, deploy error), fix it yourself and continue.

Acceptable questions: "What's the product?" "Who's the audience?" "Color preferences?" (Phase 0-1 intake) FORBIDDEN questions: "Should I proceed?" "Ready for Phase 3?" "Want me to continue?" "Shall I deploy?"

OVERVIEW

This skill creates a complete, interactive Brand Identity System deployed as a Next.js website on Vercel. The client receives a URL with their full brand book featuring 2-3 switchable brand variants they can explore and approve.

What Gets Created

CRITICAL: PROJECT DIRECTORY CONVENTION

ALWAYS ASK the user: "Is this a personal project or a client project?"

Resolve <projects_dir> from ~/.omega/config.toml (projects_dir). Never hardcode ~/VibeCoding or a maintainer home path.

This question is asked during Phase 1 intake. NEVER assume — always ask.

# Personal project
$PROJECTS_DIR/side-business/Atma/

# Client project
$PROJECTS_DIR/customers/Resonant/

# The brand book Next.js project goes INSIDE
$PROJECTS_DIR/<category>/[ProjectName]/brand-book/

Directory Structure

$PROJECTS_DIR/<category>/[ProjectName]/
├── brand-book/                   # Next.js brand book site (deployed to Vercel)
│   ├── src/
│   ├── public/
│   ├── package.json
│   └── CLAUDE.md
├── docs/                         # All strategy documents
│   ├── DISCOVERY-BRIEF.md
│   ├── STRATEGY.md
│   ├── CREATIVE-DIRECTION.md
│   ├── AI-PROMPTS.md
│   ├── ANTI-PATTERNS.md
│   └── BRAND-SORT.md
├── exports/                      # Dev handoff files
│   ├── design-tokens.css         # CSS custom properties
│   ├── tailwind-brand.ts         # Tailwind config extension
│   ├── brand-claude-section.md   # Ready to paste in project CLAUDE.md
│   └── figma-tokens.json         # Design tokens in Figma format
├── BRAND-VARIANTS.json           # Complete variant data
└── CLAUDE.md                     # Project instructions

UNIFIED WORKFLOW

/brand-identity
    │
    ▼
╔═══════════════════════════════════════════════════════════════════╗
║  PHASE 0: BRAND NAMING (optional)                                ║
║  ────────────────────────────────                                ║
║  • Only if brand name is NOT decided                             ║
║  • Brainstorm 10+ name candidates                                ║
║  • Check domain availability (WebSearch)                         ║
║  • Present shortlist with rationale                              ║
║  • User selects → proceed                                        ║
╚═══════════════════════════════════════════════════════════════════╝
    │
    ▼
╔═══════════════════════════════════════════════════════════════════╗
║  PHASE 1: INTAKE & DISCOVERY (10-30 min)                         ║
║  ────────────────────────────                                    ║
║  • Auto-check: .prd/DESIGN-SYSTEM.md, TECH-ARCHITECTURE.md,     ║
║    VISION.md → use as constraints/foundation if they exist       ║
║  • Read client docs (PRD, PDF, brief, vision)                    ║
║  • Analyze existing data sufficiency                             ║
║  • Ask targeted questions for missing info                       ║
║  • Research competitor visual identities (WebFetch)              ║
║  • Understand: product, audience, market, competitors            ║
║  • Output: DISCOVERY-BRIEF.md                                    ║
╚═══════════════════════════════════════════════════════════════════╝
    │
    ▼
╔═══════════════════════════════════════════════════════════════════╗
║  PHASE 2: STRATEGIC FOUNDATION (3 parallel agents)               ║
║  ──────────────────────────────────────────────                  ║
║  🤖 Agent 1: Emotional Core + Anti-Positioning                   ║
║  🤖 Agent 2: Brand Personality + Manifesto + Archetypes          ║
║  🤖 Agent 3: Competitor/Market Analysis + Positioning Map        ║
║  • Output: STRATEGY.md                                           ║
╚═══════════════════════════════════════════════════════════════════╝
    │
    ▼
╔═══════════════════════════════════════════════════════════════════╗
║  PHASE 3: CREATIVE DIRECTION (5 parallel agents)                 ║
║  ────────────────────────────────────────────                    ║
║  🤖 Agent 1: Color Systems (3 palettes + dark mode + a11y)       ║
║  🤖 Agent 2: Typography Research (3 type systems + scale)        ║
║  🤖 Agent 3: Visual Language + Moodboard + Motion + Spacing      ║
║  🤖 Agent 4: Voice & Tone + Microcopy + Social Voice             ║
║  🤖 Agent 5: Logo Direction (3 concepts + favicon + OG)          ║
║  • Output: CREATIVE-DIRECTION.md                                 ║
╚═══════════════════════════════════════════════════════════════════╝
    │
    ▼
╔═══════════════════════════════════════════════════════════════════╗
║  PHASE 4: VARIANT ASSEMBLY + DESIGN TOKENS (sequential)          ║
║  ─────────────────────────────────────────────────               ║
║  • Combine Phase 2 + Phase 3 into 2-3 complete brand variants    ║
║  • Each variant = colors + type + voice + imagery + logo          ║
║  • Generate CSS custom properties per variant                    ║
║  • Generate Tailwind config extension per variant                ║
║  • Generate spacing scale + grid system                          ║
║  • Name each variant (e.g., "Eclipse", "Horizon", "Pulse")       ║
║  • Output: BRAND-VARIANTS.json + exports/                        ║
╚═══════════════════════════════════════════════════════════════════╝
    │
    ▼
╔═══════════════════════════════════════════════════════════════════╗
║  PHASE 5: AI PROMPT PACK + ANTI-PATTERNS (2 parallel agents)     ║
║  ──────────────────────────────────────────────────              ║
║  🤖 Agent 1: AI Image Prompting Starter Pack (7+ per variant)    ║
║  🤖 Agent 2: Anti-Pattern List (10+ specific rules)              ║
║  • Output: AI-PROMPTS.md + ANTI-PATTERNS.md                      ║
╚═══════════════════════════════════════════════════════════════════╝
    │
    ▼
╔═══════════════════════════════════════════════════════════════════╗
║  PHASE 6: BUILD INTERACTIVE BRAND BOOK (Next.js)                 ║
║  ──────────────────────────────────────────────                  ║
║  🤖 Agent: Next.js Developer (nextjs-developer)                  ║
║  • Scaffold Next.js project with Tailwind + shadcn/ui            ║
║  • Build brand book pages with variant switcher                  ║
║  • Typography live specimens, color swatches with copy buttons   ║
║  • Component preview (buttons, cards, inputs per variant)        ║
║  • Motion guidelines with live animation demos                   ║
║  • Favicon + OG meta for sharing                                 ║
║  • Dark mode toggle per variant                                  ║
║  • Responsive (mobile + desktop)                                 ║
║  • Footer: "Created by Dafnck Studio"                            ║
║  • Output: Complete Next.js project                              ║
╚═══════════════════════════════════════════════════════════════════╝
    │
    ▼
╔═══════════════════════════════════════════════════════════════════╗
║  PHASE 7: DEPLOY + DEV HANDOFF                                   ║
║  ────────────────────────                                        ║
║  • Build check (0 errors)                                        ║
║  • Deploy to Vercel (Dafnck Studio account)                      ║
║  • Generate dev handoff exports                                  ║
║  • Generate BRAND-SORT.md (quick reference)                      ║
║  • Return shareable URL to user                                  ║
║  • 🎉 Brand book live! Share with client.                        ║
╚═══════════════════════════════════════════════════════════════════╝

PHASE 0: BRAND NAMING (Optional)

Only run if the brand name is NOT decided yet.

When the user says "the name isn't decided" or provides no name:

1. Research the space — Use WebSearch to understand naming conventions in the industry
2. Generate 10-15 name candidates across categories:

3. For each candidate, check:

   • Domain availability (.com, .io, .app) via WebSearch
   • Social handle availability (quick search)
   • Trademark conflicts (basic search)
   • Pronunciation in multiple languages
   • Memorability score (1-10)

4. Present shortlist of 5 with rationale

5. User selects → proceed to Phase 1

PHASE 1: INTAKE & DISCOVERY

Step 1.0: PRD & Vision Intake (Automatic)

Before asking ANY questions, silently check for existing project documentation.

# Check for PRD design system, tech architecture, and vision doc
ls -la .prd/DESIGN-SYSTEM.md .prd/TECH-ARCHITECTURE.md VISION.md 2>/dev/null

Behavior:

• If VISION.md exists: Pre-fill emotional core, anti-positioning, and brand personality seeds from it. Phase 2 agents refine rather than start from zero. Discovery interview (Step 1.3) skips questions already answered.
• If DESIGN-SYSTEM.md exists: Lock in any specified colors, fonts, or spacing as constraints. Creative Direction agents (Phase 3) work within these constraints rather than exploring freely.
• If TECH-ARCHITECTURE.md exists: Note the stack for token export format decisions in Phase 4. If Tailwind is used, prioritize tailwind-brand.ts. If CSS-only, prioritize design-tokens.css.
• If none exist: Proceed normally — no impact on workflow.

Log what was found in the DISCOVERY-BRIEF.md under a ## Prior Documentation section.

Step 1.1: Data Assessment

When user provides input (PRD, PDF, brief, vision doc, or description):

1. Read all provided documents using Read tool (PDF native) or read-documents.sh (Word)
2. Extract key information:

3. Assess data sufficiency:
   • Sufficient (>70% data points) → Proceed directly to Phase 2 (no confirmation needed)
   • Partial (40-70%) → Ask 3-5 targeted questions, then proceed immediately
   • Insufficient (<40%) → Run full discovery interview, then proceed immediately

Step 1.2: Competitor Visual Research

ALWAYS do this, even with sufficient data.

Use WebSearch + WebFetch to analyze 3-5 competitor websites:

• Screenshot or describe their visual identity
• Note: color schemes, typography, tone, imagery style
• Identify what they do well and what they do poorly
• Map the visual landscape to find whitespace

Step 1.3: Discovery Interview (if needed)

Ask these questions in order, grouping 2-3 per message to move fast:

Block 1 — Identity:

1. What's the product in one sentence?
2. What problem does it solve? (Emotional, not just functional)
3. Who is this for? Be specific — not "everyone"

Block 2 — Feeling: 4. How should someone FEEL when they open the app/site? (3 emotions max) 5. How should they feel when they CLOSE it? 6. What existing product/brand has a feeling you admire? (Even from different industry)

Block 3 — Positioning: 7. What is this product absolutely NOT? (3 things it must never become) 8. Who are the direct competitors, and what do they get wrong? 9. If this brand were a person, describe them (age, style, music taste, vibe)

Block 4 — Visual Direction: 10. Any color preferences or colors to AVOID? 11. What aesthetic era appeals? (Minimal 2020s? Bold 90s? Retro-futurism? Y2K?) 12. Logo preference: initials/monogram, icon/symbol, wordmark, or combination?

Block 5 — Business: 13. Business description in one line (what you sell to whom) 14. Revenue model (subscription, one-time, freemium, etc.) 15. What makes you different from competitors in ONE word?

Block 6 — Project Setup: 16. Is this a personal/AgentikOS project or a CLIENT project? → Determines directory: work/ vs clients/

Step 1.4: Output DISCOVERY-BRIEF.md

# Discovery Brief — [Brand Name]

## Product
[One paragraph — what it is, what it does, why it exists]

## Target Audience
[Specific emotional description, NOT demographics. Who are they emotionally?]

## Market Position
[Where this sits vs competitors. What's the whitespace?]

## Competitor Visual Landscape
[Summary of 3-5 competitor visual identities. What's overdone? What's missing?]

## Emotional Direction
[3 core emotions / desired feelings. Opening feeling + closing feeling.]

## Anti-Positioning
[What this is NOT. Specific traps to avoid.]

## Visual Signals
[Any expressed preferences: colors, eras, references, avoidances]

## Business Model
[Revenue model + key differentiator]

## Prior Documentation
[List any .prd/DESIGN-SYSTEM.md, .prd/TECH-ARCHITECTURE.md, or VISION.md found.
Summarize key constraints extracted from each. "None found" if none exist.]

## Logo Direction
[Preference: wordmark, monogram, icon, combination, or undecided]

Save to [ProjectDir]/docs/DISCOVERY-BRIEF.md

KAPFERER BRAND IDENTITY PRISM (MANDATORY)

The Kapferer Prism is a MANDATORY framework for every brand identity project. It must be filled during Phase 2 (Strategic Foundation) and displayed as a dedicated page in the brand book.

The 6 Facets

Template for Each Facet

When filling the prism during Phase 2, use this structure for each facet:

### [Facet Name]

**Core statement:** [One sentence that captures this facet]

**Details:**
- [3-5 specific, vivid descriptions — no generic startup jargon]

**Manifests as:**
- In design: [How this facet shows up visually]
- In copy: [How this facet shows up in writing]
- In UX: [How this facet shows up in interactions]

**Anti-pattern:** [What this facet is explicitly NOT]

Example (Premium Coaching Brand)

PHYSIQUE: Rose-gold tones, aviation-inspired typography, warm lighting, tactile textures
PERSONALITY: A sharp-dressed mentor who speaks with authority AND warmth — never cold, never casual
CULTURE: Excellence without arrogance, human connection in a digital world, earned trust
RELATIONSHIP: A copilot — not a teacher above you, not a friend beside you, but a trusted navigator
REFLECTION: A successful dirigeant who has "made it" but still invests in growth — not a struggling beginner
SELF-IMAGE: "I'm the kind of leader who invests in strategic thinking, not just daily firefighting"

Brand Book Page: /prism

The prism MUST be generated as a page in the brand book at route /prism. The page should display:

• A visual hexagonal or diamond-shaped prism diagram with the 6 facets
• Each facet as an expandable card with the full details
• Two axes labeled: "Externalization" (Physique, Relationship, Reflection) vs "Internalization" (Personality, Culture, Self-Image)
• Two poles labeled: "Sender/Brand" (Physique, Personality) vs "Receiver/Customer" (Reflection, Self-Image)
• The prism should be variant-aware (colors adapt to active variant)

PHASE 2: STRATEGIC FOUNDATION

Launch 3 agents IN PARALLEL using Task tool:

Agent 1: Emotional Core Strategist

subagent_type: "general-purpose"
model: "opus"
prompt: |
  You are a senior brand strategist specializing in emotional positioning.

  Given this discovery brief:
  ---
  [INSERT FULL DISCOVERY-BRIEF.md CONTENT]
  ---

  Create the EMOTIONAL CORE:

  1. **Primary Emotions** (3 max):
     - For each: name, intensity (1-10), description, UI manifestation
     - How this emotion shows up in: color, typography, spacing, motion, copy

  2. **Emotional Journey Map:**
     - First impression (0-3 seconds): what they feel, what they see
     - Exploration phase (first 5 minutes): curiosity triggers, aha moments
     - Regular use (daily/weekly): comfort, reliability, delight moments
     - Advocacy moment (when they tell someone): pride, identity, story they tell

  3. **Anti-Positioning Matrix:**
     - List 5+ specific things this brand is NOT
     - For each: the trap, why it's wrong, what to do instead
     - Reference REAL products/brands by name

  4. **Internal Compass:**
     - One sentence that settles ANY design debate
     - Must be specific, opinionated, and memorable
     - Test: could a designer use this to make a decision alone?

  5. **Emotional Design Principles** (5):
     - Format: "[Principle] over [Counter-Principle]"
     - For each: one-sentence explanation + concrete UI example

  6. **Kapferer Brand Identity Prism** (MANDATORY):
     Fill ALL 6 facets with specific, vivid descriptions:
     - **Physique:** Tangible visual qualities (colors, shapes, textures, distinctive features)
     - **Personality:** Character/tone of voice (how the brand speaks, behaves, expresses itself)
     - **Culture:** Core values and beliefs that drive every brand decision
     - **Relationship:** The type of relationship with the customer (mentor, guide, partner, copilot, etc.)
     - **Reflection:** The outward mirror — how customers see themselves reflected in the brand
     - **Self-Image:** The inward mirror — how customers' self-perception changes when using the brand
     For each facet: core statement + 3-5 specific details + how it manifests in design/copy/UX + anti-pattern

  Format as structured markdown. Be EXTREMELY specific — no startup jargon.
  Reference real brands, real products, real design patterns.

Agent 2: Brand Personality Architect

subagent_type: "general-purpose"
model: "opus"
prompt: |
  You are a creative director defining brand personality.

  Given this discovery brief:
  ---
  [INSERT FULL DISCOVERY-BRIEF.md CONTENT]
  ---

  Create the BRAND PERSONALITY:

  1. **Brand as a Person:**
     - Age, gender expression, energy level
     - What music they listen to (name specific artists, albums, playlists)
     - What they wear (specific brands, styles, not "casual")
     - Their apartment/workspace (describe the room: furniture, lighting, objects)
     - Their favorite apps (3-5 specific apps they actually use)
     - Their bookshelf (3-5 specific books)
     - Their Netflix queue (3-5 specific films/shows)
     - How they speak (cadence, vocabulary, humor style, catchphrases)
     - Their morning routine (what do they do first?)

  2. **5 Brand Adjectives** (UNUSUAL ones — NOT modern/clean/simple/innovative):
     - For each: the adjective, what it means in this brand's context,
       how it manifests visually, how it manifests in copy

  3. **3 Cross-Industry References:**
     - Brands/aesthetics from COMPLETELY different industries
     - For each: what specifically resonates, what to borrow, what to reject
     - Be specific: "The material quality of Aesop packaging" not "Aesop"

  4. **Manifesto:**
     - "We believe that..." (one powerful sentence, max 20 words)
     - Extended manifesto (3-5 sentences, for About page)
     - Anti-manifesto: "We reject..." (one sentence)

  5. **Brand Archetypes:**
     - Primary archetype (Creator, Explorer, Sage, Hero, Magician, etc.)
     - Why this archetype fits
     - Shadow archetype (what this brand becomes if it loses its way)
     - Adjacent archetype (secondary influence)

  Format as structured markdown. Be BOLD, specific, opinionated.
  Every description should be vivid enough to cast an actor for the role.

Agent 3: Market Positioning Analyst

subagent_type: "general-purpose"
model: "opus"
prompt: |
  You are a market positioning analyst and competitive strategist.

  Given this discovery brief:
  ---
  [INSERT FULL DISCOVERY-BRIEF.md CONTENT]
  ---

  Create the MARKET POSITIONING:

  1. **Competitive Landscape:**
     - Top 5 competitors (direct AND indirect)
     - For each: name, one-line positioning, visual identity summary
       (dominant colors, font style, tone), key weakness we exploit

  2. **Positioning Map:**
     - Define 2 key axes relevant to this market
       (e.g., Premium↔Accessible, Playful↔Serious, Technical↔Emotional)
     - Place this brand AND all 5 competitors on the map
     - Identify the WHITESPACE — the unclaimed position
     - Describe why this position is defensible

  3. **Unique Value Proposition:**
     - One sentence that NO competitor could credibly claim
     - 3 supporting proof points
     - How this UVP manifests in the visual identity

  4. **Category Design:**
     - Is this brand creating a new category or entering existing?
     - If new: name the category, define its rules
     - If existing: what existing assumption does this brand violate?

  5. **Target Audience Deep-Dive:**
     - 3 emotional archetypes (NOT demographics, NOT job titles)
     - For each: name, emotional state, life moment, "finally" trigger,
       top 3 objections, how the brand visually addresses each objection

  6. **Visual Differentiation Strategy:**
     - What the competitors all do visually (the cliché)
     - What THIS brand does differently (the break)
     - The one visual element that will make this brand instantly recognizable

  Format as structured markdown. Use REAL competitor names.

After all 3 agents complete → Read outputs → Synthesize into STRATEGY.md

PHASE 3: CREATIVE DIRECTION

Launch 5 agents IN PARALLEL using Task tool:

Agent 1: Color Systems Designer

subagent_type: "general-purpose"
model: "opus"
prompt: |
  You are a color theory expert and brand designer.

  Given this brand strategy:
  ---
  [INSERT STRATEGY.md CONTENT]
  ---

  Create 3 DISTINCT COLOR PALETTES (each for a different brand variant):

  For EACH palette:

  1. **Palette Name** (evocative name, not "Option A")

  2. **Colors (7 per palette):**

     For each color provide ALL of these:
     - Creative name (e.g., "Midnight Ink", NOT "Dark Blue")
     - Hex code (e.g., #1a1a2e)
     - oklch value (e.g., oklch(0.15 0.02 280))
     - HSL value (e.g., hsl(240, 28%, 14%))
     - RGB value (e.g., rgb(26, 26, 46))
     - Role: Primary / Secondary / Accent / Background / Surface / Muted / Border / Destructive
     - Emotional intent: what this color communicates in one sentence

     Required roles per palette:
     - Primary (main brand color)
     - Secondary (supporting brand color)
     - Accent (attention-grabbing, used sparingly)
     - Background (page background)
     - Surface (card/component background)
     - Muted (subtle backgrounds, disabled states)
     - Border (dividers, outlines)

  3. **Dark Mode Palette:**
     - For EACH of the 7 colors, provide the dark mode equivalent
     - Same format: name, hex, oklch, hsl, rgb, role
     - Dark mode is NOT just "invert" — it's a thoughtful adaptation

  4. **Color Relationships:**
     - Primary text on Background: contrast ratio (must be >= 4.5:1 for WCAG AA)
     - Primary text on Surface: contrast ratio
     - Accent on Background: contrast ratio
     - Which combinations are SAFE for body text
     - Which combinations are ONLY for large text/headings

  5. **Accessibility:**
     - Color-blind safe? (deuteranopia, protanopia, tritanopia)
     - If not fully safe: which pairs to avoid, alternatives
     - High-contrast mode adaptation

  6. **Color Psychology:**
     - Why this palette was chosen
     - Cultural considerations (any color meanings that vary by culture)
     - Industry context (does this break conventions? follow them?)

  7. **Usage Rules:**
     - Accent color: max % of screen surface (e.g., "5-10% max")
     - Primary: where it appears (buttons, links, headers?)
     - Background vs Surface: when to use which
     - Gradient rules: allowed? forbidden? direction constraints?

  REQUIREMENTS:
  - Palettes must feel DISTINCT (not just hue shifts of each other)
  - One palette should be warm, one cool, one neutral/unexpected
  - ALL text combinations must pass WCAG AA (4.5:1 for normal text)
  - Provide oklch values for modern Tailwind v4 compatibility
  - Include an "unexpected" color in each palette
  - For PREMIUM-positioned brands: include a gold/champagne accent color in at least one variant
    (e.g., #C9A96E warm gold, #D4AF37 classic gold) — gold works for borders, icon accents,
    hover states, premium badges, and CTA highlights

  Format as structured markdown with JSON code blocks for machine-readable data.

Agent 2: Typography Researcher

subagent_type: "general-purpose"
model: "opus"
prompt: |
  You are a typography expert and brand designer.

  Given this brand strategy:
  ---
  [INSERT STRATEGY.md CONTENT]
  ---

  Research and propose 3 DISTINCT TYPOGRAPHY SYSTEMS:

  For EACH system:

  1. **System Name** (e.g., "Eclipse" — matches color variant name)

  2. **Display/Heading Font:**
     - Font name (MUST be on Google Fonts)
     - Google Fonts URL (exact link)
     - Weights: which weights to load (e.g., 500, 600, 700, 800)
     - Personality: what this font communicates (3 adjectives)
     - Why: specific reason this font was chosen for this brand
     - Character: what makes this font DISTINCTIVE vs generic alternatives
     - Style: serif, sans-serif, slab, display, mono, handwritten?

  3. **Body/Text Font:**
     - Font name (Google Fonts)
     - Google Fonts URL
     - Weights: 400, 500, (600 optional)
     - Readability: x-height, letter spacing, line height notes
     - Pairing rationale: WHY this body + display combination works
       (contrast, harmony, shared geometry, era compatibility)

  4. **Monospace/Accent Font** (required if product has code/technical elements):
     - Font name + Google Fonts URL
     - When to use: code blocks, labels, metadata, timestamps

  5. **Type Scale:**
     Base size: 16px (1rem)
     Scale ratio: (e.g., 1.25 Major Third, 1.333 Perfect Fourth)

     | Name | Size | Line Height | Letter Spacing | Weight | Use Case |
     |------|------|-------------|----------------|--------|----------|
     | xs | ?px | ? | ? | 400 | Captions, metadata |
     | sm | ?px | ? | ? | 400 | Secondary text |
     | base | 16px | 1.6 | 0 | 400 | Body text |
     | lg | ?px | ? | ? | 500 | Lead paragraphs |
     | xl | ?px | ? | ? | 600 | Section headers |
     | 2xl | ?px | ? | ? | 600 | Page sub-headers |
     | 3xl | ?px | ? | ? | 700 | Page titles |
     | 4xl | ?px | ? | ? | 700 | Hero sub-headlines |
     | 5xl | ?px | ? | ? | 800 | Hero headlines |

  6. **Typography Rules:**
     - Max line length: ? characters (optimal reading width)
     - Paragraph spacing: ? (relative to font size)
     - Heading capitalization: Title Case / Sentence case / UPPERCASE / lowercase?
     - Display font: used for headings only? Also buttons? Also nav?
     - Body font: used for body only? Also UI labels? Also inputs?
     - Number style: tabular or proportional? Oldstyle or lining?
     - Ligatures: on or off?
     - Font feature settings: any special OpenType features to enable?

  7. **Google Fonts Import Code:**
     ```html
     <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
     ```
     AND next/font import:
     ```typescript
     import { FontName } from 'next/font/google'
     const heading = FontName({ subsets: ['latin'], weight: ['600', '700'] })
     ```

  REQUIREMENTS:
  - ALL fonts must be on Google Fonts (free, no licensing issues)
  - BANNED fonts: Inter, Roboto, Arial, Open Sans, Lato, Montserrat, Poppins,
    Nunito, Raleway, Source Sans Pro (too generic, too overused)
  - Each system must feel GENUINELY different (serif vs sans, geometric vs humanist, etc.)
  - Consider character: Fraunces, Instrument Serif, Playfair Display, DM Serif,
    Clash Display, Syne, Epilogue, Urbanist, Plus Jakarta Sans, Instrument Sans,
    Bricolage Grotesque, Outfit, Figtree, Geist, Onest, Lexend, Space Mono,
    JetBrains Mono, Fira Code, IBM Plex Mono, etc.
  - Test: would a designer be excited to use this combination?

  Format as structured markdown with JSON for machine-readable type scale.

Agent 3: Visual Language + Motion + Spacing Architect

subagent_type: "general-purpose"
model: "opus"
prompt: |
  You are a visual director, motion designer, and design systems architect.

  Given this brand strategy:
  ---
  [INSERT STRATEGY.md CONTENT]
  ---

  Create the VISUAL LANGUAGE, MOTION SYSTEM, and SPACING SYSTEM for 3 brand variants.

  ## PART A: VISUAL LANGUAGE (per variant)

  For EACH variant:

  1. **Visual Direction Name**

  2. **Photography Style:**
     - Subject matter: people? objects? abstract? architecture? nature?
     - Lighting: natural, studio, dramatic, golden hour, flat, chiaroscuro?
     - Color treatment: vivid, muted, desaturated, monochrome, warm shift, cool shift?
     - Composition: centered, rule of thirds, asymmetric, close-up, wide, overhead?
     - Post-processing: grain? clean? film emulation? high contrast?
     - DO: [3 specific examples of good photography for this brand]
     - DON'T: [3 specific examples of wrong photography]

  3. **Illustration Style:**
     - Approach: geometric, organic, hand-drawn, 3D render, flat vector, isometric?
     - Line weight: thin (1px), medium (1.5px), bold (2px+), variable?
     - Detail level: minimal, moderate, intricate?
     - Color: flat fill, gradients, outlined, monochrome, full palette?
     - Animation: static, micro-animated (hover/scroll), full motion?

  4. **Texture & Materials:**
     - Surface: grain, smooth, paper, glass, concrete, fabric, metallic?
     - Background: solid, gradient, noise, pattern, subtle texture, bold pattern?
     - Border/edge: sharp, slightly rounded (4px), rounded (8px), pill, organic?
     - Shadow: none, subtle (0 1px 2px), medium, dramatic, colored shadow?
     - Opacity/Glass: none, subtle blur, glassmorphism, neumorphism?

  5. **Era & Cultural References:**
     - Time period (be specific: "1972 Swiss poster design" not "retro")
     - Art movements (Bauhaus, Swiss, Memphis, Brutalism, Art Deco, Minimalism...)
     - Cultural references (films, music, architecture, fashion, subcultures)
     - Digital-era references (specific websites, apps, or interfaces to reference)

  6. **Imagery Tone of Voice:**
     - Emotions images should evoke (3 keywords)
     - The story images tell (one sentence)
     - What is NEVER shown (5 specific things)
     - Diversity/representation guidelines

  7. **Moodboard Keywords** (10 per variant):
     - Specific enough to get relevant results on Pinterest/Dribbble/Behance
     - Mix of abstract and concrete terms

  8. **Icon Style:**
     - Weight: 1px, 1.5px, 2px?
     - Style: outline, filled, duotone, custom?
     - Corner: sharp, rounded (2px), fully round?
     - Size grid: 16px, 20px, 24px?
     - Hover animation: none, scale, color shift, stroke draw?

  ## PART B: MOTION SYSTEM (shared across variants, adapted per variant)

  1. **Easing Curves:**
     | Name | CSS Value | Use Case |
     |------|-----------|----------|
     | ease-default | cubic-bezier(0.4, 0, 0.2, 1) | General transitions |
     | ease-in | cubic-bezier(0.4, 0, 1, 1) | Elements leaving |
     | ease-out | cubic-bezier(0, 0, 0.2, 1) | Elements entering |
     | ease-bounce | cubic-bezier(0.34, 1.56, 0.64, 1) | Playful interactions |
     | ease-spring | cubic-bezier(0.175, 0.885, 0.32, 1.275) | Satisfying clicks |

  2. **Duration Scale:**
     | Name | Duration | Use Case |
     |------|----------|----------|
     | instant | 0ms | Immediate feedback |
     | fast | 100ms | Micro-interactions (hover, focus) |
     | normal | 200ms | Standard transitions |
     | slow | 300ms | Page transitions, modals |
     | slower | 500ms | Complex animations |
     | slowest | 800ms | Hero animations, reveals |

  3. **Animation Patterns:**
     - Page load: staggered fade-up? slide-in? instant? scale-in?
     - Scroll reveal: fade-up? slide-from-side? parallax? none?
     - Hover states: scale? color shift? shadow? glow? underline?
     - Click feedback: scale-down? ripple? color flash?
     - Modal entry: fade + scale? slide-up? slide-from-right?
     - Loading states: skeleton? pulse? spinner? progress bar?

  4. **Reduced Motion:**
     - What changes when `prefers-reduced-motion: reduce` is active
     - Which animations are removed vs simplified

  ## PART C: SPACING & GRID SYSTEM (shared)

  1. **Base Unit:** 4px (0.25rem)

  2. **Spacing Scale:**
     | Token | Value | Use Case |
     |-------|-------|----------|
     | space-0 | 0 | None |
     | space-1 | 4px (0.25rem) | Tight inline |
     | space-2 | 8px (0.5rem) | Icon gaps, tight padding |
     | space-3 | 12px (0.75rem) | Small component padding |
     | space-4 | 16px (1rem) | Standard padding |
     | space-5 | 20px (1.25rem) | Section gap |
     | space-6 | 24px (1.5rem) | Card padding |
     | space-8 | 32px (2rem) | Section spacing |
     | space-10 | 40px (2.5rem) | Large section gap |
     | space-12 | 48px (3rem) | Major section spacing |
     | space-16 | 64px (4rem) | Page section breaks |
     | space-20 | 80px (5rem) | Hero spacing |
     | space-24 | 96px (6rem) | Major page divisions |

  3. **Layout Grid:**
     - Container max-width: ?px
     - Column count: 12
     - Gutter width: ?px
     - Margin (mobile): ?px
     - Margin (desktop): ?px
     - Breakpoints: sm (640px), md (768px), lg (1024p

…(truncated)