Style Maximaliste

Style Maximaliste

Plus, c'est plus. Chaque zone raconte quelque chose, la composition émerge du bruit.

Quand l'utiliser

• Mode, streetwear, labels de musique, festivals, restaurants et bars, marques Gen Z, lieux culturels, merch.
• Évite-le pour la banque, la santé, le B2B sérieux et les outils de travail quotidiens.

Palette

• 5 à 7 couleurs saturées qui coexistent : hot pink #ff2e93, electric blue #2b50ff, acid yellow #e6ff00, deep purple #3b0a6b, soft mint #a8f0d1, vermillion #ff4122.
• --ink : encre violette très sombre #22112e à la place du noir. Aucun gris : chaque neutre est une couleur désaturée (hsl(280, 20%, 20%)).
• --bg : change à chaque section, parmi les couleurs ci-dessus ou crème #fff4e0.
• Couples lisibles : --ink sur yellow, pink, mint ou vermillion. Blanc sur electric blue (environ 5.7:1) ou deep purple. Jamais de blanc sur pink ou yellow.
• Motifs (grid, dots, wavy lines) à 15 à 25 % d'opacité par-dessus les blocs.
• États : focus outline 3px --ink plus offset 3px, erreur fond vermillion texte --ink, succès fond mint.

Typographie

• 3 familles minimum. Display expressif : Chubbo (Fontshare) ou PP Editorial New, alternatives Google : Bricolage Grotesque, Shrikhand, Syne.
• Sans neutre pour le texte : Inter. Serif contrasté : Fraunces italique.
• Mega titre : clamp(4rem, 14vw, 12.5rem), line-height 0.85, letter-spacing -0.03em.
• H2 : 56 à 72 px, H3 : 28 px Fraunces italique.
• Body : Inter 17 px, line-height 1.5, max-width: 60ch. Notes et légendes : 11 à 12 px uppercase.
• Tailles qui se contredisent : titre 96 px juste à côté d'une note 11 px.
• Mélange casse, italique, souligné, barré : tout est permis si c'est intentionnel.

Layout & grille

• Grille 12 colonnes cassée : spans inégaux (5, 3, 4), éléments qui débordent de 24 à 64 px.
• Superpositions via grid-area partagée ou marges négatives, z-index pensés.
• Rotations de -3° à +5° sur badges, citations, images.
• Border-radius mixtes : 0, 24 px et asymétrique (32px 0 32px 8px) sur la même page.
• Densité haute, mais un point de repos (bloc calme, une couleur, du texte) toutes les 3 à 4 sections.
• Breakpoints 768 et 1200 px. Sur mobile, rotations limitées à ±2° et chevauchements réduits.

Composants signature

• Hero collage : mega titre, images détourées, stickers, fond à motif, tout superposé.
• Bouton : fond couleur, bordure 3px --ink, radius variable, ombre dure 6px 6px 0 var(--ink). Survol : translate(-2px, -2px) et ombre 8px.
• Carte : chaque carte a sa propre couleur et son motif, légère rotation, bordure 3px --ink.
• Sticker rond : texte sur cercle SVG qui tourne, posé à cheval sur deux blocs.
• Bande marquee : texte display uppercase qui défile, fond contrasté.
• Nav : liens en pastilles de couleurs différentes.

Motion

• Motion permanente en fond : blob qui morph en 10 à 20 s, gradient qui glisse en 15 s, marquee en 20 à 30 s linear.
• Survols en 200 à 300 ms avec rebond : cubic-bezier(0.34, 1.56, 0.64, 1).
• Deux animations infinies au maximum dans le même viewport.
• Jamais d'animation sur les paragraphes de texte. Sous prefers-reduced-motion, toutes les boucles s'arrêtent.

Tokens CSS

:root {
  --pink: #ff2e93;
  --blue: #2b50ff;
  --yellow: #e6ff00;
  --purple: #3b0a6b;
  --mint: #a8f0d1;
  --vermillion: #ff4122;
  --ink: #22112e;
  --cream: #fff4e0;
  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-serif: "Fraunces", Georgia, serif;
  --shadow-hard: 6px 6px 0 var(--ink);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

Checklist avant livraison

• Au moins 5 couleurs et 3 familles, sans aucun gris neutre.
• Tout texte courant passe 4.5:1 sur son fond.
• Un point de repos toutes les 3 à 4 sections.
• Rien de cliquable caché sous une superposition.
• Version mobile lisible et boucles coupées en reduced motion.

À éviter

• Le chaos sans intention : chaque élément doit avoir sa raison d'être.
• Revenir au noir et au gris "pour calmer" : utilise un bloc de couleur unie.
• Une seule police : ce n'est plus maximaliste, c'est juste coloré.

Prompts de démarrage

• "Crée une landing maximaliste pour une marque de streetwear : hero collage, stickers rotatifs, bande marquee."
• "Fais le site d'un bar à cocktails en style maximaliste, une couleur de fond par section et menu en cartes rotées."
• "Refais la page line-up de mon festival, 3 polices qui s'affrontent, motifs dots et wavy en fond."