# Design System Liberty Webi Version 1.0 · 24.09.2026 Sources qui font foi (Francisco, 24.09.2026) : le site https://libertywebi.fr/ et l'espace de marque https://ecolelibertywebi.com/branding/ (Brand Guidelines V2.0). Cette charte reprend la V2.0 sans la réinventer, la vérifie par des mesures sur le site (24.09.2026), et y ajoute la section Newsletter qui manquait. Page humaine : https://design-system-libertywebi.pages.dev/ (la charte complète, avec MakeMyWebi, Momentum et Portes Ouvertes, reste https://ecolelibertywebi.com/branding/) Exemple de newsletter : https://design-system-libertywebi.pages.dev/nl-exemple.html Logos (PNG transparents, repris du site) : https://design-system-libertywebi.pages.dev/logo-blanc.png (969 × 368px) et logo-encre.png ; symbole « W-montagne » seul : symbole-blanc.png et symbole-encre.png Favicon : https://design-system-libertywebi.pages.dev/favicon-lw.png (celui du site : « LW » blanc sur carré rouge) Élément graphique : https://design-system-libertywebi.pages.dev/img/losange-rouge.png (losange penché des surtitres) Police : Manrope, Google Fonts : `https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap` ## En une phrase Une école sérieuse et énergique : du papier chaud et de l'encre presque noire, un seul rouge, des formes penchées à angles vifs et des ombres dures, en Manrope très gras. ## Décisions de Francisco | Date | Décision | |---|---| | 24.09.2026 | Le site libertywebi.fr et l'espace de marque V2.0 font foi ensemble. On reprend la V2.0, on ne la réinvente pas. | | 24.09.2026 | Usage principal : la newsletter (le design précédent ne correspond plus au site). | ## Couleurs (valeurs exactes, V2.0, vérifiées sur le site) | Nom | Valeur | Usage | |---|---|---| | rouge | #E31E24 | LA couleur : boutons, surtitres (losange), chiffres, liens d'appel | | rouge-vif | #FF3A41 | Survol, début du dégradé, gros chiffre sur encre | | rouge-fonce | #C41018 | Ombre dure des boutons, fin du dégradé | | encre | #14161C | Titres, sections sombres, pied de page | | noir | #000000 | Fonds les plus profonds seulement (variante sombre des opt-ins) | | papier | #FBFAF8 | Fond clair principal | | papier-2 | #F3F1EC | Encarts, blocs détachés | | bordure | #E7E3DC | Filets, cartes claires | | texte | #4A4F5A | Texte courant sur papier (mesuré sur le site, absent de la V2.0) | | texte-sur-encre | #FFFFFF à 68 % (≈ #B4B5B8) | Texte courant sur encre | | gris | #8B909B | Libellés secondaires | | trustpilot | #00B67A | Preuve tierce uniquement | | bleu-ciel | #4DA3FF | Micro-accent toléré, jamais porteur | Dégradé unique : rouge plein `linear-gradient(105deg, #FF3A41 0%, #E31E24 45%, #C41018 100%)`, jamais à la verticale. Interdits : le bleu porteur (réservé à MakeMyWebi, #2563EB), le navy, les gris froids, le violet et le rouge #FF2B55 de Momentum. ## Typographie Manrope seule, 400 à 800. Aucune serif (Fraunces appartient au seul wordmark Momentum). | Style | Réglage (mesuré sur le site) | |---|---| | h1 | 800 · 60px/63px · -0.022em (38/40 mobile) | | h2 | 800 · 35 à 58px selon la section, interligne 1.05 · -0.02em (24 à 34px mobile) | | h3 | 800 · 22px/26px · -0.01em | | texte | 400 · 17px/27.5px · #4A4F5A (16/26 mobile) | | surtitre | 700 · 12-13px · capitales · +0.2em · losange rouge devant | | bouton | 800 · 15-17px · capitales · +0.05em | ## Formes - Zéro arrondi, partout. - Le penché du logo (-11deg) : les boutons rouges sont inclinés (`transform:skewX(-11deg)`, texte redressé), ombre double : dure `-5px 6px 0 #C41018` puis douce `-4px 14px 24px -6px rgba(0,0,0,.5)`. Survol : décalage de 3px, -3px. - Surtitre : losange rouge de 11px incliné (-13deg) devant un libellé en capitales espacées. - Gros chiffres en dégradé rouge (texte, 120deg). - Cartes claires biseautées (2 coins opposés coupés) sur un accent rouge dur décalé ; bandes rouges à bords diagonaux (42px de pente, 22px mobile). ## Composition (règles V2.0) - Faire varier la matière, pas la taille : photo, aplat encre, papier, aplat rouge penché. - Alternance papier #FBFAF8 et encre #14161C ; pour détacher un bloc, passer au papier-2 #F3F1EC, sans bordure ajoutée. - Jamais deux sections consécutives au même squelette. Surlignage rouge penché : 3 fois par page au plus. - Photos : jamais une personne seule, 2 au minimum dans le cadre. - Proscrits : coins arrondis, émojis (remplacés par des icônes au trait), tiret cadratin, contenu inventé. ## Newsletter Proposition du 24.09.2026, à valider par Francisco. Elle transpose la V2.0 dans ce qu'un e-mail supporte : l'inclinaison et les ombres CSS ne passent pas dans Gmail ni Outlook, on les remplace par des équivalents sûrs. Exemple complet sur le contenu réel de l'ASK du 31.08.2026 : https://design-system-libertywebi.pages.dev/nl-exemple.html | Élément | Valeur | |---|---| | Largeur | 600px, fond extérieur papier-2 #F3F1EC, corps papier #FBFAF8, texte retiré de 40px (22px mobile) | | Police | Manrope, repli Arial, Helvetica, sans-serif | | Texte courant | 16px/27px, #4A4F5A ; gras en encre #14161C | | Titres | 800, -0.02em, encre | | Surtitres | 700 12px capitales +0.2em, losange rouge (image 15 × 8px) devant | | Liens d'appel | 800 13px capitales +0.05em, rouge #E31E24, sans soulignement, terminés par ➜ | | Bouton | rectangle rouge #E31E24, angles vifs, texte blanc 800 14px capitales +0.05em, padding 15px 26px ; l'ombre dure est rendue par une bordure gauche 5px et basse 6px #C41018 (pas d'inclinaison en e-mail) | | Séparateur | filet 1px #E7E3DC | Les blocs, de haut en bas (format ASK) : 1. **En-tête encre** #14161C : logo blanc 130px à gauche, « LES COULISSES / DE JEAN & JODY » en surtitre à droite (gris #8B909B puis blanc). Puis une bande rouge de 6px. 2. **Surtitre de date** : losange + `JOUR · FORMAT · JJ.MM.AAAA`. 3. **Ouverture** : « Bonjour {prénom}, » et 2 lignes. 4. **Au programme** : encart papier-2, surtitre, questions numérotées 01, 02 en rouge 800. 5. **Chaque question** : « QUESTION 01 » rouge, titre 800 23px, encart papier-2 avec le prénom en surtitre gris et la question en gras encre ; puis la réponse, puis le lien d'appel. 6. **Résultats du sondage** : aplat encre pleine largeur, surtitre blanc, question en gras, pourcentages 800 44px (le premier en rouge vif #FF3A41, le second en papier), réponses de lecteurs en #B4B5B8 avec le prénom en gris. 7. **Sondage du jour** : surtitre, options numérotées en rouge, consigne de réponse. 8. **Signature** : « Jean & Jody » en 800 18px. 9. **Bloc ASK** : encart papier-2, titre « Une question sur les webinaires ? », bouton rouge « ASK JEAN & JODY ➜ ». 10. **Avis** : « Que penses-tu de la newsletter ? » et le lien « DONNER MON AVIS ➜ » (les 5 émojis de l'ancien design sont retirés, la V2.0 proscrit les émojis ; à confirmer). 11. **Pied encre** : symbole blanc 46px, adresse JCA Institute 11px #8B909B, désabonnement. ## Ton Tutoiement, la voix de Jean & Jody. Pas d'émoji, pas de tiret cadratin, chiffres en chiffres, aucun contenu inventé (règle V2.0 : un chiffre, un nom ou un bénéfice sans source écrite ne s'écrit pas). ## Logo - Logo principal (symbole « W-montagne » + LIBERTY WEBI) : encre sur fond clair, blanc sur fond sombre ou coloré. Symbole seul : favicon, avatar, pastille, petits formats. - Zone de protection : la hauteur du symbole. Interdits : opacité, inclinaison, dégradé ou effet, forme autour, rognage, changement de couleur. ## Publication Toute page Liberty Webi se publie sur Cloudflare Pages (jamais d'artifact visible), avec le favicon ci-dessus et `` pour les pages internes.