Tokens de dominio

Los tokens de dominio son la API pública de diseño de Consents. Se configuran únicamente bajo payload.design.tokens. Sus nombres representan usos concretos del componente; los tokens semánticos y primitivos del DS son valores, no nombres públicos de override.

json

{
  "design": {
    "tokens": {
      "container-background-color": "base.primary",
      "footer-button-radius": "md"
    }
  }
}

Las referencias abreviadas son la forma recomendada. Las rutas DS completas compatibles siguen aceptándose para mantener la compatibilidad.

Los valores predeterminados se resuelven para el modo activo light o dark y, en tipografía, para desktop o mobile. Los valores siguientes conservan intencionadamente el resultado visual anterior. En particular, container-background-color y statement-card-background-color son transparentes por defecto.

Los colores y la geometría del switch son reglas de negocio fijas. Usan tokens DS internos y no forman parte de este catálogo público.

Nota: En todos los grupos también se pueden usar tokens primitivos. Consulta Tokens primitivos.

Color

Los tokens se agrupan por el área funcional del componente. Cada valor predeterminado muestra la referencia abreviada que acepta la configuración y el valor que resuelve en cada modo; cuando las opciones cambian según el estado, la tabla de semánticos elegibles lo indica expresamente.

Los tokens de dominio de color también admiten colores CSS válidos.

Algunos valores predeterminados se marcan como internos: conservan la compatibilidad visual, pero no forman parte de las opciones públicas del grupo. Para configurar un override, usa únicamente una referencia incluida en la tabla de semánticos elegibles correspondiente.

Fondo exterior

Token	Descripción	Valor light	Valor dark
`component-background-color`	Aplica sobre el contenedor Pantalla.	`primary` `#F9FAFC`	`primary` `#0C0F18`

Tokens semánticos elegibles para Fondo exterior

Referencia abreviada	Valor light	Valor dark
`default`	`#FFFFFF`	`#000000`
`primary`	`#F9FAFC`	`#0C0F18`
`sunken`	`#0C0F18`	`#0C0F18`

Superficies generales

Token	Descripción	Valor light	Valor dark
`container-background-color`	Aplica sobre el fondo del Contenedor.	`base.overlay.transparent` `rgba(0, 0, 0, 0)`	`base.overlay.transparent` `rgba(255, 255, 255, 0)`
`header-background-color`	Aplica sobre el fondo de la Cabecera.	`base.primary` `#FFFFFF`	`base.subtle` `#1A2330`

Tokens semánticos elegibles para Superficies generales

Referencia abreviada	Valor light	Valor dark
`base.disabled`	`#D1D5DB`	`#4B5563`
`base.inverse`	`#111827`	`#FFFFFF`
`base.overlay.backdrop`	`rgba(31, 31, 31, 0.3)`	`rgba(31, 31, 31, 0.5)`
`base.overlay.hover`	`rgba(0, 0, 0, 0.05)`	`rgba(255, 255, 255, 0.05)`
`base.overlay.scrim`	`rgba(0, 0, 0, 0)`	`rgba(0, 0, 0, 0.8)`
`base.overlay.selected`	`rgba(0, 0, 0, 0.1)`	`rgba(255, 255, 255, 0.1)`
`base.overlay.transparent`	`rgba(0, 0, 0, 0)`	`rgba(255, 255, 255, 0)`
`base.primary`	`#FFFFFF`	`#111827`
`base.secondary`	`#F3F4F6`	`#1F2937`
`base.subtle`	`#FAFBFC`	`#1A2330`
`base.tertiary`	`#E5E7EB`	`#374151`
`colored.blue.filled`	`#447FED`	`#447FED`
`colored.blue.subtle`	`#EFF6FF`	`#003EB7`
`colored.blue.tonal`	`#EDF4FF`	`#1D51E4`
`colored.default.default`	`#FFFFFF`	`#1A2330`
`colored.emerald.filled`	`#059669`	`#059669`
`colored.emerald.subtle`	`#ECFDF5`	`#002C22`
`colored.emerald.tonal`	`#D1FAE5`	`#064E3B`
`colored.fuchsia.filled`	`#D1126E`	`#D1126E`
`colored.fuchsia.subtle`	`#FEF2F7`	`#570B2F`
`colored.fuchsia.tonal`	`#FCE5F1`	`#7A0940`
`colored.green.filled`	`#5B9F2E`	`#5B9F2E`
`colored.green.subtle`	`#F0FDF4`	`#296133`
`colored.green.tonal`	`#F0FAE8`	`#3E8B4E`
`colored.grey.filled`	`#757575`	`#757575`
`colored.grey.subtle`	`#FAFAFA`	`#0A0A0A`
`colored.grey.tonal`	`#F5F5F5`	`#1F1F1F`
`colored.neutral.filled`	`#4B5563`	`#4B5563`
`colored.neutral.subtle`	`#FAFBFC`	`#111827`
`colored.neutral.tonal`	`#F3F4F6`	`#1A2330`
`colored.orange.filled`	`#D55E35`	`#D55E35`
`colored.orange.subtle`	`#FFF7E9`	`#902906`
`colored.orange.tonal`	`#FCEEE0`	`#B03E1B`
`colored.purple.filled`	`#8E328A`	`#8E328A`
`colored.purple.subtle`	`#FBF2F9`	`#422B6E`
`colored.purple.tonal`	`#F2E5EF`	`#5A3581`
`colored.red.filled`	`#D53D46`	`#D53D46`
`colored.red.subtle`	`#FFF5F4`	`#8A1910`
`colored.red.tonal`	`#F6DFDD`	`#A62319`
`colored.slate.filled`	`#475569`	`#475569`
`colored.slate.subtle`	`#F9FAFC`	`#0C0F18`
`colored.slate.tonal`	`#F1F5F9`	`#0F172A`
`colored.yellow.filled`	`#EAB308`	`#EAB308`
`colored.yellow.subtle`	`#FEFCE8`	`#713F12`
`colored.yellow.tonal`	`#FEF9C2`	`#854D0E`
`semantic.critical.filled`	`#BF2828`	`#D53D46`
`semantic.critical.subtle`	`#FFF5F4`	`#8A1910`
`semantic.critical.tonal`	`#F6DFDD`	`#A62319`
`semantic.info.filled`	`#447FED`	`#4686FF`
`semantic.info.subtle`	`#EFF6FF`	`#003EB7`
`semantic.info.tonal`	`#EDF4FF`	`#1D51E4`
`semantic.success.filled`	`#5B9F2E`	`#60B129`
`semantic.success.subtle`	`#F0FDF4`	`#296133`
`semantic.success.tonal`	`#F0FAE8`	`#3E8B4E`
`semantic.warning.filled`	`#D55E35`	`#E2681A`
`semantic.warning.subtle`	`#FFF7E9`	`#902906`
`semantic.warning.tonal`	`#FCEEE0`	`#B03E1B`
`sunken.primary`	`#1A2330`	`#1A2330`
`sunken.secondary`	`#1F2937`	`#1F2937`
`sunken.tertiary`	`#374151`	`#374151`

