Pollenia · Mydrip · Paramétrage design system

Paramétrer proprement le design system avant de passer à Claude Design puis Claude Code.

Objectif : figer les règles visuelles et structurelles de Mydrip pour que Claude Design produise une direction cohérente, puis que Claude Code puisse l’implémenter sans improviser.

PositionnementStreetwear haut de gamme, revente de marques connues
Univers 1Running = pas seulement chaussures
Univers 2Premium = luxe / plus exclusif
RègleOn garde le mot Running pour l’instant

1. Synthèse propre de tes réponses

J’ai consolidé ce que tu m’as donné pour éviter de repartir en boucle.

Univers Running

On garde le nom Running pour le moment, mais il ne doit surtout pas enfermer la marque dans un univers purement sport technique ou purement chaussure.

  • Inclut : chaussures, vêtements, accessoires.
  • Références citées : Asics, Saucony, Salomon, Alo, New Balance.
  • Posture : revente de marques connues, streetwear premium, mouvement, style, usage quotidien.

Univers Premium

Premium représente une sélection plus luxe, plus rare, plus exclusive, mais elle n’est pas encore totalement ciblée en marques.

  • Inclut : chaussures, vêtements, accessoires.
  • Posture : luxe, sélection, désir, niveau supérieur.
  • À ce stade : univers défini par le niveau de sélection, pas encore par une liste de marques finale.

Décision de cadrage

Mydrip n’est pas un site de sport technique pur. C’est une plateforme de revente de marques connues orientée streetwear haut de gamme. Le mot Running reste un label commercial temporaire pour un premier univers plus accessible, plus mouvement, plus quotidien — pas un rayon “chaussures de course”.

2. Positionnement à injecter dans le design system

Avant toute couleur ou animation, il faut verrouiller l’intention de marque.

Marque mère

Mydrip = plateforme de style, sélection, achat désir, marques connues, identité forte.

Running

Plus accessible, plus mouvement, plus actif, plus lifestyle sport/street.

Premium

Plus rare, plus chic, plus luxe, plus tension éditoriale et aspirationnelle.

Interdit

Ne jamais tomber dans le rendu “site de running technique”, ni “template mode générique”.

3. Paramétrage recommandé des design tokens

Ce bloc sert à préparer Claude Code : couleurs, typo, surfaces, spacing, rayons, ombres, hiérarchie.

Couleurs

Système chromatique

#090909
#FFFFFF
#F72585
#FF5A1F
#FFE500
#FFB347
  • Noir/blanc = structure premium.
  • Orange = action commerciale.
  • Gradient rose → orange → jaune = signature de marque.
  • Premium peut avoir plus de blanc, noir, tension et respiration.
  • Running peut avoir plus d’énergie, mais sans code “performance tech” froid.
Typographie

Système de type

  • Display / Headline : sans serif massive, impactante, proche de l’énergie du logo.
  • Body : sans serif propre, lisible, moderne.
  • Accent / UI : éventuellement une condensed ou mono discrète pour prix, tailles, badges, stocks.
  • Éviter les serif de luxe classiques qui casseraient l’énergie street.

Spacing

Base 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64. Claude Code doit utiliser une échelle cohérente, pas du spacing arbitraire écran par écran.

Radius

Grandes cartes : 24–32px. Éléments UI : 12–18px. On veut du premium tendu, pas du blob mou partout.

Shadows

Ombres profondes mais propres : peu nombreuses, nettes, premium. Pas d’effet cheap multi-couches inutile.

Borders

Contours visibles et assumés, surtout sur cartes, choix d’univers, produits, navigation. Le contraste structure l’identité.

4. Composants à figer avant implémentation

Claude Code sera meilleur si le design system nomme clairement les composants principaux.

Composants de structure

  • Header
  • GatewayHero
  • UniverseDoorCard
  • SectionHeader
  • EditorialBand
  • Footer

Composants commerce

  • ProductCard
  • ProductGrid
  • ProductBadge
  • PriceBlock
  • StockIndicator
  • SizeSelector
  • AddToCartBar

Composants confiance

  • DeliveryInfo
  • ReturnInfo
  • BrandTag
  • UniverseTag
  • SecureCheckoutNote
  • CartSummary
Composant
Règle visuelle
Rôle business
UniverseDoorCard
Grande carte immersive, fort contraste, image/texture + CTA massif
Faire comprendre en 1 clic Running vs Premium
ProductCard
Visuel produit net, badge univers, marque, prix, état stock, CTA
Donner envie d’acheter vite
SectionHeader
Titre fort, texte court, hiérarchie nette
Éviter le blabla et guider la lecture
SizeSelector
Propre, lisible, tactile, premium
Réduire la friction d’achat

5. Motion system : comment le paramétrer proprement

Tu as demandé de l’animation, du beau, du premium, sans effet IA. Donc il faut des règles, pas juste “mettre du motion”.

Principe 1

L’animation doit renforcer la sensation boutique premium : révélation, fluidité, tactilité, profondeur.

Principe 2

Pas d’animations gadgets en boucle. Le mouvement doit servir l’entrée, les cartes univers, le hover produit et l’ajout panier.

Principe 3

Premium = animation plus lente, plus respirée. Running = animation un peu plus nerveuse, mais toujours chic.

