Color Tokens
Colors you can use within swirl.
Background
| Token Name | Value (rgba) | Description | |
|---|---|---|---|
background-default | 255, 255, 255, 1 | Usually used for the page background and elements that should not elevate from the background. | |
background-hovered | 242, 242, 242, 1 | Used if a component with “Background/Default” has a hovered state. | |
background-pressed | 234, 234, 234, 1 | Used if a component with “Background/Default” has a pressed state. | |
on-surface-highlight-default | 213, 226, 255, 1 | Used to place containers on “Surface Highlight/Default”. |
Surface
| Token Name | Value (rgba) | Description | |
|---|---|---|---|
surface-default | 255, 255, 255, 1 | Usually used for containers that need to be elevated. | |
surface-hovered | 242, 242, 242, 1 | Used if a component with “Surface/Default” has a hovered state. | |
surface-pressed | 234, 234, 234, 1 | Used if a component with “Surface/Default” has a pressed state. | |
surface-sunken-default | 242, 242, 242, 1 | ||
surface-sunken-hovered | 234, 234, 234, 1 | ||
surface-sunken-pressed | 223, 223, 223, 1 | ||
surface-overlay-default | 255, 255, 255, 1 | Usually used for containers that need to be more elevated. | |
surface-overlay-hovered | 242, 242, 242, 1 | Used if a component with “Surface Overlay/Default” has a hovered state. | |
surface-overlay-pressed | 234, 234, 234, 1 | Used if a component with “Surface Overlay/Default” has a pressed state. | |
surface-raised-default | 242, 242, 242, 1 | Usually used for elements that need contrast on surfaces or background | |
surface-raised-hovered | 234, 234, 234, 1 | Used if a component with “On Surface/Default” has a hovered state. | |
surface-raised-pressed | 223, 223, 223, 1 | Used if a component with “On Surface/Default” has a pressed state. | |
surface-highlight-default | 230, 238, 255, 1 | Usually used for containers that need to be highlighted. | |
surface-highlight-hovered | 213, 226, 255, 1 | Used if a component with “Surface Highlight/Default” has a hovered state. | |
surface-highlight-pressed | 190, 210, 255, 1 | Used if a component with “Surface Highlight/Default” has a pressed state. | |
surface-critical-default | 213, 6, 54, 1 | Used as a background for critical surfaces. | |
surface-critical-subdued | 252, 231, 237, 1 | Used for low prio critical background. | |
surface-warning-default | 243, 183, 3, 1 | Used as a background for warning surfaces. | |
surface-warning-subdued | 250, 241, 200, 1 | Used for low prio warning background. | |
surface-success-default | 8, 129, 8, 1 | Used as a background for success surfaces. | |
surface-success-subdued | 220, 247, 220, 1 | Used for low prio success background. | |
surface-info-default | 20, 90, 245, 1 | Used as a background for info surfaces. | |
surface-info-subdued | 230, 241, 255, 1 | Used for low prio info background. | |
surface-neutral-default | 63, 63, 63, 1 | Used as a background for neutral surfaces. | |
surface-neutral-subdued | 242, 242, 242, 1 | Used for low prio neutral background. | |
surface-on-image-default | 0, 0, 0, 0, 6 | Usually used for containers on images |
Border
| Token Name | Value (rgba) | Description | |
|---|---|---|---|
border-strong | 207, 207, 207, 1 | Usually used for high emphasis borders. | |
border-default | 234, 234, 234, 1 | Usually used for low emphasis borders and espacially divider elements. | |
border-highlight | 0, 55, 175, 1 | Used as border color on containers that need to be highlighted (e.g. form fields). | |
border-critical | 213, 6, 54, 1 | Usally used as an border on critical components. | |
border-success | 8, 129, 8, 1 | Usally used as an border on success components. | |
border-warning | 147, 88, 6, 1 | Usally used as an border on warning components. | |
border-info | 20, 90, 245, 1 | Usally used as an border on info components. | |
border-on-highlight | 174, 201, 246, 1 | Used as border color on containers that have an highlight surface |
Text
| Token Name | Value (rgba) | Description | |
|---|---|---|---|
text-default | 25, 25, 25, 1 | Used for high emphasis text. | |
text-subdued | 110, 110, 110, 1 | Used for low emphasis text. | |
text-disabled | 207, 207, 207, 1 | Used if a text element is disabled. | |
text-dark | 25, 25, 25, 1 | Used for low contrast decorative colors. | |
text-highlight | 0, 55, 175, 1 | Used to highlight text. | |
text-critical | 213, 6, 54, 1 | Used as critical text color | |
text-success | 8, 129, 8, 1 | Used as success text color | |
text-warning | 147, 88, 6, 1 | Used as warning text color | |
text-info | 20, 90, 245, 1 | Used as info text color | |
text-on-action-primary | 255, 255, 255, 1 | Used as a text color on containers with action primary color. | |
text-on-surface-highlight | 23, 23, 23, 1 | Used as text color on containers with highlight color. | |
text-on-surface-highlight-subdued | 106, 109, 116, 1 | Used as subdued text color on containers with highlight color. | |
text-on-status | 255, 255, 255, 1 | Used as a text color on containers with a default status color except on warning. | |
text-on-image | 255, 255, 255, 1 | Used as a text color on “Surface On Image/Default”. |
Icon
| Token Name | Value (rgba) | Description | |
|---|---|---|---|
icon-strong | 25, 25, 25, 1 | Used for high emphasis icons. | |
icon-default | 110, 110, 110, 1 | Used for low emphasis icons. | |
icon-disabled | 207, 207, 207, 1 | Used if a icon element is disabled. | |
icon-dark | 25, 25, 25, 1 | Used for low contrast decorative colors. | |
icon-highlight | 0, 55, 175, 1 | Used to highlight icons. | |
icon-critical | 213, 6, 54, 1 | Used as critical icon color | |
icon-success | 8, 129, 8, 1 | Used as success icon color | |
icon-warning | 147, 88, 6, 1 | Used as warning icon color | |
icon-info | 20, 90, 245, 1 | Used as info icon color | |
icon-on-action-primary | 255, 255, 255, 1 | Used as a icon color on containers with action primary color. | |
icon-on-surface-highlight | 23, 23, 23, 1 | Used as icon color on containers with highlight color. | |
icon-on-surface-highlight-subdued | 106, 109, 116, 1 | Used as subdued icon color on containers with highlight color. | |
icon-on-status | 255, 255, 255, 1 | Used as a icon color on containers with a default status color except on warning. | |
icon-on-image | 255, 255, 255, 1 | Used as a icon color on “Surface On Image/Default”. |
Action
| Token Name | Value (rgba) | Description | |
|---|---|---|---|
action-primary-default | 20, 90, 245, 1 | Used for containers that are high emphasis action elements. | |
action-primary-hovered | 55, 115, 247, 1 | Used if a component with “Action Primary/Default” has a hovered state. | |
action-primary-pressed | 91, 139, 248, 1 | Used if a component with “Action Primary/Default” has a pressed state. | |
action-primary-disabled | 242, 242, 242, 1 | Used if a component with “Action Primary/Default” has a disabled state. | |
action-critical-default | 213, 6, 54, 1 | Used for containers that are critical and negative action elements. | |
action-critical-hovered | 179, 39, 57, 1 | Used if a component with “Action Critical/Default” has a hovered state. | |
action-critical-pressed | 159, 35, 52, 1 | Used if a component with “Action Critical/Default” has a pressed state. | |
action-critical-disabled | 242, 242, 242, 1 | Used if a component with “Action Primary/Default” has a disabled state. | |
action-neutral-default | 242, 242, 242, 1 | Used for containers that are low emphasis action elements. | |
action-neutral-hovered | 234, 234, 234, 1 | Used if a component with “Action Neutral/Default” has a hovered state. | |
action-neutral-pressed | 223, 223, 223, 1 | Used if a component with “Action Neutral/Default” has a pressed state. | |
action-neutral-disabled | 242, 242, 242, 1 | Used if a component with “Action Neutral/Default” has a disabled state. |
Interactive
| Token Name | Value (rgba) | Description | |
|---|---|---|---|
interactive-primary-default | 0, 61, 175, 1 | Used for icon and text that are high emphasis interactive elements. | |
interactive-primary-hovered | 38, 85, 187, 1 | Used if a component with “Interactive Primary/Default” has a hovered state. | |
interactive-primary-pressed | 77, 119, 199, 1 | Used if a component with “Interactive Primary/Default” has a pressed state. | |
interactive-primary-disabled | 204, 205, 209, 1 | Used if a component with “Interactive Primary/Default” has a disabled state. | |
interactive-critical-default | 213, 6, 54, 1 | Used for icon and text that are critical or negative interactive elements. | |
interactive-critical-hovered | 179, 39, 57, 1 | Used if a component with “Interactive Critical/Default” has a hovered state. | |
interactive-critical-pressed | 159, 35, 52, 1 | Used if a component with “Interactive Critical/Default” has a pressed state. | |
interactive-critical-disabled | 207, 207, 207, 1 | Used if a component with “Interactive Critical/Default” has a disabled state. | |
interactive-neutral-default | 110, 110, 110, 1 | Used for icon and text that are low emphasis interactive elements. | |
interactive-neutral-hovered | 158, 158, 158, 1 | Used if a component with “Interactive Neutral/Default” has a hovered state. | |
interactive-neutral-pressed | 158, 158, 158, 1 | Used if a component with “Interactive Neutral/Default” has a pressed state. | |
interactive-neutral-disabled | 207, 207, 207, 1 | Used if a component with “Interactive Neutral/Default” has a disabled state. |
Focus
| Token Name | Value (rgba) | |
|---|---|---|
focus-default | 0, 55, 175, 1 |
Decorative
| Token Name | Value (rgba) | Description | |
|---|---|---|---|
decorative-chilli-text | 195, 28, 28, 1 | Used as a decorative color. | |
decorative-chilli-surface | 195, 28, 28, 1 | Used as a decorative color. | |
decorative-chilli-surface-subdued | 252, 231, 237, 1 | Used as a decorative color. | |
decorative-pumpkin-text | 167, 76, 37, 1 | Used as a decorative color. | |
decorative-pumpkin-surface | 245, 144, 49, 1 | Used as a decorative color. | |
decorative-pumpkin-surface-subdued | 255, 227, 202, 1 | Used as a decorative color. | |
decorative-banana-text | 154, 92, 0, 1 | Used as a decorative color. | |
decorative-banana-surface | 234, 186, 42, 1 | Used as a decorative color. | |
decorative-banana-surface-subdued | 250, 241, 200, 1 | Used as a decorative color. | |
decorative-radish-text | 186, 29, 142, 1 | Used as a decorative color. | |
decorative-radish-surface | 186, 29, 142, 1 | Used as a decorative color. | |
decorative-radish-surface-subdued | 255, 221, 245, 1 | Used as a decorative color. | |
decorative-grape-text | 130, 45, 164, 1 | Used as a decorative color. | |
decorative-grape-surface | 130, 45, 164, 1 | Used as a decorative color. | |
decorative-grape-surface-subdued | 233, 220, 255, 1 | Used as a decorative color. | |
decorative-kiwi-text | 54, 119, 69, 1 | Used as a decorative color. | |
decorative-kiwi-surface | 54, 119, 69, 1 | Used as a decorative color. | |
decorative-kiwi-surface-subdued | 220, 247, 220, 1 | Used as a decorative color. | |
decorative-blueberry-text | 63, 95, 167, 1 | Used as a decorative color. | |
decorative-blueberry-surface | 63, 95, 167, 1 | Used as a decorative color. | |
decorative-blueberry-surface-subdued | 230, 241, 255, 1 | Used as a decorative color. |