Bordes generales

Token	Descripción	Valor light	Valor dark
`container-border-color`	Aplica sobre el borde del Contenedor en modo flat.	`base.secondary` `#E5E7EB`	`base.primary` `#4B5563`

Tokens semánticos elegibles para Bordes generales

Referencia abreviada	Valor light	Valor dark
`accent.blue`	`#A2C1F8`	`#4686FF`
`accent.emerald`	`#6EE7B7`	`#059669`
`accent.fuchsia`	`#F5A5CF`	`#D1126E`
`accent.green`	`#C0E19F`	`#60B129`
`accent.grey`	`#E0E0E0`	`#757575`
`accent.neutral`	`#D1D5DB`	`#4B5563`
`accent.orange`	`#ECAE75`	`#E2681A`
`accent.purple`	`#C792BE`	`#8E328A`
`accent.red`	`#ED786A`	`#D53D46`
`accent.slate`	`#CBD5E1`	`#475569`
`accent.yellow`	`#FFE86F`	`#EAB308`
`base.inverse`	`#374151`	`#E5E7EB`
`base.on-filled`	`#FFFFFF`	`#000000`
`base.primary`	`#D1D5DB`	`#4B5563`
`base.secondary`	`#E5E7EB`	`#374151`
`base.tertiary`	`#F3F4F6`	`#1F2937`
`brand.inverse`	`#003EB7`	`#003EB7`
`brand.primary`	`#AEC7EE`	`#AEC7EE`
`on-surface.critical.active`	`#A62319`	`#ED5E4E`
`on-surface.critical.default`	`#BF2828`	`#D53D46`
`on-surface.critical.disabled`	`#9CA3AF`	`#6B7280`
`on-surface.critical.hover`	`#B72627`	`#EC5561`
`on-surface.primary.active`	`#003EB7`	`#4686FF`
`on-surface.primary.default`	`#3466F5`	`#3466F5`
`on-surface.primary.disabled`	`#9CA3AF`	`#6B7280`
`on-surface.primary.hover`	`#1D51E4`	`#447FED`
`on-surface.secondary.active`	`#6B7280`	`#9CA3AF`
`on-surface.secondary.default`	`#D1D5DB`	`#4B5563`
`on-surface.secondary.disabled`	`#E5E7EB`	`#374151`
`on-surface.secondary.hover`	`#9CA3AF`	`#6B7280`
`on-surface.transparent`	`rgba(0, 0, 0, 0)`	`rgba(255, 255, 255, 0)`
`semantic.critical.outlined`	`#ED786A`	`#D53D46`
`semantic.critical.subtle`	`#F2A69E`	`#EC5561`
`semantic.info.outlined`	`#A2C1F8`	`#4686FF`
`semantic.info.subtle`	`#AEC7EE`	`#6994FF`
`semantic.success.outlined`	`#C0E19F`	`#60B129`
`semantic.success.subtle`	`#D4EABE`	`#92CC5C`
`semantic.warning.outlined`	`#ECAE75`	`#E2681A`
`semantic.warning.subtle`	`#F8D1AD`	`#FF7901`
`switch.critical`	`#D53D46`	`#EC5561`
`switch.focus`	`#3466F5`	`#3466F5`
`textfield.default`	`#D1D5DB`	`#374151`
`textfield.disabled`	`#E5E7EB`	`#4B5563`
`textfield.error`	`#D53D46`	`#ED5E4E`
`textfield.focused`	`#3466F5`	`#447FED`

Texto general

Token	Descripción	Valor light	Valor dark
`title-color`	Aplica sobre el Título.	`base.primary` `#111827`	`base.primary` `#E5E7EB`
`description-color`	Aplica sobre la Descripción de cabecera.	`base.primary` `#111827`	`base.primary` `#E5E7EB`
`language-selector-text-color`	Aplica sobre el texto del Selector de idioma.	`base.primary` `#111827`	`base.primary` `#E5E7EB`

Tokens semánticos elegibles para Texto general

