Brand · 6 of 12

Identity

The look people will recognize — wordmark, type, and color pulled into a system we'd stand behind.

Sounds like what you need?

A real logo, not a placeholder
Colors and type that stay consistent everywhere
A look that's ours, not a template's
A voice as considered as the look
A full look and feel, beyond the logo

What the Brand Sprint looks like

The questions this sprint answers

If the brand were a person, how would they speak?
What does our mark look like, and does it work small, large, light and dark?
What should people feel when they see our visuals?
What do we need to launch, and where will people first see us?

Decisions we'll make together

How it sounds
The line you'll repeat everywhere
The look you'll stand behind
Your type and color

Week 1 · Get unstuck

MonWorkshop — We confirm the scope, check the foundation, and agree what we're testing and how.
TueExplore — Research, and two or three directions for voice, identity, imagery and marketing assets.
WedExplore — The directions, taken far enough to compare honestly.
ThuShape — The strongest direction, sharpened for the lock.
FriDirection lock — We review the directions together and commit to one.

Week 2 · Get something real

MonMake — The chosen direction, built out.
TueMake — The core of it, made real.
WedRefine — A review together, then the fixes it turns up.
ThuTest — Checked against what we set out to learn, and finished.
FriDelivery — A walkthrough, and everything lands in your Hub.

You leave with: A voice guide · Your tagline and key messages · A logo set · A color palette and type pairing · An image style guide · Reference scenes · Launch assets · Templates to keep shipping with

Every sprint follows this shape; yours is written around your project when you start.

In a real project

Miles

What identity produced in a real engagement, exactly as the client has it. See the whole Hub

Color palette

Forest Green

Primary — buttons, links, the brand's voice in color

#32A871

Sand

Secondary — warmth, highlights, illustration

#D69545

Sky Blue

Tertiary — information, maps, calm accents

#4686C2

Neutral

Paper (50) is the light surface; Ink (900) is text and the dark surface

#85827F

Typography system

Typography

Four families, one job each: Acme Gothic Condensed for display, Inter Tight for subheads, Inter for body and UI, Overpass Mono for AI and data. Special Gothic Condensed One stands in for Acme in Google Slides.

Fonts

Acme Gothic Condensed
Font file
CONDENSED PUNCH FOR HERO HEADLINES
Aa600
Tall, condensed display face with strong presence. Always use in ALL CAPS. Best for: Hero H1 headlines and bold marketing statements.
Font file Source
Special Gothic Condensed One
Font file
BOLD CONDENSED DISPLAY FOR SLIDES
Aa400
Strong condensed display face for Google Slides. Great Acme Gothic alternative. Best for: Headlines in Google Slides presentations where Acme Gothic isn't available.
Font file Source
Inter
Google Fonts
The quick brown fox jumps over the lazy dog.
Aa300Aa400Aa500Aa600Aa700Aa800
Neutral, highly readable sans-serif with a modern UI feel. Best for: Body text, UI copy, buttons, labels, and general-purpose headings.
Source
Inter Tight
Google Fonts
Inter Tight — slightly more compact for headlines.
Aa300Aa400Aa500Aa600Aa700Aa800
A tighter-width companion to Inter for punchier display copy. Best for: Hero headlines, section titles, and compact headings.
Source
Overpass Mono
Google Fonts
MILES AI: JACK TOOK THE RAV4 OUT 12 MINS AGO...
Aa500
Technical, legible mono face for AI summaries and utility labels. Best for: AI body copy, AI labels, and compact technical metadata.
Source

Type scale

Headings

H1
Acme Gothic Condensed · 60px / 1 · 600
52px on mobile · No tracking · Uppercase
Page / document title
HEADING 1 — PAGE TITLE
H2
Acme Gothic Condensed · 48px / 1 · 600
40px on mobile · No tracking · Uppercase
Section heading
HEADING 2 — SECTION HEADING
H3
Inter Tight · 22px / 1.25 · 600
20px on mobile · No tracking
Subsection heading
Heading 3 — Subsection heading

Subheadings

H4
Inter · 18px / 1.33 · 500
16px on mobile · Tracking -0.2px
Prominent subheading
H4 — Prominent subheading
Subtitle
Inter · 20px / 1.33 · 400
16px on mobile · Tracking -0.1px
Standard subheading
Subtitle — Standard subheading
Overline
Inter · 14px / 1.5 · 500
13px on mobile · Tracking 0.3px · Uppercase
Optional; section labels / metadata
OVERLINE — SECTION LABEL

Body

Body / L
Inter · 20px / 1.3 · 400
16px on mobile · Tracking -0.2px
Intro / lead text
When your teen starts driving, everything changes. Miles helps families stay calm, informed, and prepared — without constant check-ins or invasive tracking.
Body / M
Inter · 16px / 1.5 · 400
14px on mobile · Tracking -0.015em
Default body text
Body Medium — Default body text
Body / M Bold
Inter · 16px / 1.4 · 600
14px on mobile · Tracking -0.015em
Emphasis within body copy
Body Medium Bold — Emphasis text
Body / S
Inter · 14px / 1.35 · 400
13px on mobile · Tracking -0.005em
Secondary or dense content
Body Small — Secondary or dense content
Body / S Bold
Inter · 14px / 1.35 · 600
13px on mobile · Tracking -0.005em
Emphasis in dense content
Body Small Bold — Compact emphasis
Caption
Inter · 12px / 1.5 · 500
Tracking 0.01em
Captions, helper text, footnotes
Caption — Helper text or footnotes

UI Text

Label
Inter · 13px / 1.33 · 400
11px on mobile · Tracking 0.01em
Form labels, table headers
Label — Form labels and table headers
Button
Inter · 16px / 1.5 · 400
15px on mobile · Tracking -0.015em
Primary button text
Button — Primary CTA

Technical

AI Body
Overpass Mono · 12px / 1.5 · 500
No tracking
AI-generated summaries and system-style assistant copy.
JACK TOOK THE RAV4 OUT 12 MINS AGO, AND THE CIVIC IS PARKED AT HOME.

Logo set

Badge
For dark or photo backgrounds.
SVG PNG EPS
Wordmark
The full wordmark, for marketing and product.
SVG PNG EPS
Icon
Small footprints and app icons.
SVG PNG EPS

All twelve building blocks Next: Imagery →