Retour au site ↗01 — COULEURS
La palette de marque.
RGB 229 · 213 · 196
Fonds, accents, états ouverts
RGB 86 · 70 · 65
Textes, boutons, aplats
RGB 255 · 255 · 255
Fond principal, texte inversé
| Token complémentaire | Valeur | Usage |
|---|---|---|
| --ink / --hover | #342925 | Texte fort et survol du bouton principal |
| --active | #2A211E | Bouton pressé |
| --muted | #74645E | Texte secondaire sur blanc |
| --surface | #F7F2EC | Panneaux, survol de la FAQ |
| --border | #D5C8BC | Séparateurs décoratifs |
| Bordure de champ | #A99A92 | Inputs, select et textarea |
| --focus | #246BCE | Contour clavier 3 px, décalage 4 px |
| --disabled | #B7AAA3 | Fond de l’action désactivée |
| --error | #A64343 | Champ invalide et texte explicatif |
| --success / --warning | #3E6B57 / #9A642D | Réservés aux futures confirmations serveur et alertes |
02 — INTERACTIONS
Les états de l’interface.
| Composant | Repos | Survol | Actif / ouvert | Focus / désactivé |
|---|---|---|---|---|
| Bouton principal | Fond #564641 / texte blanc | Fond #342925 | Fond #2A211E | Contour bleu / fond #B7AAA3, texte #342925, disabled |
| Bouton catalogue | Blanc / marron | Marron / blanc | Marron / blanc | Contour bleu |
| Navigation | Texte #564641 | Soulignement animé | Page courante soulignée + aria-current | Contour bleu |
| FAQ | Fond blanc | #F7F2EC | #E5D5C4 + marqueur natif ouvert | Contour bleu sur la question |
| Formulaire | Blanc / bordure #A99A92 | Identique | Erreur : #A64343 + validation native | Contour bleu |
| Panier | Sélection vide | Actions disponibles | Ajout, retrait, total recalculé | Préparation désactivée si vide |
03 — TYPOGRAPHIE
Hiérarchie et lisibilité.
Poppins
Titres 500 · Actions 500 · Emphase 600
Open Sans
Corps 400 · Labels et emphase 600
| Niveau | Ordinateur | Mobile |
|---|---|---|
| H1 accueil | 50–92 px / interligne 1,04 | 42–66 px |
| H1 pages | 42–84 px / 1,05 | 42 px ; service 38–44 px |
| H2 section | 30–52 px / 1,12 | 30 px |
| Titre de carte | 23 px | 23 px |
| Corps | 16 px / 1,65 | 16 px / 1,65 |
| Bouton / label | 14 px | 14 px |
| Métadonnée | 12–13 px | 12–13 px |
04 — COMPOSANTS
Le kit d’interface.
Accordéon
Un composant utilisable au clavier ?
Oui. Les éléments details et summary fonctionnent avec Entrée et Espace, sans JavaScript.
Champ normal
Exemple d’erreur
Indiquez une adresse e-mail complète.
05 — RESPONSIVE
Un site. Trois formats.
| Largeur | Catalogue | Navigation | Marges |
|---|---|---|---|
| 1440 px | 3 colonnes, deuxième carte décalée | Menu complet | Jusqu’à 72 px |
| 768 px | 2 colonnes | Menu compact sous 901 px | 32–37 px |
| 390 px | 1 colonne | Menu dépliable | 20 px |
Espacement : 8, 12, 16, 20, 24, 32, 48, 64 et 90 px. Cartes : rayon 8 px. Boutons : rayon 100 px. Le panier, les formulaires et les contenus restent utilisables sans animation.
Objectifs à contrôler avant production : contrastes, zoom à 200 %, lecteur d’écran, clavier et affichage sur les appareils cibles. Ces objectifs ne constituent pas une certification d’accessibilité.
06 — MOCKUPS INTERACTIFS
Parcourir chaque page.
PC · 1440 × 900 px
L’aperçu est réduit pour tenir dans la fenêtre. La page intégrée conserve la largeur choisie et reste défilable.