Style Organique

Style Organique

Rien ne coupe. Tout arrondit, respire, ondule.

Quand l'utiliser

• Bien-être, yoga, cosmétique naturelle, alimentation, boulangerie, café, céramique, artisanat, jardinage, parentalité.
• Évite-le pour la tech B2B, la finance, les outils de données ou les marques qui veulent paraître froides et précises.

Palette

• --bg : crème #f5efe1. --surface : sable #e9dcc3.
• --text : brun profond #3d2b1f, jamais du noir pur (environ 12:1 sur crème).
• --muted : #6b5646 (environ 6:1 sur crème).
• --terracotta #c98860 et --moss #7a8971 : fonds de blocs, blobs et grands titres uniquement (3:1 au mieux sur crème).
• --accent : rouille #a83c1e (environ 5.5:1 sur crème, OK pour boutons et liens) ou moutarde #d4a537 en décoratif.
• États : focus outline 2px rouille, offset 3px, arrondi. Succès mousse foncée #4f5e48, erreur rouille avec message clair.

Typographie

• Display : Fraunces (Google Fonts, axe SOFT à 100) ou Playfair Display, Recoleta si licence. Fallback Georgia, serif.
• Body : Inter ou Poppins (Google Fonts), Söhne si licence. Fallback system-ui, sans-serif.
• Manuscrite : Caveat ou Kalam, pour signatures, annotations et citations courtes seulement.
• Hero : clamp(2.75rem, 7vw, 5.5rem), weight 500, line-height 1.05.
• H2 : 40 px, line-height 1.15. H3 : 24 px, weight 500.
• Body : 17 à 18 px, line-height 1.65, max-width: 62ch.
• Annotation : Caveat 24 à 28 px, rotation -2°, en rouille.

Layout & grille

• Grille 12 colonnes, max-width: 1200px, gouttières 32 px, base d'espacement 8 px.
• Sections espacées de 96 à 144 px, séparées par des vagues SVG plutôt que des lignes droites.
• Densité aérée : 2 ou 3 éléments par rangée au maximum.
• Breakpoints 640 et 1024 px. Sur mobile, blobs plus petits et moins de masques pour garder de la légèreté.

Composants signature

• Formes : blobs SVG en arrière-plan des sections, radius asymétriques border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%.
• Bouton : pill border-radius: 999px, padding 14px 28px, fond rouille, texte crème. Survol : scale 1.03 et ombre 0 8px 24px rgb(61 43 31 / 0.12).
• Carte : fond sable, radius 32 px ou asymétrique, ombre chaude très douce, image en haut masquée en blob.
• Images : masque organique via clip-path ou mask-image SVG, photos chaudes et lumière naturelle.
• Nav : pill flottante, fond crème à 90 % avec backdrop-filter: blur(8px), liens arrondis.
• Hero : photo masquée en blob, blob terracotta derrière, annotation manuscrite avec flèche tracée main levée.
• Champs : radius 16 px, bordure 1.5px sable foncé, fond crème.
• Séparateurs : traits main levée (paths SVG légèrement irréguliers).

Motion

• Blobs qui morph doucement (SMIL ou GSAP) en 8 à 12 s par cycle, ease-in-out.
• Micro-rotation continue de -2° à +2° sur les badges décoratifs.
• Fade et slide de 16 px en 400 ms au scroll, easing cubic-bezier(0.25, 0.8, 0.25, 1).
• Survols en 250 ms. Jamais de mouvement sec, linear ou glitch. Sous prefers-reduced-motion, les blobs s'immobilisent.

Tokens CSS

:root {
  --bg: #f5efe1;
  --surface: #e9dcc3;
  --text: #3d2b1f;
  --muted: #6b5646;
  --terracotta: #c98860;
  --moss: #7a8971;
  --accent: #a83c1e;
  --mustard: #d4a537;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-hand: "Caveat", cursive;
  --radius-blob: 40% 60% 55% 45% / 45% 40% 60% 55%;
  --ease-soft: cubic-bezier(0.25, 0.8, 0.25, 1);
}

Checklist avant livraison

• Aucune ligne droite dominante, même les séparateurs ondulent.
• Tous les boutons en pill, aucun coin carré.
• Texte en brun #3d2b1f, jamais #000.
• Terracotta et mousse jamais utilisés pour du petit texte.
• Photos chaudes, sans dominante bleue.

À éviter

• Grilles rigides façon dashboard et cartes toutes identiques.
• Photos froides bleu-tech ou visuels 3D brillants.
• Manuscrite en paragraphe entier : illisible.
• Ombres grises et dures : préfère une ombre brune très diffuse.

Prompts de démarrage

• "Crée la landing d'une marque de cosmétiques naturels en style organique : blobs, photos masquées, boutons pill."
• "Refais le site de ma boulangerie avec une palette terracotta, sable et mousse, et des séparateurs en vagues."
• "Fais une page de réservation de cours de yoga douce et chaleureuse, avec annotations en Caveat."
• "Transforme mes cartes produits carrées en cartes organiques avec radius asymétriques."