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 | Main component background | colors-slate-50 #F9FAFC | colors-slate-950 #0C0F18 |
background-surface-default | Surface background for cards and panels | colors-common-white #FFFFFF | colors-neutral-900 #1A2330 |
background-button-default | Primary button background | colors-blue-800 #3466F5 | colors-blue-800 #3466F5 |
background-button-hover | Primary button hover background | colors-blue-900 #1467EB | colors-blue-900 #1467EB |
background-button-pressed | Primary button pressed background | colors-blue-950 #003EB7 | colors-blue-950 #003EB7 |
background-semantic-critical-primary | Error and validation alert background | colors-red-50 #FFF5F4 | colors-red-900 #A62319 |
text-neutral-primary | Main text | colors-neutral-950 #111827 | colors-neutral-300 #D1D5DB |
text-neutral-secondary | Secondary text | colors-neutral-600 #4B5563 | colors-red-700 #BF2828 |
text-button-inverse | Text on primary button | colors-common-white #FFFFFF | colors-common-white #FFFFFF |
text-semantic-critical-primary | Error text | colors-red-700 #BF2828 | colors-red-50 #FFF5F4 |
icon-neutral-primary | Primary icons | colors-neutral-950 #111827 | colors-neutral-300 #D1D5DB |
icon-neutral-secondary | Secondary icons and unchecked controls | colors-neutral-500 #6B7280 | colors-neutral-400 #9CA3AF |
icon-button-primary | Checked controls and button-related icons | colors-blue-800 #3466F5 | colors-blue-800 #3466F5 |
icon-semantic-critical-primary | Error icons | colors-red-700 #BF2828 | colors-red-50 #FFF5F4 |
border-neutral-primary | Main borders | colors-neutral-300 #D1D5DB | colors-neutral-700 #374151 |
border-neutral-secondary | Secondary borders and dividers | 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 family applied to typography tokens unless a specific family is overridden |
headings-h4 | 24px, 700, 42px, -0.12px | 20px, 600, 32px, -0.10px | Main screen heading |
headings-h6 | 18px, 600, 28px, -0.20px | 18px, 600, 28px, -0.20px | Information dialog heading |
base-regular | 14px, 400, 22px, 0 | 14px, 400, 22px, 0 | Body descriptions and secondary statement text |
base-medium | 14px, 500, 22px, 0 | 14px, 500, 22px, 0 | Nested statement labels and CTA text |
body-medium | 16px, 500, 28px, 0 | 16px, 500, 28px, 0 | Root statement labels |
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 component tokens |
radius-button | radius-md (8px) | CTA button radius |
radius-statement-box | radius-md (8px) | Statement card radius in boxed mode |
radius-menu | radius-md (8px) | Language selector menu radius |
radius-alert | radius-md (8px) | Validation alert radius |
radius-dialog | radius-md (8px) | Information dialog panel radius |
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) | Statement cards in boxed mode |
shadow-language-selector-menu | shadow-3 (0px 0px 8px 0px #64748b24) | shadow-3 (0px 0px 8px 0px #00000099) | Language selector dropdown |
shadow-dialog | shadow-0 (none) | shadow-0 (none) | Information dialog |
Border width tokens
| Token | Default | Usage |
|---|---|---|
border-statement-box | stroke-100 (1px) | Statement card border in boxed mode |
border-container | stroke-100 (1px) | Global container border in flat mode |
Validation
The current validation rules and limits are documented in Token validations.