Color

Tokens semánticos de color en claro y oscuro.

Los tokens son semánticos: elige por función, no por tono. Cada uno trae su valor claro y oscuro.

Fondos. Página y tarjetas en bg-primary. Zonas secundarias (cabecera de tabla, shell de la app) en bg-secondary. Superficies elevadas (modales, menús, alertas) en bg-primary_alt, que en oscuro se separa del fondo. Hover de filas e ítems: bg-primary_hover.
Texto. text-primary para títulos y valores; text-secondary para etiquetas y texto de botones; text-tertiary para apoyo y pistas; text-quaternary para metadatos; text-placeholder solo en placeholders. Enlaces: text-brand-secondary.
Bordes. border-primary en controles (inputs, checkboxes, botones secundarios); border-secondary para separadores y tarjetas; border-brand en foco.
Iconos. Familia fg-*: fg-quaternary dentro de controles, fg-tertiary en navegación, fg-brand-primary en indicadores activos.
Estados. error, warning, success en tres capas: bg-*-primary (tinte de fondo), bg-*-solid (relleno), text-*-primary / fg-*-primary (texto e icono). Un estado siempre lleva palabra o icono además del color.
Escalas utility (utility-<tono>-50…700): para badges, etiquetas y gráficas. Fondo -50, borde -200, texto -700, punto -500. El modo oscuro invierte la escala.
Foco. focus-ring-shadow: hueco de 2px en bg-primary y anillo de 4px en focus-ring (#615FFF). En errores, focus-ring-error-shadow.

Contraste. Todos los pares de texto principales superan 4,5:1 en ambos temas. Excepciones heredadas del archivo, que se mantienen tal cual: text-warning-primary (2,9:1) y text-success-primary (3,2:1) sobre blanco valen para 24px+ o junto a un icono; fg-quaternary (2,6:1 en claro, 2,5:1 en oscuro) es solo decoración; bg-success-solid y bg-warning-solid no admiten texto blanco normal; border-primary (1,5:1) queda por debajo del 3:1 para bordes de control, así que todo input lleva etiqueta visible; text-placeholder baja a 4,2:1 en oscuro.

Gráficas. Las series usan, en este orden, utility-brand-600, utility-brand-400, utility-brand-200, utility-sky-500, utility-pink-500, utility-neutral-400. En oscuro la escala de marca se invierte, como en el archivo: la tercera serie queda oscura sobre fondo oscuro, así que con tres o más series añade siempre leyenda.

Texto

Claro	Oscuro	Uso
`#171717`	`#fafafa`	Texto y titulares sobre bg-primary, bg-secondary y bg-tertiary.
`#ffffff`	`#fafafa`	Titulares sobre bg-brand-solid y bg-brand-section.
`#404040`	`#d4d4d4`	Etiquetas, texto de botones secundarios, cabeceras de tabla. Sobre bg-primary y bg-secondary.
`#262626`	`#e5e5e5`	text-secondary con hover.
`#c6d2ff`	`#d4d4d4`	Texto secundario sobre bg-brand-section.
`#525252`	`#a1a1a1`	Texto de apoyo, pistas, botones terciarios. Sobre bg-primary y bg-secondary.
`#404040`	`#d4d4d4`	text-tertiary con hover.
`#c6d2ff`	`#a1a1a1`	Texto de apoyo sobre bg-brand-section.
`#737373`	`#a1a1a1`	Metadatos de poco peso (horas, pies de foto). 4,7:1 sobre bg-primary en claro; no lo uses sobre bg-tertiary.
`#a3b3ff`	`#a1a1a1`	Metadatos sobre bg-brand-section.
`#ffffff`	`#ffffff`	Texto sobre bg-brand-solid, bg-error-solid y bg-primary-solid (tooltips).
`#737373`	`#737373`	Placeholders de inputs sobre bg-primary (4,7:1 en claro, 4,2:1 en oscuro: por debajo de 4,5 en oscuro, se mantiene como en el archivo). Nunca para contenido real.
`#312c85`	`#fafafa`	Titulares en tono de marca sobre bg-brand-primary (10,3:1 en claro, 4,4:1 en oscuro: en oscuro, a 18px o más).
`#432dd7`	`#d4d4d4`	Botones link-color y enlaces en el texto sobre bg-primary.
`#372aac`	`#e5e5e5`	text-brand-secondary con hover.
`#4f39f6`	`#a1a1a1`	Acentos de marca en texto pequeño: asteriscos de campo obligatorio, etiquetas de navegación activas.
`#4f39f6`	`#fafafa`	Acento de marca que tiene que leerse sobre superficies oscuras.
`#e7000b`	`#ff6467`	Mensajes de error bajo los inputs, botones link destructivos.
`#c10007`	`#ffa2a2`	text-error-primary con hover.
`#d08700`	`#fdc700`	Texto de aviso. 2,9:1 sobre bg-primary en claro: úsalo a 24px o más, o junto a un icono y una palabra.
`#00a63e`	`#05df72`	Texto de éxito y tendencias positivas. 3,2:1 sobre bg-primary en claro: para texto en negrita o grande, o junto a un icono.
`#a1a1a1`	`#a1a1a1`	Iconos inactivos de la barra de un editor de texto.
`#737373`	`#ffffff`	Icono activo de la barra de un editor de texto.

Fondos

Claro	Oscuro	Uso
`#ffffff`	`#0a0a0a`	Fondo de página y de tarjetas. El fondo por defecto.
`#ffffff`	`#171717`	Superficies elevadas que tienen que separarse de la página en modo oscuro (modales, alertas, menús).
`#fafafa`	`#171717`	Hover de filas e ítems sobre bg-primary.
`#0a0a0a`	`#171717`	Tooltips y chips invertidos. Con text-white.
`#fafafa`	`#171717`	Fondos de sección, cabecera de tablas, shell de la app.
`#fafafa`	`#0a0a0a`	Fondo secundario que coincide con la página en modo oscuro.
`#f5f5f5`	`#262626`	Hover sobre bg-secondary.
`#525252`	`#525252`	Rellenos sólidos neutros (avatares sin foto, iconos destacados grises).
`#f5f5f5`	`#262626`	Pista del toggle (apagado), skeletons, chips discretos.
`#e5e5e5`	`#404040`	Pista de la barra de progreso y del slider.
`#0a0a0a`	`#262626`	Fondo de los modales, al 70 % de opacidad con backdrop-blur-lg.
`#eef2ff`	`#615fff`	Tinte claro de marca detrás de texto de marca.
`#eef2ff`	`#171717`	Pestaña actual (button-brand), ítem de navegación seleccionado.
`#e0e7ff`	`#4f39f6`	Icono destacado (light) detrás de iconos de marca.
`#4f39f6`	`#4f39f6`	Botones primarios, checkbox, radio y toggle marcados. Con text-white (6,5:1).
`#432dd7`	`#615fff`	bg-brand-solid con hover.
`#372aac`	`#171717`	Bandas de marca a todo el ancho (secciones de llamada a la acción).
`#432dd7`	`#0a0a0a`	Paneles interiores dentro de una sección de marca.
`#fef2f2`	`#460809`	Banners de error y filas con tinte de error.
`#ffe2e2`	`#e7000b`	Icono destacado (light) detrás de iconos de error.
`#e7000b`	`#e7000b`	Botones primarios destructivos. Con text-white (4,8:1).
`#c10007`	`#fb2c36`	bg-error-solid con hover.
`#fefce8`	`#432004`	Banners de aviso.
`#fef9c2`	`#d08700`	Icono destacado (light) detrás de iconos de aviso.
`#d08700`	`#d08700`	Relleno sólido de aviso. Texto encima: text-primary, no blanco (2,9:1 con blanco).
`#f0fdf4`	`#032e15`	Banners de éxito.
`#dcfce7`	`#00a63e`	Icono destacado (light) detrás de iconos de éxito.
`#00a63e`	`#00a63e`	Relleno sólido de éxito. El blanco encima da 3,2:1: solo para negrita de 14px o más, o iconos.
`#fafafa`	`#262626`	Estado pulsado o activo de filas e ítems sobre bg-primary.

Bordes

Claro	Oscuro	Uso
`#d4d4d4`	`#404040`	Bordes de inputs, botones secundarios y checkboxes. 1,5:1 sobre bg-primary (1,9:1 en oscuro), por debajo del 3:1 para bordes de control: el archivo confía en la sombra y la etiqueta para marcar los campos; pon etiqueta en todos los inputs.
`#e5e5e5`	`#262626`	Separadores y bordes de tarjetas y tablas.
`#0000001a`	`#262626`	Bordes de superficies flotantes (notificaciones, menús).
`#f5f5f5`	`#262626`	Separadores tenues dentro de listas densas.
`#615fff`	`#7c86ff`	Borde del input con foco (2px), tarjetas de radio seleccionadas.
`#4f39f6`	`#404040`	Contorno de marca que pasa a neutro en modo oscuro.
`#fb2c36`	`#ff6467`	Input con error y con foco.
`#ffa2a2`	`#fb2c36`	Input con error en reposo, botones secundarios destructivos.

Iconos

Claro	Oscuro	Uso
`#171717`	`#ffffff`	El color de icono más fuerte.
`#404040`	`#d4d4d4`	Iconos junto a text-secondary.
`#262626`	`#e5e5e5`	fg-secondary con hover.
`#525252`	`#a1a1a1`	Iconos de ítems de navegación y barras de herramientas.
`#404040`	`#d4d4d4`	fg-tertiary con hover.
`#a1a1a1`	`#525252`	Iconos decorativos dentro de inputs, iconos de ayuda, chevrons. 2,6:1 sobre bg-primary en claro y 2,5:1 en oscuro: solo decoración, nunca lo único que transmite el significado.
`#737373`	`#737373`	fg-quaternary con hover.
`#ffffff`	`#ffffff`	Iconos sobre rellenos sólidos de marca o de error; mando del toggle.
`#4f39f6`	`#615fff`	Relleno de progreso, indicadores activos, iconos de marca.
`#4f39f6`	`#d4d4d4`	Subrayado de la pestaña actual.
`#615fff`	`#615fff`	Marcas de marca secundarias (puntos de badge).
`#615fff`	`#525252`	Marca de marca que pasa a neutro en modo oscuro.
`#4f39f6`	`#737373`	fg-brand-secondary con hover.
`#e7000b`	`#fb2c36`	Iconos de error.
`#fb2c36`	`#ff6467`	Marcas de error más suaves.
`#d08700`	`#f0b100`	Iconos de aviso.
`#f0b100`	`#fdc700`	Marcas de aviso más suaves.
`#00a63e`	`#00c950`	Iconos de éxito, flechas de tendencia positiva.
`#00c950`	`#05df72`	Puntos de estado en línea.

Foco

Token	Claro	Oscuro	Uso
	`#615fff`	`#615fff`	Color del anillo de foco (anillo exterior de 4px, hueco de 2px en bg-primary).
	`#fb2c36`	`#fb2c36`	Anillo de foco en un campo con error.

Transparencias

Claro	Oscuro	Uso
`#ffffff1a`	`#0c0e121a`	Blanco al 10 % (en oscuro pasa al fondo oscuro). Capas sobre imágenes y secciones de marca.
`#ffffff33`	`#0c0e1233`	Blanco al 20 % (en oscuro pasa al fondo oscuro). Capas sobre imágenes y secciones de marca.
`#ffffff4c`	`#0c0e124c`	Blanco al 30 % (en oscuro pasa al fondo oscuro). Capas sobre imágenes y secciones de marca.
`#ffffff66`	`#0c0e1266`	Blanco al 40 % (en oscuro pasa al fondo oscuro). Capas sobre imágenes y secciones de marca.
`#ffffff80`	`#0c0e1280`	Blanco al 50 % (en oscuro pasa al fondo oscuro). Capas sobre imágenes y secciones de marca.
`#ffffff99`	`#0c0e1299`	Blanco al 60 % (en oscuro pasa al fondo oscuro). Capas sobre imágenes y secciones de marca.
`#ffffffb2`	`#0c0e12b2`	Blanco al 70 % (en oscuro pasa al fondo oscuro). Capas sobre imágenes y secciones de marca.
`#ffffffcc`	`#0c0e12cc`	Blanco al 80 % (en oscuro pasa al fondo oscuro). Capas sobre imágenes y secciones de marca.
`#ffffffe6`	`#0c0e12e6`	Blanco al 90 % (en oscuro pasa al fondo oscuro). Capas sobre imágenes y secciones de marca.
`#ffffff`	`#0c0e12`	Blanco al 100 % (en oscuro pasa al fondo oscuro). Capas sobre imágenes y secciones de marca.
`#0000001a`	`#ffffff1a`	Negro al 10 % (en oscuro pasa a blanco). Velos y bordes sutiles.
`#00000033`	`#ffffff33`	Negro al 20 % (en oscuro pasa a blanco). Velos y bordes sutiles.
`#0000004c`	`#ffffff4c`	Negro al 30 % (en oscuro pasa a blanco). Velos y bordes sutiles.
`#00000066`	`#ffffff66`	Negro al 40 % (en oscuro pasa a blanco). Velos y bordes sutiles.
`#00000080`	`#ffffff80`	Negro al 50 % (en oscuro pasa a blanco). Velos y bordes sutiles.
`#00000099`	`#ffffff99`	Negro al 60 % (en oscuro pasa a blanco). Velos y bordes sutiles.
`#000000b2`	`#ffffffb2`	Negro al 70 % (en oscuro pasa a blanco). Velos y bordes sutiles.
`#000000cc`	`#ffffffcc`	Negro al 80 % (en oscuro pasa a blanco). Velos y bordes sutiles.
`#000000e6`	`#ffffffe6`	Negro al 90 % (en oscuro pasa a blanco). Velos y bordes sutiles.
`#000000`	`#ffffff`	Negro al 100 % (en oscuro pasa a blanco). Velos y bordes sutiles.

Utility · amber

Claro	Oscuro	Uso
`#fffbeb`	`#461901`	Badges y series de gráficas. Paso 50: relleno del badge.
`#fef3c6`	`#7b3306`	Badges y series de gráficas. Paso 100: relleno en hover.
`#fee685`	`#973c00`	Badges y series de gráficas. Paso 200: borde del badge.
`#ffd230`	`#bb4d00`	Badges y series de gráficas. Paso 300: borde.
`#ffb900`	`#e17100`	Badges y series de gráficas. Paso 400: gráfica o punto.
`#fe9a00`	`#fe9a00`	Badges y series de gráficas. Paso 500: punto.
`#e17100`	`#ffb900`	Badges y series de gráficas. Paso 600: icono.
`#bb4d00`	`#ffd230`	Badges y series de gráficas. Paso 700: texto del badge.

Utility · blue

Claro	Oscuro	Uso
`#eff6ff`	`#162456`	Badges y series de gráficas. Paso 50: relleno del badge.
`#dbeafe`	`#1c398e`	Badges y series de gráficas. Paso 100: relleno en hover.
`#bedbff`	`#193cb8`	Badges y series de gráficas. Paso 200: borde del badge.
`#8ec5ff`	`#1447e6`	Badges y series de gráficas. Paso 300: borde.
`#51a2ff`	`#155dfc`	Badges y series de gráficas. Paso 400: gráfica o punto.
`#2b7fff`	`#2b7fff`	Badges y series de gráficas. Paso 500: punto.
`#155dfc`	`#51a2ff`	Badges y series de gráficas. Paso 600: icono.
`#1447e6`	`#8ec5ff`	Badges y series de gráficas. Paso 700: texto del badge.

Utility · brand

Claro	Oscuro	Uso
`#eef2ff`	`#1e1a4d`	Badges, puntos y gráficas de marca (mismos tonos que indigo). Paso 50: relleno del badge.
`#e0e7ff`	`#312c85`	Badges, puntos y gráficas de marca (mismos tonos que indigo). Paso 100: relleno en hover.
`#c6d2ff`	`#372aac`	Badges, puntos y gráficas de marca (mismos tonos que indigo). Paso 200: borde del badge.
`#a3b3ff`	`#432dd7`	Badges, puntos y gráficas de marca (mismos tonos que indigo). Paso 300: borde.
`#7c86ff`	`#4f39f6`	Badges, puntos y gráficas de marca (mismos tonos que indigo). Paso 400: gráfica o punto.
`#615fff`	`#615fff`	Badges, puntos y gráficas de marca (mismos tonos que indigo). Paso 500: punto.
`#4f39f6`	`#7c86ff`	Badges, puntos y gráficas de marca (mismos tonos que indigo). Paso 600: icono.
`#432dd7`	`#a3b3ff`	Badges, puntos y gráficas de marca (mismos tonos que indigo). Paso 700: texto del badge.
`#372aac`	`#c6d2ff`	Badges, puntos y gráficas de marca (mismos tonos que indigo). Paso 800: texto fuerte.
`#312c85`	`#e0e7ff`	Badges, puntos y gráficas de marca (mismos tonos que indigo). Paso 900: texto más fuerte.

Utility · emerald

Claro	Oscuro	Uso
`#ecfdf5`	`#002c22`	Badges y series de gráficas. Paso 50: relleno del badge.
`#d0fae5`	`#004f3b`	Badges y series de gráficas. Paso 100: relleno en hover.
`#a4f4cf`	`#006045`	Badges y series de gráficas. Paso 200: borde del badge.
`#5ee9b5`	`#007a55`	Badges y series de gráficas. Paso 300: borde.
`#00d492`	`#009966`	Badges y series de gráficas. Paso 400: gráfica o punto.
`#00bc7d`	`#00bc7d`	Badges y series de gráficas. Paso 500: punto.
`#009966`	`#00d492`	Badges y series de gráficas. Paso 600: icono.
`#007a55`	`#5ee9b5`	Badges y series de gráficas. Paso 700: texto del badge.

Utility · fuchsia

Claro	Oscuro	Uso
`#fdf4ff`	`#4b004f`	Badges y series de gráficas. Paso 50: relleno del badge.
`#fae8ff`	`#721378`	Badges y series de gráficas. Paso 100: relleno en hover.
`#f6cfff`	`#8a0194`	Badges y series de gráficas. Paso 200: borde del badge.
`#f4a8ff`	`#a800b7`	Badges y series de gráficas. Paso 300: borde.
`#ed6aff`	`#c800de`	Badges y series de gráficas. Paso 400: gráfica o punto.
`#e12afb`	`#e12afb`	Badges y series de gráficas. Paso 500: punto.
`#c800de`	`#ed6aff`	Badges y series de gráficas. Paso 600: icono.
`#a800b7`	`#f4a8ff`	Badges y series de gráficas. Paso 700: texto del badge.

Utility · green

Claro	Oscuro	Uso
`#f0fdf4`	`#032e15`	Badges de éxito y series positivas en gráficas. Paso 50: relleno del badge.
`#dcfce7`	`#0d542b`	Badges de éxito y series positivas en gráficas. Paso 100: relleno en hover.
`#b9f8cf`	`#016630`	Badges de éxito y series positivas en gráficas. Paso 200: borde del badge.
`#7bf1a8`	`#008236`	Badges de éxito y series positivas en gráficas. Paso 300: borde.
`#05df72`	`#00a63e`	Badges de éxito y series positivas en gráficas. Paso 400: gráfica o punto.
`#00c950`	`#00c950`	Badges de éxito y series positivas en gráficas. Paso 500: punto.
`#00a63e`	`#05df72`	Badges de éxito y series positivas en gráficas. Paso 600: icono.
`#008236`	`#7bf1a8`	Badges de éxito y series positivas en gráficas. Paso 700: texto del badge.

Utility · indigo

Claro	Oscuro	Uso
`#eef2ff`	`#1e1a4d`	Badges y series de gráficas. Paso 50: relleno del badge.
`#e0e7ff`	`#312c85`	Badges y series de gráficas. Paso 100: relleno en hover.
`#c6d2ff`	`#372aac`	Badges y series de gráficas. Paso 200: borde del badge.
`#a3b3ff`	`#432dd7`	Badges y series de gráficas. Paso 300: borde.
`#7c86ff`	`#4f39f6`	Badges y series de gráficas. Paso 400: gráfica o punto.
`#615fff`	`#615fff`	Badges y series de gráficas. Paso 500: punto.
`#4f39f6`	`#7c86ff`	Badges y series de gráficas. Paso 600: icono.
`#432dd7`	`#a3b3ff`	Badges y series de gráficas. Paso 700: texto del badge.

Utility · neutral

Claro	Oscuro	Uso
`#fafafa`	`#171717`	Badges, tags y avatares sin foto en gris. Paso 50: relleno del badge.
`#f5f5f5`	`#262626`	Badges, tags y avatares sin foto en gris. Paso 100: relleno en hover.
`#e5e5e5`	`#404040`	Badges, tags y avatares sin foto en gris. Paso 200: borde del badge.
`#d4d4d4`	`#404040`	Badges, tags y avatares sin foto en gris. Paso 300: borde.
`#a1a1a1`	`#525252`	Badges, tags y avatares sin foto en gris. Paso 400: gráfica o punto.
`#737373`	`#737373`	Badges, tags y avatares sin foto en gris. Paso 500: punto.
`#525252`	`#a1a1a1`	Badges, tags y avatares sin foto en gris. Paso 600: icono.
`#404040`	`#d4d4d4`	Badges, tags y avatares sin foto en gris. Paso 700: texto del badge.
`#262626`	`#e5e5e5`	Badges, tags y avatares sin foto en gris. Paso 800: texto fuerte.
`#171717`	`#f5f5f5`	Badges, tags y avatares sin foto en gris. Paso 900: texto más fuerte.

Utility · orange

Claro	Oscuro	Uso
`#fff7ed`	`#441306`	Badges y series de gráficas. Paso 50: relleno del badge.
`#ffedd4`	`#7e2a0c`	Badges y series de gráficas. Paso 100: relleno en hover.
`#ffd6a7`	`#9f2d00`	Badges y series de gráficas. Paso 200: borde del badge.
`#ffb86a`	`#ca3500`	Badges y series de gráficas. Paso 300: borde.
`#ff8904`	`#f54900`	Badges y series de gráficas. Paso 400: gráfica o punto.
`#ff6900`	`#ff6900`	Badges y series de gráficas. Paso 500: punto.
`#f54900`	`#ff8904`	Badges y series de gráficas. Paso 600: icono.
`#ca3500`	`#ffb86a`	Badges y series de gráficas. Paso 700: texto del badge.

Utility · pink

Claro	Oscuro	Uso
`#fdf2f8`	`#510424`	Badges y series de gráficas. Paso 50: relleno del badge.
`#fce7f3`	`#861043`	Badges y series de gráficas. Paso 100: relleno en hover.
`#fccee8`	`#a3004c`	Badges y series de gráficas. Paso 200: borde del badge.
`#fda5d5`	`#c6005c`	Badges y series de gráficas. Paso 300: borde.
`#fb64b6`	`#e60076`	Badges y series de gráficas. Paso 400: gráfica o punto.
`#f6339a`	`#f6339a`	Badges y series de gráficas. Paso 500: punto.
`#e60076`	`#fb64b6`	Badges y series de gráficas. Paso 600: icono.
`#c6005c`	`#fda5d5`	Badges y series de gráficas. Paso 700: texto del badge.

Utility · purple

Claro	Oscuro	Uso
`#faf5ff`	`#3c0366`	Badges y series de gráficas. Paso 50: relleno del badge.
`#f3e8ff`	`#59168b`	Badges y series de gráficas. Paso 100: relleno en hover.
`#e9d4ff`	`#6e11b0`	Badges y series de gráficas. Paso 200: borde del badge.
`#dab2ff`	`#8200db`	Badges y series de gráficas. Paso 300: borde.
`#c27aff`	`#9810fa`	Badges y series de gráficas. Paso 400: gráfica o punto.
`#ad46ff`	`#ad46ff`	Badges y series de gráficas. Paso 500: punto.
`#9810fa`	`#c27aff`	Badges y series de gráficas. Paso 600: icono.
`#8200db`	`#dab2ff`	Badges y series de gráficas. Paso 700: texto del badge.

Utility · red

Claro	Oscuro	Uso
`#fef2f2`	`#460809`	Badges de error y series negativas en gráficas. Paso 50: relleno del badge.
`#ffe2e2`	`#82181a`	Badges de error y series negativas en gráficas. Paso 100: relleno en hover.
`#ffc9c9`	`#9f0712`	Badges de error y series negativas en gráficas. Paso 200: borde del badge.
`#ffa2a2`	`#c10007`	Badges de error y series negativas en gráficas. Paso 300: borde.
`#ff6467`	`#e7000b`	Badges de error y series negativas en gráficas. Paso 400: gráfica o punto.
`#fb2c36`	`#fb2c36`	Badges de error y series negativas en gráficas. Paso 500: punto.
`#e7000b`	`#ff6467`	Badges de error y series negativas en gráficas. Paso 600: icono.
`#c10007`	`#ffa2a2`	Badges de error y series negativas en gráficas. Paso 700: texto del badge.

Utility · sky

Claro	Oscuro	Uso
`#f0f9ff`	`#052f4a`	Badges informativos y series de gráficas. Paso 50: relleno del badge.
`#dff2fe`	`#024a70`	Badges informativos y series de gráficas. Paso 100: relleno en hover.
`#b8e6fe`	`#00598a`	Badges informativos y series de gráficas. Paso 200: borde del badge.
`#74d4ff`	`#0069a8`	Badges informativos y series de gráficas. Paso 300: borde.
`#00bcff`	`#0084d1`	Badges informativos y series de gráficas. Paso 400: gráfica o punto.
`#00a6f4`	`#00a6f4`	Badges informativos y series de gráficas. Paso 500: punto.
`#0084d1`	`#00bcff`	Badges informativos y series de gráficas. Paso 600: icono.
`#0069a8`	`#74d4ff`	Badges informativos y series de gráficas. Paso 700: texto del badge.

Utility · slate

Claro	Oscuro	Uso
`#f8fafc`	`#020618`	Color secundario de badge para categorías neutras. Paso 50: relleno del badge.
`#f1f5f9`	`#0f172b`	Color secundario de badge para categorías neutras. Paso 100: relleno en hover.
`#e2e8f0`	`#1d293d`	Color secundario de badge para categorías neutras. Paso 200: borde del badge.
`#cad5e2`	`#314158`	Color secundario de badge para categorías neutras. Paso 300: borde.
`#90a1b9`	`#45556c`	Color secundario de badge para categorías neutras. Paso 400: gráfica o punto.
`#62748e`	`#62748e`	Color secundario de badge para categorías neutras. Paso 500: punto.
`#45556c`	`#90a1b9`	Color secundario de badge para categorías neutras. Paso 600: icono.
`#314158`	`#cad5e2`	Color secundario de badge para categorías neutras. Paso 700: texto del badge.

Utility · yellow

Claro	Oscuro	Uso
`#fefce8`	`#432004`	Badges de aviso. Paso 50: relleno del badge.
`#fef9c2`	`#733e0a`	Badges de aviso. Paso 100: relleno en hover.
`#fff085`	`#894b00`	Badges de aviso. Paso 200: borde del badge.
`#ffdf20`	`#a65f00`	Badges de aviso. Paso 300: borde.
`#fdc700`	`#d08700`	Badges de aviso. Paso 400: gráfica o punto.
`#f0b100`	`#f0b100`	Badges de aviso. Paso 500: punto.
`#d08700`	`#fdc700`	Badges de aviso. Paso 600: icono.
`#a65f00`	`#ffdf20`	Badges de aviso. Paso 700: texto del badge.

Componentes

Claro	Oscuro	Uso
`#e0e0e0`	`#e0e0e0`	Relleno del avatar sin foto, detrás de las iniciales.
`#4f39f6`	`#c6d2ff`	Icono dentro de un icono destacado light de marca.
`#737373`	`#e5e5e5`	Icono dentro de un icono destacado light gris.
`#e7000b`	`#ffc9c9`	Icono dentro de un icono destacado light de error.
`#d08700`	`#fff085`	Icono dentro de un icono destacado light de aviso (2,7:1 en claro, 2,5:1 en oscuro sobre bg-warning-secondary: acompáñalo de un título).
`#00a63e`	`#b9f8cf`	Icono dentro de un icono destacado light de éxito (2,9:1 en claro, 2,7:1 en oscuro sobre bg-success-secondary: acompáñalo de un título).
`#4f39f6`	`#a1a1a1`	Iconos sueltos en color de marca.
`#c6d2ff`	`#a1a1a1`	Iconos sobre bg-brand-section.
`#ffffff`	`#615fff`	Relleno del mando del slider.
`#4f39f6`	`#0a0a0a`	Borde del mando del slider (2px).
`#d4d4d4`	`#00000000`	Borde del mando del toggle fino cuando está apagado.
`#4f39f6`	`#00000000`	Borde del mando del toggle fino cuando está encendido.
`#432dd7`	`#00000000`	Borde del mando del toggle fino encendido y con hover.
`#d4d4d4`	`#d4d4d4`	Segunda línea de un tooltip, sobre bg-primary-solid.
`#c6d2ff`	`#d4d4d4`	Enlaces del pie sobre bg-brand-section.
`#ffffff`	`#f5f5f5`	Enlaces del pie con hover.