Domain tokens

Domain tokens are the public design API of Consents. Configure them only under payload.design.tokens. Their names represent concrete component usages; DS semantic and primitive tokens are values, not public override names.

json

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

Short references are recommended. Compatible fully qualified DS paths remain accepted for backwards compatibility.

Defaults are resolved for the active light or dark mode and, for typography, for desktop or mobile. The values below intentionally preserve the previous visual result. In particular, container-background-color and statement-card-background-color are transparent by default.

The switch colors and geometry are fixed business rules. They use internal DS tokens and are not part of this public catalog.

Note: Primitive tokens can also be used in every group. See Primitive tokens.

Color

Tokens are grouped by functional component area. Each default shows the short reference accepted by the configuration and the value it resolves to in each mode; when options differ by state, the eligible semantic tokens table identifies that state explicitly.

Color domain tokens also accept valid CSS colors.

Some defaults are marked as internal: they preserve visual compatibility but are not public options for that group. To configure an override, use only a reference included in the corresponding eligible semantic tokens table.

Page background

Token	Description	Light value	Dark value
`component-background-color`	Applies to the Screen container.	`primary` `#F9FAFC`	`primary` `#0C0F18`

Eligible semantic tokens for Page background

Short reference	Light value	Dark value
`default`	`#FFFFFF`	`#000000`
`primary`	`#F9FAFC`	`#0C0F18`
`sunken`	`#0C0F18`	`#0C0F18`

Generic surfaces

Token	Description	Light value	Dark value
`container-background-color`	Applies to the background of the Container.	`base.overlay.transparent` `rgba(0, 0, 0, 0)`	`base.overlay.transparent` `rgba(255, 255, 255, 0)`
`header-background-color`	Applies to the background of the Header.	`base.primary` `#FFFFFF`	`base.subtle` `#1A2330`

Eligible semantic tokens for Generic surfaces

Short reference	Light value	Dark value
`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`

Generic borders

Token	Description	Light value	Dark value
`container-border-color`	Applies to the border of the Container in flat mode.	`base.secondary` `#E5E7EB`	`base.primary` `#4B5563`

Eligible semantic tokens for Generic borders

Short reference	Light value	Dark value
`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`

Generic text

Token	Description	Light value	Dark value
`title-color`	Applies to the Title.	`base.primary` `#111827`	`base.primary` `#E5E7EB`
`description-color`	Applies to the Header description.	`base.primary` `#111827`	`base.primary` `#E5E7EB`
`language-selector-text-color`	Applies to the text of the Language selector.	`base.primary` `#111827`	`base.primary` `#E5E7EB`

Eligible semantic tokens for Generic text

Short reference	Light value	Dark value
`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`

Language selector icon

Token	Description	Light value	Dark value
`language-selector-icon-color`	Applies to the expand icon of the Language selector.	`icon.base.primary` (internal) `#111827`	`icon.base.primary` (internal) `#E5E7EB`

Eligible semantic tokens for Language selector icon

Short reference	Light value	Dark value
`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`

Base surfaces without overlays

Token	Description	Light value	Dark value
`language-selector-menu-background-color`	Applies to the background of the Language menu.	`primary` `#FFFFFF`	`subtle` `#1A2330`
`parent-statement-background-color`	Applies to the background of the Parent statement.	`primary` `#FFFFFF`	`subtle` `#1A2330`

Eligible semantic tokens for Base surfaces without overlays

Short reference	Light value	Dark value
`disabled`	`#D1D5DB`	`#4B5563`
`inverse`	`#111827`	`#FFFFFF`
`primary`	`#FFFFFF`	`#111827`
`secondary`	`#F3F4F6`	`#1F2937`
`subtle`	`#FAFBFC`	`#1A2330`
`tertiary`	`#E5E7EB`	`#374151`

Base and accent text

Token	Description	Light value	Dark value
`parent-statement-text-color`	Applies to the Statement text of the Parent statement.	`base.primary` `#111827`	`base.primary` `#E5E7EB`
`parent-statement-description-color`	Applies to the Statement description of the Parent statement.	`base.primary` `#111827`	`base.primary` `#E5E7EB`
`child-statement-text-color`	Applies to the Statement text of the Child statement.	`base.primary` `#111827`	`base.primary` `#E5E7EB`
`child-statement-description-color`	Applies to the Statement description of the Child statement.	`base.primary` `#111827`	`base.primary` `#E5E7EB`

Eligible semantic tokens for Base and accent text

Short reference	Light value	Dark value
`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`

Base and accent borders

Token	Description	Light value	Dark value
`statement-divider-color`	Applies to the dividers in the Statement list.	`base.secondary` `#E5E7EB`	`base.primary` `#4B5563`

