Brand Guidelines v1.0
Last updated: {DATE} Status: Draft
Quick Reference
| Element | Value |
|---|
| Primary Color | #2563EB |
| Secondary Color | #8B5CF6 |
| Primary Font | Inter |
| Voice | Professional, Helpful, Clear |
1. Color Palette
Primary Colors
| Name | Hex | RGB | Usage |
|---|
| Primary Blue | #2563EB | rgb(37,99,235) | CTAs, headers, links |
| Primary Dark | #1D4ED8 | rgb(29,78,216) | Hover states, emphasis |
Secondary Colors
| Name | Hex | RGB | Usage |
|---|
| Secondary Purple | #8B5CF6 | rgb(139,92,246) | Accents, highlights |
| Accent Green | #10B981 | rgb(16,185,129) | Success, positive states |
Neutral Palette
| Name | Hex | RGB | Usage |
|---|
| Background | #FFFFFF | rgb(255,255,255) | Page backgrounds |
| Surface | #F9FAFB | rgb(249,250,251) | Cards, sections |
| Text Primary | #111827 | rgb(17,24,39) | Headings, body text |
| Text Secondary | #6B7280 | rgb(107,114,128) | Captions, muted text |
| Border | #E5E7EB | rgb(229,231,235) | Dividers, borders |
Semantic Colors
| State | Hex | Usage |
|---|
| Success | #22C55E | Positive actions, confirmations |
| Warning | #F59E0B | Cautions, pending states |
| Error | #EF4444 | Errors, destructive actions |
| Info | #3B82F6 | Informational messages |
Accessibility
- Text on white background: 7.2:1 contrast ratio (AAA)
- Primary on white: 4.6:1 contrast ratio (AA)
- All interactive elements meet WCAG 2.1 AA standards
2. Typography
Font Stack
--font-heading: 'Inter', system-ui, -apple-system, sans-serif;
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
Type Scale
| Element | Size (Desktop) | Size (Mobile) | Weight | Line Height |
|---|
| H1 | 48px | 32px | 700 | 1.2 |
| H2 | 36px | 28px | 600 | 1.25 |
| H3 | 28px | 24px | 600 | 1.3 |
| H4 | 24px | 20px | 600 | 1.35 |
| Body | 16px | 16px | 400 | 1.5 |
| Body Large | 18px | 18px | 400 | 1.6 |
| Small | 14px | 14px | 400 | 1.5 |
| Caption | 12px | 12px | 400 | 1.4 |
Font Loading
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
3. Logo Usage
Variants
| Variant | File | Use Case |
|---|
| Full Horizontal | logo-full-horizontal.svg | Headers, documents |
| Stacked | logo-stacked.svg | Square spaces |
| Icon Only | logo-icon.svg | Favicons, small spaces |
| Monochrome | logo-mono.svg | Limited color contexts |
Clear Space
Minimum clear space = height of the logo icon (mark)
Minimum Size
| Context | Minimum Width |
|---|
| Digital - Full Logo | 120px |
| Digital - Icon | 24px |
| Print - Full Logo | 35mm |
| Print - Icon | 10mm |
Don'ts
- Don't rotate or skew the logo
- Don't change colors outside approved palette
- Don't add shadows or effects
- Don't crop or modify proportions
- Don't place on busy backgrounds without sufficient contrast
4. Voice & Tone
Brand Personality
| Trait | Description |
|---|
| Professional | Expert knowledge, authoritative yet approachable |
| Helpful | Solution-focused, actionable guidance |
| Clear | Direct communication, jargon-free |
| Confident | Assured without being arrogant |
Voice Chart
| Trait | We Are | We Are Not |
|---|
| Professional | Expert, knowledgeable | Stuffy, corporate |
| Helpful | Supportive, empowering | Patronizing |
| Clear | Direct, concise | Vague, wordy |
| Confident | Assured, trustworthy | Arrogant, overselling |
Tone by Context
| Context | Tone | Example |
|---|
| Marketing | Engaging, benefit-focused | "Create campaigns that convert." |
| Documentation | Clear, instructional | "Run the command to start." |
| Error messages | Calm, solution-focused | "Try refreshing the page." |
| Success | Brief, celebratory | "Campaign published!" |
Prohibited Terms
| Avoid | Reason |
|---|
| Revolutionary | Overused |
| Best-in-class | Vague claim |
| Seamless | Overused |
| Synergy | Corporate jargon |
| Leverage | Use "use" instead |
5. Imagery Guidelines
Photography Style
- Lighting: Natural, soft lighting preferred
- Subjects: Real people, authentic scenarios
- Color treatment: Maintain brand colors in post
- Composition: Clean, focused subjects
Illustrations
- Style: Modern, flat design with subtle gradients
- Colors: Brand palette only
- Line weight: 2px consistent stroke
- Corners: 4px rounded
Icons
- Style: Outlined, 24px base grid
- Stroke: 1.5px consistent
- Corner radius: 2px
- Fill: None (outline only)
6. Design Components
Buttons
| Type | Background | Text | Border Radius |
|---|
| Primary | #2563EB | #FFFFFF | 8px |
| Secondary | Transparent | #2563EB | 8px |
| Tertiary | Transparent | #6B7280 | 8px |
Spacing Scale
| Token | Value | Usage |
|---|
| xs | 4px | Tight spacing |
| sm | 8px | Compact elements |
| md | 16px | Standard spacing |
| lg | 24px | Section spacing |
| xl | 32px | Large gaps |
| 2xl | 48px | Section dividers |
Border Radius
| Element | Radius |
|---|
| Buttons | 8px |
| Cards | 12px |
| Inputs | 8px |
| Modals | 16px |
| Pills/Tags | 9999px |
AI Image Generation
Base Prompt Template
Always prepend to image generation prompts:
{DESCRIBE YOUR VISUAL STYLE HERE - mood, colors with hex codes, lighting, atmosphere}
Style Keywords
| Category | Keywords |
|---|
| Lighting | {e.g., soft lighting, dramatic, natural} |
| Mood | {e.g., professional, energetic, calm} |
| Composition | {e.g., centered, rule of thirds, minimal} |
| Treatment | {e.g., high contrast, muted, vibrant} |
| Aesthetic | {e.g., modern, vintage, minimalist} |
Visual Mood Descriptors
- {Mood descriptor 1}
- {Mood descriptor 2}
- {Mood descriptor 3}
Visual Don'ts
| Avoid | Reason |
|---|
| {Item to avoid} | {Why to avoid it} |
Example Prompts
Hero Banner:
{Example prompt for hero banners}
Social Media Post:
{Example prompt for social graphics}
Changelog
| Version | Date | Changes |
|---|
| 1.0 | {DATE} | Initial guidelines |