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