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 colour, we place a higher value on clear communication. Colour supports the purpose of the content, communicating things like hierarchy, interactive states and differences between visual elements.
  • Colours have meaning - Each colour has assigned sentiment based on how they function within the interface. Defined colour 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.

Tokens

Neutral

NameValuePreview
--hop-neutral-border-active
#777775
--hop-neutral-icon-active
#292929
--hop-neutral-icon-weak-active
#505050
--hop-neutral-surface-active
#ecebe8
--hop-neutral-surface-weak-active
#ccccca
--hop-neutral-text-active
#292929
--hop-neutral-text-weak-active
#505050
--hop-neutral-border
#b3b3b1
--hop-neutral-border-selected
#3c3c3c
--hop-neutral-border-disabled
#ecebe8
--hop-neutral-border-hover
#959593
--hop-neutral-border-press
#777775
--hop-neutral-border-strong
#3c3c3c
--hop-neutral-border-strong-hover
#505050
--hop-neutral-border-weak
#e0dfdd
--hop-neutral-border-weakest
#ecebe8
--hop-neutral-icon
#3c3c3c
--hop-neutral-icon-selected
#ffffff
--hop-neutral-icon-disabled
#959593
--hop-neutral-icon-hover
#505050
--hop-neutral-icon-press
#292929
--hop-neutral-icon-strong
#ffffff
--hop-neutral-icon-strong-hover
#ffffff
--hop-neutral-icon-weak
#777775
--hop-neutral-icon-weak-hover
#636362
--hop-neutral-icon-weak-press
#505050
--hop-neutral-icon-weak-selected
#636362
--hop-neutral-icon-weakest
#b3b3b1
--hop-neutral-surface
#ffffff
--hop-neutral-surface-selected
#3c3c3c
--hop-neutral-surface-disabled
#ecebe8
--hop-neutral-surface-hover
#f8f6f3
--hop-neutral-surface-press
#ecebe8
--hop-neutral-surface-strong
#3c3c3c
--hop-neutral-surface-weak
#ecebe8
--hop-neutral-surface-weak-selected
#ecebe8
--hop-neutral-surface-weak-hover
#e0dfdd
--hop-neutral-surface-weak-press
#ccccca
--hop-neutral-surface-weakest
#f8f6f3
--hop-neutral-surface-weakest-selected
#ecebe8
--hop-neutral-surface-weakest-hover
#ecebe8
--hop-neutral-text
#3c3c3c
--hop-neutral-text-selected
#ffffff
--hop-neutral-text-disabled
#959593
--hop-neutral-text-hover
#505050
--hop-neutral-text-press
#292929
--hop-neutral-text-strong
#ffffff
--hop-neutral-text-weak
#6c6c6b
--hop-neutral-text-weak-hover
#636362
--hop-neutral-text-weak-press
#505050
--hop-neutral-text-weak-selected
#636362
--hop-neutral-text-weakest
#959593

Primary

NameValuePreview
--hop-primary-border-active
#6c8ffd
--hop-primary-icon-active
#2040c7
--hop-primary-surface-active
#6c8ffd
--hop-primary-surface-strong-active
#2040c7
--hop-primary-surface-weak-active
#d6e0ff
--hop-primary-text-active
#2040c7
--hop-primary-border
#4767fe
--hop-primary-border-selected
#4767fe
--hop-primary-border-focus
#3b57ff
--hop-primary-border-press
#6c8ffd
--hop-primary-icon
#3b57ff
--hop-primary-icon-selected
#3b57ff
--hop-primary-icon-disabled
#95b1ff
--hop-primary-icon-hover
#2a43e8
--hop-primary-icon-press
#2040c7
--hop-primary-icon-strong
#ffffff
--hop-primary-icon-strong-hover
#ffffff
--hop-primary-surface
#e6ebff
--hop-primary-surface-selected
#e6ebff
--hop-primary-surface-disabled
#95b1ff
--hop-primary-surface-focus
#f5f6ff
--hop-primary-surface-hover
#95b1ff
--hop-primary-surface-press
#6c8ffd
--hop-primary-surface-strong
#4767fe
--hop-primary-surface-strong-selected
#e6ebff
--hop-primary-surface-strong-hover
#2a43e8
--hop-primary-surface-strong-press
#2040c7
--hop-primary-surface-weak
#f5f6ff
--hop-primary-surface-weak-hover
#e6ebff
--hop-primary-surface-weak-press
#d6e0ff
--hop-primary-text
#3b57ff
--hop-primary-text-selected
#3b57ff
--hop-primary-text-disabled
#95b1ff
--hop-primary-text-hover
#2a43e8
--hop-primary-text-press
#2040c7
--hop-primary-text-strong
#ffffff
--hop-primary-text-strong-hover
#ffffff