Eligible semantic tokens for Base and accent borders

Short reference	Light value	Dark value
`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`

Help icon

Token	Description	Light value	Dark value
`statement-help-icon-color`	Applies to the Help icon.	`base.tertiary` `#6B7280`	`base.tertiary` `#9CA3AF`

Eligible semantic tokens for Help icon

Short reference	Light value	Dark value
`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`

Base surfaces

Token	Description	Light value	Dark value
`statement-card-background-color`	Applies to the background of the Statement card in boxed mode.	`overlay.transparent` `rgba(0, 0, 0, 0)`	`overlay.transparent` `rgba(255, 255, 255, 0)`
`footer-background-color`	Applies to the background of the Footer in flat mode.	`primary` `#FFFFFF`	`subtle` `#1A2330`
`dialog-background-color`	Applies to the background of the Information Dialog.	`primary` `#FFFFFF`	`subtle` `#1A2330`

Eligible semantic tokens for Base surfaces

Short reference	Light value	Dark value
`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`

Base borders

Token	Description	Light value	Dark value
`statement-card-border-color`	Applies to the border of the Statement card in boxed mode.	`primary` `#D1D5DB`	`secondary` `#374151`

Eligible semantic tokens for Base borders

Short reference	Light value	Dark value
`inverse`	`#374151`	`#E5E7EB`
`on-filled`	`#FFFFFF`	`#000000`
`primary`	`#D1D5DB`	`#4B5563`
`secondary`	`#E5E7EB`	`#374151`
`tertiary`	`#F3F4F6`	`#1F2937`

Checkbox

Token	Description	Light value	Dark value
`checkbox-unchecked-icon-color`	Applies to the Selection control when displayed as an unchecked checkbox.	`icon.base.tertiary` (internal) `#6B7280`	`icon.base.tertiary` (internal) `#9CA3AF`
`checkbox-checked-icon-color`	Applies to the Selection control when displayed as a checked checkbox.	`icon.brand.primary` (internal) `#3466F5`	`blue.800` `#3466F5`

Eligible semantic tokens for Checkbox

Short reference	Light value	Dark value
`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`

Collapse icon

Token	Description	Light value	Dark value
`collapse-button-icon-color`	Applies to the icon of the Expand button.	`base.primary` `#111827`	`base.primary` `#E5E7EB`

Eligible semantic tokens for Collapse icon

Short reference	Light value	Dark value
`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`

CTA button

Token	Description	Light value	Dark value
`footer-button-background-color`	Applies to the CTA button in its default state.	`primary.default` `#3466F5`	`primary.default` `#3466F5`
`footer-button-hover-background-color`	Applies to the CTA button in its hover state.	`local value` `#1467EB`	`local value` `#1467EB`
`footer-button-pressed-background-color`	Applies to the CTA button in its pressed state.	`primary.active` `#003EB7`	`primary.active` `#003EB7`

Eligible semantic tokens for CTA button

State	Short reference	Light value	Dark value
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`

CTA button text

Token	Description	Light value	Dark value
`footer-button-text-color`	Applies to the text of the CTA button.	`base.on-filled` `#FFFFFF`	`base.on-filled` `#FFFFFF`

Eligible semantic tokens for CTA button text

Short reference	Light value	Dark value
`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`

Validation surfaces

Token	Description	Light value	Dark value
`validation-alert-background-color`	Applies to the background of the Validation alert.	`critical.subtle` `#FFF5F4`	`critical.tonal` `#A62319`

Eligible semantic tokens for Validation surfaces

Short reference	Light value	Dark value
`critical.filled`	`#BF2828`	`#D53D46`
`critical.subtle`	`#FFF5F4`	`#8A1910`
`critical.tonal`	`#F6DFDD`	`#A62319`
`warning.filled`	`#D55E35`	`#E2681A`
`warning.subtle`	`#FFF7E9`	`#902906`
`warning.tonal`	`#FCEEE0`	`#B03E1B`

Validation text

Token	Description	Light value	Dark value
`validation-alert-text-color`	Applies to the text of the Validation alert.	`red.700` `#BF2828`	`red.50` `#FFF5F4`

Eligible semantic tokens for Validation text

Short reference	Light value	Dark value
`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`

Validation icons

Token	Description	Light value	Dark value
`validation-alert-icon-color`	Applies to the icon of the Validation alert.	`red.700` `#BF2828`	`red.50` `#FFF5F4`

Eligible semantic tokens for Validation icons

Short reference	Light value	Dark value
`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`

Dialog text