Referencia abreviada	Valor light	Valor dark
`accent.blue`	`#3466F5`	`#82ABF5`
`accent.emerald`	`#059669`	`#34D399`
`accent.fuchsia`	`#D1126E`	`#F067AB`
`accent.green`	`#5B9F2E`	`#A6D579`
`accent.grey`	`#757575`	`#BDBDBD`
`accent.orange`	`#FF7901`	`#F29C52`
`accent.purple`	`#8E328A`	`#B168A7`
`accent.red`	`#D53D46`	`#ED5E4E`
`accent.slate`	`#475569`	`#94A3B8`
`accent.yellow`	`#EAB308`	`#FDE047`
`base.disabled`	`#9CA3AF`	`#6B7280`
`base.inverse`	`#FAFBFC`	`#111827`
`base.on-filled`	`#FFFFFF`	`#FFFFFF`
`base.primary`	`#111827`	`#E5E7EB`
`base.secondary`	`#4B5563`	`#D1D5DB`
`base.subtle`	`#D1D5DB`	`#4B5563`
`base.tertiary`	`#6B7280`	`#9CA3AF`
`colored.blue.outlined`	`#4686FF`	`#82ABF5`
`colored.blue.subtle`	`#1D51E4`	`#AEC7EE`
`colored.blue.tonal`	`#1D51E4`	`#AEC7EE`
`colored.default.default`	`#1A2330`	`#FAFBFC`
`colored.emerald.outlined`	`#059669`	`#34D399`
`colored.emerald.subtle`	`#064E3B`	`#A7F3D0`
`colored.emerald.tonal`	`#064E3B`	`#A7F3D0`
`colored.fuchsia.outlined`	`#D1126E`	`#F067AB`
`colored.fuchsia.subtle`	`#7A0940`	`#F9CCE3`
`colored.fuchsia.tonal`	`#7A0940`	`#F9CCE3`
`colored.green.outlined`	`#60B129`	`#A6D579`
`colored.green.subtle`	`#3E8B4E`	`#D4EABE`
`colored.green.tonal`	`#3E8B4E`	`#D4EABE`
`colored.grey.outlined`	`#757575`	`#BDBDBD`
`colored.grey.subtle`	`#1F1F1F`	`#EEEEEE`
`colored.grey.tonal`	`#1F1F1F`	`#EEEEEE`
`colored.neutral.outlined`	`#4B5563`	`#9CA3AF`
`colored.neutral.subtle`	`#1A2330`	`#E5E7EB`
`colored.neutral.tonal`	`#1A2330`	`#E5E7EB`
`colored.orange.outlined`	`#E2681A`	`#F29C52`
`colored.orange.subtle`	`#B03E1B`	`#F8D1AD`
`colored.orange.tonal`	`#B03E1B`	`#F8D1AD`
`colored.purple.outlined`	`#8E328A`	`#B168A7`
`colored.purple.subtle`	`#5A3581`	`#DDBDD7`
`colored.purple.tonal`	`#5A3581`	`#DDBDD7`
`colored.red.outlined`	`#D53D46`	`#ED5E4E`
`colored.red.subtle`	`#A62319`	`#F2A69E`
`colored.red.tonal`	`#A62319`	`#F2A69E`
`colored.slate.outlined`	`#475569`	`#94A3B8`
`colored.slate.subtle`	`#0F172A`	`#E2E8F0`
`colored.slate.tonal`	`#0F172A`	`#E2E8F0`
`colored.yellow.filled`	`#111827`	`#111827`
`colored.yellow.outlined`	`#EAB308`	`#FDE047`
`colored.yellow.subtle`	`#854D0E`	`#FEF08A`
`colored.yellow.tonal`	`#854D0E`	`#FEF08A`

Icono del selector de idioma

Token	Descripción	Valor light	Valor dark
`language-selector-icon-color`	Aplica sobre el icono de despliegue del Selector de idioma.	`icon.base.primary` (interno) `#111827`	`icon.base.primary` (interno) `#E5E7EB`

Tokens semánticos elegibles para Icono del selector de idioma

Referencia abreviada	Valor light	Valor dark
`blue`	`#3466F5`	`#82ABF5`
`emerald`	`#059669`	`#34D399`
`fuchsia`	`#D1126E`	`#F067AB`
`green`	`#5B9F2E`	`#A6D579`
`grey`	`#757575`	`#BDBDBD`
`orange`	`#FF7901`	`#F29C52`
`purple`	`#8E328A`	`#B168A7`
`red`	`#D53D46`	`#ED5E4E`
`slate`	`#475569`	`#94A3B8`
`yellow`	`#EAB308`	`#FDE047`

Superficies base sin overlays

Token	Descripción	Valor light	Valor dark
`language-selector-menu-background-color`	Aplica sobre el fondo del Menú de idioma.	`primary` `#FFFFFF`	`subtle` `#1A2330`
`parent-statement-background-color`	Aplica sobre el fondo del Consentimiento padre.	`primary` `#FFFFFF`	`subtle` `#1A2330`

Tokens semánticos elegibles para Superficies base sin overlays

Referencia abreviada	Valor light	Valor dark
`disabled`	`#D1D5DB`	`#4B5563`
`inverse`	`#111827`	`#FFFFFF`
`primary`	`#FFFFFF`	`#111827`
`secondary`	`#F3F4F6`	`#1F2937`
`subtle`	`#FAFBFC`	`#1A2330`
`tertiary`	`#E5E7EB`	`#374151`

Texto base y de acento

Token	Descripción	Valor light	Valor dark
`parent-statement-text-color`	Aplica sobre el Texto de consentimiento del Consentimiento padre.	`base.primary` `#111827`	`base.primary` `#E5E7EB`
`parent-statement-description-color`	Aplica sobre la Descripción de consentimiento del Consentimiento padre.	`base.primary` `#111827`	`base.primary` `#E5E7EB`
`child-statement-text-color`	Aplica sobre el Texto de consentimiento del Consentimiento hijo.	`base.primary` `#111827`	`base.primary` `#E5E7EB`
`child-statement-description-color`	Aplica sobre la Descripción de consentimiento del Consentimiento hijo.	`base.primary` `#111827`	`base.primary` `#E5E7EB`

Tokens semánticos elegibles para Texto base y de acento

Referencia abreviada	Valor light	Valor dark
`accent.blue`	`#3466F5`	`#82ABF5`
`accent.emerald`	`#059669`	`#34D399`
`accent.fuchsia`	`#D1126E`	`#F067AB`
`accent.green`	`#5B9F2E`	`#A6D579`
`accent.grey`	`#757575`	`#BDBDBD`
`accent.orange`	`#FF7901`	`#F29C52`
`accent.purple`	`#8E328A`	`#B168A7`
`accent.red`	`#D53D46`	`#ED5E4E`
`accent.slate`	`#475569`	`#94A3B8`
`accent.yellow`	`#EAB308`	`#FDE047`
`base.disabled`	`#9CA3AF`	`#6B7280`
`base.inverse`	`#FAFBFC`	`#111827`
`base.on-filled`	`#FFFFFF`	`#FFFFFF`
`base.primary`	`#111827`	`#E5E7EB`
`base.secondary`	`#4B5563`	`#D1D5DB`
`base.subtle`	`#D1D5DB`	`#4B5563`
`base.tertiary`	`#6B7280`	`#9CA3AF`

