Premium Design — Kinetic Luxe

---

name: premium-design description: Crée des interfaces web premium, de qualité éditoriale, pour les marques haut de gamme, les produits de luxe, les SaaS au design soigné et les portfolios créatifs. À DÉCLENCHER lorsque l'utilisateur souhaite un site web éditorial, luxueux, haut de gamme, premium, d'agence créative, de magazine ou de marque de mode. Déclencheurs explicites : 'premium design', 'luxe', 'editorial', 'high end', 'atelier', 'make it premium', 'make it luxe', 'fashion brand', 'creative agency site', 'portfolio site'. Utilisez cette compétence plutôt que la compétence design générale lorsque la cible esthétique est raffinée / éditoriale / premium plutôt qu'un SaaS standard.

Que fait Premium Design — Kinetic Luxe ?

Une compétence basée sur un catalogue pour créer des interfaces premium, éditoriales et haut de gamme. Distincte de la compétence design générale : celle-ci est exigeante sur la typographie, le mouvement et la retenue.

---

Philosophie de design — les cinq règles

1. La typographie est le protagoniste

Les polices d'affichage (titres) utilisent une police à empattement ou une police sans empattement distinctive. Les polices de corps utilisent des sans raffinés (Inter, Geist, Satoshi). Les titres sont grands — typiquement text-[clamp(2.5rem,8vw,10rem)]. L'espacement des lettres est resserré pour l'affichage (tracking-tight ou plus serré). L'interlignage est généreux pour l'affichage (leading-[0.9] ou leading-none), plus serré pour le corps (leading-[1.45]).

Associations de polices qui fonctionnent :

• Fraunces (affichage) + Inter (corps) — ambiance magazine éditorial
• Canela (affichage) + Geist (corps) — luxe contemporain
• Migra (affichage) + Manrope (corps) — éditorial incisif
• Reckless (affichage) + Inter (corps) — chaleur éditoriale douce

Les polices sont chargées via <link> dans index.html ou via @import CSS. N'utilisez jamais les polices système pour l'affichage.

2. Le mouvement est intentionnel, jamais décoratif

Pas d'élasticités rebondissantes. Pas de fondus rapides en ease-out-200ms. Le mouvement premium utilise :

• Des durées longues : 800 à 1800 ms pour les révélations
• Des courbes d'atténuation raffinées : cubic-bezier(0.16, 1, 0.3, 1) (easeOutExpo), cubic-bezier(0.22, 1, 0.36, 1) (easeOutQuint), ou des courbes personnalisées
• Piloté par le défilement plutôt que par le chargement de page : utilisez useScroll + useTransform de framer-motion pour que le mouvement soit lié à l'action de l'utilisateur
• Un mouvement signature par section : n'empilez pas 5 animations dans un hero. Choisissez celui qui amplifie le contenu.

Si une animation ne sert pas le contenu, supprimez-la.

3. La profondeur par les calques, pas par les ombres

La profondeur premium est créée en superposant des calques subtils :

