Style Rétro-Futuriste

Style Rétro-Futuriste

Un néon dans la nuit électrique. Chaque écran est une pochette d'album synthwave.

Quand l'utiliser

• Musique, festivals, soirées, jeux vidéo, esport, lancements produit spectaculaires, pages événementielles.
• Évite-le pour la santé, la finance, le juridique ou tout contenu long à lire : le néon fatigue vite.

Palette

• --bg : gradient vertical #0a0221 (deep space) vers #1a0640 (deep purple). Jamais de noir pur.
• --surface : #1a0640 à 60 % d'opacité, bordure néon à 30 %.
• --text : #f5f3ff. --muted : #a5a1c2 (environ 7:1 sur le fond).
• --neon principal : cyan #22d3ee (environ 11:1) ou magenta #ec4899 (environ 5:1). Choisis-en un par écran.
• --neon-2 secondaire : jaune-lime #fef08a, pour badges et détails.
• Chrome titres : gradient #c0c0c0, #f5f5f5, #8a8a8a avec background-clip: text.
• États : succès #4ade80, erreur #f43f5e, focus outline 2px --neon plus glow.

Typographie

• Display : Anton, Bebas Neue (Google Fonts), letter-spacing 0.05em. Fallback Impact, sans-serif.
• Monoton uniquement pour un logo ou un mot isolé de plus de 64 px.
• Body : Space Grotesk. Labels et data : JetBrains Mono. Fallback ui-monospace, monospace.
• Hero : clamp(4rem, 12vw, 10rem), uppercase, line-height 0.9, chrome ou outline néon.
• H2 : 48 px Bebas Neue, line-height 1. H3 : 24 px Space Grotesk 600.
• Body : 17 px, line-height 1.6, max-width: 60ch.
• Label : JetBrains Mono 12 px uppercase, letter-spacing 0.2em, en --neon-2.
• Glow titre : text-shadow: 0 0 8px var(--neon), 0 0 24px var(--neon).

Layout & grille

• Grille 12 colonnes, max-width: 1200px, gouttières 24 px, base d'espacement 8 px.
• Hero en 100vh, horizon placé à 60 % de la hauteur : soleil au-dessus, grille au sol en dessous.
• Sections séparées de 120 px, densité moyenne, beaucoup de noir violet pour laisser briller le néon.
• Breakpoints 640 et 1024 px. Sur mobile, grille de perspective simplifiée et glow réduit de moitié.

Composants signature

• Grille au sol : lignes cyan en linear-gradient, transform: perspective(400px) rotateX(60deg), fuite vers un point central.
• Soleil : radial-gradient(circle at 50% 100%, #ec4899, transparent 40%) rayé de bandes horizontales.
• Scanlines : repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,0.02) 2px 4px) sur body::after, pointer-events: none.
• Bouton : fond transparent, bordure 2px --neon, mono uppercase, box-shadow: 0 0 12px var(--neon). Survol : fond --neon, texte #0a0221.
• Carte : --surface, radius 4 px, bordure 1px néon à 30 %. Survol : bordure pleine et glow.
• Nav : fixe, backdrop-filter: blur(8px), liens mono uppercase, actif souligné 2px néon.
• Aberration chromatique au survol des titres : text-shadow: 2px 0 #ff0040, -2px 0 #22d3ee.

Motion

• Glitch bref au chargement : 300 à 400 ms en steps(3), une seule fois.
• Glow qui pulse en 2 à 3 s, ease-in-out, infini, sur un seul élément par écran.
• Grille au sol qui défile vers le spectateur : translateY en boucle de 4 s linear.
• Survols en 150 ms. Jamais de flash de plus de 3 fois par seconde. Sous prefers-reduced-motion, grille et pulse s'arrêtent.

Tokens CSS

:root {
  --bg: #0a0221;
  --bg-2: #1a0640;
  --text: #f5f3ff;
  --muted: #a5a1c2;
  --neon: #22d3ee;
  --neon-alt: #ec4899;
  --neon-2: #fef08a;
  --chrome: linear-gradient(180deg, #c0c0c0, #f5f5f5 50%, #8a8a8a);
  --font-display: "Anton", Impact, sans-serif;
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --glow: 0 0 8px var(--neon), 0 0 24px var(--neon);
}

Checklist avant livraison

• Fond sombre saturé partout, aucun #000.
• Un seul néon dominant par écran, l'autre en accent.
• Body sans glow, contraste vérifié à 4.5:1 minimum.
• Scanlines et grille ne bloquent aucun clic.
• prefers-reduced-motion testé.

À éviter

• Cyan et magenta à parts égales : l'écran devient un sapin de Noël.
• Glow ou chrome sur les paragraphes.
• Monoton ou Anton en texte courant.
• Photos naturelles non retouchées : passe-les en duotone violet et cyan.

Prompts de démarrage

• "Crée une landing synthwave pour un festival : hero avec soleil, grille au sol animée et titre chrome."
• "Refais la page de mon jeu indé en style rétro-futuriste, néon cyan dominant, cartes de personnages avec glow."
• "Ajoute des scanlines VHS et un glitch au chargement à mon site, sans gêner la lecture."