Cette page décrit les couleurs, les polices et les composants du site tels qu’ils sont réellement employés. Les valeurs sont lues dans les variables d’identité et dans la configuration du thème : elles ne peuvent pas s’écarter de ce que voit le visiteur. Les exemples portent la mention « Exemple » et n’envoient rien.
Couleurs
Quatre couleurs de marque — noir, blanc, sable, brume — et leur version sombre. Les accents colorés viennent des photographies des œuvres, pas de boutons de couleurs. Un état n’est jamais porté par la couleur seule : une barre, une bordure ou un texte l’accompagne.
| Couleur | Mode clair | Mode sombre | Usage |
|---|---|---|---|
Noir --ueah-noir | #101010 | #101010 | Texte et actions ; contour de focus. Fixe dans les deux modes. |
Blanc --ueah-blanc | #FFFFFF | #FFFFFF | Fond de page en mode clair ; contour de focus. Fixe dans les deux modes. |
Fond --ueah-fond | #FFFFFF | #121212 | Fond de page : blanc en mode clair, noir adouci en mode sombre. |
Texte --ueah-texte | #101010 | #F2EFEC | Couleur du texte courant. |
Sable --ueah-sable | #C4B3A9 | #6E5F56 | Grands aplats : en-tête, accès de visite. Texte sombre dessus, jamais blanc. |
Brume --ueah-brume | #DEE7ED | #2B3A44 | Repères secondaires : bandeaux, états vides, survol. |
Bordure --ueah-bordure | #C4B3A9 | #3A3A3A | Filets et contours discrets. |
Contrastes mesurés
Le texte courant doit atteindre 4,5:1 (RGAA 4.1, niveau AA). Les rapports ci-dessous sont calculés à partir des valeurs de la palette.
| Mode | Texte | Fond | Usage | Rapport | Verdict |
|---|---|---|---|---|---|
| Clair | #101010 | #FFFFFF | Texte sur le fond de page | 19,03:1 | Conforme |
| Clair | #101010 | #C4B3A9 | Texte sur un aplat sable | 9,39:1 | Conforme |
| Clair | #101010 | #DEE7ED | Texte sur un repère brume | 15,19:1 | Conforme |
| Sombre | #F2EFEC | #121212 | Texte sur le fond de page | 16,35:1 | Conforme |
| Sombre | #F2EFEC | #6E5F56 | Texte sur un aplat sable assombri | 5,34:1 | Conforme |
| Sombre | #F2EFEC | #2B3A44 | Texte sur un repère brume assombri | 10,23:1 | Conforme |
| Clair | #FFFFFF | #C4B3A9 | Blanc sur sable : à ne jamais employer | 2,03:1 | À éviter |
Focus
Au clavier, chaque lien, bouton ou champ reçoit un double contour, noir puis blanc, visible sur une photographie comme sur un aplat. Appuyez sur la touche Tab pour le voir sur ce lien vers le catalogue.
Typographie
Deux familles, toutes deux servies depuis le site : aucune police distante n’est chargée.
- Titres — Barlow Condensed, repli de Hoboken High Sans Serif —
"Barlow Condensed", "Arial Narrow", Arial, sans-serif - Texte — Public Sans, repli d’Akkurat —
"Public Sans", Arial, sans-serif
Les polices Hoboken High Sans Serif et Akkurat, prescrites par le cahier des charges, seront remises par le GIP : les polices libres ci-dessus les remplacent en attendant, par configuration, sans toucher aux gabarits.
Échelle des tailles
Les tailles s’adaptent à l’écran et se règlent en rem : elles suivent le zoom du navigateur jusqu’à 200 %. Le texte courant garde un interligne de 1,5.
Un été au Havre
Légende (14–16 px) — clamp(0.875rem, 0.829rem + 0.19vw, 1rem)
Un été au Havre
Texte (16–18 px) — clamp(1rem, 0.954rem + 0.19vw, 1.125rem)
Un été au Havre
Intertitre (22–28 px) — clamp(1.375rem, 1.236rem + 0.571vw, 1.75rem)
Un été au Havre
Titre de section (28–48 px) — clamp(1.75rem, 1.286rem + 1.905vw, 3rem)
Un été au Havre
Titre de page (40–88 px) — clamp(2.5rem, 1.386rem + 4.571vw, 5.5rem)
Composants
Liens
Un lien reprend la couleur du texte et reste souligné : Découvrir les parcours. Sa zone cliquable mesure au moins 44 px de haut.
Champs de formulaire
Chaque champ a une étiquette visible, une aide courte et, au besoin, une erreur reliée au champ.
Une aide courte, sous le champ.
Questions et réponses
L’accordéon des questions fréquentes, dans son état replié.
Exemple de question ?
Exemple de réponse, affichée quand la question est dépliée.
Comment se lit une liste de questions ?
Chaque question se déplie au clavier ou au toucher, et possède une adresse stable.
Composants déjà présents sur cette page
- Le fil d’Ariane, au-dessus du titre : chemin vers l’accueil.
- Le menu « Apparence » de l’en-tête : Clair, Sombre ou Auto, mémorisé d’une visite à l’autre.
- La recherche de l’en-tête : cinq suggestions, puis la page de tous les résultats.
- L’image d’ouverture et son crédit : un crédit par image.
- La barre d’actions, en bas de page : imprimer, enregistrer en PDF, envoyer par courriel, partager.
Badges
Un badge est un court texte entouré d’un filet : il se lit sans la couleur.
Exemple
Exemple Marque un contenu fictif de démonstration : événement d’essai, question d’essai, actualité d’essai. Il n’est jamais publié en production.
Droits à confirmer
© Nom de l’auteur — droits à confirmer Suit le crédit d’une image dont la licence n’est pas encore validée par le GIP. Un crédit accompagne chaque image, jamais un crédit générique de page.
États vides
Un état vide dit en une phrase pourquoi il n’y a rien à voir, puis propose de vrais chemins : réinitialiser les filtres ou rejoindre une autre partie du site. Il ne laisse jamais une zone blanche et ne propose jamais un lien qui ne mène nulle part.
Recherche sans résultat
L’agenda distingue deux cas : une sélection sans résultat, qui propose de réinitialiser les filtres, et un agenda où aucun événement n’est encore publié, qui renvoie vers les œuvres et les parcours.
États d’erreur
Une erreur nomme le problème, dit comment le corriger et propose une alternative réelle. Elle est reliée au champ concerné et ne repose pas sur la couleur. Les exemples ci-dessous ne sont pas de vraies alertes : ils ne sont pas annoncés par les lecteurs d’écran.
Erreur de champ
Exemple
Erreur : l’adresse doit contenir un arobase, par exemple nom@exemple.fr.
Résumé des erreurs
Exemple
Un champ est à corriger
Service indisponible
Exemple
Carte indisponible : le service n’a pas répondu. La liste complète des œuvres reste disponible. Découvrir les œuvres
Page introuvable
Une adresse inconnue répond « 404 » avec une page qui explique, propose la recherche et mène vers les œuvres et les parcours. Un mot qui ne trouve rien, lui, aboutit à l’état vide de la recherche ci-dessus.