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 |