Lattimore Partners

Brand foundation

The design system

Everything below is shared across every site built from this template. Only the logo and the colour palette change per client — both have dedicated slots.

Component libraryPage templates
Per-site overrides

src/styles.css → SITE PALETTE block
src/design-system/Logo.tsx → mark + wordmark

Everything else — type scale, spacing rhythm, radii, components — stays fixed.

Per-site slot 02

Colour

Canvas--canvasPrimary off-white page ground
Canvas Alt--canvas-altAlternating section band
Canvas Warm--canvas-warmCards, CTA bands
Slate Deep--slate-deepDark structural section
Midnight--midnightHero + footer canvas
Jewel--jewelAccent editorial block
Cobalt--cobaltFocal CTA, links, active
Cobalt Glow--cobalt-glowHover + gradient end
Cobalt Soft--cobalt-softBadge / icon tile wash
Ink--foregroundBody text on light
Ink Muted--muted-foregroundSecondary text
Hairline--hairline1px structural borders
Section canvas · canvas
Section canvas · warm
Section canvas · midnight

Foundation

Typography

type-displayHomepage hero only

Operational clarity

type-h1Interior page titles

Finance transformation

type-h2Section headings

How engagements run

type-h3Card titles

Diagnostic sprint

type-h4Dense list headings

Deliverables

type-leadHero + section support copy

We embed with your operators.

type-bodyDefault paragraph

Every engagement opens with a baseline.

type-smallMeta, captions, nav

Six week engagement

type-eyebrowSection labels, badges

Capabilities

type-editorialPull quotes

The board finally agreed.

Display / UI

Geist

300–700. All headings, body copy and UI labels.

Editorial

Newsreader

Pull quotes and long-form insight intros only.

Mono

Geist Mono

Eyebrows, metrics labels, token references.

Component

Buttons

On light canvas

On dark canvas

One focal (cobalt) button per view. Every other action uses primary, inverse or outline.

Component

Forms

Consultation request

We reply within one business day.

Scope, timeline and current blockers.

That code has expired.

Rules

  • 44px control height, 2px radius, hairline border.
  • Cobalt focus ring at 20% opacity — never remove focus states.
  • Labels always visible; placeholders are examples, not labels.
  • Errors replace hints in the same slot to avoid layout shift.

Component

Cards

Light card

Default surface for grids on canvas and alt sections.

Warm card

Used inside warm bands and secondary rails.

Dark card

For midnight, slate and jewel sections.

Focal card

Reserved for one conversion or highlight tile per page.

£1.4bnCost base reviewed
6 wksTo committed plan
92%Benefits realised
NeutralFocalLive

Component

Navigation & footer

Navigation

Sticky 64px bar, translucent canvas with blur, single hairline base. Left: logo plus primary links. Right: one focal CTA. Collapses to a stacked sheet under 1024px. Register new pages in the navigation array.

Footer

Zero-radius midnight block: brand rail with newsletter capture, three link columns, hairline-separated legal bar with compliance mark. Identical on every page — see the bottom of this page.

Foundation

Icons

arrowRight
arrowUpRight
analytics
enterprise
check
chevronDown
chevronRight
strategy
document
performance
global
platform
growth
security
mail
minus
operations
plus
trust
innovation
target
trending
people
workflow
close

Lucide only, 1.75 stroke, 16px inline / 20px in tiles. Never mix icon families or use filled glyphs.

Foundation

Spacing & geometry

Vertical rhythm

gutterContainer horizontal padding
gap-3Button clusters, badge rows
gap-6Card grid gutters
py-section-smCompact bands, proof strips
py-sectionDefault section rhythm
py-section-lgHero sections

Radii

rounded-none · 0pxFooters, full-bleed structural blocks
rounded-xs · 2pxButtons, inputs, cards, badges
rounded-md · 4pxLarge media containers

8pt grid throughout. Containers: 76rem default, 86rem wide, 48rem narrow.

Structure

Page templates

Standard content page

PageShell → PageHero (midnight) → Section alt → Section slate → Section canvas → CTABand.

Index / listing page

PageShell → PageHero (canvas) → filter rail → hairline card grid → CTABand.

Detail / case study page

PageShell → PageHero with stat aside → editorial body → results band (jewel) → CTABand.

Component library

Import everything from a single entry point. Sections alternate canvas tones automatically — never hand-roll a background colour.

import {
  PageShell, PageHero, Section, SectionHeading, Container,
  Card, CardTitle, CardBody, Button, Badge, Stat,
  Field, Input, Select, Textarea, Checkbox,
  Icon, IconTile, CTABand,
} from "@/design-system";

Build the next page on this foundation

Prompt with: "Create a Services page using the existing design system."

Book a consultation