Brand Architect

Workflow

Step 1: Read Brief

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:

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:

1. Create transparent SVG (base)
2. Create dark mode variant
3. Create light mode variant
4. Test at multiple sizes (16px, 80px, 400px)

Step 3: Generate Colors

Propose color palette:

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

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:

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

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:

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 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

Naming Convention

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

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

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

Brand brief is incomplete.

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

Please update knowledge/BRAND_BRIEF.md and try again.