Design System
Le Havre AC

La palette du HAC s'articule autour de trois couleurs identitaires — Marine, Ciel, Blanc — héritées des couleurs d'Oxford et Cambridge portées depuis 1872. Une couleur de support, le bronze, complète le système pour les accents patrimoniaux.

:root {
  --hac-marine:      #0B1830;
  --hac-ciel:        #6FB6E8;
  --hac-white:       #F5F7FA;
  --hac-marine-deep: #050B1A;
  --hac-ciel-deep:   #2E6C9E;
  --hac-ciel-pale:   #BFE0F7;
  --hac-bronze:      #C0946A;
  --grad-oceane: linear-gradient(100deg,#050B1A,#0B1830 40%,#2E6C9E 72%,#6FB6E8);
  --grad-maree:  radial-gradient(circle at 78% 22%,#6FB6E8,#2E6C9E 42%,#0B1830 75%,#050B1A);
}

L'écusson du HAC existe en version couleur et en version blanche. Il est la seule marque d'identification du club : ni la salamandre patrimoniale (section 12) ni la mascotte Saly (section 09) ne s'y substituent.

Version couleur — fond marine

Version couleur — fond clair

Monochrome blanc — sur dégradé, halon protégé

Halon sombre centré sous le logo

Sur photo, appliquer un halon radial noir/marine opacité 40–65% pour garantir un contraste minimum de 4.5:1. Le logo ne se pose jamais directement sur une photo non traitée.

CTA animés, badges, cards et cartes de match.

LIGUE 1 MCDONALD'S · J.4 · DOMICILE

HAC

VS

Stade Brestois

Sam. · 19h00 · Stade CMA CGM Océane

Billetterie

LIGUE 1 MCDONALD'S · RÉSULTAT

HAC 0 – 1 Monaco

Stade CMA CGM Océane

LIGUE 1 MCDONALD'S · J.4

Live

HAC 1 – 0 Brest

67' · Stade CMA CGM Océane

Reprise du traitement effectif du site institutionnel : le numéro en Behind The Nineties italic bronze clair, le nom en Acumin Pro Condensed 800 blanc — les deux seules typos qui se croisent sur cette composition. Photo assombrie par un dégradé bas, salamandre en filigrane.

Animations directes et franches. Durée type 200–350ms. Pas d'animation supérieure à 600ms, sauf transitions de page.

Rayures verticales — héritées du maillot historique —, grille de fond, dégradés signature et glassmorphisme sur photo. Un seul geste graphique par visuel, jamais deux superposés.

Trois niveaux : la barre d'annonces (ticker, contextuelle), le N0 inter-sites (commun à tous les espaces digitaux du club) et le N1 propre à chaque site, avec ses états déconnecté / connecté.

HAC – STADE BRESTOIS 29 · SAM. 19H00 · STADE CMA CGM OCÉANE · ABONNEMENTS 26–27 OUVERTS

HAC

Ligue 1 McDonald'sArkema Première LigueAcadémie Ciel&MarineClubStade CMA CGM Océane

ConnexionBillets

Le footer du HAC n'est pas un composant local à ce site : c'est un bloc institutionnel unique, identique sur toutes les plateformes du club (fond #0A152E, accent or #C0946A, bloc partenaires alimenté par API). Spécification complète, contrat de données et guide d'intégration : voir section 20 — Footer partagé. Démonstration grandeur réelle en bas de cette page.

Bibliothèque d'icônes outline, stroke 1.5px, héritant systématiquement de currentColor. Zéro emoji dans le design system — chaque usage passe par un pictogramme vectoriel.

La salamandre couronnée, emblème historique de la ville du Havre, orne le blason du club depuis sa création. Elle ne remplace jamais l'écusson (section 02). Trois usages seulement : signature bronze isolée, monochrome blanc sur fond marine, ou élément graphique de fond dans les visuels de composition — le traitement retenu sur les affiches de match et les pages effectif.

APLAT BRONZE — USAGE SEUL

Version de référence, bronze #C0946A. Supports institutionnels et patrimoniaux uniquement.

MONOCHROME BLANC

Obtenue par mask CSS sur le fichier bronze — aucun second SVG à maintenir par teinte.

ÉLÉMENT GRAPHIQUE SUR COMPOSITION

Affiche de match, visuel d'effectif, habillage social. Aplat marine #0B1830, emblème en marine intermédiaire #142A4D, cadré large et débordant. Les deux teintes ne comptent que 1,24:1 d'écart : le fond se structure sans jamais concurrencer les logos.

12 colonnes, gouttière 16px (mobile) à 24px (desktop). Max-width 1280px.

Le design system supporte les deux modes via des tokens CSS adaptatifs — les composants n'ont pas besoin d'être réécrits. Le bouton flottant en bas à droite change le thème de cette page ; la démo ci-dessous illustre le principe de façon isolée.

Le footer HAC est un composant unique, agnostique de stack, décliné à l'identique sur tout site ou plateforme de l'écosystème (institutionnel, boutique, billetterie, apps, landings…). Le design system fixe la structure visuelle et les tokens ; chaque plateforme y injecte ses propres menus, contacts et son propre token API — rien n'est hardcodé côté design system.

Fond continu #0A152E du haut du footer jusqu'à la barre légale — aucune rupture de couleur entre les blocs.

Fond footer / partenaires / légal ........ #0A152E
Accent or (titres, devise, année, sala) .. #C0946A
Titres listes / niveaux partenaires ...... #C0946A · 22px · 700
Items de listes + textes info ............ #7a9bb8 · 18px
Séparateur avant partenaires ............. 1px solid #7a9bb8 (largeur container)
Slot logo partenaire (tous niveaux) ...... 200px large · object-fit:contain · h.max ~80px
Salamandre ................................ SVG or #C0946A · largeur 114px
Crest footer .............................. SVG mono blanc, HAC_logo_monoblanc.svg, sans filter:invert
Devise « À jamais le premier ! » ......... #C0946A · casse phrase · 40px mobile / 70px desktop · italic
Texte « 1872 » ............................ #C0946A · 23px · italic
Icônes réseaux ............................ #79bde8
Texte barre légale ........................ #ffffff
Z-index header sticky vs footer .......... header ≫ footer (ex. 5000 vs auto)

Le design system expose des listes injectées par la plateforme — 3 à 4 listes typiquement, dont une colonne « infos » possible en dernière position. Titres et items sont des données, jamais des libellés métier figés dans le composant (pas de « Produits », « Prochains matches »… en dur).

{
  "lists": [
    { "title": "Liste 1", "items": [
      { "label": "lien 1", "url": "https://example.hac.football/a" },
      { "label": "lien 2", "url": "https://example.hac.football/b" }
    ]},
    { "title": "Liste 2", "items": [
      { "label": "lien 1", "url": "https://example.hac.football/e" }
    ]}
  ],
  "info_column": {
    "title": "Liste N — infos",
    "lines": ["Ligne adresse ou contact", "Ligne complémentaire"]
  }
}

Règle responsive : desktop = crest + colonnes flex égales sur une rangée · mobile = 1 seule colonne empilée (jamais de grille 2 colonnes).

Une seule source de vérité pour les logos partenaires sur tout l'écosystème HAC : aucun site ne maintient de liste de logos en dur.

GET https://hac.football/api/partners
Authorization: Bearer <TOKEN>   (fourni séparément par le club — jamais versionné)
Accept: application/json

401 Unauthorized si token manquant / invalide

{
  "partners": [
    {
      "name": "Winamax",
      "logo_url": "https://hac-foot.com/storage/partners/logos/xxxxx.png",
      "website": "https://www.winamax.fr/",
      "position": 1,
      "type": "Partenaires Principaux",
      "type_rank": 1
    }
  ]
}
/* name → alt/title · logo_url → image absolue · website → null = logo sans lien
   position → ordre DANS la catégorie · type → libellé de section
   type_rank → rang de catégorie (0 = plus haut, peut être null) */

1. Fetch (ou lecture cache) — la liste API est déjà triée par type_rank puis position
2. Grouper les items par type en respectant l'ordre / type_rank
3. Pour chaque groupe : titre #C0946A 22px → rangée de logos
4. Chaque logo dans un slot 200px (indépendant du niveau)
5. Si website non null : wrapper <a target="_blank" rel="noopener noreferrer">