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 |

Da utilizzare durante la creazione o la manutenzione di un sistema di progettazione: l'insieme coordinato di token di progettazione, librerie di componenti, documentazione e strumenti che garantiscono la coerenza visiva e comportamentale tra i prodotti. UTILIZZO PER: progettazione dell'architettura del sistema, scelta dei formati token rispetto ai framework dei componenti, connessione di Figma al codice, flussi di lavoro dalla progettazione allo sviluppo, coerenza multipiattaforma NON UTILIZZARE PER: creazione di token specifici (usare design-token), flussi di lavoro Figma (usare figma), catalogazione di componenti (usare storybook), trasformazione di token (usare dizionario di stile), componenti cross-framework (usare mitosi) Fonte: tyler-r-kendrick/agent-skills.