Design tokens más allá del color: comportamiento y contexto en 2026

Un token de comportamiento es un design token que describe cómo se mueve una interfaz, no cómo se ve quieta: cuánto dura una transición, qué curva de easing sigue, cuánto espera antes de arrancar. El token de contexto es la misma idea en el otro eje: el modo que decide qué valores se aplican cuando un componente aterriza en tema oscuro, en una tabla más densa o bajo una segunda marca. El formato estable del Design Tokens Community Group define 13 tipos de token. Solo uno es el color.

Casi todos los sistemas se quedan en tres: color, medida, tipografía. Con eso describes una pantalla quieta. No dice nada de lo que pasa entre dos pantallas, ni de lo que cambia cuando ese mismo botón cae en un layout compacto o delante de alguien que le ha pedido a su sistema operativo que deje de mover cosas. En esos dos huecos el design system vuelve a los valores escritos a mano, componente a componente.

La versión corta

• Siete tipos primitivos. color, dimension, fontFamily, fontWeight, duration, cubicBezier, number.
• Seis tipos compuestos. strokeStyle, border, transition, shadow, gradient, typography.
• El comportamiento vive en tres de ellos. duration, cubicBezier y el compuesto transition, que referencia a los dos.
• El contexto no es un tipo. Es la capa de modos que decide en qué valor se resuelve un token: tema, marca, densidad, movimiento reducido.
• Los tiempos se tokenizan, la coreografía no. Lo dice la propia especificación, y ese límite decide cómo documentas el motion.

Qué estandarizó de verdad la 2025.10

El Design Tokens Community Group publicó la versión 2025.10 el 28 de octubre de 2025: la primera especificación estable tras años de borradores. Trabajaron en ella más de veinte editores y autores, con aportaciones de Adobe, Google, Microsoft, Figma, Salesforce, Shopify, Penpot y otros. Las implementaciones de referencia ya existen en Style Dictionary, Tokens Studio y Terrazzo.

Dos detalles de esa entrega importan si te interesa el comportamiento.

La duración ya no es una cadena de texto. Los borradores anteriores aceptaban "100ms" y dejaban que cada herramienta lo interpretara. El formato estable exige un objeto con un value numérico y una unit que puede ser ms o s.

{
  "duration": {
    "quick":  { "$type": "duration", "$value": { "value": 100, "unit": "ms" } },
    "settle": { "$type": "duration", "$value": { "value": 1.5, "unit": "s" } }
  }
}

El easing es un array de cuatro números, no una función CSS. El tipo cubicBezier guarda [P1x, P1y, P2x, P2y]. Las coordenadas x se mueven entre 0 y 1, las y no tienen límite, y eso es justo lo que te deja escribir una curva con rebote.

{
  "easing": {
    "emphasized": { "$type": "cubicBezier", "$value": [0.2, 0, 0, 1] }
  }
}

El tipo compuesto transition une las dos piezas. Toma una duration, un delay y una timingFunction, y cada uno puede llevar un valor literal o una referencia a otro token. La referencia es el sentido de todo esto: cambias duration.quick una vez y se mueven todas las transiciones construidas sobre ese valor.

{
  "transition": {
    "emphasis": {
      "$type": "transition",
      "$value": {
        "duration": "{duration.quick}",
        "delay": { "value": 0, "unit": "ms" },
        "timingFunction": "{easing.emphasized}"
      }
    }
  }
}

Por qué el motion vive en la capa de tokens

Mira un sistema que ya lo hizo. Material Design 3 publica su motion como tokens: cuatro familias de duración (short, medium, long y extra long) con cuatro pasos cada una, de 50ms a 1000ms, más dos juegos de easing, standard y emphasized. El easing emphasized es cubic-bezier(0.2, 0, 0, 1).

Son unas veinte decisiones con nombre, tomadas una sola vez, por gente que las probó contra componentes reales. La alternativa es lo que contiene la mayoría de los proyectos: 250ms en un componente, 300ms en el siguiente, 0,2s en un tercero porque esa tarde alguien escribía en segundos. Nadie decidió eso. Se fue acumulando.

Cuando la duración es un token, tres cosas se vuelven fáciles. Puedes auditarla: una regla de lint o un grep de valores ms escritos a mano en el CSS de componentes te devuelve un número que puedes seguir. Puedes cambiarla desde un único sitio, así que "la app va lenta" tiene un lugar al que ir en vez de cuarenta. Y cuando una diseñadora y un desarrollador discuten sobre velocidad, discuten sobre un paso con nombre y no sobre un adjetivo.

Lo que sale al final de la pipeline no tiene nada de exótico, y ese es el objetivo.

:root {
  --duration-quick: 100ms;
  --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --transition-emphasis: 100ms cubic-bezier(0.2, 0, 0, 1);
}

Lo que un token de transición todavía no sabe decir

El límite existe y está escrito dentro de la especificación. La sección de transiciones arrastra una incidencia abierta que pregunta si esos parámetros sirven por sí solos, dado que no permiten indicar qué propiedad se anima ni cuáles son el estado inicial y el final.