Success

NameValuePreview
--hop-success-border
#aad89d
--hop-success-icon
#115a52
--hop-success-icon-weakest
#aad89d
--hop-success-icon-weak
#47a584
--hop-success-surface
#f4f9e9
--hop-success-surface-strong
#aad89d
--hop-success-surface-weak
#e3f3b9
--hop-success-text
#115a52
--hop-success-text-hover
#16433d
--hop-success-text-weak
#47a584

Warning

NameValuePreview
--hop-warning-border
#ffbf92
--hop-warning-icon
#8c3504
--hop-warning-icon-weakest
#ffbf92
--hop-warning-icon-weak
#e57723
--hop-warning-surface
#fff5e9
--hop-warning-surface-strong
#ffbf92
--hop-warning-surface-weak
#ffe8d3
--hop-warning-text
#8c3504
--hop-warning-text-weak
#e57723

Danger

NameValuePreview
--hop-danger-border-active
#ba2d2d
--hop-danger-icon-active
#6c2320
--hop-danger-icon-weak-active
#ba2d2d
--hop-danger-surface-active
#ba2d2d
--hop-danger-surface-weak-active
#ffbcb7
--hop-danger-text-active
#6c2320
--hop-danger-text-weak-active
#ba2d2d
--hop-danger-border
#ffbcb7
--hop-danger-border-selected
#fa4d59
--hop-danger-border-strong
#fa4d59
--hop-danger-border-press
#ba2d2d
--hop-danger-icon
#952927
--hop-danger-icon-selected
#df3236
--hop-danger-icon-disabled
#ffbcb7
--hop-danger-icon-hover
#cb2e31
--hop-danger-icon-press
#6c2320
--hop-danger-icon-strong
#ffffff
--hop-danger-icon-strong-hover
#ffffff
--hop-danger-icon-weak
#fa4d59
--hop-danger-icon-weak-hover
#cb2e31
--hop-danger-icon-weak-press
#ba2d2d
--hop-danger-surface
#fdf6f6
--hop-danger-surface-selected
#fde6e5
--hop-danger-surface-disabled
#ffbcb7
--hop-danger-surface-hover
#cb2e31
--hop-danger-surface-press
#ba2d2d
--hop-danger-surface-strong
#df3236
--hop-danger-surface-strong-hover
#cb2e31
--hop-danger-surface-weak
#fde6e5
--hop-danger-surface-weak-hover
#ffd6d3
--hop-danger-surface-weak-press
#ffbcb7
--hop-danger-text
#952927
--hop-danger-text-selected
#df3236
--hop-danger-text-disabled
#ffbcb7
--hop-danger-text-hover
#cb2e31
--hop-danger-text-press
#6c2320
--hop-danger-text-strong
#ffffff
--hop-danger-text-strong-hover
#ffffff
--hop-danger-text-weak
#df3236
--hop-danger-text-weak-hover
#cb2e31
--hop-danger-text-weak-press
#ba2d2d

Information

NameValuePreview
--hop-information-border
#9fd2f7
--hop-information-icon
#0a538b
--hop-information-icon-weakest
#bae6ff
--hop-information-icon-weak
#5d9acd
--hop-information-surface
#f0f8ff
--hop-information-surface-strong
#9fd2f7
--hop-information-surface-weak
#d9efff
--hop-information-text
#003d70
--hop-information-text-weak
#5d9acd

Upsell

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

Decorative

Option 1

NameValuePreview
--hop-decorative-option1-border
#b9cbff
--hop-decorative-option1-icon
#152450
--hop-decorative-option1-surface
#b9cbff
--hop-decorative-option1-surface-hover
#95b1ff
--hop-decorative-option1-surface-strong
#95b1ff
--hop-decorative-option1-surface-weak
#e6ebff
--hop-decorative-option1-surface-weak-hover
#d6e0ff
--hop-decorative-option1-surface-weakest
#f5f6ff
--hop-decorative-option1-text
#152450
--hop-decorative-option1-text-weak
#6c8ffd

Option 2