Token	Description	Light value	Dark value
`dialog-text-color`	Applies to the descriptive text of the Information Dialog.	`primary` `#111827`	`primary` `#E5E7EB`

Eligible semantic tokens for Dialog text

Short reference	Light value	Dark value
`disabled`	`#9CA3AF`	`#6B7280`
`inverse`	`#FAFBFC`	`#111827`
`on-filled`	`#FFFFFF`	`#FFFFFF`
`primary`	`#111827`	`#E5E7EB`
`secondary`	`#4B5563`	`#D1D5DB`
`subtle`	`#D1D5DB`	`#4B5563`
`tertiary`	`#6B7280`	`#9CA3AF`

Typography

Tokens are grouped by the complete styles they accept. Each style defines family, size, weight, lineheight, and letterspacing; consumers may also override the family with Inter or Menlo.

Defaults marked as internal or with internal adjustments preserve visual compatibility; those adjustments are not public options for the group.

Headings

Token	Description	Desktop value	Mobile value
`title-typography`	Applies to the Title.	`h4` (internal adjustments) `Inter · 24px · 700 · 42px · -0.12px`	`h4` (internal adjustments) `Inter · 20px · 600 · 32px · -0.1px`

Eligible semantic styles for Headings

Desktop

Short reference	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

Short reference	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

General typography

Token	Description	Desktop value	Mobile value
`description-typography`	Applies to the Header description.	`md-regular` `Inter · 14px · 400 · 22px · 0px`	`md-regular` `Inter · 14px · 400 · 22px · 0px`
`language-selector-text-typography`	Applies to the Language selector.	`md-regular` `Inter · 14px · 400 · 22px · 0px`	`md-regular` `Inter · 14px · 400 · 22px · 0px`
`parent-statement-text-typography`	Applies to the Statement text of the Parent statement.	`base-medium` (internal adjustments) `Inter · 16px · 500 · 28px · 0px`	`base-medium` (internal adjustments) `Inter · 16px · 500 · 28px · 0px`
`parent-statement-description-typography`	Applies to the Statement description of the Parent statement.	`md-regular` `Inter · 14px · 400 · 22px · 0px`	`md-regular` `Inter · 14px · 400 · 22px · 0px`
`child-statement-text-typography`	Applies to the Statement text of the Child statement.	`md-medium` `Inter · 14px · 500 · 22px · 0px`	`md-medium` `Inter · 14px · 500 · 22px · 0px`
`child-statement-description-typography`	Applies to the Statement description of the Child statement.	`md-regular` `Inter · 14px · 400 · 22px · 0px`	`md-regular` `Inter · 14px · 400 · 22px · 0px`
`validation-alert-typography`	Applies to the Validation alert.	`md-regular` `Inter · 14px · 400 · 22px · 0px`	`md-regular` `Inter · 14px · 400 · 22px · 0px`
`dialog-text-typography`	Applies to the Information Dialog.	`md-regular` `Inter · 14px · 400 · 22px · 0px`	`md-regular` `Inter · 14px · 400 · 22px · 0px`
`info-message-typography`	Applies to the Status message shown for an empty, error, or success result.	`headings.h6` (internal) `Inter · 18px · 600 · 28px · -0.2px`	`headings.h6` (internal) `Inter · 18px · 600 · 28px · -0.2px`

Eligible semantic styles for General typography

Desktop

Short reference	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

Short reference	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

Buttons

Token	Description	Desktop value	Mobile value
`footer-button-typography`	Applies to the CTA button.	`md` (internal adjustments) `Inter · 14px · 500 · 22px · 0px`	`md` (internal adjustments) `Inter · 14px · 500 · 22px · 0px`

Eligible semantic styles for Buttons

Desktop

Short reference	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

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

Spacing

