v1.0 · web system · april 2026
Web visual guidelines.
The complete token set powering Bequest Web — typography, colour, rhythm, surfaces, components. Everything here is already live in the marketing site. Copy values directly.
bequest.love
01
Colour
Warm, confident, restrained.
Four core values. One accent. No gradients, no shadows. All ratios ≥ 4.5:1 against their intended surface.
Text · tint ladder on Ink
Pairing rules
- Ink on Sand / Ivory / Page BG — the 95% rule.
- Ivory on Ink — for testimonial / dark splash sections only.
- Terracotta on any light ground ≥ 4.6:1; never on Ink without Ivory buffer.
- Italic-serif + Terracotta = one emphasis per headline, max.
02
Typography
Three voices.
Space Grotesk does the thinking. Instrument Serif does the feeling. Inter does the talking.
Display / UI
Aa
Space Grotesk
300 · 400 · 500 · 600 · 700
Headlines, navigation, buttons, labels.
Editorial accent
Aa
Instrument Serif
Regular · Italic
Emotional emphasis inside headlines. Always italic in body copy.
Body · long-form
Aa
Inter
400 · 500 · 600
Paragraph text, micro-copy, footer, meta.
Type scale
Every size on the marketing site, in spec order.
Display · Hero
Space Grotesk 500
104px / lh 1.0
-0.05em tracking
See design file for live samples.
Display · Section
Space Grotesk 500
72px / lh 0.98
-0.045em tracking
See design file for live samples.
H2 · Headline
Space Grotesk 500
54px / lh 1.0
-0.04em tracking
See design file for live samples.
H2 · Sub-section
Space Grotesk 500
44px / lh 1.08
-0.035em tracking
See design file for live samples.
Serif · Stats
Instrument Serif 400 italic
44px / lh 1.0
-0.02em
See design file for live samples.
Lede · Subhead
Inter 400
19px / lh 1.5
Ink 78%
See design file for live samples.
Body · Paragraph
Inter 400
17px / lh 1.55
Ink 62%
See design file for live samples.
Body · Small
Inter 400
14px / lh 1.55
See design file for live samples.
Eyebrow · Kicker
Inter 600
11px
0.22em tracking
uppercase
See design file for live samples.
UI · Button
Inter 600
14 · 15 (lg) · 13 (sm)
-0.005em tracking
See design file for live samples.
Meta · Caption
Inter 400
12–13px
Ink 62%
See design file for live samples.
03
Space & rhythm
Generous, uneven, human.
No 8-point grid dogma. Section padding is always generous (80–140). Max widths cap reading lines at 60–70ch.
Spacing scale (px)
4
8
12
16
20
24
28
32
40
48
56
72
80
96
120
140
Section padding V
80 – 140 px
Generous breathing room between narrative beats.
Section padding H
40 px
Consistent gutter inside container.
Container max
960 / 1080 / 1200 / 1280 px
Narrows for reading-dense sections, widens for hero + pricing.
Reading measure
60 – 70 ch (≈460–520 px)
Body paragraph max-width. Never full-width text.
Card padding
32 × 28 / 40 × 36
Inner spacing on step cards, pricing cards.
Radius
4 / 6 / 999
Cards = 4–6. Buttons = 999 (full-pill).
04
Components
Building blocks.
Every primitive used across the marketing site — buttons, eyebrows, cards, tags, quote.
Buttons
Primary · Terracotta
CTA. One per fold. Always pill.
Ghost · Hairline
Secondary action. Never more than one per fold.
Dark · Ink pill
Reserved for dark-surface CTAs.
Size ladder:
Eyebrow label
How it works
Three steps. One afternoon.
Step card (highlighted / default)
015 min · highlighted
Tell us about your people.
Beneficiaries, children, pets. Anyone you want to remember.
0210 min · default
Tell us about your people.
Beneficiaries, children, pets. Anyone you want to remember.
Testimonial quote (inverted)
One of thousands
"I'd been putting it off for six years. Bequest made it feel like a love letter to my kids instead of a chore."
Maya Rodriguez · mother of two · Hong Kong
Form input
Brand atoms in web context
bequest
On Ivory (page default)
bequest
On Sand (hero · features)
bequest
On Ink (testimonial)
05
Surfaces
Four grounds.
Every background on the marketing site is one of these. No gradients.
06
Voice
Warm. Direct. Never clinical.
Copy earns emotion by being brutally short. One idea per sentence. No business-speak.
We say
- "Write it down."
- "An act of love."
- "Done in 20 minutes."
- "A gentler way to plan."
- "Your family won't know unless you tell them."
We don’t say
- "Estate planning solution"
- "Secure your legacy"
- "Comprehensive testamentary coverage"
- "Trusted by over N thousand users"
- "Get started today!"
Headlines
5 words or fewer. One emphasis per line.
Subheadlines
Three short sentences, period after each.
Buttons
Verb + noun. Never "Click here". Never "Learn more".