Color
Colors are a clear way to convey meaning in design. Over time, we associate colors with specific meanings based on their context and frequency of use. In the Workleap ecosystem, each color complements the others and has a specific role.
Guidelines
- Communication is key - Although we value an aesthetically pleasing use of color, we place a higher value on clear communication. Color supports the purpose of the content, communicating things like hierarchy, interactive states and differences between visual elements.
- Colors have meaning - Each color has assigned sentiment based on how they function within the interface. Defined color roles make things easy to modify and customize later. Their meaning is also expanded to all Workleap verticals so that users understand that they’re in the same ecosystem and can recognize its codes.
Deprecation notice
Tokens with the -active suffix are deprecated and should not be used in new code. They will be removed in a future release. Prefer using their -press counterparts. In some instances, -active tokens should be replaced with -selected tokens. This should be documented in your Figma files. If in doubt, validate with a designer.
Light Tokens
Neutral
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-neutral-border-active | neutral-active | #777775 | |
--hop-neutral-icon-active | neutral-active | #292929 | |
--hop-neutral-icon-weak-active | neutral-weak-active | #505050 | |
--hop-neutral-surface-active | neutral-active | #ecebe8 | |
--hop-neutral-surface-weak-active | neutral-weak-active | #ccccca | |
--hop-neutral-text-active | neutral-active | #292929 | |
--hop-neutral-text-weak-active | neutral-weak-active | #505050 | |
--hop-neutral-border | neutral | #b3b3b1 | |
--hop-neutral-border-selected | neutral-selected | #3c3c3c | |
--hop-neutral-border-disabled | neutral-disabled | #ecebe8 | |
--hop-neutral-border-hover | neutral-hover | #959593 | |
--hop-neutral-border-press | neutral-press | #777775 | |
--hop-neutral-border-strong | neutral-strong | #3c3c3c | |
--hop-neutral-border-strong-hover | neutral-strong-hover | #505050 | |
--hop-neutral-border-weak | neutral-weak | #e0dfdd | |
--hop-neutral-border-weakest | neutral-weakest | #ecebe8 | |
--hop-neutral-icon | neutral | #3c3c3c | |
--hop-neutral-icon-selected | neutral-selected | #ffffff | |
--hop-neutral-icon-disabled | neutral-disabled | #959593 | |
--hop-neutral-icon-hover | neutral-hover | #505050 | |
--hop-neutral-icon-press | neutral-press | #292929 | |
--hop-neutral-icon-strong | neutral-strong | #ffffff | |
--hop-neutral-icon-strong-hover | neutral-strong-hover | #ffffff | |
--hop-neutral-icon-weak | neutral-weak | #777775 | |
--hop-neutral-icon-weak-hover | neutral-weak-hover | #636362 | |
--hop-neutral-icon-weak-press | neutral-weak-press | #505050 | |
--hop-neutral-icon-weak-selected | neutral-weak-selected | #636362 | |
--hop-neutral-icon-weakest | neutral-weakest | #b3b3b1 | |
--hop-neutral-surface | neutral | #ffffff | |
--hop-neutral-surface-selected | neutral-selected | #3c3c3c | |
--hop-neutral-surface-disabled | neutral-disabled | #ecebe8 | |
--hop-neutral-surface-hover | neutral-hover | #f8f6f3 | |
--hop-neutral-surface-press | neutral-press | #ecebe8 | |
--hop-neutral-surface-strong | neutral-strong | #3c3c3c | |
--hop-neutral-surface-weak | neutral-weak | #ecebe8 | |
--hop-neutral-surface-weak-selected | neutral-weak-selected | #ecebe8 | |
--hop-neutral-surface-weak-hover | neutral-weak-hover | #e0dfdd | |
--hop-neutral-surface-weak-press | neutral-weak-press | #ccccca | |
--hop-neutral-surface-weakest | neutral-weakest | #f8f6f3 | |
--hop-neutral-surface-weakest-selected | neutral-weakest-selected | #ecebe8 | |
--hop-neutral-surface-weakest-hover | neutral-weakest-hover | #ecebe8 | |
--hop-neutral-text | neutral | #3c3c3c | |
--hop-neutral-text-selected | neutral-selected | #ffffff | |
--hop-neutral-text-disabled | neutral-disabled | #959593 | |
--hop-neutral-text-hover | neutral-hover | #505050 | |
--hop-neutral-text-press | neutral-press | #292929 | |
--hop-neutral-text-strong | neutral-strong | #ffffff | |
--hop-neutral-text-weak | neutral-weak | #6c6c6b | |
--hop-neutral-text-weak-hover | neutral-weak-hover | #636362 | |
--hop-neutral-text-weak-press | neutral-weak-press | #505050 | |
--hop-neutral-text-weak-selected | neutral-weak-selected | #636362 | |
--hop-neutral-text-weakest | neutral-weakest | #959593 |
Primary
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-primary-border-active | primary-active | #6c8ffd | |
--hop-primary-icon-active | primary-active | #2040c7 | |
--hop-primary-surface-active | primary-active | #6c8ffd | |
--hop-primary-surface-strong-active | primary-strong-active | #2040c7 | |
--hop-primary-surface-weak-active | primary-weak-active | #d6e0ff | |
--hop-primary-text-active | primary-active | #2040c7 | |
--hop-primary-border | primary | #4767fe | |
--hop-primary-border-selected | primary-selected | #4767fe | |
--hop-primary-border-focus | primary-focus | #3b57ff | |
--hop-primary-border-press | primary-press | #6c8ffd | |
--hop-primary-icon | primary | #3b57ff | |
--hop-primary-icon-selected | primary-selected | #3b57ff | |
--hop-primary-icon-disabled | primary-disabled | #95b1ff | |
--hop-primary-icon-hover | primary-hover | #2a43e8 | |
--hop-primary-icon-press | primary-press | #2040c7 | |
--hop-primary-icon-strong | primary-strong | #ffffff | |
--hop-primary-icon-strong-hover | primary-strong-hover | #ffffff | |
--hop-primary-surface | primary | #e6ebff | |
--hop-primary-surface-selected | primary-selected | #e6ebff | |
--hop-primary-surface-disabled | primary-disabled | #95b1ff | |
--hop-primary-surface-focus | primary-focus | #f5f6ff | |
--hop-primary-surface-hover | primary-hover | #95b1ff | |
--hop-primary-surface-press | primary-press | #6c8ffd | |
--hop-primary-surface-strong | primary-strong | #4767fe | |
--hop-primary-surface-strong-selected | primary-strong-selected | #e6ebff | |
--hop-primary-surface-strong-hover | primary-strong-hover | #2a43e8 | |
--hop-primary-surface-strong-press | primary-strong-press | #2040c7 | |
--hop-primary-surface-weak | primary-weak | #f5f6ff | |
--hop-primary-surface-weak-hover | primary-weak-hover | #e6ebff | |
--hop-primary-surface-weak-press | primary-weak-press | #d6e0ff | |
--hop-primary-text | primary | #3b57ff | |
--hop-primary-text-selected | primary-selected | #3b57ff | |
--hop-primary-text-disabled | primary-disabled | #95b1ff | |
--hop-primary-text-hover | primary-hover | #2a43e8 | |
--hop-primary-text-press | primary-press | #2040c7 | |
--hop-primary-text-strong | primary-strong | #ffffff | |
--hop-primary-text-strong-hover | primary-strong-hover | #ffffff |
Success
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-success-border | success | #aad89d | |
--hop-success-icon | success | #115a52 | |
--hop-success-icon-weakest | success-weakest | #aad89d | |
--hop-success-icon-weak | success-weak | #47a584 | |
--hop-success-surface | success | #f4f9e9 | |
--hop-success-surface-strong | success-strong | #aad89d | |
--hop-success-surface-weak | success-weak | #e3f3b9 | |
--hop-success-text | success | #115a52 | |
--hop-success-text-hover | success-hover | #16433d | |
--hop-success-text-weak | success-weak | #47a584 |
Warning
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-warning-border | warning | #ffbf92 | |
--hop-warning-icon | warning | #8c3504 | |
--hop-warning-icon-weakest | warning-weakest | #ffbf92 | |
--hop-warning-icon-weak | warning-weak | #e57723 | |
--hop-warning-surface | warning | #fff5e9 | |
--hop-warning-surface-strong | warning-strong | #ffbf92 | |
--hop-warning-surface-weak | warning-weak | #ffe8d3 | |
--hop-warning-text | warning | #8c3504 | |
--hop-warning-text-weak | warning-weak | #e57723 |
Danger
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-danger-border-active | danger-active | #ba2d2d | |
--hop-danger-icon-active | danger-active | #6c2320 | |
--hop-danger-icon-weak-active | danger-weak-active | #ba2d2d | |
--hop-danger-surface-active | danger-active | #ba2d2d | |
--hop-danger-surface-weak-active | danger-weak-active | #ffbcb7 | |
--hop-danger-text-active | danger-active | #6c2320 | |
--hop-danger-text-weak-active | danger-weak-active | #ba2d2d | |
--hop-danger-border | danger | #ffbcb7 | |
--hop-danger-border-selected | danger-selected | #fa4d59 | |
--hop-danger-border-strong | danger-strong | #fa4d59 | |
--hop-danger-border-press | danger-press | #ba2d2d | |
--hop-danger-icon | danger | #952927 | |
--hop-danger-icon-selected | danger-selected | #df3236 | |
--hop-danger-icon-disabled | danger-disabled | #ffbcb7 | |
--hop-danger-icon-hover | danger-hover | #cb2e31 | |
--hop-danger-icon-press | danger-press | #6c2320 | |
--hop-danger-icon-strong | danger-strong | #ffffff | |
--hop-danger-icon-strong-hover | danger-strong-hover | #ffffff | |
--hop-danger-icon-weak | danger-weak | #fa4d59 | |
--hop-danger-icon-weak-hover | danger-weak-hover | #cb2e31 | |
--hop-danger-icon-weak-press | danger-weak-press | #ba2d2d | |
--hop-danger-surface | danger | #fdf6f6 | |
--hop-danger-surface-selected | danger-selected | #fde6e5 | |
--hop-danger-surface-disabled | danger-disabled | #ffbcb7 | |
--hop-danger-surface-hover | danger-hover | #cb2e31 | |
--hop-danger-surface-press | danger-press | #ba2d2d | |
--hop-danger-surface-strong | danger-strong | #df3236 | |
--hop-danger-surface-strong-hover | danger-strong-hover | #cb2e31 | |
--hop-danger-surface-weak | danger-weak | #fde6e5 | |
--hop-danger-surface-weak-hover | danger-weak-hover | #ffd6d3 | |
--hop-danger-surface-weak-press | danger-weak-press | #ffbcb7 | |
--hop-danger-text | danger | #952927 | |
--hop-danger-text-selected | danger-selected | #df3236 | |
--hop-danger-text-disabled | danger-disabled | #ffbcb7 | |
--hop-danger-text-hover | danger-hover | #cb2e31 | |
--hop-danger-text-press | danger-press | #6c2320 | |
--hop-danger-text-strong | danger-strong | #ffffff | |
--hop-danger-text-strong-hover | danger-strong-hover | #ffffff | |
--hop-danger-text-weak | danger-weak | #df3236 | |
--hop-danger-text-weak-hover | danger-weak-hover | #cb2e31 | |
--hop-danger-text-weak-press | danger-weak-press | #ba2d2d |
Information
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-information-border | information | #9fd2f7 | |
--hop-information-icon | information | #0a538b | |
--hop-information-icon-weakest | information-weakest | #bae6ff | |
--hop-information-icon-weak | information-weak | #5d9acd | |
--hop-information-surface | information | #f0f8ff | |
--hop-information-surface-strong | information-strong | #9fd2f7 | |
--hop-information-surface-weak | information-weak | #d9efff | |
--hop-information-text | information | #003d70 | |
--hop-information-text-weak | information-weak | #5d9acd |
Upsell
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-upsell-border-active | upsell-active | #e2a934 | |
--hop-upsell-icon-active | upsell-active | #2f250d | |
--hop-upsell-icon-weak-active | upsell-weak-active | #7e5e0a | |
--hop-upsell-surface-active | upsell-active | #e2a934 | |
--hop-upsell-surface-weak-active | upsell-weak-active | #f7e694 | |
--hop-upsell-text-active | upsell-active | #2f250d | |
--hop-upsell-text-weak-active | upsell-weak-active | #7e5e0a | |
--hop-upsell-border | upsell | #eac96d | |
--hop-upsell-border-selected | upsell-selected | #e2a934 | |
--hop-upsell-border-disabled | upsell-disabled | #f7e694 | |
--hop-upsell-border-press | upsell-press | #e2a934 | |
--hop-upsell-icon | upsell | #654c0d | |
--hop-upsell-icon-selected | upsell-selected | #996f08 | |
--hop-upsell-icon-hover | upsell-hover | #4b390f | |
--hop-upsell-icon-press | upsell-press | #2f250d | |
--hop-upsell-icon-weakest | upsell-weakest | #f7e694 | |
--hop-upsell-icon-weak | upsell-weak | #eac96d | |
--hop-upsell-icon-weak-hover | upsell-weak-hover | #8b6609 | |
--hop-upsell-icon-weak-press | upsell-weak-press | #7e5e0a | |
--hop-upsell-surface | upsell | #f7e694 | |
--hop-upsell-surface-selected | upsell-selected | #fff2b8 | |
--hop-upsell-surface-disabled | upsell-disabled | #fff8d6 | |
--hop-upsell-surface-hover | upsell-hover | #eac96d | |
--hop-upsell-surface-press | upsell-press | #e2a934 | |
--hop-upsell-surface-weak | upsell-weak | #fff8d6 | |
--hop-upsell-surface-weak-hover | upsell-weak-hover | #fff2b8 | |
--hop-upsell-surface-weak-press | upsell-weak-press | #f7e694 | |
--hop-upsell-text | upsell | #654c0d | |
--hop-upsell-text-selected | upsell-selected | #996f08 | |
--hop-upsell-text-disabled | upsell-disabled | #996f08 | |
--hop-upsell-text-hover | upsell-hover | #4b390f | |
--hop-upsell-text-press | upsell-press | #2f250d | |
--hop-upsell-text-weak | upsell-weak | #c28b12 | |
--hop-upsell-text-weak-hover | upsell-weak-hover | #8b6609 | |
--hop-upsell-text-weak-press | upsell-weak-press | #7e5e0a |
Decorative
Option 1
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-decorative-option1-border | decorative-option1 | #b9cbff | |
--hop-decorative-option1-icon | decorative-option1 | #152450 | |
--hop-decorative-option1-surface | decorative-option1 | #b9cbff | |
--hop-decorative-option1-surface-hover | decorative-option1-hover | #95b1ff | |
--hop-decorative-option1-surface-strong | decorative-option1-strong | #95b1ff | |
--hop-decorative-option1-surface-weak | decorative-option1-weak | #e6ebff | |
--hop-decorative-option1-surface-weak-hover | decorative-option1-weak-hover | #d6e0ff | |
--hop-decorative-option1-surface-weakest | decorative-option1-weakest | #f5f6ff | |
--hop-decorative-option1-text | decorative-option1 | #152450 | |
--hop-decorative-option1-text-weak | decorative-option1-weak | #6c8ffd |
Option 2
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-decorative-option2-border | decorative-option2 | #a3d6cb | |
--hop-decorative-option2-icon | decorative-option2 | #002d1c | |
--hop-decorative-option2-surface | decorative-option2 | #bde8e1 | |
--hop-decorative-option2-surface-hover | decorative-option2-hover | #a3d6cb | |
--hop-decorative-option2-surface-strong | decorative-option2-strong | #a3d6cb | |
--hop-decorative-option2-surface-weak | decorative-option2-weak | #cff4ef | |
--hop-decorative-option2-surface-weak-hover | decorative-option2-weak-hover | #bde8e1 | |
--hop-decorative-option2-surface-weakest | decorative-option2-weakest | #ddfdf9 | |
--hop-decorative-option2-text | decorative-option2 | #002d1c | |
--hop-decorative-option2-text-weak | decorative-option2-weak | #5da18c |
Option 3
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-decorative-option3-border | decorative-option3 | #ffbf92 | |
--hop-decorative-option3-icon | decorative-option3 | #451a02 | |
--hop-decorative-option3-surface | decorative-option3 | #ffbf92 | |
--hop-decorative-option3-surface-hover | decorative-option3-hover | #ff9b3f | |
--hop-decorative-option3-surface-strong | decorative-option3-strong | #ff9b3f | |
--hop-decorative-option3-surface-weak | decorative-option3-weak | #ffe8d3 | |
--hop-decorative-option3-surface-weak-hover | decorative-option3-weak-hover | #ffd8be | |
--hop-decorative-option3-surface-weakest | decorative-option3-weakest | #fff5e9 | |
--hop-decorative-option3-text | decorative-option3 | #451a02 | |
--hop-decorative-option3-text-weak | decorative-option3-weak | #e57723 |
Option 4
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-decorative-option4-border | decorative-option4 | #aad89d | |
--hop-decorative-option4-icon | decorative-option4 | #132a27 | |
--hop-decorative-option4-surface | decorative-option4 | #cde8ac | |
--hop-decorative-option4-surface-hover | decorative-option4-hover | #aad89d | |
--hop-decorative-option4-surface-strong | decorative-option4-strong | #aad89d | |
--hop-decorative-option4-surface-weak | decorative-option4-weak | #e3f3b9 | |
--hop-decorative-option4-surface-weak-hover | decorative-option4-weak-hover | #cde8ac | |
--hop-decorative-option4-surface-weakest | decorative-option4-weakest | #f4f9e9 | |
--hop-decorative-option4-text | decorative-option4 | #132a27 | |
--hop-decorative-option4-text-weak | decorative-option4-weak | #188a71 |
Option 5
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-decorative-option5-border | decorative-option5 | #9fd2f7 | |
--hop-decorative-option5-icon | decorative-option5 | #00274b | |
--hop-decorative-option5-surface | decorative-option5 | #bae6ff | |
--hop-decorative-option5-surface-hover | decorative-option5-hover | #9fd2f7 | |
--hop-decorative-option5-surface-strong | decorative-option5-strong | #9fd2f7 | |
--hop-decorative-option5-surface-weak | decorative-option5-weak | #d9efff | |
--hop-decorative-option5-surface-weak-hover | decorative-option5-weak-hover | #bae6ff | |
--hop-decorative-option5-surface-weakest | decorative-option5-weakest | #f0f8ff | |
--hop-decorative-option5-text | decorative-option5 | #00274b | |
--hop-decorative-option5-text-weak | decorative-option5-weak | #5d9acd |
Option 6
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-decorative-option6-border | decorative-option6 | #eac96d | |
--hop-decorative-option6-icon | decorative-option6 | #2f250d | |
--hop-decorative-option6-surface | decorative-option6 | #f7e694 | |
--hop-decorative-option6-surface-hover | decorative-option6-hover | #eac96d | |
--hop-decorative-option6-surface-strong | decorative-option6-strong | #eac96d | |
--hop-decorative-option6-surface-weak | decorative-option6-weak | #fff2b8 | |
--hop-decorative-option6-surface-weak-hover | decorative-option6-weak-hover | #f7e694 | |
--hop-decorative-option6-surface-weakest | decorative-option6-weakest | #fff8d6 | |
--hop-decorative-option6-text | decorative-option6 | #2f250d | |
--hop-decorative-option6-text-weak | decorative-option6-weak | #e2a934 |
Option 7
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-decorative-option7-border | decorative-option7 | #d4cbc0 | |
--hop-decorative-option7-icon | decorative-option7 | #2a2620 | |
--hop-decorative-option7-surface | decorative-option7 | #e5ded6 | |
--hop-decorative-option7-surface-hover | decorative-option7-hover | #d4cbc0 | |
--hop-decorative-option7-surface-strong | decorative-option7-strong | #d4cbc0 | |
--hop-decorative-option7-surface-weak | decorative-option7-weak | #f0eae3 | |
--hop-decorative-option7-surface-weak-hover | decorative-option7-weak-hover | #e5ded6 | |
--hop-decorative-option7-surface-weakest | decorative-option7-weakest | #fef6ef | |
--hop-decorative-option7-text | decorative-option7 | #2a2620 | |
--hop-decorative-option7-text-weak | decorative-option7-weak | #776a59 |
Option 8
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-decorative-option8-border | decorative-option8 | #ffbcb7 | |
--hop-decorative-option8-icon | decorative-option8 | #431a17 | |
--hop-decorative-option8-surface | decorative-option8 | #ffd6d3 | |
--hop-decorative-option8-surface-hover | decorative-option8-hover | #ff8e8e | |
--hop-decorative-option8-surface-strong | decorative-option8-strong | #ffbcb7 | |
--hop-decorative-option8-surface-weak | decorative-option8-weak | #fde6e5 | |
--hop-decorative-option8-surface-weak-hover | decorative-option8-weak-hover | #ffd6d3 | |
--hop-decorative-option8-surface-weakest | decorative-option8-weakest | #fdf6f6 | |
--hop-decorative-option8-text | decorative-option8 | #431a17 | |
--hop-decorative-option8-text-weak | decorative-option8-weak | #fa4d59 |
Option 9
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-decorative-option9-border | decorative-option9 | #ccccca | |
--hop-decorative-option9-icon | decorative-option9 | #ffffff | |
--hop-decorative-option9-surface | decorative-option9 | #777775 | |
--hop-decorative-option9-surface-hover | decorative-option9-hover | #6c6c6b | |
--hop-decorative-option9-surface-strong | decorative-option9-strong | #3c3c3c | |
--hop-decorative-option9-surface-weak | decorative-option9-weak | #959593 | |
--hop-decorative-option9-surface-weak-hover | decorative-option9-weak-hover | #777775 | |
--hop-decorative-option9-surface-weakest | decorative-option9-weakest | #b3b3b1 | |
--hop-decorative-option9-text | decorative-option9 | #ffffff | |
--hop-decorative-option9-text-weak | decorative-option9-weak | #959593 |
Status
Neutral
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-neutral-border | status-neutral | #3c3c3c | |
--hop-status-neutral-border-disabled | status-neutral-disabled | #ecebe8 | |
--hop-status-neutral-border-hover | status-neutral-hover | #505050 | |
--hop-status-neutral-border-press | status-neutral-press | #292929 | |
--hop-status-neutral-border-selected | status-neutral-selected | #3c3c3c | |
--hop-status-neutral-icon | status-neutral | #3c3c3c | |
--hop-status-neutral-icon-disabled | status-neutral-disabled | #959593 | |
--hop-status-neutral-icon-hover | status-neutral-hover | #505050 | |
--hop-status-neutral-icon-press | status-neutral-press | #292929 | |
--hop-status-neutral-icon-selected | status-neutral-selected | #ffffff | |
--hop-status-neutral-surface | status-neutral | #ffffff | |
--hop-status-neutral-surface-disabled | status-neutral-disabled | #ecebe8 | |
--hop-status-neutral-surface-hover | status-neutral-hover | #f8f6f3 | |
--hop-status-neutral-surface-press | status-neutral-press | #ecebe8 | |
--hop-status-neutral-surface-selected | status-neutral-selected | #3c3c3c | |
--hop-status-neutral-surface-strong | status-neutral-strong | #b3b3b1 | |
--hop-status-neutral-text | status-neutral | #3c3c3c | |
--hop-status-neutral-text-disabled | status-neutral-disabled | #959593 | |
--hop-status-neutral-text-hover | status-neutral-hover | #505050 | |
--hop-status-neutral-text-press | status-neutral-press | #292929 | |
--hop-status-neutral-text-selected | status-neutral-selected | #ffffff |
Progress
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-progress-border | status-progress | #6c8ffd | |
--hop-status-progress-border-disabled | status-progress-disabled | #e6ebff | |
--hop-status-progress-border-hover | status-progress-hover | #4767fe | |
--hop-status-progress-border-press | status-progress-press | #3b57ff | |
--hop-status-progress-border-selected | status-progress-selected | #4767fe | |
--hop-status-progress-icon | status-progress | #2a43e8 | |
--hop-status-progress-icon-disabled | status-progress-disabled | #95b1ff | |
--hop-status-progress-icon-hover | status-progress-hover | #2040c7 | |
--hop-status-progress-icon-press | status-progress-press | #1b3587 | |
--hop-status-progress-icon-selected | status-progress-selected | #3b57ff | |
--hop-status-progress-surface | status-progress | #e6ebff | |
--hop-status-progress-surface-disabled | status-progress-disabled | #f5f6ff | |
--hop-status-progress-surface-hover | status-progress-hover | #d6e0ff | |
--hop-status-progress-surface-press | status-progress-press | #b9cbff | |
--hop-status-progress-surface-selected | status-progress-selected | #e6ebff | |
--hop-status-progress-surface-strong | status-progress-strong | #95b1ff | |
--hop-status-progress-text | status-progress | #2a43e8 | |
--hop-status-progress-text-disabled | status-progress-disabled | #95b1ff | |
--hop-status-progress-text-hover | status-progress-hover | #2040c7 | |
--hop-status-progress-text-press | status-progress-press | #1b3587 | |
--hop-status-progress-text-selected | status-progress-selected | #3b57ff |
Positive
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-positive-border | status-positive | #47a584 | |
--hop-status-positive-border-disabled | status-positive-disabled | #e3f3b9 | |
--hop-status-positive-border-hover | status-positive-hover | #188a71 | |
--hop-status-positive-border-press | status-positive-press | #0c796b | |
--hop-status-positive-border-selected | status-positive-selected | #115a52 | |
--hop-status-positive-icon | status-positive | #0a6f64 | |
--hop-status-positive-icon-disabled | status-positive-disabled | #7dc291 | |
--hop-status-positive-icon-hover | status-positive-hover | #115a52 | |
--hop-status-positive-icon-press | status-positive-press | #16433d | |
--hop-status-positive-icon-selected | status-positive-selected | #115a52 | |
--hop-status-positive-surface | status-positive | #e3f3b9 | |
--hop-status-positive-surface-disabled | status-positive-disabled | #f4f9e9 | |
--hop-status-positive-surface-hover | status-positive-hover | #cde8ac | |
--hop-status-positive-surface-press | status-positive-press | #aad89d | |
--hop-status-positive-surface-selected | status-positive-selected | #e3f3b9 | |
--hop-status-positive-surface-strong | status-positive-strong | #7dc291 | |
--hop-status-positive-text | status-positive | #0a6f64 | |
--hop-status-positive-text-disabled | status-positive-disabled | #7dc291 | |
--hop-status-positive-text-hover | status-positive-hover | #115a52 | |
--hop-status-positive-text-press | status-positive-press | #16433d | |
--hop-status-positive-text-selected | status-positive-selected | #115a52 |
Caution
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-caution-border | status-caution | #e57723 | |
--hop-status-caution-border-disabled | status-caution-disabled | #ffe8d3 | |
--hop-status-caution-border-hover | status-caution-hover | #c95109 | |
--hop-status-caution-border-press | status-caution-press | #ba4705 | |
--hop-status-caution-border-selected | status-caution-selected | #8c3504 | |
--hop-status-caution-icon | status-caution | #ab4104 | |
--hop-status-caution-icon-disabled | status-caution-disabled | #ff9b3f | |
--hop-status-caution-icon-hover | status-caution-hover | #8c3504 | |
--hop-status-caution-icon-press | status-caution-press | #692803 | |
--hop-status-caution-icon-selected | status-caution-selected | #8c3504 | |
--hop-status-caution-surface | status-caution | #ffe8d3 | |
--hop-status-caution-surface-disabled | status-caution-disabled | #fff5e9 | |
--hop-status-caution-surface-hover | status-caution-hover | #ffd8be | |
--hop-status-caution-surface-press | status-caution-press | #ffbf92 | |
--hop-status-caution-surface-selected | status-caution-selected | #ffe8d3 | |
--hop-status-caution-surface-strong | status-caution-strong | #ff9b3f | |
--hop-status-caution-text | status-caution | #ab4104 | |
--hop-status-caution-text-disabled | status-caution-disabled | #ff9b3f | |
--hop-status-caution-text-hover | status-caution-hover | #8c3504 | |
--hop-status-caution-text-press | status-caution-press | #692803 | |
--hop-status-caution-text-selected | status-caution-selected | #8c3504 |
Negative
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-negative-border | status-negative | #fa4d59 | |
--hop-status-negative-border-disabled | status-negative-disabled | #fde6e5 | |
--hop-status-negative-border-hover | status-negative-hover | #df3236 | |
--hop-status-negative-border-press | status-negative-press | #cb2e31 | |
--hop-status-negative-border-selected | status-negative-selected | #952927 | |
--hop-status-negative-icon | status-negative | #ba2d2d | |
--hop-status-negative-icon-disabled | status-negative-disabled | #ff8e8e | |
--hop-status-negative-icon-hover | status-negative-hover | #952927 | |
--hop-status-negative-icon-press | status-negative-press | #6c2320 | |
--hop-status-negative-icon-selected | status-negative-selected | #952927 | |
--hop-status-negative-surface | status-negative | #fde6e5 | |
--hop-status-negative-surface-disabled | status-negative-disabled | #fdf6f6 | |
--hop-status-negative-surface-hover | status-negative-hover | #ffd6d3 | |
--hop-status-negative-surface-press | status-negative-press | #ffbcb7 | |
--hop-status-negative-surface-selected | status-negative-selected | #fde6e5 | |
--hop-status-negative-surface-strong | status-negative-strong | #ff8e8e | |
--hop-status-negative-text | status-negative | #ba2d2d | |
--hop-status-negative-text-disabled | status-negative-disabled | #ff8e8e | |
--hop-status-negative-text-hover | status-negative-hover | #952927 | |
--hop-status-negative-text-press | status-negative-press | #6c2320 | |
--hop-status-negative-text-selected | status-negative-selected | #952927 |
Inactive
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-inactive-border | status-inactive | #959593 | |
--hop-status-inactive-border-disabled | status-inactive-disabled | #ecebe8 | |
--hop-status-inactive-border-hover | status-inactive-hover | #777775 | |
--hop-status-inactive-border-press | status-inactive-press | #6c6c6b | |
--hop-status-inactive-border-selected | status-inactive-selected | #505050 | |
--hop-status-inactive-icon | status-inactive | #636362 | |
--hop-status-inactive-icon-disabled | status-inactive-disabled | #b3b3b1 | |
--hop-status-inactive-icon-hover | status-inactive-hover | #505050 | |
--hop-status-inactive-icon-press | status-inactive-press | #3c3c3c | |
--hop-status-inactive-icon-selected | status-inactive-selected | #505050 | |
--hop-status-inactive-surface | status-inactive | #ecebe8 | |
--hop-status-inactive-surface-disabled | status-inactive-disabled | #f8f6f3 | |
--hop-status-inactive-surface-hover | status-inactive-hover | #e0dfdd | |
--hop-status-inactive-surface-press | status-inactive-press | #ccccca | |
--hop-status-inactive-surface-selected | status-inactive-selected | #ecebe8 | |
--hop-status-inactive-surface-strong | status-inactive-strong | #ccccca | |
--hop-status-inactive-text | status-inactive | #636362 | |
--hop-status-inactive-text-disabled | status-inactive-disabled | #b3b3b1 | |
--hop-status-inactive-text-hover | status-inactive-hover | #505050 | |
--hop-status-inactive-text-press | status-inactive-press | #3c3c3c | |
--hop-status-inactive-text-selected | status-inactive-selected | #505050 |
Option 1
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-option1-border | status-option1 | #5d9acd | |
--hop-status-option1-border-disabled | status-option1-disabled | #d9efff | |
--hop-status-option1-border-hover | status-option1-hover | #3a7bb2 | |
--hop-status-option1-border-press | status-option1-press | #2e70a8 | |
--hop-status-option1-border-selected | status-option1-selected | #0a538b | |
--hop-status-option1-icon | status-option1 | #23669f | |
--hop-status-option1-icon-disabled | status-option1-disabled | #81b9e4 | |
--hop-status-option1-icon-hover | status-option1-hover | #0a538b | |
--hop-status-option1-icon-press | status-option1-press | #003d70 | |
--hop-status-option1-icon-selected | status-option1-selected | #0a538b | |
--hop-status-option1-surface | status-option1 | #d9efff | |
--hop-status-option1-surface-disabled | status-option1-disabled | #f0f8ff | |
--hop-status-option1-surface-hover | status-option1-hover | #bae6ff | |
--hop-status-option1-surface-press | status-option1-press | #9fd2f7 | |
--hop-status-option1-surface-selected | status-option1-selected | #d9efff | |
--hop-status-option1-surface-strong | status-option1-strong | #81b9e4 | |
--hop-status-option1-text | status-option1 | #23669f | |
--hop-status-option1-text-disabled | status-option1-disabled | #81b9e4 | |
--hop-status-option1-text-hover | status-option1-hover | #0a538b | |
--hop-status-option1-text-press | status-option1-press | #003d70 | |
--hop-status-option1-text-selected | status-option1-selected | #0a538b |
Option 2
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-option2-border | status-option2 | #8d91dc | |
--hop-status-option2-border-disabled | status-option2-disabled | #eae9fb | |
--hop-status-option2-border-hover | status-option2-hover | #6b6ecc | |
--hop-status-option2-border-press | status-option2-press | #5f61c5 | |
--hop-status-option2-border-selected | status-option2-selected | #433fac | |
--hop-status-option2-icon | status-option2 | #5454be | |
--hop-status-option2-icon-disabled | status-option2-disabled | #aeb3e8 | |
--hop-status-option2-icon-hover | status-option2-hover | #433fac | |
--hop-status-option2-icon-press | status-option2-press | #322b8d | |
--hop-status-option2-icon-selected | status-option2-selected | #433fac | |
--hop-status-option2-surface | status-option2 | #eae9fb | |
--hop-status-option2-surface-disabled | status-option2-disabled | #f6f5ff | |
--hop-status-option2-surface-hover | status-option2-hover | #ddddf7 | |
--hop-status-option2-surface-press | status-option2-press | #c8caf0 | |
--hop-status-option2-surface-selected | status-option2-selected | #eae9fb | |
--hop-status-option2-surface-strong | status-option2-strong | #aeb3e8 | |
--hop-status-option2-text | status-option2 | #5454be | |
--hop-status-option2-text-disabled | status-option2-disabled | #aeb3e8 | |
--hop-status-option2-text-hover | status-option2-hover | #433fac | |
--hop-status-option2-text-press | status-option2-press | #322b8d | |
--hop-status-option2-text-selected | status-option2-selected | #433fac |
Option 3
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-option3-border | status-option3 | #5da18c | |
--hop-status-option3-border-disabled | status-option3-disabled | #cff4ef | |
--hop-status-option3-border-hover | status-option3-hover | #38836a | |
--hop-status-option3-border-press | status-option3-press | #2b795e | |
--hop-status-option3-border-selected | status-option3-selected | #cff4ef | |
--hop-status-option3-icon | status-option3 | #206f54 | |
--hop-status-option3-icon-disabled | status-option3-disabled | #83beaf | |
--hop-status-option3-icon-hover | status-option3-hover | #055c41 | |
--hop-status-option3-icon-press | status-option3-press | #00452d | |
--hop-status-option3-icon-selected | status-option3-selected | #055c41 | |
--hop-status-option3-surface | status-option3 | #cff4ef | |
--hop-status-option3-surface-disabled | status-option3-disabled | #ddfdf9 | |
--hop-status-option3-surface-hover | status-option3-hover | #bde8e1 | |
--hop-status-option3-surface-press | status-option3-press | #a3d6cb | |
--hop-status-option3-surface-selected | status-option3-selected | #055c41 | |
--hop-status-option3-surface-strong | status-option3-strong | #83beaf | |
--hop-status-option3-text | status-option3 | #206f54 | |
--hop-status-option3-text-disabled | status-option3-disabled | #83beaf | |
--hop-status-option3-text-hover | status-option3-hover | #055c41 | |
--hop-status-option3-text-press | status-option3-press | #00452d | |
--hop-status-option3-text-selected | status-option3-selected | #055c41 |
Option 4
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-option4-border | status-option4 | #7c9aa3 | |
--hop-status-option4-border-disabled | status-option4-disabled | #e1eef1 | |
--hop-status-option4-border-hover | status-option4-hover | #5e7b84 | |
--hop-status-option4-border-press | status-option4-press | #557079 | |
--hop-status-option4-border-selected | status-option4-selected | #40535a | |
--hop-status-option4-icon | status-option4 | #4e6770 | |
--hop-status-option4-icon-disabled | status-option4-disabled | #9cb7be | |
--hop-status-option4-icon-hover | status-option4-hover | #40535a | |
--hop-status-option4-icon-press | status-option4-press | #313e43 | |
--hop-status-option4-icon-selected | status-option4-selected | #40535a | |
--hop-status-option4-surface | status-option4 | #e1eef1 | |
--hop-status-option4-surface-disabled | status-option4-disabled | #f2f8fa | |
--hop-status-option4-surface-hover | status-option4-hover | #d2e3e7 | |
--hop-status-option4-surface-press | status-option4-press | #bad0d5 | |
--hop-status-option4-surface-selected | status-option4-selected | #e1eef1 | |
--hop-status-option4-surface-strong | status-option4-strong | #9cb7be | |
--hop-status-option4-text | status-option4 | #4e6770 | |
--hop-status-option4-text-disabled | status-option4-disabled | #9cb7be | |
--hop-status-option4-text-hover | status-option4-hover | #40535a | |
--hop-status-option4-text-press | status-option4-press | #313e43 | |
--hop-status-option4-text-selected | status-option4-selected | #40535a |
Option 5
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-option5-border | status-option5 | #a19382 | |
--hop-status-option5-border-disabled | status-option5-disabled | #f0eae3 | |
--hop-status-option5-border-hover | status-option5-hover | #837463 | |
--hop-status-option5-border-press | status-option5-press | #776a59 | |
--hop-status-option5-border-selected | status-option5-selected | #594f41 | |
--hop-status-option5-icon | status-option5 | #6e6151 | |
--hop-status-option5-icon-disabled | status-option5-disabled | #bdb1a3 | |
--hop-status-option5-icon-hover | status-option5-hover | #594f41 | |
--hop-status-option5-icon-press | status-option5-press | #433b31 | |
--hop-status-option5-icon-selected | status-option5-selected | #594f41 | |
--hop-status-option5-surface | status-option5 | #f0eae3 | |
--hop-status-option5-surface-disabled | status-option5-disabled | #fef6ef | |
--hop-status-option5-surface-hover | status-option5-hover | #e5ded6 | |
--hop-status-option5-surface-press | status-option5-press | #d4cbc0 | |
--hop-status-option5-surface-selected | status-option5-selected | #f0eae3 | |
--hop-status-option5-surface-strong | status-option5-strong | #bdb1a3 | |
--hop-status-option5-text | status-option5 | #6e6151 | |
--hop-status-option5-text-disabled | status-option5-disabled | #bdb1a3 | |
--hop-status-option5-text-hover | status-option5-hover | #594f41 | |
--hop-status-option5-text-press | status-option5-press | #433b31 | |
--hop-status-option5-text-selected | status-option5-selected | #594f41 |
Option 6
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-option6-border | status-option6 | #c28b12 | |
--hop-status-option6-border-disabled | status-option6-disabled | #fff2b8 | |
--hop-status-option6-border-hover | status-option6-hover | #996f08 | |
--hop-status-option6-border-press | status-option6-press | #8b6609 | |
--hop-status-option6-border-selected | status-option6-selected | #654c0d | |
--hop-status-option6-icon | status-option6 | #7e5e0a | |
--hop-status-option6-icon-disabled | status-option6-disabled | #e2a934 | |
--hop-status-option6-icon-hover | status-option6-hover | #654c0d | |
--hop-status-option6-icon-press | status-option6-press | #4b390f | |
--hop-status-option6-icon-selected | status-option6-selected | #654c0d | |
--hop-status-option6-surface | status-option6 | #fff8d6 | |
--hop-status-option6-surface-disabled | status-option6-disabled | #fff8d6 | |
--hop-status-option6-surface-hover | status-option6-hover | #fff2b8 | |
--hop-status-option6-surface-press | status-option6-press | #eac96d | |
--hop-status-option6-surface-selected | status-option6-selected | #fff2b8 | |
--hop-status-option6-surface-strong | status-option6-strong | #e2a934 | |
--hop-status-option6-text | status-option6 | #7e5e0a | |
--hop-status-option6-text-disabled | status-option6-disabled | #e2a934 | |
--hop-status-option6-text-hover | status-option6-hover | #654c0d | |
--hop-status-option6-text-press | status-option6-press | #4b390f | |
--hop-status-option6-text-selected | status-option6-selected | #654c0d |
Data Visualization
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-dataviz-unavailable | dataviz_unavailable | #e0dfdd | |
--hop-dataviz-unavailable-weak | dataviz_unavailable-weak | #ecebe8 | |
--hop-dataviz-unavailable-strong | dataviz_unavailable-strong | #ccccca | |
--hop-dataviz-text-onlight | dataviz_onlight | #3c3c3c | |