01
Palette & Tokens
Identité chromatique · 3 couleurs principales + 1 couleur de support

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.

Couleurs identitaires
Marine Doyen--hac-marine #0B1830
Ciel Cambridge--hac-ciel #6FB6E8
Blanc Océane--hac-white #F5F7FA
Marine Profond--hac-marine-deep #050B1A
Couleurs de support
Ciel Profond--hac-ciel-deep #2E6C9E
Ciel Pâle--hac-ciel-pale #BFE0F7
Bronze Doyen--hac-bronze #C0946A
Marine Mid--hac-marine-mid #142A4D
Dégradés signature
Océane
Des profondeurs du port à la lumière du ciel
Marée
Halo lumineux, cœur de nuit marine
Glassmorphisme — cartouches sur photo
PROCHAIN MATCH À DOMICILE
Vivez la Cavée
Océane
Réserver →
LIGUE 1 · J.34
1–1
HAC · OL
tokens-hac.css — Extrait 
: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);
}
02
Logotype
Écusson, versions & règles d'usage

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.

La salamandre du Havre
É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.
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.
ZONE DE PROTECTION
Marge minimale = hauteur du bouclier sur chaque côté. Aucun élément dans cette zone.
TAILLE MINIMALE
40px de hauteur pour le digital, 10mm pour l'impression.
JAMAIS DÉFORMÉ
Ratio bloqué en permanence. Pas de rotation, ni de recoloriage non autorisé.
03
Typographie
Oswald · Inter · IBM Plex Mono

Oswald pour les titres à impact, Inter pour le corps et les interfaces, IBM Plex Mono pour les codes et annotations techniques.

Ciel & Marine
Sur fond marine — idéal
Ciel & Marine
Sur fond blanc — ciel profond, légère ombre pour la lisibilité
LE ONZE DE DÉPART
Article neutre + substantif ciel profond
STADE CMA CGM OCÉANE
Lieu neutre + nom propre bronze
Display · Oswald · clamp(40,7vw,92px)
Cavée Océane
H1 · Oswald · clamp(30,5vw,52px)
Saison 2026–27
Body Large · Inter 400/600 · 18px
Rejoignez les Ciel & Marine pour une saison inoubliable. Billetterie et abonnements disponibles en ligne.
Label / Mono · IBM Plex Mono 500 · 11px
LIGUE 1 · JOURNÉE 34 · SAM. 21 MARS 19H00
04
Composants
CTA · Badges · Cards · Cartes de match

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

CTA
Découvrir → Prendre un abonnement → Nous contacter Désactivé
Badges & Pills
Actualité Abonnement Boutique Live Ligue 1 Nouveau Sold out
Cards
Actualité
Le groupe pour Brest
3 sept. · 3 min de lecture
Abonnement
Tribune Océane
245€ /saison
Je m'abonne
Nouveau
Maillot 26/27
Domicile Ciel & Marine
97,95€
Ajouter
Cartes match
LIGUE 1 · J.4 · DOMICILE
HAC
HAC
VS
SB29
Stade Brestois
Sam. · 19h00 · Stade CMA CGM Océane
Billetterie
LIGUE 1 · RÉSULTAT
HAC0 – 1Monaco
Stade CMA CGM Océane
05
Espacement
Système de spacing 4px

Système de spacing 4px base — tokens --sp-* pour garantir la cohérence entre composants.

--sp-1
4px — inter-éléments très proches
--sp-2
8px — espacement serré
--sp-3
12px — badges, labels
--sp-4
16px — base unit
--sp-6
24px — padding cards
--sp-8
32px — sections
--sp-12
48px — padding vertical
--sp-16
64px — héros
--sp-20
80px — inter-sections
--sp-32
128px — grand héro
06
Motion & Animation
Timing tokens · exemples

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

Bounce-in
800ms
Slide-up
600ms · ease
Pulse ring
Badge « Live » · 2s
Spin loader
linear · 1.2s
--t-fast
150ms — hover, focus
--t-base
250ms — transitions standard
--t-slow
400ms — modales, drawers
--t-page
600ms — transitions de page
07
Principes de design
Six principes fondateurs

