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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--hop-upsell-border-active
upsell-active#e2a934
--hop-upsell-icon-active
upsell-active#2f250d
--hop-upsell-icon-weak-active
upsell-weak-active#7e5e0a
--hop-upsell-surface-active
upsell-active#e2a934
--hop-upsell-surface-weak-active
upsell-weak-active#f7e694
--hop-upsell-text-active
upsell-active#2f250d
--hop-upsell-text-weak-active
upsell-weak-active#7e5e0a
--hop-upsell-border
upsell#eac96d
--hop-upsell-border-selected
upsell-selected#e2a934
--hop-upsell-border-disabled
upsell-disabled#f7e694
--hop-upsell-border-press
upsell-press#e2a934
--hop-upsell-icon
upsell#654c0d
--hop-upsell-icon-selected
upsell-selected#996f08
--hop-upsell-icon-hover
upsell-hover#4b390f
--hop-upsell-icon-press
upsell-press#2f250d
--hop-upsell-icon-weakest
upsell-weakest#f7e694
--hop-upsell-icon-weak
upsell-weak#eac96d
--hop-upsell-icon-weak-hover
upsell-weak-hover#8b6609
--hop-upsell-icon-weak-press
upsell-weak-press#7e5e0a
--hop-upsell-surface
upsell#f7e694
--hop-upsell-surface-selected
upsell-selected#fff2b8
--hop-upsell-surface-disabled
upsell-disabled#fff8d6
--hop-upsell-surface-hover
upsell-hover#eac96d
--hop-upsell-surface-press
upsell-press#e2a934
--hop-upsell-surface-weak
upsell-weak#fff8d6
--hop-upsell-surface-weak-hover
upsell-weak-hover#fff2b8
--hop-upsell-surface-weak-press
upsell-weak-press#f7e694
--hop-upsell-text
upsell#654c0d
--hop-upsell-text-selected
upsell-selected#996f08
--hop-upsell-text-disabled
upsell-disabled#996f08
--hop-upsell-text-hover
upsell-hover#4b390f
--hop-upsell-text-press
upsell-press#2f250d
--hop-upsell-text-weak
upsell-weak#c28b12
--hop-upsell-text-weak-hover
upsell-weak-hover#8b6609
--hop-upsell-text-weak-press
upsell-weak-press#7e5e0a

Decorative

Option 1

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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#c28b12
--hop-upsell-icon-weak-hover
upsell-weak-hover#e2a934
--hop-upsell-icon-weak-press
upsell-weak-press#c28b12
--hop-upsell-surface
upsell#fff2b8
--hop-upsell-surface-selected
upsell-selected#4b390f
--hop-upsell-surface-disabled
upsell-disabled#654c0d
--hop-upsell-surface-hover
upsell-hover#e2a934
--hop-upsell-surface-press
upsell-press#c28b12
--hop-upsell-surface-weak
upsell-weak#2f250d
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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

NameStyled-System ValueValuePreview
--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