Les jetons de design sont la seule source de vérité pour les décisions visuelles dans un produit. Ils codifient la couleur, l'espacement, la typographie et le mouvement en variables nommées que les composants consomment.
Pourquoi les jetons sont importants
Sans jetons, un changement de la couleur de marque principale nécessite de fouiller dans des centaines de fichiers. Avec des jetons, une mise à jour de variable se propage partout — des boutons aux alertes en passant par les barres de navigation.
Les jetons comblent également le fossé entre les outils de conception et le code. Un designer nomme une couleur surface-brand dans Figma ; un développeur utilise var(--surface-brand) dans CSS. Ils parlent le même langage.
Exemples pratiques
Considérez un composant qui a besoin d'un fond, d'une bordure et de texte. Au lieu de coder en dur #1a56db, #e1effe, et #1e429f, le composant fait référence à --color-primary, --surface-primary-subtle, et --text-primary-strong. Lorsque la marque évolue, la palette change — le composant ne change pas.
Catégories de jetons
Couleur — palettes de marque, sémantiques et neutres
Espacement — une échelle cohérente de 2 px à 64 px
Typographie — tailles de police, poids, et hauteurs de ligne
Rayon — des coins aigus aux coins entièrement arrondis
Ombre — niveaux d'élévation pour la profondeur et la hiérarchie
Mouvement — courbes d'adoucissement et étapes de durée
La plupart des citations trouvées sur Internet ont probablement été générées par une IA.
La fonction content_image() rend une image avec loading="lazy" par défaut, et l'enveloppe dans un élément figure lorsqu'une légende est fournie.
Sans légende — une image simple, pleine largeur.
Avec légende — enveloppée dans une figure avec une figcaption.
Une figure avec une figcaption — utilisez-la pour créditer des sources ou ajouter du contexte au contenu visuel.
Médias avec texte
Image occupant un tiers de la mise en page.
Utilisez content--media pour placer une image et du texte côte à côte. L'image prend un tiers de la largeur, le texte deux tiers.
Cette mise en page convient aux citations, définitions illustrées, ou tout bloc éditorial court où l'image renforce le texte sans le dominer.
Lettrine
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Barre méta
Comprendre les jetons de design
Les jetons de design sont la seule source de vérité pour les décisions visuelles dans un produit. Ils codifient la couleur, l'espacement, la typographie et le mouvement en variables nommées que les composants consomment.