Así que un token de transición dice: 200 milisegundos, esta curva, sin retardo. No dice: opacidad más un desplazamiento vertical de 8px, en el panel que entra por la derecha, escalonado 40ms por fila. Esa coreografía se queda en el código del componente. Se tokenizan los tiempos, se documenta la coreografía y se deja de esperar que el archivo de tokens contenga una especificación de motion. Quien ignora ese límite acaba inventando nombres como transition-modal-enter-stagger, que es una decisión de componente disfrazada de token.

Contexto: modos, densidad y la segunda marca

La entrega 2025.10 añadió soporte de theming y multimarca, de modo que claro y oscuro, variantes de accesibilidad y temas de marca viven en una sola estructura de archivos en lugar de en archivos duplicados. Eso por el lado del formato. Por el lado de las herramientas la forma es otra.

En Figma el equivalente son los modos sobre una colección de variables: cada modo guarda un valor por variable y cuántos modos tienes por colección depende de tu plan. La trampa es la combinatoria. Dentro de una colección los modos son planos e independientes, así que marca por tema por densidad es una multiplicación, no una pila. Tres marcas, dos temas y dos densidades son doce columnas que mantener en orden, y doce columnas no las mantiene nadie a mano.

Dos reglas lo hacen sostenible. Cada dimensión en su propia colección, para que marca, tema y densidad sigan siendo separables en vez de colapsar en una única rejilla. Y ninguna dimensión nueva si no sabes decir quién la usa. La densidad es un buen ejemplo de dimensión que merece la pena: la fila de una tabla a 44px en versión cómoda y a 32px en compacta es un token dimension con dos valores de modo, y elimina toda una familia de excepciones de espaciado.

El movimiento reducido es un contexto, y gana a los demás

prefers-reduced-motion lee un ajuste de accesibilidad del sistema que la persona ya ha elegido, en macOS, Windows, iOS, Android o Linux. MDN lo describe como la señal de que quiere reducir al mínimo el movimiento no esencial. Los escalados y desplazamientos de objetos grandes pueden provocar malestar a quien tiene trastornos vestibulares, y por eso el W3C publica el uso de esta media query como técnica WCAG.

En un sistema de tokens esto se resuelve en la raíz, como sobrescritura de los valores, y no como una segunda tanda de duraciones repartida por los componentes.

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-quick: 0.01ms;
    --duration-settle: 0.01ms;
  }
}

Mejor 0.01ms que 0. Una transición de duración cero nunca dispara transitionend, y el JavaScript que espera ese evento se queda colgado. Dos avisos que conviene dejar por escrito en la documentación: movimiento reducido significa menos movimiento no esencial, no cero feedback, así que un cambio de estado tiene que seguir siendo perceptible por otra vía, normalmente el color o la posición. Y el ajuste se activa a mano en el sistema operativo, así que mucha gente a la que le vendría bien nunca lo enciende. Es un suelo, no una encuesta.

Cuándo añadir tokens de comportamiento y cuándo no

Añádelos cuando se cumplan al menos dos de estas: publicas en más de una plataforma, mantienes más de una marca o tema, el código de interfaz lo escriben más de dos personas, o alguien ya ha abierto una incidencia diciendo que el producto se siente incoherente. La multimarca es la señal más fuerte. En cuanto existe una segunda marca, cada duración escrita a mano es un conflicto de merge esperando su turno.

Sáltatelos si tienes un solo producto, un solo desarrollador y menos de diez estados animados. A esa escala un bloque de custom properties de CSS en un archivo es todo el sistema, y una pipeline DTCG con paso de build es un coste que pagas cada día y que no te devuelve nada. Hemos trabajado de las dos formas. La diferencia no es cuánta sofisticación tienes, es cuánta gente tiene que ponerse de acuerdo.

Nombres que dicen el papel, no el valor

duration-fast sobrevive. duration-150 se convierte en una mentira la primera vez que alguien lo ajusta a 120ms sin renombrarlo, y renombrarlo significa tocar a todos los consumidores. Vale la misma regla que en los niveles de color: los primitivos pueden ser literales, los tokens semánticos tienen que decir la intención. Un test que funciona es leer el nombre en voz alta en una revisión de código y preguntarse si dice para qué sirve ese valor. duration-quick pasa. duration-modal pasa. duration-200-b no.

La escala se mantiene corta. Cinco o seis pasos de duración cubren casi cualquier interfaz, y cada paso de más es una decisión que alguien va a equivocar a las seis de un viernes.

Dónde encaja esto en el resto del sistema

Los tokens de comportamiento y de contexto se apoyan en la misma estructura de tres niveles que todo lo demás, así que el trabajo de nombres va primero: en convenciones de nombres de design tokens está el reparto entre primitivos, semánticos y de componente. Si todavía estás decidiendo qué es un token frente a las herramientas que ya usas, design tokens, variables CSS y Tailwind cubre ese terreno. Sobre motion, la revisión previa a publicar está en animación funcional de UI. Y el orden de construcción general, con motion y densidad en su sitio respecto a las demás categorías, está en estructura de un design system.