Design System · CŒSPC · Kermesse Éternelle

Fête Villageoise
d'Annecy-le-Vieux

Design system « Kermesse Éternelle » · une identité visuelle artisanale qui honore 74 ans de tradition et prépare les 74 prochaines années.

Logo intouchableFraunces + DM Sans6 pictogrammesLicence OFL gratuite
✦ Annecy-le-Vieux ✦ ✦ Savoie ✦ ✦ Depuis 1952 ✦ ✦ 74ᵉ édition ✦
Design System
Kermesse Éternelle
L'énergie joyeuse et artisanale d'une fête de village peinte à la main · un dimanche de septembre qu'on sent, qu'on goûte, qu'on entend.
Principe génératif
« Tout dans cette identité doit donner l'impression d'avoir été fabriqué à la main, sur la place du village, par quelqu'un qui aime ce qu'il fait. »
🐓
Cocorico !
Personnalité de marque
Murmure
Éclat
Chaud
Froid
Organique
Géométrique
Patrimoine
Futur
Léger
Dense
Mat
Lumineux
Palette chromatique

Extraite de l'affiche Garreau : les tons chauds du village savoyard en fête.

Couleurs principales

Bleu Clocher
#142477
Ambre Fête
#D4760A
Or Girouette
#D4AF37
Rouge Guirlande
#C0392B

Secondaires · les touches du peintre

Vert Tilleul
#4A8C4F
Jaune Ballon
#E8B960
Bleu Lac
#5BA3C9
Corail Fleur
#E07A5F

Neutres

Crème Lin
#FDF6E8
Papier Vieilli
#F0E6D0
Bois Chaud
#5C4A3A
Encre
#2C1F14
Typographie
Titrage · Fraunces (Variable Serif)
Fête Villageoise
74 ans de bonheur partagé
Fraunces · Expressif, chaud, légèrement irrégulier comme une enseigne peinte. Google Fonts, licence OFL (gratuit, commercial OK).
Corps · DM Sans (Humanist Sans)
Chaque deuxième dimanche de septembre, le chef-lieu d'Annecy-le-Vieux se transforme en une grande fête familiale. Jeux, musique, tartiflette géante et tombola solidaire · les bénéfices sont reversés aux familles en difficulté.
DM Sans · Géométrique mais chaleureux. Poids 400, 500, 700. Google Fonts, licence OFL (gratuit, commercial OK).
🥂🍷
Moments signatures
🎨

La texture peinte

Fond papier texturé (grain de toile) sur tous les supports. Chaque surface respire l'artisanat.

🔔

Le clocher en silhouette

Silhouette du clocher Saint-Laurent en filigrane, séparateur de section ou motif de fond.

🎪

Les guirlandes à fanions

Bandeau de fanions triangulaires (bleu/or/rouge) en frise décorative. Élément signature décliné sur tous les supports : site, flyers, programme A5, banderoles, stories Instagram.

🏔️

Le badge « édition »

Cartouche rond style « timbre vintage » avec le numéro d'édition. Collectionnable.

🖌️

La palette du peintre

Couleurs secondaires en touches libres (coups de pinceau), jamais en aplats géométriques.

Déclinaisons supports
Fête Villageoise
Annecy-le-Vieux · 74ᵉ édition
14 sept. 2026 · 9h–18h

Post Instagram

Fond bleu clocher, fanions, typo or.

Programme
9h00 Ouverture
10h Jeux famille
12h Tartiflette
14h Musique
17h30 Tombola

Plaquette A5

Papier crème, encadré bleu, horaires ambre.

FÊTE
VILLAGEOISE
🔔
GOBELET · 74ᵉ

Gobelet réutilisable

Fond ambre, collectionnable année après année.

TOMBOLA
Solidaire · 2€ le billet

Signalétique stand

Fond bleu clocher + cartouche corail. Lisible de loin, chaleureux, festif.

