# Design system · Creators Latam y Martín Velasco

**Versión 1.0 · septiembre de 2026.** El manual de marca 2026 empaquetado para que se pueda **usar**: tokens, una hoja visual de componentes, recetas para armar piezas y una skill para que Claude Code diseñe con el sistema sin releer el manual. No inventa ni guarda valores propios: junta en un solo lugar lo que ya decidieron la guía del sistema, la guía de voz y los tokens, y dice cómo se arma cada pieza con eso.

---

## Para quién

- **Martín y el equipo**, cuando quieren una pieza nueva (post, historia, deck, documento, sección de landing, lámina de video) y necesitan saber qué medidas, colores y palabras van.
- **Claude Code y otros agentes**, con `SKILL.md`: lee el sistema, diseña la pieza y revisa contra la lista de 10 preguntas antes de entregarla.
- **Cualquier diseñador o desarrollador** que reciba el sistema y tenga que aplicarlo en otra herramienta (Figma, web, PowerPoint).

## Cómo usarlo

1. **Abre `componentes/componentes.html`** en el navegador: tiene todo a la vista, con un interruptor claro/oscuro.
2. **Elige la receta.** En `patrones/` hay una por tipo de pieza: pasos, valores y los errores típicos.
3. **Usa los tokens.** En web, `tokens/tokens.css`; en Tailwind, `tokens/tailwind.config.js`; en otras herramientas, `tokens/tokens.json`. Nunca escribas un hex a mano: usa los roles (`var(--texto)`, `var(--acento)`…).
4. **Revisa antes de entregar** con la lista de 10 preguntas de `SKILL.md`.
5. **Con Claude Code:** copia la skill a tu carpeta de skills y pide «usa el design system de Creators Latam».

```bash
mkdir -p ~/.claude/skills/creators-latam-design-system
cp -R SKILL.md tokens patrones componentes ~/.claude/skills/creators-latam-design-system/
```

## Regla de oro

> **Un solo azul (`#007AFF`), en un solo elemento por pieza. Sin rosado, sin degradados, sin sombras.**

Todo lo demás es blanco, grises y tinta. El azul es lo único que hay que mirar ahora; si aparece en dos lugares, sobra uno. Además:

- Helvetica Neue en dos pesos (400 y 700). Nunca Inter, nunca Medium.
- Interruptor vertical, 1 : 3,076, botón calado, en sus tres configuraciones (suelto, hilera, par).
- Íconos: solo los 28 de Lucide definidos. Personaje: uno por pieza, nunca en oscuro.
- Oscuro solo con una hora de noche escrita, o de escenario.
- Español del Perú con tildes, de «tú»; todo dato inventado dice «Ejemplo».

## Qué trae este kit

```
creators-latam-design-system/
├── README.md              este archivo
├── SKILL.md               instrucciones para Claude Code (name: creators-latam-design-system)
├── tokens/
│   ├── tokens.css         variables CSS: claro, oscuro y escenario
│   ├── tokens.json        los mismos valores en formato DTCG
│   ├── tailwind.config.js generado desde tokens.json
│   └── fonts/             TeX Gyre Heros (WOFF2) y su licencia
├── guia/
│   ├── sistema-guia.md    la guía del sistema visual, con sus motivos
│   └── guia-para-tu-ia.md texto para pegar en ChatGPT, Claude o Gemini
├── componentes/
│   ├── componentes.css    la biblioteca «cl-»: botones, campos, chips, tarjetas, interruptor, teléfono, gráficos y tablas
│   └── componentes.html   la hoja de componentes, viva, en claro y oscuro
└── patrones/              7 recetas: post, historia, deck, lámina de video, documento, sección de landing y gráfico
```

## Cómo proponer un cambio

1. **Decide de dónde viene.** Un valor visual (color, tamaño, radio, medida) o una regla se cambia primero en la guía del sistema (`sistema-guia.md`); una palabra o una regla de escritura, en la guía de voz; la idea, en la plataforma de marca. Este kit no decide nada por su cuenta.
2. **Escribe la propuesta** en una nota corta: qué cambia, qué problema resuelve (idealmente con una pieza real que no se pudo armar), qué contraste o medida la respalda y qué piezas existentes afecta. Un color nuevo solo entra si hace un trabajo que ningún neutro puede hacer.
3. **Todo cambio pasa por Martín** antes de aplicarse a cualquier archivo.
4. **Aplica en este orden:** la guía → `tokens/tokens.css` y `tokens/tokens.json` → `tokens/tailwind.config.js` → `SKILL.md`, `patrones/` y este README si citan el valor.
5. **Sube la versión:** parche (1.0.1) si solo corriges una descripción o un ejemplo; menor (1.1) si agregas un componente o una receta; mayor (2.0) si cambia un valor que rompe piezas ya hechas.