Brand Style Guide

September 7, 2025 · View on GitHub

Business Name: [Enter business/product name]
Date: [Creation date]
Version: [Version number]
Purpose: Visual identity standards and design guidelines for consistent brand expression

Brand Identity Foundation

Brand Personality

Primary Personality Traits:

[Trait 1]: [Description of how this trait manifests visually]
[Trait 2]: [Description of how this trait manifests visually]
[Trait 3]: [Description of how this trait manifests visually]
[Trait 4]: [Description of how this trait manifests visually]
[Trait 5]: [Description of how this trait manifests visually]

Visual Expression: [How brand personality translates into visual design decisions]

Emotional Tone: [The feeling the brand should evoke through visual elements]

Brand Voice Visual: [How brand voice appears visually across all touchpoints]

Visual Identity Principles

Principle 1: [Name] [Visual principle that guides all design decisions and why it matters]

Principle 2: [Name] [How this principle supports brand positioning and differentiation]

Principle 3: [Name] [Why this principle resonates with ideal people and target audience]

Principle 4: [Name] [How this principle differentiates from competitors and builds recognition]

Color System

Primary Color Palette

Primary Brand Color

Color Name: [Name]
Hex: #[000000]
RGB: R[000] G[000] B[000]
CMYK: C[00] M[00] Y[00] K[00]
Usage: [When and how to use this color]
Psychology: [Why this color supports brand positioning]
Accessibility: [Contrast ratios and accessibility considerations]

Secondary Brand Color

Color Name: [Name]
Hex: #[000000]
RGB: R[000] G[000] B[000]
CMYK: C[00] M[00] Y[00] K[00]
Usage: [Complementary applications and contexts]
Relationship: [How it works with primary color]

Accent Color

Color Name: [Name]
Hex: #[000000]
RGB: R[000] G[000] B[000]
CMYK: C[00] M[00] Y[00] K[00]
Usage: [Highlighting and emphasis applications]
Impact: [How it creates visual interest and draws attention]

Supporting Color Palette

Neutral Colors

[Neutral Color 1]

Hex: #[000000] | RGB: R[000] G[000] B[000] | CMYK: C[00] M[00] Y[00] K[00]
Usage: [Background, text, subtle elements]

[Neutral Color 2]

Hex: #[000000] | RGB: R[000] G[000] B[000] | CMYK: C[00] M[00] Y[00] K[00]
Usage: [Borders, dividers, secondary text]

[Neutral Color 3]

Hex: #[000000] | RGB: R[000] G[000] B[000] | CMYK: C[00] M[00] Y[00] K[00]
Usage: [Light backgrounds, subtle accents]

[Neutral Color 4]

Hex: #[000000] | RGB: R[000] G[000] B[000] | CMYK: C[00] M[00] Y[00] K[00]
Usage: [Deep backgrounds, high contrast text]

Functional Colors

Success Color

Hex: #[000000] | RGB: R[000] G[000] B[000] | CMYK: C[00] M[00] Y[00] K[00]
Usage: [Positive actions, success messages, confirmations]

Error Color

Hex: #[000000] | RGB: R[000] G[000] B[000] | CMYK: C[00] M[00] Y[00] K[00]
Usage: [Errors, warnings, critical alerts]

Warning Color

Hex: #[000000] | RGB: R[000] G[000] B[000] | CMYK: C[00] M[00] Y[00] K[00]
Usage: [Caution, attention, important notices]

Color Usage Guidelines

Primary Applications: [Where and when to use primary brand colors]

Secondary Applications: [Appropriate contexts for secondary colors]

Approved Color Combinations:

[Color 1] + [Color 2]: [When to use this combination]
[Color 1] + [Color 3]: [Context for this pairing]
[Color 2] + [Color 4]: [Application guidelines]

Accessibility Requirements:

Minimum contrast ratio: [4.5:1 for normal text, 3:1 for large text]
Color-blind considerations: [How colors work for color-blind users]
High contrast alternatives: [Options for accessibility compliance]

