Charte du site — Coco Vanille Banc d’essai : changez la variante, la police ou l’apparence en haut de page, tout se met à jour. Les contrastes sont recalculés à chaque changement. Page non indexable.

Les variantesCinq déclinaisons des couleurs du logo — chevrons marine, points bordeaux

Marine — Les couleurs du logo — chevrons marine, points bordeaux — sur un papier quasi blanc et un pied presque noir. C'est la variante de référence, celle qui part par défaut.

Marine et rouge — Le marine du logo, mais un rouge franc à la place du bordeaux des points. Le bordeaux se lisait comme un brun sur un écran de chantier ; le rouge dit où cliquer. Sur les fonds sombres il ne détache que par son liseré clair — la règle est dans theme-pro.css, section 12.

Encre et rouge — Aplats gris-noir, un seul rouge franc pour les boutons, et une lueur bleue qui affleure dans un coin des grands fonds sombres. La page est blanche, la couleur ne sert qu'à montrer où cliquer : c'est la variante retenue par défaut.

Encre et bleu électrique — La même retenue qu'Encre et rouge, avec un bleu électrique qui vire au mauve sur les boutons. Le dégradé est la signature : c'est la seule variante où l'appel à l'action n'est pas d'une seule couleur.

Encre et orange — Même retenue, avec l'orange de balisage à la place du rouge. Un particulier identifie le métier en une seconde sans qu'on ait à repeindre la page.

Bleu profond — Bleu de nuit sur les aplats, terre cuite sur les boutons. Le registre le plus proche du logo tout en s'en détachant : plus froid, plus large, plus institutionnel.

Forêt — Vert de futaie sur les aplats, ocre de gemme sur les boutons. La seule des cinq qui sorte du bleu et du gris — utile si le site doit parler d'aménagement extérieur autant que de terrassement.

Coco — La référence pour l'accueil : le brun de la noix de coco et l'or de la vanille, sur un papier crème. Chaud, naturel, reposant. Le brun tient 10,5:1 sur le papier — on peut écrire dessus sans réfléchir.

Vanille — La même famille, en plus clair et plus doux. Le papier tire vers la crème, l'accent vers l'olive dorée de la gousse. Pour un lieu qu'on veut lumineux plutôt qu'enveloppant.

Feuillage — Le vert profond du jardin tropical, avec l'ambre de la vanille en rappel. C'est la variante la plus végétale : elle convient quand les photos montrent surtout de la nature.

Lagon — Un vert d'eau profond et un doré chaud. Pensée pour un hébergement dont la piscine ou l'océan sont l'argument principal. Fraîche sans être froide.

Coucher de soleil — Brun prune et corail : la fin de journée dans le Sud. La plus chaude des cinq, à réserver aux lieux qui assument une image romantique.

Les couleurs de la variante activeRelues dans la feuille appliquée, pas recopiées

Contrastes mesurésRecalculés en direct — un couple sous 4,5:1 est un défaut, pas un goût

TypographieCinq piles proposées, toutes sans téléchargement

Système sans téléchargement — Aucun téléchargement, affichage instantané.

Serif classique sans téléchargement — Titres en serif, texte en sans : le contraste le plus lisible.

Géométrique sans téléchargement — Rondeur moderne, proche des chartes d'agence.

Condensée sans téléchargement — Titres serrés : tient plus de mots sur une ligne, registre chantier.

Technique sans téléchargement — Registre technique, à réserver aux documents et devis.

Inter auto-hébergée — La police d'interface de référence. Neutre, dessinée pour l'écran, elle ne se remarque pas — c'est sa qualité.

Plus Jakarta auto-hébergée — Titres légèrement arrondis, très contemporains. Registre d'agence, sans être froid.

Manrope auto-hébergée — Semi-géométrique, un peu de rondeur dans les titres. Chaleureuse sans perdre le sérieux.

Outfit auto-hébergée — Géométrique franche, très lisible en gros titres. Bonne tenue sur les grandes accroches.

Sora auto-hébergée — Dessin technique, un peu carré. Évoque l'ingénierie plus que l'artisanat.

Space Grotesk auto-hébergée — Grotesque au dessin marqué : la plus caractérisée du lot. Se remarque, et c'est voulu.

Figtree auto-hébergée — Douce et ouverte, la même partout. Le choix le plus consensuel des dix.

Archivo auto-hébergée — Robuste, large, presque signalétique. Tient bien les titres courts en capitales.

Bricolage auto-hébergée — Éditoriale, avec du relief dans les titres. Pour un site qui publie des guides.

Fraunces auto-hébergée — Serif moderne à empattements vivants. Registre haut de gamme, se distingue nettement des concurrents en sans-serif.

Aplat — Aucun dégradé : des aplats francs. Le rendu le plus sobre, et le plus rapide à afficher.

Dégradé sobre — Un dégradé très fermé, d'une teinte vers sa version plus profonde. On le devine sans le voir : il donne du volume aux blocs sans attirer l'œil.

Dégradé moderne — Dégradé en diagonale mêlant deux teintes de la palette, avec un halo lumineux sur l'en-tête. Registre contemporain, plus affirmé — les boutons deviennent le point le plus vif de la page.

Le terrain décide.
On vient le voir avant de chiffrer.

Intertitre de section, en grande taille.

Texte courant calé sur 68 caractères. Au-delà, l’œil perd la ligne en revenant à la marge. Gras, lien, code.

Texte atténué — le gris le plus clair qui passe encore 4,5:1.

Boutons et badgesCible tactile 44 px minimum

Cartes de prestationLiseré à la couleur de la rubrique

Champs et résultat48 px de haut, étiquette au-dessus

Accordéon<details> natif, aucun JavaScript

MéthodeLe bloc à fond plein — c’est lui qui teste le mieux une variante

L'en-tête et le pied de pageCe sont ceux du site, découpés dans l'accueil construit — pas des copies

La barre haute, le méga-menu et le pied ci-dessous et ci-dessus sont exactement ceux du site. Changez la variante : ils changent avec.