Brand Guidelines Application
Purpose
Apply consistent brand styling to any artifact: documents, presentations, web pages, or marketing materials.
Core Brand Elements
Colors
Define your brand palette with CSS variables:
:root { --brand-primary: #1a73e8; --brand-secondary: #34a853; --brand-accent: #ea4335; --brand-dark: #202124; --brand-light: #f8f9fa; --brand-text: #3c4043; --brand-text-muted: #5f6368; }
Typography
/* Primary font for headings */ --font-display: 'Product Sans', 'Google Sans', system-ui;
/* Body font */ --font-body: 'Roboto', 'Inter', -apple-system, sans-serif;
/* Monospace for code */ --font-mono: 'Roboto Mono', 'Fira Code', monospace;
/* Type scale */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem;
Spacing
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem;
Application Examples
Buttons
.btn-primary { background: var(--brand-primary); color: white; padding: var(--space-2) var(--space-4); border-radius: 4px; font-family: var(--font-body); font-weight: 500; }
Cards
.card { background: white; border: 1px solid var(--brand-light); border-radius: 8px; padding: var(--space-6); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
Headers
h1 { font-family: var(--font-display); font-size: var(--text-4xl); color: var(--brand-dark); font-weight: 500; }
Document Templates
Google Docs
-
Heading 1: Display font, 24pt, Brand Dark
-
Heading 2: Display font, 18pt, Brand Primary
-
Body: Body font, 11pt, Brand Text
-
Links: Brand Primary, underlined
Presentations
-
Title slides: White text on Brand Primary background
-
Content slides: Brand Dark text on white
-
Accent elements: Brand Secondary or Accent
Best Practices
-
Consistency: Use exact brand colors, never approximate
-
Contrast: Ensure 4.5:1 minimum for text readability
-
Hierarchy: Use size and weight to establish importance
-
Whitespace: Generous spacing feels premium
-
Logo usage: Maintain clear space around logo