Design system Kermesse Éternelle
Les couleurs, les polices et les mesures de la Fête Villageoise, lues dans la feuille de style que le site sert. Le document canonique est docs/DESIGN-SYSTEM.md dans le dépôt ; cette page en est la surface publique.
Trois surfaces, deux chartes
Une seule des trois suit cette charte à la lettre. Les visuels de réseaux sociaux suivent celle du mur FV26, relevée sur pièce et non déduite d'ici.
| Surface | Fichier | Charte |
|---|---|---|
| Le site | src/css/style.css | celle-ci |
| Les affichettes de comptoir | print/affichette.css | celle-ci, redéclarée aux mêmes valeurs |
| Les visuels de réseaux sociaux | src/social/social.css | celle du mur FV26 |
Couleurs primaires
Les cinq couleurs de la marque. La première règle stricte porte sur deux d'entre elles, et la confusion entre les deux ors est le piège de cette charte.
--bleu-logo
#071584
Bleu Clocher, primaire, fond sombre. Bleu exact du fond du logo.
--or-logo
#F4B365
Or chaud. Tous les textes sur fond bleu.
--ambre-fete
#D4760A
Boutons, liens, accents chauds sur fond clair.
--or-girouette
#D4AF37
Détails, cocardes, fanions, filets, bordures. Jamais du texte.
--rouge-guirlande
#C0392B
Fanions, drapeau de Savoie.
Les touches du peintre
Elles ponctuent, elles ne couvrent pas : un aplat de couleur secondaire en fond est un écart.
--vert-tilleul
#4A8C4F
Touche du peintre.
--jaune-ballon
#E8B960
Touche du peintre.
--bleu-lac
#5BA3C9
Touche du peintre.
--corail-fleur
#E07A5F
Touche du peintre.
Neutres papier
--creme-lin
#FDF6E8
Fond principal, papier crème.
--papier-vieilli
#F0E6D0
Bordures, coupures de presse.
--bois-chaud
#5C4A3A
Texte secondaire.
--encre
#2C1F14
Texte principal.
Le dérivé mesuré
--or-attenue, rgba(244,179,101,0.86), a été prélevé au pixel sur les visuels du mur FV26 le 26 août 2026. Il sert aux surtitres et aux lignes de pied des visuels sociaux. Ce n'est pas de l'Or Girouette, et confondre les deux est la faute la plus fréquente sur cette charte.
Typographie
Les trois familles sont auto-hébergées en WOFF2 dans src/assets/fonts/. Aucun appel à Google Fonts, donc un rendu identique partout et rien qui parte vers un tiers.
La Fête Villageoise
Dimanche 13 septembre, au chef-lieu.
Depuis 1950, chaque année.
Échelle typographique
Major Third, ratio 1,25.
- --text-xs · 0.75remlégendes
- --text-sm · 0.875remmetadata
- --text-base · 1remcorps
- --text-lg · 1.125remintro
- --text-xl · 1.25remsous-titres
- --text-2xl · 1.563remtitres section
- --text-3xl · 1.953remtitres page
- --text-4xl · 2.441remhero mobile
- --text-5xl · 3.052remhero desktop
Interlignes
| Jeton | Valeur |
|---|---|
| --leading-tight | 1.15 |
| --leading-snug | 1.3 |
| --leading-normal | 1.6 |
| --leading-relaxed | 1.75 |
Espacements
Base 8 px. Un espacement qui n'est pas dans cette liste est un espacement inventé.
- --space-1 · 0.25rem
- --space-2 · 0.5rem
- --space-3 · 0.75rem
- --space-4 · 1rem
- --space-6 · 1.5rem
- --space-8 · 2rem
- --space-12 · 3rem
- --space-16 · 4rem
- --space-24 · 6rem
Rayons
4px
8px
12px
16px
100px
Élévation
Ombres teintées bleu, jamais un gris froid.
Mouvement
| Jeton | Valeur |
|---|---|
| --ease-out | cubic-bezier(.2,.8,.2,1) |
| --dur-fast | 0.15s |
| --dur-base | 0.2s |
| --dur-slow | 0.4s |
Alias sémantiques
Le code appelle un rôle, pas une couleur. C'est ce qui permet de corriger une teinte à un seul endroit.
| Alias | Pointe vers |
|---|---|
| --bg | var(--creme-lin) |
| --bg-alt | #FFFFFF |
| --bg-dark | var(--bleu-logo) |
| --fg1 | var(--encre) |
| --fg2 | var(--bois-chaud) |
| --fg-on-dark | var(--or-logo) |
| --fg-muted | rgba(92, 74, 58, 0.65) |
| --accent | var(--ambre-fete) |
| --accent-hover | #b8640a |
| --link | var(--ambre-fete) |
| --border | var(--papier-vieilli) |
Les huit règles strictes
- Or Logo pour le texte sur Bleu Logo. Jamais Or Girouette. L'Or Girouette est réservé à ce qui n'est pas du texte : un fanion, un filet, une bordure, une cocarde. La règle a été enfreinte deux fois dans les affichettes. Elle est tenue depuis par tools/verifier-affichettes.py.
- Fraunces pour les titres uniquement, DM Sans pour tout le reste.
- Italique signature. Le nom de la fête se pose en italique dans un titre : <h1>La <em>Fête Villageoise</em>…</h1>
- Fonds : Bleu Logo, Crème Lin ou blanc. Jamais un aplat de couleur secondaire. Les secondaires sont des touches, pas des fonds.
- Trois éléments de marque par page au maximum. Les fanions, plus deux décors.
- Motion douce et posée. Courbe cubic-bezier(.2,.8,.2,1), de 150 à 400 ms.
- Ombres teintées bleu. Jamais un gris froid.
- Grille de 8 px. Tous les espacements sont des multiples de 8.
Éléments signature
Fanions collants en haut de page, coq du favicon et son animation après le bloc Instagram, verres qui trinquent en séparateur, ballons pastel portant les lettres blanches du cycle C Œ S P C, silhouette de montagne en SVG, coupures de presse en papier vieilli à rotation légère.
Les affichettes de comptoir
Le pied est le même partout, sans exception : fond crème, filet Papier Vieilli au-dessus, le compte Instagram en Bleu Clocher à gauche, coespc.org en Ambre Fête à droite. Rien d'autre. Il a dérivé trois fois en deux jours, jusqu'à porter trois états différents sur cinq feuilles d'une même série. Gagner de la place se fait sur l'en-tête, sur l'échelle ou sur le nombre de feuilles, jamais sur le pied.
Ces feuilles se lisent derrière un serveur ou un vendeur de billets. La règle retenue est une hauteur de capitale d'environ 1 mm par 200 mm de distance. Une seule source produit les deux formats : --k vaut 1 en A4 et 1,414 en A3.
| Élément | A4 | A3 |
|---|---|---|
| bar, nom du produit | 6,5 mm | 9,2 mm |
| bar, prix | 8,4 mm | 11,9 mm |
| affiches, prix | 9,9 mm | 14,0 mm |
| CB, annonce | 13,3 mm | 18,8 mm |
La grammaire du mur FV26
Les visuels de réseaux sociaux ne suivent pas la charte du site mais celle du mur. Un nouveau visuel n'est bon que s'il est indiscernable des précédents. Formats : 1080 × 1350 pour Instagram, 1080 × 1080 pour Facebook, depuis la même source.
| Élément | Règle du mur |
|---|---|
| Fond | Bleu plein, aucune guirlande. |
| Badge | « 74 / ÉDITION » en haut à droite, aplat Or Logo, texte bleu. |
| Carte | Chiffre héros en Fraunces Or Logo, filet Or Girouette, surtitre en capitales espacées, phrase en Instrument Serif italique blanc. |
| Photo | Image pleine largeur, bandeau bleu en pied. |
| Pied | Marque seule en or, nom en Fraunces Or Logo, ligne en capitales espacées terminée par la date au format 13.09.26. |
| Interdits | Ni arobase ni adresse de site sur le visuel. Ils vont dans la légende. |
Rien de tout cela ne s'écrit à la main
Chacun de ces témoins a été mis en panne volontairement avant d'être cru : un instrument de contrôle qui n'a jamais échoué ne prouve rien.
| Outil | Ce qu'il fait |
|---|---|
| tools/generer-design-system.py | Ecrit cette page depuis le bloc :root de la feuille de style servie. |
| tools/compteur-partenaires.py | Dérive les compteurs de partenaires des tuiles servies, seul écrivain. |
| tools/impressions_donnees.py | Source unique des tarifs, règles de jeu, quantités et orientations. |
| tools/generer-impressions.py | Produit les feuilles à imprimer depuis cette source. |
| tools/calibrer-echelles.py | Mesure la plus grande échelle qui tient sur chaque affiche de stand. |
| tools/generer-pdf-impression.py | Produit les PDF et relit leur orientation réelle. |
| tools/generer-visuels-sociaux.py | Ecrit la grammaire du mur une fois ; chaque publication n'apporte que son contenu. |
| tools/verifier-affichettes.py | Sort en 1 si une affichette s'écarte du pied commun ou emploie Or Girouette pour du texte. |