Design tokens

Los design tokens son los valores con nombre sobre los que se construye un design system. Aquí reunimos cómo nombrarlos y estructurarlos, el formato del W3C y los temas y marcas que salen de un solo conjunto de primitivas.

4 artículos

Empieza aquí

Three stacked isometric planes: a dense grid of colour swatches at the bottom, a few tiles in the middle, one component card on top, joined by a lit line

Diseño

Convenciones de nombres de design tokens: sistema de 3 niveles

Un esquema de tres niveles (primitivo, semántico, de componente) mantiene estables los nombres al crecer el sistema. Cómo estructurar y nombrar cada capa.

Diseño

Design tokens multimarca: 6 pasos desde un solo nivel de primitivas

Un nivel de primitivas, un archivo de alias por marca y componentes que solo leen nombres semánticos: seis pasos sobre la especificación DTCG 2025.10 y Figma.

Thirteen black tiles on a white ground, one showing colour stripes and twelve showing size, weight, timing, easing, shadow and other token types

Diseño

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

El formato DTCG estable tiene 13 tipos de token. Uno es color. Los otros doce llevan medida, tiempo, easing y estado, y casi nadie los define.

Three stacked bands: three lit tiles on top, six swatch pills in the middle and eighteen small chips at the bottom, each joined by lines to the one above

Diseño

Design tokens vs variables CSS vs Tailwind, explicado (2026)

Los design tokens, las variables CSS y Tailwind ocupan tres capas: significado, valores en runtime y clases utility. Cómo elegir y cómo se combinan.

Volver a Apuntes