Los tokens de diseño son las reglas base que definen la identidad visual de un producto digital. Aprenderás cómo se estructuran, nombran y documentan dentro de un sistema real como Carbon Design System, para que puedas aplicarlos en tu propio proyecto sin perder consistencia entre diseño y desarrollo.

¿Qué son los tokens de diseño y por qué importan?

Piensa en ellos como el ADN visual de tu producto. Definen colores, tipografía, espaciados, íconos y cualquier decisión visual que se repita en pantalla. En Carbon Design System se nombran como elements, y al abrirlos se despliega cada categoría que compone el sistema.

¿Qué es un token de diseño? Es una variable que guarda una decisión visual, como un color o un espaciado, para reutilizarla de forma consistente en diseño y código.

La idea central es que cualquier persona del equipo, diseñadora o desarrolladora, pueda entender y aplicar la misma regla sin reinventar nada.

¿Cómo se estructura la retícula base del sistema?

Todo en Carbon parte de una retícula de 2 píxeles. Esa malla es la base de construcción de componentes, órdenes y espaciados.

Dentro de la sección de grid encuentras tres bloques clave:

• Vista general, donde se explica el rol de la retícula en escalas, proporciones y contrastes.
• Usos, que muestran cómo se comporta en diferentes categorías del sistema.
• Codificación, con documentación lista para implementar en CSS y React.

Esa documentación técnica es lo que conecta el diseño con el equipo de desarrollo. Aunque tu sistema use otro lenguaje, la regla es siempre dejarlo escrito.

¿Cómo organizar los colores como tokens?

El color no es solo estética, es jerarquía. En Carbon, la sección de color sigue la misma estructura: uso general, usos específicos, tokens y código.

Los colores se nombran según su función dentro de la pantalla: fondo de pantalla, fondo de pop-ups, campos de texto, layers ascendentes. Esa nomenclatura por función es la que evita confusiones cuando alguien entra al proyecto seis meses después.

¿Cómo nombrar tokens de color con sentido?

Usa nombres claros e intuitivos que describan el rol, no solo el tono:

• Color primario para la identidad principal de marca.
• Color secundario para acciones de soporte.
• Color de fondo para superficies base.
• Sufijos para estados, como color primario hover o color primario disabled.

La clave está en organizar los colores por divisiones de la página y no por su valor hexadecimal.

¿Cómo se manejan íconos, pictogramas y animación?

La librería de íconos de Carbon es amplia y descargable en SVG para integrarla directo al desarrollo. También entrega recursos abribles en Figma.

La construcción tiene reglas precisas:

• El ícono más pequeño mide 16 píxeles.
• El ícono más grande mide 32 píxeles.
• Cada uno define áreas de seguridad, combinación con tipografía y usos correctos e incorrectos.

Los pictogramas funcionan igual: librería, usos e implementación en código. Y la sección de animación complementa cómo deben moverse los elementos dentro del sistema.

¿Cuál es la diferencia entre íconos y pictogramas? Los íconos comunican acciones funcionales y son pequeños; los pictogramas son ilustraciones más expresivas que apoyan narrativa o conceptos.

¿En qué se diferencian el grid y el espaciado?

Aquí está la confusión clásica. El grid organiza los elementos de forma general en el layout, mientras que el espaciado mide la distancia entre cada componente. Por ejemplo, la separación entre una barra de búsqueda y una card de producto, o entre un label y un botón.

En Carbon, el espaciado arranca en 2 píxeles y crece en múltiplos de 4. Esa progresión mantiene coherencia con la retícula base.

¿Cómo nombrar los tokens de espaciado?

Lo más práctico es usar escalas cortas y predecibles:

• espacio XS para separaciones mínimas.
• espacio SM para componentes cercanos.
• espacio MD para bloques medianos.
• Nombres específicos como espacio botón cuando hablas de márgenes contextuales.

Después, en la documentación de código, se exporta cada distancia para que el equipo la consuma directo desde la librería.

¿Cómo se documenta la tipografía dentro del sistema?

La tipografía tiene su propio manual: familias, pesos, tamaños y estrategias de uso. En un megamenú, por ejemplo, los pesos tipográficos categorizan la información y guían la lectura.

Los type sets dividen los titulares y cuerpos según peso, y entregan el código listo para copiar en desarrollo. Esa estructura asegura que cada texto cumpla su función, ya sea un titular, un cuerpo o un caption.

Para nombrarlos, describe la función: fuente titular, fuente cuerpo, fuente caption. Así cualquiera identifica rápido qué estilo aplica donde.

¿Cómo crear tu primer set de tokens?

Es momento de practicar. Define tu propio set básico siguiendo esta ruta:

1. Colores: elige un color principal de marca, dos o tres secundarios y suma estados como hover y disabled.
2. Tipografía: selecciona una fuente para títulos y otra para cuerpo, con sus tamaños y pesos definidos.
3. Espaciados: establece márgenes y paddings base para tus componentes, partiendo de una unidad mínima y creciendo en múltiplos.

La regla de oro: que sean consistentes y predecibles. Comparte tu set en los comentarios para que podamos revisarlo juntos.