Design System — Option C

Le Jardin vivant

Immersion dans le jardin méditerranéen contemporain — sauvage mais composé, sobre en eau mais généreux en textures. La beauté du vivant sous contrainte climatique.

Jardin Plein Sud · Paysagiste à Apt, cœur du Luberon · Prototype Site 4.0

01

Palette

Une tension entre vert sauge sombre (l'ossature méditerranéenne) et gris-vert argenté (signature des graminées sèches). L'ocre ambré intervient rarement, comme la lumière rasante de septembre sur un massif.

Primary · 500
Vert sauge — ossature
#4A5D4E
Secondary · 400
Gris-vert argenté — graminées
#A5B0A1
Accent
Ambre chaud — lumière rasante
#B97A40
Ink
Anthracite chaud — texte
#2D2A24
Canvas
Ivoire chaud — fond principal
#F5EFE6
Kraft
Papier du moodboard
#E3D9C6

Nuancier Primary — Vert sauge

50
#EEF0EC
100
#D8DED5
200
#B1BCAC
300
#889A83
400
#677B64
500
#4A5D4E
600
#3B4B3F
700
#2E3C32
800
#212D24
900
#161E18

Nuancier Secondary — Gris-vert argenté

50
#F3F2EB
100
#E4E4D8
200
#CBCDBB
300
#B2B59C
400
#A5B0A1
500
#8B957F
600
#6E7763
700
#555D4C
800
#3E4438
900
#292E25

Usage

Fond principal : canvas (#F5EFE6) — jamais de blanc pur.

Fond alternatif : canvas_soft / kraft pour alterner les sections.

Texte : ink (#2D2A24) sur canvas.

CTA principal : primary 500 ou accent (hero uniquement, une fois par page).

Footer / immersif : primary 800 avec texte canvas.

Règles

L'accent (#B97A40) n'apparaît que sur petites surfaces : filets, numéros de section, soulignements, CTA hero.

Les verts sombres (primary 700+) portent les sections immersives avec photo en overlay.

Contraste texte/fond minimum 4.5:1 partout — 7:1 sur les grandes surfaces.

Jamais deux couleurs vibrantes côte à côte sans un neutre entre elles.

02

Typographie

Fraunces (variable, axe SOFT actif pour les italiques expressives) porte la voix éditoriale. Inter travaille en silence sur le body. Un couple, pas un patchwork.

Hero / H1 — Fraunces 300
Le jardin du Luberon a changé.
Fraunces weight 300 · 80-112px desktop / 48px mobile · line-height 1.02 · letter-spacing -0.025em · mots en italic SOFT 100 pour l'emphase
H2 — Fraunces 400
Jardins résilients,
sobres en eau.
Fraunces weight 400 · 48-64px desktop / 34px mobile · line-height 1.1
H3 — Fraunces Italic Soft
Un cyprès de Florence, une stipa gigantea.
Fraunces 400 italic · font-variation "SOFT" 100 · 28-32px · line-height 1.25
Body lead — Inter 300

Depuis octobre 2020, je conçois et j'entretiens des jardins qui tiennent sous la sécheresse. Essences locales, arrosage goutte-à-goutte, massifs mellifères. Le Luberon n'est plus celui des années 1990 — les jardins qu'on plante aujourd'hui ne le sont plus non plus.

Inter weight 300 · 20-22px · line-height 1.55 · max-width 58ch
Body regular — Inter 400

Chaque intervention commence par une visite sur site. On regarde ensemble le sol, l'exposition, l'eau disponible, les arbres présents. Puis je propose un plan — un vrai plan sur papier, pas un croquis sur coin de table.

Inter weight 400 · 16-17px · line-height 1.7 · max-width 65ch
Caption — Fraunces Italic Soft

Restanque à Bonnieux, exposition sud-ouest. Oliviers adultes, lavandes papillon, stipa tenuissima. — Printemps 2024.

Fraunces italic SOFT 100 · 14px · color ink_soft
Eyebrow — Inter 500 UPPERCASE

Nos interventions — 01

Inter weight 500 · 11-12px · uppercase · letter-spacing 0.22em · color accent
03

Espacement & rythme

Une échelle lisible, pas un catalogue. Les sections respirent ; les contenus éditoriaux tiennent sur des colonnes étroites pour la lecture.

TokenValeur desktopValeur mobileUsage
Section vertical normal96px64pxEntre sections standard
Section vertical loose160px96pxSections éditoriales / immersives
Section immersive160-200px96-128pxHero, citations, images pleine largeur
Card padding40-56px32pxCartes services, cartes projet
Container max-width1200px100%Largeur maximale du contenu
Max-width texte lead58ch100%Body lead, introductions
Max-width texte body65ch100%Paragraphes longs
04

Radii & ombres

Angles presque nets (2px ou 6px) — le site repose sur les photographies et la typographie, pas sur la rondeur. Ombres chaudes teintées ink, jamais gris neutre.

TokenValeurUsage
Radius none0Images, sections pleine largeur
Radius sm2pxInputs, éléments UI fins
Radius md6pxBoutons, cartes — signature principale
Radius full9999pxBadges, puces circulaires rares
Shadow SM
cartes au repos
Shadow MD
hover cartes
Shadow LG
flottants, hero
05

Boutons & actions

Trois hiérarchies claires : primary (action principale de page), accent (CTA unique du hero), secondary (action de support), ghost (lien inline éditorial).

Primary accent : à utiliser une seule fois par page, idéalement en CTA du hero. Toutes les autres actions restent sur primary 500 neutre pour préserver la hiérarchie visuelle.

06

Cartes & composants

Hover : translateY(-6px) + passage shadow sm → lg en 500ms easing organique. Pas de scale, l'image de la carte ne doit pas « sauter ».

Création paysagère

Une visite, un plan de masse, des essences méditerranéennes choisies pour votre sol. Survolez pour voir le hover.

Élagage & abattage

Taille sanitaire, démontage sécurisé, dessouchage complet. Expertise arboricole certifiée.

Débroussaillage pare-feu

Conformité à l'arrêté préfectoral Vaucluse : 50 m autour des constructions.

07

Icônes

Lucide, stroke-width 1.25 — élégant, pas affirmé. Sélection curée pour le métier : essences, services, outils, localisation.

leaf
trees
droplet
flame
map-pin
phone
calendar
sun
pen-tool
scissors
08

Animations

Timings longs et organiques (400-1200ms). Le site doit respirer comme un jardin, jamais tech-startup. Hero obligatoirement animé (ken-burns 22s / vidéo boucle / parallax).

TokenValeurEasingUsage
instant120msdefaultFeedback immédiat (actif/focus)
fast240msdefaultHover petit (icône, lien)
default400msdefaultHover carte, bouton
slow800msenterApparitions au scroll
contemplative1200msenterFade-up éditoriaux, reveal-line
ken-burns22sease-in-outBoucle hero, scale 1 → 1.06
hover card
Translate Y (-6px)

500ms cubic-bezier(0.16, 1, 0.3, 1). Passage shadow sm → lg. Jamais de scale.

hover link inline
Soulignement qui se dessine

scaleX(0) → scaleX(1), transform-origin left, 500ms enter easing.

hero obligatoire
Ken-burns 22s OU vidéo OU parallax

Un jardin n'est jamais immobile. Un hero statique est un échec.

09

Photographie

Macro et medium shots sur matière végétale. Lumière rasante début ou fin de journée. Mouvement valorisé.

Toujours

  • Graminées argentées (fétuque, stipa, pennisetum) en contre-jour ou lumière rasante
  • Textures végétales denses et vivantes (massifs en couches)
  • Lumière rasante : 7h-9h ou 17h-19h
  • Présence humaine discrète : mains, silhouette, jamais portrait frontal
  • Mouvement visible : flou léger des graminées, feuilles en l'air
  • Couleurs naturelles légèrement désaturées

Jamais

  • Plein soleil à midi écrasant
  • Pelouses vert vif façon golf
  • Plans carte postale Provence (lavande à perte de vue, cigales)
  • Cadre vide sans vivant (maison sans végétal)
  • Humain posé en costume / portrait frontal type CEO
  • Saturation artificielle / HDR / clarity poussé
  • Outils sur fond noir façon catalogue bricolage
10

Voix éditoriale

Vouvoiement. « Je » du dirigeant là où c'est juste. Direct, précis, adulte.

Préférer

  • Nommer l'essence (un cyprès de Florence, une stipa gigantea)
  • Dire le lieu précis (à Bonnieux, sur une restanque sud)
  • Donner des chiffres concrets (50 m réglementaires, 18 essences)
  • Phrase courte qui se tient seule
  • Observation précise plutôt qu'adjectif vague

Éviter

  • « Devis gratuit et rapide » (tic épuisant du site actuel)
  • « Finitions impeccables » (tic vide)
  • « Partenaire de confiance » (corporate vide)
  • Émojis 🌿 dans le corps éditorial
  • « Au cœur du Luberon » / « climat méditerranéen » répété
  • Jardin de rêve / cadre d'exception (clichés)