Token	Description	Default value
`section-gap`	Applies to the separation between the Header, Statement list, and Footer.	`none` 0px
`global-padding-x`	Applies to the padding inherited by the Header, Parent statement, Child statement, and Footer.	`base` 16px
`global-padding-y`	Applies to the padding inherited by the Header, Parent statement, Child statement, and Footer.	`base` 16px
`header-padding-x`	Applies to the Header.	`inherits global-padding-x + 100` 20px
`header-padding-top`	Applies to the Header.	`inherits global-padding-y + 400` 32px
`header-padding-bottom`	Applies to the Header.	`inherits global-padding-y + 100` 20px
`header-content-gap`	Applies to the Header.	`base` 16px
`language-selector-flag-label-gap`	Applies to the Language selector.	`xs` 8px
`statement-list-padding-x`	Applies to the Statement list in boxed mode.	`sm` 12px
`statement-list-gap`	Applies to the Statement list in boxed mode.	`sm` 12px
`statement-description-gap`	Applies to the separation between Statement text and Statement description.	`base` 16px
`parent-statement-padding-x`	Applies to the Parent statement.	`inherits global-padding-x` 16px
`parent-statement-padding-y`	Applies to the Parent statement.	`inherits global-padding-y` 16px
`parent-statement-description-gap`	Applies to the Parent statement.	`inherits statement-description-gap` 16px
`child-statement-padding-x`	Applies to the Child statement.	`inherits global-padding-x` 16px
`child-statement-padding-y`	Applies to the Child statement.	`inherits global-padding-y` 16px
`child-statement-description-gap`	Applies to the Child statement.	`inherits statement-description-gap` 16px
`child-statement-indent`	Applies to the Child statement.	`lg` 32px
`footer-padding-x`	Applies to the Footer.	`inherits global-padding-x + 400` 32px
`footer-padding-y`	Applies to the Footer.	`inherits global-padding-y + 400` 32px
`footer-section-gap`	Applies to the Footer.	`lg` 32px
`footer-button-desktop-padding-x`	Applies to the CTA button.	`2xl` 56px
`footer-button-padding-y`	Applies to the CTA button.	`sm` 12px
`validation-alert-padding-x`	Applies to the Validation alert.	`base` 16px
`validation-alert-padding-y`	Applies to the Validation alert.	`sm` 12px
`dialog-padding`	Applies to the Information Dialog.	`lg` 32px
`dialog-padding-x`	Applies to the Information Dialog.	`inherits dialog-padding` 32px
`dialog-padding-y`	Applies to the Information Dialog.	`inherits dialog-padding` 32px
`dialog-popper-offset`	Applies to the Information Dialog.	`base` 16px
`info-message-padding-x`	Applies to the Status message shown for an empty, error, or success result.	`inherits global-padding-x` 16px
`info-message-padding-y`	Applies to the Status message shown for an empty, error, or success result.	`none` 0px

Eligible semantic tokens for Spacing

Short reference	Value
`2xl`	56px
`3xl`	64px
`4xl`	80px
`base`	16px
`lg`	32px
`md`	24px
`none`	0px
`sm`	12px
`xl`	40px
`xs`	8px
`xxs`	4px

Radius

Token	Description	Default value
`container-radius`	Applies to the Container.	`xs` 4px
`global-radius`	Applies to the radius inherited by the Language menu, Statement card, CTA button, Validation alert, and Information Dialog.	`md` 8px
`language-selector-menu-radius`	Applies to the Language menu.	`inherits global-radius` 8px
`statement-card-radius`	Applies to the Statement card in boxed mode.	`inherits global-radius` 8px
`footer-button-radius`	Applies to the CTA button.	`inherits global-radius` 8px
`validation-alert-radius`	Applies to the Validation alert.	`inherits global-radius` 8px
`dialog-popper-radius`	Applies to the Information Dialog.	`inherits global-radius` 8px

Eligible semantic tokens for Radius

Short reference	Value
`2xl`	20px
`3xl`	24px
`4xl`	32px
`5xl`	40px
`6xl`	56px
`lg`	12px
`md`	8px
`none`	0px
`sm`	6px
`xl`	16px
`xs`	4px
`xxs`	2px

Border

Token	Description	Default value
`container-border-width`	Applies to the Container.	`thin` 1px
`statement-card-border-width`	Applies to the Statement card in boxed mode.	`thin` 1px

Eligible semantic tokens for Border

Short reference	Value
`bold`	6px
`heavy`	4px
`none`	0px
`thick`	2px
`thin`	1px

Size

Token	Description	Default value
`statement-help-icon-size`	Applies to the Help icon.	`500` 20px

Eligible primitives for Size

Short reference	Value
`400`	16px
`500`	20px
`600`	24px
`800`	32px

Shadow

Token	Description	Light value	Dark value
`language-selector-menu-shadow`	Applies to the Language menu.	`local value` `0px 0px 8px 0px #64748b24`	`local value` `0px 0px 8px 0px #00000099`
`statement-card-shadow`	Applies to the Statement card in boxed mode.	`local value` `0px 0px 8px 0px #64748b24`	`local value` `0px 0px 8px 0px #00000099`
`dialog-popper-shadow`	Applies to the Information Dialog.	`0` `none`	`0` `none`

Eligible semantic tokens for Shadow

Short reference	Light value	Dark value
`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)`

Validation and compatibility

Invalid canonical values are discarded independently, leaving their defaults in place. The final resolved values also pass contrast and typography compatibility checks. See Token validations.