design-system

Overview A design system is the single source of truth for an organization's UI — combining design tokens, component libraries, documentation, and tooling into a cohesive ecosystem. It ensures consistency, accelerates development, and bridges the gap between design and engineering.

Token Architecture Design tokens are the atomic values of a design system — colors, spacing, typography, elevation, motion. They flow through three tiers:

| Global | blue-500: #3b82f6 | Raw palette values | | Alias / Semantic | color-primary: {blue-500} | Intent-based references | | Component | button-bg: {color-primary} | Scoped to a specific component |

À utiliser lors de la création ou de la maintenance d'un système de conception : l'ensemble coordonné de jetons de conception, de bibliothèques de composants, de documentation et d'outils qui garantissent la cohérence visuelle et comportementale entre les produits. UTILISER POUR : concevoir l'architecture du système, choisir les formats de jetons par rapport aux cadres de composants, connecter Figma au code, les flux de travail de la conception au développement, la cohérence multiplateforme NE PAS UTILISER POUR : la création de jetons spécifiques (utiliser des jetons de conception), les flux de travail Figma (utiliser figma), le catalogage de composants (utiliser un livre d'histoires), la transformation de jetons (utiliser le dictionnaire de style), les composants inter-framework (utiliser la mitose) Source : tyler-r-kendrick/agent-skills.