Theme

Surface Main

surface-main-light

#FFFFFF

surface-main

surface-main-dark

#272D35

dark:surface-main-dark

Surface Second

surface-second-light

#F4F6F8

surface-second

surface-second-dark

#394047

dark:surface-second-dark

Surface Third

surface-third-light

#DFE4EB

surface-third

surface-third-dark

#5D646D

dark:surface-third-dark

Surface Invert

surface-invert-light

#272D35

surface-invert

surface-invert-dark

#F4F6F8

dark:surface-invert-dark

Surface Brand Primary 1

surface-brand-primary-1-light

#FF7C15

surface-brand-primary-1

surface-brand-primary-1-dark

#FF7C15

dark:surface-brand-primary-1-dark

Surface Brand Primary 1 Hover

surface-brand-primary-1-hover-light

#D56711

hover:enabled:surface-brand-primary-1-hover

surface-brand-primary-1-hover-dark

#D56711

dark:hover:enabled:surface-brand-primary-1-hover-dark

Surface Brand Primary 2

surface-brand-primary-2-light

#FFC99F

surface-brand-primary-2

surface-brand-primary-2-dark

#FFC99F

dark:surface-brand-primary-2-dark

Surface Brand Primary 2 Hover

surface-brand-primary-2-hover-light

#FFAF71

hover:enabled:surface-brand-primary-2-hover

surface-brand-primary-2-hover-dark

#FFAF71

dark:hover:enabled:surface-brand-primary-2-hover-dark

Surface Brand Primary Subtle

surface-brand-primary-subtle-light

#FFFCFB

surface-brand-primary-subtle

surface-brand-primary-subtle-dark

#FFFCFB

dark:surface-brand-primary-subtle-dark

Surface Brand Secondary 1

surface-brand-secondary-1-light

#1568E4

surface-brand-secondary-1

surface-brand-secondary-1-dark

#1568E4

dark:surface-brand-secondary-1-dark

Surface Brand Secondary 1 Hover

surface-brand-secondary-1-hover-light

#1156BD

hover:enabled:surface-brand-secondary-1-hover

surface-brand-secondary-1-hover-dark

#1156BD

dark:hover:enabled:surface-brand-secondary-1-hover-dark

Surface Brand Secondary 2

surface-brand-secondary-2-light

#9EC1F4

surface-brand-secondary-2

surface-brand-secondary-2-dark

#9EC1F4

dark:surface-brand-secondary-2-dark

Surface Brand Secondary 2 Hover

surface-brand-secondary-2-hover-light

#71A3EE

hover:enabled:surface-brand-secondary-2-hover

surface-brand-secondary-2-hover-dark

#71A3EE

dark:hover:enabled:surface-brand-secondary-2-hover-dark

Surface Brand Secondary Subtle

surface-brand-secondary-subtle-light

#E3EDFB

surface-brand-secondary-subtle

surface-brand-secondary-subtle-dark

#030F20

dark:surface-brand-secondary-subtle-dark

Surface Primary

surface-primary-light

#DFE4EB

surface-primary

surface-primary-dark

#5D646D

dark:surface-primary-dark

Surface Secondary

surface-secondary-light

#A5ADB8

surface-secondary

surface-secondary-dark

#A5ADB8

dark:surface-secondary-dark

Surface Success

surface-success-light

#E7F8E5

surface-success

surface-success-dark

#E7F8E5

dark:surface-success-dark

Primary

primary-light

#272D35

primary

primary-dark

#F6F8FA

dark:primary-dark

Secondary

secondary-light

#4B525A

secondary

secondary-dark

#EFF1F5

dark:secondary-dark

Surface Error

surface-error-light

#FBE7E3

surface-error

surface-error-dark

#FBE7E3

dark:surface-error-dark

Surface Information

surface-information-light

#DCEEF8

surface-information

surface-information-dark

#DCEEF8

dark:surface-information-dark

Surface Warning

surface-warning-light

#FFF2D6

surface-warning

surface-warning-dark

#FFF2D6

dark:surface-warning-dark

Tertiary

tertiary-light

#818992

tertiary

tertiary-dark

#DFE4EB

dark:tertiary-dark

Invert

invert-light

#FFFFFF

invert

invert-dark

#000000

dark:invert-dark

Brand Primary

brand-primary-light

#FF7C15

brand-primary

brand-primary-dark

#FF7C15

dark:brand-primary-dark

Brand Secondary

brand-secondary-light

#1156BD

brand-secondary

brand-secondary-dark

#1156BD

dark:brand-secondary-dark

Link Main

link-main-light

#0E4496

link-main

link-main-dark

#0E4496

dark:link-main-dark

Link Main Hover

link-main-hover-light

#072147

hover:enabled:link-main-hover

link-main-hover-dark

#072147

dark:hover:enabled:link-main-hover-dark

Success

success-light

#23BD12

success

success-dark

#23BD12

dark:success-dark

Error

error-light

#DB3614

error

error-dark

#DB3614

dark:error-dark

Information