NameValuePreview
--hop-decorative-option2-border
#a3d6cb
--hop-decorative-option2-icon
#002d1c
--hop-decorative-option2-surface
#bde8e1
--hop-decorative-option2-surface-hover
#a3d6cb
--hop-decorative-option2-surface-strong
#a3d6cb
--hop-decorative-option2-surface-weak
#cff4ef
--hop-decorative-option2-surface-weak-hover
#bde8e1
--hop-decorative-option2-surface-weakest
#ddfdf9
--hop-decorative-option2-text
#002d1c
--hop-decorative-option2-text-weak
#5da18c

Option 3

NameValuePreview
--hop-decorative-option3-border
#ffbf92
--hop-decorative-option3-icon
#451a02
--hop-decorative-option3-surface
#ffbf92
--hop-decorative-option3-surface-hover
#ff9b3f
--hop-decorative-option3-surface-strong
#ff9b3f
--hop-decorative-option3-surface-weak
#ffe8d3
--hop-decorative-option3-surface-weak-hover
#ffd8be
--hop-decorative-option3-surface-weakest
#fff5e9
--hop-decorative-option3-text
#451a02
--hop-decorative-option3-text-weak
#e57723

Option 4

NameValuePreview
--hop-decorative-option4-border
#aad89d
--hop-decorative-option4-icon
#132a27
--hop-decorative-option4-surface
#cde8ac
--hop-decorative-option4-surface-hover
#aad89d
--hop-decorative-option4-surface-strong
#aad89d
--hop-decorative-option4-surface-weak
#e3f3b9
--hop-decorative-option4-surface-weak-hover
#cde8ac
--hop-decorative-option4-surface-weakest
#f4f9e9
--hop-decorative-option4-text
#132a27
--hop-decorative-option4-text-weak
#188a71

Option 5

NameValuePreview
--hop-decorative-option5-border
#9fd2f7
--hop-decorative-option5-icon
#00274b
--hop-decorative-option5-surface
#bae6ff
--hop-decorative-option5-surface-hover
#9fd2f7
--hop-decorative-option5-surface-strong
#9fd2f7
--hop-decorative-option5-surface-weak
#d9efff
--hop-decorative-option5-surface-weak-hover
#bae6ff
--hop-decorative-option5-surface-weakest
#f0f8ff
--hop-decorative-option5-text
#00274b
--hop-decorative-option5-text-weak
#5d9acd

Option 6

NameValuePreview
--hop-decorative-option6-border
#eac96d
--hop-decorative-option6-icon
#2f250d
--hop-decorative-option6-surface
#f7e694
--hop-decorative-option6-surface-hover
#eac96d
--hop-decorative-option6-surface-strong
#eac96d
--hop-decorative-option6-surface-weak
#fff2b8
--hop-decorative-option6-surface-weak-hover
#f7e694
--hop-decorative-option6-surface-weakest
#fff8d6
--hop-decorative-option6-text
#2f250d
--hop-decorative-option6-text-weak
#e2a934

Option 7

NameValuePreview
--hop-decorative-option7-border
#d4cbc0
--hop-decorative-option7-icon
#2a2620
--hop-decorative-option7-surface
#e5ded6
--hop-decorative-option7-surface-hover
#d4cbc0
--hop-decorative-option7-surface-strong
#d4cbc0
--hop-decorative-option7-surface-weak
#f0eae3
--hop-decorative-option7-surface-weak-hover
#e5ded6
--hop-decorative-option7-surface-weakest
#fef6ef
--hop-decorative-option7-text
#2a2620
--hop-decorative-option7-text-weak
#776a59

Option 8

NameValuePreview
--hop-decorative-option8-border
#ffbcb7
--hop-decorative-option8-icon
#431a17
--hop-decorative-option8-surface
#ffd6d3
--hop-decorative-option8-surface-hover
#ff8e8e
--hop-decorative-option8-surface-strong
#ffbcb7
--hop-decorative-option8-surface-weak
#fde6e5
--hop-decorative-option8-surface-weak-hover
#ffd6d3
--hop-decorative-option8-surface-weakest
#fdf6f6
--hop-decorative-option8-text
#431a17
--hop-decorative-option8-text-weak
#fa4d59

Option 9

