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.

Principal
Braise, texte encre. L’action attendue : découvrir, commander, écrire.
Plein
Encre sur fond clair, crème sur fond sombre. Action secondaire forte.
Filet
Transparent avec un filet. Action discrète, à côté d’un bouton principal.

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.

Relief
Papier un peu plus clair que le fond, ombre portée en trois couches, liseré braise en haut.
Voile
Sous l’en-tête, sans bloquer les clics : on peut continuer ses achats.
Mouvement
Photo en arc vers le panier, rebond de l’icône, coche tracée. Rien de tout cela si le visiteur réduit les animations.

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.