situation
funct-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.
funct-text-inverse
Inverse text refers to the opposite color that contrasts with the background.
funct-text-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.
funct-text-disabled
Disabled text refers to a particular element is temporarily or permanently disabled and cannot be accessed or interacted with.
funct-text-success-weak
Success text refers to content that signifies a positive or affirmative message.
funct-text-info-weak
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.
funct-text-draft-weak
Draft refers to temporary statuses.
funct-text-warning-weak
Warning text refers to content that conveys a warning, caution, or alert.
funct-text-error-weak
Error text refers to incorrect or invalid information on a form or during a data entry process.
funct-text-success-moderate
Success text refers to content that signifies a positive or affirmative message.
funct-text-info-moderate
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.
funct-text-draft-moderate
Draft refers to temporary statuses.
funct-text-warning-moderate
Warning text refers to content that conveys a warning, caution, or alert.
funct-text-error-moderate
Error text refers to incorrect or invalid information on a form or during a data entry process.
funct-icon-error
Error icon indicates the occurrence of an error or problem. Suitable for destructive icons.
funct-icon-warning
Warning icon serves as a visual cue to alert about potential issues, risks, or important information that requires attention.
funct-icon-success
Success icon serves as a visual cue to convey that a task, action, or process has been completed successfully.
funct-icon-emphasis
emphasis icon refers to an icon that is designed to draw attention and clearly indicates its interactive nature.
funct-surface-default
Suitable for default alerts, lower prio statuses such as pairing.
funct-surface-muted
Default alerts. Lower prio statuses such as pairing
funct-surface-inverse
Inverse surface refers to the opposite color that contrasts with the background.
funct-surface-overlay-default
Default alerts. Lower prio statuses such as pairing
funct-surface-overlay-inverse
Default alerts. Lower prio statuses such as pairing
funct-surface-success-weak
Suitable for alerts, toasts. Specially success and positive statuses such as accepted, paid, delivered.
funct-surface-info-weak
Suitable for normal alerts, common statuses such as created, sent, printed, processing.
funct-surface-draft-weak
Suitable for alerts and temporary statuses such as drafts.
funct-surface-warning-weak
Suitable for alerts, toasts, tooltips. Specially warnings and potential problem statuses such as partially paid, losses.
funct-surface-error-weak
Suitable for alerts, toasts, tooltips. Specially errors and failure statuses such as rejected, not sent, overdue, not delivered.
funct-surface-success-moderate
Suitable for badges. Specially success and positive statuses such as accepted, paid, delivered.
funct-surface-info-moderate
Suitable for badges. Common statuses such as created, sent, printed, processing.
funct-surface-draft-moderate
Suitable for badges. Temporary statuses such as drafts.
funct-surface-warning-moderate
Suitable for badges. Warnings and potential problem statuses such as partially paid, losses
funct-surface-error-moderate
Suitable for badges. Specially errors and failure statuses such as rejected, not sent, overdue, not delivered.
funct-surface-disabled
A surface with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
funct-border-default
Suitable for default alerts. Specially lower prio statuses such as pairing.
funct-border-muted
Muted border refers to a subtle border style.
funct-border-inverse
Inverse border refers to the opposite color that contrasts with the background.
funct-border-success-weak
Suitable for alerts, toasts. Specially success and positive statuses such as accepted, paid, delivered.
funct-border-info-weak
Suitable for normal alerts and common statuses such as created, sent, printed, processing.
funct-border-draft-weak
Suitable for alerts and temporary statuses such as drafts.
funct-border-warning-weak
Suitable for alerts, toasts, tooltips. Specially warnings and potential problem statuses such as partially paid, losses.
funct-border-error-weak
Suitable for alerts, toasts, tooltips. Specially errors and failure statuses such as rejected, not sent, overdue, not delivered.
funct-border-success-moderate
Suitable for badges. Specially success and positive statuses such as accepted, paid, delivered.
funct-border-info-moderate
Suitable for badges. Ccommon statuses such as created, sent, printed, processing.
funct-border-draft-moderate
Suitable for badges. Temporary statuses such as drafts.
funct-border-warning-moderate
Suitable for badges. Warnings and potential problem statuses such as partially paid, losses.
funct-border-error-moderate
Suitable for badges. Specially errors and failure statuses such as rejected, not sent, overdue, not delivered.
funct-border-disabled
A border with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.