Color Meanings: [What each color communicates about the brand and its values]

Typography System

Primary Typeface (Headlines/Titles)

Font Name: [Specific font name] Font Family: [Sans-serif/Serif/Display classification] Personality: [How this font supports brand personality]

Usage Applications:

Headlines and main titles
Large display text
Hero sections
Primary call-to-action buttons

Size Specifications:

Desktop H1: [Size]px / [Size]pt
Desktop H2: [Size]px / [Size]pt
Mobile H1: [Size]px / [Size]pt
Mobile H2: [Size]px / [Size]pt

Weight Options:

Light ([Weight number])
Regular ([Weight number])
Medium ([Weight number])
Bold ([Weight number])

Accessibility: [Readability considerations and minimum sizes]

Secondary Typeface (Body Text)

Font Name: [Specific font name] Font Family: [Classification and characteristics]

Usage Applications:

Body text and paragraphs
Descriptions and explanations
Navigation menus
Form labels and inputs

Size Specifications:

Desktop Body: [Size]px / [Size]pt
Mobile Body: [Size]px / [Size]pt
Small Text: [Size]px / [Size]pt
Caption Text: [Size]px / [Size]pt

Line Height: [Optimal spacing for readability - typically 1.4-1.6] Character Spacing: [Letter spacing recommendations]

Supporting Typeface (Special Use)

Font Name: [Specific font name if applicable] Usage Context: [Quotes, captions, special elements] Relationship: [How it complements primary fonts]

Typography Hierarchy

H1 (Main Headlines)

Font: [Primary typeface]
Size: [Desktop/Mobile sizes]
Weight: [Bold/Medium]
Color: [Primary brand color or neutral]
Usage: [Page titles, hero headlines]

H2 (Section Headers)

Font: [Primary typeface]
Size: [Desktop/Mobile sizes]
Weight: [Medium/Bold]
Color: [Primary or secondary brand color]
Usage: [Section titles, major divisions]

H3 (Subsections)

Font: [Primary typeface]
Size: [Desktop/Mobile sizes]
Weight: [Regular/Medium]
Color: [Brand color or neutral]
Usage: [Subsection titles, article headers]

Body Text

Font: [Secondary typeface]
Size: [Desktop/Mobile sizes]
Weight: [Regular]
Color: [Primary text color]
Line Height: [Spacing ratio]
Usage: [Paragraphs, descriptions, content]

Caption Text

Font: [Secondary typeface]
Size: [Smaller size]
Weight: [Regular/Light]
Color: [Secondary text color]
Usage: [Image captions, fine print, metadata]

Button Text

Font: [Primary or secondary typeface]
Size: [Button-appropriate size]
Weight: [Medium/Bold]
Color: [Contrast color for button background]
Usage: [Call-to-action buttons, interactive elements]

Logo Type: [Wordmark/Symbol/Combination mark] Design Concept: [Core idea behind logo design] Brand Connection: [How logo reflects brand personality and positioning] Distinctive Elements: [What makes the logo memorable and unique]

Logo Variations

Primary Logo [Description of full logo with all elements]

Usage: [Primary applications and contexts]
File formats: [.svg, .png, .jpg, .eps]

Secondary Logo [Description of simplified version]

Usage: [Smaller applications, limited space contexts]
File formats: [Available formats]

Logo Mark (Icon Only) [Description of symbol/icon version]

Usage: [Social media profiles, app icons, watermarks]
File formats: [Available formats]

Text Logo (Wordmark Only) [Description of text-only version]

Usage: [Text-heavy applications, minimal contexts]
File formats: [Available formats]

Monochrome Versions

Black version: [Usage contexts]
White version: [Usage contexts]
Single color version: [When to use]

Logo Usage Guidelines

Minimum Size

Digital: [Minimum pixels width]
Print: [Minimum inches/mm width]
Rationale: [Why this size maintains clarity]

Clear Space

Minimum clear space: [X height or specific measurement]
Measurement method: [How to calculate clear space]
Application: [Space required on all sides]

