Brand Architect Skill

Creates brand identity options based on your brand brief.

Capabilities

•Generate mark/logo options (SVG)
•Propose color palettes (dark/light modes)
•Suggest typography stacks
•Create mark + text compositions
•Update preview files with options
•Guide through selection process
•Record decisions

Input Requirements

Requires knowledge/BRAND_BRIEF.md with:

•Brand name and tagline
•Values and voice
•Visual direction preferences

Commands

code

/brand-architect              # Full workflow
/brand-architect marks        # Generate mark options only
/brand-architect colors       # Generate color palette options
/brand-architect typography   # Suggest typography
/brand-architect compositions # Mark + text lockups
/brand-architect review       # Review current options
/brand-architect decide       # Record selections

Workflow

Step 1: Read Brief

code

Reading knowledge/BRAND_BRIEF.md...

Brand: {name}
Tagline: "{tagline}"
Aesthetic: {aesthetic}
Mark preference: {type}

Ready to generate options.

Step 2: Generate Marks

Create 3-5 mark options based on brief:

code

Generating mark options...

OPTION 1: {description}
├─ Type: {symbol/lettermark/wordmark/icon}
├─ Concept: {what it represents}
└─ File: outputs/svg/mark/mark-v1-transparent.svg

OPTION 2: {description}
...

For each mark:

•Create transparent SVG (base)
•Create dark mode variant
•Create light mode variant
•Test at multiple sizes (16px, 80px, 400px)

Step 3: Generate Colors

Propose color palette:

code

Color Palette Proposal:

DARK MODE (default):
├─ Background: #000000
├─ Foreground: #FFFFFF
├─ Accent: {based on brand}
└─ Preview: [color swatches]

LIGHT MODE:
├─ Background: #FFFFFF
├─ Foreground: #000000
├─ Accent: {darker version}
└─ Preview: [color swatches]

Step 4: Suggest Typography

code

Typography Recommendation:

Based on your {aesthetic} aesthetic:

FONT STACK:
{stack}

RATIONALE:
- {why this fits the brand}
- {where it works well}

ALTERNATIVES:
1. {alternative stack} - {when to use}
2. {alternative stack} - {when to use}

Step 5: Update Previews

Update preview HTML files with generated options:

code

Updating previews...

✓ previews/brand/twitter-profile.html
✓ previews/brand/og-preview.html
✓ previews/brand/favicon-preview.html
✓ previews/brand/mobile-preview.html

Open these in your browser to see options in context.

Step 6: Guide Selection

code

Let's review each option in context.

MARK SELECTION:
Open previews/brand/twitter-profile.html

Which mark works best as a PFP?
1. mark-v1 - {description}
2. mark-v2 - {description}
3. mark-v3 - {description}

Wait for user input at each decision point.

Step 7: Record Decisions

Save selections to knowledge/BRAND_DECISIONS.md:

code

Recording your selections...

✓ Primary mark: mark-v3
✓ Colors: dark-first, accent #00ff88
✓ Typography: ui-monospace stack

Saved to knowledge/BRAND_DECISIONS.md

Next: Run /web-architect to generate final assets.

Mark Generation Guidelines

SVG Structure

xml

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <!-- Use paths, not text elements -->
  <path d="..." fill="currentColor"/>
</svg>

Size Variants

Size	Use
16px	Favicon
32px	Favicon @2x
80px	Small icon
160px	Medium icon
400px	PFP, large icon

Naming Convention

code

mark-{version}-{size}-{theme}.svg
mark-v1-transparent.svg     # Base
mark-v1-80-dark.svg         # Dark mode
mark-v1-80-light.svg        # Light mode

Color Generation Guidelines

Required Tokens

•Background (bg)
•Foreground (fg)
•Accent (primary action color)
•Success, Error, Warning
•Muted (secondary text)

Contrast Requirements

•Text on bg: 4.5:1 minimum
•Large text: 3:1 minimum

Output Files

code

outputs/
├── svg/
│   └── mark/
│       ├── mark-v1-transparent.svg
│       ├── mark-v1-80-dark.svg
│       ├── mark-v1-80-light.svg
│       ├── mark-v2-transparent.svg
│       └── ...
└── (other outputs created by web-architect)

knowledge/
└── BRAND_DECISIONS.md  # Updated with selections

Error Handling

No Brief Found

code

Brand brief not found.

Please create knowledge/BRAND_BRIEF.md using the template:
cp templates/BRAND_BRIEF.md knowledge/BRAND_BRIEF.md

Then fill it out and run /brand-architect again.

Incomplete Brief

code

Brand brief is incomplete.

Missing required fields:
- {field 1}
- {field 2}

Please update knowledge/BRAND_BRIEF.md and try again.