Foundations

The tokens beneath every Bonlife surface.

Color, type, spacing, motion, logos and photography - all traced back to the brand book, no invented values.

Colour · Primary

Navy anchor, warm coral accent.

Bonlife is not a pastel-insurance brand - it reads corporate-serious first, friendly second. Navy owns text and chrome; coral owns CTAs and highlights against it.

Navy 900
#0C1C3E--navy-900
Coral 500
#FF876A--coral-500
Mint 400
#01FBC0--mint-400
Colour · Categories

Four plans, four colours.

Each product category owns a saturated identifier colour. Use it to tint plan cards and badges for its own category - never as a general UI colour.

Funeral Cover
#04413F--category-funeral
Life Insurance
#541467--category-life
Saving & Study Plans
#0D2B90--category-savings
Accident & Disability Cover
#A80A4D--category-accident
Colour · Surfaces & semantic

Two near-whites, two states.

Surface tint sits under navy text; muted fills cards and inputs. Semantic red and mint cover error and success only - never decorative.

Surface
#FFFFFF--surface-white
Tint
#F7F8FB--surface-tint
Muted
#EAEDF4--surface-muted
Error
#FF5F5F--state-error
Success
#41FFB6--state-success
Typography

Onest for display, Inter for body.

Bold Onest with tight negative tracking on headings loosens to 0 by H5. Inter carries everything long-form. No serif, no script, no display faces.

H1

N$1,000 Instant Cash, same day.

H2

Two Pockets. One Plan.

H3

Start early. Study further.

H4

Speed is respect.

H5
Family Plan
H6
COVER BENEFIT
Body L

A grieving family cannot wait weeks. Every Bonlife funeral plan pays a cover benefit fast.

Body

Start early, study further. Give them every chance.

Body S

SMS your name to 74448.

Spacing

4px base, generous rhythm.

4
--space-1
8
--space-2
12
--space-3
16
--space-4
24
--space-6
32
--space-8
48
--space-12
64
--space-16
Radius & shadow

Friendly, trust-first.

sm8px
md12px
lg20px
xl28px
Motion

Calm, never showy.

instant
100ms
presses
fast
160ms
hovers
base
240ms
menus, toasts
slow
400ms
modals
Logos

Wordmark and mark lockups.

Wordmark dark
Mark white
Mark navy
Mark coral
Mark mint
Gradients

Noise gradients for hero moments.

Grain-textured blends of brand and category colors. A tool for hero and marketing surfaces, never the default state of a card, and never behind body text without a scrim.

Photography

Warm, candid, Namibian.

Real portraiture - multi-generational, hugging, laughing, often looking at camera. Full-bleed or generously cropped. Never behind heavy dark overlays.