1# Brand Guidelines v1.0
2 
3> Last updated: {DATE}
4> Status: Draft
5 
6## Quick Reference
7 
8| Element | Value |
9|---------|-------|
10| Primary Color | #2563EB |
11| Secondary Color | #8B5CF6 |
12| Primary Font | Inter |
13| Voice | Professional, Helpful, Clear |
14 
15---
16 
17## 1. Color Palette
18 
19### Primary Colors
20 
21| Name | Hex | RGB | Usage |
22|------|-----|-----|-------|
23| Primary Blue | #2563EB | rgb(37,99,235) | CTAs, headers, links |
24| Primary Dark | #1D4ED8 | rgb(29,78,216) | Hover states, emphasis |
25 
26### Secondary Colors
27 
28| Name | Hex | RGB | Usage |
29|------|-----|-----|-------|
30| Secondary Purple | #8B5CF6 | rgb(139,92,246) | Accents, highlights |
31| Accent Green | #10B981 | rgb(16,185,129) | Success, positive states |
32 
33### Neutral Palette
34 
35| Name | Hex | RGB | Usage |
36|------|-----|-----|-------|
37| Background | #FFFFFF | rgb(255,255,255) | Page backgrounds |
38| Surface | #F9FAFB | rgb(249,250,251) | Cards, sections |
39| Text Primary | #111827 | rgb(17,24,39) | Headings, body text |
40| Text Secondary | #6B7280 | rgb(107,114,128) | Captions, muted text |
41| Border | #E5E7EB | rgb(229,231,235) | Dividers, borders |
42 
43### Semantic Colors
44 
45| State | Hex | Usage |
46|-------|-----|-------|
47| Success | #22C55E | Positive actions, confirmations |
48| Warning | #F59E0B | Cautions, pending states |
49| Error | #EF4444 | Errors, destructive actions |
50| Info | #3B82F6 | Informational messages |
51 
52### Accessibility
53 
54- Text on white background: 7.2:1 contrast ratio (AAA)
55- Primary on white: 4.6:1 contrast ratio (AA)
56- All interactive elements meet WCAG 2.1 AA standards
57 
58---
59 
60## 2. Typography
61 
62### Font Stack
63 
64```css
65--font-heading: 'Inter', system-ui, -apple-system, sans-serif;
66--font-body: 'Inter', system-ui, -apple-system, sans-serif;
67--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
68```
69 
70### Type Scale
71 
72| Element | Size (Desktop) | Size (Mobile) | Weight | Line Height |
73|---------|----------------|---------------|--------|-------------|
74| H1 | 48px | 32px | 700 | 1.2 |
75| H2 | 36px | 28px | 600 | 1.25 |
76| H3 | 28px | 24px | 600 | 1.3 |
77| H4 | 24px | 20px | 600 | 1.35 |
78| Body | 16px | 16px | 400 | 1.5 |
79| Body Large | 18px | 18px | 400 | 1.6 |
80| Small | 14px | 14px | 400 | 1.5 |
81| Caption | 12px | 12px | 400 | 1.4 |
82 
83### Font Loading
84 
85```html
86<link rel="preconnect" href="https://fonts.googleapis.com">
87<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
88```
89 
90---
91 
92## 3. Logo Usage
93 
94### Variants
95 
96| Variant | File | Use Case |
97|---------|------|----------|
98| Full Horizontal | logo-full-horizontal.svg | Headers, documents |
99| Stacked | logo-stacked.svg | Square spaces |
100| Icon Only | logo-icon.svg | Favicons, small spaces |
101| Monochrome | logo-mono.svg | Limited color contexts |
102 
103### Clear Space
104 
105Minimum clear space = height of the logo icon (mark)
106 
107### Minimum Size
108 
109| Context | Minimum Width |
110|---------|---------------|
111| Digital - Full Logo | 120px |
112| Digital - Icon | 24px |
113| Print - Full Logo | 35mm |
114| Print - Icon | 10mm |
115 
116### Don'ts
117 
118- Don't rotate or skew the logo
119- Don't change colors outside approved palette
120- Don't add shadows or effects
121- Don't crop or modify proportions
122- Don't place on busy backgrounds without sufficient contrast
123 
124---
125 
126## 4. Voice & Tone
127 
128### Brand Personality
129 
130| Trait | Description |
131|-------|-------------|
132| **Professional** | Expert knowledge, authoritative yet approachable |
133| **Helpful** | Solution-focused, actionable guidance |
134| **Clear** | Direct communication, jargon-free |
135| **Confident** | Assured without being arrogant |
136 
137### Voice Chart
138 
139| Trait | We Are | We Are Not |
140|-------|--------|------------|
141| Professional | Expert, knowledgeable | Stuffy, corporate |
142| Helpful | Supportive, empowering | Patronizing |
143| Clear | Direct, concise | Vague, wordy |
144| Confident | Assured, trustworthy | Arrogant, overselling |
145 
146### Tone by Context
147 
148| Context | Tone | Example |
149|---------|------|---------|
150| Marketing | Engaging, benefit-focused | "Create campaigns that convert." |
151| Documentation | Clear, instructional | "Run the command to start." |
152| Error messages | Calm, solution-focused | "Try refreshing the page." |
153| Success | Brief, celebratory | "Campaign published!" |
154 
155### Prohibited Terms
156 
157| Avoid | Reason |
158|-------|--------|
159| Revolutionary | Overused |
160| Best-in-class | Vague claim |
161| Seamless | Overused |
162| Synergy | Corporate jargon |
163| Leverage | Use "use" instead |
164 
165---
166 
167## 5. Imagery Guidelines
168 
169### Photography Style
170 
171- **Lighting:** Natural, soft lighting preferred
172- **Subjects:** Real people, authentic scenarios
173- **Color treatment:** Maintain brand colors in post
174- **Composition:** Clean, focused subjects
175 
176### Illustrations
177 
178- Style: Modern, flat design with subtle gradients
179- Colors: Brand palette only
180- Line weight: 2px consistent stroke
181- Corners: 4px rounded
182 
183### Icons
184 
185- Style: Outlined, 24px base grid
186- Stroke: 1.5px consistent
187- Corner radius: 2px
188- Fill: None (outline only)
189 
190---
191 
192## 6. Design Components
193 
194### Buttons
195 
196| Type | Background | Text | Border Radius |
197|------|------------|------|---------------|
198| Primary | #2563EB | #FFFFFF | 8px |
199| Secondary | Transparent | #2563EB | 8px |
200| Tertiary | Transparent | #6B7280 | 8px |
201 
202### Spacing Scale
203 
204| Token | Value | Usage |
205|-------|-------|-------|
206| xs | 4px | Tight spacing |
207| sm | 8px | Compact elements |
208| md | 16px | Standard spacing |
209| lg | 24px | Section spacing |
210| xl | 32px | Large gaps |
211| 2xl | 48px | Section dividers |
212 
213### Border Radius
214 
215| Element | Radius |
216|---------|--------|
217| Buttons | 8px |
218| Cards | 12px |
219| Inputs | 8px |
220| Modals | 16px |
221| Pills/Tags | 9999px |
222 
223---
224 
225## AI Image Generation
226 
227### Base Prompt Template
228 
229Always prepend to image generation prompts:
230 
231```
232{DESCRIBE YOUR VISUAL STYLE HERE - mood, colors with hex codes, lighting, atmosphere}
233```
234 
235### Style Keywords
236 
237| Category | Keywords |
238|----------|----------|
239| **Lighting** | {e.g., soft lighting, dramatic, natural} |
240| **Mood** | {e.g., professional, energetic, calm} |
241| **Composition** | {e.g., centered, rule of thirds, minimal} |
242| **Treatment** | {e.g., high contrast, muted, vibrant} |
243| **Aesthetic** | {e.g., modern, vintage, minimalist} |
244 
245### Visual Mood Descriptors
246 
247- {Mood descriptor 1}
248- {Mood descriptor 2}
249- {Mood descriptor 3}
250 
251### Visual Don'ts
252 
253| Avoid | Reason |
254|-------|--------|
255| {Item to avoid} | {Why to avoid it} |
256 
257### Example Prompts
258 
259**Hero Banner:**
260```
261{Example prompt for hero banners}
262```
263 
264**Social Media Post:**
265```
266{Example prompt for social graphics}
267```
268 
269---
270 
271## Changelog
272 
273| Version | Date | Changes |
274|---------|------|---------|
275| 1.0 | {DATE} | Initial guidelines |
276