Direction artistique
La charte appliquée à chaque page du site.
Ce document présente les décisions de design prises pour ORVÉA — palette, typographies, ambiances et règles d'animation. Tout ce qui est visible ici est directement actif sur le site vitrine.
Ambiances
Trois atmosphères, un site.
Le sélecteur ci-dessous pilote l'ambiance globale du site en temps réel. La piste retenue est Origine ; les deux autres sont conservées pour les campagnes et la gamme purifiante.
Maison de soin botanique
La peau, considérée comme un paysage vivant.
Sérum Éclat
Soin concentré — 30 ml
Ivoire chaud et olivier. La piste retenue : lumineuse, végétale, tenue.
Palette
Huit teintes, une identité.
Typographie
Deux familles, une hiérarchie claire.
Cormorant Garamond pour l'émotion, Inter pour la lisibilité. Le curseur permet d'éprouver les proportions à l'échelle souhaitée.
Titres
Cormorant Garamond
La peau, considérée comme un paysage vivant.
Serif haute, graisse 300 à 500, interlignage serré (1,05).
clamp(2.6rem, 6vw, 5.2rem)2.6rem1.8remInterface et texte courant
Inter
Six références, chacune développée sur dix-huit mois.
Sans neutre, graisse 400 et 500, interlignage 1,7 pour le corps.
1rem0.875rem0.8125remSignalétique
Inter — capitales espacées
MAISON DE SOIN BOTANIQUE
Interlettrage 0,28em, taille 11px, réservé aux sur-titres et libellés.
0.6875remPrincipes d'animation
Quatre règles, aucune exception.
Chaque animation visible sur le site obéit à ces contraintes. Cliquez sur « Rejouer » pour rejouer la démonstration.
01
Rien ne bouge sans raison
Une animation signale un changement d’état ou une entrée dans le champ. Jamais de décoration mobile.
La peau, un paysage vivant.
Entrée dans le champ de lecture
02
Courbe unique
Toutes les transitions partagent la même courbe (0.22, 1, 0.36, 1) et durent entre 300 et 700 ms.
Courbe ORVÉA (0.22, 1, 0.36, 1)
Courbe linéaire (référence)
03
Le silence des images
Les photographies entrent par un léger agrandissement, jamais par un glissement latéral.
04
Respect du réglage système
Le média prefers-reduced-motion coupe toutes les animations pour les personnes qui le demandent.
Quand l'utilisateur active « Réduire les animations » dans son système, toutes les transitions passent à durée nulle. L'interrupteur ci-dessous simule cet état sur les trois démos de cette section.
Grille et rythme
Structure sous-jacente.
Règles de mise en page
Rythme vertical
96 px mobile
160 px desktop
Section
Section suivante
Iconographie et photographie
La matière avant tout.
Cinq contraintes éditoriales appliquées à chaque visuel. Cliquer sur une image pour l'agrandir.
- Lumière naturelle ou diffuse — aucun flash frontal.
- Fonds ivoire ou travertin — cohérence avec la palette de la maison.
- Ombres de feuillage autorisées comme seule touche organique.
- Zéro texte incrusté dans les photographies.
- Mise au point toujours nette sur la matière du produit.