Acceptable Backgrounds

Light backgrounds: [When and how to use]
Dark backgrounds: [Appropriate applications]
Colored backgrounds: [Guidelines and restrictions]
Image backgrounds: [Requirements for clarity]

Color Variations

Full color: [Primary usage contexts]
Single color: [When to use monochrome]
Reversed: [White logo on dark backgrounds]
Tinted: [Using brand colors with logo]

Placement Guidelines

Top left: [Standard web placement]
Center: [Formal document placement]
Bottom right: [Signature placement]
Flexible: [Contextual placement rules]

Logo Don'ts

Prohibited Modifications

Never stretch or distort proportions
Never change colors outside approved palette
Never add effects (drop shadows, gradients, etc.)
Never separate elements or rearrange components
Never use low-resolution versions

Unacceptable Applications

Busy or cluttered backgrounds
Insufficient contrast situations
Extremely small sizes where clarity is lost
Competing with other prominent visual elements

Color Restrictions

Never use colors outside brand palette
Never use on backgrounds that reduce legibility
Never use color combinations that clash with brand

Size Limitations

Never use below minimum size requirements
Never scale disproportionately
Never use when illegible or unclear

Visual Elements and Imagery

Photography and Imagery Style

Visual Style Definition

Photography Style: [Documentary/Lifestyle/Product/Abstract]
Color Treatment: [Natural/Enhanced/Filtered/Monochromatic]
Composition Style: [Clean/Centered/Asymmetrical/Dynamic]
Subject Matter: [People/Objects/Environments/Concepts]
Mood and Tone: [Professional/Casual/Inspiring/Trustworthy]

Image Selection Criteria

Brand Alignment: [How images should support brand personality]
Audience Resonance: [What images appeal to ideal people]
Quality Standards: [Resolution, composition, technical requirements]
Diversity and Inclusion: [Representation standards and guidelines]
Authenticity: [Real vs. stock photography preferences]

Image Treatment Guidelines

Color Adjustments: [How to adjust images to match brand colors]
Filters and Effects: [Acceptable image treatments and modifications]
Overlay Applications: [How to use brand colors as overlays]
Text on Images: [Typography and contrast requirements]

Iconography and Graphics

Icon Style Definition

Icon Style: [Line/Filled/Outlined/Mixed]
Visual Weight: [Thin/Medium/Bold line weights]
Corner Style: [Rounded/Sharp/Mixed corners]
Complexity Level: [Simple/Detailed/Varied complexity]
Brand Integration: [How icons reflect brand personality]

Icon Usage Guidelines

Size Requirements: [Minimum and maximum sizes for clarity]
Color Applications: [When to use brand colors vs. neutral]
Spacing Standards: [Required space around icons]
Consistency Rules: [Maintaining style across icon sets]

Graphic Element Standards

Shapes and Forms: [Geometric/Organic/Mixed approaches]
Patterns: [Brand pattern applications if applicable]
Borders and Dividers: [Line styles and applications]
Background Elements: [Subtle graphics and textures]

Layout and Composition

Layout Philosophy

Design Approach: [Grid-based/Flexible/Structured/Creative] White Space Usage: [Generous/Minimal/Balanced approach] Hierarchy Principles: [How to organize information visually] Balance and Proportion: [Visual weight distribution guidelines]

Grid System

Column Structure

Desktop: [Number of columns]
Tablet: [Number of columns]
Mobile: [Number of columns]

Spacing Units

Base unit: [Pixels or measurement]
Small spacing: [1x base unit]
Medium spacing: [2x base unit]
Large spacing: [3x base unit]
Extra large spacing: [4x base unit]

Margins and Padding

Page margins: [Standard spacing around content]
Section padding: [Space between major sections]
Element padding: [Space around individual elements]
Responsive considerations: [How spacing adapts to screen size]

Application Guidelines

Digital Applications

Website Design

