Brand Book Creation¶

OWNER: Christel (Brand Identity Designer) ALSO_USED_BY: Tobias (UI/UX Designer), Sandro (Front-End Developer), Faye (Team Alfa PM), Sytske (Team Bravo PM), Aimee (Scoping Agent), Anna (Business Analyst) LAST_UPDATED: 2026-03-28 CONFIDENCE: High — well-established practice with clear industry standards

Why This Matters¶

A brand book is the single source of truth for how a brand looks, sounds, and behaves. Without it, every person (or agent) who touches the brand makes their own interpretation — and the brand fragments. For GE, the brand book is the critical handoff artifact: it is what ensures Tobias, Sandro, and eventually the client's own team can produce on-brand work without Christel in the loop.

Structure of a Professional Brand Book¶

Minimal Viable Brand Book (for SME SaaS clients)¶

This is the baseline that every GE client delivery must include.

1. Brand Overview
   ├── Brand story (1 paragraph — why does this brand exist?)
   ├── Mission statement
   ├── Brand personality (3–5 adjectives)
   └── Target audience summary

2. Logo
   ├── Primary logo + variants (horizontal, stacked, icon)
   ├── Logo clear space rules
   ├── Minimum size rules
   ├── Do's and don'ts (with visual examples)
   ├── Logo on backgrounds (light, dark, photography, pattern)
   └── File formats and naming convention

3. Color
   ├── Primary palette (with all specifications)
   ├── Secondary palette
   ├── Neutral palette
   ├── Semantic colors (success, warning, error, info)
   ├── Usage rules (which colors for what)
   ├── Accessibility notes (contrast ratios)
   └── Light/dark mode specifications

4. Typography
   ├── Primary typeface (with source/license info)
   ├── Secondary typeface (if applicable)
   ├── Type scale (heading levels, body, captions)
   ├── Line heights and spacing
   ├── Usage rules (what face for what context)
   └── Fallback stack for web/email

5. Imagery
   ├── Photography style (with example grid)
   ├── Illustration style (if applicable)
   ├── Iconography style and source
   └── Do's and don'ts

6. UI Components (for digital products)
   ├── Buttons (primary, secondary, tertiary, states)
   ├── Form elements
   ├── Cards
   ├── Navigation patterns
   └── Key component specifications

7. Design Tokens
   ├── JSON token file (machine-readable)
   ├── Tailwind config
   └── CSS custom properties

Extended Brand Book (for larger clients)¶

Add these sections for clients with broader brand needs:

8.  Voice & Tone Guidelines
9.  Layout & Grid System
10. Animation & Motion Principles
11. Social Media Templates & Guidelines
12. Email Templates
13. Print Specifications (business cards, letterhead, etc.)
14. Signage & Environmental Design
15. Co-branding & Partner Guidelines
16. Brand Architecture (if multi-product)

Usage Rules: The Core of a Brand Book¶

Usage rules must be visual. Text descriptions are insufficient.

Clear Space¶

Define clear space as a multiple of a logo element (e.g., "clear space = height of the letter 'E' in the wordmark").
Show the rule visually with a diagram.
Show violations: what happens when clear space is not respected.

Minimum Size¶

Define the smallest size at which the full logo may be used (e.g., "40px wide for digital, 15mm for print").
Below that threshold, switch to the simplified mark or icon.
Show the cascade: at what size each logo variant takes over.

Color Specifications¶

Every color must include ALL of:

Format	Purpose	Example
HEX	Web/digital	`#1A73E8`
RGB	Screen	`26, 115, 232`
HSL	Design tools, programmatic manipulation	`217, 84%, 51%`
CMYK	Print	`89, 50, 0, 9`
Pantone	Spot color printing, physical goods	PMS 2727 C
CSS Custom Property	Development	`--color-primary: #1A73E8`
Design Token Name	Cross-platform	`color.brand.primary`

Do's and Don'ts Format¶

Always present as side-by-side visual pairs:

✓ DO                              ✗ DON'T
[correct example image]           [incorrect example image]
"Use the logo on a clean,         "Don't place the logo on a
high-contrast background"          busy photograph without
                                   a container or overlay"

Minimum do's and don'ts to include: - Logo on light backgrounds - Logo on dark backgrounds - Logo on photography (with and without overlay) - Logo stretched/distorted - Logo recolored outside the palette - Logo with effects (shadows, outlines, gradients) - Logo rotated - Logo elements rearranged - Color combinations that fail contrast - Type set in wrong fonts or weights

Digital vs Print Specifications¶

Digital Specifications¶

Color mode: sRGB (for web), Display P3 (for modern screens where supported)
Resolution: Vector (SVG) preferred; raster at @1x, @2x, @3x
File formats: SVG, PNG (transparent), WebP, AVIF
Font loading: WOFF2 format, font-display strategy (swap vs optional)
Favicon: ICO (legacy), SVG (modern), apple-touch-icon (PNG 180x180)
Social media: OG image 1200x630, Twitter card 1200x600

Print Specifications¶

