Charte graphique · 05
Boutons et composants
Les petites briques qui reviennent sur chaque page : boutons, liens, cartes, tons de section.
Les boutons
Trois formes pour trois niveaux d’importance. Le bouton principal est toujours braise ; un seul par bloc.
Les liens
Pour inviter à lire la suite : mono en majuscules, flèche, soulignement animé.
Les cartes produit
La pièce détourée se fond sur une plaque sable (le blanc de la photo disparaît), avec son coin coupé. En dessous : la famille en mono orange, le nom en Fraunces, le prix. Les mêmes cartes servent partout : accueil, boutique, pièces similaires. Une pièce épuisée porte une pastille « Épuisé » et un voile sable sur sa photo ; la plaque garde sa couleur.
Le formulaire de contact
Trois champs seulement — nom, e-mail, message — pour qu’écrire à l’atelier ne coûte rien. La plaque crème garde le même aspect sur fond sombre ou braise ; elle est dans les bandeaux d’appel, la section Contact de l’accueil et, sur une fiche produit, rappelle la pièce concernée (« À propos de »). Le message part par e-mail à l’atelier, l’adresse n’est jamais affichée, et un contrôle invisible (sans service extérieur ni cookie) écarte les robots.
La confirmation d’ajout au panier
À chaque ajout, la photo du produit vole jusqu’au panier de l’en-tête, qui rebondit ; la page s’assombrit en douceur et une fenêtre confirme : pièce, quantité, prix, progression vers le port offert (80 € TTC en France métropolitaine) et accès au panier. Elle se ferme seule au bout de 7 secondes, par un clic ailleurs, la croix ou la touche Échap.
Les étapes de commande
Panier, livraison et paiement, confirmation : trois colonnes de même largeur, pastilles à égale distance quelle que soit la longueur du libellé. L’étape en cours est braise, les précédentes sont cochées.
Les tons de section
Fonds, textes, accents et filets sont regroupés par « ton » : on change l’ambiance d’une section d’un seul réglage.
La grille
Texte
Colonne de lecture de 46 rem (environ 740 px).
Large
Sections et grilles jusqu’à 78 rem (environ 1 250 px), centrées.
Pleine largeur
Fonds et ouvertures vont d’un bord à l’autre ; le contenu reste dans la grille.