Le langage
visuel.

Deux familles typographiques. Pas une de plus.

Quilon en display — pour les titres, les chiffres héroïques, le téléphone géant en pied de page. C'est une fonte au caractère affirmé, avec un letter-spacing négatif resserré (-0.03em sur les H1) qui lui donne sa densité éditoriale. Elle ne fait pas de faux serif sympathique : elle assume sa présence.

Inter Tight en body — pour tout le reste, paragraphes, navigation, eyebrows. Choisie pour sa lisibilité à toutes tailles et son rendu propre sur écrans à pixels denses. Les eyebrows micro-texte du site (les 01 — Pannes, 02 — Trois axes) tirent leur signature de l'écart de tracking : 0.22em uppercase.

Les deux familles sont auto-hébergées dans public/fonts/ en woff2 avec font-display: swap. Pas de Google Fonts, pas d'appel réseau tiers — un point de moins à valider côté RGPD, et un FCP qui démarre dès que le HTML arrive.

Une palette de cinq tokens.

Le site fonctionne sur une palette resserrée déclarée comme custom properties dans global.css via @theme (pattern Tailwind v4). Cinq tokens couleur principaux :

• ink — gris très foncé, presque noir, pour le texte principal
• ink-muted — gris moyen pour les paragraphes secondaires
• bg et surface-sunken — deux blancs cassés pour l'alternance des sections
• brand — un bleu électrique unique, signature visuelle Renobat
• signal — utilisé uniquement pour les focus-visible (a11y), distinct du brand

Pas de palette dégradée, pas de gris à 7 niveaux, pas de "secondary" / "tertiary" qui restent inutilisés. La discipline de la palette est ce qui empêche le site de devenir générique.

Le rythme : hairlines et blancs.

Le site n'a quasi pas de cartes ombrées, pas de gradient, pas de border-radius généreux. La structure visuelle vient de hairlines à 1 pixel qui découpent les sections, des eyebrows numérotés qui marquent la progression du scroll, et des blancs respiratoires calculés en clamp() pour s'adapter au viewport.

Là où on s'éloigne du sobre, c'est sur deux points précis : les cartes avis Google qui adoptent un radius généreux + box-shadow stacked en brand (pour casser visuellement le widget plat habituel), et les boutons CTA qui portent une signature asymétrique deux-coins (top-left + bottom-right) avec stacked shadow — un détail qu'on retrouve sur toutes les pages, qui devient un marqueur reconnaissable.

Les animations.

Toutes les sections animées utilisent GSAP avec SplitText et ScrollTrigger pour les reveals char-level. Eases personnalisés (renobat-snap, renobat-trace, renobat-glide) calibrés pour ne pas être "front-loaded" — le mouvement doit accompagner le scroll, pas le devancer.

Lenis gère le smooth scroll côté desktop uniquement (pointer: fine) ; sur touch, le scroll natif iOS/Android prime. Les carousels horizontaux portent un data-lenis-prevent pour ne pas hijacker le geste.

Tout respecte prefers-reduced-motion — les animations sont coupées proprement pour les utilisateurs qui le demandent au système. C'est un détail d'accessibilité que beaucoup de sites premium oublient.

Le design system documenté.

L'ensemble vit dans un DESIGN.md contractuel à la racine du projet, qui sert de source de vérité. Liste "JAMAIS" explicite (pas d'image stock, pas de placeholder, pas de gaine apparente sur le bâti classé), liste noire de composants, règles motion, règles a11y.

Ce document a été construit conjointement entre Renobat et le studio Tacelo pendant les premières semaines du projet. C'est lui qui garantit la cohérence visuelle au fil des pages ajoutées — page villes dépannage, électricien, luminaires, et tout ce qui viendra ensuite.