Fundamentos · tokens

Generado desde «Aithu · UX» el 2026-10-26: 461 variables, 15 estilos de texto, 6 efectos y 3 pinturas. El nombre de código es el codeSyntax de Dev Mode. El contraste es WCAG 2 contra surface/neutral/01-base (los colores con alfa se componen sobre ella).

Color · semántica por capa

base/

MuestraTokenDescripciónValorCódigoContraste
base/fixed/whiteBlanco fijo (no cambia con el tema): tarjetas sobre el panel de contenido (Zoren, 23-oct), áreas sobre fotos.#ffffffvar(--color-base-fixed-white)1.05:1—
base/fixed/blackNegro fijo (no cambia con el tema): base de velos y sombras.#000000var(--color-base-fixed-black)19.96:1AAA
base/contrast/whiteBlanco de contraste: se invertiría en un tema oscuro (hoy = fixed). Para lo que debe contrastar con su fondo.#ffffffvar(--color-base-contrast-white)1.05:1—
base/contrast/blackNegro de contraste: se invertiría en un tema oscuro (hoy = fixed).#000000var(--color-base-contrast-black)19.96:1AAA
base/logo/navyLogo de Aithu: navy de marca (#293042). Fijo, no cambia con el tema.#293042var(--color-base-logo-navy)12.51:1AAA
base/logo/burgundyLogo de Aithu: burgundy de marca (#6C1E34). Fijo, no cambia con el tema.#6c1e34var(--color-base-logo-burgundy)10.66:1AAA

surface/

MuestraTokenDescripciónValorCódigoContraste
surface/neutral/01-baseSuperficie base: panel de contenido del AppShell y fondos de campos. Referencia de contraste de todo el sistema. · 1.00:1 contra Sand 05.#faf9f7var(--color-surface-neutral-01-base)1.00:1—
surface/neutral/02-subtleLienzo de la app (detrás del rail y del panel) y fondo de fotos de clientes (Imagery). · 1.12:1 contra Sand 05.#efece6var(--color-surface-neutral-02-subtle)1.12:1—
surface/neutral/03-softFondo gris suave: estado pressed de tarjetas, placeholder de imagen, burbuja del ejecutivo. · 1.06:1 contra Sand 05.#f0f3f4var(--color-surface-neutral-03-soft)1.06:1—
surface/neutral/04-tintFondo gris marcado: pista de barras de progreso, divisores gruesos. · 1.28:1 contra Sand 05.#dadfe1var(--color-surface-neutral-04-tint)1.28:1—
surface/neutral/05-faintRelleno gris visible: punto del Badge neutral, estados vacíos. · 2.11:1 contra Sand 05.#a9afb1var(--color-surface-neutral-05-faint)2.11:1—
surface/disabled/04-tintFondo de controles deshabilitados (no se usa opacidad). · 1.28:1 contra Sand 05.#dadfe1var(--color-surface-disabled-04-tint)1.28:1—
surface/brand/03-softFondo azul suave: Objective, ícono «Disponible», hover de controles. · 1.02:1 contra Sand 05.#f4f7fdvar(--color-surface-brand-03-soft)1.02:1—
surface/brand/04-tintFondo marcado (hover de fondos suaves, pistas de progreso) de azul de Aithu: acciones, enlaces y foco (DV-06). · 1.61:1 contra Sand 05.#bbc7e4var(--color-surface-brand-04-tint)1.61:1—
surface/brand/05-faintRelleno visible (puntos e indicadores) de azul de Aithu: acciones, enlaces y foco (DV-06). · 2.13:1 contra Sand 05.#9fadd1var(--color-surface-brand-05-faint)2.13:1—
surface/informational/03-softFondo suave de información (Sky): «Disponible», «Nuevo», «En curso» y avisos informativos. · 1.10:1 contra Sand 05.#e5f0fcvar(--color-surface-informational-03-soft)1.10:1—
surface/informational/04-tintFondo marcado (hover de fondos suaves, pistas de progreso) de información (Sky): «Disponible», «Nuevo», «En curso» y avisos informativos. · 1.59:1 contra Sand 05.#accbeevar(--color-surface-informational-04-tint)1.59:1—
surface/informational/05-faintRelleno visible (puntos e indicadores) de información (Sky): «Disponible», «Nuevo», «En curso» y avisos informativos. · 2.12:1 contra Sand 05.#89b1e0var(--color-surface-informational-05-faint)2.12:1—
surface/positive/03-softFondo suave de positivo (Green): «Logrado», «Completado» y confirmaciones. · 1.09:1 contra Sand 05.#e6f2eavar(--color-surface-positive-03-soft)1.09:1—
surface/positive/04-tintFondo marcado (hover de fondos suaves, pistas de progreso) de positivo (Green): «Logrado», «Completado» y confirmaciones. · 1.58:1 contra Sand 05.#aed1bavar(--color-surface-positive-04-tint)1.58:1—
surface/positive/05-faintRelleno visible (puntos e indicadores) de positivo (Green): «Logrado», «Completado» y confirmaciones. · 2.06:1 contra Sand 05.#8bbb9dvar(--color-surface-positive-05-faint)2.06:1—
surface/warning/03-softFondo suave de aviso (Amber): «Por mejorar» y avisos recuperables. · 1.09:1 contra Sand 05.#f7efd4var(--color-surface-warning-03-soft)1.09:1—
surface/warning/04-tintFondo marcado (hover de fondos suaves, pistas de progreso) de aviso (Amber): «Por mejorar» y avisos recuperables. · 1.28:1 contra Sand 05.#f0dda7var(--color-surface-warning-04-tint)1.28:1—
surface/warning/05-faintRelleno visible (puntos e indicadores) de aviso (Amber): «Por mejorar» y avisos recuperables. · 1.61:1 contra Sand 05.#e7c361var(--color-surface-warning-05-faint)1.61:1—
surface/danger/03-softFondo suave de error (Red): «Crítico», errores y validaciones. · 1.11:1 contra Sand 05.#fce9e7var(--color-surface-danger-03-soft)1.11:1—
surface/danger/04-tintFondo marcado (hover de fondos suaves, pistas de progreso) de error (Red): «Crítico», errores y validaciones. · 1.64:1 contra Sand 05.#f1b7b0var(--color-surface-danger-04-tint)1.64:1—
surface/danger/05-faintRelleno visible (puntos e indicadores) de error (Red): «Crítico», errores y validaciones. · 2.21:1 contra Sand 05.#e6958cvar(--color-surface-danger-05-faint)2.21:1—
surface/brand/primaryRelleno de la acción primaria: Button primary, IconButton primary (enviar), FilterChip seleccionado. Una por pantalla (DV-16). · 8.83:1 contra Sand 05.#38466cvar(--color-surface-brand-primary)8.83:1AAA
surface/brand/primary-hoverHover de la acción primaria (= navy de marca #293042). · 12.51:1 contra Sand 05.#293042var(--color-surface-brand-primary-hover)12.51:1AAA
surface/burgundy/03-softFondo suave del agente. · 1.03:1 contra Sand 05.#fff3f5var(--color-surface-burgundy-03-soft)1.03:1—
surface/burgundy/07-midRelleno del isotipo del coach. · 10.66:1 contra Sand 05.#6c1e34var(--color-surface-burgundy-07-mid)10.66:1AAA
surface/sand/03-softFondo suave de arena (Sand): decoración y fondos de marca; nunca estados. · 1.12:1 contra Sand 05.#efece6var(--color-surface-sand-03-soft)1.12:1—
surface/sand/04-tintFondo marcado (hover de fondos suaves, pistas de progreso) de arena (Sand): decoración y fondos de marca; nunca estados. · 1.30:1 contra Sand 05.#e4dccavar(--color-surface-sand-04-tint)1.30:1—
surface/sand/05-faintRelleno visible (puntos e indicadores) de arena (Sand): decoración y fondos de marca; nunca estados. · 1.94:1 contra Sand 05.#d2b087var(--color-surface-sand-05-faint)1.94:1—
surface/mauve/03-softFondo suave de secundario de marca (Mauve): categorías y decoración; nunca estados ni acciones. · 1.03:1 contra Sand 05.#fcf4f7var(--color-surface-mauve-03-soft)1.03:1—
surface/mauve/04-tintFondo marcado (hover de fondos suaves, pistas de progreso) de secundario de marca (Mauve): categorías y decoración; nunca estados ni acciones. · 1.64:1 contra Sand 05.#e0bcc8var(--color-surface-mauve-04-tint)1.64:1—
surface/mauve/05-faintRelleno visible (puntos e indicadores) de secundario de marca (Mauve): categorías y decoración; nunca estados ni acciones. · 1.93:1 contra Sand 05.#d5abb9var(--color-surface-mauve-05-faint)1.93:1—
surface/steel/03-softFondo suave de secundario de marca (Steel): categorías y decoración; nunca estados ni acciones. · 1.11:1 contra Sand 05.#e7eef4var(--color-surface-steel-03-soft)1.11:1—
surface/steel/04-tintFondo marcado (hover de fondos suaves, pistas de progreso) de secundario de marca (Steel): categorías y decoración; nunca estados ni acciones. · 1.60:1 contra Sand 05.#b6caddvar(--color-surface-steel-04-tint)1.60:1—
surface/steel/05-faintRelleno visible (puntos e indicadores) de secundario de marca (Steel): categorías y decoración; nunca estados ni acciones. · 2.11:1 contra Sand 05.#96b1ccvar(--color-surface-steel-05-faint)2.11:1—
surface/glass/white-a10Relleno de capas con vidrio (background blur): blanco al 10%. Toda capa con background blur lleva relleno con alpha; si es opaco, el blur no se ve.rgb(255 255 255 / 10%)var(--color-surface-glass-white-a10)1.01:1—
surface/brand/primary-pressedFondo del botón primario al presionar. Un paso más oscuro que hover (Navy 95 directo: la Perceptual termina en PD08, que ya usa hover). 23-oct.#1a2542var(--color-surface-brand-primary-pressed)14.39:1AAA
surface/glass/white-a30Relleno de capas con vidrio (background blur): blanco al 30 %, para vidrio sobre fotos u oscuros (etiquetas sobre retrato). Toda capa con background blur lleva relleno con alpha; si es opaco, el blur no se ve (DV-17).rgb(255 255 255 / 30%)var(--color-surface-glass-white-a30)1.02:1—
surface/scrim/defaultVelo detrás de diálogos y del panel superpuesto: negro al 40 % (Alpha/Neutral 100 a40). Va siempre con el estilo de efecto Blur/Scrim.rgb(0 0 0 / 40%)var(--color-surface-scrim-default)2.83:1—
surface/glass/black-a30Relleno de capas con vidrio (background blur): negro al 30 %, para vidrio oscuro sobre fotos claras (Tag glass-dark). Toda capa con background blur lleva relleno con alpha; si es opaco, el blur no se ve (DV-17).rgb(0 0 0 / 30%)var(--color-surface-glass-black-a30)2.10:1—

text/

MuestraTokenDescripciónValorCódigoContraste
text/neutral/06-mutedTexto secundario: metadatos, ayudas, descripciones, placeholders legibles. · 5.26:1 contra Sand 05 (AA texto).#66696avar(--color-text-neutral-06-muted)5.26:1AA
text/neutral/07-midTexto de cuerpo. · 10.26:1 contra Sand 05 (AA texto).#3b3e3evar(--color-text-neutral-07-mid)10.26:1AAA
text/neutral/08-strongTítulos y texto destacado. · 13.35:1 contra Sand 05 (AA texto).#2a2c2cvar(--color-text-neutral-08-strong)13.35:1AAA
text/neutral/09-maxTexto principal de máximo contraste. · 16.44:1 contra Sand 05 (AA texto).#191b1bvar(--color-text-neutral-09-max)16.44:1AAA
text/neutral/04-tintTexto muy tenue, solo decorativo o duplicado en otro lado (< 4.5:1: nunca información necesaria). · 2.11:1 contra Sand 05 (no AA para texto).#a9afb1var(--color-text-neutral-04-tint)2.11:1—
text/brand/07-midTexto en color de azul de Aithu: acciones, enlaces y foco (DV-06). · 8.83:1 contra Sand 05 (AA texto).#38466cvar(--color-text-brand-07-mid)8.83:1AAA
text/brand/08-strongTexto en color de mayor contraste de azul de Aithu: acciones, enlaces y foco (DV-06). · 12.51:1 contra Sand 05 (AA texto).#293042var(--color-text-brand-08-strong)12.51:1AAA
text/informational/07-midTexto en color de información (Sky): «Disponible», «Nuevo», «En curso» y avisos informativos. · 8.83:1 contra Sand 05 (AA texto).#124784var(--color-text-informational-07-mid)8.83:1AAA
text/informational/08-strongTexto en color de mayor contraste de información (Sky): «Disponible», «Nuevo», «En curso» y avisos informativos. · 11.74:1 contra Sand 05 (AA texto).#01346avar(--color-text-informational-08-strong)11.74:1AAA
text/positive/07-midTexto en color de positivo (Green): «Logrado», «Completado» y confirmaciones. · 8.40:1 contra Sand 05 (AA texto).#025630var(--color-text-positive-07-mid)8.40:1AAA
text/positive/08-strongTexto en color de mayor contraste de positivo (Green): «Logrado», «Completado» y confirmaciones. · 11.19:1 contra Sand 05 (AA texto).#024123var(--color-text-positive-08-strong)11.19:1AAA
text/warning/07-midTexto en color de aviso (Amber): «Por mejorar» y avisos recuperables. · 8.84:1 contra Sand 05 (AA texto).#5e4203var(--color-text-warning-07-mid)8.84:1AAA
text/warning/08-strongTexto en color de mayor contraste de aviso (Amber): «Por mejorar» y avisos recuperables. · 11.75:1 contra Sand 05 (AA texto).#483002var(--color-text-warning-08-strong)11.75:1AAA
text/danger/07-midTexto en color de error (Red): «Crítico», errores y validaciones. · 9.47:1 contra Sand 05 (AA texto).#8a0604var(--color-text-danger-07-mid)9.47:1AAA
text/danger/08-strongTexto en color de mayor contraste de error (Red): «Crítico», errores y validaciones. · 12.33:1 contra Sand 05 (AA texto).#690402var(--color-text-danger-08-strong)12.33:1AAA
text/brand/on-primaryTexto sobre surface/brand/primary. · 9.29:1 contra surface/brand/primary.#ffffffvar(--color-text-brand-on-primary)1.05:1—
text/brand/actionTexto de acciones terciarias y enlaces; RailItem activo. · 8.83:1 contra Sand 05 (AA texto).#38466cvar(--color-text-brand-action)8.83:1AAA
text/burgundy/07-midNombre «Aithu Sales Coach» en la conversación y en los chats (DV-24). · 10.66:1 contra Sand 05 (AA texto).#6c1e34var(--color-text-burgundy-07-mid)10.66:1AAA
text/sand/07-midTexto en color de arena (Sand): decoración y fondos de marca; nunca estados. · 8.80:1 contra Sand 05 (AA texto).#57442cvar(--color-text-sand-07-mid)8.80:1AAA
text/mauve/07-midTexto en color de secundario de marca (Mauve): categorías y decoración; nunca estados ni acciones. · 9.17:1 contra Sand 05 (AA texto).#6c3244var(--color-text-mauve-07-mid)9.17:1AAA
text/steel/07-midTexto en color de secundario de marca (Steel): categorías y decoración; nunca estados ni acciones. · 8.75:1 contra Sand 05 (AA texto).#294a6avar(--color-text-steel-07-mid)8.75:1AAA
text/neutral/on-primaryTexto blanco sobre fotos y fundidos oscuros (nombre en ClientPortrait, etiquetas sobre retrato). · Sobre la parada opaca de Fade/Retrato (Navy 80): 9.29:1.#ffffffvar(--color-text-neutral-on-primary)1.05:1—
text/neutral/05-faintTexto deshabilitado y placeholders tenues (< 4.5:1: nunca información necesaria). No existe text/disabled: el texto deshabilitado usa este token (Zoren, 26-oct). · 2.95:1 contra Sand 05 (no AA para texto).#8e9395var(--color-text-neutral-05-faint)2.95:1—

icons/

MuestraTokenDescripciónValorCódigoContraste
icons/neutral/06-mutedÍcono secundario y de controles inactivos (RailItem en reposo). · 5.26:1 contra Sand 05.#66696avar(--color-icons-neutral-06-muted)5.26:1AA
icons/neutral/07-midÍcono principal (hover del RailItem). · 10.26:1 contra Sand 05.#3b3e3evar(--color-icons-neutral-07-mid)10.26:1AAA
icons/neutral/08-strongÍcono destacado. · 13.35:1 contra Sand 05.#2a2c2cvar(--color-icons-neutral-08-strong)13.35:1AAA
icons/neutral/09-maxÍcono de máximo contraste; tono por defecto de los Icon/*. · 16.44:1 contra Sand 05.#191b1bvar(--color-icons-neutral-09-max)16.44:1AAA
icons/disabled/05-faintÍcono de controles deshabilitados. · 2.11:1 contra Sand 05.#a9afb1var(--color-icons-disabled-05-faint)2.11:1—
icons/brand/06-mutedÍcono secundario de azul de Aithu: acciones, enlaces y foco (DV-06). · 4.27:1 contra Sand 05.#6676a1var(--color-icons-brand-06-muted)4.27:1AA grande / UI
icons/brand/07-midÍcono principal de azul de Aithu: acciones, enlaces y foco (DV-06). · 8.83:1 contra Sand 05.#38466cvar(--color-icons-brand-07-mid)8.83:1AAA
icons/informational/06-mutedÍcono secundario de información (Sky): «Disponible», «Nuevo», «En curso» y avisos informativos. · 6.25:1 contra Sand 05.#285e9fvar(--color-icons-informational-06-muted)6.25:1AA
icons/informational/07-midÍcono principal de información (Sky): «Disponible», «Nuevo», «En curso» y avisos informativos. · 8.83:1 contra Sand 05.#124784var(--color-icons-informational-07-mid)8.83:1AAA
icons/positive/06-mutedÍcono secundario de positivo (Green): «Logrado», «Completado» y confirmaciones. · 6.17:1 contra Sand 05.#1e6b42var(--color-icons-positive-06-muted)6.17:1AA
icons/positive/07-midÍcono principal de positivo (Green): «Logrado», «Completado» y confirmaciones. · 8.40:1 contra Sand 05.#025630var(--color-icons-positive-07-mid)8.40:1AAA
icons/warning/06-mutedÍcono secundario de aviso (Amber): «Por mejorar» y avisos recuperables. · 4.30:1 contra Sand 05.#977009var(--color-icons-warning-06-muted)4.30:1AA grande / UI
icons/warning/07-midÍcono principal de aviso (Amber): «Por mejorar» y avisos recuperables. · 8.84:1 contra Sand 05.#5e4203var(--color-icons-warning-07-mid)8.84:1AAA
icons/danger/06-mutedÍcono secundario de error (Red): «Crítico», errores y validaciones. · 6.68:1 contra Sand 05.#a8281evar(--color-icons-danger-06-muted)6.68:1AA
icons/danger/07-midÍcono principal de error (Red): «Crítico», errores y validaciones. · 9.47:1 contra Sand 05.#8a0604var(--color-icons-danger-07-mid)9.47:1AAA
icons/brand/on-primaryÍcono sobre surface/brand/primary. · 9.29:1 contra surface/brand/primary.#ffffffvar(--color-icons-brand-on-primary)1.05:1—
icons/brand/actionÍconos de acción: enviar, micrófono, ítem activo del rail. · 8.83:1 contra Sand 05.#38466cvar(--color-icons-brand-action)8.83:1AAA
icons/burgundy/07-midÍconos del agente. · 10.66:1 contra Sand 05.#6c1e34var(--color-icons-burgundy-07-mid)10.66:1AAA
icons/sand/06-mutedÍcono secundario de arena (Sand): decoración y fondos de marca; nunca estados. · 4.25:1 contra Sand 05.#88745avar(--color-icons-sand-06-muted)4.25:1AA grande / UI
icons/mauve/06-mutedÍcono secundario de secundario de marca (Mauve): categorías y decoración; nunca estados ni acciones. · 5.26:1 contra Sand 05.#965568var(--color-icons-mauve-06-muted)5.26:1AA
icons/steel/06-mutedÍcono secundario de secundario de marca (Steel): categorías y decoración; nunca estados ni acciones. · 3.48:1 contra Sand 05.#6689abvar(--color-icons-steel-06-muted)3.48:1AA grande / UI

borders/

MuestraTokenDescripciónValorCódigoContraste
borders/neutral/04-tintBorde decorativo o divisor (< 3:1, decorativo a propósito): tarjetas, filetes de lista. Excepción DV-10: borde en reposo del campo en píldora. · 1.28:1 contra Sand 05.#dadfe1var(--color-borders-neutral-04-tint)1.28:1—
borders/neutral/05-faintDivisor decorativo (< 3:1). No usar como borde de un control: para eso borders/neutral/06-muted.#a9afb1var(--color-borders-neutral-05-faint)2.11:1—
borders/neutral/06-mutedBorde de control en reposo (≥ 3:1, WCAG 1.4.11): campos, checkbox. · 5.26:1 contra Sand 05.#66696avar(--color-borders-neutral-06-muted)5.26:1AA
borders/disabled/04-tintBorde de controles deshabilitados. · 1.28:1 contra Sand 05.#dadfe1var(--color-borders-disabled-04-tint)1.28:1—
borders/brand/04-tintBorde decorativo o divisor (< 3:1: no basta para delimitar un control) de azul de Aithu: acciones, enlaces y foco (DV-06). · 1.61:1 contra Sand 05.#bbc7e4var(--color-borders-brand-04-tint)1.61:1—
borders/brand/05-faintBorde suave de azul de Aithu: acciones, enlaces y foco (DV-06). · 2.13:1 contra Sand 05.#9fadd1var(--color-borders-brand-05-faint)2.13:1—
borders/brand/06-mutedBorde de control (≥ 3:1, WCAG 1.4.11) de azul de Aithu: acciones, enlaces y foco (DV-06). · 4.27:1 contra Sand 05.#6676a1var(--color-borders-brand-06-muted)4.27:1AA grande / UI
borders/informational/04-tintBorde decorativo o divisor (< 3:1: no basta para delimitar un control) de información (Sky): «Disponible», «Nuevo», «En curso» y avisos informativos. · 1.59:1 contra Sand 05.#accbeevar(--color-borders-informational-04-tint)1.59:1—
borders/informational/05-faintBorde suave de información (Sky): «Disponible», «Nuevo», «En curso» y avisos informativos. · 2.12:1 contra Sand 05.#89b1e0var(--color-borders-informational-05-faint)2.12:1—
borders/informational/06-mutedBorde de control (≥ 3:1, WCAG 1.4.11) de información (Sky): «Disponible», «Nuevo», «En curso» y avisos informativos. · 6.25:1 contra Sand 05.#285e9fvar(--color-borders-informational-06-muted)6.25:1AA
borders/positive/04-tintBorde decorativo o divisor (< 3:1: no basta para delimitar un control) de positivo (Green): «Logrado», «Completado» y confirmaciones. · 1.58:1 contra Sand 05.#aed1bavar(--color-borders-positive-04-tint)1.58:1—
borders/positive/05-faintBorde suave de positivo (Green): «Logrado», «Completado» y confirmaciones. · 2.06:1 contra Sand 05.#8bbb9dvar(--color-borders-positive-05-faint)2.06:1—
borders/positive/06-mutedBorde de control (≥ 3:1, WCAG 1.4.11) de positivo (Green): «Logrado», «Completado» y confirmaciones. · 6.17:1 contra Sand 05.#1e6b42var(--color-borders-positive-06-muted)6.17:1AA
borders/warning/04-tintBorde decorativo o divisor (< 3:1: no basta para delimitar un control) de aviso (Amber): «Por mejorar» y avisos recuperables. · 1.28:1 contra Sand 05.#f0dda7var(--color-borders-warning-04-tint)1.28:1—
borders/warning/05-faintBorde suave de aviso (Amber): «Por mejorar» y avisos recuperables. · 1.61:1 contra Sand 05.#e7c361var(--color-borders-warning-05-faint)1.61:1—
borders/warning/06-mutedBorde de control (≥ 3:1, WCAG 1.4.11) de aviso (Amber): «Por mejorar» y avisos recuperables. · 4.30:1 contra Sand 05.#977009var(--color-borders-warning-06-muted)4.30:1AA grande / UI
borders/danger/04-tintBorde decorativo o divisor (< 3:1: no basta para delimitar un control) de error (Red): «Crítico», errores y validaciones. · 1.64:1 contra Sand 05.#f1b7b0var(--color-borders-danger-04-tint)1.64:1—
borders/danger/05-faintBorde suave de error (Red): «Crítico», errores y validaciones. · 2.21:1 contra Sand 05.#e6958cvar(--color-borders-danger-05-faint)2.21:1—
borders/danger/06-mutedBorde de control (≥ 3:1, WCAG 1.4.11) de error (Red): «Crítico», errores y validaciones. · 6.68:1 contra Sand 05.#a8281evar(--color-borders-danger-06-muted)6.68:1AA
borders/brand/primaryBorde de la acción secundaria (Button secondary). · 8.83:1 contra Sand 05.#38466cvar(--color-borders-brand-primary)8.83:1AAA
borders/brand/focusAnillo de foco de teclado, 2 px (DV-25, WCAG 2.4.7). Con alpha-20 en el anillo exterior de Field. · 4.27:1 contra Sand 05.#6676a1var(--color-borders-brand-focus)4.27:1AA grande / UI
borders/sand/04-tintBorde decorativo o divisor (< 3:1: no basta para delimitar un control) de arena (Sand): decoración y fondos de marca; nunca estados. · 1.30:1 contra Sand 05.#e4dccavar(--color-borders-sand-04-tint)1.30:1—
borders/mauve/04-tintBorde decorativo o divisor (< 3:1: no basta para delimitar un control) de secundario de marca (Mauve): categorías y decoración; nunca estados ni acciones. · 1.64:1 contra Sand 05.#e0bcc8var(--color-borders-mauve-04-tint)1.64:1—
borders/steel/04-tintBorde decorativo o divisor (< 3:1: no basta para delimitar un control) de secundario de marca (Steel): categorías y decoración; nunca estados ni acciones. · 1.60:1 contra Sand 05.#b6caddvar(--color-borders-steel-04-tint)1.60:1—

fade/

MuestraTokenDescripciónValorCódigoContraste
fade/white/a0Fundido: blanco transparente. Extremo inferior de la barra superior.rgb(255 255 255 / 0%)var(--color-fade-white-a0)1.00:1—
fade/white/a100Fundido: blanco opaco. Extremo superior de la barra superior.#ffffffvar(--color-fade-white-a100)1.05:1—
fade/sand/a0Fundido decorativo: arena transparente. Borde de la elipse de fondo.rgb(239 236 230 / 0%)var(--color-fade-sand-a0)1.00:1—
fade/sand/a100Fundido decorativo: arena (= surface/sand/03-soft). Centro de la elipse de fondo.#efece6var(--color-fade-sand-a100)1.12:1—
fade/navy/a0Fundido del retrato del cliente: navy transparente (arriba).rgb(56 70 108 / 0%)var(--color-fade-navy-a0)1.00:1—
fade/navy/a56Fundido del retrato del cliente: navy al 56 % (parada media).rgb(41 48 66 / 56%)var(--color-fade-navy-a56)3.35:1AA grande / UI
fade/navy/a100Fundido del retrato del cliente: navy opaco (abajo, detrás del nombre).#38466cvar(--color-fade-navy-a100)8.83:1AAA

Tipografía · Desktop y Mobile

Clase `text-<estilo>` (+ font-primary cuando la familia es primary). El modo Mobile se aplica solo hasta 767 de ancho.

EstiloMuestraDesktopMobileClaseDescripción
display/md
Instrument Sans Medium		Entrena tus conversaciones32/40 · 500 · -0.428/36 · 500 · -0.3text-display-md font-primarySaludo del coach en Inicio y bienvenida. Máximo uno por pantalla. Instrument Sans Medium 32/40 (Mobile 28/36). Código: text-display-md (con su line-height y peso).
heading/lg
Instrument Sans Medium		Entrena tus conversaciones24/32 · 500 · -0.320/28 · 500 · -0.2text-heading-lg font-primaryTítulo de página (h1): «Mi ruta», «Elige con quién practicar». Instrument Sans Medium 24/32 (Mobile 20/28). Código: text-heading-lg (con su line-height y peso).
heading/md
Instrument Sans Medium		Entrena tus conversaciones20/28 · 500 · -0.218/26 · 500 · -0.2text-heading-md font-primaryTítulos de bloque, de diálogo y nombre del cliente en el retrato (h2). Instrument Sans Medium 20/28 (Mobile 18/26). Código: text-heading-md (con su line-height y peso).
heading/sm
Inter Semi Bold		Entrena tus conversaciones16/24 · 600 · 016/24 · 600 · 0text-heading-smTítulos de tarjeta y de grupo, título de la barra superior y breadcrumbs (h3). Instrument Sans Semibold 16/24. Código: text-heading-sm (con su line-height y peso).
body/md
Inter Regular		Entrena tus conversaciones16/24 · 400 · 016/24 · 400 · 0text-body-mdTexto principal: mensajes del chat, objetivo, descripciones. Inter Regular 16/24. Código: text-body-md (con su line-height y peso).
body/md-strong
Inter Semi Bold		Entrena tus conversaciones16/24 · 600 · 016/24 · 600 · 0text-body-md-strongbody/md con peso Semibold 600 (énfasis dentro de texto corrido). Tailwind: text-body-md-strong.
body/sm
Inter Regular		Entrena tus conversaciones14/20 · 400 · 014/20 · 400 · 0text-body-smTexto secundario: metadatos, situación del escenario, ayudas. Inter Regular 14/20. Código: text-body-sm (con su line-height y peso).
body/sm-strong
Inter Semi Bold		Entrena tus conversaciones14/20 · 600 · 014/20 · 600 · 0text-body-sm-strongbody/sm con peso Semibold 600 (énfasis dentro de texto corrido). Tailwind: text-body-sm-strong.
body/xs
Inter Regular		Entrena tus conversaciones12/16 · 400 · 012/16 · 400 · 0text-body-xsTexto pequeño: palabra del RailItem, notas, etiquetas de tarjeta. Inter Regular 12/16. Código: text-body-xs (con su line-height y peso).
body/xs-strong
Inter Semi Bold		Entrena tus conversaciones12/16 · 600 · 012/16 · 600 · 0text-body-xs-strongbody/xs con peso Semibold 600 (énfasis dentro de texto corrido). Tailwind: text-body-xs-strong.
label/md
Inter Medium		Entrena tus conversaciones16/24 · 500 · 016/24 · 500 · 0text-label-mdEtiqueta de controles grandes: Button md, campos. Inter Medium 16/24. Código: text-label-md (con su line-height y peso).
label/sm
Inter Medium		Entrena tus conversaciones14/20 · 500 · 014/20 · 500 · 0text-label-smEtiqueta de controles: Button sm, Chip, FilterChip, Badge. Inter Medium 14/20. Código: text-label-sm (con su line-height y peso).
label/xs
Inter Medium		Entrena tus conversaciones12/16 · 500 · 012/16 · 500 · 0text-label-xsEtiqueta de controles pequeños. Inter Medium 12/16. Código: text-label-xs (con su line-height y peso).
caption/md
Inter Regular		Entrena tus conversaciones12/16 · 400 · 0.1212/16 · 400 · 0.12text-caption-mdCaptions con tracking: kicker, rótulos de sección, «Cliente simulado · IA», pies de foto. Inter Regular 12/16. Código: text-caption-md (con su line-height y peso).
caption/md-strong
Inter Semi Bold		Entrena tus conversaciones12/16 · 600 · 0.1212/16 · 600 · 0.12text-caption-md-strongcaption/md con peso Semibold 600 (énfasis dentro de texto corrido). Tailwind: text-caption-md-strong.

Espacio, tamaño, radio, borde e ícono

Space/

MuestraTokenValorCódigoDescripción
Space/space-n-6x-24calc(var(--spacing) * -6)-24 px. Margen negativo para superponer (pilas de avatares, ajustes ópticos). Usar con moderación.
Space/space-n-4x-16calc(var(--spacing) * -4)-16 px. Margen negativo para superponer (pilas de avatares, ajustes ópticos). Usar con moderación.
Space/space-n-3x-12calc(var(--spacing) * -3)-12 px. Margen negativo para superponer (pilas de avatares, ajustes ópticos). Usar con moderación.
Space/space-n-2x-8calc(var(--spacing) * -2)-8 px. Margen negativo para superponer (pilas de avatares, ajustes ópticos). Usar con moderación.
Space/space-n-1x-4calc(var(--spacing) * -1)-4 px. Margen negativo para superponer (pilas de avatares, ajustes ópticos). Usar con moderación.
Space/space-n-0_5x-2calc(var(--spacing) * -0.5)-2 px. Margen negativo para superponer (pilas de avatares, ajustes ópticos). Usar con moderación.
Space/space-000px0 px (0 × base 4). Sin espacio. Padding y gap (DV-15).
Space/space-0_5x2calc(var(--spacing) * 0.5)2 px (0.5 × base 4). Medio paso: solo ajustes ópticos (nombre y descripción en ClientPortrait). Padding y gap (DV-15).
Space/space-1x4calc(var(--spacing) * 1)4 px (1 × base 4). Separaciones mínimas: ícono y texto, puntos del TypingIndicator. Padding y gap (DV-15).
Space/space-2x8calc(var(--spacing) * 2)8 px (2 × base 4). Gap interno de controles (ícono y etiqueta), elementos de una fila. Padding y gap (DV-15).
Space/space-3x12calc(var(--spacing) * 3)12 px (3 × base 4). Gap entre elementos de una tarjeta. Padding y gap (DV-15).
Space/space-4x16calc(var(--spacing) * 4)16 px (4 × base 4). Padding de tarjetas compactas; gap entre tarjetas. Padding y gap (DV-15).
Space/space-5x20calc(var(--spacing) * 5)20 px (5 × base 4). Padding de tarjetas y del panel de contenido. Padding y gap (DV-15).
Space/space-6x24calc(var(--spacing) * 6)24 px (6 × base 4). Padding de tarjetas grandes; separación entre bloques. Padding y gap (DV-15).
Space/space-7x28calc(var(--spacing) * 7)28 px (7 × base 4). Padding vertical de bloques destacados (identidad del retrato). Padding y gap (DV-15).
Space/space-8x32calc(var(--spacing) * 8)32 px (8 × base 4). Separación entre secciones de una pantalla. Padding y gap (DV-15).
Space/space-10x40calc(var(--spacing) * 10)40 px (10 × base 4). Separación entre secciones grandes. Padding y gap (DV-15).
Space/space-12x48calc(var(--spacing) * 12)48 px (12 × base 4). Márgenes de página. Padding y gap (DV-15).
Space/space-14x56calc(var(--spacing) * 14)56 px (14 × base 4). Márgenes amplios. Padding y gap (DV-15).
Space/space-16x64calc(var(--spacing) * 16)64 px (16 × base 4). Márgenes amplios. Padding y gap (DV-15).
Space/space-18x72calc(var(--spacing) * 18)72 px (18 × base 4). Separación de secciones de página muy grandes. Padding y gap (DV-15).
Space/space-20x80calc(var(--spacing) * 20)80 px (20 × base 4). Separación de secciones de página muy grandes. Padding y gap (DV-15).

Size/

MuestraTokenValorCódigoDescripción
Size/size-1x4calc(var(--spacing) * 1)4 px · 1 × base 4. Thin elements (progress bar track).
Size/size-2x8calc(var(--spacing) * 2)8 px · 2 × base 4. Thin elements (progress bar track).
Size/size-6x24calc(var(--spacing) * 6)24 px (6 × base 4). Íconos de 24 y elementos pequeños.
Size/size-8x32calc(var(--spacing) * 8)32 px (8 × base 4). Alto de la píldora del RailItem, Avatar sm.
Size/size-9x36calc(var(--spacing) * 9)36 px (9 × base 4). Alto de Chip y FilterChip, Button sm.
Size/size-10x40calc(var(--spacing) * 10)40 px (10 × base 4). Círculo visual de IconButton.
Size/size-11x44calc(var(--spacing) * 11)44 px (11 × base 4). Área táctil mínima (DV-25, WCAG 2.5.5): Button md, Avatar md, controles.
Size/size-12x48calc(var(--spacing) * 12)48 px (12 × base 4). Alto de TextField.
Size/size-14x56calc(var(--spacing) * 14)56 px (14 × base 4). Ancho de la píldora del RailItem.
Size/size-16x64calc(var(--spacing) * 16)64 px (16 × base 4). Elementos grandes.
Size/size-24x96calc(var(--spacing) * 24)96 px · 24 × base 4. Data visuals (progress ring).

Radius/

MuestraTokenValorCódigoDescripción
Radius/radius-00var(--radius-0)0 px. Sin redondeo.
Radius/radius-1x4var(--radius-1x)4 px. Redondeo mínimo: barras y marcas pequeñas.
Radius/radius-2x8var(--radius-2x)8 px. Miniaturas, swatches y elementos internos de una tarjeta.
Radius/radius-3x12var(--radius-3x)12 px. Tarjetas y Callout.
Radius/radius-5x20var(--radius-5x)20 px. Tarjetas grandes, retrato del cliente, panel de contenido, diálogos.
Radius/radius-full999var(--radius-full)Píldora. Píldoras: botones, chips, badges, campos del coach, avatares.

Border/

MuestraTokenValorCódigoDescripción
Border/border-000px0 px. Sin borde.
Border/border-0_50.50.5pxBorde fino de tarjeta con vidrio (B · Arena).
Border/border-111px1 px. Borde estándar de tarjetas y controles.
Border/border-1_51.51.5pxTrazo de íconos de línea (24 px).
Border/border-222px2 px. Anillo de foco y estados seleccionados (DV-25).
Border/border-444pxAnillo de foco (4 px al 20 %). Creado el 23-oct para Field.

Icon/

MuestraTokenValorCódigoDescripción
Icon/icon-4x16calc(var(--spacing) * 4)16 px. Ícono pequeño: separador de Breadcrumbs, íconos en Badge.
Icon/icon-5x20calc(var(--spacing) * 5)20 px. Ícono en botones y campos.
Icon/icon-6x24calc(var(--spacing) * 6)24 px. Ícono estándar del set Icon/* (rail, acciones).

Efectos

VariableValorCódigoDescripción
Shadow/shadow-y4var(--shadow-card)Desplazamiento vertical de Shadow/Card, la única sombra del sistema (DV-17).
Shadow/shadow-blur16var(--shadow-card)Desenfoque de Shadow/Card (DV-17).
Blur/blur-card20var(--blur-card)Vidrio de tarjetas (estilo Blur/Card); siempre con relleno surface/glass/* (DV-17).
Blur/blur-bar10var(--blur-bar)Vidrio progresivo de la barra superior (estilo Blur/Bar, 10 arriba → 0 abajo).
Alpha/alpha-000%transparente
Alpha/alpha-666%sombra (DV-17)
Alpha/alpha-202020%anillo de foco
Alpha/alpha-404040%velo de modal
Alpha/alpha-606060%vidrio esmerilado
Alpha/alpha-100100100%opaco
Blur/blur-hint4var(--blur-hint)Desenfoque de la tarjeta que asoma en un carrusel.
Blur/blur-decor28var(--blur-decor)Desenfoque de formas decorativas del lienzo.
Alpha/alpha-707070%Tarjeta que asoma en un carrusel (con Blur/Hint y la flecha).
Blur/blur-scrim20var(--blur-scrim)Desenfoque del fondo detrás de un velo (scrim). Mismo valor que blur-card hoy; se ajusta por separado.

Estilos de efecto y pinturas (utilidades)

Icon tone

Color del ícono. No se elige a mano: lo fija el modo «Icon tone» del componente que contiene el ícono (RailItem, StatusIcon…). Sin modo, el ícono hereda el color del texto; un contenedor fija el modo con la utilidad icon-tone-<modo>.

Privadas

186 variables de .Color - Primitives y .Color - Perceptual: existen en CSS para que la capa semántica las referencie, no generan clase y el linter rechaza usarlas en pantallas (DV-26).

.Color - Primitives (132)
  • Navy/Navy 05#f4f7fd
  • Navy/Navy 10#eaeefa
  • Navy/Navy 20#d6def1
  • Navy/Navy 30#bbc7e4
  • Navy/Navy 40#9fadd1
  • Navy/Navy 50#8191ba
  • Navy/Navy 60#6676a1
  • Navy/Navy 70#4c5c86
  • Navy/Navy 80#38466c
  • Navy/Navy 90#293042
  • Navy/Navy 95#1a2542
  • Navy/Navy 99#0d142b
  • Burgundy/Burgundy 05#fff3f5
  • Burgundy/Burgundy 10#ffe8eb
  • Burgundy/Burgundy 20#fbd2d8
  • Burgundy/Burgundy 30#f1b5bf
  • Burgundy/Burgundy 40#e196a3
  • Burgundy/Burgundy 50#ca7586
  • Burgundy/Burgundy 60#b0576b
  • Burgundy/Burgundy 70#933c51
  • Burgundy/Burgundy 80#6c1e34
  • Burgundy/Burgundy 90#5f152b
  • Burgundy/Burgundy 95#4a081e
  • Burgundy/Burgundy 99#31000f
  • Sand/Sand 05#faf9f7
  • Sand/Sand 10#efece6
  • Sand/Sand 20#e4dcca
  • Sand/Sand 30#d8c4a6
  • Sand/Sand 40#d2b087
  • Sand/Sand 50#a48f75
  • Sand/Sand 60#88745a
  • Sand/Sand 70#6e5a42
  • Sand/Sand 80#57442c
  • Sand/Sand 90#44311a
  • Sand/Sand 95#2e2519
  • Sand/Sand 99#1d1409
  • Mauve/Mauve 05#fcf4f7
  • Mauve/Mauve 10#f8eaef
  • Mauve/Mauve 20#efd6de
  • Mauve/Mauve 30#e0bcc8
  • Mauve/Mauve 40#d5abb9
  • Mauve/Mauve 50#b87f91
  • Mauve/Mauve 60#965568
  • Mauve/Mauve 70#86475a
  • Mauve/Mauve 80#6c3244
  • Mauve/Mauve 90#552132
  • Mauve/Mauve 95#411424
  • Mauve/Mauve 99#2a0714
  • Steel/Steel 05#f4f7fa
  • Steel/Steel 10#e7eef4
  • Steel/Steel 20#d3e0eb
  • Steel/Steel 30#b6cadd
  • Steel/Steel 40#96b1cc
  • Steel/Steel 50#6689ab
  • Steel/Steel 60#577b9e
  • Steel/Steel 70#3d6183
  • Steel/Steel 80#294a6a
  • Steel/Steel 90#193853
  • Steel/Steel 95#0d2840
  • Steel/Steel 99#03172a
  • Green/Green 05#f2f9f4
  • Green/Green 10#e6f2ea
  • Green/Green 20#cee5d6
  • Green/Green 30#aed1ba
  • Green/Green 40#8bbb9d
  • Green/Green 50#67a27d
  • Green/Green 60#448860
  • Green/Green 70#1e6b42
  • Green/Green 80#025630
  • Green/Green 90#024123
  • Green/Green 95#012f18
  • Green/Green 99#001c0c
  • Amber/Amber 05#faf7e9
  • Amber/Amber 10#f7efd4
  • Amber/Amber 20#f0dda7
  • Amber/Amber 30#e7c361
  • Amber/Amber 40#d6a711
  • Amber/Amber 50#b68b09
  • Amber/Amber 60#977009
  • Amber/Amber 70#795704
  • Amber/Amber 80#5e4203
  • Amber/Amber 90#483002
  • Amber/Amber 95#352201
  • Amber/Amber 99#211300
  • Red/Red 05#fef4f3
  • Red/Red 10#fce9e7
  • Red/Red 20#f9d4d0
  • Red/Red 30#f1b7b0
  • Red/Red 40#e6958c
  • Red/Red 50#d57165
  • Red/Red 60#c04d41
  • Red/Red 70#a8281e
  • Red/Red 80#8a0604
  • Red/Red 90#690402
  • Red/Red 95#4f0201
  • Red/Red 99#320000
  • Sky/Sky 05#f1f8fe
  • Sky/Sky 10#e5f0fc
  • Sky/Sky 20#cce0f7
  • Sky/Sky 30#accbee
  • Sky/Sky 40#89b1e0
  • Sky/Sky 50#6595ce
  • Sky/Sky 60#4579b8
  • Sky/Sky 70#285e9f
  • Sky/Sky 80#124784
  • Sky/Sky 90#01346a
  • Sky/Sky 95#002550
  • Sky/Sky 99#001532
  • Neutral/Neutral 00#ffffff
  • Neutral/Neutral 01#f9fafb
  • Neutral/Neutral 05#f0f3f4
  • Neutral/Neutral 10#eceff0
  • Neutral/Neutral 20#dadfe1
  • Neutral/Neutral 30#c2c8ca
  • Neutral/Neutral 40#a9afb1
  • Neutral/Neutral 50#8e9395
  • Neutral/Neutral 60#808384
  • Neutral/Neutral 70#66696a
  • Neutral/Neutral 80#505354
  • Neutral/Neutral 85#454849
  • Neutral/Neutral 90#3b3e3e
  • Neutral/Neutral 95#2a2c2c
  • Neutral/Neutral 99#191b1b
  • Neutral/Neutral 100#000000
  • Alpha/Neutral 00 a0rgb(255 255 255 / 0%)
  • Alpha/Sand 10 a0rgb(239 236 230 / 0%)
  • Alpha/Neutral 00 a10rgb(255 255 255 / 10%)
  • Alpha/Neutral 00 a30rgb(255 255 255 / 30%)
  • Alpha/Neutral 100 a40rgb(0 0 0 / 40%)
  • Alpha/Navy 80 a0rgb(56 70 108 / 0%)
  • Alpha/Navy 90 a56rgb(41 48 66 / 56%)
  • Alpha/Neutral 100 a30rgb(0 0 0 / 30%)
.Color - Perceptual (54)
  • Brand/Brand PD03#f4f7fd
  • Brand/Brand PD04#bbc7e4
  • Brand/Brand PD05#9fadd1
  • Brand/Brand PD06#6676a1
  • Brand/Brand PD07#38466c
  • Brand/Brand PD08#293042
  • Burgundy/Burgundy PD03#fff3f5
  • Burgundy/Burgundy PD04#f1b5bf
  • Burgundy/Burgundy PD05#e196a3
  • Burgundy/Burgundy PD06#b0576b
  • Burgundy/Burgundy PD07#6c1e34
  • Burgundy/Burgundy PD08#5f152b
  • Sand/Sand PD03#efece6
  • Sand/Sand PD04#e4dcca
  • Sand/Sand PD05#d2b087
  • Sand/Sand PD06#88745a
  • Sand/Sand PD07#57442c
  • Sand/Sand PD08#44311a
  • Mauve/Mauve PD03#fcf4f7
  • Mauve/Mauve PD04#e0bcc8
  • Mauve/Mauve PD05#d5abb9
  • Mauve/Mauve PD06#965568
  • Mauve/Mauve PD07#6c3244
  • Mauve/Mauve PD08#552132
  • Steel/Steel PD03#e7eef4
  • Steel/Steel PD04#b6cadd
  • Steel/Steel PD05#96b1cc
  • Steel/Steel PD06#6689ab
  • Steel/Steel PD07#294a6a
  • Steel/Steel PD08#193853
  • Green/Green PD03#e6f2ea
  • Green/Green PD04#aed1ba
  • Green/Green PD05#8bbb9d
  • Green/Green PD06#1e6b42
  • Green/Green PD07#025630
  • Green/Green PD08#024123
  • Amber/Amber PD03#f7efd4
  • Amber/Amber PD04#f0dda7
  • Amber/Amber PD05#e7c361
  • Amber/Amber PD06#977009
  • Amber/Amber PD07#5e4203
  • Amber/Amber PD08#483002
  • Red/Red PD03#fce9e7
  • Red/Red PD04#f1b7b0
  • Red/Red PD05#e6958c
  • Red/Red PD06#a8281e
  • Red/Red PD07#8a0604
  • Red/Red PD08#690402
  • Sky/Sky PD03#e5f0fc
  • Sky/Sky PD04#accbee
  • Sky/Sky PD05#89b1e0
  • Sky/Sky PD06#285e9f
  • Sky/Sky PD07#124784
  • Sky/Sky PD08#01346a