Bordes base y de acento

Token	Descripción	Valor light	Valor dark
`statement-divider-color`	Aplica sobre los divisores de la Lista de consentimientos.	`base.secondary` `#E5E7EB`	`base.primary` `#4B5563`

Tokens semánticos elegibles para Bordes base y de acento

Referencia abreviada	Valor light	Valor dark
`accent.blue`	`#A2C1F8`	`#4686FF`
`accent.emerald`	`#6EE7B7`	`#059669`
`accent.fuchsia`	`#F5A5CF`	`#D1126E`
`accent.green`	`#C0E19F`	`#60B129`
`accent.grey`	`#E0E0E0`	`#757575`
`accent.neutral`	`#D1D5DB`	`#4B5563`
`accent.orange`	`#ECAE75`	`#E2681A`
`accent.purple`	`#C792BE`	`#8E328A`
`accent.red`	`#ED786A`	`#D53D46`
`accent.slate`	`#CBD5E1`	`#475569`
`accent.yellow`	`#FFE86F`	`#EAB308`
`base.inverse`	`#374151`	`#E5E7EB`
`base.on-filled`	`#FFFFFF`	`#000000`
`base.primary`	`#D1D5DB`	`#4B5563`
`base.secondary`	`#E5E7EB`	`#374151`
`base.tertiary`	`#F3F4F6`	`#1F2937`

Icono de ayuda

Token	Descripción	Valor light	Valor dark
`statement-help-icon-color`	Aplica sobre el Icono de ayuda.	`base.tertiary` `#6B7280`	`base.tertiary` `#9CA3AF`

Tokens semánticos elegibles para Icono de ayuda

Referencia abreviada	Valor light	Valor dark
`accent.blue`	`#3466F5`	`#82ABF5`
`accent.emerald`	`#059669`	`#34D399`
`accent.fuchsia`	`#D1126E`	`#F067AB`
`accent.green`	`#5B9F2E`	`#A6D579`
`accent.grey`	`#757575`	`#BDBDBD`
`accent.orange`	`#FF7901`	`#F29C52`
`accent.purple`	`#8E328A`	`#B168A7`
`accent.red`	`#D53D46`	`#ED5E4E`
`accent.slate`	`#475569`	`#94A3B8`
`accent.yellow`	`#EAB308`	`#FDE047`
`base.disabled`	`#9CA3AF`	`#6B7280`
`base.inverse`	`#FAFBFC`	`#111827`
`base.on-filled`	`#FFFFFF`	`#FFFFFF`
`base.primary`	`#111827`	`#E5E7EB`
`base.secondary`	`#4B5563`	`#D1D5DB`
`base.subtle`	`#D1D5DB`	`#4B5563`
`base.tertiary`	`#6B7280`	`#9CA3AF`
`semantic.critical.filled`	`#FFFFFF`	`#FFFFFF`
`semantic.critical.outlined`	`#D53D46`	`#ED5E4E`
`semantic.critical.primary`	`#B72627`	`#EC5561`
`semantic.critical.tonal`	`#A62319`	`#F6DFDD`
`semantic.info.filled`	`#FFFFFF`	`#FFFFFF`
`semantic.info.outlined`	`#4686FF`	`#82ABF5`
`semantic.info.primary`	`#3466F5`	`#6994FF`
`semantic.info.tonal`	`#1D51E4`	`#EDF4FF`
`semantic.success.filled`	`#FFFFFF`	`#FFFFFF`
`semantic.success.outlined`	`#60B129`	`#A6D579`
`semantic.success.primary`	`#4A9537`	`#92CC5C`
`semantic.success.tonal`	`#3E8B4E`	`#F0FAE8`
`semantic.warning.filled`	`#FFFFFF`	`#FFFFFF`
`semantic.warning.outlined`	`#E2681A`	`#F29C52`
`semantic.warning.primary`	`#C93A23`	`#FF7901`
`semantic.warning.tonal`	`#B03E1B`	`#FCEEE0`

Superficies base

Token	Descripción	Valor light	Valor dark
`statement-card-background-color`	Aplica sobre el fondo de la Tarjeta de consentimiento en modo boxed.	`overlay.transparent` `rgba(0, 0, 0, 0)`	`overlay.transparent` `rgba(255, 255, 255, 0)`
`footer-background-color`	Aplica sobre el fondo del Pie en modo flat.	`primary` `#FFFFFF`	`subtle` `#1A2330`
`dialog-background-color`	Aplica sobre el fondo del Diálogo informativo.	`primary` `#FFFFFF`	`subtle` `#1A2330`

Tokens semánticos elegibles para Superficies base

Referencia abreviada	Valor light	Valor dark
`disabled`	`#D1D5DB`	`#4B5563`
`inverse`	`#111827`	`#FFFFFF`
`overlay.backdrop`	`rgba(31, 31, 31, 0.3)`	`rgba(31, 31, 31, 0.5)`
`overlay.hover`	`rgba(0, 0, 0, 0.05)`	`rgba(255, 255, 255, 0.05)`
`overlay.scrim`	`rgba(0, 0, 0, 0)`	`rgba(0, 0, 0, 0.8)`
`overlay.selected`	`rgba(0, 0, 0, 0.1)`	`rgba(255, 255, 255, 0.1)`
`overlay.transparent`	`rgba(0, 0, 0, 0)`	`rgba(255, 255, 255, 0)`
`primary`	`#FFFFFF`	`#111827`
`secondary`	`#F3F4F6`	`#1F2937`
`subtle`	`#FAFBFC`	`#1A2330`
`tertiary`	`#E5E7EB`	`#374151`

