Brand Guidelines
Client Brand
Version 1.0
Updated
Confidential
01 — Overview
Brand Foundation
This document defines the visual and verbal identity of the brand. Use it as a reference for all creative and digital work to ensure consistency across every touchpoint.
Mission
Replace with a concise statement of what the brand exists to do and for whom.
Vision
Replace with the long-term ambition the brand is working towards.
Values
List 3–5 values that guide every decision made under this brand.
Positioning
One sentence on who the brand serves, what it offers, and why it’s different.
02 — Colour Palette
Colour System
The colour palette is the foundation of the brand's visual identity. Use these values consistently across all digital and print applications.
Primary
Primary Light
.brand-primary-light
Primary Dark
.brand-primary-dark
Accent
Accent Light
.brand-accent-light
Accent Dark
.brand-accent-dark
Secondary
Secondary
.brand-secondary
Secondary Light
.brand-secondary-light
Secondary Dark
.brand-secondary-dark
Neutrals
Neutral 100
.brand-neutral-100
Neutral 200
.brand-neutral-200
Neutral 300
.brand-neutral-300
Neutral 500
.brand-neutral-500
Neutral 700
.brand-neutral-700
Neutral 900
.brand-neutral-900
Semantic
03 — Typography
Type System
Two typefaces form the typographic system. The display face is used for headings and prominent text; the body face carries all copy and UI text.
Display — Syne
--font-display
The quick brown fox jumps
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 !@#$%&*()
Body — DM Sans
--font-body
Consistent, clear typography guides the reader through content with ease. The body typeface carries most of the communicative weight — it must be legible, versatile, and reflective of the brand’s character.
Regular 400 — The standard weight for body copy and supporting text.
Medium 500 — For labels, UI elements, and mild emphasis.
Display
--text-3xl · 3rem / 48px
Heading 1
--text-2xl · 2.25rem / 36px
Heading 2
--text-xl · 1.75rem / 28px
Heading 3
--text-lg · 1.375rem / 22px
Lead / Large body
--text-md · 1.125rem / 18px
Body
--text-base · 1rem / 16px
Small / Caption
--text-sm · 0.875rem / 14px
Eyebrow / Label
10px · uppercase · 0.1em
04 — Logo & Mark
Logo Usage
The logo is the primary brand identifier. Download any variant by hovering over the panel and clicking the save icon. Apply each variant only on the appropriate background.
Do
- Use the correct logo variant for the background colour
- Maintain minimum clear space equal to the cap-height of the wordmark
- Scale proportionally from original SVG or PNG source files
- Use SVG wherever possible; PNG for raster contexts
Don’t
- Stretch, rotate, skew, or distort the logo in any way
- Place on busy backgrounds without sufficient contrast
- Recreate the wordmark using a different typeface
- Apply unauthorised colour variants or effects
05 — Iconography
Icons & Illustration
Specify the icon library, stroke weight, sizing system, and any illustration style used across this brand.
Icon style
Specify the icon library here — e.g. Lucide, Phosphor, Heroicons. Note preferred stroke weight (typically 1.5px) and the three sizes used across the site.
06 — UI Components
Component Library
Core UI elements used throughout the site. Each component follows the brand colour palette, typography, and spacing system defined in this document.
Badges & Status
Primary
Accent
Secondary
Neutral
Success
Warning
Error
Colour on surface
Primary Surface
.brand-primary
Accent Surface
.brand-accent
Secondary Surface
.brand-secondary
07 — Spacing & Grid
Spatial System
A consistent spacing scale underpins the layout of every page and component, creating visual rhythm and hierarchy across the site.
08 — Voice & Tone
Brand Voice
How the brand speaks is as important as how it looks. These principles guide all written communications.
Authoritative
The brand speaks with confidence and expertise. Copy is direct and purposeful — no hedging, no filler.
“We design systems that perform.” — not “We try to create solutions that hopefully work.”
Clear
Clarity over cleverness. Complex ideas expressed simply without sacrificing precision.
Replace with a brand-specific example of clear communication.
Human
Despite authority and precision, the brand remains approachable. No corporate jargon or empty superlatives.
Replace with a brand-specific example of human-sounding copy.
Forward-looking
Copy speaks to where the customer is going, not just where they are. Aspiration without vagueness.
Replace with a brand-specific example of forward-looking language.
Brand Name
Brand Guidelines v1.0 · Confidential
