Au mètre
Maquette 3 — Créatif & coloré
Charte graphique & design system
Direction « Créatif & coloré » : l'envie de coudre, le plaisir du DIY et de la couture enfant. Le jaune vif de la marque est assumé en accent signature, réservé aux aplats et boutons — jamais en texte sur fond clair, pour rester lisible. Chaque bloc ci-dessous précise son fichier CSS d'origine.
Palette
tokens.cssJaune signature#FFD707 — aplats & boutons uniquement
Terracotta#EC7D4B
Orange#EF9362
Brun#7A5B47
Encre (texte)#33241A
Blanc cassé#FFFBF2
Crème profond#FBF0DD
Ligne / bordure#ECDFC9
Règle de contraste : le jaune sur fond clair a un ratio d'environ 1,3:1, illisible en texte courant. Il reste réservé aux aplats et boutons (avec texte encre foncé). Les fonds terracotta/orange portent toujours un texte encre foncé en gras (≥ 4,6:1) ; le fond brun porte un texte blanc (6,1:1).
Échelle typographique
base.css / tokens.cssTitres en Baloo 2 (rond, amical), texte courant en Nunito Sans (lisible, chaleureux).
Trouvez votre tissu
Une sélection de tissus
Au mètre ou en coupon
Caractéristiques
Texte courant Nunito Sans, pour la lisibilité longue.
Texte secondaire, légendes, méta-informations.
Espacements
tokens.cssspace-1 · 4px
space-2 · 8px
space-3 · 12px
space-4 · 16px
space-5 · 24px
space-6 · 32px
space-7 · 48px
space-8 · 64px
space-9 · 96px
Boutons
button.cssVariantes
Tailles
États
Sur fond brun (section--brown)
Champs de formulaire
form-field.css
Facultatif — nous répondons sous 24h ouvrées.
Merci de renseigner une adresse email valide.
Badges
badge.css
Au mètre
Coupon
Panneau
Fat quarter
Niveau facile
Nouveauté
Pastilles de couleur / nuancier tissu
swatch.cssChaque pastille porte toujours un label texte : la couleur ne porte jamais l'information seule.
Variante compacte (carte tissu)
Coloris disponibles : fuchsia, bleu marine, marron
Étoiles de notation
star-rating.cssCarte tissu
fabric-card.css / fabric-grid.css
Au mètre
Coupon
Sélecteur de métrage
metrage-selector.css / metrage-selector.jsComposant métier clé : quantité en multiples de 10 cm, total recalculé en direct. Essayez les boutons +/− ou les préréglages.
Au mètre
Softshell — sans laize communiquée
1,39 €/ 10 cm
soit 13,90 €/m
cm
Total pour 1 m
13,90 €
Variante coupon / panneau (pas de sélecteur)
Panneau
1,20 × 1,50 m
14,90 €le panneau
Alertes
alert.cssBienvenue dans l'atelier ! Vérifiez votre boîte mail pour récupérer votre code -10 %.
Bon à savoir. Les échantillons sont offerts, hors frais de port.
Rupture temporaire. Ce coloris revient en stock d'ici 2 semaines.
Accordéon
accordion.css / accordion.jsDepuis la fiche produit, cliquez sur « Commander un échantillon » : une chute est ajoutée à votre panier.
Oui, en Europe. Les délais et frais varient selon la destination, affichés au moment du paiement.
Tableau de caractéristiques
spec-table.css- Matière
- Coton & lin (indicatif)
- Laize
- 150 cm
- Poids
- ≈ 180 g/m² (indicatif)
- Entretien
- Lavage 30° (indicatif)
Autres composants
Fil d'Ariane — breadcrumb.css
Barre de tri — sort-bar.css
Pagination — pagination.css
Opt-in — optin.css
Inventaire des composants
| Composant | CSS | JS |
|---|---|---|
| Design tokens | tokens.css | — |
| Base / reset | base.css | — |
| En-tête du site | header.css, header.desktop.css | header.js |
| Pied de page | footer.css, footer.tablet.css | — |
| Bouton | button.css | — |
| Badge (mode de vente) | badge.css | — |
| Fil d'Ariane | breadcrumb.css | — |
| Étoiles de notation | star-rating.css | — |
| Pastille couleur / nuancier | swatch.css | — |
| Prix double (10cm / mètre) | price-tag.css | — |
| En-tête de section | section-heading.css | — |
| Alerte | alert.css | — |
| Champ de formulaire | form-field.css | — |
| Opt-in (lead capture) | optin.css, optin.tablet.css | optin-form.js |
| Hero accueil | hero.css, hero.tablet.css, hero.desktop.css | — |
| Bandeau réassurance | reassurance-bar.css, reassurance-bar.tablet.css | — |
| Vignette univers | universe-card.css, universe-card.tablet.css, universe-card.desktop.css | — |
| Carte tissu | fabric-card.css, fabric-card.tablet.css | — |
| Grille de cartes tissu | fabric-grid.css, fabric-grid.tablet.css, fabric-grid.desktop.css | — |
| Explication au mètre / coupon | sell-mode-explainer.css, sell-mode-explainer.tablet.css | — |
| Carte idée couture | inspiration-card.css, inspiration-card.tablet.css | — |
| Galerie produit | product-gallery.css, product-gallery.desktop.css | gallery.js |
| Gabarit fiche produit | product-overview.css, product-overview.desktop.css | — |
| Sélecteur de métrage | metrage-selector.css | metrage-selector.js |
| Conseils de métrage | metrage-guide.css | — |
| Tableau de caractéristiques | spec-table.css, spec-table.tablet.css | — |
| Avis clients | review-card.css | — |
| Accordéon | accordion.css | accordion.js |
| Gabarit page catégorie | category-layout.css, category-layout.desktop.css | — |
| Filtres catégorie | filter-sidebar.css, filter-sidebar.desktop.css | filter-sidebar.js |
| Barre de tri | sort-bar.css | — |
| Pagination | pagination.css | — |
| Page UI Kit (cette page) | uikit-page.css, uikit-page.tablet.css | — |