Escalas de estado

Una interfaz necesita colores para avisar: un mensaje informativo, un éxito, un aviso, un error. En esta lección verás cómo construye DesignToken101 esas escalas con el mismo método que el acento, por qué se nombran por su tono y por qué no hay escala verde.

En esta página

• Escalas por tono, no por rol
• Cómo se construyen
• Por qué no hay escala verde
• Las tres escalas
• Blanco y negro
• En Figma
• Lo que te llevas

Escalas por tono, no por rol

Los primitivos de estado son escalas puras, nombradas por su tono. El rol (información, éxito, aviso, error) lo pone el token semántico que apunta a ellas:

Por ejemplo, el texto de un mensaje de error en Light es color/text/danger/default, que apunta a color/red/700. Cómo se crean esos alias lo verás en el módulo Relaciones.

Cómo se construyen

Las tres escalas siguen el método del acento (Escalas de color), con dos diferencias:

• La referencia es la escala de Tailwind CSS del mismo tono: red, amber y blue de Tailwind CSS v4 (Tailwind CSS: Colors). No hay color de marca que colocar, así que se toman L, C y también H de cada paso. El tono de Tailwind varía un poco de un paso a otro: en red, de 17,4 en el 50 a 27,5 en el 700.
• El croma se multiplica por 0,66, la misma reducción que tiene el acento frente a su referencia. Así las escalas de estado tienen la misma intensidad que la marca y no compiten con ella.

Después, igual que el acento: ajuste a sRGB reduciendo el croma (ninguno de los 33 pasos lo necesita) y contraste calculado sobre el hex.

Por qué no hay escala verde

El acento de DesignToken101 ya es verde: tono 165,4. Una escala green para el éxito sería casi idéntica a emerald. Por eso success usa emerald.

La consecuencia: el éxito y el acento comparten color. El color no basta para distinguir un mensaje de éxito de un elemento de marca, y no debe bastar. El criterio 1.4.1 Use of Color (nivel A) de WCAG 2.2 dice que el color no puede ser el único medio visual para transmitir información o distinguir un elemento (Understanding 1.4.1).

Las tres escalas

Cada escala, primero de forma visual y después con sus valores. El contraste con blanco se calcula con la fórmula de WCAG 2.2 sobre el hex.

red

amber

blue

Fíjate en el amber: hasta el 600 no llega a 3:1 con blanco. Los amarillos son muy claros en todos sus pasos medios, como viste con HSL en Espacio de color. Por eso el texto de aviso en Light usa amber/700.

Blanco y negro

Dos primitivos más, sueltos, fuera de las escalas:

En Figma

Igual que en Escalas de color: una variable Color por paso (color/red/50 … color/blue/950), más color/white y color/black. Sin scope, ocultas al publicar y con su code syntax Web, por ejemplo var(--t101-color-red-700).

import sys; sys.path.insert(0, "tools")
import scales as s

estado = s.status_scales(0.66)   # el factor de DesignToken101
estado["red"][7]["hex"]          # paso 700 → '#A63D35'

intensas = s.status_scales(1.0)  # croma original de Tailwind, ajustado a sRGB

Fuentes

• Tailwind CSS: Colors
• Tailwind CSS: theme.css (código fuente, v4.3.3)
• Tailwind CSS v4.0 (blog oficial)
• WCAG 2.2: Understanding 1.4.1 Use of Color
• WCAG 2.2: Understanding 1.4.3 Contrast (Minimum)