Color
El color permite construir interfaces coherentes, accesibles y reconocibles, además de comunicar jerarquías, acciones y estados dentro de los servicios digitales.
Paletas de color
El sistema cuenta con paletas base organizadas en escalas, desde tonos claros hasta tonos oscuros. Estas paletas pueden utilizarse en ilustraciones, visualizaciones y otros recursos gráficos que requieran una selección amplia de colores.
En los elementos de interfaz, los usos para textos, fondos, bordes, íconos y estados ya están definidos mediante tokens semánticos. No es necesario seleccionar directamente un color de las paletas ni redefinir sus combinaciones para cada proyecto.
Tokens semánticos
Los tokens semánticos relacionan los colores de las paletas base con funciones específicas dentro de la interfaz. De esta manera, permiten aplicar de forma consistente colores para acciones, superficies, contenidos y estados como información, éxito, advertencia o error.
Esta capa también incorpora combinaciones de color y contraste definidas para favorecer la accesibilidad. Aun así, el color no debe utilizarse como el único medio para comunicar información relevante: debe complementarse con texto e iconografía.
Haz clic en cualquier valor para copiarlo al portapapeles.
Brand
Blue
Navy Blue
Green
Red
Yellow
Violet
Pink
Neutral
Dark Neutral
Neutral Opacity
Dark Neutral Opacity
Estructura del sistema de tokens de color
El sistema de tokens de color está organizado para que cada decisión cromática responda a una función específica dentro de la interfaz. En lugar de usar colores directamente desde las paletas primitivas, los tokens permiten aplicar color según el tipo de uso, la intención semántica, el nivel de énfasis y el estado del componente.
La estructura general de nombre sigue esta lógica:
{property}-{role}-{intent}-{emphasis}-{state}
Por ejemplo:
color-background-brand-subtle-hover
Cada parte del nombre ayuda a entender el uso esperado del token.
Property
Property define la categoría base del token. En este caso, corresponde a color, ya que existen otras propiedades como espaciado, tipografías y otros fundamentos.
Role
Role define dónde se aplica el color dentro de la interfaz. Los roles principales son background para fondos y superficies, text para textos, icon para íconos y border para bordes.
Intent
Intent define la intención semántica o funcional del token. Algunos intents son transversales, como brand, danger, positive, warning o info, ya que pueden existir como fondo, texto, ícono o borde. Otros intents son propios de un role específico, como container dentro de background, utilizado para superficies, contenedores y capas de la interfaz.
Emphasis
Emphasis define el nivel de énfasis visual del token. Los tokens strong tienen mayor intensidad, contraste y jerarquía; los subtle se usan para una presencia más contenida; y los muted corresponden a usos de menor jerarquía visual. En el caso de fondos neutrales, esta lógica también permite construir el modelo de capas de la interfaz, desde canvas como fondo base de página hasta distintos niveles de container para agrupar, separar y jerarquizar contenido.
State
State define variaciones asociadas a interacción o condición del componente, como hover y pressed. Otros estados más transversales, como selected y disabled, pueden organizarse como intents propios para mantener consistencia entre distintos roles de tokens.
Esta estructura permite que los tokens sean más fáciles de interpretar, aplicar y mantener. Al separar property, role, intent, emphasis y state, el sistema ayuda a tomar decisiones de color consistentes entre componentes, estados interactivos, modos de visualización y criterios de accesibilidad.
Fondo
Canvas
Canvas
Fondo base de página.
| Token | Claro | Oscuro |
|---|---|---|
--color-background-canvas | neutral 200 | dark neutral 200 |
Container
Fondos para contenedores, desde secciones completas hasta cards y elementos pequeños.
Base
Fondos para contenedores base.
| Token | Claro | Oscuro |
|---|---|---|
--color-background-container-base | neutral 100 | dark neutral 300 |
--color-background-container-base-hover | neutral 300 | dark neutral 400 |
--color-background-container-base-pressed | neutral 400 | dark neutral 500 |
Subtle
Fondos para contenedores con el mismo color del canvas.
| Token | Claro | Oscuro |
|---|---|---|
--color-background-container-subtle | neutral 200 | dark neutral 200 |
--color-background-container-subtle-hover | neutral 300 | dark neutral 400 |
--color-background-container-subtle-pressed | neutral 400 | dark neutral 500 |
High
Fondos para contenedores neutrales que necesitan una capa adicional de separación visual sobre *container subtle* y *container base*. No debe usarse como contenedor principal.
| Token | Claro | Oscuro |
|---|---|---|
--color-background-container-high | neutral 300 | dark neutral 400 |
--color-background-container-high-hover | neutral 400 | dark neutral 500 |
--color-background-container-high-pressed | neutral 500 | dark neutral 600 |
Inverse
Fondo de contenedores de alto contraste, por ejemplo tooltips.
| Token | Claro | Oscuro |
|---|---|---|
--color-background-container-inverse | neutral 1100 | dark neutral 1400 |
Contrast
Fondo de elementos que requieren contraste 3:1, como el relleno de un switch toggle apagado. Non-text Contrast (Level AA).
| Token | Claro | Oscuro |
|---|---|---|
--color-background-container-contrast | neutral 800 | dark neutral 800 |
Ghost
Ghost
Fondos de elementos que en su estado default no tienen relleno.
| Token | Claro | Oscuro |
|---|---|---|
--color-background-ghost | neutral opacity 100 | dark neutral opacity 100 |
--color-background-ghost-hover | neutral opacity 400 | dark neutral opacity 300 |
--color-background-ghost-pressed | neutral opacity 600 | dark neutral opacity 500 |
Brand
Fondos para elementos interactivos.
Subtle
| Token | Claro | Oscuro |
|---|---|---|
--color-background-brand-subtle | brand 100 | brand 1100 |
--color-background-brand-subtle-hover | brand 200 | brand 1000 |
--color-background-brand-subtle-pressed | brand 300 | brand 900 |
Strong
Fondos para elementos interactivos primarios, como el button primary.
| Token | Claro | Oscuro |
|---|---|---|
--color-background-brand-strong | brand 1000 | brand 800 |
--color-background-brand-strong-hover | navy blue 1100 | brand 900 |
--color-background-brand-strong-pressed | navy blue 1200 | brand 1000 |
Positive
Fondos para comunicar estados positivos, exitosos o de validación correcta.
Subtle
Fondos positivos de baja presencia para badges, mensajes o contenedores de apoyo.
| Token | Claro | Oscuro |
|---|---|---|
--color-background-positive-subtle | green 200 | green 1100 |
--color-background-positive-subtle-hover | green 300 | green 1000 |
--color-background-positive-subtle-pressed | green 400 | green 900 |
Strong
Fondos positivos de alta presencia para estados, indicadores o confirmaciones destacadas.
| Token | Claro | Oscuro |
|---|---|---|
--color-background-positive-strong | green 900 | green 500 |
--color-background-positive-strong-hover | green 1000 | green 400 |
--color-background-positive-strong-pressed | green 1100 | green 300 |
Warning
Fondos para comunicar advertencias, precauciones o estados que requieren atención.
Subtle
Fondos de advertencia de baja presencia para alertas, badges o mensajes preventivos.
| Token | Claro | Oscuro |
|---|---|---|
--color-background-warning-subtle | yellow 200 | yellow 1100 |
--color-background-warning-subtle-hover | yellow 300 | yellow 1000 |
--color-background-warning-subtle-pressed | yellow 400 | yellow 900 |
Strong
Fondos de advertencia de alta presencia para estados o indicadores que requieren atención prioritaria.
| Token | Claro | Oscuro |
|---|---|---|
--color-background-warning-strong | yellow 900 | yellow 500 |
--color-background-warning-strong-hover | yellow 1000 | yellow 400 |
--color-background-warning-strong-pressed | yellow 1100 | yellow 300 |
Danger
Fondos para comunicar errores, estados críticos o acciones destructivas.
Subtle
Fondos de error de baja presencia para mensajes de error, badges o contenedores.
| Token | Claro | Oscuro |
|---|---|---|
--color-background-danger-subtle | red 200 | red 1100 |
--color-background-danger-subtle-hover | red 300 | red 1000 |
--color-background-danger-subtle-pressed | red 400 | red 900 |
Strong
Fondos de error de alta presencia para acciones destructivas, estados críticos o indicadores destacados.
| Token | Claro | Oscuro |
|---|---|---|
--color-background-danger-strong | red 900 | red 500 |
--color-background-danger-strong-hover | red 1000 | red 400 |
--color-background-danger-strong-pressed | red 1100 | red 300 |
Info
Fondos para comunicar información contextual, ayuda o estados informativos.
Subtle
Fondos informativos de baja presencia para mensajes de ayuda o bloques de contexto.
| Token | Claro | Oscuro |
|---|---|---|
--color-background-info-subtle | blue 200 | blue 1100 |
--color-background-info-subtle-hover | blue 300 | blue 1000 |
--color-background-info-subtle-pressed | blue 400 | blue 900 |
Strong
Fondos informativos de alta presencia para mensajes informativos destacados.
| Token | Claro | Oscuro |
|---|---|---|
--color-background-info-strong | blue 900 | blue 500 |
--color-background-info-strong-hover | blue 1000 | blue 400 |
--color-background-info-strong-pressed | blue 1100 | blue 300 |
Selected
Fondos para comunicar selección, activación o estado actualmente elegido.
Subtle
Fondos de selección de baja presencia para elementos seleccionados.
| Token | Claro | Oscuro |
|---|---|---|
--color-background-selected-subtle | brand 100 | dark neutral 400 |
--color-background-selected-subtle-hover | brand 200 | dark neutral 500 |
--color-background-selected-subtle-pressed | brand 300 | dark neutral 600 |
Strong
Fondos de selección de alta presencia para elementos seleccionados o controles destacados, como checkboxes y radio buttons.
| Token | Claro | Oscuro |
|---|---|---|
--color-background-selected-strong | brand 900 | brand 700 |
--color-background-selected-strong-hover | brand 1100 | brand 900 |
--color-background-selected-strong-pressed | brand 1200 | brand 1000 |
Disabled
Disabled
Fondos para elementos deshabilitados o no disponibles.
| Token | Claro | Oscuro |
|---|---|---|
--color-background-disabled | neutral opacity 400 | dark neutral opacity 400 |
Utility
Fondos utilitarios para necesidades específicas.
Backdrop
Fondo de superposición usado detrás de modales, dialogs o elementos flotantes.
| Token | Claro | Oscuro |
|---|---|---|
--color-background-utility-backdrop | neutral opacity 700 | neutral opacity 700 |
Texto
Base
Colores de texto neutrales para contenido general de la interfaz.
Subtle
Color de texto neutral de menor jerarquía visual. Se usa para descripciones, ayudas, metadatos, placeholders o información secundaria.
| Token | Claro | Oscuro |
|---|---|---|
--color-text-base-subtle | neutral 1000 | dark neutral 900 |
Strong
Color de texto neutral de alta jerarquía visual. Se usa para títulos, labels, contenido principal y texto que debe tener máxima legibilidad.
| Token | Claro | Oscuro |
|---|---|---|
--color-text-base-strong | neutral 1400 | dark neutral 1300 |
Inverse subtle
Color de texto neutral secundario sobre fondos oscuros o *inverse*. Se usa para descripciones, ayudas o metadatos.
| Token | Claro | Oscuro |
|---|---|---|
--color-text-base-inverse-subtle | neutral 800 | dark neutral 700 |
Inverse strong
Color de texto neutral principal sobre fondos oscuros o inversos. Se usa para contenido de alta legibilidad en tooltips, overlays o contenedores *inverse*.
| Token | Claro | Oscuro |
|---|---|---|
--color-text-base-inverse-strong | neutral 100 | dark neutral 300 |
Brand
Colores de texto para acciones y enlaces.
Brand
| Token | Claro | Oscuro |
|---|---|---|
--color-text-brand | brand 1000 | brand 500 |
--color-text-brand-hover | brand 1100 | brand 400 |
--color-text-brand-pressed | brand 1200 | brand 300 |
Inverse
Colores de texto para acciones y enlaces sobre fondos oscuros o inversos.
| Token | Claro | Oscuro |
|---|---|---|
--color-text-brand-inverse | brand 500 | brand 900 |
--color-text-brand-inverse-hover | brand 400 | brand 1000 |
--color-text-brand-inverse-pressed | brand 300 | brand 1100 |
On brand
Color de texto sobre fondos fuertes brand, como botones primarios o elementos seleccionados con relleno brand.
| Token | Claro | Oscuro |
|---|---|---|
--color-text-brand-on-brand | brand 100 | dark neutral 1500 |
Visited
Color de texto para enlaces ya visitados.
| Token | Claro | Oscuro |
|---|---|---|
--color-text-brand-visited | violet 900 | #FFFFFF (valor fijo) |
Positive
Positive
Texto para comunicar estados positivos, éxito o validación correcta.
| Token | Claro | Oscuro |
|---|---|---|
--color-text-positive | green 900 | green 500 |
--color-text-positive-hover | green 1000 | green 400 |
--color-text-positive-pressed | green 1100 | green 300 |
Warning
Warning
Texto para comunicar advertencias, precauciones o estados que requieren atención.
| Token | Claro | Oscuro |
|---|---|---|
--color-text-warning | yellow 900 | yellow 500 |
--color-text-warning-hover | yellow 1000 | yellow 400 |
--color-text-warning-pressed | yellow 1100 | yellow 300 |
Danger
Danger
Texto para comunicar errores, estados críticos o acciones destructivas.
| Token | Claro | Oscuro |
|---|---|---|
--color-text-danger | red 900 | red 500 |
--color-text-danger-hover | red 1000 | red 400 |
--color-text-danger-pressed | red 1100 | red 300 |
Info
Info
Texto para comunicar información, ayuda o estados informativos.
| Token | Claro | Oscuro |
|---|---|---|
--color-text-info | blue 900 | blue 500 |
--color-text-info-hover | blue 1000 | blue 400 |
--color-text-info-pressed | blue 1100 | blue 300 |
Disabled
Disabled
Texto para elementos deshabilitados o no disponibles.
| Token | Claro | Oscuro |
|---|---|---|
--color-text-disabled | neutral opacity 700 | dark neutral opacity 600 |
Ícono
Base
Colores de iconos neutrales para contenido general de la interfaz.
Subtle
Color de icono neutral de menor jerarquía visual. Se usa para iconos secundarios, ayudas, metadatos o acciones de baja presencia.
| Token | Claro | Oscuro |
|---|---|---|
--color-icon-base-subtle | neutral 1000 | dark neutral 900 |
Strong
Color de icono neutral de alta jerarquía visual. Se usa para iconos principales, acciones relevantes o elementos que requieren mayor legibilidad.
| Token | Claro | Oscuro |
|---|---|---|
--color-icon-base-strong | neutral 1400 | dark neutral 1300 |
Inverse subtle
Color de icono neutral secundario sobre fondos oscuros o *inverse*. Se usa para iconos de apoyo o menor jerarquía.
| Token | Claro | Oscuro |
|---|---|---|
--color-icon-base-inverse-subtle | neutral 800 | dark neutral 700 |
Inverse strong
Color de icono neutral principal sobre fondos oscuros. Se usa para iconos de alta legibilidad en tooltips, overlays o contenedores *inverse*.
| Token | Claro | Oscuro |
|---|---|---|
--color-icon-base-inverse-strong | neutral 100 | dark neutral 300 |
Brand
Colores de iconos para acciones y elementos asociados a marca.
Brand
| Token | Claro | Oscuro |
|---|---|---|
--color-icon-brand | brand 1000 | brand 500 |
--color-icon-brand-hover | brand 1100 | brand 400 |
--color-icon-brand-pressed | brand 1200 | brand 300 |
Inverse
Colores de iconos para acciones de marca sobre fondos oscuros o inversos.
| Token | Claro | Oscuro |
|---|---|---|
--color-icon-brand-inverse | brand 500 | brand 900 |
--color-icon-brand-inverse-hover | brand 400 | brand 1000 |
--color-icon-brand-inverse-pressed | brand 300 | brand 1100 |
On brand
Color de icono sobre fondos fuertes brand, como botones primarios, checkboxes seleccionados o radio buttons seleccionados.
| Token | Claro | Oscuro |
|---|---|---|
--color-icon-brand-on-brand | brand 100 | dark neutral 1500 |
Positive
Positive
Iconos para comunicar estados positivos, éxito o validación correcta.
| Token | Claro | Oscuro |
|---|---|---|
--color-icon-positive | green 900 | green 500 |
--color-icon-positive-hover | green 1000 | green 400 |
--color-icon-positive-pressed | green 1100 | green 300 |
Warning
Warning
Iconos para comunicar advertencias, precauciones o estados que requieren atención.
| Token | Claro | Oscuro |
|---|---|---|
--color-icon-warning | yellow 900 | yellow 500 |
--color-icon-warning-hover | yellow 1000 | yellow 400 |
--color-icon-warning-pressed | yellow 1100 | yellow 300 |
Danger
Danger
Iconos para comunicar errores, estados críticos o acciones destructivas.
| Token | Claro | Oscuro |
|---|---|---|
--color-icon-danger | red 900 | red 500 |
--color-icon-danger-hover | red 1000 | red 400 |
--color-icon-danger-pressed | red 1100 | red 300 |
Info
Info
Iconos para comunicar información contextual, ayuda o estados informativos.
| Token | Claro | Oscuro |
|---|---|---|
--color-icon-info | blue 900 | blue 500 |
--color-icon-info-hover | blue 1000 | blue 400 |
--color-icon-info-pressed | blue 1100 | blue 300 |
Disabled
Disabled
Iconos para elementos deshabilitados o no disponibles.
| Token | Claro | Oscuro |
|---|---|---|
--color-icon-disabled | neutral opacity 700 | dark neutral opacity 600 |
Borde
Base
Colores de borde neutrales para separar, delimitar o estructurar elementos de la interfaz.
Muted
Borde neutral de muy baja presencia visual. Se usa para separadores suaves o límites decorativos.
| Token | Claro | Oscuro |
|---|---|---|
--color-border-base-muted | neutral opacity 400 | dark neutral opacity 300 |
Subtle
Borde neutral de baja presencia visual. No debe usarse cuando el borde sea necesario para identificar un componente, su límite o su estado.
| Token | Claro | Oscuro |
|---|---|---|
--color-border-base-subtle | neutral opacity 600 | dark neutral opacity 500 |
Strong
Borde neutral de alta presencia visual. Se usa cuando el borde es necesario para identificar un componente, su límite o su estado, y debe cumplir contraste mínimo 3:1 contra colores adyacentes. Non-text Contrast (Level AA).
| Token | Claro | Oscuro |
|---|---|---|
--color-border-base-strong | neutral opacity 900 | dark neutral opacity 800 |
Brand
Bordes asociados a elementos interactivos.
Subtle
Borde para elementos interactivos de baja presencia. No debe usarse cuando el borde sea la única señal de selección, estado activo o interacción principal.
| Token | Claro | Oscuro |
|---|---|---|
--color-border-brand-subtle | brand 400 | brand 1100 |
Strong
Borde para elementos interactivos de alta presencia. Se usa cuando el borde comunica selección, estado activo o interacción brand, y debe ser claramente distinguible contra colores adyacentes. Non-text Contrast (Level AA).
| Token | Claro | Oscuro |
|---|---|---|
--color-border-brand-strong | brand 1000 | brand 500 |
Positive
Bordes para comunicar estados positivos, éxito o validación correcta.
Subtle
Borde positivo de baja presencia. No debe usarse cuando el borde sea la señal principal de éxito, validación o estado positivo.
| Token | Claro | Oscuro |
|---|---|---|
--color-border-positive-subtle | green 400 | green 1100 |
Strong
Borde positivo de alta presencia. Se usa cuando el borde es una señal principal de éxito o validación, y debe ser distinguible contra colores adyacentes.
| Token | Claro | Oscuro |
|---|---|---|
--color-border-positive-strong | green 900 | green 700 |
Warning
Bordes para comunicar advertencias, precauciones o estados que requieren atención.
Subtle
Borde de advertencia de baja presencia. No debe usarse cuando el borde sea la señal principal de advertencia o atención.
| Token | Claro | Oscuro |
|---|---|---|
--color-border-warning-subtle | yellow 400 | blue 1100 |
Strong
Borde de advertencia de alta presencia. Se usa cuando el borde es una señal principal de advertencia o atención, y debe ser distinguible contra colores adyacentes.
| Token | Claro | Oscuro |
|---|---|---|
--color-border-warning-strong | yellow 900 | yellow 700 |
Danger
Bordes para comunicar errores, estados críticos o acciones destructivas.
Subtle
Borde de error de baja presencia. No debe usarse cuando el borde sea la señal principal de error, validación fallida o estado crítico.
| Token | Claro | Oscuro |
|---|---|---|
--color-border-danger-subtle | red 400 | red 1000 |
Strong
Borde de error de alta presencia. Se usa en inputs inválidos, controles con error o estados críticos donde el borde es la señal principal y debe cumplir contraste mínimo 3:1 contra colores adyacentes. Non-text Contrast (Level AA).
| Token | Claro | Oscuro |
|---|---|---|
--color-border-danger-strong | red 900 | red 500 |
Info
Bordes para comunicar información contextual, ayuda o estados informativos.
Subtle
Borde informativo de baja presencia. No debe usarse cuando el borde sea la señal principal para comunicar un estado informativo o activo.
| Token | Claro | Oscuro |
|---|---|---|
--color-border-info-subtle | blue 400 | blue 1100 |
Strong
Borde informativo de alta presencia. Se usa cuando el borde comunica información relevante o un estado informativo activo, y debe ser distinguible contra colores adyacentes. Non-text Contrast (Level AA).
| Token | Claro | Oscuro |
|---|---|---|
--color-border-info-strong | blue 900 | blue 700 |
Disabled
Disabled
Borde para elementos deshabilitados o no disponibles.
| Token | Claro | Oscuro |
|---|---|---|
--color-border-disabled | neutral opacity 700 | dark neutral opacity 600 |
Focus
Focus
Borde para indicar foco de navegación o interacción accesible.
| Token | Claro | Oscuro |
|---|---|---|
--color-border-focus | blue 700 | blue 700 |
Última actualización: Septiembre de 2026