🥂🍷
Pictogrammes savoyards

Un set d'icônes dans l'esprit « coup de pinceau » de l'affiche Garreau. Utilisés comme icônes des stands jour J, illustrations du programme A5 et stickers réseaux sociaux.

Tartiflette

Plat signature

Diots-Polenta

Spécialité savoyarde

Poêle géante

Cuisine sur place

Vin de Savoie

Buvette & lots tombola

La Tournette

Ancrage géographique

Lac d'Annecy

Identité du territoire

🥂🍷
Tokens CSS

Copier-coller ce bloc dans le fichier CSS du site WordPress. Toutes les couleurs, tailles et espacements du design system en un seul endroit.

/* ═══ Kermesse Éternelle · Design Tokens ═══ */ :root { /* Couleurs principales */ --bleu-clocher: #142477; --ambre-fete: #D4760A; --or-girouette: #D4AF37; --rouge-guirlande: #C0392B; /* Couleurs secondaires */ --vert-tilleul: #4A8C4F; --jaune-ballon: #E8B960; --bleu-lac: #5BA3C9; --corail-fleur: #E07A5F; /* Neutres */ --creme-lin: #FDF6E8; --papier-vieilli: #F0E6D0; --bois-chaud: #5C4A3A; --encre: #2C1F14; /* Typographie */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'DM Sans', -apple-system, sans-serif; /* Échelle typographique (ratio 1.25 · Major Third) */ --text-xs: 0.75rem; /* 12px · légendes, crédits */ --text-sm: 0.875rem; /* 14px · notes, metadata */ --text-base: 1rem; /* 16px · corps de texte */ --text-lg: 1.125rem; /* 18px · intro, sous-titres */ --text-xl: 1.25rem; /* 20px · sous-titres forts */ --text-2xl: 1.563rem; /* 25px · titres de section */ --text-3xl: 1.953rem; /* 31px · titres de page */ --text-4xl: 2.441rem; /* 39px · hero mobile */ --text-5xl: 3.052rem; /* 49px · hero desktop */ /* Line-heights */ --leading-tight: 1.15; /* titres Fraunces */ --leading-snug: 1.3; /* sous-titres */ --leading-normal: 1.6; /* corps de texte */ --leading-relaxed: 1.75; /* articles longs */ /* Espacement (base 8px) */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-24: 6rem; /* 96px */ /* Rayons de bordure */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 100px; /* badges, pills */ }
Échelle typographique

Ratio 1.25 (Major Third) · confiant et lisible. Fraunces pour tout ce qui titre, DM Sans pour tout le reste.

Fête Villageoise
--text-5xl · 49px · Fraunces 900 · Hero desktop
74ᵉ édition · 14 septembre
--text-4xl · 39px · Fraunces 900 · Hero mobile
Programme du jour
--text-3xl · 31px · Fraunces 700 · Titres de page
Tombola solidaire
--text-2xl · 25px · Fraunces 700 · Titres de section
Les bénéfices sont intégralement reversés aux familles en difficulté d'Annecy-le-Vieux.
--text-lg · 18px · DM Sans 500 · Intros, sous-titres
Chaque deuxième dimanche de septembre, le chef-lieu d'Annecy-le-Vieux se transforme en une grande fête familiale. Jeux, musique, tartiflette géante et tombola solidaire.
--text-base · 16px · DM Sans 400 · Corps de texte
Billets tombola en vente sur HelloAsso · contact@fetevillageoise.com
--text-sm · 14px · DM Sans 400 · Notes, metadata
CŒSPC · Association loi 1901 · N° 74/1/002459
--text-xs · 12px · DM Sans 500 caps · Légendes, crédits, mentions légales
Validation contraste WCAG AA

Chaque combinaison texte/fond testée. « Corps » = texte courant (<18px), « Titres » = texte large (≥18px bold ou ≥24px). Minimum : 4.5:1 pour le corps, 3:1 pour les titres.

CombinaisonAperçuRatioCorpsTitresUsage
Encre sur Crème Lin Texte 14.9:1✓ AA✓ AA Corps de texte principal
Bleu Clocher sur Crème Lin Texte 12.6:1✓ AA✓ AA Titres, liens, accents
Blanc sur Bleu Clocher Texte 13.6:1✓ AA✓ AA Texte inversé sur fond bleu
Bois Chaud sur Crème Lin Texte 7.8:1✓ AA✓ AA Corps alternatif (programme)
Or Girouette sur Bleu Clocher Texte 6.4:1✓ AA✓ AA Titres or sur fond bleu
Rouge Guirlande sur Crème Lin Texte 5.1:1✓ AA✓ AA Alertes, CTA solidarité
Corail Fleur sur Bleu Clocher Texte 4.6:1✓ AA✓ AA Signalétique stands
Ambre Fête sur Crème Lin Texte 3.1:1✓ AA ⚠️ Titres Fraunces uniquement
Vert Tilleul sur Crème Lin Texte 3.8:1✓ AA ⚠️ Titres et pictos uniquement
Or Girouette sur Crème Lin Texte 2.0:1 ⛔ Décoratif uniquement (filets, bordures)
Corail Fleur sur Crème Lin Texte 2.7:1 ⛔ Décoratif uniquement (taches pinceau)
Règles d'usage du logo CŒSPC

Le logo (clocher Saint-Laurent dans le cœur) est intouchable. Voici les règles de cohabitation avec le design system.

📏

Zone de protection

Espace vide autour du logo = la largeur de la lettre « C » de CŒSPC. Aucun texte, photo ou fanion ne doit entrer dans cette zone.

📐

Taille minimale

Print : 20mm de hauteur minimum. Écran : 48px de hauteur minimum. En dessous, le clocher devient illisible.

🌙

Sur fond bleu

Version or/ambre sur fond Bleu Clocher · la version principale, comme le logo d'origine.

☀️

Sur fond clair

Version Bleu Clocher sur fond Crème Lin ou blanc. Le cœur et le clocher en bleu, texte en bleu.

🖨️

Monochrome

En cas d'impression une couleur : tout en Encre (#2C1F14). Le dégradé or disparaît, le dessin reste lisible.

🚫

Interdits

Ne jamais : étirer, pivoter, ajouter une ombre portée, changer les couleurs, mettre sur un fond texturé chargé, ou réduire en dessous du minimum.

Voix & ton

La fête parle comme un voisin chaleureux qui vous invite à sa table · jamais comme une institution qui vous convoque.

Registre

Familier-chaleureux. On tutoie la communauté sur les réseaux, on vouvoie sur les documents officiels (courriers mairie, reçus dons). Le programme A5 est entre les deux : accueillant mais structuré.

Tonalité

Joyeuse et directe. On dit « Venez ! » pas « Nous avons le plaisir de vous convier ». On dit « Votre tombola aide les familles » pas « Les bénéfices sont redistribués par le CCAS ».

Vocabulaire signature

Utiliser : « fête », « village », « solidarité », « ensemble », « depuis 1952 », « gourmand », « convivial ». Éviter : « événement », « manifestation », « édition annuelle », « partenariat ».

Persona

Si la fête était une personne : un bénévole de 55 ans, tablier noué, qui connaît tout le monde par son prénom, sert la tartiflette avec le sourire et glisse un billet de tombola dans votre main.

Exemples par contexte
Post Instagram : « Dimanche, on se retrouve place Gabriel Fauré ! Tartiflette géante, jeux pour les enfants, musique et tombola solidaire. Ça fait 74 ans que ça dure 🔔 »
Programme A5 : « Bienvenue à la 74ᵉ Fête Villageoise ! Comme chaque année, vos achats et billets de tombola soutiennent les familles d'Annecy-le-Vieux. Merci d'être là. »
Signalétique stand : « TOMBOLA SOLIDAIRE · 2€ le billet · 1 chance sur 5 de gagner un repas ! »
Gabarits réseaux sociaux

Dimensions exactes pour chaque plateforme. Toujours intégrer : les fanions (en-tête ou bas), le logo CŒSPC (coin inférieur gauche), et la date (cartouche couleur).

1:1
Post Instagram

1080 × 1080 px

9:16
Story / Réels

1080 × 1920 px

820:312
Couverture Facebook

820 × 312 px

1200:628
Post Facebook / OG Image

1200 × 628 px

A5
Plaquette A5

148 × 210 mm (+ 3mm fond perdu)

A3
Affiche A3

297 × 420 mm (+ 3mm fond perdu)

Spécifications print

Conversions CMYK et recommandations pour l'impression de la plaquette A5, des affiches et des banderoles.

CouleurHex (écran)CMYK (print)Pantone approché
Bleu#142477C95 M85 J0 N30Pantone 2758 C
Ambre#D4760AC0 M55 J95 N10Pantone 152 C
Or#D4AF37C0 M20 J80 N15Pantone 7405 C
Rouge#C0392BC0 M85 J80 N15Pantone 7620 C
Vert#4A8C4FC65 M0 J65 N30Pantone 7741 C
Crème#FDF6E8C0 M2 J8 N0n/a
📄

Plaquette A5

Papier couché mat 170g/m². Fond perdu 3mm. Pliure au centre pour format A6 fermé. Finition : pelliculage mat soft-touch (couverture).

🖼️

Affiche A3 / A2

Papier couché brillant 200g/m² (affiches vitrines) ou papier offset 120g/m² (affichage extérieur sous protection). Fond perdu 3mm.

🚩

Banderoles

Bâche PVC 510g/m² avec œillets tous les 50cm. Impression grand format. Prévoir marge de sécurité 20mm (plis + œillets).

Do's & Don'ts

Les règles absolues du système. En cas de doute, revenir au principe génératif : « fabriqué à la main, par quelqu'un qui aime ce qu'il fait ».

✓ Faire

Utiliser Fraunces en gras (700–900) pour tous les titres et accroches. Le wonky axis ajoute du caractère artisanal.

✗ Ne pas faire

Utiliser Fraunces en corps de texte (paragraphes). Trop expressif en petite taille · ça fatigue l'œil. Le corps c'est DM Sans uniquement.

✓ Faire

Appliquer les couleurs secondaires en touches légères : taches de pinceau, bordures, petits accents. Comme un peintre qui pose une touche de couleur.

✗ Ne pas faire

Remplir des blocs entiers en Corail Fleur ou Jaune Ballon. Les secondaires sont des touches, pas des fonds. Les fonds = Bleu Clocher, Crème Lin, ou blanc.

✓ Faire

Toujours intégrer les fanions quelque part (en-tête, pied, séparateur). C'est le fil rouge du système · l'élément qui dit « Fête Villageoise » sans un mot.

✗ Ne pas faire

Utiliser des fanions dans des couleurs qui ne sont pas dans la palette (pas de rose fluo, pas de violet). Les fanions = Bleu / Or / Rouge / Ambre uniquement.

✓ Faire

Utiliser l'Or Girouette sur fond Bleu Clocher pour les titres (ratio 6.4:1 · excellent). C'est le couple signature du logo et de l'identité.

✗ Ne pas faire

Écrire du texte courant en Or Girouette sur Crème Lin (ratio 2.0:1 · illisible). L'or sur crème = décoratif uniquement (filets, bordures, séparateurs).

✓ Faire

Laisser respirer. Marges généreuses, espaces blancs (crème). L'artisanat a besoin d'espace · comme une toile a besoin de fond.

✗ Ne pas faire

Surcharger un support avec tous les éléments à la fois (fanions + ballons + coq + pictos + texture). Max 3 éléments décoratifs par support.