Bordes base

Token	Descripción	Valor light	Valor dark
`statement-card-border-color`	Aplica sobre el borde de la Tarjeta de consentimiento en modo boxed.	`primary` `#D1D5DB`	`secondary` `#374151`

Tokens semánticos elegibles para Bordes base

Referencia abreviada	Valor light	Valor dark
`inverse`	`#374151`	`#E5E7EB`
`on-filled`	`#FFFFFF`	`#000000`
`primary`	`#D1D5DB`	`#4B5563`
`secondary`	`#E5E7EB`	`#374151`
`tertiary`	`#F3F4F6`	`#1F2937`

Checkbox

Token	Descripción	Valor light	Valor dark
`checkbox-unchecked-icon-color`	Aplica sobre el Control de selección cuando se muestra como checkbox desmarcado.	`icon.base.tertiary` (interno) `#6B7280`	`icon.base.tertiary` (interno) `#9CA3AF`
`checkbox-checked-icon-color`	Aplica sobre el Control de selección cuando se muestra como checkbox marcado.	`icon.brand.primary` (interno) `#3466F5`	`blue.800` `#3466F5`

Tokens semánticos elegibles para Checkbox

Referencia abreviada	Valor light	Valor dark
`critical.active`	`#A62319`	`#ED5E4E`
`critical.default`	`#BF2828`	`#D53D46`
`critical.disabled`	`#9CA3AF`	`#6B7280`
`critical.hover`	`#B72627`	`#EC5561`
`primary.active`	`#003EB7`	`#4686FF`
`primary.default`	`#3466F5`	`#3466F5`
`primary.disabled`	`#9CA3AF`	`#6B7280`
`primary.hover`	`#1D51E4`	`#447FED`
`secondary.active`	`#111827`	`#FFFFFF`
`secondary.default`	`#1F2937`	`#FAFBFC`
`secondary.disabled`	`#9CA3AF`	`#6B7280`
`secondary.hover`	`#1A2330`	`#D1D5DB`

Icono de colapsado

Token	Descripción	Valor light	Valor dark
`collapse-button-icon-color`	Aplica sobre el icono del Botón de despliegue.	`base.primary` `#111827`	`base.primary` `#E5E7EB`

Tokens semánticos elegibles para Icono de colapsado

Referencia abreviada	Valor light	Valor dark
`accent.blue`	`#3466F5`	`#82ABF5`
`accent.emerald`	`#059669`	`#34D399`
`accent.fuchsia`	`#D1126E`	`#F067AB`
`accent.green`	`#5B9F2E`	`#A6D579`
`accent.grey`	`#757575`	`#BDBDBD`
`accent.orange`	`#FF7901`	`#F29C52`
`accent.purple`	`#8E328A`	`#B168A7`
`accent.red`	`#D53D46`	`#ED5E4E`
`accent.slate`	`#475569`	`#94A3B8`
`accent.yellow`	`#EAB308`	`#FDE047`
`base.disabled`	`#9CA3AF`	`#6B7280`
`base.inverse`	`#FAFBFC`	`#111827`
`base.on-filled`	`#FFFFFF`	`#FFFFFF`
`base.primary`	`#111827`	`#E5E7EB`
`base.secondary`	`#4B5563`	`#D1D5DB`
`base.subtle`	`#D1D5DB`	`#4B5563`
`base.tertiary`	`#6B7280`	`#9CA3AF`

Botón CTA

Token	Descripción	Valor light	Valor dark
`footer-button-background-color`	Aplica sobre el Botón CTA en su estado default.	`primary.default` `#3466F5`	`primary.default` `#3466F5`
`footer-button-hover-background-color`	Aplica sobre el Botón CTA en su estado hover.	`valor local` `#1467EB`	`valor local` `#1467EB`
`footer-button-pressed-background-color`	Aplica sobre el Botón CTA en su estado pressed.	`primary.active` `#003EB7`	`primary.active` `#003EB7`

Tokens semánticos elegibles para Botón CTA

Estado	Referencia abreviada	Valor light	Valor dark
Default	`primary.default`	`#3466F5`	`#3466F5`
Default	`secondary.default`	`#1A2330`	`#F3F4F6`
Hover	`primary.hover`	`#1D51E4`	`#1D51E4`
Hover	`secondary.hover`	`#111827`	`#D1D5DB`
Pressed	`primary.active`	`#003EB7`	`#003EB7`
Pressed	`secondary.active`	`#0C0F18`	`#FAFBFC`

Texto botón CTA

Token	Descripción	Valor light	Valor dark
`footer-button-text-color`	Aplica sobre el texto del Botón CTA.	`base.on-filled` `#FFFFFF`	`base.on-filled` `#FFFFFF`

Tokens semánticos elegibles para Texto botón CTA

Referencia abreviada	Valor light	Valor dark
`base.on-filled`	`#FFFFFF`	`#FFFFFF`
`on-filled.critical.active`	`#A62319`	`#FFFFFF`
`on-filled.critical.default`	`#FFFFFF`	`#FFFFFF`
`on-filled.critical.disabled`	`#9CA3AF`	`#6B7280`
`on-filled.critical.hover`	`#B72627`	`#FFFFFF`
`on-filled.primary.active`	`#3466F5`	`#EDF4FF`
`on-filled.primary.default`	`#FFFFFF`	`#FFFFFF`
`on-filled.primary.disabled`	`#9CA3AF`	`#6B7280`
`on-filled.primary.hover`	`#3466F5`	`#EDF4FF`
`on-filled.secondary.active`	`#1F2937`	`#FFFFFF`
`on-filled.secondary.default`	`#FFFFFF`	`#111827`
`on-filled.secondary.disabled`	`#9CA3AF`	`#6B7280`
`on-filled.secondary.hover`	`#1A2330`	`#FFFFFF`

Superficies de validación

Token	Descripción	Valor light	Valor dark
`validation-alert-background-color`	Aplica sobre el fondo de la Alerta de validación.	`critical.subtle` `#FFF5F4`	`critical.tonal` `#A62319`

