Brand Design

--- name: brand-design description: Generate brand guidelines, design systems with design tokens (W3C format), creative direction (SCAMPER, Design Thinking, TRIZ), and design briefs with scope and success criteria. triggers:

• "brand guidelines"
• "style guide"
• "design brief"
• "creative brief"
• "campaign concept"
• "brand identity"
• "visual identity"
• "design system"
• "creative direction"
• "brand strategy" negatives:
• "UI component design patterns" # use ui-ux-pro-max
• "landing page layout" # use landing-craft
• "responsive design" # use responsive-engine
• "icon set creation" # use component-forge
• "color palette generation" # use ui-ux-pro-max license: MIT compatibility: opencode metadata: workflow: productivity audience: developers version: "3.0.0"

Brand Design Skill v3.0

Brand identity, design systems, creative direction, and project briefs.

Workflow: Brand / Design System Creation

Follow this numbered process. Do not skip steps.

Error Handling

Brand Guidelines

A complete brand system has 9 sections: brand story, logo, color, typography, spacing, imagery, voice, application, anti-patterns.

Color Palette

Primary (2-4 colors, 60%+ of touchpoints):

Neutral (grays for UI):

Semantic: Success #2ECC71, Warning #F39C12, Error #E74C3C, Info #3498DB

Design Tokens (W3C Format)

{
  "color": {
    "primary": { "$value": "#1B365D", "$type": "color" },
    "accent": { "$value": "#F5BD47", "$type": "color" },
    "surface": { "$value": "#F5F5F5", "$type": "color" }
  },
  "spacing": {
    "xs": { "$value": "4px", "$type": "dimension" },
    "sm": { "$value": "8px", "$type": "dimension" },
    "md": { "$value": "16px", "$type": "dimension" },
    "lg": { "$value": "32px", "$type": "dimension" }
  },
  "borderRadius": {
    "sm": { "$value": "4px", "$type": "dimension" },
    "md": { "$value": "8px", "$type": "dimension" },
    "full": { "$value": "9999px", "$type": "dimension" }
  }
}

Typography

Body text minimum 16px. Line length 45-75 chars. Contrast min 4.5:1 (WCAG AA).

Font Pairing Examples:

Logo Guidelines

• Variations: primary, secondary, icon (32x32), wordmark
• Clear space = height of "H" on all sides
• Min size: 80px digital, 1.5in print
• Never stretch, recolor, rotate, add effects, or use on low-contrast backgrounds

Tone of Voice

Design System Audit Checklist

• All colors have hex/RGB/HSL values and usage guidelines
• Typography scale covers 6+ sizes with line-height
• Spacing scale (4/8/16/24/32/48/64px)
• Component library matches design tokens
• Dark mode variants defined
• Accessibility: all color combos pass WCAG AA 4.5:1
• Icons: consistent stroke width, corner radius, size grid
• Shadow/elevation system defined
• Motion: duration, easing, reduced-motion alternative
• Form elements: all states (default, hover, focus, error, disabled)
• Breakpoints match design tool
• Figma component properties mapped to code props

Production Checklist

Before shipping any design system or brand guidelines:

Creative Direction

Ideation Methodologies

Campaign Architecture

Campaign Idea Evaluation (5-axis)

Score min 3 axes at 7+ to proceed.

Design Brief

Structure

1. Project overview: what and why (2-3 sentences)
2. Problem statement: "[User] cannot [goal] because [barrier]"
3. Objectives: SMART
4. Target audience: demographics, behaviors, goals, pain points, anti-audience
5. Scope: what's in and explicitly out
6. Deliverables: format, quantity, specs, revision rounds
7. Timeline: phases, milestones, review points, buffer
8. Success criteria: testable, with metrics and targets
9. Constraints: budget, technology, brand, legal, timeline

Stakeholder Alignment Questions

1. Who has final approval?
2. What's the single most important metric?
3. What can we deprioritize if scope shrinks?
4. Who are we NOT designing for?
5. What are the non-negotiables (legal, brand, technical)?

Anti-Patterns

Design Token Architecture

{
  "color": {
    "primary": { "value": "#1B365D", "type": "color" },
    "primary-light": { "value": "#2D5A8A", "type": "color" }
  },
  "spacing": {
    "xs": { "value": "4px", "type": "spacing" },
    "sm": { "value": "8px" }, "md": { "value": "16px" }, "lg": { "value": "24px" }
  },
  "typography": {
    "heading": { "value": { "fontFamily": "Charter", "fontWeight": 500, "fontSize": "clamp(32px,5vw,56px)" } }
  }
}

Export as W3C Design Token format for Figma Tokens plugin, Style Dictionary, or token-transformer.

Figma-to-Code Handoff

1. Dev Mode: inspect spacing (8px grid), colors (variables), typography (named styles)
2. Export assets: SVG for icons, PNG @2x for raster
3. Component mapping: FigmaComponent → ReactComponent documented before build
4. Responsive: Figma frames at 375px (mobile), 768px (tablet), 1440px (desktop)

Sources

• Pentagram — brand identity project standards
• NASA Graphics Standards Manual
• Stripe Brand Guidelines
• W3C Design Tokens Format
• IDEO design thinking methodology
• Ogilvy "On Advertising"
• Design Council UK "Double Diamond"
• NN Group "How to Write a Design Brief"
• Figma Design Tokens plugin

Checklist

• Skill loads without errors in the AI agent
• YAML frontmatter is valid (description, compatibility, audience)
• Workflow section provides clear step-by-step instructions
• Error handling section covers common failure modes
• All referenced files (references/, scripts/, assets/) exist
• Skill triggers correctly for intended use cases
• No broken links or missing resources