DESIGN SYSTEM
LE MANS FC

La palette du Le Mans FC s’articule autour de quatre couleurs identitaires primaires. Trois couleurs de support viennent compléter le système pour les états, les gradients et les compositions éditoriales.

/* Couleurs identitaires */
--lmfc-red:         #E2001A;
--lmfc-gold:        #F1C100;
--lmfc-white:       #FBF3EE;
--lmfc-black-rich:  #0B0707;
/* Couleurs de support */
--lmfc-red-deep:    #7B1619;
--lmfc-orange:      #F26A1C;
--lmfc-gold-deep:   #B97608;
/* Dégradés */
--grad-sangor:      linear-gradient(100deg, #7B1619, #E2001A 42%, #F26A1C 72%, #F1C100);
--grad-halo:        radial-gradient(circle at 50% 38%, #F1C100, #F6AC63 18%, #E2001A 52%, #7B1619);

Le logo du Le Mans FC existe en version couleur, monochrome noir et monochrome blanc. Le choix de la version dépend du fond sur lequel il est apposé. Sur photo, privilégier toujours un filtre ou un halon pour garantir la lisibilité.

Version couleurs — fond noir

Version couleurs — fond blanc

Monochrome noir — fond clair uniquement

Monochrome blanc — fond sombre

Blanc sur rouge — usage officiel

Noir sur or — usage occasions spéciales

Halon sombre centré sous le logo

Appliquer un halon sombre (radial-gradient noir, opacité 40–65%) sous le logo pour garantir lisibilité 4.5:1.

Sans protection — à éviter

Logo sur photo sans traitement — contraste insuffisant, lisibilité compromise.

Trois polices couvrent l’intégralité des besoins. Anton pour les titres à impact, Archivo pour le corps et les interfaces, JetBrains Mono pour les codes et annotations techniques.

Tous les espacements sont des multiples de 4 px. Utilisés via les tokens CSS --sp-* pour garantir la cohérence entre composants.

Les animations du Le Mans FC sont vives et directes, à l’image du jeu offensif. Durée type : 200–350ms. Pas d’animation >600ms sauf transitions de pages. Éviter le bounce excessif.

Six principes guident chaque décision de design. Ils traduisent l’identité du club. ambition, ancrage local, passion du jeu. en orientations concrètes pour les équipes digitales.

01

PHOTO EN PRIORITÉ

La photographie est le premier vecteur d’émotion. Chaque page à forte valeur éditoriale doit comporter au moins une image haute définition. Les photos d’action, de stade et de joueurs sont privilégiées sur les visuels génériques. La typographie se superpose toujours sur une zone traitée (halon, gradient, glassmorphisme).

SANG & OR

Saison 2026–27

02

IMPACT PREMIER

Chaque écran doit avoir un point focal dominant. Pas de désign neutre. le rouge capte, l’or retient.

ROUGE D’ABORD

03

TYPOGRAPHIE FORTE

Anton domine les surfaces. Les titres s’imposent. La hiérarchie textuelle est toujours claire, jamais timide.

STADE MARVINGT

04

ANCRAGE LOCAL

Stade Marie-Marvingt, la Sarthe, le Mans. les références géographiques et culturelles sont valorisées dans les contenus.

MARIE-MARVINGT · LE MANS · 72000

05

PASSION DES SUPPORTERS

Le design parle d’abord aux fans. Chaud, direct, émotionnel. Les chiffres et statistiques sont mis en valeur.

Match ce soir

06

COHÉRENCE SYSTÈME

Chaque écran est une brique du système. Tokens, composants et règles sont appliqués de façon homogène sur tous les supports.

07

ACCESSIBILITÉ MINIMALE

Contraste AA minimum sur tout texte fonctionnel. Focus visible. Pas d’information portée uniquement par la couleur.

AA 4.5:1 · AAA 7:1

Le langage graphique LMFC s’appuie sur des diagonales d’action, des motifs répétitifs à basse opacité et les dégradés signature. Ces éléments enrichissent les visuels sans s’imposer sur le contenu.

ACTION

Diagonales d’action

Motif diagonales 135° · opacité 8–15% · rouge ou or

GRILLE

Grille de fond

Grille orthogonale 40px · opacité 4% blanc · usage hero sombre

SANG & OR

Dégradé Sangor

Noir → Rouge profond → Rouge sang → Or club · 135°

HALO

Dégradé Halo

Radial or → orange → rouge → profond · explosion solaire

MATCH CE SOIR

21 MARS

19h00 · Stade Marie-Marvingt

Glassmorphisme sombre

bg rgba blanc 7% · blur 16px · border opacité 12%

LIGUE 2 · J.28

LMFC

3 – 1

HAC

VICTOIRE

Glassmorphisme rouge

bg rgba rouge 18% · blur 16px · border rouge 30%

Billetterie

Accès rapide pour les membres

Bande accent couleur

Top-border 4px rouge · usage cartes light mode

CITATION

« On joue pour gagner,
toujours. »

Left-border or

Bord gauche 4px or · citations & extraits éditoriaux

Quatre gestes graphiques signatures. Règle d’or : un seul élément graphique par visuel, jamais empié sur une photo déjà traitée (duotone / halo). Le geste signe, il n’envahit pas.

Chaque élément graphique se décline en bandeau séparateur 100% de large, utilisable entre deux sections. Hauteur recommandée : 32–48 px selon le niveau d’énergie souhaité.

Les photographies doivent être dynamiques, à fort contraste. Favoriser les vues action, les portraits expressifs et les vues aériennes du stade. La typographie se superpose toujours sur un fond traité (halon, gradient ou glassmorphisme).

Le système de navigation comprend trois niveaux. La barre d’annonces (contextuelle, masquable). Le N0 inter-sites commun à tous les espaces du club. Le N1 spécifique à chaque site.

État déconnecté

LE MANS – LE HAVRE · SAM. 21 MARS · 19H00 SANG & OR ABONNEMENTS OUVERTS · PLACES DISPOS SANG & OR

Site officiel Boutique Billetterie Espace Fan

Mon compte

Connexion Billets

LE MANS FC

Stade Marie-Marvingt · Saison 2026–27

Ticker (annonces) · N0 inter-sites · N1 site institutionnel déconnecté

N1 — État connecté · Fan Level 1

LE MANS – LE HAVRE · SAM. 21 MARS · 19H00 SANG & OR ABONNEMENTS OUVERTS · PLACES DISPOS SANG & OR

Site officiel Boutique Billetterie

1 540 XP

Billets

Bonjour, Maxime

Rang Or · 1540 XP Match ce soir

N1 connecté · badge XP dans N0 · avatar ring or Niveau 1

← Faire défiler pour voir la démo complète →

MON ESPACE

Bonjour, Maxime

Rang Or · 2450 XP

Match ce soir

← Faire défiler pour voir la démo complète →

Le footer s’appuie sur un fond sombre avec halon rouge subtil et texture diagonale. Le logo est en version blanche. Le trait supérieur rouge symbolise l’ancrage identitaire du club.

Le Mans Football Club — Propulsé par StratOS Stadium. Charte graphique officielle · Noyau v1 · Juin 2026.

Club

• Histoire
• Effectif 2026–27
• Staff technique
• Stade Marie-Marvingt
• Stade de France

Digital

• Billetterie en ligne
• Boutique officielle
• Espace Fan
• Application mobile
• Programme de fidélité

Légal

• Mentions légales
• CGV
• Politique RGPD
• Cookies

© 2026 Le Mans FC · Tous droits réservés PROPULSÉ PAR STRATOS

Toutes les icônes utilisent un style outline avec stroke 1.5px et extrémités arrondies. Elles héritent de currentColor — jamais hardcodées. Les emojis sont interdit dans le design system.

Tous les logos partenaires s’affichent en monochrome blanc sur tous les fonds. Au survol : or club #F1C100. Chaque logo est un lien vers le site officiel du partenaire.

Grille 12 colonnes avec goutтиère de 16px (mobile) à 24px (desktop). Max-width contenus : 1280px. Padding latéral : 20px mobile, 32px desktop.

Tous les composants doivent atteindre au minimum le niveau WCAG 2.1 AA. Ratio minimum 4.5:1 pour le texte normal, 3:1 pour le texte large et les éléments graphiques.

Le design system supporte les deux modes via des tokens CSS adaptatifs. Les composants n’ont pas besoin d’être recomposés. ils répondent automatiquement aux variables de thème.

Les tokens du design system LMFC sont exportables en CSS Variables, JSON ou config Tailwind. Utiliser ce fichier comme source de vérité unique pour tous les projets digitaux du club.

/* LE MANS FC — Design Tokens v1 */
:root {
  /* Couleurs identitaires */
  --lmfc-red:          #E2001A;
  --lmfc-gold:         #F1C100;
  --lmfc-white:        #FBF3EE;
  --lmfc-black-rich:   #0B0707;
  /* Support */
  --lmfc-red-deep:     #7B1619;
  --lmfc-orange:       #F26A1C;
  --lmfc-gold-deep:    #B97608;
  /* Typographie */
  --font-display:      'Anton', sans-serif;
  --font-body:         'Archivo', sans-serif;
  --font-mono:         'JetBrains Mono', monospace;
  /* Spacing */
  --sp-4: 16px;  --sp-6: 24px;  --sp-8: 32px;  --sp-12: 48px;
}