Tokens semánticos elegibles para Superficies de validación

Referencia abreviada	Valor light	Valor dark
`critical.filled`	`#BF2828`	`#D53D46`
`critical.subtle`	`#FFF5F4`	`#8A1910`
`critical.tonal`	`#F6DFDD`	`#A62319`
`warning.filled`	`#D55E35`	`#E2681A`
`warning.subtle`	`#FFF7E9`	`#902906`
`warning.tonal`	`#FCEEE0`	`#B03E1B`

Texto de validación

Token	Descripción	Valor light	Valor dark
`validation-alert-text-color`	Aplica sobre el texto de la Alerta de validación.	`red.700` `#BF2828`	`red.50` `#FFF5F4`

Tokens semánticos elegibles para Texto de validación

Referencia abreviada	Valor light	Valor dark
`critical.filled`	`#FFFFFF`	`#FFFFFF`
`critical.outlined`	`#D53D46`	`#ED5E4E`
`critical.primary`	`#B72627`	`#EC5561`
`critical.tonal`	`#A62319`	`#F6DFDD`
`warning.filled`	`#FFFFFF`	`#FFFFFF`
`warning.outlined`	`#E2681A`	`#F29C52`
`warning.primary`	`#C93A23`	`#FF7901`
`warning.tonal`	`#B03E1B`	`#FCEEE0`

Iconos de validación

Token	Descripción	Valor light	Valor dark
`validation-alert-icon-color`	Aplica sobre el icono de la Alerta de validación.	`red.700` `#BF2828`	`red.50` `#FFF5F4`

Tokens semánticos elegibles para Iconos de validación

Referencia abreviada	Valor light	Valor dark
`critical.filled`	`#FFFFFF`	`#FFFFFF`
`critical.outlined`	`#D53D46`	`#ED5E4E`
`critical.primary`	`#B72627`	`#EC5561`
`critical.tonal`	`#A62319`	`#F6DFDD`
`warning.filled`	`#FFFFFF`	`#FFFFFF`
`warning.outlined`	`#E2681A`	`#F29C52`
`warning.primary`	`#C93A23`	`#FF7901`
`warning.tonal`	`#B03E1B`	`#FCEEE0`

Texto del diálogo

Token	Descripción	Valor light	Valor dark
`dialog-text-color`	Aplica sobre el texto descriptivo del Diálogo informativo.	`primary` `#111827`	`primary` `#E5E7EB`

Tokens semánticos elegibles para Texto del diálogo

Referencia abreviada	Valor light	Valor dark
`disabled`	`#9CA3AF`	`#6B7280`
`inverse`	`#FAFBFC`	`#111827`
`on-filled`	`#FFFFFF`	`#FFFFFF`
`primary`	`#111827`	`#E5E7EB`
`secondary`	`#4B5563`	`#D1D5DB`
`subtle`	`#D1D5DB`	`#4B5563`
`tertiary`	`#6B7280`	`#9CA3AF`

Tipografía

Los tokens se agrupan por los estilos completos que admiten. Cada estilo fija family, size, weight, lineheight y letterspacing; el consumidor puede sobrescribir además la familia con Inter o Menlo.

Los defaults marcados como internos o con ajustes internos conservan la compatibilidad visual; esos ajustes no son opciones públicas del grupo.

Títulos

Token	Descripción	Valor desktop	Valor mobile
`title-typography`	Aplica sobre el Título.	`h4` (ajustes internos) `Inter · 24px · 700 · 42px · -0.12px`	`h4` (ajustes internos) `Inter · 20px · 600 · 32px · -0.1px`

Estilos semánticos elegibles para Títulos

Desktop

Referencia abreviada	Family	Size	Weight	Lineheight	Letterspacing
`h1`	`Inter`	56px	`700`	84px	-0.67px
`h2`	`Inter`	48px	`700`	72px	-0.36px
`h3`	`Inter`	32px	`700`	48px	-0.19px
`h4`	`Inter`	24px	`600`	36px	-0.12px
`h5`	`Inter`	20px	`600`	30px	-0.1px
`h6`	`Inter`	18px	`600`	28px	-0.2px

Mobile

Referencia abreviada	Family	Size	Weight	Lineheight	Letterspacing
`h1`	`Inter`	40px	`700`	60px	-0.67px
`h2`	`Inter`	32px	`700`	48px	-0.36px
`h3`	`Inter`	24px	`700`	36px	-0.19px
`h4`	`Inter`	20px	`600`	30px	-0.12px
`h5`	`Inter`	18px	`600`	30px	-0.1px
`h6`	`Inter`	16px	`600`	24px	-0.2px

Tipografía general

Token	Descripción	Valor desktop	Valor mobile
`description-typography`	Aplica sobre la Descripción de cabecera.	`md-regular` `Inter · 14px · 400 · 22px · 0px`	`md-regular` `Inter · 14px · 400 · 22px · 0px`
`language-selector-text-typography`	Aplica sobre el Selector de idioma.	`md-regular` `Inter · 14px · 400 · 22px · 0px`	`md-regular` `Inter · 14px · 400 · 22px · 0px`
`parent-statement-text-typography`	Aplica sobre el Texto de consentimiento del Consentimiento padre.	`base-medium` (ajustes internos) `Inter · 16px · 500 · 28px · 0px`	`base-medium` (ajustes internos) `Inter · 16px · 500 · 28px · 0px`
`parent-statement-description-typography`	Aplica sobre la Descripción de consentimiento del Consentimiento padre.	`md-regular` `Inter · 14px · 400 · 22px · 0px`	`md-regular` `Inter · 14px · 400 · 22px · 0px`
`child-statement-text-typography`	Aplica sobre el Texto de consentimiento del Consentimiento hijo.	`md-medium` `Inter · 14px · 500 · 22px · 0px`	`md-medium` `Inter · 14px · 500 · 22px · 0px`
`child-statement-description-typography`	Aplica sobre la Descripción de consentimiento del Consentimiento hijo.	`md-regular` `Inter · 14px · 400 · 22px · 0px`	`md-regular` `Inter · 14px · 400 · 22px · 0px`
`validation-alert-typography`	Aplica sobre la Alerta de validación.	`md-regular` `Inter · 14px · 400 · 22px · 0px`	`md-regular` `Inter · 14px · 400 · 22px · 0px`
`dialog-text-typography`	Aplica sobre el Diálogo informativo.	`md-regular` `Inter · 14px · 400 · 22px · 0px`	`md-regular` `Inter · 14px · 400 · 22px · 0px`
`info-message-typography`	Aplica sobre el Mensaje de estado mostrado para un resultado vacío, de error o de éxito.	`headings.h6` (interno) `Inter · 18px · 600 · 28px · -0.2px`	`headings.h6` (interno) `Inter · 18px · 600 · 28px · -0.2px`

