Builds brand identity systems from strategy (positioning, pillars, personality, archetypes) to visuals (logos, colors, typography) and voice guidelines with documentation. For new brands, rebrands, or systematizing identities.
From design-masterynpx claudepluginhub hermeticormus/design-mastery-claude-code --plugin design-masteryThis skill uses the workspace's default tool permissions.
assets/brand-canvas-template.mdDesigns and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Implements structured self-debugging workflow for AI agent failures: capture errors, diagnose patterns like loops or context overflow, apply contained recoveries, and generate introspection reports.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
A brand is a promise made visible. Brand systems are the rules that ensure that promise is kept consistently.
For [target audience]
Who [statement of need]
[Brand] is a [category]
That [key benefit]
Unlike [competitors]
We [key differentiator]
Define 3-5 adjectives with behavioral examples:
| Trait | What It Means | What It Doesn't Mean |
|---|---|---|
| Bold | Take clear positions | Aggressive/reckless |
| Approachable | Warm and welcoming | Unprofessional |
| Innovative | Forward-thinking | Gimmicky |
Choose primary (and optional secondary) from:
| Archetype | Core Desire | Voice Character |
|---|---|---|
| Sage | Truth | Knowledgeable, analytical |
| Innocent | Safety | Optimistic, simple |
| Explorer | Freedom | Adventurous, authentic |
| Ruler | Control | Authoritative, refined |
| Creator | Innovation | Imaginative, visionary |
| Caregiver | Service | Nurturing, supportive |
| Magician | Transformation | Visionary, charismatic |
| Hero | Mastery | Courageous, determined |
| Outlaw | Liberation | Rebellious, disruptive |
| Lover | Intimacy | Passionate, sensual |
| Jester | Enjoyment | Playful, irreverent |
| Everyman | Belonging | Friendly, humble |
Logo Types:
| Type | Description | Example |
|---|---|---|
| Wordmark | Name as logo | Google, Coca-Cola |
| Lettermark | Initials | IBM, HBO |
| Symbol | Abstract mark | Nike, Apple |
| Combination | Symbol + wordmark | Adidas, Lacoste |
| Emblem | Text inside symbol | Starbucks, NFL |
Logo Requirements:
Logo Lockups:
[Symbol] [Symbol][Wordmark] [Wordmark]
[Symbol]
Symbol Horizontal Stacked
Only Lockup Lockup
Clear Space: Define minimum space around logo (typically height of a logo element):
┌──────────────────────────────┐
│ │
│ ┌──────────────────┐ │
│ │ │ │
│ │ LOGO │ │ ← Clear space = 'X'
│ │ │ │ (defined by logo element)
│ └──────────────────┘ │
│ │
└──────────────────────────────┘
Primary Palette:
Primary:
Name: [Descriptive name, e.g., "Trust Blue"]
Hex: #2563eb
RGB: 37, 99, 235
HSL: 221, 83%, 53%
Tailwind: blue-600
Usage: CTAs, links, primary actions
Accessible on: white (4.5:1), gray-50 (4.2:1)
Extended Palette:
Color Proportions:
60% - Dominant (backgrounds, large areas)
30% - Secondary (supporting elements)
10% - Accent (highlights, CTAs)
Dark Mode Considerations:
Light Mode Dark Mode
white → gray-900
gray-50 → gray-800
gray-900 → white
blue-600 → blue-400
Type Scale:
const typeScale = {
xs: '0.75rem', // 12px - captions
sm: '0.875rem', // 14px - secondary text
base: '1rem', // 16px - body
lg: '1.125rem', // 18px - lead text
xl: '1.25rem', // 20px - h4
'2xl': '1.5rem', // 24px - h3
'3xl': '1.875rem', // 30px - h2
'4xl': '2.25rem', // 36px - h1
'5xl': '3rem', // 48px - display
'6xl': '3.75rem', // 60px - hero
};
Font Pairing Principles:
| Approach | Example | Effect |
|---|---|---|
| Contrast | Serif heading + sans body | Classic, editorial |
| Complement | Geometric heading + humanist body | Modern, friendly |
| Superfamily | Same family, different weights | Unified, systematic |
Recommended Pairs:
Photography Style:
Icon System:
Style: [Outlined | Filled | Duotone]
Stroke weight: [1.5px | 2px | 2.5px]
Corner radius: [0 | 2px | rounded]
Grid: [24x24 | 16x16]
Source: [Lucide | Heroicons | Phosphor | Custom]
Illustration Style (if applicable):
Define 3-4 constant personality traits:
We are:
1. [Trait 1] - [What this means in practice]
2. [Trait 2] - [What this means in practice]
3. [Trait 3] - [What this means in practice]
We are NOT:
1. [Anti-trait 1]
2. [Anti-trait 2]
3. [Anti-trait 3]
Voice is constant; tone adapts to context:
| Context | Tone Adjustment | Example |
|---|---|---|
| Welcome | Warm, enthusiastic | "Welcome! We're excited to have you." |
| Error | Calm, helpful | "Something went wrong. Here's how to fix it." |
| Success | Celebratory, brief | "Done! Your changes are live." |
| Tutorial | Patient, encouraging | "Let's walk through this together." |
| Legal | Clear, direct | "By continuing, you agree to our terms." |
// tokens.js
export const tokens = {
colors: { /* color definitions */ },
typography: { /* font definitions */ },
spacing: {
xs: '0.25rem', // 4px
sm: '0.5rem', // 8px
md: '1rem', // 16px
lg: '1.5rem', // 24px
xl: '2rem', // 32px
'2xl': '3rem', // 48px
'3xl': '4rem', // 64px
},
radii: {
sm: '0.25rem',
md: '0.5rem',
lg: '0.75rem',
xl: '1rem',
full: '9999px',
},
shadows: { /* shadow definitions */ },
transitions: {
fast: '150ms ease-out',
normal: '200ms ease-out',
slow: '300ms ease-out',
},
};
Document common component patterns:
## Button
### Variants
- Primary: Main actions
- Secondary: Alternative actions
- Ghost: Tertiary actions
- Destructive: Dangerous actions
### Sizes
- sm: Compact contexts
- md: Default
- lg: Prominent placement
### States
- Default
- Hover
- Active/Pressed
- Focus (keyboard)
- Disabled
- Loading
Document brand application for:
Visual examples of correct and incorrect usage:
✓ DO ✗ DON'T
─────────────────────────────────────────
Logo on white background Logo on busy photo
Logo with clear space Logo crowded by elements
Primary button for CTA Multiple primary buttons
Consistent icon style Mixed icon styles
# [Brand Name] Brand Canvas
## Who We Are
Purpose: [Why we exist]
Vision: [Future we're creating]
Mission: [How we'll get there]
## Who We Serve
[Target audience description]
## What Makes Us Different
[Key differentiators]
## How We Sound
Voice: [3-4 adjectives]
Archetype: [Primary archetype]
## How We Look
Colors: [Primary, Secondary, Accent]
Typography: [Display font + Body font]
Style: [Visual approach in 2-3 words]
## Our Promise
[The one thing we deliver]