Design System
Référentiel Monsieur Guiz
Tout le langage visuel et les briques d'interface du site, organisés en trois niveaux : tokens fondamentaux, composants paramétrables, sections de page complètes.
Badges
Composant unique. Style fixe (lowercase, 12px, font-medium, radius 6px, sans bordure) — différencié uniquement par la couleur de fond. 6 couleurs disponibles.
Badge
6 couleurs · API : <Badge color='violet | vert | orange | indigo | blanc | gris'>Les 6 couleurs disponibles
Badge Expertise — résout la couleur depuis un label
Pour les pages dynamiques (cas client, missions consultants), un helper expertiseToBadgeColor(label) mappe automatiquement Product → violet, Design → vert, IA → orange, Ops → indigo.
Primitives
Petits éléments réutilisables : icônes, logos, en-têtes de section, pullquote.
Logo
variante dark / light
CircleArrow
couleur purple / teal · taille en pxHighlightedTitle
surligne une chaîne dans un titreDes designers qui pensent produit
SectionHeader
ligne teal + label + H2 + sous-titreDes résultats concrets, pas des promesses
11 cas anonymisés, mesurés sur les 12 derniers mois.
EditorialPullquote
bord teal + italique“Un bon design system, c'est moins de décisions à prendre chaque jour pour des dizaines de personnes.”
ParallaxShapes
formes décoratives parallax (démo statique)Cards
Toutes les cards du site, regroupées par usage. Encadré pointillé ambre = composant défini mais pas encore utilisé en production (pré-câblé pour le futur blog/hub ressources via FeedRenderer).
ContentCard
13 types · 4 layouts · absorbe 14 cardsLayout vertical — les 12 types média (en grille 3-col)
Discovery produit : 5 erreurs à éviter
Les biais qui tuent votre découverte utilisateur, et comment les contourner avec une approche structurée.
Banque XYZ : refonte du parcours d'onboarding
Comment nous avons réduit de 40% le drop-off à l'entrée du parcours.
-40% drop-off · +25% conversion
Roadmap 2026 : ce qui change pour vos squads
Notre vision produit pour l'année qui vient, et les chantiers prioritaires.
Démo Lovable : interface en 5 min
Comment générer un MVP fonctionnel en quelques prompts.
Replay : IA en discovery produit
Notre webinar du 28 février sur l'usage de l'IA en phase de cadrage.
Ép. 12 — Scaler une équipe Design
Tony reçoit Sandra, VP Design chez Qonto, pour parler de structuration d'équipe.
La Lettre Monsieur Guiz
Une fois par mois, nos lectures, nos prises de positions, nos retours d'expérience.
Template — Cadrage produit en 1 page
Le canvas que nos PM utilisent en kick-off de tous les projets.
Livre blanc : IA & Produit
50 pages pour structurer votre approche IA dans un produit existant.
Lenny Rachitsky
Newsletter #1 sur le Product Management. 700k+ abonnés.
Product Discovery — niveau avancé
2 jours pour outiller vos PM sur les méthodes de découverte continue.
The Product Hunt method
Comment Product Hunt structure son onboarding produit.
Layout horizontal — featured (image gauche, contenu droite)
Banque XYZ : refonte du parcours d'onboarding
Comment nous avons réduit de 40% le drop-off à l'entrée du parcours, en repensant les 3 premières étapes et en supprimant 5 frictions identifiées en research.
-40% drop-off · +25% conversion · 6 mois de mise en œuvre
Layout simple — sans image, pour hubs / nav (3 accents : purple · teal · salmon)
StatHighlightCard
3 accents (purple/teal/salmon)Non utilisé en prod12+
ans d'accompagnement
Étude annuelle 2026 — 142 clients interrogés
200+
projets livrés
Étude annuelle 2026 — 142 clients interrogés
AuthorQuoteCard
quote avec auteurNon utilisé en prodUn bon design system, c'est moins de décisions à prendre chaque jour pour des dizaines de personnes. C'est de la productivité composée.
Tony
Lead Design @ Monsieur Guiz
CommunityHighlightCard
card communauté avec statsNon utilisé en prodInlineCTACard
full-width CTA · variantes purple/teal/darkNon utilisé en prodEnvie d'aller plus loin sur le sujet ?
Nos PM et Designers sont dispos pour 30 minutes gratuites de cadrage produit.
Prendre rendez-vousEnvie d'aller plus loin sur le sujet ?
Nos PM et Designers sont dispos pour 30 minutes gratuites de cadrage produit.
Prendre rendez-vousEnvie d'aller plus loin sur le sujet ?
Nos PM et Designers sont dispos pour 30 minutes gratuites de cadrage produit.
Prendre rendez-vousListe
Composants destinés à présenter une série d'éléments en liste verticale, plutôt que sous forme de cards individuelles.
CompactListItem
ligne minimale empilable (top articles, classements simples)NumberedListCard
card avec liste numérotée intégrée (top articles, classements)Non utilisé en prodFormulaires
Composants form actuellement disponibles. ⚠️ Couverture incomplète — pas d'Input/Select/Textarea/Checkbox génériques.