Brand Design

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.

| Step | Action | Output | |------|--------|--------| | 1 | Gather inputs: brand story, competitors, audience research, technical constraints | Brief document | | 2 | Define brand strategy: positioning, personality (3-5 adjectives), tone of voice | Brand strategy doc | | 3 | Build color system: primary, neutral, semantic palettes + WCAG AA checks | Color tokens + palette | | 4 | Select typography: headline/body pairing, scale, line-height, responsive sizing | Typography tokens | | 5 | Define spacing, radius, shadow, motion tokens (W3C format) | Design tokens JSON | | 6 | Create logo variations + usage guidelines | Logo guidelines | | 7 | Apply to 3+ touchpoints: web, print, social, or environmental | Application mockups | | 8 | Run design system audit (see checklist below) | Audit report | | 9 | Document anti-patterns and error states | Error + anti-pattern docs | | 10 | Stakeholder review + alignment sign-off | Approved design system v1.0 |

---

Error Handling

| Error | Cause | Fix | |-------|-------|-----| | Color contrast fails WCAG AA | Luminance ratio < 4.5:1 for text | Darken or lighten until ratio passes. Use contrastRatio in tokens. | | Token mismatch across platforms | Figma tokens != code tokens | Single source of truth: W3C JSON. Export from design tool. | | Typography scale gaps | Missing intermediate sizes | Build scale with modular scale (1.25 or 1.333 ratio). | | Logo illegible at min size | Too much detail in icon | Use simplified lockup or separate wordmark + icon variants. | | Design brief scope creep | Unclear out-of-scope list | Explicit "what's NOT included" section. Reference during reviews. | | Stakeholder disagreement | No clear decision authority | Identify single approver in brief. Escalate to DRI. | | Campaign fails originality axis | Cliché or derivative idea | Force 5+ directions. Run through SCAMPER/TRIZ. Reference culture, not competitors. |

---

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): | Role | Hex | Usage | |------|-----|-------| | Primary | #1B365D | Headlines, primary buttons | | Accent | #F5BD47 | CTAs, highlights |

Neutral (grays for UI): | Name | Hex | Usage | |------|-----|-------| | Dark | #080808 | Headings | | Mid | #666666 | Body text | | Light | #E0E0E0 | Borders | | Surface | #F5F5F5 | Backgrounds |

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

| Element | Weight | Size | Line Height | |---------|--------|------|-------------| | Display H1 | Bold | clamp(2.5rem,5vw,4.5rem) | 1.1 | | H2 | Bold | clamp(1.75rem,3vw,2.5rem) | 1.2 | | H3 | Semibold | clamp(1.25rem,2vw,1.75rem) | 1.25 | | Body | Regular | 1rem (16px) | 1.6 | | Caption | Regular | 0.75rem | 1.4 |

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

Font Pairing Examples: | Style | Headline | Body | |-------|----------|------| | Premium editorial | Playfair Display | Source Sans Pro | | Modern SaaS | Inter | Inter | | Creative agency | Syne | Plus Jakarta Sans | | Luxury | Cormorant Garamond | Proxima Nova |

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

| Dimension | Rule | |-----------|------| | Personality | 3-5 adjectives (e.g. confident, warm, precise) | | Vocabulary | Use "we/you". Avoid "one/our users" | | Formality | Casual for social, formal for investor comms | | Humor | In social/email. Never in legal, support, or crisis |

---

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:

| Check | Criteria | Owner | |-------|----------|-------| | Color parity | Hex values match exactly between Figma + code + docs | Design + Dev | | Token export | W3C JSON exported and imported into codebase | Design | | Font licensing | All typefaces have valid web + print licenses | Prod Mgr | | Logo rasterization | Vector + PNG + favicon exported at all required sizes | Design | | Accessibility audit | Automated + manual passes (axe, color contrast, keyboard nav) | QA | | Dark mode | All colors have dark mode variants, no hardcoded values | Design | | Responsive breakpoints | Layout tested at mobile, tablet, desktop | Dev | | Motion reduced | prefers-reduced-motion respected for all animations | Dev | | Component states | All interactive elements defined: default, hover, focus, active, error, disabled | Design | | Figma dev handoff | Components published with props, variants, and descriptions | Design |

---

Creative Direction

Ideation Methodologies

| Methodology | Best for | |-------------|----------| | SCAMPER | Product innovation, rebranding | | Design Thinking | Human-centered problem solving | | TRIZ (40 principles) | Technical problem solving | | Bisociation | Connecting two unrelated frameworks | | Synectics (analogies) | Creative campaigns | | SIT | Innovation with constraints | | Blue Ocean Strategy | Market differentiation |

Campaign Architecture

| Level | Timeframe | What | |-------|-----------|------| | Brand platform | 3-5 years | Positioning | | Campaign theme | Annual | What we say this year | | Creative executions | Per asset | How we bring it to life | | Tactical adaptations | Per channel | How it works in this medium |

Campaign Idea Evaluation (5-axis)

| Axis | Passing | Fail | |------|---------|------| | Originality (1-10) | 7+ | Below 5 | | Relevance (1-10) | 8+ | Below 6 | | Impact (1-10) | 7+ | Below 5 | | Feasibility (1-10) | 6+ | Below 4 | | Durability (1-10) | 6+ | Below 4 |

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

| Anti-Pattern | Why It Fails | Fix | |--------------|-------------|-----| | No single-minded proposition | Message dilutes, audience confused | Force one idea. Kill the rest. | | Problem stated as solution | Brief prescribes fix instead of framing the real issue | Describe the problem, not the fix | | Vague success criteria | Cannot measure success or failure | Define specific, testable criteria with targets | | No constraints given | Design that looks great but can't be built or shipped | Add budget, tech, timeline constraints upfront | | Too many stakeholders | Design by committee produces mediocrity | Identify single DRI per decision type | | Skipping audience insight | Design solves wrong problem | Research first. Find a non-obvious truth. | | Chasing trends | Looks dated in 6 months, no differentiation | Reference culture, not competitors | | Falling in love with first idea | Biased evaluation, better solutions missed | Force 5+ directions before selecting | | Designing for yourself | End-user needs subordinated to designer preferences | User test with real audience segments | | No error states defined | UI breaks silently, bad UX | Define error, empty, loading states for every component |

---

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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: EliasOulkadi
• Source: EliasOulkadi/shokunin
• License: MIT
• Homepage: https://eliasoulkadi.github.io/shokunin/

Install and usage instructions live in the source repository linked above.