Design System · Frank'line

01

Les principes.

Cinq règles qui gouvernent chaque décision de design. Quand un doute survient, on revient ici.

I.

L'air d'abord

Le vide n'est pas perdu. On préfère une page qui respire à une page qui dit tout. Marges généreuses, peu d'éléments, beaucoup de silence.

II.

Le sérif raconte

Cormorant pour ce qui émeut · titres, moments, citations. Manrope pour ce qui informe · corps, UI, données. Jamais l'inverse.

III.

Le rouge est rare

4 % de la surface, pas plus. Le rouge Heritage est une signature, pas une couleur de remplissage. Quand tout est accentué, rien ne l'est.

IV.

L'apostrophe vit

Toujours rouge, toujours italique, jamais omise. C'est la respiration du nom · et la signature de la marque.

V.

Rien ne crie

Pas de gras agressif, pas de majuscules hurlantes, pas d'animation gratuite. L'élégance, c'est la retenue tenue jusqu'au bout.

02

La couleur.

Quatre couleurs principales, dérivées de l'écusson. Chacune avec son rôle, son ratio, ses nuances de soutien.

Couleurs principales

Crème Heritage

#EBE2CC

--ivory · fond

Encre Navy

#1F3057

--ink · texte

Rouge Heritage

#B7202E

--rose · accent

Doré tendre

#DDC8A0

--blush · accent doux

Nuances de soutien

Couleur	Variable	HEX	Usage
Papier	--paper	`#F4ECD9`	Fond de carte, surface légère
Crème 2	--ivory-2	`#DDD3BD`	Image vide, placeholder
Crème 3	--ivory-3	`#C9BFA8`	Survol de surface
Encre 2	--ink-2	`#2A3D6A`	Texte secondaire
Encre 3	--ink-3	`#3B4F7E`	Texte tertiaire
Mute	--mute	`#837C6B`	Légendes, méta
Ligne	--line	`#C9BFA8`	Bordures, séparateurs
Rouge 2	--rose-2	`#8E1822`	Survol bouton rouge

Ratio d'usage · règle des 60·28·8·4

60 % Crème

28 % Encre

8 % Doré

4 % Rouge

03

La typographie.

Deux familles, une échelle modulaire. Cormorant Garamond pour l'éditorial, Manrope pour l'interface.

Échelle · Cormorant Garamond (display & titres)

Displayclamp(72-196px)
weight 300
tracking −0.02em

Frank'line

H1clamp(48-96px)
weight 300

Une élégance sans effort.

H2clamp(36-64px)
weight 300

Le polo, repensé.

H3 · serif26-32px
weight 400

Trois minutes pour un monogramme.

Citationitalic 300
22-28px

« On le garde dix ans. »

Échelle · Manrope (UI & corps)

Eyebrow11px · 0.22em
uppercase · 500

· Collection Printemps MMXXVI

Corps14-16px
line-height 1.7
weight 400

Le corps de texte Manrope porte les détails · descriptions, navigation, fiches techniques · sans jamais voler la vedette au sérif.

Petit / méta11-12px
0.18em uppercase

Livraison 48h · Garantie 5 ans

Mono / codeSF Mono
10-13px

FR-MMXXVI-001847

04

Espace & grille.

Échelle d'espacement par multiples de 4 px. Grille de 12 colonnes, gouttière 24 px, conteneur max 1440 px.

Échelle d'espacement

XS4px

SM8px

MD16px

LG24px

XL36px

2XL56px

3XL90px

4XL128px

Grille · 12 colonnes

12 colonnes · gouttière 24px · conteneur 1440px · marge latérale 40px (desktop) / 20px (mobile)

05

L'élévation.

Quatre niveaux d'ombre, sobres et froids (teintés navy). On élève rarement · la profondeur reste discrète.

E0 · plat (bordure)

E1 · 0 1px 3px

E2 · 0 8px 24px

E3 · 0 20px 50px

06

Le logo.

L'écusson sur ses trois fonds autorisés. Hauteur minimale 32px écran / 15mm print. Espace libre = ¼ de la hauteur.

SUR CRÈME · PRINCIPAL

SUR DORÉ

SUR ENCRE

07

Les boutons.

Quatre variantes. Tous en majuscules, tracking 0.22em, transition 250ms. Le survol primaire vire au rouge.

Voir tout →

.btn · .btn.ghost · rose · textepadding 15×28 · uppercase · 0.22em

08

Les formulaires.

Champs sans boîte · une simple ligne sous le texte, qui se fonce au focus. Label en eyebrow au-dessus.

