# Brand Identity
> OmegaOS-shipped Complete Brand Identity System v2.1. From discovery to a deployed interactive brand book: Kapferer Brand Identity Prism, 2-3 switchable variants, typography, colors, voice, logo direction, AI prompts, design tokens, component previews (Next.js brand book on Vercel). Use when user says "/omg-brand-identity", "/brand-identity", "brand book", "brand system", or "visual identity". Step 3 of the OmegaOS new-project pipeline: run /omg-vision then /omg-prd first, follow with /omg-planner then `omega plan-run`.
- Skill: `agentik-os/brand-identity` (Agent Skill)
- Install (CLI): `npx skillmds@latest add agentik-os/brand-identity`
- Raw SKILL.md: https://api.skillmd.com/api/skills/agentik-os/brand-identity/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Product & Planning
- Author: agentik-os (https://skillmd.com/u/agentik-os)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/agentik-os/brand-identity
---
# /brand-identity - Complete Brand Identity System v2.1
```
╔══════════════════════════════════════════════════════════════════╗
║ ║
║ ██████╗ ██████╗ █████╗ ███╗ ██╗██████╗ ║
║ ██╔══██╗██╔══██╗██╔══██╗████╗ ██║██╔══██╗ ║
║ ██████╔╝██████╔╝███████║██╔██╗ ██║██║ ██║ ║
║ ██╔══██╗██╔══██╗██╔══██║██║╚██╗██║██║ ██║ ║
║ ██████╔╝██║ ██║██║ ██║██║ ╚████║██████╔╝ ║
║ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝╚═════╝ ║
║ ║
║ Brand Identity System v2.1 ║
║ "From soul to screen. Every pixel intentional." ║
║ ║
║ 🔍 Discovery → 🧠 Strategy → 🎨 Design → 🏗️ Build → 🚀 Deploy ║
║ ║
║ by Dafnck Studio ║
╚══════════════════════════════════════════════════════════════════╝
```
**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
| Deliverable | Description |
|-------------|-------------|
| **Kapferer Prism** | 6-facet brand identity prism (Physique, Personality, Culture, Relationship, Reflection, Self-Image) |
| **Emotional Core** | Who, how they feel, anti-positioning |
| **Brand Personality** | Persona, adjectives, manifesto, archetypes |
| **2-3 Brand Variants** | Complete identity systems (colors, type, voice, imagery) |
| **Color Palettes** | 5-7 colors per variant with emotional intent + oklch + hex + hsl |
| **Typography System** | 2-3 font pairings per variant with live specimens |
| **Voice & Tone** | Microcopy examples, do/don't, tone spectrum radar chart |
| **Visual Language** | Textures, materials, eras, photography/illustration style |
| **Logo Direction** | 3 logo concepts with rationale (wordmark/icon/combo) |
| **Anti-Pattern List** | 10+ specific things the brand must NEVER do |
| **AI Image Prompts** | 7+ ready-to-use prompts per variant (Midjourney/Flux) |
| **Design Tokens** | CSS custom properties + Tailwind config export |
| **Component Preview** | Live buttons, cards, inputs in each variant |
| **Spacing & Grid** | 4px/8px base grid, spacing scale, layout system |
| **Motion Guidelines** | Easing curves, durations, transition rules |
| **Dark Mode** | Full dark mode treatment per variant |
| **Social Media Kit** | Profile/cover specs, post dimensions |
| **Favicon + OG** | SVG favicon, Open Graph image template |
| **Dev Handoff** | Selected variant → CLAUDE.md brand section for /team |
| **Interactive Brand Book** | Next.js site with variant switcher → Vercel URL |
---
## CRITICAL: PROJECT DIRECTORY CONVENTION
**ALWAYS ASK the user: "Is this a personal project or a client project?"**
Resolve `` from `~/.omega/config.toml` (`projects_dir`). Never
hardcode `~/VibeCoding` or a maintainer home path.
| Answer | Directory | Example |
|--------|-----------|---------|
| **Personal** | `/side-business/[ProjectName]/` (fallback: existing `work/`) | `side-business/Atma/` |
| **Client** | `/customers/[ProjectName]/` (fallback: existing `clients/`) | `customers/Resonant/` |
This question is asked during Phase 1 intake. NEVER assume — always ask.
```bash
# Personal project
$PROJECTS_DIR/side-business/Atma/
# Client project
$PROJECTS_DIR/customers/Resonant/
# The brand book Next.js project goes INSIDE
$PROJECTS_DIR//[ProjectName]/brand-book/
```
### Directory Structure
```
$PROJECTS_DIR//[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:
| Category | Description | Example |
|----------|-------------|---------|
| **Descriptive** | Says what it does | "TaskFlow", "MindMap" |
| **Evocative** | Suggests a feeling | "Atma", "Lume", "Verve" |
| **Abstract** | Made-up or unusual | "Kova", "Zeph", "Nōva" |
| **Metaphorical** | Borrows from nature/culture | "Compass", "Forge", "Atlas" |
| **Acronym/Blend** | Combined words | "OptiVerse", "AgentIQ" |
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.**
```bash
# 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
```
| File | If Found | How It's Used |
|------|----------|---------------|
| `.prd/DESIGN-SYSTEM.md` | **Read it.** Extract color preferences, typography suggestions, component patterns, spacing rules. These become **hard constraints** for Phase 3 (Creative Direction) — not just inspiration, actual requirements. |
| `.prd/TECH-ARCHITECTURE.md` | **Read it.** Identify the tech stack (Tailwind vs vanilla CSS, design token format needs, component library in use). Informs Phase 4 design token export format (e.g., Tailwind config vs CSS custom properties vs both). |
| `VISION.md` | **Read it.** This is the output of `/vision` — emotional positioning, brand soul, target feelings, anti-positioning. Use it as the **foundation** for Phase 2 (Strategic Foundation) instead of rediscovering from scratch. Skip redundant discovery questions already answered in VISION.md. |
**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:**
| Data Point | Required? | Source |
|------------|-----------|--------|
| Brand Name | YES | Client doc or Phase 0 |
| Product Description | YES | Client doc or ask |
| Target Audience | YES | Client doc or ask |
| Business Model | YES | Client doc or ask |
| Competitors | YES | Client doc or research |
| Existing Brand Assets | NICE | Client files |
| Industry/Sector | YES | Infer or ask |
| Color Preferences | NICE | Ask |
| Color Avoidances | NICE | Ask |
| Reference Brands | NICE | Ask |
| Aesthetic Era | NICE | Ask |
| Logo Preference | NICE | Ask |
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
```markdown
# 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
| Facet | Description | Question to Answer |
|-------|-------------|-------------------|
| **Physique** | The tangible, physical qualities of the brand — visual identity, colors, logo, product look, distinctive visual features | "What does the brand LOOK like? What physical traits make it instantly recognizable?" |
| **Personality** | The brand's character and tone of voice — if the brand were a person, how would they speak, behave, express themselves? | "If this brand walked into a room, what impression would they make? How do they talk?" |
| **Culture** | The values and principles the brand stands for — the beliefs, ideology, and mission that drive every decision | "What does this brand fundamentally believe in? What values would it never compromise on?" |
| **Relationship** | The type of relationship between brand and customer — mentor, friend, guide, partner, confidant, accomplice | "What role does this brand play in the customer's life? How do they interact?" |
| **Reflection** | The outward mirror — how the target customer sees themselves reflected in the brand, the idealized user image the brand projects | "Who does the brand's communication portray as its user? What aspirational image does it project?" |
| **Self-Image** | The inward mirror — how the customer's internal self-perception changes when using the brand | "When someone uses this brand, how do they feel about THEMSELVES? What internal dialogue changes?" |
### Template for Each Facet
When filling the prism during Phase 2, use this structure for each facet:
```markdown
### [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
```
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)