ImpactMiles, built for trust.
This is the living reference for the ImpactMiles brand. Every mark, colour, typeface and icon here is drawn from the same design tokens the product uses, so what you see is what ships.
The Milestone
The ImpactMiles mark is a route with a milestone reached. Every element is deliberate, and every element ties back to the promise of verified impact.
- Concentric tracks
The three faint rings represent the shared field participants, charities and corporates all move through. Everyone runs on the same map.
- Navy ring
The full ring is the total field of possible impact, the complete route.
- Mint arc
The verified journey actually completed and recorded. It never closes back on itself, because impact is always ongoing.
- Teal milestone dot
A checkpoint reached, verified and countersigned. The mile that actually got counted. It is the reason the whole system exists.
Sizes and lockups
The wordmark uses Space Grotesk 600 in navy. The tagline sits in JetBrains Mono, uppercase, tracked out, echoing the verified receipts the product produces.
Clear space, contrast and don'ts
Give the mark room to breathe and never let it fight its surroundings. The mint arc is what tells people this is a verified route, don't obscure it.
- Keep clear space around the mark equal to the height of the 'I' in ImpactMiles.
- Use the full colour mark on cream, lavender-soft or white surfaces.
- Use the full colour mark on navy, mint accent stays visible against the dark ring.
- Pair the wordmark with the tagline only when there is room for the mono line to read cleanly.
- Minimum size: 24px for the mark, 96px wide for the full lockup.
- Don't recolour the mint arc. It is the verified journey and must stay mint.
- Don't rotate, skew or outline the mark.
- Don't place the mark on busy photography without a solid tile behind it.
- Don't set the wordmark in any font other than Space Grotesk.
- Don't change the tagline. It is always 'built for trust', lowercase, mono, tracked.
Palette
Warm cream over deep navy is the foundation. Teal is the trusted primary on light surfaces, mint is the celebratory accent on dark. Lavender softens tiles and plates. Every value is a CSS token, never a raw hex in components.
Primary background. Warm, human, off-white paper feel.
Ink, dark surfaces, sidebars, wordmark colour.
Deepest surface. Footer, modal overlays.
Primary action on light. Verified checkpoint dot.
Accent on dark. Verified arc, celebratory highlights.
Secondary surfaces, tile backgrounds on light.
Softer tile fill. Icon plates on cream backgrounds.
Success chips, subtle accent bands.
Body text.
Secondary text, captions, tagline.
Hairlines, dividers, card outlines.
Destructive actions, errors, critical alerts.
- Body text on cream: ink #2B2B33.
- Body text on navy: cream #F7F5F1 at 80% for secondary.
- Teal is the CTA on light. Mint is the CTA and highlight on dark. Never swap them.
- Urgent red is reserved for destructive actions and verification failures, never for decoration.
Space Grotesk, Inter, JetBrains Mono
Three families do all the work. Display in Space Grotesk 600 for confidence, body in Inter for legibility, mono in JetBrains Mono for anything that feels like proof, receipts, IDs, tokens, formulas.
Headlines, wordmark, section titles. Tight tracking, always in navy.
Every mile is signed by the person who moved it and countersigned by the charity who benefited. That signed receipt is the whole point of the system.
Paragraphs, UI copy, buttons. Regular for body, medium for emphasis.
Receipts, IDs, formulas, tag eyebrows. Never for body copy.
One icon system, one voice
Every icon in the product renders through @/components/icons. Twelve brand icons are hand-authored with a mint accent that echoes the verified milestone. The rest are a unified wrapper: 1.5px stroke, round caps, currentColor. Import from '@/components/icons', never from lucide-react directly.
- Import from '@/components/icons'. Size with Tailwind, e.g. h-5 w-5.
- Let icons inherit colour via currentColor. Set text colour on the parent.
- Use brand icons for trust, achievement, giving and celebration moments.
- Don't import from lucide-react directly, it bypasses the unified stroke and accent system.
- Don't override strokeWidth below 1.5 or above 2, it breaks visual weight balance.
How ImpactMiles sounds
Warm, plain, British. Confident without hype. Every claim is something we could show a receipt for.
- "Built for trust."
- "Verified miles, verified impact."
- "Every mile is signed and countersigned."
- "Turn movement into measurable outcomes."
- "Revolutionary." "Disruptive." "Game-changing."
- "Powered by AI" as a headline claim.
- Long dashes or em dashes, use commas or hyphens.
- American spellings, we write in British English.