Colour System
Text
4 Tokens
Primary Text
#EFECE5
Main headings & body text on dark backgrounds
Secondary text
#BBC7BF
Supporting text, captions, placeholders — on dark backgrounds
Text on Accent
#242B26
Text inside gold/accent-filled buttons — always dark on gold
Text on Light
#000
Text on sand/light backgrounds (services accordion on #CBBF9C)
Backgrounds
4 Tokens
Background Page
#242B26
Main site background — used across all pages
Background Surface
#313E37
Surfaces surélevées — cartes, info-bulles, panneaux de calculatrice
Background Sand
#CBBF9C
Light alternate section — services accordion, CTA strip backgrounds
Background Overlay
rgba(49,62,55,0.65)
Semi-transparent dark overlay on partner logo tiles / images
Border
3 Tokens
Border Default
#EFECE5
Section dividers, full outline borders, horizontal rules
Muted Border
#BBC7BF
Form field underlines, checkbox outlines, subtle separators
Border Gold Subtle
#A59875
Navigation bar bottom border, range slider thumb border
Interactive - Button & Accents
5 Tokens
Accent Gold
#D6BE75
Primary CTA fill, active tab underline, left card accent border, slider fill, text links
Accent Gold Dim
rgba(214,190,117,0.47)
Inactive slider track, disabled accent state
Primary Button Background
#D6BE75
Gold filled CTA button — 'Talk to a broker', 'Contact us'
Button Background Dark
#313E37
Dark green secondary button — 'Find your broker'
Button Border Ghost
#EFECE5
Transparent ghost button — outline only, no fill — 'I want to renew'
Surface & Neutral
2 Tokens
Icon Background
#BBC7BF
Icon container background (about/services page)
Surface Neutral
#D3D3D3
Cookie consent banner background, light neutral overlays
Text system
SANS — PP Right Grotesk
Primary UI & body font · 8 styles
Heading XL
This is a heading
PP Right Grotesk - Medium
Heading L
This is a heading
PP Right Grotesk - Medium
Heading M
This is a heading
PP Right Grotesk - Medium
Heading S
This is a heading
PP Right Grotesk - Medium
Subheading
This is a subheading
PP Right Grotesk - Medium
Body L
Varius purus cum consequat phasellus diam eleifend sapien dapibus maecenas, facilisis metus tortor
PP Right Grotesk — Light · 300
Body M
Varius purus cum consequat phasellus diam eleifend sapien dapibus maecenas, facilisis metus tortor
PP Right Grotesk — Light · 300
Label/Buttons
Varius purus cum consequat phasellus diam eleifend sapien dapibus maecenas, facilisis metus tortor
PP Right Grotesk — Medium · 500
SERIF / DISPLAY — PP Editorial NeW
Primary UI & body font · 8 styles
Serif Display
This is a heading
PP Editorial New - Italic
Serif Heading L
This is a heading
PP Editorial New - Italic
Serif Heading
This is a heading
PP Editorial New — Regular
Serif Body
Varius purus cum consequat phasellus diam eleifend sapien dapibus maecenas, facilisis metus tortor
PP Right Grotesk - Medium