Design System · Trèfle & Pissenlit
Couleurs principales
Primary
#4A7C59
Vert forêt
Primary Dark
#3a6347
Hover primary
Primary Deeper
#2c4a35
Foncé, headings
Secondary
#D9C89A
Or naturel
Secondary Dark
#c9b98a
Hover secondary
Arrière-plans & neutres
Paper
#fdfcf9
Fond global body
Nav/Footer BG
#F9F8F4
Section Alt
#f9f9f9
White
#ffffff
Text Dark
#2D3A30
Footer, corps
Text Black
#171717
Transparences (sur checker)
Tokens CSS (:root)
| Variable | Valeur | Usage |
|---|---|---|
| --primary | #4A7C59 | Couleur principale, CTA, liens |
| --secondary | #D9C89A | Accents, décorations, hover |
| --bg-color | #fdfcf9 | Fond body global |
| --text-color | #171717 | Texte principal |
| --text-muted | #4a4a4a | Texte secondaire |
| --border-color | #e5e5e5 | Bordures, séparateurs |
| --font-serif | Playfair Display, Lora | Titres, citations |
| --font-sans | Inter, Montserrat | Corps, UI |
| --transition | all 0.3s cubic-bezier(0.4,0,0.2,1) | Transitions standard |
Playfair Display — Serif (Titres, citations)
H1 — 8xl
H2 — 6xl
H3 — 4xl
H4 — 2xl
"Citation en italic serif" — prose italique
Texte courant en serif, pour les articles longs et citations éditoriales.
Inter — Sans-serif (Corps, UI)
Lead — font-light 2xl
Body Large — xl
Body Normal — base (défaut)
Body Small — sm
Caption — xs
LABEL — 10px uppercase widest
Gras — font-bold
Semi-gras — font-semibold
Medium — font-medium
Normal — font-normal
Léger — font-light
.text-premium
Texte Premium Italique
font-serif, italic, color: primary
.meta
0.75rem, uppercase, tracking, primary
.accent-line — séparateur décoratif
Titre avec accent
Texte qui suit après l'accent doré.
Utilitaires nav & inline
États bouton
Carte standard .card
Fond transparent, bordure neutre, hover → bordure secondary + ombre offset. Survoler pour voir l'effet.
Carte pilier
Icône avec cercle hover vert, bordure gauche au hover. Utilisé pour les 3 éthiques.
01
Carte principe sombre
Fond primary, titre en secondary, texte blanc atténué. Grilles de 12 principes.
Carte avec image
Hover → image passe de grayscale à couleur. Transition 700ms.
Cultivons demain
Carte newsletter — style footer. bg-white/50, rounded-2xl, border-white, backdrop-blur-sm.
"Bloc citation avec bordure gauche primary. border-l-4 border-[#4A7C59] shadow-sm italic."
"Encart citation flottant en secondary."
Utilisé dans hero index (position absolute)
Inputs standards (page contact)
Style underline (footer newsletter)
Range input (simulateurs)
Checkboxes (simulateur low-tech)
Simulateur de Résilience
Exemple de simulateur avec inputs, résultat dynamique et jauge visuelle.
Les résultats s'affichent ici après calcul.
Les sections suivantes sont des exemples de fond/layout réutilisables — clique pour voir le rendu en contexte.
Section bg-white
py-24 bg-white — utilisé pour intro, historical. Ligne d'accent : w-24 h-1 bg-secondary.
Section bg-[#f9f9f9]
bg-[#f9f9f9] — section alternée, historical, certains blocs de contenu.
Section bg-[#2c4a35]
bg-[#2c4a35] — section manifesto, CTA finaux, sections d'impact.
Section bg-[#4A7C59]
Utilisé pour les sections de grille (12 principes, cartes étape), hero sombre.
Comment utiliser ce composant accordéon ?
Variante avec fond crème ouvert ?
Cet accordéon est ouvert par défaut
.reveal-on-scroll
Cet élément fade-in au scroll (IntersectionObserver dans BaseLayout).
opacity: 0 → 1, translateY: 20px → 0
grayscale → couleur au hover
group + grayscale + group-hover:grayscale-0 transition 700ms
rotate-3 → 0 au hover
rotate-3 + hover:rotate-0 duration-500
.nav-link-underline — animation soulignement
Hover → pseudo-element ::after s'étire de 0 à 100% (cubic-bezier 0.4,0,0.2,1)
Lien footer avec tiret extensible
w-0 → group-hover:w-4 + mr-0 → group-hover:mr-2, transition-all duration-300
body::before — texture grain (global, z-index:9999)
FeTurbulence fractalNoise, opacity: 0.04, pointer-events: none, fixed
#navRoot::before — texture nav (opacity: 0.4)
Même filtre, opacity plus élevée → grain visible sur nav
body::after — filigrane botanique (fixed, bottom-right)
Feuille de trèfle SVG, opacity-5 à 0.05, pointer-events-none
Footer — filigrane botanique (rotate-12)
SVG plante, absolute -bottom-12 -right-12, opacity-5, rotate-12
Ligne dégradé haut simulateur
bg-gradient-to-r from-primary to-secondary
.grid-asymmetric — 12 colonnes, gap 2rem
Grille 2 col avec order inversion (historical section)
lg:grid-cols-12 — hero regeneration (7+5)
Page non indexée — usage interne uniquement
← Retour à l'accueil