information-light

#1780C1

information

information-dark

#1780C1

dark:information-dark

Warning

warning-light

#F5A623

warning

warning-dark

#F5A623

dark:warning-dark

Surface Button

surface-button-light

#FF7C15

surface-button

surface-button-dark

#FF7C15

dark:surface-button-dark

Surface Button Hover

surface-button-hover-light

#D56711

hover:enabled:surface-button-hover

surface-button-hover-dark

#D56711

dark:hover:enabled:surface-button-hover-dark

Surface Button Text

surface-button-text-light

#FFFFFF

surface-button-text

surface-button-text-dark

#FFFFFF

dark:surface-button-text-dark

Surface Button Text Hover

surface-button-text-hover-light

#FFFFFF

hover:enabled:surface-button-text-hover

surface-button-text-hover-dark

#FFFFFF

dark:hover:enabled:surface-button-text-hover-dark

Surface Button Pressed

surface-button-pressed-light

#FF9643

active:surface-button-pressed

surface-button-pressed-dark

#FF9643

dark:active:surface-button-pressed-dark

Surface Button Text Pressed

surface-button-text-pressed-light

#FFFFFF

active:surface-button-text-pressed

surface-button-text-pressed-dark

#FFFFFF

dark:active:surface-button-text-pressed-dark

Surface Button Disabled

surface-button-disabled-light

#D4DBE4

surface-button-disabled

surface-button-disabled-dark

#D4DBE4

dark:surface-button-disabled-dark

Surface Button Alt

surface-button-alt-light

#1568E4

surface-button-alt

surface-button-alt-dark

#1568E4

dark:surface-button-alt-dark

Surface Button Alt Hover

surface-button-alt-hover-light

#1156BD

hover:enabled:surface-button-alt-hover

surface-button-alt-hover-dark

#1156BD

dark:hover:enabled:surface-button-alt-hover-dark

Surface Button Text Alt

surface-button-text-alt-light

#FFFFFF

surface-button-text-alt

surface-button-text-alt-dark

#FFFFFF

dark:surface-button-text-alt-dark

Surface Button Text Alt Hover

surface-button-text-alt-hover-light

#FFFFFF

hover:enabled:surface-button-text-alt-hover

surface-button-text-alt-hover-dark

#FFFFFF

dark:hover:enabled:surface-button-text-alt-hover-dark

Surface Button Alt Pressed

surface-button-alt-pressed-light

#9EC1F4

active:surface-button-alt-pressed

surface-button-alt-pressed-dark

#1156BD

dark:active:surface-button-alt-pressed-dark

Surface Button Text Alt Pressed

surface-button-text-alt-pressed-light

#FFFFFF

active:surface-button-text-alt-pressed

surface-button-text-alt-pressed-dark

#FFFFFF

dark:active:surface-button-text-alt-pressed-dark

Surface Button Alt Disabled

surface-button-alt-disabled-light

#D4DBE4

surface-button-alt-disabled

surface-button-alt-disabled-dark

#D4DBE4

dark:surface-button-alt-disabled-dark

System Alerts

system-success

#23BD12

system-success

system-error

#DB3614

system-error

system-warning

#F5A623

system-warning

system-information

#1780C1

system-information

Neutral

neutral-25

#FAFCFE

neutral-25

neutral-50

#F6F8FA

neutral-50

neutral-100

#F4F6F8

neutral-100

neutral-150

#EFF1F5

neutral-150

neutral-200

#E2E7ED

neutral-200

neutral-300

#DFE4EB

neutral-300

neutral-400

#D4DBE4

neutral-400

neutral-500

#C9D2DD

neutral-500

neutral-600

#A5ADB8

neutral-600

neutral-700

#818992

neutral-700

neutral-800

#5D646D

neutral-800

neutral-850

#4B525A

neutral-850

neutral-900

#394047

neutral-900

neutral-950

#272D35

neutral-950

neutral-975

#151B22

neutral-975

Brand Primary Tints

brand-primary-tints-25

#FFFCFB

brand-primary-tints-25

brand-primary-tints-50

#FFEFE4

brand-primary-tints-50

brand-primary-tints-100

#FFE2CD

brand-primary-tints-100

brand-primary-tints-150

#FFD6B6

brand-primary-tints-150

brand-primary-tints-200

#FFC99F

brand-primary-tints-200

brand-primary-tints-300

#FFAF71

brand-primary-tints-300

brand-primary-tints-400

#FF9643

brand-primary-tints-400

brand-primary-tints-500

#FF7C15

brand-primary-tints-500

brand-primary-tints-600

#D56711

brand-primary-tints-600

brand-primary-tints-700

#AB520D

brand-primary-tints-700

brand-primary-tints-800

#823E08

brand-primary-tints-800

brand-primary-tints-850

#6D3306

brand-primary-tints-850

brand-primary-tints-900

#582904

brand-primary-tints-900

brand-primary-tints-950

#431E02

brand-primary-tints-950

brand-primary-tints-975

#2E1400