Six principes traduisent l'identité du club — doyen, patrimoine, passion populaire — en orientations concrètes.

01
Photo en priorité
La photographie est le premier vecteur d'émotion. Chaque page à forte valeur éditoriale comporte au moins une image haute définition. La typographie se superpose toujours sur une zone traitée.
02
Impact premier
Chaque écran a un point focal dominant. Le ciel capte, le marine ancre.
03
Typographie forte
Oswald domine les surfaces. La hiérarchie est toujours claire, jamais timide.
04
Ancrage local
La Cavée, Le Havre, la salamandre normande — les références locales sont valorisées.
05
Passion des supporters
Le design parle d'abord aux fans. Chaud, direct, populaire.
06
Cohérence système
Tokens, composants et règles appliqués de façon homogène sur tous les supports.
08
Langage graphique
Rayures · dégradés · glassmorphisme

Rayures verticales — héritées du maillot historique —, dégradés signature et glassmorphisme. Un seul geste graphique par visuel.

Rayures — fond de bloc
.hac-rayures · bandes verticales ciel/marine, héritées du maillot
Océane — bandeau
.hac-grad · 100deg · CTA et bandeaux horizontaux
bg rgba blanc 7% · blur 16px
Glassmorphisme
cartouches sur photo, infos contextuelles
Séparateurs pleine largeur
.hac-maree-sep · 40px · transitions de sections majeures
.hac-liseret · 6px · alternance marine & bronze, pied de carte
09
Photo & Typographie
Traitement photo · superposition

Vues action, portraits expressifs, ambiance de tribune. La typographie se superpose toujours sur un fond traité.

Après Monaco (0–1)
AMBIANCE OCÉANE
12
Pictogrammes & Icônes
Outline · stroke 1.5px

Style outline, stroke 1.5px, héritant de currentColor. Zéro emoji dans le design system.

home
search
menu
ticket
user
calendar
trophy
flag
star
map-pin
share
bell
Taille — 16px minimum, 24px standard · Stroke 1.5px par défaut · Couleur toujours currentColor, jamais hard-codée.
13
Sponsors
Partenaires · règles de visibilité

Logos partenaires en monochrome blanc sur tous les fonds. Au survol : ciel #6FB6E8.

14
Grille & Layout
12 colonnes · breakpoints

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

xs0–479px
sm480–767px
md768–1023px
lg1024–1279px
xl1280px+
15
Formulaires
Inputs · états · sélecteurs
Format d'email invalide
Valider et continuer
16
Composants avancés
Tabs · Accordéon FAQ
Tabs
Contenu onglet Calendrier — HAC – Stade Brestois 29, samedi 19h00, Stade CMA CGM Océane.
Contenu onglet Classement — tableau Ligue 1, journée 4.
Contenu onglet Buteurs — top scoreurs de la saison 2026–27.
Accordéon FAQ
Rendez-vous sur la billetterie en ligne ou au guichet du Stade CMA CGM Océane, du lundi au vendredi de 9h à 18h.
Créez un compte sur le site officiel et connectez-vous depuis le menu principal, section « Mon Compte ».
17
Accessibilité
Contrastes WCAG
AA ✓Blanc sur marine · 15.8:1
AAA ✓Marine sur ciel · 5.2:1
AAA ✓Marine sur blanc · 16.9:1
AAA ✓Blanc sur marine profond · 18.4:1
18
Dark / Light
Tokens adaptatifs — démo isolée

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.

Mode sombre — défaut
Composant card
Corps Inter 13px · couleur muted
CTA CielGhost
19
Export Tokens
CSS Variables — source de vérité

Tokens exportables en CSS Variables — source de vérité unique pour tous les projets digitaux du club.

HAC — Design Tokens v1 
/* HAC — Design Tokens v1 */
:root {
  --hac-marine:       #0B1830;
  --hac-ciel:         #6FB6E8;
  --hac-white:        #F5F7FA;
  --hac-marine-deep:  #050B1A;
  --hac-ciel-deep:    #2E6C9E;
  --hac-bronze:       #C0946A;
  --font-display: 'Oswald', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;
  --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
  --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;
}
Design System officiel du Havre Athletic Club — Noyau v0.1 · Sept. 2026