Lección 1: Design Tokens — de valores fijos a un sistema de tokens
Cada pantalla puede elegir por su cuenta un color, un valor de espaciado y una tipografía que 'se vean bien' — pero después de docenas de pantallas esas pequeñas diferencias se acumulan: un azul un poco distinto acá, un espaciado un poco distinto allá, hasta que todo el producto se siente inconsiste
Un token es como una ficha de receta para un color en un laboratorio: escribes una vez 'morado de marca = esta mezcla', y luego todos los que necesitan el color piden la ficha en vez de adivinar la mezcla de nuevo.
- design token
- Una decisión de diseño con nombre — un color, un espaciado o un radio — guardada en un solo lugar y referenciada desde todas partes, en vez de un valor fijo repetido a mano.
- Tailwind theme
- El objeto `theme` dentro de `tailwind.config.ts` donde defines los tokens del proyecto — Tailwind genera las clases de utilidad a partir de ellos.
- semantic color
- Un token nombrado según su rol y no según su tono — `brand` o `danger` en vez de `purple-500` — así cambiar el tono nunca requiere renombrar cosas en el código.
- arbitrary value
- Una sintaxis de Tailwind como `bg-[#6c5ce7]` que se salta el theme e inyecta un valor fijo directo en una clase — el atajo rápido que te devuelve al problema que los tokens resuelven.
