Brand
primary-05
Token set
semantic
primary-10
Token set
semantic
primary-20
Token set
semantic
primary-30
Token set
semantic
primary-40
Token set
semantic
primary-50
Token set
semantic
primary-60
Token set
semantic
primary-70
Token set
semantic
primary-80
Token set
semantic
primary-90
Token set
semantic
primary-gradient
Token set
semantic
secondary-05
Token set
semantic
secondary-10
Token set
semantic
secondary-20
Token set
semantic
secondary-30
Token set
semantic
secondary-40
Token set
semantic
secondary-50
Token set
semantic
secondary-60
Token set
semantic
secondary-70
Token set
semantic
secondary-80
Token set
semantic
secondary-90
Token set
semantic
secondary-gradient
Token set
semantic
tertiary-05
Token set
semantic
tertiary-10
Token set
semantic
tertiary-20
Token set
semantic
tertiary-30
Token set
semantic
tertiary-40
Token set
semantic
tertiary-50
Token set
semantic
tertiary-60
Token set
semantic
tertiary-70
Token set
semantic
tertiary-80
Token set
semantic
tertiary-90
Token set
semantic
tertiary-gradient
Token set
semantic
Light
neutral-light-05
Token set
semantic
neutral-light-10
Token set
semantic
neutral-light-20
Token set
semantic
neutral-light-30
Token set
semantic
neutral-light-40
Token set
semantic
neutral-light-50
Token set
semantic
neutral-light-60
Token set
semantic
neutral-light-70
Token set
semantic
neutral-light-80
Token set
semantic
neutral-light-90
Token set
semantic
neutral-light-gradient
Token set
semantic
Dark
neutral-dark-05
Token set
semantic
neutral-dark-10
Token set
semantic
neutral-dark-20
Token set
semantic
neutral-dark-30
Token set
semantic
neutral-dark-40
Token set
semantic
neutral-dark-50
Token set
semantic
neutral-dark-60
Token set
semantic
neutral-dark-70
Token set
semantic
neutral-dark-80
Token set
semantic
neutral-dark-90
Token set
semantic
neutral-dark-gradient
Token set
semantic
Functional
Light
default-light-05
Token set
component
default-light-10
Token set
component
default-light-20
Token set
component
default-light-30
Token set
component
default-light-40
Token set
component
default-light-50
Token set
component
default-light-60
Token set
component
default-light-70
Token set
component
default-light-80
Token set
component
default-light-90
Token set
component
Dark
default-dark-05
Token set
component
default-dark-10
Token set
component
default-dark-20
Token set
component
default-dark-30
Token set
component
default-dark-40
Token set
component
default-dark-50
Token set
component
default-dark-60
Token set
component
default-dark-70
Token set
component
default-dark-80
Token set
component
default-dark-90
Token set
component
success-05
Token set
component
success-10
Token set
component
success-20
Token set
component
success-30
Token set
component
success-40
Token set
component
success-50
Token set
component
success-60
Token set
component
success-70
Token set
component
success-80
Token set
component
success-90
Token set
component
info-05
Token set
component
info-10
Token set
component
info-20
Token set
component
info-30
Token set
component
info-40
Token set
component
info-50
Token set
component
info-60
Token set
component
info-70
Token set
component
info-80
Token set
component
info-90
Token set
component
warning-05
Token set
component
warning-10
Token set
component
warning-20
Token set
component
warning-30
Token set
component
warning-40
Token set
component
warning-50
Token set
component
warning-60
Token set
component
warning-70
Token set
component
warning-80
Token set
component
warning-90
Token set
component
error-05
Token set
component
error-10
Token set
component
error-20
Token set
component
error-30
Token set
component
error-40
Token set
component
error-50
Token set
component
error-60
Token set
component
error-70
Token set
component
error-80
Token set
component
error-90
Token set
component
draft-05
Token set
component
draft-10
Token set
component
draft-20
Token set
component
draft-30
Token set
component
draft-40
Token set
component
draft-50
Token set
component
draft-60
Token set
component
draft-70
Token set
component
draft-80
Token set
component
draft-90
Token set
component
Inherited properties
Content
ref / text
default
Default text refers to the main or prominent textual content. Suitable for important headlines, titles, or primary information that requires the most attention.
inverse
Inverse text refers to the opposite color that contrasts with the background.
secondary
Secondary text is for supporting or supplementary information. Often used for descriptions, labels, captions, or any content that is less significant than the default text but still relevant to the user experience.
emphasis
Emphasized text refers to a styling technique used to give importance to a specific text. Often used to draw attention to key points, important information, or to differentiate specific content from the rest of the text.
links
Links refers to emphasis clickable elements.
visited
Visited link" refers to a hyperlink that has been previously clicked or accessed.
disabled
Disabled text refers to a particular element is temporarily or permanently disabled and cannot be accessed or interacted with.
success-moderate
Success text refers to content that signifies a positive or affirmative message.
info-moderate
Info text gives a clear summary of the information.
draft-moderate
Draft refers to temporary statuses.
warning-moderate
Warning text refers to content that conveys a warning, caution, or alert.
error-moderate
Error text refers to incorrect or invalid information on a form or during a data entry process.
success-weak
Success text refers to content that signifies a positive or affirmative message.
info-weak
Info text gives a clear summary of the information.
draft-weak
Draft refers to temporary statuses.
warning-weak
Warning text refers to content that conveys a warning, caution, or alert.
error-weak
Error text refers to incorrect or invalid information on a form or during a data entry process.
ref / icon
default
Default icon refers to the standard or pre-set icon. Suitable for operating systems or software programs as a generic placeholder.
inverse
Inverse icon serves as the opposite of the default icon, specifically designed to contrast with the background.
emphasis
emphasis icon refers to an icon that is designed to draw attention and clearly indicates its interactive nature.
error
The error indicates the occurrence of an error or problem. Suitable for destructive icons.
warning
Warning icon serves as a visual cue to alert about potential issues, risks, or important information that requires attention.
success
Success icon serves as a visual cue to convey that a task, action, or process has been completed successfully.
disabled
Disabled icon indicates that a particular function, feature, or control is currently disabled or unavailable.
ref / pictogram / secondary
stroke-default
stroke-emphasis
fill-default
fill-emphasis
ref / pictogram / primary
stroke-default
stroke-emphasis
fill-default
fill-emphasis
ref / pictogram / tertiary
stroke-default
stroke-emphasis
fill-default
fill-emphasis
Border
separator
weak
Weak border refers to a subtle border style.
moderate
The default border is the standard border style. It strikes a balance between visibility and subtlety, providing a noticeable border around the element without overpowering the overall design. Suitable for solid separator.
strong
Strong default border refers to a standard border style that is more pronounced and visually prominent than a moderate border. Suitable for dotted separators.
emphasis
Emphasis border refers to a branded border style.
ref / border / default
enabled
Border on enabled state refers to the default appearance and behavior of a clickable element. It represents the initial or resting state, typically before any user interaction has occurred.
inverse
Inverse border refers to the opposite color that contrasts with the background.
muted
Muted border indicates that the ui element is not editable and is intended for viewing purposes only. Suitable for read-only UI controls.
transparent
Transparent border is intented to create a subtle and understated appearance. Suitable for the less important ui control.
hover
Border on hover state refers to an interaction that the ui element is clickable. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
pressed
Border with pressed state is a stemporary visual alteration that provides immediate feedback to the user, confirming that their input has been recognized.
focused
Border on focused state refers to an interaction that occurs when the ui element is focused through keyboard navigation or other assistive technologies.
selected-weak
Border with a selected state refers to an interaction that occurs when the ui element is active.
selected-weak:hover
Border hovering over a weak selected state refers to an interaction that occurs when the ui element is hovered on a current selection.
selected-moderate
Border with a moderate selected state refers to an interaction that occurs when the ui element is active.
selected-moderate:hover
Border hovering over a moderate selected state refers to an interaction that occurs when the ui element is hovered on a current selection. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
selected-strong
Border with strong selected state refers to an interaction that occurs when the ui element is active. Suitable for prominent call-to-actions.
selected-strong:hover
Border hovering over a strong selected state refers to an interaction that occurs when the ui element is hovered on a current selection. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
disabled
A border with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
ref / border / primary
enabled
Border on enabled state refers to the default appearance and behavior of a clickable element. It represents the initial or resting state, typically before any user interaction has occurred.
hover
Border on hover state refers to an interaction that the ui element is clickable. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
pressed
Border with pressed state is a stemporary visual alteration that provides immediate feedback to the user, confirming that their input has been recognized.
focused
Border on focused state refers to an interaction that occurs when the ui element is focused through keyboard navigation or other assistive technologies.
selected
Border with strong selected state refers to an interaction that occurs when the ui element is active. Suitable for prominent call-to-actions.
selected:hover
Border hovering over a selected state refers to an interaction that occurs when the ui element is hovered on a current selection. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
disabled
A border with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
ref / border / secondary
enabled
Border on enabled state refers to the default appearance and behavior of a clickable element. It represents the initial or resting state, typically before any user interaction has occurred.
hover
Border on hover state refers to an interaction that the ui element is clickable. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
pressed
Border with pressed state is a stemporary visual alteration that provides immediate feedback to the user, confirming that their input has been recognized.
focused
Border on focused state refers to an interaction that occurs when the ui element is focused through keyboard navigation or other assistive technologies.
selected
Border with strong selected state refers to an interaction that occurs when the ui element is active. Suitable for prominent call-to-actions.
selected:hover
Border hovering over a selected state refers to an interaction that occurs when the ui element is hovered on a current selection. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
disabled
A border with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
ref / border / primary-tint
enabled
Surface on enabled state refers to the default appearance and behavior of a clickable element. It represents the initial or resting state, typically before any user interaction has occurred.
hover
Surface on hover state refers to an interaction that the ui element is interactive and clickable. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
pressed
Surface with pressed state is a stemporary visual alteration that provides immediate feedback to the user, confirming that their input has been recognized.
focused
Surface on focused state refers to an interaction that occurs when the ui element is focused through keyboard navigation or other assistive technologies.
selected
Surface with selected state refers to an interaction that occurs when the ui element is active. Suitable for subtle appearance that should not dominate the overall design when the ui element is active.
selected:hover
Surface hovering over a selected state refers to an interaction that occurs when the ui element is hovered on a current selection. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
disabled
A surface with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
ref / border / secondary-tint
enabled
Border on enabled state refers to the default appearance and behavior of a clickable element. It represents the initial or resting state, typically before any user interaction has occurred.
hover
Border on hover state refers to an interaction that the ui element is clickable. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
pressed
Border with pressed state is a stemporary visual alteration that provides immediate feedback to the user, confirming that their input has been recognized.
focused
Border on focused state refers to an interaction that occurs when the ui element is focused through keyboard navigation or other assistive technologies.
selected
Border with strong selected state refers to an interaction that occurs when the ui element is active. Suitable for prominent call-to-actions.
selected:hover
Border hovering over a selected state refers to an interaction that occurs when the ui element is hovered on a current selection. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
disabled
A border with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
ref / border / destructive-default
enabled
Destructive border on enabled state serves as a prominent reminder or warning, helping prevent accidental or unintended actions that could have negative implications.
transparent
Transparent destructive surface provides a subtle yet noticeable warning or reminder, preventing accidental or unintended actions that could lead to negative consequences.
hover
Border on hover state refers to an interaction that the ui element is interactive and clickable. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
focused
Border on focused state refers to an interaction that occurs when the ui element is focused through keyboard navigation or other assistive technologies.
pressed
Border with pressed state refers to an interaction that occurs when the ui element is pressed.
disabled
Border with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
ref / border / destructive-primary
enabled
Destructive border on enabled state serves as a prominent reminder or warning, helping prevent accidental or unintended actions that could have negative implications.
transparent
Transparent destructive surface provides a subtle yet noticeable warning or reminder, preventing accidental or unintended actions that could lead to negative consequences.
hover
Border on hover state refers to an interaction that the ui element is interactive and clickable. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
focused
Border on focused state refers to an interaction that occurs when the ui element is focused through keyboard navigation or other assistive technologies.
pressed
Border with pressed state refers to an interaction that occurs when the ui element is pressed.
disabled
Border with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
ref / border / funct
default
Default alerts. Specially lower prio statuses such as pairing.
inverse
Inverse border refers to the opposite color that contrasts with the background.
muted
Muted border refers to a subtle border style.
success-weak
Alerts, toasts. Success and positive statuses such as accepted, paid, delivered
info-weak
Normal alerts. Ccommon statuses such as created, sent, printed, processing.
draft-weak
Alerts. Temporary statuses such as drafts
warning-weak
Alerts, toasts, tooltips. Warnings and potential problem statuses such as partially paid, losses
error-weak
Alerts, toasts, tooltips. Errors and failure statuses such as rejected, not sent, overdue, not delivered
success-moderate
Suitable for badges. Success and positive statuses such as accepted, paid, delivered.
info-moderate
Suitable for badges. Ccommon statuses such as created, sent, printed, processing.
draft-moderate
Suitable for badges. Temporary statuses such as drafts.
warning-moderate
Suitable for badges. Warnings and potential problem statuses such as partially paid, losses.
error-moderate
Suitable for badges. Errors and failure statuses such as rejected, not sent, overdue, not delivered.
Fill
ref / fill / default
enabled
Surface on enabled state refers to the default appearance and behavior of a clickable element. It represents the initial or resting state, typically before any user interaction has occurred.
inverse
Inverse surface contrast with the background.
muted
Muted surface indicates that the ui element is not editable and is intended for viewing purposes only. Suitable for read-only UI controls.
transparent
Transparent surface is intented to create a subtle and understated appearance. Suitable for the less important ui control.
hover
Surface on hover state refers to an interaction that the ui element is interactive and clickable. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
pressed
Surface with pressed state is a stemporary visual alteration that provides immediate feedback to the user, confirming that their input has been recognized.
selected-weak
Surface with weak selected state refers to an interaction that occurs when the ui element is active. Suitable for subtle appearance that should not dominate the overall design when the ui element is active.
selected-weak:hover
Surface hovering over a weak selected state refers to an interaction that occurs when the ui element is hovered on a current selection. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
selected-moderate
Surface with moderate selected state refers to an interaction that occurs when the ui element is active. Suitable for subtle appearance that should not dominate the overall design when the ui element is active.
selected-moderate:hover
Surface hovering over a moderate selected state refers to an interaction that occurs when the ui element is hovered on a current selection. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
selected-strong
Surface with strong selected state refers to an interaction that occurs when the ui element is active. Suitable for prominent call-to-actions.
selected-strong:hover
Surface hovering over a strong selected state refers to an interaction that occurs when the ui element is hovered on a current selection. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
disabled
A surface with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
ref / fill / primary
enabled
Surface on enabled state refers to the default appearance and behavior of a clickable element. It represents the initial or resting state, typically before any user interaction has occurred.
hover
Surface on hover state refers to an interaction that the ui element is interactive and clickable. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
pressed
Surface with pressed state is a stemporary visual alteration that provides immediate feedback to the user, confirming that their input has been recognized.
selected
Surface with selected state refers to an interaction that occurs when the ui element is active. Suitable for subtle appearance that should not dominate the overall design when the ui element is active.
selected:hover
Surface hovering over a selected state refers to an interaction that occurs when the ui element is hovered on a current selection. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
disabled
A surface with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
ref / fill / secondary
enabled
Surface on enabled state refers to the default appearance and behavior of a clickable element. It represents the initial or resting state, typically before any user interaction has occurred.
hover
Surface on hover state refers to an interaction that the ui element is interactive and clickable. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
pressed
Surface with pressed state is a stemporary visual alteration that provides immediate feedback to the user, confirming that their input has been recognized.
selected
Surface with selected state refers to an interaction that occurs when the ui element is active. Suitable for subtle appearance that should not dominate the overall design when the ui element is active.
selected:hover
Surface hovering over a selected state refers to an interaction that occurs when the ui element is hovered on a current selection. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
disabled
A surface with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
ref / fill / primary-tint
enabled
Surface on enabled state refers to the default appearance and behavior of a clickable element. It represents the initial or resting state, typically before any user interaction has occurred.
hover
Surface on hover state refers to an interaction that the ui element is interactive and clickable. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
pressed
Surface with pressed state is a stemporary visual alteration that provides immediate feedback to the user, confirming that their input has been recognized.
selected
Surface with selected state refers to an interaction that occurs when the ui element is active. Suitable for subtle appearance that should not dominate the overall design when the ui element is active.
selected:hover
Surface hovering over a selected state refers to an interaction that occurs when the ui element is hovered on a current selection. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
disabled
A surface with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
ref / fill / secondary-tint
enabled
Surface on enabled state refers to the default appearance and behavior of a clickable element. It represents the initial or resting state, typically before any user interaction has occurred.
hover
Surface on hover state refers to an interaction that the ui element is interactive and clickable. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
pressed
Surface with pressed state is a stemporary visual alteration that provides immediate feedback to the user, confirming that their input has been recognized.
selected
Surface with selected state refers to an interaction that occurs when the ui element is active. Suitable for subtle appearance that should not dominate the overall design when the ui element is active.
selected:hover
Surface hovering over a selected state refers to an interaction that occurs when the ui element is hovered on a current selection. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
disabled
A surface with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
ref / fill / destructive-default
enabled
Destructive default surface serves as a prominent reminder or warning, helping prevent accidental or unintended actions that could have negative implications.
transparent
Transparent destructive surface provides a subtle yet noticeable warning or reminder, preventing accidental or unintended actions that could lead to negative consequences.
hover
Surface on hover state refers to an interaction that the ui element is interactive and clickable. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
pressed
Surface with pressed state refers to an interaction that occurs when the ui element is pressed.
disabled
Surface with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
ref / fill / destructive-primary
enabled
Destructive border on enabled state serves as a prominent reminder or warning, helping prevent accidental or unintended actions that could have negative implications.
transparent
Transparent destructive surface provides a subtle yet noticeable warning or reminder, preventing accidental or unintended actions that could lead to negative consequences.
hover
Border on hover state refers to an interaction that the ui element is interactive and clickable. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
pressed
Border with pressed state refers to an interaction that occurs when the ui element is pressed.
disabled
Border with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
ref / fill / funct
default
Default alerts. Lower prio statuses such as pairing