Brand Style Guide

Sumit Sehli for Kitchener Ward 5 Councillor — Internal reference for designers and content editors. Do not publish publicly.

Colour Palette

The "sprinkle, not overwhelming" rule

The client explicitly requested that the maroon from the postcard be used as a sprinkle, not an overwhelming presence. The site should feel clean, editorial, and warm — predominantly cream/white with maroon reserved for key moments of emphasis.

Deep Maroon #6F1D1B
Primary CTA buttons H1 / H2 headings Footer background Connect band Card top borders

Avoid: Large maroon section backgrounds (except footer & hero banner). Use cream/white instead.

Warm Gold #BB9457
Dividers Blockquote border Icon backgrounds Section label dashes

Use sparingly — accent, not fill. Soft alpha overlays (0.08–0.25) on icon backgrounds.

Espresso Brown #432818
Body copy Footer background Nav text
Clay Brown #99582A
Hover states Section labels Placeholder text
Soft Cream #FFE6A7
Section backgrounds Alternating bands Card icon fills

Use as the primary section-alternating colour alongside white. Never use cream text on white — use espresso.

Typography

Display / Heading — Playfair Display

Sumit Sehli

Ward 5 Councillor

Subheading (h3)

Pull quote or tagline italic

Body / UI — Lato

Body copy — regular weight, 1.7–1.8 line height. Used for paragraphs, descriptions, and all prose content across the site.

Bold UI label or caption at 0.875rem

SECTION LABEL — 0.75rem, 700, uppercase, 0.15em spacing

Buttons & Components

Primary CTA

Get Involved

Outline / Secondary

Learn More

Gold / Donate accent

Donate Today

Text link with arrow

View Priorities →

Section Label + Divider

Section Label Here
Brand Rules

What to do — and what not to do

✅ DO

  • Use cream (#FAF7F2 / #FFE6A7) and white as dominant page backgrounds
  • Reserve maroon for primary CTAs, H1/H2 headings, and key accents
  • Use gold/tan sparingly as a divider, icon background, or border accent
  • Alternate sections: white → cream → white (never maroon sections in the page body)
  • Use Playfair Display for all headings (H1–H3); Lato for body, captions, nav
  • Keep generous whitespace between sections (80px+ padding)
  • Test WCAG AA contrast for any colour combination before use
  • Use the wordmark lockup (SUMIT SEHLI / For Ward 5) consistently

❌ DO NOT

  • Do not use large maroon background sections in the page body (footer excepted)
  • Do not use Inter, Roboto, or Arial — use Playfair Display + Lato only
  • Do not place gold or cream text on a white background (fails contrast)
  • Do not use more than two font sizes in a single paragraph block
  • Do not use the cream colour on cream backgrounds (no contrast)
  • Do not add drop shadows heavier than the defined shadow tokens
  • Do not compress photos to the point of visible artefacts
  • Do not use stock photos — only campaign and community photos