Style Énergie

Style Énergie

Le site doit courir plus vite que le lecteur. Bouger, pulser, exploser, sans jamais perdre le bouton d'action.

Quand l'utiliser

• Salles de sport, apps fitness, esport, festivals, concerts, drops de sneakers ou streetwear, marques jeunes.
• Évite-le pour la santé, la finance, le juridique ou une audience senior : trop de stimulation, pas assez de confiance.

Palette

• Fond : near-black #0a0a0a par défaut. Variante claire : blanc éclatant #fafafa avec texte #171717.
• Texte : #fafafa (19:1). Secondaire : #a3a3a3 (7.9:1).
• Vifs : jaune fluo #fef08a (17:1 sur noir), orange feu #fb923c (8.8:1), rose électrique #f472b6 (7.5:1), cyan #22d3ee (11:1). Tous passent AA en texte sur le fond sombre.
• Sur fond vif, le texte est toujours #0a0a0a, jamais blanc.
• Gradient signature : linear-gradient(135deg, #22d3ee, #f472b6) sur bordures, fills de CTA et soulignements.
• Au moins 3 couleurs vives par écran, mais une seule domine le CTA.
• Sur fond blanc, les vifs deviennent des aplats de fond, pas du texte (contraste insuffisant).

Typographie

• Display : Unbounded, Archivo Black ou Bricolage Grotesque (Google Fonts). Neue Machina ou PP Neue Montreal si licence.
• Body : Inter ou Archivo 16px, 500 à 600 pour garder du punch.
• Échelle : H1 clamp(3.5rem, 10vw, 9rem)/0.9 (800 à 900, uppercase, letter-spacing -0.03em), H2 56px/1 (800), H3 24px/1.2 (700), body 16px/1.5, label 12px (700, uppercase, 0.12em).
• Mots clés en italique ou en -webkit-text-stroke: 2px sans fill, un seul par titre.

Layout & grille

• Grille 12 colonnes, max-width 1440px, marges 20px mobile et 40px desktop.
• Sections en diagonale : transform: skewY(-3deg) sur le conteneur, contenu redressé avec skewY(3deg).
• Cards qui se chevauchent (marges négatives de -24 à -48px), rotation de -2 à 3deg.
• Photos recadrées serrées, angle marqué, découpes en clip-path: polygon().
• Formes géométriques flottantes en fond (cercles, triangles), pointer-events: none.
• Breakpoints : 640, 1024, 1440px. Sous 640px, supprime le chevauchement et garde une seule diagonale.

Composants signature

• CTA : radius 999px, hauteur 56 à 64px, texte 18px 800 uppercase, fond gradient, effet press scale(0.96) au clic.
• Marquee : bandeau pleine largeur, texte 32 à 48px uppercase, séparateurs étoile ou éclair.
• Card événement : date XXL en jaune fluo, titre, lieu, bouton "Réserver", bordure gradient 2px.
• Compte à rebours en chiffres display tabular.
• Leaderboard ou stats : chiffres 64px, barres colorées.

Motion

• Entrées : scale de 0.6 à 1 avec bounce, 400 à 500ms, cubic-bezier(0.34, 1.56, 0.64, 1), stagger 60ms.
• Hover : scale(1.05) rotate(2deg) + décalage de gradient, 200ms.
• Marquee : défilement linéaire 20 à 30s en boucle, pause au hover.
• Gradients de fond animés en boucle de 8 à 12s.
• Toujours quelque chose qui bouge dans le champ, mais jamais le texte courant ni les champs de formulaire.
• prefers-reduced-motion : arrête marquees, boucles et bounces, garde les couleurs.

Tokens CSS

:root {
  --bg: #0a0a0a;
  --text: #fafafa;
  --muted: #a3a3a3;
  --yellow: #fef08a;
  --orange: #fb923c;
  --pink: #f472b6;
  --cyan: #22d3ee;
  --gradient: linear-gradient(135deg, #22d3ee, #f472b6);
  --radius-pill: 999px;
  --font-display: Unbounded, "Archivo Black", sans-serif;
  --font-body: Inter, Archivo, system-ui, sans-serif;
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --skew: -3deg;
}

Checklist avant livraison

• Le CTA principal reste visible et lisible malgré l'animation.
• Texte sur fond vif en #0a0a0a, jamais blanc.
• prefers-reduced-motion coupe toutes les boucles.
• Pas de scroll horizontal parasite causé par les skews et rotations (overflow-x: clip).
• 60 fps : n'anime que transform et opacity.
• Aucun clignotement au-delà de 3 fois par seconde.

À éviter

• Couleurs ternes ou pastels, sections totalement statiques.
• Texte courant en uppercase sur plusieurs lignes.
• Animer width, top ou box-shadow (saccades).
• Plus d'un marquee visible en même temps.
• Texte vif sur fond blanc.

Prompts de démarrage

• "Crée la landing d'un festival électro en style-energie avec line-up, compte à rebours et billetterie."
• "Conçois la page d'une salle de sport avec planning des cours, coachs et offre d'essai gratuite."
• "Fais le site d'une équipe esport avec roster, résultats et marquee de sponsors."
• "Crée la page de lancement d'une paire de sneakers en édition limitée avec drop timer."