Style Impact

Style Impact

Chaque écran est une pancarte. Ton lecteur doit agir en sortant, pas seulement être d'accord.

Quand l'utiliser

• ONG, associations, plaidoyer, pétitions, manifestes, syndicats, collectes de dons, campagnes politiques.
• Évite ce style pour du e-commerce, du SaaS ou toute marque qui a besoin de nuance : la brutalité visuelle écrase le détail.

Palette

• Fond sombre : noir mat #0a0a0a. Fond clair : blanc craie #f5f5f0. Alterne les deux par blocs pleins.
• Texte : #f5f5f0 sur noir (18:1), #0a0a0a sur craie. Secondaire : #a3a3a3 sur noir (7.9:1), #525252 sur craie (7.1:1).
• Accent unique, au choix : rouge activisme #ef2b2b ou orange feu #ff5722. Jamais les deux.
• Sur noir, #ef2b2b fait 4.8:1 (OK pour titres et mots-clés), #ff5722 fait 6.3:1.
• Sur craie, #ef2b2b fait 3.8:1 : réserve-le aux titres de 24px et plus. Pour du texte courant accentué, fonce à #c81e1e (5.3:1).
• Bouton accent : texte #0a0a0a sur #ef2b2b (4.8:1) plutôt que blanc (4.2:1).
• L'accent marque tous les mots-clés forts et rien d'autre.

Typographie

• Display : Anton, Oswald, Barlow Condensed (800) ou Alfa Slab One, tous sur Google Fonts. Uppercase systématique.
• Body : Inter ou Work Sans, 18 à 20px, line-height 1.4, 400 à 500.
• Échelle : H1 home clamp(4rem, 18vw, 20rem)/0.85, H1 interne clamp(3rem, 10vw, 8rem)/0.9, H2 64px/0.95, stat 120 à 200px/0.9, kicker 14px (700, uppercase, 0.1em), body 19px/1.4.
• Letter-spacing des titres : -0.01em à 0. Chiffres en tabular-nums.

Layout & grille

• Titres qui occupent toute la largeur (100vw) et 50 à 70vh de hauteur.
• Blocs pleins alternés noir, craie, accent. Pas de cards, pas d'ombres, radius 0.
• Un chiffre clé par écran, seul, avec une ligne de contexte et la source.
• Photos documentaires en noir et blanc ou en duotone accent (mix-blend-mode: multiply sur fond accent), cadrées plein bord.
• Colonne de texte 640px max pour le body.
• Breakpoints : 640, 1024, 1440px. Sur mobile, les titres restent énormes et coupent sur plusieurs lignes, c'est voulu.

Composants signature

• Barre CTA persistante : bas d'écran sur mobile, header sticky sur desktop, un seul verbe ("Signer", "Donner", "Agir"), fond accent.
• Bouton : radius 0, hauteur 64px, texte 18px uppercase 800, bordure 3px en version secondaire.
• Compteur de signatures en direct avec barre de progression vers l'objectif.
• Formulaire de pétition inline : prénom, email, code postal, bouton. Rien d'autre.
• Timeline verticale des actions avec dates en display et trait accent 4px.
• Citation XXL uppercase avec nom et fonction en kicker.

Motion

• Slam au reveal : scale 1.1 à 1 et opacity 0 à 1, 200ms, cubic-bezier(0.2, 0.9, 0.1, 1).
• Compteurs qui montent au scroll, 1.2 à 1.8s, une seule fois.
• Soulignement accent qui se trace sous les mots-clés, 300ms.
• Interdit : bounce, rotations, parallax doux, tout ce qui adoucit le message.
• prefers-reduced-motion : affiche directement les valeurs finales.

Tokens CSS

:root {
  --black: #0a0a0a;
  --chalk: #f5f5f0;
  --accent: #ef2b2b;
  --accent-text: #c81e1e;
  --muted-dark: #a3a3a3;
  --muted-light: #525252;
  --font-display: Anton, Oswald, "Barlow Condensed", Impact, sans-serif;
  --font-body: Inter, "Work Sans", system-ui, sans-serif;
  --radius: 0;
  --slam: cubic-bezier(0.2, 0.9, 0.1, 1);
  --slam-duration: 200ms;
}

Checklist avant livraison

• Un seul verbe d'action par écran, le même dans la barre CTA.
• Chaque statistique a une source visible.
• Le CTA est accessible sans scroller sur mobile.
• Le formulaire tient en 3 champs maximum et confirme l'action immédiatement.
• Contraste de l'accent vérifié selon le fond et la taille.
• Les titres géants ne créent pas de scroll horizontal.

À éviter

• Deux accents, pastels, gradients.
• Phrases passives, conditionnel, jargon ("il conviendrait de").
• Titres en minuscules ou en graisse légère.
• Photos stock souriantes et mises en scène.
• Plusieurs CTA concurrents sur le même écran.

Prompts de démarrage

• "Crée la page d'une pétition contre la fermeture d'une maternité en style-impact, avec compteur et formulaire inline."
• "Conçois le manifeste d'un collectif climat en 7 écrans, un chiffre clé par écran."
• "Fais la landing de collecte de dons d'une ONG avec montants suggérés et impact concret de chaque montant."
• "Crée une page de mobilisation pour une manifestation : date, lieu, parcours, bouton Je viens."