Style Luxueux

Style Luxueux

Le luxe, c'est ce qu'on enlève. Tout ce qui reste doit être choisi.

Quand l'utiliser

• Joaillerie, horlogerie, hôtels, maisons de champagne, parfums, ateliers, immobilier de prestige, restaurants gastronomiques.
• Évite-le pour les produits grand public à prix bas, le discount, les apps utilitaires ou tout ce qui exige beaucoup d'information par écran.

Palette

• --bg : noir profond #0a0806 ou blanc cassé #f5f2ea.
• --surface : #14110d sur noir, #ece7db sur blanc.
• --text : crème #e8dfc9 sur noir, #1a1a1a sur blanc.
• --muted : #9a917f sur noir, #6b655a sur blanc (4.5:1 minimum dans les deux cas).
• --gold : #c9a961 mat, --gold-bright : #e5c98a. Uniquement pour traits, chiffres, petits logos. Environ 9:1 sur noir, mais seulement 2:1 sur blanc cassé : sur fond clair, l'or reste décoratif et le texte utilise #8a7340.
• --wine : bordeaux #5c1a1a, second accent chaud optionnel.
• États : focus outline 1px --gold offset 4px, erreur #9e3b2c en texte discret, jamais de rouge vif.

Typographie

• Display : didone à contrastes extrêmes, Bodoni Moda ou Playfair Display (Google Fonts), Didot ou GT Super si licence. Tracking 0. Fallback "Bodoni 72", Didot, Georgia, serif.
• Body : EB Garamond ou Cormorant Garamond. Fallback Garamond, Georgia, serif.
• Kicker : Jost ou Montserrat 500, small-caps ou uppercase, 11 à 12 px, letter-spacing 0.3em, couleur or.
• Hero : clamp(3rem, 7vw, 6.5rem), weight 400, line-height 1.
• H2 : 44 px, weight 400, line-height 1.1. H3 : 24 px italique.
• Body : 16 à 17 px (18 px avec Cormorant, plus petit oeil), line-height 1.7, mesure 60 caractères.
• Chiffres (prix, millésimes) en chiffres elzéviriens, couleur or sur fond noir.

Layout & grille

• Marges latérales de 12 à 15 % du viewport en desktop, 24 px en mobile.
• Grille 12 colonnes, contenu souvent centré sur 6 colonnes.
• Une seule idée par écran : sections de min-height: 90vh, 160 à 240 px entre sections.
• Images plein cadre, ratio 4:5 ou 1:1, jamais recadrées serrées.
• Breakpoints 768 et 1280 px. Le mobile garde la même lenteur, pas plus d'éléments par écran.

Composants signature

• Nav : logo centré, 2 à 3 liens de chaque côté en kicker, 80 px de haut, fond transparent puis filet or 1px au scroll.
• Hero : une image ou vidéo lente plein cadre, titre didone, un seul CTA.
• Bouton : outline 1px --gold, radius 0, padding 16px 40px, kicker uppercase, aucune ombre. Survol : letter-spacing +2px.
• Fiche produit : image 4:5 sur fond neutre, nom en display 20 px, prix en petites capitales. Aucun badge promo.
• Séparateur : filet or 1px de 64 px de large, centré.
• Formulaires : champs soulignés d'un seul filet 1px, labels en kicker.

Motion

• Fades lents de 600 à 900 ms, easing cubic-bezier(0.16, 1, 0.3, 1).
• Reveal d'image : scale de 1.05 à 1 sur 1200 ms, stagger de 150 ms entre éléments.
• Survol : opacité 0.7 ou letter-spacing +2px en 400 ms, rien de plus.
• Interdit : bounce, spring, parallax rapide, carrousel automatique de moins de 6 s.

Tokens CSS

:root {
  --bg: #0a0806;
  --surface: #14110d;
  --text: #e8dfc9;
  --muted: #9a917f;
  --gold: #c9a961;
  --gold-bright: #e5c98a;
  --wine: #5c1a1a;
  --font-display: "Bodoni Moda", Didot, Georgia, serif;
  --font-body: "EB Garamond", Garamond, serif;
  --font-kicker: "Jost", sans-serif;
  --ease-lux: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-slow: 800ms;
}

Checklist avant livraison

• Or présent sur moins de 5 % de la surface de chaque écran.
• Zéro ombre visible sur les CTA.
• Une idée et un CTA par écran.
• Deux familles de police au maximum, plus le kicker.
• Photos en haute définition, sans banque d'images reconnaissable.

À éviter

• Or en aplat, en gradient brillant ou en text-shadow.
• Icônes décoratives à côté du corps de texte.
• Badges "-30 %", compteurs d'urgence, pop-ups newsletter immédiates.
• Texte en capitales grasses : le luxe chuchote.

Prompts de démarrage

• "Crée la home d'une maison de joaillerie en style luxueux : fond noir, hero plein cadre 4:5, accents or mat."
• "Refais la page chambres de mon hôtel, une chambre par écran, fades lents et un seul bouton réserver."
• "Fais une fiche produit champagne sur blanc cassé avec titre didone et millésime en or."
• "Épure mon site d'atelier : supprime tout ce qui n'est pas essentiel et applique le style luxueux."