Brand Systems

Brand Systems

A brand is a promise made visible. Brand systems are the rules that ensure that promise is kept consistently.

When to Use This Skill

• Creating a new brand identity
• Rebranding or refreshing an existing identity
• Building brand guidelines documentation
• Systematizing ad-hoc brand elements
• Training others on brand application

Brand System Components

1. Strategy Layer (Foundation)

Positioning Statement

For [target audience]
Who [statement of need]
[Brand] is a [category]
That [key benefit]
Unlike [competitors]
We [key differentiator]

Brand Pillars

1. Purpose: Why we exist beyond profit
2. Vision: The future we're creating
3. Mission: How we'll get there
4. Values: What we believe (3-5 core values)

Brand Personality

Define 3-5 adjectives with behavioral examples:

Brand Archetype

Choose primary (and optional secondary) from:

---

2. Visual Identity Layer

Logo System

Logo Types:

Logo Requirements:

• Works at 16px favicon size
• Works on dark and light backgrounds
• Recognizable in B&W
• No gradients that break in print
• Clear space rules defined

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)
   │    └──────────────────┘      │
   │                              │
   └──────────────────────────────┘

Color Palette

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:

• Primary shades (50-950 scale)
• Secondary color (with shades)
• Accent color (high contrast)
• Neutral scale (gray tones)
• Semantic colors (success, warning, error, info)

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

Typography System

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:

Recommended Pairs:

• Editorial: Playfair Display + Source Sans Pro
• Modern: Outfit + Inter
• Technical: Space Grotesk + IBM Plex Sans
• Elegant: Cormorant Garamond + Lato
• Startup: Cal Sans + Geist

Imagery & Iconography

Photography Style:

• Subject matter guidelines
• Color treatment (natural, saturated, muted)
• Composition preferences
• Mood and lighting
• What to avoid

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

• Style references
• Color usage
• Line weight
• Level of detail
• Character guidelines

---

3. Voice Layer

Voice Attributes

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]

Tone Variations

Voice is constant; tone adapts to context:

Writing Guidelines

• Sentence length preferences
• Active vs. passive voice
• Punctuation style
• Capitalization rules
• Words to use/​avoid
• Jargon policy

---

4. System Layer

Design Tokens

// 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',
  },
};

Component Patterns

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

Layout Patterns

• Grid system (12-column, gutters)
• Breakpoints
• Container widths
• Section spacing

---

5. Application Layer

Touchpoint Guidelines

Document brand application for:

• Website
• Mobile app
• Email templates
• Social media profiles
• Presentation templates
• Print materials
• Packaging (if applicable)
• Environmental/​signage

Do's and Don'ts

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 Canvas (Quick Reference)

# [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]

---

Resources

• assets/​brand-canvas-template.md: Fillable brand canvas
• references/​logo-design.md: Logo creation principles
• references/​color-palettes.md: Color theory for branding
• references/​typography-pairing.md: Font combination guide
• references/​brand-voice.md: Voice development framework