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. La salamandre, emblème historique de la ville du Havre, accompagne le blason sur les usages patrimoniaux.

Élément graphique patrimonial

La salamandre couronnée, emblème historique de la ville du Havre, orne le blason du club depuis sa création. Utilisée seule uniquement sur les supports institutionnels et patrimoniaux — jamais en remplacement de l'écusson principal.

SALY EN ACTION

La mascotte anime la pelouse avant-match et les temps forts de la rencontre.

RENCONTRE SUPPORTERS

En fan zone, Saly incarne la proximité du club avec ses jeunes supporters lors des animations d'avant-match.

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

SB29

Stade Brestois

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

Billetterie

LIGUE 1 MCDONALD'S · RÉSULTAT

HAC0 – 1Monaco

Stade CMA CGM Océane

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.

Barre d'annonces contextuelle, header principal, sidebar espace fan.

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.

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">