Nouvelle page

Guide Grille et Espacements - Site SEMAYAS

1. Grille (Grid)

• Grille de base : 12 colonnes (flexible, moderne).
• Largeur maximale du conteneur : 1200px à 1440px (centré).
• Marges latérales :
  • Desktop : 40px.
  • Mobile : 20px.

Breakpoints recommandés :

• Mobile : ≤ 767px
• Tablette : 768px – 1024px
• Desktop : ≥ 1025px

---

2. Dimensions pour chaque balise

Titres

• H1 :

  • Taille : 48px
  • Espacement (line-height) : 1.2
  • Marge bas : 24px

• H2 :

  • Taille : 36px
  • Espacement (line-height) : 1.3
  • Marge bas : 20px

• H3 :

  • Taille : 28px
  • Espacement (line-height) : 1.4
  • Marge bas : 16px

---

Paragraphes (balise <p>)

• Taille : 18px
• Espacement (line-height) : 1.6
• Marge bas entre paragraphes : 16px à 24px

---

Boutons / Call-to-Action (CTA)

• Padding :

  • Vertical : 16px
  • Horizontal : 32px

• Taille de police : 16px (en gras).

• Espacement avec les autres éléments : 32px à 48px.

---

Sections principales

• Espacements haut/bas : 80px à 120px pour créer de l’air.
• Entre les sections mineures : 48px à 64px.

---

3. Alignements

• Texte principal :

  • Gauche aligné pour les paragraphes.
  • Centré uniquement pour les titres des sections clés (ex. H1 dans la section héro).

• Visuels et contenu :

  • Sur Desktop :
    • Texte : 6 colonnes
    • Image : 6 colonnes
  • Sur Mobile :
    • Disposition en stacked layout (empilé).

---

4. Espacement général (Spacing)

Utilise une échelle de 8px pour garantir la cohérence :

• Petit espacement : 8px, 16px (pour les marges internes des éléments comme boutons).
• Moyen espacement : 24px, 32px (entre paragraphes, icônes).
• Grand espacement : 48px, 64px (pour séparer les sections principales).

---

5. Résumé rapide des valeurs

• H1 : 48px
• H2 : 36px
• H3 : 28px
• Paragraphe : 18px
• Boutons : Padding : 16px / 32px
• Espacement vertical (sections) : 80px à 120px
• Grille : 12 colonnes, conteneur 1200px à 1440px