The palettes and the type pairs, with the rules
Everything the builder can pick from, in the open: 24 palettes with their measured contrast, 12 Google Fonts pairs with the sizes and tracking written down. Use them without the builder if you like.
rules: ink on ground ≥ 7:1 · primary on ground ≥ 4.5:1 · white on primary ≥ 4.5:1 · muted on ground ≥ 4.5:1 · accent for marks unless flagged
Palettes
Harbour
calm · trustworthy · local
Navy on off-white with a brass mark — the harbour office, not the yacht club.
ink/ground 14.23 · primary/ground 7.88 · white/primary 8.66 · muted/ground 4.73 · accent: marks only
Kopi
warm · local · trustworthy
Roasted brown and a kopi-tiam yellow; reads as a shop that has been there a while.
ink/ground 14.97 · primary/ground 8.23 · white/primary 8.92 · muted/ground 4.6 · accent: marks only
Monsoon
calm · premium
Deep teal with a wet-sand accent; quiet, expensive, never loud.
ink/ground 14.4 · primary/ground 6.59 · white/primary 7.22 · muted/ground 4.75 · accent: marks only
Laksa
bold · warm · playful
Chilli red on cream with a turmeric mark; food, markets, anything that should smell good.
ink/ground 15.73 · primary/ground 5.64 · white/primary 5.98 · muted/ground 4.67 · accent: marks only
Padi
local · calm · warm
Field green and a harvest yellow; produce, home-grown, honest.
ink/ground 13.92 · primary/ground 5.82 · white/primary 6.27 · muted/ground 4.61 · accent: marks only
Jeepney
bold · playful · fast
Chrome blue and gold; fast, noisy, cheerful, unmistakably street.
ink/ground 16.85 · primary/ground 8.37 · white/primary 8.64 · muted/ground 4.94 · accent: marks only
Ubud
calm · premium · local
Olive and terracotta on linen; spa, craft, ceramics, anything made by hand.
ink/ground 13.34 · primary/ground 6.27 · white/primary 7.06 · muted/ground 4.71 · accent: marks only
Saigon Night
bold · premium · fast
Violet and neon pink on grey; nightlife, streetwear, motion.
ink/ground 16.93 · primary/ground 9.58 · white/primary 10.51 · muted/ground 4.66 · accent: marks only
Phin
trustworthy · calm
Slate blue with a drip-filter copper; services, consulting, B2B.
ink/ground 15.09 · primary/ground 10.31 · white/primary 11.26 · muted/ground 4.66 · accent: marks only
Mangrove
local · calm · trustworthy
Mangrove green with a mudflat orange; nature, tours, sustainability that isn't smug.
ink/ground 15.15 · primary/ground 7.2 · white/primary 7.92 · muted/ground 4.69 · accent: marks only
Kueh
playful · warm
Pandan and rose; sweets, gifts, small joys.
ink/ground 15.62 · primary/ground 6.2 · white/primary 6.57 · muted/ground 4.74 · accent: marks only
Cendol
playful · local · warm
Pandan green and gula melaka brown; dessert stalls, kids' things, anything that should feel like a treat.
ink/ground 15.16 · primary/ground 4.86 · white/primary 5.13 · muted/ground 4.77 · accent passes as text
Port Klang
trustworthy · fast · bold
Container blue and safety orange; logistics, trades, moving things.
ink/ground 15.88 · primary/ground 8.05 · white/primary 8.86 · muted/ground 4.63 · accent: marks only
Batik
premium · local · warm
Madder red and indigo on unbleached cloth; textiles, fashion, heritage without the museum.
ink/ground 14.64 · primary/ground 7.43 · white/primary 8.22 · muted/ground 4.68 · accent passes as text
Hawker
warm · bold · fast
Wok-flame orange and a coriander green; quick food, delivery, the lunch rush.
ink/ground 16.04 · primary/ground 4.62 · white/primary 4.88 · muted/ground 4.65 · accent passes as text
Clinic
trustworthy · calm
Surgical teal with a warm coral; health, wellness, anything that must feel competent and kind.
ink/ground 15.01 · primary/ground 5.58 · white/primary 5.96 · muted/ground 4.62 · accent: marks only
Banana Leaf
local · warm · playful
Leaf green and a masala orange; restaurants, catering, family businesses.
ink/ground 14.92 · primary/ground 5.78 · white/primary 6.15 · muted/ground 4.68 · accent: marks only
Tuition
trustworthy · calm · playful
Exercise-book blue and a highlighter yellow; education, tutoring, kids.
ink/ground 15.41 · primary/ground 7.3 · white/primary 7.81 · muted/ground 4.63 · accent: marks only
Kampung
local · calm · warm
Wood and moss; homestays, community, slow things.
ink/ground 14.2 · primary/ground 7.88 · white/primary 8.51 · muted/ground 4.74 · accent: marks only
Studio
premium · calm · bold
Near-black on grey with one acid mark; design, photography, architecture.
ink/ground 17.17 · primary/ground 14.47 · white/primary 15.91 · muted/ground 4.7 · accent: marks only
Clay
warm · premium · calm
Terracotta and sage; ceramics, home goods, skincare that isn't pink.
ink/ground 13.87 · primary/ground 5.31 · white/primary 5.99 · muted/ground 4.74 · accent: marks only
Courier
fast · trustworthy · bold
Signal red and charcoal; delivery, urgency, done-today.
ink/ground 16.4 · primary/ground 5.31 · white/primary 5.74 · muted/ground 4.61 · accent passes as text
Agent
trustworthy · premium · fast
Deep pine with an old-gold mark; property, finance, advice.
ink/ground 15.96 · primary/ground 10.96 · white/primary 11.95 · muted/ground 4.63 · accent: marks only
Night Market
playful · bold · local
Purple and tangerine; events, pop-ups, anything after dark.
ink/ground 16.37 · primary/ground 8.32 · white/primary 8.71 · muted/ground 4.65 · accent: marks only
Type pairs
Fraunces + Inter
warm · premium · local · for F&B, Retail, Craft
A soft serif with character over a neutral sans: the pairing every good café menu wants and most get wrong by using a script.
- Headings 600–700, tight tracking (−0.01em), line-height 1.05; optical size does the rest.
- Body Inter 16–18px, line-height 1.55; never bold whole sentences.
- Don't set Fraunces below 20px — it is a display face.
fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],600;9..144,700&family=Inter:wght@400;500;600
Newsreader + Public Sans
trustworthy · calm · local · for Services, Property, Education
Editorial trust without stuffiness; both were designed for screens and both are free.
- Headings 500–600, normal tracking, line-height 1.1.
- Body Public Sans 16px, line-height 1.6; labels in 600 at 12–13px, letter-spacing .06em.
- Don't use Newsreader for buttons — Public Sans 600 only.
fonts.googleapis.com/css2?family=Newsreader:opsz,[email protected],500;6..72,600&family=Public+Sans:wght@400;500;600
Playfair Display + Source Sans 3
premium · calm · for Fashion, Beauty, Weddings
The high-contrast serif that reads as expensive, tamed by the most legible free sans there is.
- Headings 500 at large sizes (36px+), tracking −0.015em; italics for one word at most.
- Body Source Sans 17px, line-height 1.6.
- Don't use Playfair for more than two lines — high contrast strokes tire at length.
fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Source+Sans+3:wght@400;600
DM Serif Display + DM Sans
warm · bold · playful · for F&B, Events, Retail
One family's two voices — they were drawn together, so the rhythm matches by default.
- Headings at 400 only (single weight), size 32px+, tracking 0.
- Body DM Sans 16px, line-height 1.55; use 700 for prices and numbers.
- Don't letter-space the serif; its shapes are already wide.
fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:opsz,[email protected],400;9..40,500;9..40,700
Space Grotesk + Inter
fast · bold · trustworthy · for Software, B2B, Logistics
A grotesk with personality on top of the internet's default: technical, not cold.
- Headings 600–700, tracking −0.02em, sentence case; all-caps only for labels.
- Body Inter 16px, line-height 1.55; tabular numbers for tables (font-variant-numeric: tabular-nums).
- Don't pair with a second grotesk; Inter is the second.
fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600
Sora + Nunito Sans
playful · calm · trustworthy · for Apps, Education, Kids
Friendly without being childish: geometric headings, humanist body.
- Headings 600, tracking −0.01em, generous line-height 1.15.
- Body Nunito Sans 16–17px, line-height 1.6; rounded terminals do the friendliness — don't add emoji to headings.
- Don't go below 500 for Sora; it gets thin.
fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Nunito+Sans:opsz,[email protected],400;6..12,600
Cormorant Garamond + Lato
premium · calm · local · for Craft, Hospitality, Beauty
Old-style elegance at display sizes; Lato keeps the body plain so the serif stays special.
- Headings 600 at 40px+ (Cormorant is small on the body); tracking 0.01em; small caps for one-word labels.
- Body Lato 17px, line-height 1.65.
- Don't use Cormorant under 24px anywhere.
fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Lato:wght@400;700
Archivo Black + Archivo
bold · fast · playful · for Streetwear, Events, Fitness
Poster weight and its own text companion; loud where loud is the point.
- Headings all-caps, tracking 0.02em, line-height 0.95; one size bigger than you think.
- Body Archivo 16px, line-height 1.5; 600 for CTAs.
- Don't use Archivo Black for paragraphs or for more than six words a line.
fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600
Libre Caslon Text + Work Sans
warm · trustworthy · local · for F&B, Heritage, Publishing
Caslon has sold books for three hundred years; Work Sans keeps the interface out of its way.
- Headings 700 at 28px+, tracking −0.005em; italic 400 for a subtitle.
- Body Work Sans 16px, line-height 1.6.
- Don't set Caslon in all caps below 18px.
fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Work+Sans:wght@400;500;600
Manrope (single family)
calm · fast · trustworthy · for Software, Services, Finance
One variable family, four weights: the cheapest way to look designed.
- Headings 800, tracking −0.03em; body 400 at 16px, line-height 1.55.
- Contrast comes from weight and size only — keep the scale to four steps (14 · 16 · 24 · 40).
- Don't add a second face; the discipline is the look.
fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;800
Bricolage Grotesque + Instrument Sans
playful · bold · local · for Creative, Pop-ups, Retail
A grotesk with a hand-made quirk over a plain, well-spaced sans; personality in the right place.
- Headings 800 at 36px+ with the optical size wide open; tracking −0.02em.
- Body Instrument Sans 16px, line-height 1.55.
- Don't use Bricolage for body text or for labels — it wobbles small.
fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],600;12..96,800&family=Instrument+Sans:wght@400;500;600
Lora + Karla
calm · warm · trustworthy · for Wellness, Health, Homestays
A calligraphic serif that stays legible with a slightly grotesque sans: quiet, kind, unhurried.
- Headings 500–600, tracking 0, line-height 1.2; italic 500 for a quiet line.
- Body Karla 16–17px, line-height 1.6.
- Don't stack Lora bold on Karla bold; one bold voice per screen.
fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;1,500&family=Karla:wght@400;500;700