---
title: "Tokens de diseño"
description: "Cuatro niveles a partir de unos pocos diales, resueltos por contexto, escritos una sola vez en el formato DTCG y generados para cada plataforma."
url: "https://tanrei.chnotchy.com/es/foundations/design-tokens/"
last_updated: 2026-10-23T06:11:40.000Z
---

# Tokens de diseño

> Cuatro niveles a partir de unos pocos diales, resueltos por contexto, escritos una sola vez en el formato DTCG y generados para cada plataforma.

Un token de diseño es una decisión de diseño con nombre. Tanrei guarda cada color, tamaño, estilo de texto, radio, sombra, duración y opacidad como un token en el [formato del Design Tokens Community Group](https://www.designtokens.org/) (versión 2025.10), en el directorio `tokens/` del repositorio. Ese directorio es una de las dos fuentes de verdad del proyecto.

## Niveles

Por debajo de los tres niveles siguientes hay un cuarto, `dial`: los ocho números de los que procede todo valor derivado. Consulta [Sistemas de diseño y personalización](https://tanrei.chnotchy.com/es/foundations/design-systems/) para conocer los diales, las capas y cómo un producto personaliza Tanrei.

| Nivel | Prefijo | Contiene | Ejemplo |
| --- | --- | --- | --- |
| Referencia | `tanrei.ref.*` | La materia prima: paletas tonales, rampas de alfa, tipos de letra y pesos. | `tanrei.ref.palette.neutral.10` |
| Sistema | `tanrei.sys.*` | Decisiones con un rol: _para qué_ sirve un color o un tamaño. Los temas cambian este nivel. | `tanrei.sys.color.primary` |
| Componente | `tanrei.comp.*` | Vinculaciones entre las partes de un componente y los tokens de sistema. | `tanrei.comp.button.filled.container.color` |

Cada nivel solo puede apuntar hacia abajo: los tokens de componente son alias de tokens de sistema, y los tokens de sistema son alias de tokens de referencia.

Dos reglas mantienen útiles los niveles, y `pnpm validate` impone ambas:

- **Los tokens de componente no contienen literales** de color, tipografía, forma, movimiento ni opacidad. Un token de componente es siempre un alias, de modo que un tema puede cambiar el estilo de todos los componentes modificando únicamente el nivel de sistema.
- **Los componentes no contienen valores de diseño escritos a mano.** Si falta un valor, la solución es un token nuevo, no un número mágico.

## Contextos

Un token no tiene un único valor: tiene un valor por contexto. Hoy Tanrei resuelve dos ejes de contexto:

- **Tema:** claro u oscuro.
- **Contraste:** estándar, medio o alto.

Eso da seis combinaciones resueltas. Las describe un archivo resolver de DTCG (`tokens/tanrei.resolver.json`) y se escriben en `design/tokens/` como archivos completamente resueltos, que son los que representa la [referencia de tokens](https://tanrei.chnotchy.com/es/tokens/color/) de este sitio.

## Nombres

El nombre de un token es su ruta. Cada plataforma escribe la misma ruta según su propia convención:

| Plataforma | `tanrei.sys.color.primary` se convierte en |
| --- | --- |
| CSS | `--tanrei-sys-color-primary` |
| Swift, Kotlin, Dart, TypeScript | una constante generada bajo el espacio de nombres de tokens del paquete |

El espacio de nombres, el prefijo de CSS y el prefijo de las etiquetas salen de un único archivo, `tanrei.config.json`. Ningún otro lugar del repositorio puede escribirlos a mano.

## De la fuente a la plataforma

`pnpm generate` reconstruye todos los archivos derivados. La CI los regenera y falla ante cualquier diferencia, de modo que una edición a mano de un archivo generado nunca sobrevive.

> [!NOTE]
> **Nota**
>
> En CSS, los tokens de color se emiten como pares `light-dark()`. Una sola hoja de estilos sirve a ambos temas, y un subárbol puede cambiar de tema con solo cambiar su `color-scheme`.