DESIGN SYSTEM
LE MANS
FOOTBALL CLUB

Le système repose sur 3 couleurs identitaires — Rouge Le Mans, Or, Noir — combinées à une échelle de neutres chauds (ink scale) et à des couches de transparence pour les effets de profondeur. L'or est la couleur d'accentuation : puissant mais utilisé avec parcimonie.

La typographie LMFC repose sur une hiérarchie à trois niveaux : Anton pour les titres à impact maximal, Archivo pour la lisibilité du corps de texte et de l'UI, JetBrains Mono pour les données, labels et tokens techniques.

Tous les espaces sont des multiples de 4 px. Utiliser exclusivement les tokens --sp-*.

Les animations LMFC sont rapides, précises, avec une légère élasticité sur les entrées. Elles doivent renforcer la sensation de dynamisme sans distraire.

Le logo Le Mans FC est intouchable : ne jamais déformer, recolorer, pivoter, ni dissocier ses éléments. Zone de protection minimale = ¼ de la hauteur du blason.

Usage principal · fond sombre

Usage fond clair

Usage fond coloré · mono blanc

Le langage graphique LMFC est construit autour du dynamisme, de l'impact et de la chaleur des couleurs. Les formes angulaires, les dégradés signature et la typographie massive créent une identité forte.

La photographie est le cœur émotionnel du design LMFC. Chaque image doit transmettre l'intensité du match, la communion avec les supporters, ou la majesté du MMArena.

Utiliser la bibliothèque Lucide Icons (SVG, stroke-based). Épaisseur de trait : 1.5 px par défaut, 2 px pour les UI compactes. Couleur : currentColor.

Les logos partenaires doivent être traités avec respect et cohérence. Fond sombre : logos en blanc ou couleurs originales à 60–100% d'opacité. Fond clair : logos en noir ou couleurs originales.

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

L'accessibilité est un impératif légal en France (RGAA 4.1) et une exigence éthique. Toute interface LMFC doit atteindre le niveau AA minimum.

Le dark mode est le mode principal (premium). Le light mode est disponible pour des usages spécifiques : e-ticket imprimable, documentation partenaires, forte luminosité ambiante.

4 formats disponibles. CSS Custom Properties = référence principale. JSON W3C DTCG 2024 = standard inter-outils (Figma Variables, Style Dictionary).

{
  "$metadata": { "tokenSetOrder": ["global","semantic"] },
  "color": {
    "brand": {
      "red":   { "$value": "#E2001A", "$type": "color" },
      "gold":  { "$value": "#F1C100", "$type": "color" },
      "dark":  { "$value": "#0B0707", "$type": "color" },
      "light": { "$value": "#FBF3EE", "$type": "color" }
    }
  },
  "typography": {
    "font-body":    { "$value": "'Archivo', sans-serif",      "$type": "fontFamily" },
    "font-display": { "$value": "'Anton', sans-serif",        "$type": "fontFamily" },
    "font-mono":    { "$value": "'JetBrains Mono', monospace","$type": "fontFamily" }
  },
  "spacing": {
    "sp-4": { "$value": "16px", "$type": "spacing" },
    "sp-6": { "$value": "24px", "$type": "spacing" },
    "sp-8": { "$value": "32px", "$type": "spacing" }
  }
}

# .npmrc
@lmfc:registry=https://npm.pkg.github.com
npm install @lmfc/tokens@1.0.0

// Import ES Module
import { colors } from '@lmfc/tokens';
console.log(colors.brand.red); // "#E2001A"

// Import CSS
import '@lmfc/tokens/css/lmfc-tokens.css';

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: { extend: {
    colors: {
      'lmfc-red':       '#E2001A',
      'lmfc-red-deep':  '#7B1619',
      'lmfc-gold':      '#F1C100',
      'lmfc-dark':      '#0B0707',
    },
    fontFamily: {
      display: ["'Anton'",          'sans-serif'],
      body:    ["'Archivo'",        'sans-serif'],
      mono:    ["'JetBrains Mono'", 'monospace'],
    },
    fontSize: {
      'display': ['clamp(48px,8vw,108px)', { lineHeight:'0.9' }],
      'h1':      ['clamp(34px,5vw,56px)',  { lineHeight:'1.05' }],
    },
  }},
};