White
#FFFFFF · --color-white
Page background and controls
Design foundations
Biens d’exception.
Une signature commune.
Colors, typography, spacing and components drawn from the Leading Luxury Home homepage. A consistent foundation for the next pages.
Figma source · 3133:5830 ↗01 · Palette
Warm neutrals. Quiet accents.
White and warm ivory surfaces, mint highlights and taupe actions from the LLH homepage.
Warm ivory
#F4EFEB · --color-llh-warm
Editorial and contact surfaces
Mint
#BCDCD4 · --color-llh-mint
Callouts, journal and footer
Light mint
#E4F1EE · --color-llh-mint-light
Services surface
Ink
#454545 · --color-llh-ink
Headings and primary copy
Secondary
#818181 · --color-llh-secondary
Agency copy and metadata
Supporting copy
#616161 · --color-llh-copy
Journal and callout descriptions
Taupe
#B59E7D · --color-llh-brand
Primary actions
Hover taupe
#947B59 · --color-llh-brand-hover
Hover and keyboard focus
Gold
#75591F · --color-llh-gold
Eyebrows and accents
Muted
#757575 · --color-llh-muted
Placeholder and metadata
Border
#D5D7DA · --color-llh-border
Input outlines
Card border
#E8E4DF · --color-llh-card-border
Card outlines
02 · Typography
One size for every heading.
Crimson Pro for display and card headings, EB Garamond for section headings, and Inter for copy and controls. Every heading level has one fixed size across the site.
H1 · Display
Crimson Pro · 400 · 64px / 68px · text-h1
Biens d’exception à Maurice.
H2 · Section
EB Garamond · 400 · 42px / 47px · text-h2
Une agence dédiée aux biens d’exception
H3 · Card
Crimson Pro · 500 · 22px / 24px · text-h3
Villa contemporaine vue lagon
H4
Crimson Pro · 400 · 20px / 24px · text-h4
Un accompagnement sur mesure
H5
Crimson Pro · 400 · 18px / 24px · text-h5
Votre projet immobilier
H6
Crimson Pro · 400 · 16px / 24px · text-h6
Les détails qui comptent
Body
Inter · 400 · 17px / 28.9px · text-body
Leading Luxury Home vous accompagne dans l’acquisition, la vente et la location de propriétés d’exception.
Button / input
Inter · 400–500 · 16px / 24px · text-control
Rechercher · Votre adresse e-mail
Label / metadata
Inter · 500 · 14px / 16.8px · text-label
Localisation · Cap Malheureux
Eyebrow
Inter · 500 · 12px / 16px · 0.18em · text-caption
Sélection Leading Luxury Home
Badge
Inter · 500 · 12px / 16px · text-caption
Exclusivité
03 · Spacing
A rhythm built on four.
Use the same scale for gaps, padding and layout relationships. Keep generous space around editorial sections.
14px
28px
312px
416px
520px
624px
832px
1040px
1248px
1664px
2080px
2496px
30120px
1200px content1248px outer container, 24px desktop gutters.
24px card padding32px grid gaps; 8px label-to-field gap.
100px sections64px tablet, 48px mobile; compact and spacious variants below.
Section padding tokens
Use one responsive utility per section. Desktop values match the journal, agency spacing and contact band in Figma. Mobile and tablet values are deliberate layout adaptations.
| Utility | Mobile | Tablet ≥ 768px | Desktop ≥ 1280px | Reference |
|---|---|---|---|---|
section-padding-compact | 32px | 40px | 55px | Journal · 3133:6385 |
section-padding | 48px | 64px | 100px | Agency spacing · 3133:5980 |
section-padding-spacious | 64px | 80px | 114px | Contact · 3133:6308 |
--spacing-section, --spacing-section-compact and --spacing-section-spacious also generate py-section, pt-section and pb-section utilities for explicit per-side spacing. The agency reference uses top spacing; the shared utility applies it to both sides for standalone sections.
Journal card radius · 4px
Prix de l’immobilier haut de gamme
Crimson Pro · 22px / 24px · 24px card padding
04 · Components
Familiar at every touchpoint.
Primary and secondary actions, fields, badges and mint surfaces share the same visual rules.
Actions & fields
Style specimen. No data is submitted.
Tous les types
Acheter
Louer
Exclusivité
Domaine avec vue sur la baie
Cap Malheureux
MUR 34 000 000
5 chambres4 salles de bain420 m²
Card typography specimen · 22px title · 24px padding · 10px corners.
Mint surface
À découvrir cette semaine
Mint grounds editorial callouts, the journal and footer. Ink headings and muted body copy keep these sections consistent with the homepage.
Focus & motion
Tab through the guide to see the 2px gold focus ring with a 3px offset. Hover and keyboard focus share the same taupe treatment. Transitions use 150ms ease-out and respect reduced motion. Hover effects require a fine pointer.
05 · Standards
One consistent foundation.
Design values and normalization choices are kept explicit.
From the client design
Frame 3133:5830 supplies the fonts, 64px H1, 42px H2, mint palette and taupe pill controls. H3 is normalized to the journal’s 22px card title; H4–H6 extend the same hierarchy.
Normalized spacing
Controls use a 48px minimum height and a pill radius. Cards use 24px padding. General cards use 10px corners; journal cards use the reference’s 4px corners. Body copy uses 17px / 1.7; all control text uses 16px / 1.5.
Responsive assumptions
Heading sizes stay fixed at every breakpoint: H1 64px, H2 42px, H3 22px, H4 20px, H5 18px, H6 16px. Layouts stack and gutters reduce to 16px on mobile; headings wrap naturally.
Interaction details
Selection uses ink with ivory text, image selection stays transparent, and autofilled inputs keep their white background. Buttons and links use pointer cursors.