Header: [Logo placement, navigation style, background color]
Navigation: [Typography, color, hover states, active states]
Content Areas: [Background colors, text colors, spacing]
Footer: [Layout, color scheme, content organization]
Buttons: [Colors, typography, hover effects, sizing]

Social Media

Profile Images: [Logo version, sizing, background]
Cover Images: [Brand elements, messaging, dimensions]
Post Templates: [Color schemes, typography, layout patterns]
Story Formats: [Vertical layouts, brand integration]

Email Design

Header: [Logo placement, brand colors, layout]
Body Content: [Typography, spacing, color scheme]
Footer: [Contact info, social links, unsubscribe]
Button Styles: [Call-to-action design and placement]

Digital Documents

Presentation Templates: [Slide layouts, color schemes, typography]
PDF Standards: [Headers, footers, page layouts, brand integration]
Reports: [Cover pages, section dividers, data visualization]

Print Applications

Business Cards

Layout: [Information hierarchy, logo placement]
Typography: [Font sizes, contact information style]
Color: [Background, text, accent colors]
Specifications: [Dimensions, bleed, resolution requirements]

Letterhead

Logo Placement: [Position, size, clear space]
Contact Information: [Typography, placement, color]
Design Elements: [Subtle brand elements, borders, patterns]
Specifications: [Paper size, margins, print requirements]

Brochures and Marketing Materials

Fold Styles: [Tri-fold, bi-fold, accordion preferences]
Layout Principles: [Information hierarchy, visual flow]
Imagery Usage: [Photo placement, sizing, treatment]
Color Applications: [Background colors, accent usage]

Signage

Size Requirements: [Minimum sizes for visibility]
Color Contrast: [Ensuring readability at distance]
Material Considerations: [Indoor vs. outdoor applications]
Visibility Standards: [Lighting, placement, accessibility]

Product Applications

Digital Product Design

User Interface: [Button styles, form elements, navigation]
Color Usage: [Primary actions, secondary actions, states]
Typography: [Interface text, labels, headings]
Iconography: [Interface icons, consistency, sizing]

Packaging (if applicable)

Color Scheme: [Primary and secondary color usage]
Typography: [Product names, descriptions, legal text]
Logo Placement: [Primary and secondary positions]
Information Hierarchy: [What stands out, what's secondary]

Merchandise and Promotional Items

Branded Items: [T-shirts, mugs, stickers, etc.]
Logo Applications: [Size, placement, color variations]
Quality Standards: [Print quality, material considerations]
Brand Consistency: [Maintaining identity across items]

Brand Consistency Framework

Quality Control Standards

Review Process [Step-by-step process for ensuring brand compliance in all applications]

Approval Requirements [Who needs to approve brand applications and when approval is required]

Common Mistakes [Frequent brand guideline violations to watch for and avoid]

Update Procedures [How to maintain and update brand standards as business evolves]

Flexibility Guidelines

Creative Interpretation [Where creative flexibility is acceptable within brand guidelines]

Strict Requirements [Elements that must never change or be modified]

Adaptation Principles [How to adapt brand for new contexts while maintaining consistency]

Evolution Considerations [How brand can grow and evolve while maintaining core identity]

File Organization and Assets

Logo Files

Primary logo: [File names and formats]
Secondary variations: [File names and formats]
Monochrome versions: [File names and formats]
Icon versions: [File names and formats]

Font Files

Primary typeface: [Font file names and weights]
Secondary typeface: [Font file names and weights]
Web font links: [Google Fonts or other web font URLs]

Color Swatches

Adobe Creative Suite: [.ase swatch file]
Sketch: [Color palette file]
Figma: [Shared color styles]
CSS Variables: [Code snippets for web development]

Template Files

Presentation templates: [PowerPoint, Keynote, Google Slides]
Document templates: [Word, Pages, Google Docs]
Social media templates: [Various platform sizes]
Email templates: [HTML and design files]

This Brand Style Guide serves as the definitive reference for all visual brand applications. Consistent use of these guidelines ensures cohesive brand expression that builds recognition, trust, and differentiation across all touchpoints.