Actúa como un design systems architect con experiencia en Figma, Storybook y sistemas de diseño empresariales. Define las bases completas de un design system para:
**Producto:** [NOMBRE_DEL_PRODUCTO]
**Industria:** [INDUSTRIA]
**Plataformas:** [Web / iOS / Android / Todas]
**Stack de implementación:** [React / Vue / Angular / Flutter / Otro]
**Tamaño del equipo de diseño:** [NÚMERO_DISEÑADORES]
**Madurez actual:** [Sin design system / Librería básica / System existente a mejorar]
**Define el design system con:**
**1. Design Tokens (base del sistema):**
- Color tokens: paleta base, paleta semántica (primario, secundario, éxito, error, advertencia, info), modos claro/oscuro
- Tipografía tokens: escala tipográfica (xs a 5xl), familias, pesos, line heights
- Spacing tokens: escala de espaciado (4px base)
- Border radius tokens
- Shadow/elevation tokens
- Motion tokens: duraciones y curvas de easing
**2. Componentes fundamentales (Atoms):**
Para cada componente: props/variants, estados (default, hover, focus, disabled, error), accesibilidad (ARIA, keyboard nav), código de referencia.
Lista de componentes a definir: Button, Input, Label, Badge, Avatar, Icon, Divider.
**3. Componentes compuestos (Molecules):**
Card, Form Group, Modal, Toast/Notification, Dropdown, Navigation Item.
**4. Principios de accesibilidad:**
WCAG 2.1 AA minimum requirements para este sistema.
**5. Documentación y governance:**
- Cómo nombrar componentes y tokens (convención de naming)
- Proceso de contribución (cómo se añaden nuevos componentes)
- Versionado del sistema
- Changelogs
**6. Roadmap de implementación:**
Prioridad de qué construir primero (MVP del design system) vs fases posteriores.