Design tokens · v1.0

The Manifold style guide.

Every color, type ramp, button state, form field, card, and icon this template ships with — the single source of truth to check before and after you rebrand.

01

— Colors

Cobalt / Primary

#2743E3

CTAs, links, key accents. White text passes AA.

Cobalt / Hover

#1E34C0

Primary button hover + active link state.

Ink

#0E1626

Headings and body text on light surfaces.

Porcelain / Base

#F7F9FB

Page background across every template.

Label / Mono

#5C6B80

Geist Mono eyebrows & captions — never lighter.

Ice

#E3EDF9

Bento tint — emergency & sewer cards.

Mint

#DEEDE6

Bento tint — drain & leak cards.

Aqua

#DCEBF0

Bento tint — water heater & gas cards.

Cloud

#E8ECF1

Icon chip tint — Lucide Icons credit + image placeholders.

02

— Typography

Display

On time, or the fee’s on us

H1

Full-service plumbing, one call

H2

Fixed right, or we come back free

H3

Signs it’s time to call

H4

Water heater repair & installation

H5

Upfront flat-rate pricing

H6

Background-checked technicians

Body

You approve the price before we start — no hourly surprises, no clock-watching.

Mono label

01 — What we fix

Display

On time, or the fee’s on us

H1 / H2

Full-service plumbing, one call

H3 / H4

Signs it’s time to call

Body

You approve the price before we start — no surprises.

Small

Subject to credit approval. See terms for details.

Mono label

01 — What we fix

03

— Buttons

Primary · cobalt #2743E3

Default Hover Active Focus Disabled

Secondary · white / outline

Default Hover Active Focus Disabled

04

— Form elements

Input · default

Input · focus

Input · error

Enter a valid email so we can confirm your quote.

Select

Textarea

Checkbox & radio

Yes, text me arrival updates

checked

Add me to seasonal maintenance tips

default

Emergency — need someone today

selected

Scheduling a routine visit

default

Toggle

24/7 emergency dispatch — on

05

— Cards

White service card

Service card

Hairline border, radius 24, soft shadow, pastel icon chip.

White · pastel icon chip

Ice #E3EDF9

Ice tint

Tinted bento card

Tinted card

One pastel per card: ice, mint, aqua, cloud. Dark ink passes AA on all four.

Bento pastel surface

★★★★★

Cobalt panel — stars use #FFD470 here.

Cobalt review panel

Stars switch to #FFD470 on cobalt; #A67E12 on light surfaces.

06

— Icons

· Lucide 1.6 stroke

droplet

phone

wrench

flame

waves

siren

route

search

waypoints

shower-head

badge-percent

shield-check

clock

map-pin

check

arrow-right

arrow-up-right

chevron-down

star

mail

The Manifold style guide.

Full-service plumbing, one call

Fixed right, or we come back free

Signs it’s time to call

Water heater repair & installation

Upfront flat-rate pricing

Background-checked technicians

One system, every page.