Color System
Text
4 Tokens
Text Primary
#EFECE5
Main headings & body text on dark backgrounds
Text Secondary
#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
Elevated surfaces — cards, tooltips, calculator panels
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
Border Muted
#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
Button Background Primary
#D6BE75
Gold filled CTA button — 'Parlez à un courtier', 'Contactez-nous'
Button Background Dark
#313E37
Dark green secondary button — 'Trouvez votre courtier'
Button Border Ghost
#EFECE5
Transparent ghost button — outline only, no fill — 'Je veux renouveler'
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