• Base : une superposition de texture de bruit (CSS ou SVG)
• Sous le contenu : un dégradé de lavis chaud/froid (très subtil, 5-15% d'opacité)
• Calque intermédiaire : élément décoratif (un grand caractère d'affichage, une photographie délavée, une grille)
• Premier plan : le contenu

Évitez shadow-lg / shadow-2xl — ils donnent un aspect générique. Utilisez plutôt shadow-[0_1px_0_rgba(255,255,255,0.05)] ou des bordures en dégradé.

4. Retenue dans la couleur, confiance dans la composition

La palette est généralement :

• Arrière-plan : un blanc cassé chaud ou froid / un noir cassé (jamais du #000 ou #fff pur). Exemples : #0A0908 (noir chaud), #F7F5F1 (blanc cassé chaud), #0F1117 (noir froid).
• Texte : contraste élevé avec l'arrière-plan, mais adouci. Exemples : #F7F5F1 sur #0A0908, #1A1A1A sur #F7F5F1.
• Accent : UNE couleur, utilisée avec parcimonie. Exemples : #C8522C (terre cuite), #4C3F2F (expresso), #B8A978 (laiton), #D9C2A4 (champagne).

Pas de dégradés arc-en-ciel. Pas d'ambiance teal/violet de start-up tech.

5. La composition brise la grille intentionnellement

Les grilles standard à 3 colonnes semblent génériques. Les mises en page premium utilisent :

• L'asymétrie : 2 colonnes où une colonne fait 2x l'autre, ou des grilles à 7 colonnes avec du contenu s'étendant sur 3+4
• Les espaces blancs intentionnels : une section avec 60% d'espace blanc, le contenu dans un coin
• Le contraste d'échelle : une petite étiquette à côté d'un titre massif
• Le chevauchement : des éléments qui sortent des limites de leur conteneur

En cas de doute, retirez une colonne ou ajoutez plus d'espace blanc.

---

À quoi cette compétence ne sert PAS

Si l'utilisateur souhaite :

• Une page d'accueil B2B SaaS standard (bulles de chat, maquettes de produit, grilles de fonctionnalités) → utilisez design
• Un tableau de bord d'administration / interface à forte densité de données → utilisez design
• Une page d'application mobile avec maquette de téléphone → utilisez design
• Un site corporate avec hero photo de stock → utilisez design

Cette compétence est destinée à : marques de mode, produits de luxe, agences de design, portfolios créatifs, cabinets d'architecture, publications éditoriales, SaaS premium se positionnant comme avant-gardistes en design.

---

Workflow — ÉTAPE 0 : LIRE LE CATALOGUE

Avant d'écrire une page, lisez :

1. references/design-tokens.md — couleurs, échelle typographique, espacement
2. references/motion-principles.md — courbes d'atténuation, timing, philosophie du mouvement
3. Le fichier .md de la catégorie correspondante dans references/catalog/ — variantes disponibles

Ensuite, choisissez une variante et lisez son fichier .tsx dans references/catalog/components/.

Correspondance Page → Fichier catalogue :

Type de page	Fichier(s) catalogue
Landing / Accueil	hero.md + features.md + testimonials.md + cta-sections.md + footers.md
Tarification	pricing.md
À propos / Studio / Manifeste	about.md
Contact	contact.md
Portfolio / Travaux	gallery.md
FAQ / Remarques	faq.md
Navigation (toutes pages)	navigation.md

Inventaire actuel du catalogue — 11 composants, tous véritablement originaux :

• navigation.md — 1 variante (Mât éditorial)
• hero.md — 1 variante (Hero à masque cinétique)
• features.md — 1 variante (Index éditorial)
• stats.md — 1 variante (Chiffres éditoriaux)
• logos.md — 1 variante (Registre de clients éditorial)
• gallery.md — 1 variante (Index de travaux éditorial)
• about.md — 1 variante (Histoire / Manifeste éditorial)
• testimonials.md — 1 variante (Citation éditoriale en exergue)
• pricing.md — 1 variante (Asymétrique éditorial)
• faq.md — 1 variante (FAQ / Remarques éditoriale)
• cta-sections.md — 1 variante (CTA Moment)
• contact.md — 1 variante (Formulaire de contact éditorial)
• footers.md — 1 variante (Pied de page manifeste éditorial)

---

Liste de contrôle non négociable

Avant de signaler que la tâche est terminée :

1. Lecture des fondamentaux : design-tokens.md + motion-principles.md ont été lus AVANT d'écrire du code.
2. Catalogue consulté : Une variante spécifique a été choisie dans le catalogue. Nommez-la.
3. Polices chargées : Les polices d'affichage et de corps requises sont chargées via <link> dans index.html OU via @import CSS. Les polices système brisent l'aspect premium.
4. Couleur d'accent unique : Le design utilise UNE couleur d'accent (plus des neutres). Pas de palettes arc-en-ciel.
5. Timing des mouvements : Au moins une section utilise un mouvement piloté par le défilement (pas seulement des fondus au chargement de page). La courbe d'atténuation est easeOutExpo ou similaire — pas la valeur par défaut easeOut.
6. Brisure de composition : Au moins une section utilise une mise en page asymétrique, des espaces blancs intentionnels, ou un contraste d'échelle. Pas uniquement des grilles à colonnes égales.
7. Mobile : Testé à 375 px. Les polices d'affichage se réduisent mais conservent leur caractère (plus grandes qu'un H1 mobile standard).