Style Écologie

Style Écologie

Un site qui vit son sujet : sobre, honnête, mesuré. Pas d'écowashing visuel, la légèreté de la page fait partie du message.

Quand l'utiliser

• Associations environnementales, bureaux d'études climat, circuits courts, marques bio, collectivités, rapports RSE.
• Évite-le pour une marque qui ferait juste "un peu de vert" : sans vraie démarche, il sonne faux.

Palette

• Fond : crème #f5efe1, jamais de blanc pur clinique. Surface alternative : sable #e9dcc3.
• Texte : brun profond #3d2b1f (11.7:1 sur crème, 9.9:1 sur sable). Secondaire : #6b5a4a (5.8:1). Jamais de noir pur.
• Primaire : vert forêt #166534 (6.2:1 sur crème, texte blanc dessus 7.1:1).
• Verts secondaires : olive #65a30d et sauge #84cc16 uniquement en illustrations, pastilles ou graphiques (2.7:1, trop faible pour du texte).
• Terre : terracotta #c98860 pour formes et fonds de blocs, jamais pour du texte.
• Accent CTA : rouille #d97706 ou moutarde #eab308 en fond, texte #3d2b1f en 18px bold (4.2:1 sur rouille). Liens accentués : #8a4b2a (5.9:1).
• Erreur : #b91c1c. Succès : le vert forêt.

Typographie

• Titres : Fraunces (Google Fonts, axe SOFT à 50 et opsz auto) ou Cormorant Garamond. Recoleta si licence.
• Texte : Manrope ou Source Sans 3. Une seule touche manuscrite possible (Caveat) pour une annotation, pas plus d'une par page.
• Échelle : H1 56px/1.1 (600), H2 36px/1.2 (500), H3 24px/1.3 (500), body 17px/1.65 (400), small 14px/1.5.
• Mobile : H1 38px via clamp(2.4rem, 6vw, 3.5rem).
• Charge au maximum 2 familles, en WOFF2, subset latin, font-display: swap.

Layout & grille

• Grille 12 colonnes, max-width 1120px, marges 24px mobile et 64px desktop.
• Whitespace généreux : sections de 120px desktop, 72px mobile, rythme 8px.
• Mesure de texte 60 à 70 caractères.
• Images au ratio 4:5 ou 3:2, radius 16 à 24px ou formes organiques en clip-path.
• Blobs SVG en fond (terracotta ou sable à 40% d'opacité), jamais de gradients électriques.
• Breakpoints : 640, 960, 1280px.

Composants signature

• Hero : grand titre serif, sous-titre, photo naturelle réelle (feuillage, terre, mains au travail), CTA rouille.
• Bloc "Nos engagements chiffrés" : 3 à 4 indicateurs avec valeur, delta année sur année et source en note.
• Footer : compteur d'empreinte de la page (0.2 g CO2/vue), badge "Hébergement bas carbone", lien vers la méthode de calcul.
• Cards : fond sable, radius 20px, pas d'ombre, bordure 1px solid rgba(61,43,31,.12).
• Boutons : radius 999px, hauteur 48px, texte 16px 600. Secondaire : bordure verte 1.5px.
• Icônes botaniques en trait (feuille, graine, arbre), Phosphor ou Lucide en poids light.

Motion

• 200 à 300ms, easing cubic-bezier(0.25, 0.1, 0.25, 1).
• Autorisé : fade doux au scroll (une fois), hover qui assombrit le vert, légère ondulation de blob en CSS pur.
• Interdit : vidéo autoplay lourde, Lottie de 500 Ko, parallax, librairies d'animation JS pour de simples fades.
• prefers-reduced-motion respecté, blobs figés.

Tokens CSS

:root {
  --bg: #f5efe1;
  --surface: #e9dcc3;
  --text: #3d2b1f;
  --muted: #6b5a4a;
  --primary: #166534;
  --olive: #65a30d;
  --sage: #84cc16;
  --terracotta: #c98860;
  --cta: #d97706;
  --link: #8a4b2a;
  --radius: 20px;
  --font-display: Fraunces, "Cormorant Garamond", Georgia, serif;
  --font-body: Manrope, "Source Sans 3", system-ui, sans-serif;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

Checklist avant livraison

• Poids total de la page d'accueil sous 1 Mo, images en AVIF ou WebP avec lazy load.
• Fonts subset et limitées à 2 familles.
• Chaque chiffre environnemental a une source ou une méthode citée.
• Aucun texte en olive, sauge ou terracotta.
• Chaque image est réelle et porte un sens, texte alternatif rédigé.
• Score Lighthouse Performance au-dessus de 90 sur mobile.

À éviter

• Planète dans des mains, ampoule avec feuille, stock "green business".
• Verts fluo et gradients néon.
• Promesses floues ("100% responsable") sans preuve.
• Blanc pur et noir pur.
• Vidéo de fond en boucle, carrousels lourds.

Prompts de démarrage

• "Crée le site d'une ferme maraîchère en vente directe en style-ecologie, avec paniers, points de retrait et engagements chiffrés."
• "Conçois la page rapport RSE annuel d'une PME avec indicateurs, deltas et sources."
• "Fais la landing d'une association de reforestation avec appel au don et carte des projets."
• "Transforme cette page en version low-tech : moins de 500 Ko, sans JS superflu, même identité."