Semantic tokens
Semantic tokens are the public design keys that a host application can override through SET_CONFIG.
Use these keys inside payload.design; do not target component internals or generated CSS classes.
The values in this page reflect the current mas-consents implementation in design-tokens.
When a host overrides a semantic color, the value can be a primitive color key or a valid CSS color string.
Color tokens
Color tokens control component backgrounds, text, icons and borders. The runtime has light and dark defaults.
| Token | Usage | Light default | Dark default |
|---|---|---|---|
background-neutral-primary | Background for the Screen and Container | colors-slate-50 #F9FAFC | colors-slate-950 #0C0F18 |
background-surface-default | Surface background for Header, Footer, Statement card, Language menu and Information Dialog | colors-common-white #FFFFFF | colors-neutral-900 #1A2330 |
background-button-default | Default background for the CTA button | colors-blue-800 #3466F5 | colors-blue-800 #3466F5 |
background-button-hover | Hover background for the CTA button | colors-blue-900 #1467EB | colors-blue-900 #1467EB |
background-button-pressed | Pressed background for the CTA button | colors-blue-950 #003EB7 | colors-blue-950 #003EB7 |
background-semantic-critical-primary | Background for the Validation alert | colors-red-50 #FFF5F4 | colors-red-900 #A62319 |
text-neutral-primary | Text color for Title, Header description, Statement text and Statement description | colors-neutral-950 #111827 | colors-neutral-300 #D1D5DB |
text-neutral-secondary | Secondary text color for supporting content inside the Container | colors-neutral-600 #4B5563 | colors-red-700 #BF2828 |
text-button-inverse | Text color for the CTA button | colors-common-white #FFFFFF | colors-common-white #FFFFFF |
text-semantic-critical-primary | Text color for the Validation alert | colors-red-700 #BF2828 | colors-red-50 #FFF5F4 |
icon-neutral-primary | Icon color for the Expand button and Language selector | colors-neutral-950 #111827 | colors-neutral-300 #D1D5DB |
icon-neutral-secondary | Icon color for the Help icon and inactive Selection control | colors-neutral-500 #6B7280 | colors-neutral-400 #9CA3AF |
icon-button-primary | Icon color for active Selection control and button-related icons | colors-blue-800 #3466F5 | colors-blue-800 #3466F5 |
icon-semantic-critical-primary | Icon color for the Validation alert | colors-red-700 #BF2828 | colors-red-50 #FFF5F4 |
border-neutral-primary | Border color for the Statement card | colors-neutral-300 #D1D5DB | colors-neutral-700 #374151 |
border-neutral-secondary | Border color for the Container and dividers between Parent statement and Child statement | colors-neutral-200 #E5E7EB | colors-neutral-600 #4B5563 |
Typography tokens
Typography tokens define the font family, size, weight, line height and letter spacing for the text styles consumed by the component.
The runtime effectively uses two responsive groups: xs for mobile and xl for every non-mobile case.
| Token group | XL values | XS values | Usage |
|---|---|---|---|
typography-base | Inter | Inter | Base font family for text inside the Container |
headings-h4 | 24px, 700, 42px, -0.12px | 20px, 600, 32px, -0.10px | Title |
headings-h6 | 18px, 600, 28px, -0.20px | 18px, 600, 28px, -0.20px | Heading text inside the Information Dialog |
base-regular | 14px, 400, 22px, 0 | 14px, 400, 22px, 0 | Header description, Statement description and Information Dialog text |
base-medium | 14px, 500, 22px, 0 | 14px, 500, 22px, 0 | Child statement text and CTA button text |
body-medium | 16px, 500, 28px, 0 | 16px, 500, 28px, 0 | Parent statement and Statement text |
Spacing tokens
Spacing tokens control margins, paddings, gaps and some fixed component sizes. When a token inherits from another token, overriding the parent also updates the child unless the child is overridden explicitly.
| Token | Default | Inherits from |
|---|---|---|
spacing-global-padding-x | spacing-400 (16px) | - |
spacing-global-padding-y | spacing-400 (16px) | - |
spacing-statement-vertical-gap | spacing-400 (16px) | - |
spacing-section-gap | spacing-0 (0px) | - |
spacing-statement-box-gap | spacing-300 (12px) | - |
spacing-statement-box-padding-x | spacing-300 (12px) | - |
spacing-header-padding-x | spacing-500 (20px) | spacing-global-padding-x + 4px |
spacing-header-padding-top | spacing-800 (32px) | spacing-global-padding-y + 16px |
spacing-header-padding-bottom | spacing-500 (20px) | spacing-global-padding-y + 4px |
spacing-header-content-gap | spacing-400 (16px) | - |
spacing-statement-parent-padding-x | spacing-400 (16px) | spacing-global-padding-x |
spacing-statement-parent-padding-y | spacing-400 (16px) | spacing-global-padding-y |
spacing-statement-parent-vertical-gap | spacing-400 (16px) | spacing-statement-vertical-gap |
spacing-statement-child-padding-x | spacing-400 (16px) | spacing-global-padding-x |
spacing-statement-child-padding-y | spacing-400 (16px) | spacing-global-padding-y |
spacing-statement-child-vertical-gap | spacing-400 (16px) | spacing-statement-vertical-gap |
spacing-statement-child-indent | spacing-800 (32px) | - |
spacing-footer-padding-x | spacing-800 (32px) | spacing-global-padding-x + 16px |
spacing-footer-padding-y | spacing-800 (32px) | spacing-global-padding-y + 16px |
spacing-footer-section-gap | spacing-800 (32px) | - |
spacing-alert-padding-x | spacing-400 (16px) | - |
spacing-alert-padding-y | spacing-300 (12px) | - |
spacing-button-desktop-padding-x | spacing-1400 (56px) | - |
spacing-button-padding-y | spacing-300 (12px) | - |
spacing-dialog-padding | spacing-800 (32px) | - |
spacing-dialog-padding-x | spacing-800 (32px) | spacing-dialog-padding |
spacing-dialog-padding-y | spacing-800 (32px) | spacing-dialog-padding |
spacing-dialog-section-gap | spacing-800 (32px) | - |
spacing-dialog-header-gap | spacing-400 (16px) | - |
spacing-dialog-offset | spacing-400 (16px) | - |
spacing-language-selector-gap | spacing-200 (8px) | - |
spacing-statement-help-icon-size | spacing-500 (20px) | - |
Radius tokens
radius-global propagates to all radius tokens unless the specific token is also overridden.
| Token | Default | Usage |
|---|---|---|
radius-global | radius-md (8px) | Global radius source for CTA button, Statement card, Language menu and Information Dialog |
radius-button | radius-md (8px) | Radius for the CTA button |
radius-statement-box | radius-md (8px) | Radius for the Statement card in boxed mode |
radius-menu | radius-md (8px) | Radius for the Language menu |
radius-alert | radius-md (8px) | Radius for the Validation alert |
radius-dialog | radius-md (8px) | Radius for the Information Dialog |
Shadow tokens
| Token | Light default | Dark default | Usage |
|---|---|---|---|
shadow-statement-box | shadow-3 (0px 0px 8px 0px #64748b24) | shadow-3 (0px 0px 8px 0px #00000099) | Shadow for the Statement card |
shadow-language-selector-menu | shadow-3 (0px 0px 8px 0px #64748b24) | shadow-3 (0px 0px 8px 0px #00000099) | Shadow for the Language menu |
shadow-dialog | shadow-0 (none) | shadow-0 (none) | Shadow for the Information Dialog |
Border width tokens
| Token | Default | Usage |
|---|---|---|
border-statement-box | stroke-100 (1px) | Border width for the Statement card |
border-container | stroke-100 (1px) | Border width for the Container in flat mode |
Validation
The current validation rules and limits are documented in Token validations.