# Design tokens: qué es y cómo funciona · Zorraquino
> Los design tokens representan decisiones de diseño mediante valores con nombre, como colores, espacios o tipografías.
URL: https://www.zorraquino.com/diccionario/design-tokens

# Design tokens

Los design tokens representan decisiones de diseño mediante valores con nombre, como colores, espacios o tipografías

Qué significa, cómo se usa y en qué contexto aparece, con sus conceptos relacionados.

[Todo el diccionario](https://www.zorraquino.com/diccionario)

## Qué es y cómo funciona

Permiten compartir y actualizar criterios entre herramientas y código. Su estructura puede incluir niveles semánticos, como un color para estados de error. Su utilidad depende de nombres claros, documentación y un proceso de mantenimiento coherente.

Temas

[Experiencia y diseño de servicios](https://www.zorraquino.com/diccionario/categoria/experiencia-y-diseno-de-servicios)

## Variantes y conceptos vinculados

- **Color de error.** Un token semántico de error identifica un uso, no solo un color. La información de error también necesita señales distintas del color.
- **Color de fondo.** El color de fondo puede representarse mediante un token semántico para mantener coherencia y facilitar cambios de tema.
- **Color de superficie.** El color de superficie identifica capas o contenedores. Sus relaciones deben mantener contraste y jerarquía.
- **Color primario.** El color primario tiene un papel definido en el sistema. Su significado debe documentarse y no asumirse universal.
- **Color secundario.** Los colores secundarios complementan la paleta con funciones concretas y deben comprobarse en combinación con otros elementos.
- **Colores 'on'.** Los colores de contenido sobre superficies necesitan contraste suficiente. Un nombre de token puede expresar esa relación de uso.
- **Colores alternativos.** Las variantes de color deben responder a estados o contextos documentados, evitando proliferación de valores sin función clara.

## Preguntas frecuentes sobre Design tokens

### ¿Cómo cambiar un design token sin romper las interfaces que lo utilizan?

Identifica dónde se consume y qué función representa. Un token semántico, como texto principal, permite revisar la intención; uno llamado por su color solo describe un valor. Prueba el cambio en componentes, estados y temas antes de extenderlo. Si cambia el significado, puede necesitar un token nuevo y una retirada gradual del anterior. Renombrar o sustituir valores sin conocer sus usos puede generar combinaciones incoherentes aunque la biblioteca siga compilando.

## Conceptos relacionados

- [Sistema de diseño](https://www.zorraquino.com/diccionario/marketing-digital/sistema-de-diseno.html)
- [Atomic design](https://www.zorraquino.com/diccionario/branding/atomic-design.html)
- [Diseño responsive](https://www.zorraquino.com/diccionario/marketing-digital/diseno-adaptativo.html)

## Referencias

- [Design Systems 101](https://www.nngroup.com/articles/design-systems-101/)