Style Guide
Design system pour Ponçage Marbre Paris
Palette de Couleurs
Couleurs Principales
PRIMARY
#375944
SECONDARY
#557662
DARK
#212121
Couleurs de Texte
Text Primary
#525252
Text Secondary
#595959
Text Muted
#767676
Couleurs de Fond
Beige
#e2dacf
Light
#f5ece6
White
#ffffff
Les couleurs sont définies via les variables CSS du thème :--global-palette1 à --global-palette9
Polices
Titres – Prata
Aa Bb Cc Dd Ee
font-family: var(--global-heading-font-family);
Police serif élégante pour les titres H1-H6
Corps – Lato
Aa Bb Cc Dd Ee
font-family: var(--global-body-font-family);
Police sans-serif pour le corps de texte
Navigation – Mulish
Aa Bb Cc Dd Ee
font-family: var(--global-primary-nav-font-family);
Police pour menus et boutons
Typographie
Titre Principal H1
Font weight: 300 • Letter spacing: -0.02em • Line height: 1.1
Titre Secondaire H2
Font weight: 300 • Line height: 1.3
Titre Tertiaire H3
Font weight: 400 • Line height: 1.4
Label de Section
Font weight: 500 • Letter spacing: 2px • Uppercase
Corps de texte standard. Font weight: 300 • Line height: 1.8. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Boutons
Border radius: 2px • Padding: 1rem 2rem • Font weight: 500 • Letter spacing: 0.5px • Uppercase
Séparateurs
Séparateur standard • Opacity: 0.3
Séparateur clair (pour fonds sombres)
Cartes de Service
Titre du Service
Description du service avec texte secondaire. Border radius: 0 • Image ratio: 16:9
Titre du Service
Description du service avec texte secondaire. Border radius: 0 • Image ratio: 16:9
Blocs de Processus
01
Étape
Description de l’étape du processus.
02
Étape
Description de l’étape du processus.
Numéro font weight: 200 • Border top uniquement • Padding: 2rem
Espacements
Section padding standard : 6rem (desktop) / 3rem (mobile)
Gap entre colonnes : 2rem
Gap entre éléments : 1.5rem à 2rem
Marges titres : 1rem à 2rem selon contexte
Largeurs de Conteneurs
Narrow: 700px
Idéal pour CTA et textes courts
Medium: 900px
Idéal pour contenu textuel et hero
Wide: 1100px
Idéal pour grilles de contenu et colonnes
Principes de Design
Minimalisme
Design épuré avec espaces généreux. Typographies légères (200-400). Bordures fines et discrètes.
Hiérarchie
Contraste entre titres légers et corps de texte. Labels uppercase pour structurer. Numéros XXL pour processus.
Images
Coins carrés (radius 0). Qualité professionnelle. Overlays sombres sur covers pour lisibilité du texte blanc.
Comment utiliser ce guide
Copiez le bloc HTML <style> en début de page pour appliquer le design global. Utilisez les exemples de blocs ci-dessus comme modèles pour créer de nouvelles pages cohérentes avec l’identité visuelle.
Classes CSS personnalisées disponibles :.section-label • .process-number • .border-top-only.max-width-narrow • .max-width-medium • .max-width-wide