Color mode: CMYK for process printing, Pantone for spot color
Resolution: 300 DPI minimum for raster elements
File formats: PDF/X-4 (preferred), EPS, AI
Bleed: 3mm standard (EU), 1/8" standard (US)
Paper stock recommendations (if applicable to brand)
Spot UV, foil, emboss specifications (if premium)

GE Default¶

Most GE clients are digital-first SaaS. Prioritize digital specifications. Include print specifications for: business cards, letterhead, and any physical product the client will produce.

Design Tokens: The Machine-Readable Brand¶

Design tokens are the bridge between design and development. They are the single source of truth that both Figma and code reference.

Token Structure (W3C Design Tokens Community Group format)¶

{
  "color": {
    "brand": {
      "primary": {
        "$value": "#1A73E8",
        "$type": "color",
        "$description": "Primary brand color — used for primary buttons, links, and key interactive elements"
      },
      "secondary": {
        "$value": "#34A853",
        "$type": "color"
      }
    },
    "neutral": {
      "50": { "$value": "#FAFAFA", "$type": "color" },
      "100": { "$value": "#F5F5F5", "$type": "color" },
      "200": { "$value": "#EEEEEE", "$type": "color" },
      "300": { "$value": "#E0E0E0", "$type": "color" },
      "400": { "$value": "#BDBDBD", "$type": "color" },
      "500": { "$value": "#9E9E9E", "$type": "color" },
      "600": { "$value": "#757575", "$type": "color" },
      "700": { "$value": "#616161", "$type": "color" },
      "800": { "$value": "#424242", "$type": "color" },
      "900": { "$value": "#212121", "$type": "color" }
    },
    "semantic": {
      "success": { "$value": "#34A853", "$type": "color" },
      "warning": { "$value": "#FBBC04", "$type": "color" },
      "error": { "$value": "#EA4335", "$type": "color" },
      "info": { "$value": "#4285F4", "$type": "color" }
    }
  },
  "typography": {
    "family": {
      "heading": { "$value": "Inter", "$type": "fontFamily" },
      "body": { "$value": "Inter", "$type": "fontFamily" },
      "code": { "$value": "JetBrains Mono", "$type": "fontFamily" }
    },
    "scale": {
      "display": { "$value": "3rem", "$type": "dimension" },
      "h1": { "$value": "2.25rem", "$type": "dimension" },
      "h2": { "$value": "1.75rem", "$type": "dimension" },
      "h3": { "$value": "1.375rem", "$type": "dimension" },
      "body": { "$value": "1rem", "$type": "dimension" },
      "small": { "$value": "0.875rem", "$type": "dimension" },
      "caption": { "$value": "0.75rem", "$type": "dimension" }
    }
  },
  "spacing": {
    "xs": { "$value": "0.25rem", "$type": "dimension" },
    "sm": { "$value": "0.5rem", "$type": "dimension" },
    "md": { "$value": "1rem", "$type": "dimension" },
    "lg": { "$value": "1.5rem", "$type": "dimension" },
    "xl": { "$value": "2rem", "$type": "dimension" },
    "2xl": { "$value": "3rem", "$type": "dimension" },
    "3xl": { "$value": "4rem", "$type": "dimension" }
  },
  "radius": {
    "sm": { "$value": "0.25rem", "$type": "dimension" },
    "md": { "$value": "0.5rem", "$type": "dimension" },
    "lg": { "$value": "1rem", "$type": "dimension" },
    "full": { "$value": "9999px", "$type": "dimension" }
  }
}

Token Export Formats for GE Delivery¶

Format	Consumer	Purpose
JSON (W3C DTCG)	Source of truth	Master token file
CSS Custom Properties	Front-end (Sandro)	Runtime theming, browser native
Tailwind config	Front-end (Sandro)	Utility class generation
SCSS variables	Legacy/print CSS	If client has existing SCSS codebase
Figma variables	Design (Tobias)	Figma component library
Swift/Kotlin constants	Mobile (if applicable)	Native mobile development

CSS Custom Properties Output Example¶

:root {
  /* Brand Colors */
  --color-brand-primary: #1A73E8;
  --color-brand-secondary: #34A853;

  /* Neutrals */
  --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F5F5F5;
  /* ... */
  --color-neutral-900: #212121;

  /* Semantic */
  --color-success: #34A853;
  --color-warning: #FBBC04;
  --color-error: #EA4335;
  --color-info: #4285F4;

  /* Typography */
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-code: 'JetBrains Mono', monospace;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
}

Making Brand Guidelines That Actually Get Followed¶

Most brand books fail not because they are wrong, but because they are ignored. Here is how to make them stick.

The Problem¶

A 60-page PDF gets downloaded once and never opened again.
Rules without rationale get broken because people do not understand WHY.
Overly rigid rules get worked around because they do not fit real situations.

The Solution: Living Guidelines¶

