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