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 · PRINCIPALSUR DORÉSUR ENCRELe système de conception complet de Frank'line · jetons, composants, états et code. Le contrat technique entre le design et le développement.
Cinq règles qui gouvernent chaque décision de design. Quand un doute survient, on revient ici.
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.
Cormorant pour ce qui émeut · titres, moments, citations. Manrope pour ce qui informe · corps, UI, données. Jamais l'inverse.
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.
Toujours rouge, toujours italique, jamais omise. C'est la respiration du nom · et la signature de la marque.
Pas de gras agressif, pas de majuscules hurlantes, pas d'animation gratuite. L'élégance, c'est la retenue tenue jusqu'au bout.
Quatre couleurs principales, dérivées de l'écusson. Chacune avec son rôle, son ratio, ses 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 |
Deux familles, une échelle modulaire. Cormorant Garamond pour l'éditorial, Manrope pour l'interface.
Échelle d'espacement par multiples de 4 px. Grille de 12 colonnes, gouttière 24 px, conteneur max 1440 px.
Quatre niveaux d'ombre, sobres et froids (teintés navy). On élève rarement · la profondeur reste discrète.
L'écusson sur ses trois fonds autorisés. Hauteur minimale 32px écran / 15mm print. Espace libre = ¼ de la hauteur.
SUR CRÈME · PRINCIPALSUR DORÉSUR ENCREQuatre variantes. Tous en majuscules, tracking 0.22em, transition 250ms. Le survol primaire vire au rouge.
Champs sans boîte · une simple ligne sous le texte, qui se fonce au focus. Label en eyebrow au-dessus.
Pastilles produit (Nouveau, Best, Édition, −20%) et chips de filtre. Toujours en majuscules très tracées.
Carte produit standard : image 4:5, badge en haut-gauche, nom serif, catégorie méta, prix. Survol = zoom image 1.04.
Trait fin 1.5px, bouts carrés, jamais remplies. Style linéaire sobre, aligné sur la légèreté du sérif.
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); }
| 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 |
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é » |
Conformité visée : WCAG 2.1 niveau AA. Contrastes vérifiés, cibles tactiles minimales, focus toujours visible.
| 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 |
44 × 44 px minimum pour tout élément cliquable sur mobile. Boutons, liens nav, swatches, pas d'exception.
Anneau rouge 2px à offset 2px sur tout élément focusable. Jamais de outline:none sans remplacement.
HTML natif d'abord. alt sur les images, aria-label sur les icônes, role sur les drawers/dialogs.
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 |
prefers-reduced-motionTout 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.
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.
Les assemblages récurrents. Un développeur reconstruit n'importe quelle page en combinant ces patterns.
Fil d'ariane · hero éditorial · barre de filtres collante · grille produits · lookbook · newsletter · footer.
Galerie + miniatures · options (couleur/taille) · monogramme · achat · accordéons · citation · produits liés.
Stepper · sections pliables · récapitulatif sticky · confirmation avec suivi.
Glyphe serif italique rouge · phrase courte · bouton de sortie. Panier vide, favoris vides, recherche sans résultat.
Grand chiffre éditorial · explication brève · liens de secours · suggestions produits.
Label eyebrow · champ ligne basse · focus encre · message d'aide · bouton pleine largeur.
Le ton des petits mots, et la gouvernance du système. Détaillé dans le Brand Guidelines, résumé ici.
| 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 |
| É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 |
Tokens, composants, états, code, et 19 pages de référence. Tout est dérivé du même frankline.css · un développeur peut reprendre la plateforme sans réinterprétation.