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

• Purpose: Why we exist beyond profit

• Vision: The future we're creating

• Mission: How we'll get there

• Values: What we believe (3-5 core values)

Brand Personality

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

Brand Archetype

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

2. Visual Identity Layer

Logo System

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:

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

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:

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

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

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