Charte & UI kit — « L'atelier couture »
Direction artistique pour De fil en tissus : la boutique de tissus vécue comme un atelier de couturière chaleureux. Palette bâtie autour du terracotta et du brun du logo, typographie Playfair Display / Karla, coins doux, détails couture discrets en SVG inline. Chaque bloc ci-dessous précise son fichier CSS.
Palette
Terracotta en accent principal, brun profond pour le texte, orange clair en secondaire, crème en fond. Le jaune historique du site reste une touche rare, réservée aux aplats (jamais en texte fin).
Typographie
Playfair Display pour les titres (élégance couture), Karla pour le texte courant (lisible, chaleureux).
Le plaisir de coudre
Nos tissus du moment
Caractéristiques
Un tweed dense au tombé structuré, parfait pour une veste cintrée.
Prix affiché au 10 cm pour choisir votre métrage au plus juste.
Laize 140 cm · Livraison sous 48h
Espacements
Échelle en px, du plus fin (séparation d'icône) au plus large (rythme entre sections).
Boutons
Primary = terracotta / texte brun foncé (contraste 4,9:1). Secondary = brun / texte blanc (contraste 6,1:1). Cible tactile ≥ 44px.
Variantes
États
Boutons icône (sélecteur de métrage)
Champs de formulaire
Badges de mode de vente
L'information n'est jamais portée par la couleur seule : chaque badge porte un libellé texte.
Pastilles de couleur (nuancier / filtre)
Chaque pastille est doublée d'un label texte, jamais seule porteuse du sens.
Étoiles de notation
Affichage de prix
Carte tissu
Photo lifestyle bord à bord, badge de mode de vente, prix double, note. Toute la carte est un lien unique.
Sélecteur de métrage
Composant métier clé : quantité en multiples de 10 cm, total recalculé en direct. Démonstration fonctionnelle ci-dessous (prix : 0,89 € / 10 cm, coton lin écossais).
Essayez les boutons + / − ou les raccourcis 0,5 m / 1 m / 2 m.
Alertes
Inscription confirmée ! Votre code -10 % arrive dans votre boîte mail.
Ce tissu se vend au mètre : le sélecteur ci-dessus calcule votre total en direct.
Adresse e-mail invalide. Merci de vérifier votre saisie.
Accordéon
Utilisé pour les groupes de filtres et les blocs dépliables de la fiche produit. aria-expanded synchronisé en JS.
Nettoyage à sec conseillé, repassage à basse température sous linge.
Expédition sous 48h ouvrées, retour possible sous 30 jours pour un tissu non coupé.
Tableau de caractéristiques
| Laize | 140 cm |
|---|---|
| Composition | Env. 60 % laine, 40 % polyester |
| Usages conseillés | Veste, jupe structurée |
Fil d'Ariane & pagination
Liste des composants & fichiers
Un composant = un fichier CSS (et un fichier JS si besoin), déclinés par média via l'attribut media du <link>. Aucune media query dans les fichiers CSS.
| Composant | Fichier(s) CSS | Fichier JS |
|---|---|---|
| Design tokens | tokens.css | — |
| Base / reset | base.css, .tablet, .desktop | — |
| En-tête | header.css, .desktop | nav.js |
| Pied de page | footer.css, .desktop | — |
| Fil d'Ariane | breadcrumb.css | — |
| Bouton | button.css | — |
| Badge | badge.css | — |
| Hero accueil | hero.css, .desktop | — |
| Bandeau réassurance | reassurance-bar.css, .desktop | — |
| Grille catégories | category-grid.css, .tablet, .desktop | — |
| Vignette catégorie | category-tile.css | — |
| Carte tissu | fabric-card.css | — |
| Grille produits | product-grid.css, .tablet, .desktop | — |
| Affichage prix | price-display.css | — |
| Étoiles de notation | stars-rating.css | — |
| Explication au mètre / coupon | sales-model-explainer.css, .desktop | — |
| Bandeau mercerie | mercerie-banner.css, .desktop | — |
| Formulaire d'opt-in | optin-form.css, .desktop | optin-form.js |
| Champ de formulaire | form-field.css, .desktop | — |
| Alerte | alert.css | — |
| Filtres catégorie | filters.css, .desktop | filters.js |
| Barre de tri | sort-bar.css, .desktop | — |
| Pastille couleur | swatch.css | — |
| Pagination | pagination.css | — |
| Sélecteur de métrage | metrage-selector.css, .desktop | metrage-selector.js |
| Galerie photo | gallery.css | gallery.js |
| Accordéon | accordion.css | accordion.js |
| Tableau de caractéristiques | characteristics-table.css | — |
| Encart conseil | guidance-box.css | — |
| Avis client | review-card.css | — |
| Liste de réassurance | trust-list.css | — |
| Séparateur point de couture | stitch-divider.css | — |