Web-based, not PDF. Deliver as a website (MkDocs, Storybook, Zeroheight, or custom). Searchable, linkable, always up to date. GE can host this as part of the wiki or as a standalone client deliverable.
Copy-paste friendly. Every color value, every code snippet, every token should be one click to copy. Developers will not type #1A73E8 from a PDF.
Show, do not tell. For every rule, show a correct example and an incorrect example. Side by side. Visually.
Explain the WHY. "Do not stretch the logo" is a rule. "Stretching the logo distorts the carefully designed proportions and makes the brand look unprofessional" is a reason to follow the rule.
Provide the assets. Link directly to downloadable files from each section. Logo section links to logo files. Color section links to token files. Typography section links to font files.
Make the default right. If Sandro has the Tailwind config with the correct tokens baked in, he cannot accidentally use the wrong blue. Automate compliance.
Keep it short. The minimal viable brand book (see structure above) is enough for most SME clients. Do not pad it. Every page that is not essential is a page that will not be read.
Version it. Brand books evolve. Include a version number and changelog. Use git for the source.

Lessons from Great Brand Systems¶

Apple Human Interface Guidelines (HIG)¶

What they do right: Platform-specific, updated with every OS release. Extremely detailed component specs. Integrated into developer documentation.
Takeaway for GE: Tie brand guidelines to the actual technical implementation, not just visual design.

Material Design (Google)¶

What they do right: Open, web-based, with interactive examples. Covers motion, elevation, and interaction — not just static visuals. Provides actual code (Material Components).
Takeaway for GE: Guidelines should include behavioral specifications (how things move, respond, transition), not just appearance.

IBM Design Language¶

What they do right: Built on a 2x grid system. Extremely systematic — everything derives from the grid. Philosophy-first (explains WHY before WHAT). Carbon Design System provides implementation.
Takeaway for GE: Ground the system in a single structural principle (grid, type scale, or spatial system) that everything else derives from.

Atlassian Design System¶

What they do right: Component-level documentation with design + code side by side. Usage guidelines per component. Accessibility built into every component spec.
Takeaway for GE: Document at the component level, not just the token level. "Here is a button" with its design spec, code implementation, and usage guidelines in one place.

Spotify Brand Guidelines¶

What they do right: Very clear on what you CANNOT do (extensive don'ts). Specific rules for co-branding and partner use. Downloadable asset packs for every use case.
Takeaway for GE: Anticipate how the brand will be misused and address it explicitly.

GE-Specific Delivery Process¶

Step 1: Christel Creates the System¶

Define all visual identity components (per visual-identity-systems.md)
Build the token file (JSON, W3C DTCG format)

Step 2: Christel Documents the System¶

Write the brand book using the structure above
Include all do's and don'ts with visual examples
Generate CSS custom properties and Tailwind config from tokens

Step 3: Handoff to Tobias¶

Tobias receives the token file and brand book
Tobias creates the Figma component library based on the system
Tobias flags any issues or gaps back to Christel

Step 4: Handoff to Sandro¶

Sandro receives the token file (JSON + CSS + Tailwind)
Sandro implements the design system in the client's codebase
Sandro flags any technical issues back to Christel/Tobias

Step 5: Client Delivery¶

Brand book published as a web page (part of client documentation)
Asset pack delivered (all logo files, font files, token files)
Brief walkthrough documented for client's internal team

Checklist: Brand Book Delivery¶

[ ] Brand overview section complete (story, mission, personality, audience)
[ ] Logo section complete with all variants, rules, and do's/don'ts
[ ] Color section complete with all specifications and all formats
[ ] Typography section complete with families, scale, and usage rules
[ ] Imagery section complete with style guide and examples
[ ] UI components section complete (at minimum: buttons, forms, cards)
[ ] Design tokens exported: JSON, CSS custom properties, Tailwind config
[ ] All logo files included and linked from brand book
[ ] All font files included with license information
[ ] Accessibility audit documented (contrast ratios for all color pairs)
[ ] Brand book is web-based (not PDF-only)
[ ] Brand book is versioned (version number + date)
[ ] Brand book tested: can Tobias and Sandro produce on-brand work from it alone?

Anti-Patterns¶

Anti-Pattern	Why It Fails	What to Do Instead
PDF-only delivery	Not searchable, not linkable, never updated	Web-based living documentation
No token file	Developers re-interpret visual specs, introducing drift	Always deliver machine-readable tokens
Rules without rationale	People break rules they don't understand	Explain WHY for every rule
Visual examples only	Developers need values, not screenshots	Include exact specifications (HEX, px, rem) alongside visuals
Too comprehensive too early	80-page brand book for an MVP is overkill	Deliver minimal viable brand book, expand as product matures
No negative examples	People don't know what "wrong" looks like	Always include don'ts alongside do's
One-time delivery	Brand systems evolve with the product	Include governance process and versioning
Ignoring the development handoff	Beautiful design docs that don't translate to code	Include Tailwind config, CSS variables, component specs

References¶

Wheeler, A. — Designing Brand Identity (6th ed.) — comprehensive brand book process
W3C Design Tokens Community Group — token format specification
Storybook — component-driven documentation framework
Zeroheight — brand guidelines platform
Brand New (UnderConsideration) — brand identity case studies and analysis
Logo Design Love — practical brand identity portfolio examples