Table des matières
Typographie
Guide des tailles & interlignage pour titres (font:Barlow) et corps de texte (font:Roboto)
| Niveau | Desktop (px/rem) | Tablette (px/rem) | Mobile (px/rem) | Interlignage conseillé |
|---|---|---|---|---|
| H1 | 3rem | 2.5rem | 2rem | D_3.2 | Mob_2.65rem |
| H2 | 2.2rem | 1.8rem | 1.4rem | D_2.6 | Mob_2.2rem |
| H3 | 1.7rem | 1.4rem | 1.3rem | D_2.2 | Mob_1.8rem |
| H4 | 1.5rem | 1.2rem | 1.15rem | D_2 | Mob_1.6rem |
| H5 | 1.3rem | 1.1rem | 1.05rem | D_1.8 | Mob_1.5rem |
| H6 | 1.2rem | 1rem | 1rem | D_1.7 | Mob_1rem |
| Corps | 1rem | 0.95rem | 0.9rem | D_1.5 | Mob_1.7rem |
Barlow H1
Barlow H2
Barlow H3
Barlow H4
Barlow H5
Barlow H6
What is Lorem Ipsum? (font Roboto)
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Iconographie
Principales icônes à utiliser
Banque d’icônes intégrée : Font Awesome
Taille de l’icône : multiple de 8px
Espacement entre l’icône et le titre : 8px
Source externe : Moto-rama
- Fleches
- liste à puces
- O/F (bte à onglets, accordéon...)
- Téléphone
- Plan
- Recherche
- Bibliothèque
- Utilisateur
- team
- soins
Couleurs & Accessibilité
Une harmonie colorimétrique structurée
Pour assurer une cohérence visuelle et une hiérarchie claire sur chaque site, nous suivons la règle des 60-30-10 :
60% – Couleur dominante : Généralement le blanc, pour un design épuré et aéré.
30% – Couleur secondaire : Accentue la structure et crée du contraste.
10% – Couleur d’accentuation : Met en avant les éléments interactifs (CTA, liens, éléments clés).
Chaque site de notre multisite dispose de trois couleurs principales, choisies avec soin pour respecter l’identité visuelle et garantir une lisibilité optimale.
Accessibilité & Lisibilité des couleurs
L’accessibilité est primordiale pour garantir une expérience utilisateur fluide et inclusive. Nous veillons donc à :
✅ Un contraste suffisant entre le texte et l’arrière-plan.
✅ Des couleurs compréhensibles par les personnes atteintes de daltonisme.
✅ L’utilisation de symboles et d’icônes en complément de la couleur (ex : erreurs en rouge + icône)
Ressources pour choisir et tester les couleurs :
Tableaux HTML et CSS
Définir la classe : table-responsive pour les tableaux html (ajoute un slide horizontale pour la version mobile)
Code css à intégrer dans les "réglages du site"
/* debut Tableau html responsive sur mobile*/
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
border-radius: 6px;
position: relative; /* nécessaire pour positionner l'élément ::after */
padding-bottom: 4rem; /* espace pour que la flèche ne chevauche pas le tableau */
}
.table-responsive table {
width: 100%;
min-width: 600px; /* ou plus si besoin */
border-collapse: collapse;
}
.table-responsive th,
.table-responsive td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
white-space: nowrap; /* évite les retours à la ligne inutiles */
}
.table-responsive th {
background-color: #f4f4f4;
font-weight: 600;
}
.table-responsive::after {
content: "→ Faites glisser vers la droite pour voir tout le tableau";
position: absolute;
right: 16px;
bottom: 8px;
font-size: 0.9rem;
color: #444;
background: rgba(255, 255, 255, 0.85);
padding: 4px 8px;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
animation: bounce-right 1.5s infinite;
pointer-events: none;
z-index: 10;
}
@keyframes bounce-right {
0%, 100% {
transform: translateX(0);
opacity: 0.6;
}
50% {
transform: translateX(6px);
opacity: 1;
}
}
@media screen and (min-width: 768px) {
.table-responsive::after {
display: none;
}
}
/* debut Tableau html responsive sur mobile*/
Images & Médias
Un design aux bords arrondis harmonieux
Toutes les images suivent une règle d’arrondi en multiples de 8px pour garantir une cohérence visuelle :
8px : Léger arrondi, idéal pour des cartes et des miniatures.
16px : Arrondi intermédiaire, parfait pour des images de contenu.
32px : Arrondi prononcé, utilisé pour des avatars ou des images immersives.
Dimensions standardisées
Pour assurer une mise en page harmonieuse et éviter tout problème de redimensionnement automatique, les images doivent respecter ces dimensions :
| Type d’image | Orientation | Dimensions (px) | Utilisation |
|---|---|---|---|
| Images paysage | Horizontale | 600 × 400 | Images mises en avant pour articles, actualités et agenda |
| Images portrait | Verticale | 500 × 625 | CTA, images de contenu |
Optimisation & bonnes pratiques
✅ Formats recommandés :
JPG pour les photos optimisées.
PNG pour les images avec transparence.
SVG pour les icônes et logos vectoriels.
WebP pour un meilleur ratio qualité/poids (préféré si supporté).
✅ Poids optimisé :
Moins de 200 Ko par image pour de meilleures performances.
✅ Compression recommandée :
✅ Tests et performance :
Vérifier l’impact des images avec PageSpeed Insights.
En appliquant ces principes, les images resteront nettes, rapides à charger