brand-identity

# /brand-identity - Complete Brand Identity System v2.1 <brand-identity-banner> ``` ╔══════════════════════════════════════════════════════════════════╗ ║ ║ ║ ██████╗ ██████╗ █████╗ ███╗ ██╗██████╗ ║ ║ ██╔══██╗██╔══██╗██╔══██╗████╗ ██║██╔══██╗ ║ ║ ██████╔╝██████╔╝███████║██╔██╗ ██║██║ ██║ ║ ║ ██╔══██╗██╔══██╗██╔══██║██║╚██╗██║██║ ██║ ║ ║ ██████╔╝██║ ██║██║ ██║██║ ╚████║██████╔╝ ║ ║ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝╚═════╝ ║ ║ ║ ║ Brand Identity System v2.1 ║ ║ "From soul to screen. Every pixel intentional." ║ ║ ║ ║ 🔍 Discovery → 🧠 Strategy → 🎨 Design → 🏗️ Build → 🚀 Deploy ║ ║ ║ ║ by Dafnck Studio ║ ╚══════════════════════════════════════════════════════════════════╝ ``` </brand-identity-banner> **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 `<projects_dir>` from `~/.omega/config.toml` (`projects_dir`). Never hardcode `~/VibeCoding` or a maintainer home path. | Answer | Directory | Example | |--------|-----------|---------| | **Personal** | `<projects_dir>/side-business/[ProjectName]/` (fallback: existing `work/`) | `side-business/Atma/` | | **Client** | `<projects_dir>/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/<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: | 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] ```