Estilos semánticos elegibles para Tipografía general

Desktop

Referencia abreviada	Family	Size	Weight	Lineheight	Letterspacing
`base-medium`	`Inter`	16px	`500`	24px	0px
`base-regular`	`Inter`	16px	`400`	24px	0px
`base-semibold`	`Inter`	16px	`600`	24px	0px
`md-medium`	`Inter`	14px	`500`	22px	0px
`md-regular`	`Inter`	14px	`400`	22px	0px
`md-semibold`	`Inter`	14px	`600`	22px	0px
`sm-medium`	`Inter`	12px	`500`	18px	0px
`sm-regular`	`Inter`	12px	`400`	18px	0px
`sm-semibold`	`Inter`	12px	`600`	18px	0px
`xs-regular`	`Inter`	11px	`400`	12px	0px
`xs-semibold`	`Inter`	11px	`600`	12px	0px

Mobile

Referencia abreviada	Family	Size	Weight	Lineheight	Letterspacing
`base-medium`	`Inter`	16px	`500`	24px	0px
`base-regular`	`Inter`	16px	`400`	24px	0px
`base-semibold`	`Inter`	16px	`600`	24px	0px
`md-medium`	`Inter`	14px	`500`	22px	0px
`md-regular`	`Inter`	14px	`400`	22px	0px
`md-semibold`	`Inter`	14px	`600`	22px	0px
`sm-medium`	`Inter`	12px	`500`	18px	0px
`sm-regular`	`Inter`	12px	`400`	18px	0px
`sm-semibold`	`Inter`	12px	`600`	18px	0px
`xs-regular`	`Inter`	11px	`400`	12px	0px
`xs-semibold`	`Inter`	11px	`600`	12px	0px

Botones

Token	Descripción	Valor desktop	Valor mobile
`footer-button-typography`	Aplica sobre el Botón CTA.	`md` (ajustes internos) `Inter · 14px · 500 · 22px · 0px`	`md` (ajustes internos) `Inter · 14px · 500 · 22px · 0px`

Estilos semánticos elegibles para Botones

Desktop

Referencia abreviada	Family	Size	Weight	Lineheight	Letterspacing
`base`	`Inter`	16px	`600`	24px	0px
`md`	`Inter`	14px	`600`	24px	0px
`xs`	`Inter`	12px	`600`	20px	-0.2px

Mobile

Referencia abreviada	Family	Size	Weight	Lineheight	Letterspacing
`base`	`Inter`	16px	`600`	24px	0px
`md`	`Inter`	14px	`600`	24px	0px
`xs`	`Inter`	12px	`600`	20px	-0.2px

Espaciado

Token	Descripción	Valor predeterminado
`section-gap`	Aplica sobre la separación entre la Cabecera, la Lista de consentimientos y el Pie.	`none` 0px
`global-padding-x`	Aplica sobre el padding heredado por la Cabecera, el Consentimiento padre, el Consentimiento hijo y el Pie.	`base` 16px
`global-padding-y`	Aplica sobre el padding heredado por la Cabecera, el Consentimiento padre, el Consentimiento hijo y el Pie.	`base` 16px
`header-padding-x`	Aplica sobre la Cabecera.	`hereda global-padding-x + 100` 20px
`header-padding-top`	Aplica sobre la Cabecera.	`hereda global-padding-y + 400` 32px
`header-padding-bottom`	Aplica sobre la Cabecera.	`hereda global-padding-y + 100` 20px
`header-content-gap`	Aplica sobre la Cabecera.	`base` 16px
`language-selector-flag-label-gap`	Aplica sobre el Selector de idioma.	`xs` 8px
`statement-list-padding-x`	Aplica sobre la Lista de consentimientos en modo boxed.	`sm` 12px
`statement-list-gap`	Aplica sobre la Lista de consentimientos en modo boxed.	`sm` 12px
`statement-description-gap`	Aplica sobre la separación entre el Texto de consentimiento y la Descripción de consentimiento.	`base` 16px
`parent-statement-padding-x`	Aplica sobre el Consentimiento padre.	`hereda global-padding-x` 16px
`parent-statement-padding-y`	Aplica sobre el Consentimiento padre.	`hereda global-padding-y` 16px
`parent-statement-description-gap`	Aplica sobre el Consentimiento padre.	`hereda statement-description-gap` 16px
`child-statement-padding-x`	Aplica sobre el Consentimiento hijo.	`hereda global-padding-x` 16px
`child-statement-padding-y`	Aplica sobre el Consentimiento hijo.	`hereda global-padding-y` 16px
`child-statement-description-gap`	Aplica sobre el Consentimiento hijo.	`hereda statement-description-gap` 16px
`child-statement-indent`	Aplica sobre el Consentimiento hijo.	`lg` 32px
`footer-padding-x`	Aplica sobre el Pie.	`hereda global-padding-x + 400` 32px
`footer-padding-y`	Aplica sobre el Pie.	`hereda global-padding-y + 400` 32px
`footer-section-gap`	Aplica sobre el Pie.	`lg` 32px
`footer-button-desktop-padding-x`	Aplica sobre el Botón CTA.	`2xl` 56px
`footer-button-padding-y`	Aplica sobre el Botón CTA.	`sm` 12px
`validation-alert-padding-x`	Aplica sobre la Alerta de validación.	`base` 16px
`validation-alert-padding-y`	Aplica sobre la Alerta de validación.	`sm` 12px
`dialog-padding`	Aplica sobre el Diálogo informativo.	`lg` 32px
`dialog-padding-x`	Aplica sobre el Diálogo informativo.	`hereda dialog-padding` 32px
`dialog-padding-y`	Aplica sobre el Diálogo informativo.	`hereda dialog-padding` 32px
`dialog-popper-offset`	Aplica sobre el Diálogo informativo.	`base` 16px
`info-message-padding-x`	Aplica sobre el Mensaje de estado mostrado para un resultado vacío, de error o de éxito.	`hereda global-padding-x` 16px
`info-message-padding-y`	Aplica sobre el Mensaje de estado mostrado para un resultado vacío, de error o de éxito.	`none` 0px

