Design system · v1.0 · marque fictive

UI Kit
Laine & Lin

Documentation de l'identité et des composants du site : couleurs, textures tissées, typographies et éléments d'interface d'une marque de vêtements en fibres naturelles.

01 — Identité

Logotype

Un logotype typographique en Marcellus, l'esperluette teinte à l'indigo — le seul ornement d'une marque qui n'en veut pas.

Fond clair
Fond sombre
Sur texture
Monogramme — étiquettes, boutonsL&L

02 — Couleurs & textures

Palette

Des couleurs de matière, pas d'écran : écru du coton cru, lin naturel, charbon de la bure, indigo de cuve. Aucune couleur « chimique ».

Écru
#F4EFE6
Fond principal — le coton cru.
Lin
#DDD3C0
Surfaces secondaires, textures.
Charbon
#26241F
Texte, boutons, footer — jamais un noir pur.
Indigo
#3B5268
Accent : liens, esperluette, matières.
Texture « toile » — trame CSS sur fond lin, aucune image.
Texture « cuve d'indigo » — même trame sur fond indigo.

03 — Typographie

Typographies & échelle

La Marcellus, inspirée des capitales romaines, donne la voix posée de la marque ; la Karla assure la lecture avec une pointe de chaleur.

H1 — HeroMarcellus · 42→84px · lh 1.15
Des vêtements qui viennent de la terre
H2 — SectionMarcellus · 30→50px
La fibre avant la forme
Sous-titreKarla 600 · 12px · caps · +4px
Fibres naturelles · Atelier français
Corps de texteKarla 300 · 14-16px · lh 1.75
Laine des Pyrénées, lin de Normandie, coton biologique. Des pièces intemporelles, teintes aux plantes, cousues pour durer des décennies.

04 — Boutons

Boutons & interactions

Un bouton plein charbon qui se vide au survol — le contour reste, la matière s'en va. Une seule forme, deux contextes.

Sur fond clair · reposDécouvrir la collection
Sur fond clair · survolDécouvrir la collection
Sur fond sombre · reposVoir l'atelier
Sur fond sombre · survolVoir l'atelier

05 — Composants

Composants récurrents

Carte produit illustrée en SVG (pas de photos : la marque montre le trait, pas le mannequin), formulaire une-ligne et carte engagement.

Carte produit · survol : élévation

Le pull Ardenne

100% laine des Pyrénées
145 €
Formulaire newsletter
Carte engagement · filet indigo

Réparation à vie

Un accroc, une couture lâche ? Retour atelier, réparation offerte, pour toujours.

06 — Règles d'usage

À faire / à éviter

L'identité tient à sa retenue : des matières, des traits, pas d'effets.

✓ À faire

Illustrer en SVG au trait (2–2.5px) : produits, pictos, atelier — un seul style de dessin.

✓ À faire

Utiliser les textures tissées CSS pour donner de la matière aux aplats, jamais d'images de stock.

✓ À faire

Réserver l'indigo aux accents : esperluette, liens, matières, filets.

✗ À éviter

Noir pur (#000) ou blanc pur (#FFF) en grande surface : toujours charbon et écru.

✗ À éviter

Ombres portées lourdes, dégradés brillants, arrondis prononcés — la marque est mate et droite.

✗ À éviter

Plus d'une couleur d'accent par écran : l'indigo travaille seul.