brand-primary-tints-975

Brand Secondary Tints

brand-secondary-tints-25

#FAFCFE

brand-secondary-tints-25

brand-secondary-tints-50

#E3EDFB

brand-secondary-tints-50

brand-secondary-tints-100

#CCDEF9

brand-secondary-tints-100

brand-secondary-tints-150

#B5D0F6

brand-secondary-tints-150

brand-secondary-tints-200

#9EC1F4

brand-secondary-tints-200

brand-secondary-tints-300

#71A3EE

brand-secondary-tints-300

brand-secondary-tints-400

#4386E9

brand-secondary-tints-400

brand-secondary-tints-500

#1568E4

brand-secondary-tints-500

brand-secondary-tints-600

#1156BD

brand-secondary-tints-600

brand-secondary-tints-700

#0E4496

brand-secondary-tints-700

brand-secondary-tints-800

#0A336E

brand-secondary-tints-800

brand-secondary-tints-850

#082A5B

brand-secondary-tints-850

brand-secondary-tints-900

#072147

brand-secondary-tints-900

brand-secondary-tints-950

#051834

brand-secondary-tints-950

brand-secondary-tints-975

#030F20

brand-secondary-tints-975

System Success Tints

system-success-tints-25

#FDFFFD

system-success-tints-25

system-success-tints-50

#E7F8E5

system-success-tints-50

system-success-tints-100

#D1F2CE

system-success-tints-100

system-success-tints-150

#BCEBB6

system-success-tints-150

system-success-tints-200

#A6E59F

system-success-tints-200

system-success-tints-300

#7AD770

system-success-tints-300

system-success-tints-400

#4FCA41

system-success-tints-400

system-success-tints-500

#23BD12

system-success-tints-500

system-success-tints-600

#1D9B0F

system-success-tints-600

system-success-tints-700

#16780C

system-success-tints-700

system-success-tints-800

#105608

system-success-tints-800

system-success-tints-850

#0D4507

system-success-tints-850

system-success-tints-900

#093305

system-success-tints-900

system-success-tints-950

#062204

system-success-tints-950

system-success-tints-975

#031102

system-success-tints-975

System Warning Tints

system-warning-tints-25

#FFF8EB

system-warning-tints-25

system-warning-tints-50

#FFF2D6

system-warning-tints-50

system-warning-tints-100

#FFE5AD

system-warning-tints-100

system-warning-tints-150

#FFD884

system-warning-tints-150

system-warning-tints-200

#FFCB5B

system-warning-tints-200

system-warning-tints-300

#FFBE32

system-warning-tints-300

system-warning-tints-400

#FFB01B

system-warning-tints-400

system-warning-tints-500

#F5A623

system-warning-tints-500

system-warning-tints-600

#C5831C

system-warning-tints-600

system-warning-tints-700

#946116

system-warning-tints-700

system-warning-tints-800

#63400F

system-warning-tints-800

system-warning-tints-850

#48300B

system-warning-tints-850

system-warning-tints-900

#312007

system-warning-tints-900

system-warning-tints-950

#1A1203

system-warning-tints-950

system-warning-tints-975

#0F0902

system-warning-tints-975

System Information Tints

system-information-tints-25

#E8F5FB

system-information-tints-25

system-information-tints-50

#DCEEF8

system-information-tints-50

system-information-tints-100

#C1E0F2

system-information-tints-100

system-information-tints-150

#A6D3EB

system-information-tints-150

system-information-tints-200

#8BC5E4

system-information-tints-200

system-information-tints-300

#70B7DD

system-information-tints-300

system-information-tints-400

#45A1D6

system-information-tints-400

system-information-tints-500

#1780C1

system-information-tints-500

system-information-tints-600

#13669A

system-information-tints-600

system-information-tints-700

#104E75

system-information-tints-700

system-information-tints-800

#0B384F

system-information-tints-800

system-information-tints-850

#072A3D

system-information-tints-850

system-information-tints-900

#052229

system-information-tints-900

system-information-tints-950

#031214

system-information-tints-950

system-information-tints-975

#01090A

system-information-tints-975

System Error Tints

system-error-tints-25

#FEFAFA

system-error-tints-25

system-error-tints-50

#FBE7E3

system-error-tints-50

system-error-tints-100

#F9D3CC

system-error-tints-100

system-error-tints-150

#F6C0B5

system-error-tints-150

system-error-tints-200

#F4AC9E

system-error-tints-200

system-error-tints-300

#EE8671

system-error-tints-300

system-error-tints-400

#E95F43

system-error-tints-400

system-error-tints-500

#DB3614

system-error-tints-500

system-error-tints-600

#BA2E11

system-error-tints-600

system-error-tints-700

#92240D

system-error-tints-700

system-error-tints-800

#66190A

system-error-tints-800

system-error-tints-850

#511408

system-error-tints-850

system-error-tints-900

#3C0E06

system-error-tints-900

system-error-tints-950

#270904

system-error-tints-950

system-error-tints-975

#120402

system-error-tints-975