Design System
Référence visuelle — couleurs, typographie et composants.
Couleurs
Surfaces
surface-base
#fff4eb
surface-base-darker
#f5e4d6
surface-base-darkest
#f0d9c6
surface-card
#fff9f4
surface-lightest
#ffffff
surface-primary
#5866EB
surface-primary-darker
#3C3FD3
surface-primary-lighter
#8a95ff
surface-secondary
#f9d893
surface-secondary-darker
#ffd755
Text
text-title
#1c1b1a
text-body
#4b4b4b
text-muted
#6b6b6b
text-inverted
#ffffff
Bordures
border-default
#f5e4d6
border-darker
#f0d9c6
border-tertiary
#dfc1a9
border-secondary
#e7bf3e
border-subtle
rgb(28 27 26 / 12%)
Misc & interactifs
photo-bg
#503939
interactive-hover-surface
rgba(255 255 255 / 35%)
interactive-pressed-surface
rgba(255 255 255 / 55%)
focus-ring
rgb(28 27 26 / 20%)
Typographie
Satoshi — font-title
Inter — font-sans
Case study content — .case-study-content
Titre de section h2
Sous-titre h3
Texte courant — Inter 18px, couleur text-body. Le Product Designer conçoit des interfaces centrées sur l'utilisateur, en combinant recherche UX et design UI.
- Premier élément de liste
- Deuxième élément avec du texte en gras
- Troisième élément avec un lien
Tags
Cards
project-card
Projet exemple
mission-card
Mission longue durée
3 à 6 mois — Intégration au sein d'une équipe produit existante.
Badges & Nav
MDX Components
<Metrics />
33% → 43%
Taux de conversion
+10 pts
Amélioration
<Quote />
Le design, c'est résoudre des problèmes complexes avec des solutions simples.
<FullImage />
<TwoColumns />
Sous-titre dans la colonne de texte
Contenu texte à gauche, image à droite. Le composant accepte imagePosition="left" pour inverser l'ordre.