Style Marketing

Style Marketing

Un objectif : le clic. Chaque section justifie le scroll suivant et ramène vers le même bouton.

Quand l'utiliser

• Landing pages, lancements, pages de vente, leads, listes d'attente, pricing, webinaires, campagnes payantes.
• Évite-le pour un site institutionnel, une documentation ou un espace client : la pression commerciale y devient pénible.

Palette

• Fond : blanc #ffffff ou ivoire #fffdf7, sections alternées #f8fafc.
• Texte : slate #0f172a (17.6:1 sur ivoire). Secondaire : #475569 (7.6:1).
• Accent CTA unique, au choix : violet #7c3aed (5.7:1, texte blanc OK), vert #059669 (texte blanc 3.8:1, donc bouton en 18px bold minimum) ou orange #f97316 (texte blanc 2.8:1, insuffisant : mets le texte en #0f172a, 6.4:1, ou fonce en #c2410c).
• L'accent sert uniquement aux CTA, mots de bénéfice et coches de pricing. Étoiles d'avis : #f59e0b.

Typographie

• Display : Inter Tight ou Outfit (Google Fonts) en 800. Söhne Halbfett si licence.
• Body : Inter 17 à 18px, line-height 1.6, mesure 60 caractères.
• Échelle : H1 clamp(2.5rem, 6vw, 5rem)/1.05 (800, letter-spacing -0.03em), H2 clamp(2rem, 4vw, 3.25rem)/1.1 (800), H3 22px/1.3 (700), lead 20px/1.5, body 18px/1.6, micro-copy 14px.
• Surligne un mot de bénéfice par titre (couleur accent ou fond marqueur).

Layout & grille

• Grille 12 colonnes, max-width 1160px, marges 20px mobile et 48px desktop.
• Sections de 96 à 128px desktop, 64px mobile. Rythme 8px.
• Hero en 2 colonnes (texte à gauche, visuel produit à droite) desktop, empilé sur mobile avec CTA avant le visuel.
• Structure canonique :

1. Hero : titre bénéfice, sous-titre clarifiant, CTA primaire, preuve sociale (logos ou note étoilée).
2. Problème : la friction du lecteur en 1 à 2 phrases.
3. Solution : 3 bénéfices (jamais des features), icône, phrase, micro-copy.
4. Preuve : témoignages avec photo, poste, entreprise, chiffres clés, logos.
5. Comment ça marche : 3 à 4 étapes numérotées.
6. Objections : FAQ ciblée sur les résistances connues.
7. CTA final : même bénéfice qu'en hero, formulation différente.

Composants signature

• CTA primaire : hauteur 56px, padding 0 32px, radius 12px, texte 18px 700, micro-copy dessous ("Sans carte bancaire, 2 min").
• CTA secondaire : ghost, bordure 1.5px slate-300.
• Badges "Nouveau", "Populaire", "Limité" : pill 12px 700 uppercase.
• Carte pricing : plan recommandé surélevé, bordure accent 2px, badge "Populaire", prix en 48px.
• Témoignage : citation 20px, photo 56px, note étoilée, résultat chiffré en gras.
• Sticky bar bas : apparaît après 600px de scroll, masquée sur le CTA final.
• Compte à rebours : seulement si l'échéance est réelle.

Motion

• Hover CTA : translateY(-2px) + ombre plus large, 150ms, cubic-bezier(0.2, 0.8, 0.2, 1).
• Reveals au scroll : fade + 16px, 300ms, stagger 80ms, une seule fois.
• Sticky bar : slide-up 250ms.
• Interdit : animations qui retardent l'apparition du CTA hero, popups au chargement, carrousels auto de témoignages.

Tokens CSS

:root {
  --bg: #ffffff;
  --bg-alt: #f8fafc;
  --ivory: #fffdf7;
  --text: #0f172a;
  --muted: #475569;
  --accent: #7c3aed;
  --accent-soft: rgba(124, 58, 237, 0.1);
  --on-accent: #ffffff;
  --star: #f59e0b;
  --radius-cta: 12px;
  --font-display: "Inter Tight", Outfit, system-ui, sans-serif;
  --font-body: Inter, system-ui, sans-serif;
  --lift: cubic-bezier(0.2, 0.8, 0.2, 1);
}

Checklist avant livraison

• Le bénéfice et le CTA sont visibles sans scroll sur mobile 375px.
• Un seul CTA primaire par écran, même libellé partout.
• Chaque témoignage a nom, poste et photo réels.
• Le texte du bouton accent passe AA.
• LCP sous 2.5s, visuel hero optimisé.
• Titres, CTA et ordre des bénéfices faciles à varier pour un A/B test.

À éviter

• Parler de features au lieu de bénéfices.
• Plusieurs couleurs de CTA, ou l'accent utilisé pour de la déco.
• Faux compteurs, fausse rareté, faux avis.
• Jargon interne, phrases de plus de 20 mots dans le hero.
• Formulaire de 8 champs pour une simple inscription.

Prompts de démarrage

• "Crée la landing d'une app de facturation pour freelances en style-marketing, structure canonique complète."
• "Conçois une page de liste d'attente pour un lancement produit avec compteur d'inscrits et parrainage."
• "Fais une page pricing à trois plans avec plan recommandé, FAQ d'objections et garantie."
• "Réécris ce hero pour qu'il parle bénéfice, et propose trois variantes de titre à tester."