Adresse e-mail

Mot de passe

.field · ligne basse, focus navylabel 11px / 0.22em · input 15px

09

Badges & chips.

Pastilles produit (Nouveau, Best, Édition, −20%) et chips de filtre. Toujours en majuscules très tracées.

Nouveau Best-seller Édition 78 −20 % Tout · 42 Polos · 18 Maille · 14

.badge · .fchip10-11px · 0.18em uppercase

10

Les cartes.

Carte produit standard : image 4:5, badge en haut-gauche, nom serif, catégorie méta, prix. Survol = zoom image 1.04.

L'Atelier · Horlogerie

1 850 €

.product · image 4:5 + métahover : scale(1.04) · 0.8s ease

11

Les icônes.

Trait fin 1.5px, bouts carrés, jamais remplies. Style linéaire sobre, aligné sur la légèreté du sérif.

Panier

Recherche

Compte

Favori

Flèche

Menu

Trait 1.5 · linéaire24×24 viewBox · stroke navy / rose

12

Tokens CSS.

Le contrat développeur. Copiez ce bloc :root · c'est exactement ce que frankline.css expose.

/* Frank'line · design tokens */
:root {
  /* Couleur */
  --paper:   #F4ECD9;   /* fond léger */
  --ivory:   #EBE2CC;   /* fond principal */
  --ivory-2: #DDD3BD;
  --ink:     #1F3057;   /* texte / navy */
  --ink-2:   #2A3D6A;
  --mute:    #837C6B;   /* légendes */
  --line:    #C9BFA8;   /* bordures */
  --blush:   #DDC8A0;   /* accent doux */
  --rose:    #B7202E;   /* accent / rouge */
  --rose-2:  #8E1822;

  /* Type */
  --serif: "Cormorant Garamond", Garamond, serif;
  --sans:  "Manrope", -apple-system, sans-serif;
  --mono:  ui-monospace, "SF Mono", monospace;

  /* Motion */
  --ease:     cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,.84,.32,1);
}

Fichiers du système

