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 | #996f08 | |
--hop-upsell-border-disabled | upsell-disabled | #f7e694 | |
--hop-upsell-border-press | upsell-press | #c28b12 | |
--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 | #c28b12 | |
--hop-upsell-icon-weak-hover | upsell-weak-hover | #8b6609 | |
--hop-upsell-icon-weak-press | upsell-weak-press | #7e5e0a | |
--hop-upsell-surface | upsell | #fff8d6 | |
--hop-upsell-surface-selected | upsell-selected | #fff2b8 | |
--hop-upsell-surface-disabled | upsell-disabled | #fff8d6 | |
--hop-upsell-surface-hover | upsell-hover | #fff2b8 | |
--hop-upsell-surface-press | upsell-press | #f7e694 | |
--hop-upsell-surface-weak | upsell-weak | #f7e694 | |
--hop-upsell-surface-weak-hover | upsell-weak-hover | #eac96d | |
--hop-upsell-surface-weak-press | upsell-weak-press | #e2a934 | |
--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 | |
--hop-dataviz-text-ondark | dataviz_ondark | #ffffff |
Monochromatic - Primary
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-dataviz-monochromatic-primary-25 | dataviz_monochromatic-primary-25 | #f5f6ff | |
--hop-dataviz-monochromatic-primary-50 | dataviz_monochromatic-primary-50 | #e6ebff | |
--hop-dataviz-monochromatic-primary-75 | dataviz_monochromatic-primary-75 | #d6e0ff | |
--hop-dataviz-monochromatic-primary-100 | dataviz_monochromatic-primary-100 | #b9cbff | |
--hop-dataviz-monochromatic-primary-200 | dataviz_monochromatic-primary-200 | #95b1ff | |
--hop-dataviz-monochromatic-primary-300 | dataviz_monochromatic-primary-300 | #6c8ffd | |
--hop-dataviz-monochromatic-primary-400 | dataviz_monochromatic-primary-400 | #4767fe | |
--hop-dataviz-monochromatic-primary-500 | dataviz_monochromatic-primary-500 | #3b57ff | |
--hop-dataviz-monochromatic-primary-600 | dataviz_monochromatic-primary-600 | #2a43e8 | |
--hop-dataviz-monochromatic-primary-700 | dataviz_monochromatic-primary-700 | #2040c7 | |
--hop-dataviz-monochromatic-primary-800 | dataviz_monochromatic-primary-800 | #1b3587 | |
--hop-dataviz-monochromatic-primary-900 | dataviz_monochromatic-primary-900 | #152450 | |
--hop-dataviz-monochromatic-primary-25-hover | dataviz_monochromatic-primary-25-hover | #e6ebff | |
--hop-dataviz-monochromatic-primary-50-hover | dataviz_monochromatic-primary-50-hover | #d6e0ff | |
--hop-dataviz-monochromatic-primary-75-hover | dataviz_monochromatic-primary-75-hover | #b9cbff | |
--hop-dataviz-monochromatic-primary-100-hover | dataviz_monochromatic-primary-100-hover | #95b1ff | |
--hop-dataviz-monochromatic-primary-200-hover | dataviz_monochromatic-primary-200-hover | #6c8ffd | |
--hop-dataviz-monochromatic-primary-300-hover | dataviz_monochromatic-primary-300-hover | #4767fe | |
--hop-dataviz-monochromatic-primary-400-hover | dataviz_monochromatic-primary-400-hover | #3b57ff | |
--hop-dataviz-monochromatic-primary-500-hover | dataviz_monochromatic-primary-500-hover | #2a43e8 | |
--hop-dataviz-monochromatic-primary-600-hover | dataviz_monochromatic-primary-600-hover | #2040c7 | |
--hop-dataviz-monochromatic-primary-700-hover | dataviz_monochromatic-primary-700-hover | #1b3587 | |
--hop-dataviz-monochromatic-primary-800-hover | dataviz_monochromatic-primary-800-hover | #152450 | |
--hop-dataviz-monochromatic-primary-900-hover | dataviz_monochromatic-primary-900-hover | #0b173a |
Monochromatic - Positive
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-dataviz-monochromatic-positive-25 | dataviz_monochromatic-positive-25 | #f4f9e9 | |
--hop-dataviz-monochromatic-positive-50 | dataviz_monochromatic-positive-50 | #e3f3b9 | |
--hop-dataviz-monochromatic-positive-75 | dataviz_monochromatic-positive-75 | #cde8ac | |
--hop-dataviz-monochromatic-positive-100 | dataviz_monochromatic-positive-100 | #aad89d | |
--hop-dataviz-monochromatic-positive-200 | dataviz_monochromatic-positive-200 | #7dc291 | |
--hop-dataviz-monochromatic-positive-300 | dataviz_monochromatic-positive-300 | #47a584 | |
--hop-dataviz-monochromatic-positive-400 | dataviz_monochromatic-positive-400 | #188a71 | |
--hop-dataviz-monochromatic-positive-500 | dataviz_monochromatic-positive-500 | #0c796b | |
--hop-dataviz-monochromatic-positive-600 | dataviz_monochromatic-positive-600 | #0a6f64 | |
--hop-dataviz-monochromatic-positive-700 | dataviz_monochromatic-positive-700 | #115a52 | |
--hop-dataviz-monochromatic-positive-800 | dataviz_monochromatic-positive-800 | #16433d | |
--hop-dataviz-monochromatic-positive-900 | dataviz_monochromatic-positive-900 | #132a27 | |
--hop-dataviz-monochromatic-positive-25-hover | dataviz_monochromatic-positive-25-hover | #e3f3b9 | |
--hop-dataviz-monochromatic-positive-50-hover | dataviz_monochromatic-positive-50-hover | #cde8ac | |
--hop-dataviz-monochromatic-positive-75-hover | dataviz_monochromatic-positive-75-hover | #aad89d | |
--hop-dataviz-monochromatic-positive-100-hover | dataviz_monochromatic-positive-100-hover | #7dc291 | |
--hop-dataviz-monochromatic-positive-200-hover | dataviz_monochromatic-positive-200-hover | #47a584 | |
--hop-dataviz-monochromatic-positive-300-hover | dataviz_monochromatic-positive-300-hover | #188a71 | |
--hop-dataviz-monochromatic-positive-400-hover | dataviz_monochromatic-positive-400-hover | #0c796b | |
--hop-dataviz-monochromatic-positive-500-hover | dataviz_monochromatic-positive-500-hover | #0a6f64 | |
--hop-dataviz-monochromatic-positive-600-hover | dataviz_monochromatic-positive-600-hover | #115a52 | |
--hop-dataviz-monochromatic-positive-700-hover | dataviz_monochromatic-positive-700-hover | #16433d | |
--hop-dataviz-monochromatic-positive-800-hover | dataviz_monochromatic-positive-800-hover | #132a27 | |
--hop-dataviz-monochromatic-positive-900-hover | dataviz_monochromatic-positive-900-hover | #0a1716 |
Monochromatic - Negative
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-dataviz-monochromatic-negative-25 | dataviz_monochromatic-negative-25 | #fdf6f6 | |
--hop-dataviz-monochromatic-negative-50 | dataviz_monochromatic-negative-50 | #fde6e5 | |
--hop-dataviz-monochromatic-negative-75 | dataviz_monochromatic-negative-75 | #ffd6d3 | |
--hop-dataviz-monochromatic-negative-100 | dataviz_monochromatic-negative-100 | #ffbcb7 | |
--hop-dataviz-monochromatic-negative-200 | dataviz_monochromatic-negative-200 | #ff8e8e | |
--hop-dataviz-monochromatic-negative-300 | dataviz_monochromatic-negative-300 | #f56263 | |
--hop-dataviz-monochromatic-negative-400 | dataviz_monochromatic-negative-400 | #df3236 | |
--hop-dataviz-monochromatic-negative-500 | dataviz_monochromatic-negative-500 | #cb2e31 | |
--hop-dataviz-monochromatic-negative-600 | dataviz_monochromatic-negative-600 | #ba2d2d | |
--hop-dataviz-monochromatic-negative-700 | dataviz_monochromatic-negative-700 | #952927 | |
--hop-dataviz-monochromatic-negative-800 | dataviz_monochromatic-negative-800 | #6c2320 | |
--hop-dataviz-monochromatic-negative-900 | dataviz_monochromatic-negative-900 | #431a17 | |
--hop-dataviz-monochromatic-negative-25-hover | dataviz_monochromatic-negative-25-hover | #fde6e5 | |
--hop-dataviz-monochromatic-negative-50-hover | dataviz_monochromatic-negative-50-hover | #ffd6d3 | |
--hop-dataviz-monochromatic-negative-75-hover | dataviz_monochromatic-negative-75-hover | #ffbcb7 | |
--hop-dataviz-monochromatic-negative-100-hover | dataviz_monochromatic-negative-100-hover | #ff8e8e | |
--hop-dataviz-monochromatic-negative-200-hover | dataviz_monochromatic-negative-200-hover | #f56263 | |
--hop-dataviz-monochromatic-negative-300-hover | dataviz_monochromatic-negative-300-hover | #df3236 | |
--hop-dataviz-monochromatic-negative-400-hover | dataviz_monochromatic-negative-400-hover | #cb2e31 | |
--hop-dataviz-monochromatic-negative-500-hover | dataviz_monochromatic-negative-500-hover | #ba2d2d | |
--hop-dataviz-monochromatic-negative-600-hover | dataviz_monochromatic-negative-600-hover | #952927 | |
--hop-dataviz-monochromatic-negative-700-hover | dataviz_monochromatic-negative-700-hover | #6c2320 | |
--hop-dataviz-monochromatic-negative-800-hover | dataviz_monochromatic-negative-800-hover | #431a17 | |
--hop-dataviz-monochromatic-negative-900-hover | dataviz_monochromatic-negative-900-hover | #2d100d |
Diverging Sequence 1
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-dataviz-diverging-sequence-1-positive9 | dataviz_diverging-sequence-1-positive9 | #16433d | |
--hop-dataviz-diverging-sequence-1-positive9-hover | dataviz_diverging-sequence-1-positive9-hover | #132a27 | |
--hop-dataviz-diverging-sequence-1-positive8 | dataviz_diverging-sequence-1-positive8 | #115a52 | |
--hop-dataviz-diverging-sequence-1-positive8-hover | dataviz_diverging-sequence-1-positive8-hover | #16433d | |
--hop-dataviz-diverging-sequence-1-positive7 | dataviz_diverging-sequence-1-positive7 | #0a6f64 | |
--hop-dataviz-diverging-sequence-1-positive7-hover | dataviz_diverging-sequence-1-positive7-hover | #115a52 | |
--hop-dataviz-diverging-sequence-1-positive6 | dataviz_diverging-sequence-1-positive6 | #0c796b | |
--hop-dataviz-diverging-sequence-1-positive6-hover | dataviz_diverging-sequence-1-positive6-hover | #0a6f64 | |
--hop-dataviz-diverging-sequence-1-positive5 | dataviz_diverging-sequence-1-positive5 | #188a71 | |
--hop-dataviz-diverging-sequence-1-positive5-hover | dataviz_diverging-sequence-1-positive5-hover | #0c796b | |
--hop-dataviz-diverging-sequence-1-positive4 | dataviz_diverging-sequence-1-positive4 | #47a584 | |
--hop-dataviz-diverging-sequence-1-positive-4-hover | dataviz_diverging-sequence-1-positive-4-hover | #188a71 | |
--hop-dataviz-diverging-sequence-1-positive3 | dataviz_diverging-sequence-1-positive3 | #7dc291 | |
--hop-dataviz-diverging-sequence-1-positive3-hover | dataviz_diverging-sequence-1-positive3-hover | #47a584 | |
--hop-dataviz-diverging-sequence-1-positive2 | dataviz_diverging-sequence-1-positive2 | #aad89d | |
--hop-dataviz-diverging-sequence-1-positive2-hover | dataviz_diverging-sequence-1-positive2-hover | #7dc291 | |
--hop-dataviz-diverging-sequence-1-positive1 | dataviz_diverging-sequence-1-positive1 | #cde8ac | |
--hop-dataviz-diverging-sequence-1-positive1-hover | dataviz_diverging-sequence-1-positive1-hover | #aad89d | |
--hop-dataviz-diverging-sequence-1-neutral | dataviz_diverging-sequence-1-neutral | #f7e694 | |
--hop-dataviz-diverging-sequence-1-neutral-hover | dataviz_diverging-sequence-1-neutral-hover | #eac96d | |
--hop-dataviz-diverging-sequence-1-negative1 | dataviz_diverging-sequence-1-negative1 | #ffd8be | |
--hop-dataviz-diverging-sequence-1-negative1-hover | dataviz_diverging-sequence-1-negative1-hover | #ffbcb7 | |
--hop-dataviz-diverging-sequence-1-negative2 | dataviz_diverging-sequence-1-negative2 | #ffbcb7 | |
--hop-dataviz-diverging-sequence-1-negative2-hover | dataviz_diverging-sequence-1-negative2-hover | #ff8e8e | |
--hop-dataviz-diverging-sequence-1-negative3 | dataviz_diverging-sequence-1-negative3 | #ff8e8e | |
--hop-dataviz-diverging-sequence-1-negative3-hover | dataviz_diverging-sequence-1-negative3-hover | #f56263 | |
--hop-dataviz-diverging-sequence-1-negative4 | dataviz_diverging-sequence-1-negative4 | #f56263 | |
--hop-dataviz-diverging-sequence-1-negative4-hover | dataviz_diverging-sequence-1-negative4-hover | #df3236 | |
--hop-dataviz-diverging-sequence-1-negative5 | dataviz_diverging-sequence-1-negative5 | #df3236 | |
--hop-dataviz-diverging-sequence-1-negative5-hover | dataviz_diverging-sequence-1-negative5-hover | #cb2e31 | |
--hop-dataviz-diverging-sequence-1-negative6 | dataviz_diverging-sequence-1-negative6 | #cb2e31 | |
--hop-dataviz-diverging-sequence-1-negative6-hover | dataviz_diverging-sequence-1-negative6-hover | #ba2d2d | |
--hop-dataviz-diverging-sequence-1-negative7 | dataviz_diverging-sequence-1-negative7 | #ba2d2d | |
--hop-dataviz-diverging-sequence-1-negative7-hover | dataviz_diverging-sequence-1-negative7-hover | #952927 | |
--hop-dataviz-diverging-sequence-1-negative8 | dataviz_diverging-sequence-1-negative8 | #952927 | |
--hop-dataviz-diverging-sequence-1-negative8-hover | dataviz_diverging-sequence-1-negative8-hover | #6c2320 | |
--hop-dataviz-diverging-sequence-1-negative9 | dataviz_diverging-sequence-1-negative9 | #6c2320 | |
--hop-dataviz-diverging-sequence-1-negative9-hover | dataviz_diverging-sequence-1-negative9-hover | #431a17 |
Diverging Sequence 2
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-dataviz-diverging-sequence-2-positive10 | dataviz_diverging-sequence-2-positive10 | #16433d | |
--hop-dataviz-diverging-sequence-2-positive10-hover | dataviz_diverging-sequence-2-positive10-hover | #132a27 | |
--hop-dataviz-diverging-sequence-2-positive9 | dataviz_diverging-sequence-2-positive9 | #115a52 | |
--hop-dataviz-diverging-sequence-2-positive9-hover | dataviz_diverging-sequence-2-positive9-hover | #16433d | |
--hop-dataviz-diverging-sequence-2-positive8 | dataviz_diverging-sequence-2-positive8 | #0a6f64 | |
--hop-dataviz-diverging-sequence-2-positive8-hover | dataviz_diverging-sequence-2-positive8-hover | #115a52 | |
--hop-dataviz-diverging-sequence-2-positive7 | dataviz_diverging-sequence-2-positive7 | #0c796b | |
--hop-dataviz-diverging-sequence-2-positive7-hover | dataviz_diverging-sequence-2-positive7-hover | #0a6f64 | |
--hop-dataviz-diverging-sequence-2-positive6 | dataviz_diverging-sequence-2-positive6 | #188a71 | |
--hop-dataviz-diverging-sequence-2-positive6-hover | dataviz_diverging-sequence-2-positive6-hover | #0c796b | |
--hop-dataviz-diverging-sequence-2-positive5 | dataviz_diverging-sequence-2-positive5 | #47a584 | |
--hop-dataviz-diverging-sequence-2-positive5-hover | dataviz_diverging-sequence-2-positive5-hover | #188a71 | |
--hop-dataviz-diverging-sequence-2-positive4 | dataviz_diverging-sequence-2-positive4 | #7dc291 | |
--hop-dataviz-diverging-sequence-2-positive4-hover | dataviz_diverging-sequence-2-positive4-hover | #47a584 | |
--hop-dataviz-diverging-sequence-2-positive3 | dataviz_diverging-sequence-2-positive3 | #aad89d | |
--hop-dataviz-diverging-sequence-2-positive3-hover | dataviz_diverging-sequence-2-positive3-hover | #7dc291 | |
--hop-dataviz-diverging-sequence-2-positive2 | dataviz_diverging-sequence-2-positive2 | #cde8ac | |
--hop-dataviz-diverging-sequence-2-positive2-hover | dataviz_diverging-sequence-2-positive2-hover | #aad89d | |
--hop-dataviz-diverging-sequence-2-positive1 | dataviz_diverging-sequence-2-positive1 | #e3f3b9 | |
--hop-dataviz-diverging-sequence-2-positive1-hover | dataviz_diverging-sequence-2-positive1-hover | #cde8ac | |
--hop-dataviz-diverging-sequence-2-negative1 | dataviz_diverging-sequence-2-negative1 | #fde6e5 | |
--hop-dataviz-diverging-sequence-2-negative1-hover | dataviz_diverging-sequence-2-negative1-hover | #ffd6d3 | |
--hop-dataviz-diverging-sequence-2-negative2 | dataviz_diverging-sequence-2-negative2 | #ffd6d3 | |
--hop-dataviz-diverging-sequence-2-negative2-hover | dataviz_diverging-sequence-2-negative2-hover | #ffbcb7 | |
--hop-dataviz-diverging-sequence-2-negative3 | dataviz_diverging-sequence-2-negative3 | #ffbcb7 | |
--hop-dataviz-diverging-sequence-2-negative3-hover | dataviz_diverging-sequence-2-negative3-hover | #ff8e8e | |
--hop-dataviz-diverging-sequence-2-negative4 | dataviz_diverging-sequence-2-negative4 | #ff8e8e | |
--hop-dataviz-diverging-sequence-2-negative4-hover | dataviz_diverging-sequence-2-negative4-hover | #f56263 | |
--hop-dataviz-diverging-sequence-2-negative5 | dataviz_diverging-sequence-2-negative5 | #f56263 | |
--hop-dataviz-diverging-sequence-2-negative5-hover | dataviz_diverging-sequence-2-negative5-hover | #df3236 | |
--hop-dataviz-diverging-sequence-2-negative6 | dataviz_diverging-sequence-2-negative6 | #df3236 | |
--hop-dataviz-diverging-sequence-2-negative6-hover | dataviz_diverging-sequence-2-negative6-hover | #cb2e31 | |
--hop-dataviz-diverging-sequence-2-negative7 | dataviz_diverging-sequence-2-negative7 | #cb2e31 | |
--hop-dataviz-diverging-sequence-2-negative7-hover | dataviz_diverging-sequence-2-negative7-hover | #ba2d2d | |
--hop-dataviz-diverging-sequence-2-negative8 | dataviz_diverging-sequence-2-negative8 | #ba2d2d | |
--hop-dataviz-diverging-sequence-2-negative8-hover | dataviz_diverging-sequence-2-negative8-hover | #952927 | |
--hop-dataviz-diverging-sequence-2-negative9 | dataviz_diverging-sequence-2-negative9 | #952927 | |
--hop-dataviz-diverging-sequence-2-negative9-hover | dataviz_diverging-sequence-2-negative9-hover | #6c2320 | |
--hop-dataviz-diverging-sequence-2-negative10 | dataviz_diverging-sequence-2-negative10 | #6c2320 | |
--hop-dataviz-diverging-sequence-2-negative10-hover | dataviz_diverging-sequence-2-negative10-hover | #431a17 |
Categorical - Sequences
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-dataviz-categorical-sequence-category1 | dataviz_categorical-sequence-category1 | #c7ebff | |
--hop-dataviz-categorical-sequence-category1-hover | dataviz_categorical-sequence-category1-hover | #ade2ff | |
--hop-dataviz-categorical-sequence-category2 | dataviz_categorical-sequence-category2 | #ecd599 | |
--hop-dataviz-categorical-sequence-category2-hover | dataviz_categorical-sequence-category2-hover | #e6c675 | |
--hop-dataviz-categorical-sequence-category3 | dataviz_categorical-sequence-category3 | #d2cdf8 | |
--hop-dataviz-categorical-sequence-category3-hover | dataviz_categorical-sequence-category3-hover | #bfb8f5 | |
--hop-dataviz-categorical-sequence-category4 | dataviz_categorical-sequence-category4 | #b6bead | |
--hop-dataviz-categorical-sequence-category4-hover | dataviz_categorical-sequence-category4-hover | #a4ae98 | |
--hop-dataviz-categorical-sequence-category5 | dataviz_categorical-sequence-category5 | #fbbdcf | |
--hop-dataviz-categorical-sequence-category5-hover | dataviz_categorical-sequence-category5-hover | #f99fb8 | |
--hop-dataviz-categorical-sequence-category6 | dataviz_categorical-sequence-category6 | #bfdca9 | |
--hop-dataviz-categorical-sequence-category6-hover | dataviz_categorical-sequence-category6-hover | #a9d08b | |
--hop-dataviz-categorical-sequence-category7 | dataviz_categorical-sequence-category7 | #fbe997 | |
--hop-dataviz-categorical-sequence-category7-hover | dataviz_categorical-sequence-category7-hover | #fae275 | |
--hop-dataviz-categorical-sequence-category8 | dataviz_categorical-sequence-category8 | #e8ddd0 | |
--hop-dataviz-categorical-sequence-category8-hover | dataviz_categorical-sequence-category8-hover | #ddcebb | |
--hop-dataviz-categorical-sequence-category9 | dataviz_categorical-sequence-category9 | #a7e6dc | |
--hop-dataviz-categorical-sequence-category9-hover | dataviz_categorical-sequence-category9-hover | #90e0d2 | |
--hop-dataviz-categorical-sequence-category10 | dataviz_categorical-sequence-category10 | #aecdd5 | |
--hop-dataviz-categorical-sequence-category10-hover | dataviz_categorical-sequence-category10-hover | #93bdc8 | |
--hop-dataviz-categorical-sequence-category11 | dataviz_categorical-sequence-category11 | #ffbf92 | |
--hop-dataviz-categorical-sequence-category11-hover | dataviz_categorical-sequence-category11-hover | #ffac70 | |
--hop-dataviz-categorical-sequence-category12 | dataviz_categorical-sequence-category12 | #a0b8fa | |
--hop-dataviz-categorical-sequence-category12-hover | dataviz_categorical-sequence-category12-hover | #779af8 | |
--hop-dataviz-categorical-sequence-category13 | dataviz_categorical-sequence-category13 | #69bfa0 | |
--hop-dataviz-categorical-sequence-category13-hover | dataviz_categorical-sequence-category13-hover | #54b692 |
Categorical - 2 Color Groups
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-dataviz-categorical-2colorgroup-option6-category2 | dataviz_categorical-2colorgroup-option6-category2 | #69bfa0 | |
--hop-dataviz-categorical-2colorgroup-option6-category1 | dataviz_categorical-2colorgroup-option6-category1 | #ffbf92 | |
--hop-dataviz-categorical-2colorgroup-option5-category2 | dataviz_categorical-2colorgroup-option5-category2 | #a0b8fa | |
--hop-dataviz-categorical-2colorgroup-option5-category1 | dataviz_categorical-2colorgroup-option5-category1 | #a7e6dc | |
--hop-dataviz-categorical-2colorgroup-option4-category2 | dataviz_categorical-2colorgroup-option4-category2 | #6c8ffd | |
--hop-dataviz-categorical-2colorgroup-option4-category1 | dataviz_categorical-2colorgroup-option4-category1 | #bfdca9 | |
--hop-dataviz-categorical-2colorgroup-option3-category2 | dataviz_categorical-2colorgroup-option3-category2 | #ff9b3f | |
--hop-dataviz-categorical-2colorgroup-option3-category1 | dataviz_categorical-2colorgroup-option3-category1 | #2f48ff | |
--hop-dataviz-categorical-2colorgroup-option2-category2 | dataviz_categorical-2colorgroup-option2-category2 | #fbe997 | |
--hop-dataviz-categorical-2colorgroup-option2-category1 | dataviz_categorical-2colorgroup-option2-category1 | #fbbdcf | |
--hop-dataviz-categorical-2colorgroup-option1-category2 | dataviz_categorical-2colorgroup-option1-category2 | #c7ebff | |
--hop-dataviz-categorical-2colorgroup-option1-category1 | dataviz_categorical-2colorgroup-option1-category1 | #b6bead |
Categorical - 3 Color Groups
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-dataviz-categorical-3colorgroup-option1-category1 | dataviz_categorical-3colorgroup-option1-category1 | #b6bead | |
--hop-dataviz-categorical-3colorgroup-option1-category2 | dataviz_categorical-3colorgroup-option1-category2 | #d2cdf8 | |
--hop-dataviz-categorical-3colorgroup-option1-category3 | dataviz_categorical-3colorgroup-option1-category3 | #bfdca9 | |
--hop-dataviz-categorical-3colorgroup-option2-category1 | dataviz_categorical-3colorgroup-option2-category1 | #ecd599 | |
--hop-dataviz-categorical-3colorgroup-option2-category2 | dataviz_categorical-3colorgroup-option2-category2 | #a7e6dc | |
--hop-dataviz-categorical-3colorgroup-option2-category3 | dataviz_categorical-3colorgroup-option2-category3 | #69bfa0 | |
--hop-dataviz-categorical-3colorgroup-option3-category1 | dataviz_categorical-3colorgroup-option3-category1 | #69bfa0 | |
--hop-dataviz-categorical-3colorgroup-option3-category2 | dataviz_categorical-3colorgroup-option3-category2 | #fbe997 | |
--hop-dataviz-categorical-3colorgroup-option3-category3 | dataviz_categorical-3colorgroup-option3-category3 | #aecdd5 | |
--hop-dataviz-categorical-3colorgroup-option4-category1 | dataviz_categorical-3colorgroup-option4-category1 | #b6bead | |
--hop-dataviz-categorical-3colorgroup-option4-category2 | dataviz_categorical-3colorgroup-option4-category2 | #a0b8fa | |
--hop-dataviz-categorical-3colorgroup-option4-category3 | dataviz_categorical-3colorgroup-option4-category3 | #fbbdcf |
Categorical - 4 Color Groups
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-dataviz-categorical-4colorgroup-option1-category1 | dataviz_categorical-4colorgroup-option1-category1 | #b6bead | |
--hop-dataviz-categorical-4colorgroup-option1-category2 | dataviz_categorical-4colorgroup-option1-category2 | #d2cdf8 | |
--hop-dataviz-categorical-4colorgroup-option1-category3 | dataviz_categorical-4colorgroup-option1-category3 | #cde8ac | |
--hop-dataviz-categorical-4colorgroup-option1-category4 | dataviz_categorical-4colorgroup-option1-category4 | #fbbdcf | |
--hop-dataviz-categorical-4colorgroup-option2-category1 | dataviz_categorical-4colorgroup-option2-category1 | #b6bead | |
--hop-dataviz-categorical-4colorgroup-option2-category2 | dataviz_categorical-4colorgroup-option2-category2 | #c7ebff | |
--hop-dataviz-categorical-4colorgroup-option2-category3 | dataviz_categorical-4colorgroup-option2-category3 | #84d0b4 | |
--hop-dataviz-categorical-4colorgroup-option2-category4 | dataviz_categorical-4colorgroup-option2-category4 | #fbe997 | |
--hop-dataviz-categorical-4colorgroup-option3-category1 | dataviz_categorical-4colorgroup-option3-category1 | #ffbf92 | |
--hop-dataviz-categorical-4colorgroup-option3-category2 | dataviz_categorical-4colorgroup-option3-category2 | #b6bead | |
--hop-dataviz-categorical-4colorgroup-option3-category3 | dataviz_categorical-4colorgroup-option3-category3 | #2e70a8 | |
--hop-dataviz-categorical-4colorgroup-option3-category4 | dataviz_categorical-4colorgroup-option3-category4 | #ecd599 | |
--hop-dataviz-categorical-4colorgroup-option4-category1 | dataviz_categorical-4colorgroup-option4-category1 | #69bfa0 | |
--hop-dataviz-categorical-4colorgroup-option4-category2 | dataviz_categorical-4colorgroup-option4-category2 | #c7ebff | |
--hop-dataviz-categorical-4colorgroup-option4-category3 | dataviz_categorical-4colorgroup-option4-category3 | #fa4d59 | |
--hop-dataviz-categorical-4colorgroup-option4-category4 | dataviz_categorical-4colorgroup-option4-category4 | #d2cdf8 |
Categorical - 5 Color Groups
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-dataviz-categorical-5colorgroup-option1-category1 | dataviz_categorical-5colorgroup-option1-category1 | #b6bead | |
--hop-dataviz-categorical-5colorgroup-option1-category2 | dataviz_categorical-5colorgroup-option1-category2 | #ff9b3f | |
--hop-dataviz-categorical-5colorgroup-option1-category3 | dataviz_categorical-5colorgroup-option1-category3 | #bfdca9 | |
--hop-dataviz-categorical-5colorgroup-option1-category4 | dataviz_categorical-5colorgroup-option1-category4 | #ecd599 | |
--hop-dataviz-categorical-5colorgroup-option1-category5 | dataviz_categorical-5colorgroup-option1-category5 | #69bfa0 | |
--hop-dataviz-categorical-5colorgroup-option2-category1 | dataviz_categorical-5colorgroup-option2-category1 | #ff9b3f | |
--hop-dataviz-categorical-5colorgroup-option2-category2 | dataviz_categorical-5colorgroup-option2-category2 | #b6bead | |
--hop-dataviz-categorical-5colorgroup-option2-category3 | dataviz_categorical-5colorgroup-option2-category3 | #2e70a8 | |
--hop-dataviz-categorical-5colorgroup-option2-category4 | dataviz_categorical-5colorgroup-option2-category4 | #fbe997 | |
--hop-dataviz-categorical-5colorgroup-option2-category5 | dataviz_categorical-5colorgroup-option2-category5 | #c5bef6 | |
--hop-dataviz-categorical-5colorgroup-option3-category1 | dataviz_categorical-5colorgroup-option3-category1 | #d2cdf8 | |
--hop-dataviz-categorical-5colorgroup-option3-category2 | dataviz_categorical-5colorgroup-option3-category2 | #ecd599 | |
--hop-dataviz-categorical-5colorgroup-option3-category3 | dataviz_categorical-5colorgroup-option3-category3 | #aecdd5 | |
--hop-dataviz-categorical-5colorgroup-option3-category4 | dataviz_categorical-5colorgroup-option3-category4 | #b6bead | |
--hop-dataviz-categorical-5colorgroup-option3-category5 | dataviz_categorical-5colorgroup-option3-category5 | #ffbf92 | |
--hop-dataviz-categorical-5colorgroup-option4-category1 | dataviz_categorical-5colorgroup-option4-category1 | #69bfa0 | |
--hop-dataviz-categorical-5colorgroup-option4-category2 | dataviz_categorical-5colorgroup-option4-category2 | #c7ebff | |
--hop-dataviz-categorical-5colorgroup-option4-category3 | dataviz_categorical-5colorgroup-option4-category3 | #fa4d59 | |
--hop-dataviz-categorical-5colorgroup-option4-category4 | dataviz_categorical-5colorgroup-option4-category4 | #d2cdf8 | |
--hop-dataviz-categorical-5colorgroup-option4-category5 | dataviz_categorical-5colorgroup-option4-category5 | #b6bead |
Categorical - 6 Color Groups
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-dataviz-categorical-6colorgroup-option1-category1 | dataviz_categorical-6colorgroup-option1-category1 | #b6bead | |
--hop-dataviz-categorical-6colorgroup-option1-category2 | dataviz_categorical-6colorgroup-option1-category2 | #a0b8fa | |
--hop-dataviz-categorical-6colorgroup-option1-category3 | dataviz_categorical-6colorgroup-option1-category3 | #bfdca9 | |
--hop-dataviz-categorical-6colorgroup-option1-category4 | dataviz_categorical-6colorgroup-option1-category4 | #fa4d59 | |
--hop-dataviz-categorical-6colorgroup-option1-category5 | dataviz_categorical-6colorgroup-option1-category5 | #ecd599 | |
--hop-dataviz-categorical-6colorgroup-option1-category6 | dataviz_categorical-6colorgroup-option1-category6 | #69bfa0 | |
--hop-dataviz-categorical-6colorgroup-option2-category1 | dataviz_categorical-6colorgroup-option2-category1 | #2e70a8 | |
--hop-dataviz-categorical-6colorgroup-option2-category2 | dataviz_categorical-6colorgroup-option2-category2 | #fbe997 | |
--hop-dataviz-categorical-6colorgroup-option2-category3 | dataviz_categorical-6colorgroup-option2-category3 | #69bfa0 | |
--hop-dataviz-categorical-6colorgroup-option2-category4 | dataviz_categorical-6colorgroup-option2-category4 | #ff9b3f | |
--hop-dataviz-categorical-6colorgroup-option2-category5 | dataviz_categorical-6colorgroup-option2-category5 | #a7e6dc | |
--hop-dataviz-categorical-6colorgroup-option2-category6 | dataviz_categorical-6colorgroup-option2-category6 | #d2cdf8 | |
--hop-dataviz-categorical-6colorgroup-option3-category1 | dataviz_categorical-6colorgroup-option3-category1 | #b6bead | |
--hop-dataviz-categorical-6colorgroup-option3-category2 | dataviz_categorical-6colorgroup-option3-category2 | #aecdd5 | |
--hop-dataviz-categorical-6colorgroup-option3-category3 | dataviz_categorical-6colorgroup-option3-category3 | #e8ddd0 | |
--hop-dataviz-categorical-6colorgroup-option3-category4 | dataviz_categorical-6colorgroup-option3-category4 | #a7e6dc | |
--hop-dataviz-categorical-6colorgroup-option3-category5 | dataviz_categorical-6colorgroup-option3-category5 | #2e70a8 | |
--hop-dataviz-categorical-6colorgroup-option3-category6 | dataviz_categorical-6colorgroup-option3-category6 | #fbbdcf | |
--hop-dataviz-categorical-6colorgroup-option4-category1 | dataviz_categorical-6colorgroup-option4-category1 | #fbbdcf | |
--hop-dataviz-categorical-6colorgroup-option4-category2 | dataviz_categorical-6colorgroup-option4-category2 | #a0b8fa | |
--hop-dataviz-categorical-6colorgroup-option4-category3 | dataviz_categorical-6colorgroup-option4-category3 | #ffbf92 | |
--hop-dataviz-categorical-6colorgroup-option4-category4 | dataviz_categorical-6colorgroup-option4-category4 | #c7ebff | |
--hop-dataviz-categorical-6colorgroup-option4-category5 | dataviz_categorical-6colorgroup-option4-category5 | #bfdca9 | |
--hop-dataviz-categorical-6colorgroup-option4-category6 | dataviz_categorical-6colorgroup-option4-category6 | #fbe997 |
Dark Tokens
Neutral
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-neutral-border-active | neutral-active | #505050 | |
--hop-neutral-icon-active | neutral-active | #fef6ef | |
--hop-neutral-icon-weak-active | neutral-weak-active | #ecebe8 | |
--hop-neutral-surface-active | neutral-active | #505050 | |
--hop-neutral-surface-weak-active | neutral-weak-active | #636362 | |
--hop-neutral-text-active | neutral-active | #fef6ef | |
--hop-neutral-text-weak-active | neutral-weak-active | #ecebe8 | |
--hop-neutral-border | neutral | #6c6c6b | |
--hop-neutral-border-selected | neutral-selected | #fef6ef | |
--hop-neutral-border-disabled | neutral-disabled | #3c3c3c | |
--hop-neutral-border-hover | neutral-hover | #959593 | |
--hop-neutral-border-press | neutral-press | #b3b3b1 | |
--hop-neutral-border-strong | neutral-strong | #ffffff | |
--hop-neutral-border-strong-hover | neutral-strong-hover | #ffffff | |
--hop-neutral-border-weakest | neutral-weakest | #3c3c3c | |
--hop-neutral-border-weak | neutral-weak | #3c3c3c | |
--hop-neutral-icon | neutral | #f8f6f3 | |
--hop-neutral-icon-selected | neutral-selected | #292929 | |
--hop-neutral-icon-disabled | neutral-disabled | #6c6c6b | |
--hop-neutral-icon-hover | neutral-hover | #ecebe8 | |
--hop-neutral-icon-press | neutral-press | #fef6ef | |
--hop-neutral-icon-strong | neutral-strong | #292929 | |
--hop-neutral-icon-strong-hover | neutral-strong-hover | #292929 | |
--hop-neutral-icon-weak | neutral-weak | #b3b3b1 | |
--hop-neutral-icon-weak-hover | neutral-weak-hover | #e0dfdd | |
--hop-neutral-icon-weak-press | neutral-weak-press | #ecebe8 | |
--hop-neutral-icon-weak-selected | neutral-weak-selected | #e0dfdd | |
--hop-neutral-icon-weakest | neutral-weakest | #777775 | |
--hop-neutral-surface | neutral | #1d1d1c | |
--hop-neutral-surface-selected | neutral-selected | #fef6ef | |
--hop-neutral-surface-disabled | neutral-disabled | #505050 | |
--hop-neutral-surface-hover | neutral-hover | #3c3c3c | |
--hop-neutral-surface-press | neutral-press | #505050 | |
--hop-neutral-surface-strong | neutral-strong | #fef6ef | |
--hop-neutral-surface-weakest | neutral-weakest | #292929 | |
--hop-neutral-surface-weak | neutral-weak | #3c3c3c | |
--hop-neutral-surface-weak-selected | neutral-weak-selected | #3c3c3c | |
--hop-neutral-surface-weak-hover | neutral-weak-hover | #505050 | |
--hop-neutral-surface-weak-press | neutral-weak-press | #636362 | |
--hop-neutral-surface-weakest-selected | neutral-weakest-selected | #3c3c3c | |
--hop-neutral-surface-weakest-hover | neutral-weakest-hover | #3c3c3c | |
--hop-neutral-text | neutral | #f8f6f3 | |
--hop-neutral-text-selected | neutral-selected | #292929 | |
--hop-neutral-text-disabled | neutral-disabled | #6c6c6b | |
--hop-neutral-text-hover | neutral-hover | #ecebe8 | |
--hop-neutral-text-press | neutral-press | #fef6ef | |
--hop-neutral-text-strong | neutral-strong | #292929 | |
--hop-neutral-text-weak | neutral-weak | #b3b3b1 | |
--hop-neutral-text-weak-hover | neutral-weak-hover | #e0dfdd | |
--hop-neutral-text-weak-press | neutral-weak-press | #ecebe8 | |
--hop-neutral-text-weak-selected | neutral-weak-selected | #e0dfdd | |
--hop-neutral-text-weakest | neutral-weakest | #959593 |
Primary
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-primary-border-active | primary-active | #3b57ff | |
--hop-primary-icon-active | primary-active | #d6e0ff | |
--hop-primary-surface-active | primary-active | #3b57ff | |
--hop-primary-surface-strong-active | primary-strong-active | #2a43e8 | |
--hop-primary-surface-weak-active | primary-weak-active | #2a43e8 | |
--hop-primary-text-active | primary-active | #d6e0ff | |
--hop-primary-border | primary | #6c8ffd | |
--hop-primary-border-selected | primary-selected | #6c8ffd | |
--hop-primary-border-focus | primary-focus | #95b1ff | |
--hop-primary-border-press | primary-press | #3b57ff | |
--hop-primary-icon | primary | #95b1ff | |
--hop-primary-icon-selected | primary-selected | #95b1ff | |
--hop-primary-icon-disabled | primary-disabled | #2040c7 | |
--hop-primary-icon-hover | primary-hover | #6c8ffd | |
--hop-primary-icon-press | primary-press | #d6e0ff | |
--hop-primary-icon-strong | primary-strong | #ffffff | |
--hop-primary-icon-strong-hover | primary-strong-hover | #6c8ffd | |
--hop-primary-surface | primary | #95b1ff | |
--hop-primary-surface-selected | primary-selected | #1b3587 | |
--hop-primary-surface-disabled | primary-disabled | #2040c7 | |
--hop-primary-surface-focus | primary-focus | #152450 | |
--hop-primary-surface-hover | primary-hover | #4767fe | |
--hop-primary-surface-press | primary-press | #3b57ff | |
--hop-primary-surface-strong | primary-strong | #4767fe | |
--hop-primary-surface-strong-selected | primary-strong-selected | #1b3587 | |
--hop-primary-surface-strong-hover | primary-strong-hover | #3b57ff | |
--hop-primary-surface-strong-press | primary-strong-press | #2a43e8 | |
--hop-primary-surface-weak | primary-weak | #1b3587 | |
--hop-primary-surface-weak-hover | primary-weak-hover | #2040c7 | |
--hop-primary-surface-weak-press | primary-weak-press | #2a43e8 | |
--hop-primary-text | primary | #b9cbff | |
--hop-primary-text-hover | primary-hover | #95b1ff | |
--hop-primary-text-press | primary-press | #d6e0ff | |
--hop-primary-text-strong | primary-strong | #ffffff | |
--hop-primary-text-strong-hover | primary-strong-hover | #ffffff | |
--hop-primary-text-selected | primary-selected | #95b1ff | |
--hop-primary-text-disabled | primary-disabled | #2040c7 |
Success
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-success-border | success | #0c796b | |
--hop-success-icon | success | #132a27 | |
--hop-success-icon-weakest | success-weakest | #7dc291 | |
--hop-success-icon-weak | success-weak | #cde8ac | |
--hop-success-surface | success | #cde8ac | |
--hop-success-surface-strong | success-strong | #47a584 | |
--hop-success-surface-weak | success-weak | #16433d | |
--hop-success-text | success | #132a27 | |
--hop-success-text-weak | success-weak | #cde8ac | |
--hop-success-text-hover | success-hover | #115a52 |
Warning
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-warning-border | warning | #ba4705 | |
--hop-warning-icon | warning | #451a02 | |
--hop-warning-icon-weakest | warning-weakest | #ff9b3f | |
--hop-warning-icon-weak | warning-weak | #ffd8be | |
--hop-warning-surface | warning | #ffd8be | |
--hop-warning-surface-strong | warning-strong | #e57723 | |
--hop-warning-surface-weak | warning-weak | #692803 | |
--hop-warning-text | warning | #451a02 | |
--hop-warning-text-weak | warning-weak | #ffd8be |
Danger
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-danger-border-active | danger-active | #fa4d59 | |
--hop-danger-icon-active | danger-active | #fde6e5 | |
--hop-danger-icon-weak-active | danger-weak-active | #fa4d59 | |
--hop-danger-surface-active | danger-active | #ba2d2d | |
--hop-danger-surface-weak-active | danger-weak-active | #ba2d2d | |
--hop-danger-text-active | danger-active | #fde6e5 | |
--hop-danger-text-weak-active | danger-weak-active | #fa4d59 | |
--hop-danger-border | danger | #cb2e31 | |
--hop-danger-border-selected | danger-selected | #ffbcb7 | |
--hop-danger-border-press | danger-press | #fa4d59 | |
--hop-danger-border-strong | danger-strong | #fa4d59 | |
--hop-danger-icon | danger | #431a17 | |
--hop-danger-icon-selected | danger-selected | #fa4d59 | |
--hop-danger-icon-disabled | danger-disabled | #ba2d2d | |
--hop-danger-icon-hover | danger-hover | #ff8e8e | |
--hop-danger-icon-press | danger-press | #fde6e5 | |
--hop-danger-icon-strong | danger-strong | #ffffff | |
--hop-danger-icon-strong-hover | danger-strong-hover | #ffffff | |
--hop-danger-icon-weak | danger-weak | #ffbcb7 | |
--hop-danger-icon-weak-hover | danger-weak-hover | #ff8e8e | |
--hop-danger-icon-weak-press | danger-weak-press | #fa4d59 | |
--hop-danger-surface | danger | #ff8e8e | |
--hop-danger-surface-selected | danger-selected | #6c2320 | |
--hop-danger-surface-disabled | danger-disabled | #ba2d2d | |
--hop-danger-surface-hover | danger-hover | #fa4d59 | |
--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 | #431a17 | |
--hop-danger-surface-weak-hover | danger-weak-hover | #952927 | |
--hop-danger-surface-weak-press | danger-weak-press | #ba2d2d | |
--hop-danger-text | danger | #431a17 | |
--hop-danger-text-selected | danger-selected | #ffbcb7 | |
--hop-danger-text-disabled | danger-disabled | #ba2d2d | |
--hop-danger-text-hover | danger-hover | #ff8e8e | |
--hop-danger-text-press | danger-press | #fde6e5 | |
--hop-danger-text-strong | danger-strong | #ffffff | |
--hop-danger-text-strong-hover | danger-strong-hover | #ffffff | |
--hop-danger-text-weak | danger-weak | #ffbcb7 | |
--hop-danger-text-weak-hover | danger-weak-hover | #ff8e8e | |
--hop-danger-text-weak-press | danger-weak-press | #fa4d59 |
Information
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-information-border | information | #3a7bb2 | |
--hop-information-icon | information | #00274b | |
--hop-information-icon-weakest | information-weakest | #81b9e4 | |
--hop-information-icon-weak | information-weak | #5d9acd | |
--hop-information-surface | information | #bae6ff | |
--hop-information-surface-strong | information-strong | #5d9acd | |
--hop-information-surface-weak | information-weak | #003d70 | |
--hop-information-text | information | #00274b | |
--hop-information-text-weak | information-weak | #bae6ff |
Upsell
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-upsell-border-active | upsell-active | #996f08 | |
--hop-upsell-icon-active | upsell-active | #2f250d | |
--hop-upsell-icon-weak-active | upsell-weak-active | #c28b12 | |
--hop-upsell-surface-active | upsell-active | #c28b12 | |
--hop-upsell-surface-weak-active | upsell-weak-active | #7e5e0a | |
--hop-upsell-text-active | upsell-active | #2f250d | |
--hop-upsell-text-weak-active | upsell-weak-active | #c28b12 | |
--hop-upsell-border | upsell | #e2a934 | |
--hop-upsell-border-selected | upsell-selected | #eac96d | |
--hop-upsell-border-disabled | upsell-disabled | #654c0d | |
--hop-upsell-border-press | upsell-press | #996f08 | |
--hop-upsell-icon | upsell | #654c0d | |
--hop-upsell-icon-selected | upsell-selected | #eac96d | |
--hop-upsell-icon-hover | upsell-hover | #4b390f | |
--hop-upsell-icon-press | upsell-press | #2f250d | |
--hop-upsell-icon-weakest | upsell-weakest | #eac96d | |
--hop-upsell-icon-weak | upsell-weak | #eac96d | |
--hop-upsell-icon-weak-hover | upsell-weak-hover | #e2a934 | |
--hop-upsell-icon-weak-press | upsell-weak-press | #c28b12 | |
--hop-upsell-surface | upsell | #f7e694 | |
--hop-upsell-surface-selected | upsell-selected | #4b390f | |
--hop-upsell-surface-disabled | upsell-disabled | #654c0d | |
--hop-upsell-surface-hover | upsell-hover | #eac96d | |
--hop-upsell-surface-press | upsell-press | #e2a934 | |
--hop-upsell-surface-weak | upsell-weak | #4b390f | |
--hop-upsell-surface-weak-hover | upsell-weak-hover | #654c0d | |
--hop-upsell-surface-weak-press | upsell-weak-press | #7e5e0a | |
--hop-upsell-text | upsell | #654c0d | |
--hop-upsell-text-selected | upsell-selected | #eac96d | |
--hop-upsell-text-disabled | upsell-disabled | #c28b12 | |
--hop-upsell-text-hover | upsell-hover | #4b390f | |
--hop-upsell-text-press | upsell-press | #2f250d | |
--hop-upsell-text-weak | upsell-weak | #eac96d | |
--hop-upsell-text-weak-hover | upsell-weak-hover | #e2a934 | |
--hop-upsell-text-weak-press | upsell-weak-press | #c28b12 |
Decorative
Option 1
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-decorative-option1-border | decorative-option1 | #4767fe | |
--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 | #38836a | |
--hop-decorative-option2-icon | decorative-option2 | #002d1c | |
--hop-decorative-option2-surface | decorative-option2 | #a3d6cb | |
--hop-decorative-option2-surface-hover | decorative-option2-hover | #83beaf | |
--hop-decorative-option2-surface-strong | decorative-option2-strong | #83beaf | |
--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 | #c95109 | |
--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 | #188a71 | |
--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 | #3a7bb2 | |
--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 | #996f08 | |
--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 | #837463 | |
--hop-decorative-option7-icon | decorative-option7 | #2a2620 | |
--hop-decorative-option7-surface | decorative-option7 | #f0eae3 | |
--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 | #df3236 | |
--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 | #777775 | |
--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 | #f8f6f3 | |
--hop-status-neutral-border-disabled | status-neutral-disabled | #3c3c3c | |
--hop-status-neutral-border-hover | status-neutral-hover | #ecebe8 | |
--hop-status-neutral-border-press | status-neutral-press | #f8f6f3 | |
--hop-status-neutral-border-selected | status-neutral-selected | #f8f6f3 | |
--hop-status-neutral-icon | status-neutral | #f8f6f3 | |
--hop-status-neutral-icon-disabled | status-neutral-disabled | #6c6c6b | |
--hop-status-neutral-icon-hover | status-neutral-hover | #ecebe8 | |
--hop-status-neutral-icon-press | status-neutral-press | #f8f6f3 | |
--hop-status-neutral-icon-selected | status-neutral-selected | #f8f6f3 | |
--hop-status-neutral-surface | status-neutral | #1d1d1c | |
--hop-status-neutral-surface-disabled | status-neutral-disabled | #505050 | |
--hop-status-neutral-surface-hover | status-neutral-hover | #3c3c3c | |
--hop-status-neutral-surface-press | status-neutral-press | #505050 | |
--hop-status-neutral-surface-selected | status-neutral-selected | #fef6ef | |
--hop-status-neutral-surface-strong | status-neutral-strong | #ccccca | |
--hop-status-neutral-text | status-neutral | #f8f6f3 | |
--hop-status-neutral-text-disabled | status-neutral-disabled | #6c6c6b | |
--hop-status-neutral-text-hover | status-neutral-hover | #ecebe8 | |
--hop-status-neutral-text-press | status-neutral-press | #f8f6f3 | |
--hop-status-neutral-text-selected | status-neutral-selected | #292929 |
Progress
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-progress-border | status-progress | #4767fe | |
--hop-status-progress-border-disabled | status-progress-disabled | #2a43e8 | |
--hop-status-progress-border-hover | status-progress-hover | #3b57ff | |
--hop-status-progress-border-press | status-progress-press | #4767fe | |
--hop-status-progress-border-selected | status-progress-selected | #d6e0ff | |
--hop-status-progress-icon | status-progress | #1b3587 | |
--hop-status-progress-icon-disabled | status-progress-disabled | #3b57ff | |
--hop-status-progress-icon-hover | status-progress-hover | #152450 | |
--hop-status-progress-icon-press | status-progress-press | #1b3587 | |
--hop-status-progress-icon-selected | status-progress-selected | #d6e0ff | |
--hop-status-progress-surface | status-progress | #b9cbff | |
--hop-status-progress-surface-disabled | status-progress-disabled | #1b3587 | |
--hop-status-progress-surface-hover | status-progress-hover | #95b1ff | |
--hop-status-progress-surface-press | status-progress-press | #6c8ffd | |
--hop-status-progress-surface-selected | status-progress-selected | #1b3587 | |
--hop-status-progress-surface-strong | status-progress-strong | #95b1ff | |
--hop-status-progress-text | status-progress | #1b3587 | |
--hop-status-progress-text-disabled | status-progress-disabled | #3b57ff | |
--hop-status-progress-text-hover | status-progress-hover | #152450 | |
--hop-status-progress-text-press | status-progress-press | #1b3587 | |
--hop-status-progress-text-selected | status-progress-selected | #d6e0ff |
Positive
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-positive-border | status-positive | #188a71 | |
--hop-status-positive-border-disabled | status-positive-disabled | #16433d | |
--hop-status-positive-border-hover | status-positive-hover | #0c796b | |
--hop-status-positive-border-press | status-positive-press | #188a71 | |
--hop-status-positive-border-selected | status-positive-selected | #cde8ac | |
--hop-status-positive-icon | status-positive | #16433d | |
--hop-status-positive-icon-disabled | status-positive-disabled | #0c796b | |
--hop-status-positive-icon-hover | status-positive-hover | #132a27 | |
--hop-status-positive-icon-press | status-positive-press | #16433d | |
--hop-status-positive-icon-selected | status-positive-selected | #cde8ac | |
--hop-status-positive-surface | status-positive | #aad89d | |
--hop-status-positive-surface-disabled | status-positive-disabled | #16433d | |
--hop-status-positive-surface-hover | status-positive-hover | #7dc291 | |
--hop-status-positive-surface-press | status-positive-press | #47a584 | |
--hop-status-positive-surface-selected | status-positive-selected | #16433d | |
--hop-status-positive-surface-strong | status-positive-strong | #7dc291 | |
--hop-status-positive-text | status-positive | #16433d | |
--hop-status-positive-text-disabled | status-positive-disabled | #0c796b | |
--hop-status-positive-text-hover | status-positive-hover | #132a27 | |
--hop-status-positive-text-press | status-positive-press | #16433d | |
--hop-status-positive-text-selected | status-positive-selected | #cde8ac |
Caution
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-caution-border | status-caution | #c95109 | |
--hop-status-caution-border-disabled | status-caution-disabled | #ab4104 | |
--hop-status-caution-border-hover | status-caution-hover | #ba4705 | |
--hop-status-caution-border-press | status-caution-press | #c95109 | |
--hop-status-caution-border-selected | status-caution-selected | #ffd8be | |
--hop-status-caution-icon | status-caution | #692803 | |
--hop-status-caution-icon-disabled | status-caution-disabled | #ba4705 | |
--hop-status-caution-icon-hover | status-caution-hover | #451a02 | |
--hop-status-caution-icon-press | status-caution-press | #692803 | |
--hop-status-caution-icon-selected | status-caution-selected | #ffd8be | |
--hop-status-caution-surface | status-caution | #ffbf92 | |
--hop-status-caution-surface-disabled | status-caution-disabled | #692803 | |
--hop-status-caution-surface-hover | status-caution-hover | #ff9b3f | |
--hop-status-caution-surface-press | status-caution-press | #e57723 | |
--hop-status-caution-surface-selected | status-caution-selected | #692803 | |
--hop-status-caution-surface-strong | status-caution-strong | #ff9b3f | |
--hop-status-caution-text | status-caution | #692803 | |
--hop-status-caution-text-disabled | status-caution-disabled | #ba4705 | |
--hop-status-caution-text-hover | status-caution-hover | #451a02 | |
--hop-status-caution-text-press | status-caution-press | #692803 | |
--hop-status-caution-text-selected | status-caution-selected | #ffd8be |
Negative
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-negative-border | status-negative | #df3236 | |
--hop-status-negative-border-disabled | status-negative-disabled | #ba2d2d | |
--hop-status-negative-border-hover | status-negative-hover | #cb2e31 | |
--hop-status-negative-border-press | status-negative-press | #df3236 | |
--hop-status-negative-border-selected | status-negative-selected | #ffd6d3 | |
--hop-status-negative-icon | status-negative | #6c2320 | |
--hop-status-negative-icon-disabled | status-negative-disabled | #cb2e31 | |
--hop-status-negative-icon-hover | status-negative-hover | #431a17 | |
--hop-status-negative-icon-press | status-negative-press | #6c2320 | |
--hop-status-negative-icon-selected | status-negative-selected | #ffd6d3 | |
--hop-status-negative-surface | status-negative | #ffbcb7 | |
--hop-status-negative-surface-disabled | status-negative-disabled | #6c2320 | |
--hop-status-negative-surface-hover | status-negative-hover | #ff8e8e | |
--hop-status-negative-surface-press | status-negative-press | #fa4d59 | |
--hop-status-negative-surface-selected | status-negative-selected | #6c2320 | |
--hop-status-negative-surface-strong | status-negative-strong | #ff8e8e | |
--hop-status-negative-text | status-negative | #6c2320 | |
--hop-status-negative-text-disabled | status-negative-disabled | #cb2e31 | |
--hop-status-negative-text-hover | status-negative-hover | #431a17 | |
--hop-status-negative-text-press | status-negative-press | #6c2320 | |
--hop-status-negative-text-selected | status-negative-selected | #ffd6d3 |
Inactive
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-inactive-border | status-inactive | #777775 | |
--hop-status-inactive-border-disabled | status-inactive-disabled | #636362 | |
--hop-status-inactive-border-hover | status-inactive-hover | #6c6c6b | |
--hop-status-inactive-border-press | status-inactive-press | #777775 | |
--hop-status-inactive-border-selected | status-inactive-selected | #e0dfdd | |
--hop-status-inactive-icon | status-inactive | #3c3c3c | |
--hop-status-inactive-icon-disabled | status-inactive-disabled | #6c6c6b | |
--hop-status-inactive-icon-hover | status-inactive-hover | #292929 | |
--hop-status-inactive-icon-press | status-inactive-press | #3c3c3c | |
--hop-status-inactive-icon-selected | status-inactive-selected | #e0dfdd | |
--hop-status-inactive-surface | status-inactive | #e0dfdd | |
--hop-status-inactive-surface-disabled | status-inactive-disabled | #3c3c3c | |
--hop-status-inactive-surface-hover | status-inactive-hover | #b3b3b1 | |
--hop-status-inactive-surface-press | status-inactive-press | #959593 | |
--hop-status-inactive-surface-selected | status-inactive-selected | #3c3c3c | |
--hop-status-inactive-surface-strong | status-inactive-strong | #ccccca | |
--hop-status-inactive-text | status-inactive | #3c3c3c | |
--hop-status-inactive-text-disabled | status-inactive-disabled | #6c6c6b | |
--hop-status-inactive-text-hover | status-inactive-hover | #292929 | |
--hop-status-inactive-text-press | status-inactive-press | #3c3c3c | |
--hop-status-inactive-text-selected | status-inactive-selected | #e0dfdd |
Option 1
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-option1-border | status-option1 | #3a7bb2 | |
--hop-status-option1-border-disabled | status-option1-disabled | #23669f | |
--hop-status-option1-border-hover | status-option1-hover | #2e70a8 | |
--hop-status-option1-border-press | status-option1-press | #3a7bb2 | |
--hop-status-option1-border-selected | status-option1-selected | #bae6ff | |
--hop-status-option1-icon | status-option1 | #003d70 | |
--hop-status-option1-icon-disabled | status-option1-disabled | #2e70a8 | |
--hop-status-option1-icon-hover | status-option1-hover | #00274b | |
--hop-status-option1-icon-press | status-option1-press | #003d70 | |
--hop-status-option1-icon-selected | status-option1-selected | #bae6ff | |
--hop-status-option1-surface | status-option1 | #9fd2f7 | |
--hop-status-option1-surface-disabled | status-option1-disabled | #003d70 | |
--hop-status-option1-surface-hover | status-option1-hover | #81b9e4 | |
--hop-status-option1-surface-press | status-option1-press | #5d9acd | |
--hop-status-option1-surface-selected | status-option1-selected | #003d70 | |
--hop-status-option1-surface-strong | status-option1-strong | #9fd2f7 | |
--hop-status-option1-text | status-option1 | #003d70 | |
--hop-status-option1-text-disabled | status-option1-disabled | #2e70a8 | |
--hop-status-option1-text-hover | status-option1-hover | #00274b | |
--hop-status-option1-text-press | status-option1-press | #003d70 | |
--hop-status-option1-text-selected | status-option1-selected | #bae6ff |
Option 2
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-option2-border | status-option2 | #8d91dc | |
--hop-status-option2-border-disabled | status-option2-disabled | #5454be | |
--hop-status-option2-border-hover | status-option2-hover | #5f61c5 | |
--hop-status-option2-border-press | status-option2-press | #8d91dc | |
--hop-status-option2-border-selected | status-option2-selected | #322b8d | |
--hop-status-option2-icon | status-option2 | #322b8d | |
--hop-status-option2-icon-disabled | status-option2-disabled | #5f61c5 | |
--hop-status-option2-icon-hover | status-option2-hover | #1e1c5d | |
--hop-status-option2-icon-press | status-option2-press | #322b8d | |
--hop-status-option2-icon-selected | status-option2-selected | #ddddf7 | |
--hop-status-option2-surface | status-option2 | #c8caf0 | |
--hop-status-option2-surface-disabled | status-option2-disabled | #322b8d | |
--hop-status-option2-surface-hover | status-option2-hover | #aeb3e8 | |
--hop-status-option2-surface-press | status-option2-press | #8d91dc | |
--hop-status-option2-surface-selected | status-option2-selected | #322b8d | |
--hop-status-option2-surface-strong | status-option2-strong | #c8caf0 | |
--hop-status-option2-text | status-option2 | #322b8d | |
--hop-status-option2-text-disabled | status-option2-disabled | #5f61c5 | |
--hop-status-option2-text-hover | status-option2-hover | #1e1c5d | |
--hop-status-option2-text-press | status-option2-press | #322b8d | |
--hop-status-option2-text-selected | status-option2-selected | #ddddf7 |
Option 3
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-option3-border | status-option3 | #38836a | |
--hop-status-option3-border-disabled | status-option3-disabled | #206f54 | |
--hop-status-option3-border-hover | status-option3-hover | #2b795e | |
--hop-status-option3-border-press | status-option3-press | #38836a | |
--hop-status-option3-border-selected | status-option3-selected | #bde8e1 | |
--hop-status-option3-icon | status-option3 | #00452d | |
--hop-status-option3-icon-disabled | status-option3-disabled | #2b795e | |
--hop-status-option3-icon-hover | status-option3-hover | #002d1c | |
--hop-status-option3-icon-press | status-option3-press | #00452d | |
--hop-status-option3-icon-selected | status-option3-selected | #bde8e1 | |
--hop-status-option3-surface | status-option3 | #a3d6cb | |
--hop-status-option3-surface-disabled | status-option3-disabled | #00452d | |
--hop-status-option3-surface-hover | status-option3-hover | #83beaf | |
--hop-status-option3-surface-press | status-option3-press | #5da18c | |
--hop-status-option3-surface-selected | status-option3-selected | #00452d | |
--hop-status-option3-surface-strong | status-option3-strong | #a3d6cb | |
--hop-status-option3-text | status-option3 | #00452d | |
--hop-status-option3-text-disabled | status-option3-disabled | #83beaf | |
--hop-status-option3-text-hover | status-option3-hover | #002d1c | |
--hop-status-option3-text-press | status-option3-press | #00452d | |
--hop-status-option3-text-selected | status-option3-selected | #bde8e1 |
Option 4
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-option4-border | status-option4 | #5e7b84 | |
--hop-status-option4-border-disabled | status-option4-disabled | #4e6770 | |
--hop-status-option4-border-hover | status-option4-hover | #557079 | |
--hop-status-option4-border-press | status-option4-press | #5e7b84 | |
--hop-status-option4-border-selected | status-option4-selected | #d2e3e7 | |
--hop-status-option4-icon | status-option4 | #313e43 | |
--hop-status-option4-icon-disabled | status-option4-disabled | #557079 | |
--hop-status-option4-icon-hover | status-option4-hover | #20282a | |
--hop-status-option4-icon-press | status-option4-press | #313e43 | |
--hop-status-option4-icon-selected | status-option4-selected | #d2e3e7 | |
--hop-status-option4-surface | status-option4 | #bad0d5 | |
--hop-status-option4-surface-disabled | status-option4-disabled | #4e6770 | |
--hop-status-option4-surface-hover | status-option4-hover | #9cb7be | |
--hop-status-option4-surface-press | status-option4-press | #7c9aa3 | |
--hop-status-option4-surface-selected | status-option4-selected | #313e43 | |
--hop-status-option4-surface-strong | status-option4-strong | #bad0d5 | |
--hop-status-option4-text | status-option4 | #313e43 | |
--hop-status-option4-text-disabled | status-option4-disabled | #557079 | |
--hop-status-option4-text-hover | status-option4-hover | #20282a | |
--hop-status-option4-text-press | status-option4-press | #20282a | |
--hop-status-option4-text-selected | status-option4-selected | #d2e3e7 |
Option 5
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-option5-border | status-option5 | #837463 | |
--hop-status-option5-border-disabled | status-option5-disabled | #6e6151 | |
--hop-status-option5-border-hover | status-option5-hover | #776a59 | |
--hop-status-option5-border-press | status-option5-press | #837463 | |
--hop-status-option5-border-selected | status-option5-selected | #e5ded6 | |
--hop-status-option5-icon | status-option5 | #433b31 | |
--hop-status-option5-icon-disabled | status-option5-disabled | #776a59 | |
--hop-status-option5-icon-hover | status-option5-hover | #2a2620 | |
--hop-status-option5-icon-press | status-option5-press | #433b31 | |
--hop-status-option5-icon-selected | status-option5-selected | #e5ded6 | |
--hop-status-option5-surface | status-option5 | #d4cbc0 | |
--hop-status-option5-surface-disabled | status-option5-disabled | #433b31 | |
--hop-status-option5-surface-hover | status-option5-hover | #bdb1a3 | |
--hop-status-option5-surface-press | status-option5-press | #a19382 | |
--hop-status-option5-surface-selected | status-option5-selected | #433b31 | |
--hop-status-option5-surface-strong | status-option5-strong | #d4cbc0 | |
--hop-status-option5-text | status-option5 | #433b31 | |
--hop-status-option5-text-disabled | status-option5-disabled | #776a59 | |
--hop-status-option5-text-hover | status-option5-hover | #2a2620 | |
--hop-status-option5-text-press | status-option5-press | #433b31 | |
--hop-status-option5-text-selected | status-option5-selected | #e5ded6 |
Option 6
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-status-option6-border | status-option6 | #996f08 | |
--hop-status-option6-border-disabled | status-option6-disabled | #7e5e0a | |
--hop-status-option6-border-hover | status-option6-hover | #8b6609 | |
--hop-status-option6-border-press | status-option6-press | #996f08 | |
--hop-status-option6-border-selected | status-option6-selected | #f7e694 | |
--hop-status-option6-icon | status-option6 | #4b390f | |
--hop-status-option6-icon-disabled | status-option6-disabled | #8b6609 | |
--hop-status-option6-icon-hover | status-option6-hover | #2f250d | |
--hop-status-option6-icon-press | status-option6-press | #4b390f | |
--hop-status-option6-icon-selected | status-option6-selected | #f7e694 | |
--hop-status-option6-surface | status-option6 | #eac96d | |
--hop-status-option6-surface-disabled | status-option6-disabled | #4b390f | |
--hop-status-option6-surface-hover | status-option6-hover | #e2a934 | |
--hop-status-option6-surface-press | status-option6-press | #c28b12 | |
--hop-status-option6-surface-selected | status-option6-selected | #4b390f | |
--hop-status-option6-surface-strong | status-option6-strong | #eac96d | |
--hop-status-option6-text | status-option6 | #4b390f | |
--hop-status-option6-text-disabled | status-option6-disabled | #8b6609 | |
--hop-status-option6-text-hover | status-option6-hover | #2f250d | |
--hop-status-option6-text-press | status-option6-press | #4b390f | |
--hop-status-option6-text-selected | status-option6-selected | #f7e694 |
Data Visualization
| Name | Styled-System Value | Value | Preview |
|---|---|---|---|
--hop-dataviz-unavailable | dataviz_unavailable | #636362 | |
--hop-dataviz-unavailable-weak | dataviz_unavailable-weak | #777775 | |
--hop-dataviz-unavailable-strong | dataviz_unavailable-strong | #505050 | |
--hop-dataviz-text-onlight | dataviz_onlight | #3c3c3c | |
--hop-dataviz-text-ondark | dataviz_ondark | #ffffff |