Paramètres recommandés

  • Transitions UI : 180ms à 280ms
  • Entrées de sections : 380ms à 650ms
  • Hover cartes : légère translation + ombre + contraste
  • Door cards : reveal image / overlay / CTA progressif
  • Respecter prefers-reduced-motion

À éviter

  • Parallax excessif
  • Texte qui vole partout
  • Blur partout
  • Micro-interactions trop “dribbble”
  • Animations qui ralentissent l’achat

6. Règles anti-slop à imposer à Claude Design et Claude Code

Ce bloc est critique si tu veux éviter que ça “sonne IA”.

Pas de faux dashboards

Rien qui ressemble à un SaaS ou à des stats décoratives.

Pas de luxe cliché

Éviter le minimalisme beige vide ou les serif clichés de “luxe générique”.

Pas de sport tech pur

Pas de langage performance froide, pas de codes de site running expert trop techniques.

Pas de gradient partout

Le gradient est une signature, pas un fond universel permanent.

7. Meilleure façon de paramétrer Claude Code pour le design system

Le plus propre n’est pas de lui demander “fais un design system”. Il faut lui demander une structure implémentable.

Ce que Claude Code doit produire

  • Un fichier central de tokens : couleurs, spacing, radius, shadows, z-index, motion.
  • Un fichier de thèmes/univers : base, running, premium.
  • Une librairie de composants UI de base.
  • Des composants métier Mydrip : DoorCard, ProductCard, Badge, PriceBlock, SizeSelector.
  • Une page de preview / styleguide interne.

Pourquoi c’est la bonne méthode

  • Claude Design pense le système.
  • Claude Code le code en couches propres.
  • Tu peux corriger le design sans casser toute l’app.
  • Running et Premium peuvent partager une base tout en divergeant proprement.

Architecture recommandée

design-system/
  tokens/
    colors.ts
    spacing.ts
    typography.ts
    radius.ts
    shadows.ts
    motion.ts
  themes/
    base-theme.ts
    running-theme.ts
    premium-theme.ts
  components/
    ui/
      Button.tsx
      Input.tsx
      Badge.tsx
      Card.tsx
    commerce/
      ProductCard.tsx
      ProductGrid.tsx
      PriceBlock.tsx
      SizeSelector.tsx
      CartSummary.tsx
    brand/
      GatewayHero.tsx
      UniverseDoorCard.tsx
      SectionHeader.tsx
  preview/
    design-system-showcase.tsx

8. Prompt V1 pour paramétrer Claude Code sur le design system

Ça, c’est le prompt qu’on pourra affiner juste après ensemble.

<role>
You are a senior front-end systems engineer.
Your job is to build the design-system foundation for Mydrip before full page implementation.
</role>

<brand_context>
Mydrip is not a pure technical sports store.
It is a premium streetwear-oriented resale platform for known brands.
The site has two universes:
1. Running = shoes, clothing, accessories, active streetwear, known brands, more accessible and movement-oriented.
2. Premium = shoes, clothing, accessories, more luxury, more exclusive, more elevated selection.
For now, keep the label “Running” even if it may evolve later.
</brand_context>

<visual_source_of_truth>
Use the official Mydrip logo as the source of truth:
- bold black/white structure
- pink/orange/yellow gradient as brand signature
- shopping energy, sticker/grain attitude
- premium street-shopping feel
Avoid both generic luxury minimalism and technical sports-store aesthetics.
</visual_source_of_truth>

<task>
Create the implementation foundation of the Mydrip design system.
Do not build the full storefront yet.
First build:
- design tokens
- base theme
- running theme
- premium theme
- shared UI primitives
- commerce primitives
- brand-specific components
- a design-system preview page
</task>

<required_tokens>
Define tokens for:
- colors
- typography
- spacing
- radius
- shadows
- borders
- motion
- focus states
</required_tokens>

<required_components>
Include at minimum:
- Button
- Badge
- Card
- SectionHeader
- UniverseDoorCard
- ProductCard
- PriceBlock
- SizeSelector
- CartSummary
</required_components>

<theme_rules>
Base theme = shared Mydrip DNA.
Running theme = slightly more energetic, more movement-oriented, but still premium and fashion-aware.
Premium theme = more restrained, more contrast-driven, more editorial and exclusive.
Both themes must feel like the same brand.
</theme_rules>

<quality_constraints>
Do not generate generic SaaS UI.
Do not use arbitrary spacing or inconsistent radii.
Do not overuse gradients.
Do not make Running look like a technical sports brand.
Do not make Premium look like a cliché beige luxury brand.
</quality_constraints>

<output_format>
Return:
1. the proposed file structure
2. the token definitions
3. the component list with roles
4. a preview/showcase page
5. a short explanation of how full pages should consume the system later
</output_format>

9. Ce qu’on fait maintenant

Le plus intelligent est de verrouiller d’abord le design system, puis seulement le prompt Claude Design V2.

Étape A

On valide ensemble cette définition de Running / Premium.

Étape B

Je te rédige la version finale ultra propre du prompt “design system pour Claude Code”.

Étape C

Ensuite je te rédige le prompt Claude Design V2 directement aligné sur ce système.

Document préparatoire Mydrip — paramétrage du design system avant exécution Claude.