Product
Comment Decathlon a réinventé son onboarding produit
Une refonte de 6 mois qui a multiplié la conversion par 3 sur les nouveaux utilisateurs.
Tokens, composants, patterns et conventions slides. Lu en référence par tous les projets Hubvisory et par Claude pour produire du code, des slides et des assets alignés avec la marque.
16 tokens couleur organisés en surfaces, brand, accents étendus et univers IA. Format HSL pour intégration Tailwind.
Frank Ruhl Libre (serif) pour tous les titres, Inter (sans) pour body et UI. La hiérarchie passe par la taille et le poids, jamais par la couleur seule.
Corps de texte — Inter Regular. On accompagne les directions Product et IA dans la conception de produits qui transforment l'expérience client.
Texte petit — Inter Regular. Utilisé pour les légendes, les mentions, les métadonnées.
Eyebrow — Inter Medium UPPERCASE letter-spacing 8%
Échelle Tailwind alignée. Les sections marketing utilisent py-20 md:py-28 par défaut.
7 variants × 5 tailles. Pour les sections marketing avec contraste light/dark explicite, voir les CTA Buttons ci-dessous.
| variant | sm | default | lg | xl |
|---|---|---|---|---|
| default | ||||
| secondary | ||||
| outline | ||||
| ghost | ||||
| link | Label | Label | Label | Label |
| destructive | ||||
| accent |
3 niveaux hiérarchiques pour les sections marketing. Chaque niveau a deux styles : light sur fond sombre, dark sur fond clair.
Liste fermée alignée avec la taxonomie éditoriale. Volontairement uniformes en couleur pour ne pas créer de hiérarchie entre catégories.
Product
IA
Stratégie
Formation
Case Study
Card primitive shadcn pour containers utilitaires. CardArticle pour articles, cas clients, AI/Product Leader Stories — pattern signature avec gradient border et hover lumineux.
Card description placeholder
Contenu de la card.
Classe utilitaire CSS. Card statique avec ombre légère et bordure.
Avec hover : shadow + lift. Survole-moi.
Product
Une refonte de 6 mois qui a multiplié la conversion par 3 sur les nouveaux utilisateurs.
IA
Les pratiques Hubvisory pour passer du POC au déploiement à l'échelle.
Formation
Méthode et rituels pour des équipes Product capables de décider seules.
Sur fond sombre, la même CardArticle change de gradient (white/[0.12] → cyan-light au hover) et de palette intérieure pour rester lisible.
Stratégie
Comment une direction Product peut maintenir la cohérence stratégique dans la durée.
Case Study
Un projet de 18 mois entre delivery rapide et transformation organisationnelle.
IA
Ce qu'on a appris en industrialisant des systèmes RAG pour 4 grands comptes.
Compositions signature du DS. Glass icon container plutôt qu'aplats colorés. Card with gradient border pour mises en avant.
On light background
w-11 h-11 rounded-xl, fond primary/[0.04], bordure primary/[0.06], icône accent-blue 1.5px stroke
On dark background
w-11 h-11 rounded-xl, fond white/[0.06], bordure white/[0.08], icône cyan-light 1.5px stroke
Inner card rounded-[15px] avec hover lumineux accent-blue.
Hover devient cyan-light/30 sur fond sombre.