The Trusted Union design language.

Tokens, type and components behind the homepage. Every sample renders live from the site’s own styles.css.

Brand mark

Mark + wordmark locked together in the header. Mark alone works as favicon or avatar.

Colour

Navy for authority, off-white and stone for the foundation. Bronze/champagne for accents only — rules, numbering, labels, hover, selected buttons. Never pure black.

Light foundation

Paper

–paper

Paper lift

–paper-lift

Warm white

–white

Panel warm

–panel-warm

Stone

–stone

Midnight navy

Navy 900

–navy-900

Navy 800

–navy-800

Navy 700

–navy-700

Navy

–navy

Navy 400

–navy-400

Advisory pillars

Employee Benefits

–pillar-eb

Business Protection

–pillar-bp

Private Client

–pillar-pc

Bronze & champagne — accents only

Bronze

–bronze

Bronze deep (text)

–bronze-deep

Bronze lit (hover)

–bronze-lit

Champagne

–champagne

Ink — text on light

Ink

–ink

Ink 2

–ink-2

Ink 3

–ink-3

Cream — text on dark

Cream

–cream · #F1EEE8

Cream 72%

–cream-2

Cream 62%

–cream-3

Champagne

–champagne

All text/background pairs used on the site meet WCAG AA (lowest ≈ 4.9:1).

Typography

Source Serif 4 for headings and emphasis; DM Sans for everything else. Italic serif = emphasis only, at weight 600.

Insurance advice who need more.

H1 · .h1
Source Serif 4 · 400
clamp 2.5–4rem / 1.08

Rarely just product decisions.

H2 · .h2
Source Serif 4 · 400
clamp 1.875–2.75rem / 1.14

Employee Benefits

H3 · .h3
Source Serif 4 · 400
clamp 1.375–1.625rem / 1.25

Understand

H4 · .h4
Source Serif 4 · 400
1.25rem / 1.3

Lede — a Hong Kong-based independent insurance advisory firm helping businesses make clearer decisions.

Lede · .lede
DM Sans · 400
1.0625rem / 1.75 · ink-2

Body — for companies, the right structure can influence contractual risk, management responsibility and business continuity.

Body · .body
DM Sans · 400
1rem / 1.7 · ink-2

Hong Kong · Independent Insurance Advisory

Eyebrow · .eyebrow
DM Sans · 500 · 0.18em
uppercase · bronze-deep

Emphasis — bold italic serif

Emphasis · .em
Source Serif 4 · italic 600

Buttons & links

Navy fill for primary actions, bronze fill only on the dark CTA, underlined links for quieter in-flow actions. CTA label is always “Request a Confidential Review”.

Request a Confidential Review Small button Underlined link

On light · .btn, .btn--sm, .link

Request a Confidential Review Underlined link

On dark · .btn--bronze, .link--dark

Components

Section label

Advisory Areas

Advisory cards — three divisions of one firm

Employee Benefits

Group medical, corporate health, group life, disability and renewal strategy for employers.

Learn more

Business Protection

Professional indemnity, D&O liability, cyber and other corporate risk arrangements.

Learn more

Private Client

International medical, life protection and cover for jewellery, watches and fine art.

Learn more

.card--eb pale blue-grey · .card--bp deep navy (most authoritative) · .card--pc warm stone

Numbered reasons & process steps (on navy)

Human judgement

Trade-offs around cost, cover, exclusions and claims service stay with an experienced adviser.

Modern workflow

Structured processes keep reviews consistent and repeatable at renewal.

Understand

We begin by understanding the client, the risk and the objective behind the review.

Review

We review existing cover, exclusions, limits and the gaps that actually matter.

.reason / .step with italic-serif numerals in champagne

Bulleted checks & at-a-glance

Independent advice across local and international insurance markets.
A structured process that begins with understanding, not with a quotation.

IndependentHong Kong insurance advisory firm

Three advisory pillarsEmployee Benefits, Business Protection, Private Client

Local and international marketsInsurance market access

Technology-enabledWorkflow with human adviser oversight

Proof / case card

Trusted Union coordinated a Hong Kong-led liability programme supporting affiliated operations across approximately 12 international offices for a management consulting group.

Trusted Union’s role: central programme coordination, entity scheduling, insurer liaison, policy administration and renewal support.

Anonymised client engagement

Imagery

Real Hong Kong context — harbour, senior meetings, discreet valuables, night skyline. Avoid postcards, handshakes, mansions, supercars.

Hero — arch crop

Star Ferry, daytime harbour

Day-to-night hinge

Central skyline, daylight

Full-bleed band

Structured workflow, dark

Final CTA

Hong Kong at night

Layout & motion

Content max-width	`--maxw` · 1312px, centred
Gutter	`--gutter` · 32px mobile → 64px ≥1200px
Section rhythm	`.section` · 88px mobile → 128px desktop vertical padding
Hairline rules	`--rule` / `--rule-strong` / `--rule-dark`
Easing	`--ease` · cubic-bezier(0.22, 0.61, 0.36, 1)
Scroll reveal	`.reveal` — progressive enhancement; content renders fully without JS
Reduced motion	`prefers-reduced-motion` honoured — reveal and transitions disabled