NameValuePreview
--hop-decorative-option9-border
#ccccca
--hop-decorative-option9-icon
#ffffff
--hop-decorative-option9-surface
#777775
--hop-decorative-option9-surface-hover
#6c6c6b
--hop-decorative-option9-surface-strong
#3c3c3c
--hop-decorative-option9-surface-weak
#959593
--hop-decorative-option9-surface-weak-hover
#777775
--hop-decorative-option9-surface-weakest
#b3b3b1
--hop-decorative-option9-text
#ffffff
--hop-decorative-option9-text-weak
#959593

Status

Neutral

NameValuePreview
--hop-status-neutral-border
#3c3c3c
--hop-status-neutral-border-disabled
#ecebe8
--hop-status-neutral-border-hover
#505050
--hop-status-neutral-border-press
#292929
--hop-status-neutral-border-selected
#3c3c3c
--hop-status-neutral-icon
#3c3c3c
--hop-status-neutral-icon-disabled
#959593
--hop-status-neutral-icon-hover
#505050
--hop-status-neutral-icon-press
#292929
--hop-status-neutral-icon-selected
#ffffff
--hop-status-neutral-surface
#ffffff
--hop-status-neutral-surface-disabled
#ecebe8
--hop-status-neutral-surface-hover
#f8f6f3
--hop-status-neutral-surface-press
#ecebe8
--hop-status-neutral-surface-selected
#3c3c3c
--hop-status-neutral-surface-strong
#b3b3b1
--hop-status-neutral-text
#3c3c3c
--hop-status-neutral-text-disabled
#959593
--hop-status-neutral-text-hover
#505050
--hop-status-neutral-text-press
#292929
--hop-status-neutral-text-selected
#ffffff

Progress

NameValuePreview
--hop-status-progress-border
#6c8ffd
--hop-status-progress-border-disabled
#e6ebff
--hop-status-progress-border-hover
#4767fe
--hop-status-progress-border-press
#3b57ff
--hop-status-progress-border-selected
#4767fe
--hop-status-progress-icon
#2a43e8
--hop-status-progress-icon-disabled
#95b1ff
--hop-status-progress-icon-hover
#2040c7
--hop-status-progress-icon-press
#1b3587
--hop-status-progress-icon-selected
#3b57ff
--hop-status-progress-surface
#e6ebff
--hop-status-progress-surface-disabled
#f5f6ff
--hop-status-progress-surface-hover
#d6e0ff
--hop-status-progress-surface-press
#b9cbff
--hop-status-progress-surface-selected
#e6ebff
--hop-status-progress-surface-strong
#95b1ff
--hop-status-progress-text
#2a43e8
--hop-status-progress-text-disabled
#95b1ff
--hop-status-progress-text-hover
#2040c7
--hop-status-progress-text-press
#1b3587
--hop-status-progress-text-selected
#3b57ff

Positive

NameValuePreview
--hop-status-positive-border
#47a584
--hop-status-positive-border-disabled
#e3f3b9
--hop-status-positive-border-hover
#188a71
--hop-status-positive-border-press
#0c796b
--hop-status-positive-border-selected
#115a52
--hop-status-positive-icon
#0a6f64
--hop-status-positive-icon-disabled
#7dc291
--hop-status-positive-icon-hover
#115a52
--hop-status-positive-icon-press
#16433d
--hop-status-positive-icon-selected
#115a52
--hop-status-positive-surface
#e3f3b9
--hop-status-positive-surface-disabled
#f4f9e9
--hop-status-positive-surface-hover
#cde8ac
--hop-status-positive-surface-press
#aad89d
--hop-status-positive-surface-selected
#e3f3b9
--hop-status-positive-surface-strong
#7dc291
--hop-status-positive-text
#0a6f64
--hop-status-positive-text-disabled
#7dc291
--hop-status-positive-text-hover
#115a52
--hop-status-positive-text-press
#16433d
--hop-status-positive-text-selected
#115a52

Caution

NameValuePreview
--hop-status-caution-border
#e57723
--hop-status-caution-border-disabled
#ffe8d3
--hop-status-caution-border-hover
#c95109
--hop-status-caution-border-press
#ba4705
--hop-status-caution-border-selected
#8c3504
--hop-status-caution-icon
#ab4104
--hop-status-caution-icon-disabled
#ff9b3f
--hop-status-caution-icon-hover
#8c3504
--hop-status-caution-icon-press
#692803
--hop-status-caution-icon-selected
#8c3504
--hop-status-caution-surface
#ffe8d3
--hop-status-caution-surface-disabled
#fff5e9
--hop-status-caution-surface-hover
#ffd8be
--hop-status-caution-surface-press
#ffbf92
--hop-status-caution-surface-selected
#ffe8d3
--hop-status-caution-surface-strong
#ff9b3f
--hop-status-caution-text
#ab4104
--hop-status-caution-text-disabled
#ff9b3f
--hop-status-caution-text-hover
#8c3504
--hop-status-caution-text-press
#692803
--hop-status-caution-text-selected
#8c3504

