UI Kit — Éditorial épuré
Design system de la maquette 2 pour De fil en tissus. Direction « boutique traitée comme un magazine de mode » : palette quasi neutre, terracotta en accent unique, serif éditorial + grotesque neutre. Chaque bloc ci-dessous indique le fichier CSS (et JS le cas échéant) du composant.
Palette
css/tokens.cssLe jaune historique du site (#FFD707) n'est pas repris ici — parti pris assumé de cette direction : la couleur vient des tissus photographiés, pas de la charte. #EC7D4B sert aux aplats/bordures/badges ; #B85A2E (assombri, ratio 4,63:1 sur blanc) est réservé au texte et aux liens pour rester conforme AA.
Échelle typographique
css/tokens.css, css/base.cssUn tissu en couverture
Choisir sa matière
Caractéristiques
Popeline, viscose, tweed : chaque pièce se commande au mètre ou en coupon.
Vendu par multiples de 10 cm, laize précisée sur chaque fiche produit.
Livraison en France et en Europe.
Sélection
Espacements
css/tokens.cssBoutons
css/button.cssChamps de formulaire
css/form-field.cssBadges de mode de vente
css/badge.cssNuancier tissu
css/swatch.cssChaque pastille est toujours doublée d'un label texte : l'information n'est jamais portée par la couleur seule.
Étoiles de notation
css/rating-stars.cssFil d'Ariane
css/breadcrumb.cssCarte tissu
css/fabric-card.css, css/fabric-card.tablet.css, css/fabric-card.desktop.css
Affichage prix double
css/price-display.cssAu mètre
Coupon (prix fixe)
Sélecteur de métrage
css/metrage-selector.css, js/metrage-selector.jsVendu par multiples de 10 cm.
Alertes
css/alert.cssAccordéon
css/accordion.css, js/accordion.jsTableau de caractéristiques
css/characteristics-table.css, css/characteristics-table.desktop.css- Matière
- Tweed
- Laize
- 140 cm
- Composition
- 80 % laine, 20 % polyester
Tri & pagination
css/sort-select.css, css/pagination.cssListe des composants
Un composant = un fichier CSS (+ variantes tablet/desktop uniquement si le composant change à ce palier), et un fichier JS vanilla s'il a besoin d'interaction.