Fichier	Rôle	Lié à
frankline.css	Stylesheet global · tokens, composants, responsive, modes tweaks	Toutes les pages
frankline.js	Interactions · cart drawer, menu mobile, search overlay, reveal	Toutes les pages
tweaks-panel.jsx	Panneau Tweaks · palette, typo, rythme (React + Babel)	Toutes les pages
frankline-tweaks.jsx	Contrôles spécifiques Frank'line (4 palettes, 3 type-pairs)	Toutes les pages
logo.png / @2x	Écusson transparent · web & print	Nav, footer, hero, produits
products/*.png	16 visuels · 8 polos + 8 compléments L'Atelier	Cartes produit, fiches

13

États interactifs.

Chaque composant interactif déclare cinq états. Repos, survol, focus clavier, actif, désactivé. Aucun état n'est laissé au hasard.

État	Bouton primaire	Lien texte	Champ	Carte produit
Repos	Fond encre, texte crème	Souligné 1px	Bordure basse ligne	Image stable
Survol	Fond rouge Heritage	Couleur rouge	·	Zoom image 1.04 · 0.8s
Focus clavier	Anneau 2px rouge, offset 2px	Anneau 2px rouge	Bordure encre	Anneau 2px rouge
Actif / pressé	Fond rouge foncé, scale 0.98	Couleur rouge foncé	·	Scale 0.99
Désactivé	Opacité 0.4, curseur interdit	Gris mute, non cliquable	Fond grisé	Badge « épuisé »

Règle · focus visible obligatoire au clavieranneau rouge · offset 2px partout

14

Accessibilité WCAG.

Conformité visée : WCAG 2.1 niveau AA. Contrastes vérifiés, cibles tactiles minimales, focus toujours visible.

Ratios de contraste · paires validées

Combinaison	Aperçu	Ratio	Niveau
Encre sur crème	Texte	`10.4:1`	AAA
Rouge sur crème	Texte	`5.1:1`	AA
Crème sur encre	Texte	`10.4:1`	AAA
Mute sur crème	Légende	`3.2:1`	AA · large
Crème sur rouge	Texte	`4.9:1`	AA

i.

Cibles tactiles

44 × 44 px minimum pour tout élément cliquable sur mobile. Boutons, liens nav, swatches, pas d'exception.

ii.

Focus visible

Anneau rouge 2px à offset 2px sur tout élément focusable. Jamais de outline:none sans remplacement.

iii.

Sémantique

HTML natif d'abord. alt sur les images, aria-label sur les icônes, role sur les drawers/dialogs.

15

Le mouvement.

Discret, jamais gratuit. Deux courbes, trois durées. Le mouvement sert la lecture, il ne la distrait pas.

Token	Valeur	Usage
--ease	`cubic-bezier(.2,.7,.2,1)`	Mouvements généraux, slides, drawers
--ease-out	`cubic-bezier(.16,.84,.32,1)`	Entrées, apparitions, reveals
durée · rapide	`150-200ms`	Survols, focus, boutons, swatches
durée · moyenne	`300-450ms`	Drawers, overlays, accordéons
durée · lente	`800ms`	Zoom image produit, transitions de palette

Principe · prefers-reduced-motion

Tout mouvement non essentiel se désactive si l'utilisateur a activé la réduction de mouvement de son système. Les transitions de confort (zoom, parallaxe, reveals) tombent à zéro ; seules les transitions d'état fonctionnelles restent.

16

Responsive & grille.

Quatre seuils. Mobile d'abord. La grille passe de 4 colonnes (desktop) à 1 (mobile) selon des points fixes.

Seuil	Largeur	Conteneur	Grille produits
Mobile	`≤ 720px`	marge 20px	2 colonnes
Tablette	`721-1000px`	marge 32px	3 colonnes
Desktop	`1001-1440px`	marge 40px	4 colonnes
Large	`> 1440px`	max 1440px centré	4 colonnes

Sur mobile : la navigation passe en menu tiroir, les filtres en feuille du bas (bottom-sheet), la fiche produit gagne un bouton d'achat fixe en bas d'écran, les grilles s'empilent.

17

Modèles de page.

Les assemblages récurrents. Un développeur reconstruit n'importe quelle page en combinant ces patterns.

i.

Page collection

Fil d'ariane · hero éditorial · barre de filtres collante · grille produits · lookbook · newsletter · footer.

ii.

Fiche produit

Galerie + miniatures · options (couleur/taille) · monogramme · achat · accordéons · citation · produits liés.

iii.

Tunnel d'achat

Stepper · sections pliables · récapitulatif sticky · confirmation avec suivi.

iv.

État vide

Glyphe serif italique rouge · phrase courte · bouton de sortie. Panier vide, favoris vides, recherche sans résultat.

v.

Erreur / 404

Grand chiffre éditorial · explication brève · liens de secours · suggestions produits.

vi.

Formulaire

Label eyebrow · champ ligne basse · focus encre · message d'aide · bouton pleine largeur.

18

Microcopie & version.

Le ton des petits mots, et la gouvernance du système. Détaillé dans le Brand Guidelines, résumé ici.

Règles de microcopie

Contexte	On écrit	On évite
Bouton d'achat	« Ajouter au panier »	« ACHETER MAINTENANT !! »
Séparateur	Point médian « · »	Cadratin (interdit)
Confirmation	« Votre commande est partie. »	« Succès ! Commande passée. »
Erreur champ	« Choisissez une taille »	« Erreur : champ requis »
Le nom	Frank'line (apostrophe, l minuscule)	Frank'Line · Frankline · FRANK'LINE

Gouvernance

Élément	Valeur
Version actuelle	`v1.0` · MMXXVI
Source de vérité	`frankline.css` + `frankline-theme.js`
Typographie	5 options commutables (A à E) via le commutateur
Règle d'or	Aucune couleur verte · aucun cadratin · apostrophe toujours rouge
Évolution	Tout nouveau composant doit déclarer ses 5 états et passer le contraste AA

19

Anatomie d'un composant.

La carte produit, décortiquée. Chaque composant du système se documente ainsi : zones nommées, espacements, règles. C'est le contrat exact entre design et développement.

Zone	Élément	Spécification
1 · Média	Image produit	Ratio 4:5 · object-fit cover · zoom 1.04 au survol (800ms)
2 · Badge	Pastille statut	Haut-gauche · 16px d'offset · 10px majuscule 0.18em
3 · Favori	Cœur	Haut-droit · cible 38px · plein au clic
4 · Titre	Nom produit	Serif 20px · poids 400 · 1 ligne, ellipse si dépassement
5 · Méta	Catégorie	Sans 11px · 0.16em majuscule · couleur mute
6 · Prix	Montant	Sans 14px poids 600 · prix barré en mute si solde
Gouttière	Média → texte	16px vertical · 0 horizontal (alignement plein cadre)

1·2 3

Nom 4

Catégorie 5

89€ 6

Règles d'or

· Jamais plus d'un badge à la fois.
· Le favori ne masque jamais le produit.
· Le nom ne dépasse jamais une ligne.
· Survol : seule l'image bouge, le texte reste fixe.
· Toute la carte est cliquable (cible unique).

Composant · .product6 zones nommées · 5 règles

20

Validation & messages.

Comment les formulaires réagissent. États de saisie, messages d'erreur, de succès et d'information. Toujours sous le champ, jamais en pop-up agressive.

État	Bordure	Message	Déclenchement
Vide / repos	Ligne basse · ligne	Texte d'aide en mute	Au chargement
Focus	Ligne basse · encre	Texte d'aide maintenu	Clic / tab
Erreur	Ligne basse · rouge	Message rouge sous le champ	À la soumission (jamais pendant la frappe)
Succès	Ligne basse · encre	Coche discrète en fin de champ	Validation côté serveur
Désactivé	Grisé · opacité 0.4	Aucun	Prérequis non rempli

E-mail · repos

E-mail · erreurAdresse e-mail incomplète.

E-mail · validéAdresse vérifiée.

Principe · valider à la soumission, pas pendant la frappemessage toujours sous le champ

21

Données & graphiques.

Le style des visualisations du back-office. Sobre, lisible, sans fioritures. Une seule couleur d'accent par graphe, jamais d'arc-en-ciel.

Type	Usage	Couleur
Courbe	Évolution (ventes, trafic)	Rouge Heritage · trait 2.5px
Barres	Comparaison (CA mensuel)	Rouge · barre active pleine, reste à 55%
Sparkline	Tendance dans un KPI	Doré (hausse) ou rouge (baisse)
Jauge / barre	Stock, progression fidélité	Doré normal · rouge si critique
Répartition	Parts (univers, acquisition)	Barres horizontales · dégradé d'opacité

Règle · une accent par graphejamais de vert · jamais d'arc-en-ciel

22

International & formats.

La maison vise plusieurs marchés. Devises, langues, formats de date et d'adresse standardisés dès le design.

Élément	Format	Exemple
Prix	Montant + espace + symbole	`89 €` · `1 850 €`
Nombre	Espace fine comme séparateur de milliers	`1 284`
Date longue	Jour mois année	`18 mai 2026`
Numéro commande	FR + année romaine + séquence	`FR-MMXXVI-001847`
Langues prévues	FR (primaire) · EN	Bascule dans le pied de page
Devises	EUR primaire · extensible	Sélecteur pied de page

Les libellés d'interface sont centralisables dans un dictionnaire (clé → texte) pour la traduction. Aucune chaîne n'est codée en dur dans la logique : tout passe par le contenu.

23

Performance & budget.

Les seuils à tenir pour que le site reste rapide. Un design system sans budget de performance vieillit mal.

Métrique	Cible	Moyen
LCP (chargement)	< 2,5 s	Images optimisées · polices en display swap
CLS (stabilité)	< 0,1	Ratios d'image réservés (aspect-ratio)
Poids image produit	< 120 Ko	WebP · 2x max pour le retina
Polices	2 familles max	Sous-ensemble latin · woff2
JS bloquant	Aucun	Scripts en fin de body / defer

Règle d'arbitrage : si un effet visuel coûte plus de 16ms par image (60fps), il est retravaillé ou retiré. Le confort de lecture prime sur l'effet.

24

Nomenclature & contribution.

Comment nommer, où ranger, comment faire évoluer. Les règles qui gardent le système cohérent quand l'équipe grandit.

Conventions de nommage

Catégorie	Convention	Exemple
Variable CSS	kebab-case · sémantique, pas littéral	`--ink` (pas `--navy`)
Classe composant	nom court, minuscule	`.product` · `.btn`
Classe utilitaire	préfixe par fonction	`.is-open` · `.has-sticky`
Fichier page	PascalCase + .html	`MonCompte.html`
Asset produit	kebab dans products/	`polo-blush.png`

Règles de contribution

i.

Avant d'ajouter

Vérifier qu'un composant existant ne couvre pas déjà le besoin. On compose avant de créer.

ii.

Tout nouveau composant

Déclare ses 5 états, passe le contraste AA, fonctionne au clavier, et tient sur mobile.

iii.

Une seule source

Les valeurs vivent dans les tokens (:root). Aucune couleur ni taille codée en dur dans un composant.

· Prêt pour le développement

Le système est complet.

Tokens, composants, états, accessibilité, données, performance · 24 sections. Tout dérive du même frankline.css frankline.css · un développeur peut reprendre la plateforme sans réinterprétation.

Brand Guidelines → Voir la plateforme → Retour au hub →