Negative

NameValuePreview
--hop-status-negative-border
#fa4d59
--hop-status-negative-border-disabled
#fde6e5
--hop-status-negative-border-hover
#df3236
--hop-status-negative-border-press
#cb2e31
--hop-status-negative-border-selected
#952927
--hop-status-negative-icon
#ba2d2d
--hop-status-negative-icon-disabled
#ff8e8e
--hop-status-negative-icon-hover
#952927
--hop-status-negative-icon-press
#6c2320
--hop-status-negative-icon-selected
#952927
--hop-status-negative-surface
#fde6e5
--hop-status-negative-surface-disabled
#fdf6f6
--hop-status-negative-surface-hover
#ffd6d3
--hop-status-negative-surface-press
#ffbcb7
--hop-status-negative-surface-selected
#fde6e5
--hop-status-negative-surface-strong
#ff8e8e
--hop-status-negative-text
#ba2d2d
--hop-status-negative-text-disabled
#ff8e8e
--hop-status-negative-text-hover
#952927
--hop-status-negative-text-press
#6c2320
--hop-status-negative-text-selected
#952927

Inactive

NameValuePreview
--hop-status-inactive-border
#959593
--hop-status-inactive-border-disabled
#ecebe8
--hop-status-inactive-border-hover
#777775
--hop-status-inactive-border-press
#6c6c6b
--hop-status-inactive-border-selected
#505050
--hop-status-inactive-icon
#636362
--hop-status-inactive-icon-disabled
#b3b3b1
--hop-status-inactive-icon-hover
#505050
--hop-status-inactive-icon-press
#3c3c3c
--hop-status-inactive-icon-selected
#505050
--hop-status-inactive-surface
#ecebe8
--hop-status-inactive-surface-disabled
#f8f6f3
--hop-status-inactive-surface-hover
#e0dfdd
--hop-status-inactive-surface-press
#ccccca
--hop-status-inactive-surface-selected
#ecebe8
--hop-status-inactive-surface-strong
#ccccca
--hop-status-inactive-text
#636362
--hop-status-inactive-text-disabled
#b3b3b1
--hop-status-inactive-text-hover
#505050
--hop-status-inactive-text-press
#3c3c3c
--hop-status-inactive-text-selected
#505050

Option 1

NameValuePreview
--hop-status-option1-border
#5d9acd
--hop-status-option1-border-disabled
#d9efff
--hop-status-option1-border-hover
#3a7bb2
--hop-status-option1-border-press
#2e70a8
--hop-status-option1-border-selected
#0a538b
--hop-status-option1-icon
#23669f
--hop-status-option1-icon-disabled
#81b9e4
--hop-status-option1-icon-hover
#0a538b
--hop-status-option1-icon-press
#003d70
--hop-status-option1-icon-selected
#0a538b
--hop-status-option1-surface
#d9efff
--hop-status-option1-surface-disabled
#f0f8ff
--hop-status-option1-surface-hover
#bae6ff
--hop-status-option1-surface-press
#9fd2f7
--hop-status-option1-surface-selected
#d9efff
--hop-status-option1-surface-strong
#81b9e4
--hop-status-option1-text
#23669f
--hop-status-option1-text-disabled
#81b9e4
--hop-status-option1-text-hover
#0a538b
--hop-status-option1-text-press
#003d70
--hop-status-option1-text-selected
#0a538b

Option 2