Tokens semánticos elegibles para Espaciado

Referencia abreviada	Valor
`2xl`	56px
`3xl`	64px
`4xl`	80px
`base`	16px
`lg`	32px
`md`	24px
`none`	0px
`sm`	12px
`xl`	40px
`xs`	8px
`xxs`	4px

Radio

Token	Descripción	Valor predeterminado
`container-radius`	Aplica sobre el Contenedor.	`xs` 4px
`global-radius`	Aplica sobre el radio heredado por el Menú de idioma, la Tarjeta de consentimiento, el Botón CTA, la Alerta de validación y el Diálogo informativo.	`md` 8px
`language-selector-menu-radius`	Aplica sobre el Menú de idioma.	`hereda global-radius` 8px
`statement-card-radius`	Aplica sobre la Tarjeta de consentimiento en modo boxed.	`hereda global-radius` 8px
`footer-button-radius`	Aplica sobre el Botón CTA.	`hereda global-radius` 8px
`validation-alert-radius`	Aplica sobre la Alerta de validación.	`hereda global-radius` 8px
`dialog-popper-radius`	Aplica sobre el Diálogo informativo.	`hereda global-radius` 8px

Tokens semánticos elegibles para Radio

Referencia abreviada	Valor
`2xl`	20px
`3xl`	24px
`4xl`	32px
`5xl`	40px
`6xl`	56px
`lg`	12px
`md`	8px
`none`	0px
`sm`	6px
`xl`	16px
`xs`	4px
`xxs`	2px

Borde

Token	Descripción	Valor predeterminado
`container-border-width`	Aplica sobre el Contenedor.	`thin` 1px
`statement-card-border-width`	Aplica sobre la Tarjeta de consentimiento en modo boxed.	`thin` 1px

Tokens semánticos elegibles para Borde

Referencia abreviada	Valor
`bold`	6px
`heavy`	4px
`none`	0px
`thick`	2px
`thin`	1px

Tamaño

Token	Descripción	Valor predeterminado
`statement-help-icon-size`	Aplica sobre el Icono de ayuda.	`500` 20px

Primitivos elegibles para Tamaño

Referencia abreviada	Valor
`400`	16px
`500`	20px
`600`	24px
`800`	32px

Sombra

Token	Descripción	Valor light	Valor dark
`language-selector-menu-shadow`	Aplica sobre el Menú de idioma.	`valor local` `0px 0px 8px 0px #64748b24`	`valor local` `0px 0px 8px 0px #00000099`
`statement-card-shadow`	Aplica sobre la Tarjeta de consentimiento en modo boxed.	`valor local` `0px 0px 8px 0px #64748b24`	`valor local` `0px 0px 8px 0px #00000099`
`dialog-popper-shadow`	Aplica sobre el Diálogo informativo.	`0` `none`	`0` `none`

Tokens semánticos elegibles para Sombra

Referencia abreviada	Valor light	Valor dark
`0`	`none`	`none`
`1`	`0px 1px 2px 0px rgba(100, 116, 139, 0.08), 0px 1px 1px 0px rgba(100, 116, 139, 0.04)`	`0px 1px 2px 0px rgba(0, 0, 0, 0.4), 0px 1px 1px 0px rgba(0, 0, 0, 0.2)`
`2`	`0px 2px 4px 0px rgba(100, 116, 139, 0.1), 0px 1px 2px 0px rgba(100, 116, 139, 0.06)`	`0px 2px 4px 0px rgba(0, 0, 0, 0.5), 0px 1px 2px 0px rgba(0, 0, 0, 0.3)`
`3`	`0px 4px 8px 0px rgba(100, 116, 139, 0.12), 0px 2px 4px 0px rgba(100, 116, 139, 0.08)`	`0px 4px 8px 0px rgba(0, 0, 0, 0.6), 0px 2px 4px 0px rgba(0, 0, 0, 0.4)`
`4`	`0px 6px 12px 0px rgba(100, 116, 139, 0.16), 0px 3px 6px 0px rgba(100, 116, 139, 0.1)`	`0px 6px 12px 0px rgba(0, 0, 0, 0.7), 0px 3px 6px 0px rgba(0, 0, 0, 0.5)`
`5`	`0px 10px 20px 0px rgba(100, 116, 139, 0.2), 0px 4px 8px 0px rgba(100, 116, 139, 0.12)`	`0px 10px 20px 0px rgba(0, 0, 0, 0.8), 0px 4px 8px 0px rgba(0, 0, 0, 0.6)`
`6`	`0px 15px 30px 0px rgba(100, 116, 139, 0.24), 0px 6px 12px 0px rgba(100, 116, 139, 0.16)`	`0px 15px 30px 0px rgba(0, 0, 0, 0.9), 0px 6px 12px 0px rgba(0, 0, 0, 0.7)`

Validación y compatibilidad

Los valores canónicos inválidos se descartan de forma independiente y se conserva su valor predeterminado. Los valores finales resueltos también pasan las comprobaciones de contraste y compatibilidad tipográfica. Consulta Validaciones de tokens.