Série limitée — 8 pièces
Trousse Romantique
29,00 €
Voir le produit01 — Fondations
Logo & verrous
Les quatre verrous sont dérivés du fichier fourni par Céline (PNG 2000 px, détouré). Le nom est toujours une image, jamais du texte stylé : la casse et le crénage du script ne sont pas reproductibles en CSS. Le verrou qui manquait — le nom sur une ligne — a été obtenu en redressant l'arc du fichier source, et non en imitant le script avec une fonte.
Lockup horizontal — le verrou principal
Header · emails · factures
Le nom du logo est arqué dans le fichier source. Il a été redressé sur une ligne par transformation polaire — c'est le lettrage réel de Céline, pas une fonte de substitution. C'est ce verrou qui manquait, et c'est le plus utilisé.
440 px — emails, factures
356 px — header desktop, centré
240 px — header mobile
180 px — sous le plancher. Largeur minimale : 220 px. En dessous, passer à l'icône seule.
Le nom seul est également livré (logo-name-line.png) pour les cas où l'icône est déjà présente à l'écran.
Badge complet
Emballages, tampon, avatar réseaux sociaux. Jamais sous 120 px : la baseline arquée devient illisible.
Carré sans baseline
Tampon, filigrane, avatar carré. Le nom reste arqué : plancher de 120 px lui aussi. Pas un verrou de header.
Icône seule
Favicon 32 px, bouton de retour, marqueur de carte. Le bouton de couture identifie seul : descend jusqu'à 24 px.
Zone de respiration
Marge minimale égale au diamètre du bouton sur les quatre côtés. Aucun texte, filet ni photo dans cette zone.
Interdits
- Retaper « Madame Aiguille » dans une fonte du site — c'est toujours l'image.
- Le badge complet sous 120 px — la baseline devient illisible.
- Le logo sur une photo produit ou un fond à motif.
- Déformer, incliner ou recolorer hors monochrome
#8A615C/ ivoire.
Note d'intégration. Les verrous sont ici des PNG détourés issus du fichier source, le nom redressé par transformation polaire. Prérequis avant mise en ligne : vectorisation SVG (le PNG pèse 380 Ko pour un élément présent sur toutes les pages) — c'est à ce moment-là que le nom sera retracé proprement sur une ligne plutôt que redressé depuis un bitmap, et que les contours gagneront en netteté. Hyvä place le logo à gauche : surcharge de Magento_Theme::html/header/logo.phtml à prévoir pour le centrage desktop.
02 — Fondations
Couleurs
Valeurs relevées dans le logo et la maquette d'ambiance. La palette est un écrin : elle ne porte pas la couleur du site, les photos de tissus le font.
Matrice de contraste — WCAG 2.1 AA
Seuil : 4,5 : 1 pour le texte courant, 3 : 1 pour le texte de titre (≥ 24 px gras ou ≥ 30 px) et les anneaux de focus.
| Combinaison | Aperçu | Ratio | Verdict |
|---|---|---|---|
#5F4A41 sur #FFFCFA |
Corps de texte | 8,1 : 1 | ✓ AAA |
Blanc sur #8A615C |
Ajouter au panier | 5,3 : 1 | ✓ AA — boutons principaux |
#8A615C sur #FAF0EB |
Titres, liens, prix | 5,2 : 1 | ✓ AA |
#6E4D49 sur #F4E7E7 |
Série limitée — 8 pièces | 5,9 : 1 | ✓ AA — badges sur fond blush |
#8A615C sur #F4E7E7 |
Série limitée — 8 pièces | 4,4 : 1 | ✕ Échoue de peu — le piège du badge |
#77635A sur #F4E7E7 |
Texte secondaire | 4,6 : 1 | ✓ AA |
Blanc sur #C3867A |
Découvrir la collection | 3,0 : 1 | ✕ Échoue — c'est le bouton de la maquette d'ambiance |
#C3867A sur #FAF0EB |
Texte rose poudré | 2,9 : 1 | ✕ Échoue |
#E9C3AD sur #FAF0EB |
Texte nude | 1,6 : 1 | ✕ Décoratif uniquement |
À expliquer à Céline. Le rose #C3867A de ses boutons ne peut pas porter de texte blanc. On garde exactement sa teinte, mais en aplat décoratif ; les boutons passent au brun rosé du script de son logo — donc plus fidèle à l'identité, pas moins.
03 — Fondations
Typographie
Deux familles d'Indian Type Foundry, sous ITF Free Font License, auto-hébergées — les .woff2 fournis sont servis tels quels, sans sous-ensemblage ni reconversion.
Britney — --font-display
Regular 400 · Light 300
Aa Éé Œœ
L'élégance cousue main
Réservée à l'affichage. Display italique à très fort contraste, esprit didone.
- ✕ Jamais sous 30 px — les déliés et les accents disparaissent
- ✕ Jamais dans un bouton, un label, un prix, un tableau, le checkout
- ✕ Jamais d'
italicajouté — elle l'est déjà par dessin
Sentient — --font-body
Light 300 · Regular 400 · Medium 500 · Italic
Aa Éé Œœ
Créations textiles cousues avec amour — 29,00 € · « série limitée » · 1234567890
Serif de labeur. Lisible dès 13 px, accents solides, italique de qualité. Elle porte tout ce qu'il faut lire pour acheter.
- ✓ Corps de texte à 16 px plancher, interlignage 1,6
- ✓ Mentions légales et aides de saisie à 13 px plancher
- ✓
tabular-numssur les prix, pour aligner les colonnes du panier
Échelle typographique — rendue à taille réelle (desktop)
Titre de hero
display 400 · 40 / 64 px · 1,05
Madame Aiguille
Titre de section (H2)
display 400 · 30 / 40 px · 1,15
Les Incontournables
H1 de page · nom en fiche
body 500 · 26 / 32 px · 1,25
Pochette à Livre Isabelle
H3 · nom en vignette
body 500 · 18 / 20 px · 1,35
Trousse Romantique
Corps de texte
body 400 · 16 px plancher · 1,6
Chaque pièce est cousue à la main dans mon atelier, en série limitée de cinq à dix exemplaires. Le tissu est chiné par petites quantités : quand une série est terminée, elle ne revient que si je retrouve le même coupon.
Accroche · citation
body 400 italique · 16 / 18 px
Accessoires élégants pour sublimer le quotidien.
Prix
body 500 · 18 / 20 px · tabular-nums
29,00 €
Bouton · label
body 500 · 15 / 16 px
Ajouter au panier · Code postal
Mention légale · aide
body 400 · 13 px plancher · 1,5
TVA non applicable, art. 293 B du CGI. Frais de port calculés selon le poids de la commande.
Typographie française
Espace insécable avant : ; ? ! — guillemets « » avec espaces intérieures — prix au format 29,00 €, virgule décimale et espace avant l'euro — apostrophe typographique ’.
04 — Fondations
Espacement, rayons, ombres, ruptures
Échelle de base 4 px, alignée sur l'échelle Tailwind par défaut : aucune valeur arbitraire à déclarer dans le thème enfant.
Espacement — base 4 px
space-14 pxspace-28 pxspace-312 pxspace-416 pxspace-520 pxspace-624 pxspace-832 pxspace-1040 pxspace-1248 pxspace-1664 pxspace-2080 pxspace-2496 pxRythme vertical des sections : 64 px mobile / 96 px desktop. Gouttières de grille : 16 px mobile / 24 px desktop. Marges de page : 20 px mobile / 80 px desktop.
Rayons de bordure
none
0
sm
2 px · badges
DEFAULT
4 px · champs, boutons
md
6 px · cartes
full
pastilles
Pas de rayon au-delà de 6 px sur les blocs : l'univers est papier, pas application mobile.
Ombres — mates
soft
card
raised
drawer
Toujours teintées rgba(95,74,65,…) — jamais de noir pur, qui grise la palette chaude.
Points de rupture & grille — mobile d'abord
base
< 640 px
Maquette de référence 390 px. Grille produit 2 colonnes, marge 20 px.
sm
≥ 640 px
2 colonnes plus larges, header toujours en burger.
md
≥ 768 px
Grille 3 colonnes. Bascule du header en navigation horizontale.
lg
≥ 1024 px
Grille 4 colonnes. Récapitulatif de commande en colonne fixe.
xl
≥ 1280 px
Conteneur plafonné à 1280 px, centré. Maquette de référence 1440 px.
05 — Fondations
Ornements
Vocabulaire décoratif issu du logo et de la maquette. En SVG inline, jamais en bitmap. Un seul ornement par bloc : ils ne doivent jamais concurrencer les photos produit ni gêner la lecture.
Filets ondulés — titre de section
L'ornement signature. Uniquement sur les H2 d'accueil et de catégorie.
Les Incontournables
Cœur séparateur
Sépare une accroche de son texte. Toujours en brand-rose, jamais porteur de sens.
L'histoire de Madame Aiguille
Accessoires élégants pour sublimer le quotidien.
Bordure festonnée — effet dentelle
Transition entre deux sections de fonds différents. radial-gradient répété, aucune image.
Fond texturé floral — 8 % d'opacité
Plafond absolu : 10 %. Sur les sections de texte uniquement — jamais derrière une grille produit.
Branchages fins
En brand-nude, en angle de bloc éditorial ou en pied de page. Deux orientations suffisent.
Le checkout n'en porte aucun : c'est l'écran le plus sobre du site.
06 — Composants
Boutons
Trois niveaux, trois tailles, tous états dessinés. Les trois tailles respectent la cible tactile de 44 px — aucune exception à documenter. L'état désactivé a une seule définition pour tout le site — fond #F6EEEA, texte #8A7268, bordure #E4D3CB — y compris pour « Série terminée » en fiche produit et en vignette.
Repos
Survol
Focus clavier
Actif
Désactivé
Chargement
Principal
Une seule occurrence par écran
Secondaire
Action alternative
Tertiaire / lien
Navigation discrète
Trois tailles
Ajouter
S · 44 px · 15 px
Ajouter au panier
M · 48 px · 16 px — défaut
Passer commande
L · 56 px · 16 px
Pleine largeur — mobile
Ajouter au panier
Sur mobile, le bouton d'ajout et « Passer commande » sont toujours en pleine largeur.
Anneau de focus
Sur fond ivoire
outline: 2px solid #8A615Coutline-offset: 2px
Sur fond brand
L'anneau passe en ivoire pour conserver 3 : 1 contre le fond.
Jamais outline: none sans remplacement. L'anneau doit atteindre 3 : 1 contre l'arrière-plan et contre le composant.
Champs de formulaire
Hauteur 48 px, texte à 16 px — en dessous, iOS zoome à la mise au point du champ. Label toujours visible : pas de placeholder en guise de label. Le texte de substitution est en brand-muted #77635A (4,99 : 1) et non dans un gris clair : un placeholder est du contenu, il doit atteindre 4,5 : 1.
Repos
75011
Cinq chiffres, France métropolitaine.
Focus clavier
75011
Cinq chiffres, France métropolitaine.
Rempli
75011
Cinq chiffres, France métropolitaine.
Erreur
750
Un code postal comporte cinq chiffres.
Désactivé
75011
Modifiable à l'étape suivante.
Sélecteur, zone de texte, champ fichier
France
Bonjour Céline, la Trousse Romantique existe-t-elle dans un tissu plus sobre ?
1 000 caractères maximum.
Choisir un fichier
Aucun fichier sélectionné
JPG ou PNG, 5 Mo maximum.
Cases à cocher & boutons radio
Case à cocher
Décochée
Cochée
Focus clavier
J'accepte les conditions générales de venteVous devez accepter les CGV pour valider.
Désactivée
Bouton radio
Non sélectionné
Sélectionné
Focus clavier
Désactivé — indisponible pour ce poids
Note d'intégration. Les messages d'erreur sont liés au champ par aria-describedby et le champ porte aria-invalid="true". Le texte d'erreur ne se limite jamais à la couleur : pictogramme + libellé explicite, conformément à WCAG 1.4.1.
Carte produit
Image en ratio 4:5, sans exception. Un seul badge à la fois : si un produit est à la fois nouveau et en dernières pièces, la rareté l'emporte.
Repos
Survol
Image à 104 %, ombre raised, bordure nude. Pas de translation verticale.
Nouveauté
Dernières pièces
Épuisé
Reste visible et indexable, atténuée, non commandable, reléguée en fin de liste.
Badges
Quatre badges, alimentés par les attributs Magento — jamais saisis à la main. Rayon 2 px, texte à 13 px : ce sont des étiquettes cousues, pas des pastilles d'application. Le texte du badge blush est en brand-dark et non brand : sur #F4E7E7, brand ne donne que 4,4 : 1 à cette taille — le piège est documenté dans la matrice ci-dessus.
Série limitée — 8 pièces
Série limitée
Attribut taille_serie. Présent sur toutes les fiches concernées, y compris épuisées.
Nouveauté
Nouveauté
Dates news_from_date. Le seul badge en aplat plein : c'est lui qu'on doit voir en premier.
Plus que 2 exemplaires
Rareté
Sous le seuil de 3. Statique : pas de clignotement, pas de compte à rebours, pas de « 14 personnes regardent ».
Épuisé
Épuisé
Stock à zéro. Remplace tout autre badge et désactive l'ajout au panier.
Alertes
Déclinées dans la famille chaude — pas de rouge ni de vert saturés, qui jureraient avec la palette. Pictogramme et libellé : jamais la couleur seule.
Trousse Romantique ajoutée à votre panier.
Il vous reste 8,00 € à ajouter pour bénéficier de la livraison offerte.
Le paiement n'a pas abouti.
Votre panier est conservé et aucun montant n'a été prélevé. Vous pouvez réessayer ou choisir le virement bancaire.
Les frais de port sont calculés selon le poids de votre commande.
Le montant exact s'affiche à l'étape de livraison, après saisie de votre code postal.
Bloc de mise en avant de section
Le gabarit de tous les titres de section du site. Titre en display (jamais sous 30 px), accroche en italique, filets ornementaux, lien de sortie optionnel à droite.
Header
Logo centré sur desktop — c'est un écart assumé par rapport au défaut Hyvä. Navigation volontairement minimale : quatre entrées, pas de méga-menu.
Mini-panier en tiroir latéral
Ouvert à l'ajout au panier. 380 px sur desktop, pleine largeur sur mobile. La barre de franco de port est le premier élément lu : c'est elle qui fait grossir un panier de 15 €.
Règles
- Voile
rgba(95,74,65,.35)sur la page, fermeture au clic dessus et à la touche Échap. - Piège de focus dans le tiroir, retour au bouton panier à la fermeture.
- Au-delà de 4 articles : liste défilante, le pied de tiroir reste fixe.
- Une fois le franco atteint, la barre passe en succès : « Livraison offerte : c'est acquis. »
Comportement natif Hyvä (Alpine.js) — aucun développement spécifique, seul le gabarit change.
États vides
Trois règles : nommer ce qui manque, expliquer pourquoi, offrir une sortie. Jamais un cul-de-sac.
Panier vide
Votre panier est vide
Les séries tournent vite : il y a sans doute quelque chose de neuf depuis votre dernière visite.
Découvrir la boutiqueAucun résultat de recherche
Aucune création trouvée
Rien ne correspond à « trousse bleue ». Le catalogue ne compte que quelques dizaines de références : le plus simple est de tout parcourir.
Trousses
Pochettes
Cotons démaquillants
Voir toute la boutique
Footer
Quatre colonnes sur desktop, accordéon sur mobile. Les moyens de paiement sont écrits en mots : pas de logos de marques à gérer ni à maintenir.
07 — Fondations
Photographie
C'est le poste qui déterminera la perception de qualité du site, davantage que le code. L'homogénéité du fond fait la cohérence d'une grille, bien plus que la qualité de chaque photo prise isolément — le design ne doit donc pas dépendre d'une photographie parfaite.
Ratio 4:5 — sans exception
Vue d'ensemble
Le produit entier, cadrage aéré.
Détail
La couture, le motif, la fermeture.
Mise en situation
Donne l'échelle et l'usage.
Fond constant
Lin, bois clair ou textile ivoire.
À faire
- Ratio 4:5, 2 000 px sur le côté long minimum, pour permettre le zoom.
- Fond neutre et constant : lin, bois clair ou textile ivoire — le même d'une série à l'autre.
- Lumière naturelle latérale, sans flash.
- Trois vues minimum par création. Sortie WebP, générée par Magento.
À éviter
- Mélanger les ratios : une seule vignette carrée casse toute la grille.
- Fonds différents d'un produit à l'autre — l'effet catalogue disparaît.
- Conditionner la mise en ligne à un shooting professionnel. On lance avec l'existant recadré, on remplace ensuite.
- Ornement ou fond texturé derrière une grille produit.
À communiquer à Céline maintenant, avant qu'elle ne prépare ses visuels : le ratio 4:5. C'est ce qui évitera de tout reprendre plus tard. Les photos utilisées dans ces maquettes sont recadrées depuis sa maquette d'ambiance — elles montrent que le gabarit tient avec ses photos actuelles.