NameValuePreview
--hop-status-option2-border
#8d91dc
--hop-status-option2-border-disabled
#eae9fb
--hop-status-option2-border-hover
#6b6ecc
--hop-status-option2-border-press
#5f61c5
--hop-status-option2-border-selected
#433fac
--hop-status-option2-icon
#5454be
--hop-status-option2-icon-disabled
#aeb3e8
--hop-status-option2-icon-hover
#433fac
--hop-status-option2-icon-press
#322b8d
--hop-status-option2-icon-selected
#433fac
--hop-status-option2-surface
#eae9fb
--hop-status-option2-surface-disabled
#f6f5ff
--hop-status-option2-surface-hover
#ddddf7
--hop-status-option2-surface-press
#c8caf0
--hop-status-option2-surface-selected
#eae9fb
--hop-status-option2-surface-strong
#aeb3e8
--hop-status-option2-text
#5454be
--hop-status-option2-text-disabled
#aeb3e8
--hop-status-option2-text-hover
#433fac
--hop-status-option2-text-press
#322b8d
--hop-status-option2-text-selected
#433fac

Option 3

NameValuePreview
--hop-status-option3-border
#5da18c
--hop-status-option3-border-disabled
#cff4ef
--hop-status-option3-border-hover
#38836a
--hop-status-option3-border-press
#2b795e
--hop-status-option3-border-selected
#cff4ef
--hop-status-option3-icon
#206f54
--hop-status-option3-icon-disabled
#83beaf
--hop-status-option3-icon-hover
#055c41
--hop-status-option3-icon-press
#00452d
--hop-status-option3-icon-selected
#055c41
--hop-status-option3-surface
#cff4ef
--hop-status-option3-surface-disabled
#ddfdf9
--hop-status-option3-surface-hover
#bde8e1
--hop-status-option3-surface-press
#a3d6cb
--hop-status-option3-surface-selected
#055c41
--hop-status-option3-surface-strong
#83beaf
--hop-status-option3-text
#206f54
--hop-status-option3-text-disabled
#83beaf
--hop-status-option3-text-hover
#055c41
--hop-status-option3-text-press
#00452d
--hop-status-option3-text-selected
#055c41

Option 4

NameValuePreview
--hop-status-option4-border
#7c9aa3
--hop-status-option4-border-disabled
#e1eef1
--hop-status-option4-border-hover
#5e7b84
--hop-status-option4-border-press
#557079
--hop-status-option4-border-selected
#40535a
--hop-status-option4-icon
#4e6770
--hop-status-option4-icon-disabled
#9cb7be
--hop-status-option4-icon-hover
#40535a
--hop-status-option4-icon-press
#313e43
--hop-status-option4-icon-selected
#40535a
--hop-status-option4-surface
#e1eef1
--hop-status-option4-surface-disabled
#f2f8fa
--hop-status-option4-surface-hover
#d2e3e7
--hop-status-option4-surface-press
#bad0d5
--hop-status-option4-surface-selected
#e1eef1
--hop-status-option4-surface-strong
#9cb7be
--hop-status-option4-text
#4e6770
--hop-status-option4-text-disabled
#9cb7be
--hop-status-option4-text-hover
#40535a
--hop-status-option4-text-press
#313e43
--hop-status-option4-text-selected
#40535a

Option 5

NameValuePreview
--hop-status-option5-border
#a19382
--hop-status-option5-border-disabled
#f0eae3
--hop-status-option5-border-hover
#837463
--hop-status-option5-border-press
#776a59
--hop-status-option5-border-selected
#594f41
--hop-status-option5-icon
#6e6151
--hop-status-option5-icon-disabled
#bdb1a3
--hop-status-option5-icon-hover
#594f41
--hop-status-option5-icon-press
#433b31
--hop-status-option5-icon-selected
#594f41
--hop-status-option5-surface
#f0eae3
--hop-status-option5-surface-disabled
#fef6ef
--hop-status-option5-surface-hover
#e5ded6
--hop-status-option5-surface-press
#d4cbc0
--hop-status-option5-surface-selected
#f0eae3
--hop-status-option5-surface-strong
#bdb1a3
--hop-status-option5-text
#6e6151
--hop-status-option5-text-disabled
#bdb1a3
--hop-status-option5-text-hover
#594f41
--hop-status-option5-text-press
#433b31
--hop-status-option5-text-selected
#594f41

Option 6

NameValuePreview
--hop-status-option6-border
#c28b12
--hop-status-option6-border-disabled
#fff2b8
--hop-status-option6-border-hover
#996f08
--hop-status-option6-border-press
#8b6609
--hop-status-option6-border-selected
#654c0d
--hop-status-option6-icon
#7e5e0a
--hop-status-option6-icon-disabled
#e2a934
--hop-status-option6-icon-hover
#654c0d
--hop-status-option6-icon-press
#4b390f
--hop-status-option6-icon-selected
#654c0d