Color

Spiral's colors are built as a functional system, not a collection of swatches. Each color is defined by role and intent, helping teams communicate meaning clearly through hierarchy, states, and feedback. This ensures interfaces feel predictable, accessible, and easy to understand no matter the context.

Theme tokens

Primary tokens

NameLight modeDark mode

--ds-primary-darker

--ds-blue-800

--ds-blue-200

--ds-primary-dark

--ds-blue-600

--ds-blue-300

--ds-primary-base

--ds-blue-500

--ds-primary-light

--ds-blue-200

--ds-blue-alpha-24

--ds-primary-lighter

--ds-blue-50

--ds-blue-alpha-16

Background tokens

NameLight modeDark mode

--ds-bg-default

--ds-white

--ds-grey-950

--ds-bg-surface

--ds-grey-50

--ds-grey-800

--ds-bg-layers

--ds-grey-100

--ds-grey-700

--ds-bg-subtle

--ds-grey-200

--ds-grey-600

--ds-bg-muted

--ds-grey-300

--ds-grey-500

--ds-bg-inverse

--ds-grey-950

--ds-grey-25

Text tokens

NameLight modeDark mode

--ds-text-strong

--ds-grey-950

--ds-white

--ds-text-sub

--ds-grey-500

--ds-grey-300

--ds-text-soft

--ds-grey-400

--ds-text-placeholder

--ds-grey-300

--ds-grey-400

--ds-text-disabled

--ds-grey-200

--ds-grey-600

--ds-text-inverse

--ds-white

--ds-grey-950

--ds-text-accent

--ds-primary-base

Stroke tokens

NameLight modeDark mode

--ds-stroke-soft

--ds-opacity-black-5

--ds-opacity-white-5

--ds-stroke-mild

--ds-opacity-black-10

--ds-opacity-white-10

--ds-stroke-strong

--ds-opacity-black-20

--ds-opacity-white-20

--ds-stroke-dark

--ds-opacity-black-100

--ds-opacity-white-100

--ds-stroke-inverse

--ds-opacity-white-100

--ds-opacity-black-100

Icon tokens

NameLight modeDark mode

--ds-icon-strong

--ds-grey-950

--ds-white

--ds-icon-sub

--ds-grey-500

--ds-grey-400

--ds-icon-soft

--ds-grey-400

--ds-grey-500

--ds-icon-disabled

--ds-grey-300

--ds-grey-600

--ds-icon-inverse

--ds-white

--ds-grey-950

Info

NameLight modeDark mode

--ds-info-dark

--ds-blue-900

--ds-blue-400

--ds-info-base

--ds-blue-500

--ds-blue-600

--ds-info-light

--ds-blue-200

--ds-blue-alpha-24

--ds-info-lighter

--ds-blue-50

--ds-blue-alpha-16

Error

NameLight modeDark mode

--ds-error-dark

--ds-red-900

--ds-red-400

--ds-error-base

--ds-red-500

--ds-red-600

--ds-error-hover

--ds-red-600

--ds-red-500

--ds-error-light

--ds-red-200

--ds-red-alpha-24

--ds-error-lighter

--ds-red-50

--ds-red-alpha-16

Warning

NameLight modeDark mode

--ds-warning-dark

--ds-yellow-900

--ds-yellow-400

--ds-warning-base

--ds-yellow-500

--ds-warning-light

--ds-yellow-200

--ds-yellow-alpha-24

--ds-warning-lighter

--ds-yellow-50

--ds-yellow-alpha-16

Success

NameLight modeDark mode

--ds-success-dark

--ds-green-900

--ds-green-400

--ds-success-base

--ds-green-500

--ds-success-light

--ds-green-200

--ds-green-alpha-24

--ds-success-lighter

--ds-green-50

--ds-green-alpha-16

Feature

NameLight modeDark mode

--ds-feature-dark

--ds-purple-900

--ds-purple-400

--ds-feature-base

--ds-purple-500

--ds-purple-600

--ds-feature-light

--ds-purple-200

--ds-purple-alpha-24

--ds-feature-lighter

--ds-purple-50

--ds-purple-alpha-16

Verified

NameLight modeDark mode

--ds-verified-dark

--ds-sky-900

--ds-sky-400

--ds-verified-base

--ds-sky-500

--ds-sky-600

--ds-verified-light

--ds-sky-200

--ds-sky-alpha-24

--ds-verified-lighter

--ds-sky-50

--ds-sky-alpha-16

Highlight

NameLight modeDark mode

--ds-highlight-dark

--ds-pink-900

--ds-pink-400

--ds-highlight-base

--ds-pink-500

--ds-pink-600

--ds-highlight-light

--ds-pink-200

--ds-pink-alpha-24

--ds-highlight-lighter

--ds-pink-50

--ds-pink-alpha-16

Stable

NameLight modeDark mode

--ds-stable-dark

--ds-teal-900

--ds-teal-400

--ds-stable-base

--ds-teal-500

--ds-teal-600

--ds-stable-light

--ds-teal-200

--ds-teal-alpha-24

--ds-stable-lighter

--ds-teal-50

--ds-teal-alpha-16

Faded

NameLight modeDark mode

--ds-faded-dark

--ds-grey-900

--ds-grey-400

--ds-faded-base

--ds-grey-500

--ds-grey-600

--ds-faded-light

--ds-grey-200

--ds-grey-alpha-24

--ds-faded-lighter

--ds-grey-50

--ds-grey-alpha-16

Opacity tokens

NameLight modeDark mode

--ds-opacity-0

--ds-opacity-white-0

--ds-opacity-black-0

--ds-opacity-1

--ds-opacity-white-5

--ds-opacity-black-5

--ds-opacity-2

--ds-opacity-white-10

--ds-opacity-black-10

--ds-opacity-3

--ds-opacity-white-20

--ds-opacity-black-20

--ds-opacity-4

--ds-opacity-white-30

--ds-opacity-black-30

--ds-opacity-5

--ds-opacity-white-40

--ds-opacity-black-40

--ds-opacity-6

--ds-opacity-white-50

--ds-opacity-black-50

--ds-opacity-7

--ds-opacity-white-60

--ds-opacity-black-60

--ds-opacity-8

--ds-opacity-white-70

--ds-opacity-black-70

--ds-opacity-9

--ds-opacity-white-80

--ds-opacity-black-80

--ds-opacity-10

--ds-opacity-white-90

--ds-opacity-black-90

--ds-opacity-11

--ds-opacity-white-100

--ds-opacity-black-100

The palette

White and Black

White--ds-white

HEX:#ffffff

HSL:0, 0%, 100%

RGB:255, 255, 255

Black--ds-black

HEX:#000000

HSL:0, 0%, 0%

RGB:0, 0, 0

Grey

Grey 25--ds-grey-25

HEX:#fafafa

HSL:0, 0%, 98%

RGB:250, 250, 250

Grey 50--ds-grey-50

HEX:#f7f7f7

HSL:0, 0%, 97%

RGB:247, 247, 247

Grey 100--ds-grey-100

HEX:#f5f5f5

HSL:0, 0%, 96%

RGB:245, 245, 245

Grey 200--ds-grey-200

HEX:#d9d9d9

HSL:0, 0%, 85%

RGB:217, 217, 217

Grey 300--ds-grey-300

HEX:#d1d1d1

HSL:0, 0%, 82%

RGB:209, 209, 209

Grey 400--ds-grey-400

HEX:#a3a3a3

HSL:0, 0%, 64%

RGB:163, 163, 163

Grey 500--ds-grey-500

HEX:#7b7b7b

HSL:0, 0%, 48%

RGB:123, 123, 123

Grey 600--ds-grey-600

HEX:#5c5c5c

HSL:0, 0%, 36%

RGB:92, 92, 92

Grey 650--ds-grey-650

HEX:#474747

HSL:0, 0%, 28%

RGB:71, 71, 71

Grey 700--ds-grey-700

HEX:#333333

HSL:0, 0%, 20%

RGB:51, 51, 51

Grey 800--ds-grey-800

HEX:#292929

HSL:0, 0%, 16%

RGB:41, 41, 41

Grey 900--ds-grey-900

HEX:#212121

HSL:0, 0%, 13%

RGB:33, 33, 33

Grey 950--ds-grey-950

HEX:#171717

HSL:0, 0%, 9%

RGB:23, 23, 23

Grey alpha 24--ds-grey-alpha-24

Value:rgba(123, 123, 123, 0.24)

Grey alpha 16--ds-grey-alpha-16

Value:rgba(123, 123, 123, 0.16)

Grey alpha 10--ds-grey-alpha-10

Value:rgba(123, 123, 123, 0.1)

Blue

Blue 50--ds-blue-50

HEX:#ecf4fe

HSL:213, 90%, 96%

RGB:236, 244, 254

Blue 100--ds-blue-100

HEX:#d4e6fc

HSL:213, 87%, 91%

RGB:212, 230, 252

Blue 200--ds-blue-200

HEX:#b3d5fb

HSL:212, 90%, 84%

RGB:179, 213, 251

Blue 300--ds-blue-300

HEX:#80bbf9

HSL:211, 91%, 74%

RGB:128, 187, 249

Blue 400--ds-blue-400

HEX:#4797f6

HSL:213, 91%, 62%

RGB:71, 151, 246

Blue 500--ds-blue-500

HEX:#4797f6

HSL:213, 91%, 62%

RGB:71, 151, 246

Blue 600--ds-blue-600

HEX:#1d70f1

HSL:217, 88%, 53%

RGB:29, 112, 241

Blue 700--ds-blue-700

HEX:#0036d7

HSL:225, 100%, 42%

RGB:0, 54, 215

Blue 800--ds-blue-800

HEX:#002bab

HSL:225, 100%, 34%

RGB:0, 43, 171

Blue 900--ds-blue-900

HEX:#062a86

HSL:223, 91%, 27%

RGB:6, 42, 134

Blue 950--ds-blue-950

HEX:#0b1b50

HSL:226, 76%, 18%

RGB:11, 27, 80

Blue alpha 24--ds-blue-alpha-24

Value:rgba(71, 151, 246, 0.24)

Blue alpha 16--ds-blue-alpha-16

Value:rgba(71, 151, 246, 0.16)

Blue alpha 10--ds-blue-alpha-10

Value:rgba(71, 151, 246, 0.1)

Sky

Sky 50--ds-sky-50

HEX:#edf8fe

HSL:201, 89%, 96%

RGB:237, 248, 254

Sky 100--ds-sky-100

HEX:#d9effd

HSL:203, 90%, 92%

RGB:217, 239, 253

Sky 200--ds-sky-200

HEX:#ace1fb

HSL:200, 91%, 83%

RGB:172, 225, 251

Sky 300--ds-sky-300

HEX:#65cbf8

HSL:198, 91%, 68%

RGB:101, 203, 248

Sky 400--ds-sky-400

HEX:#00b2f2

HSL:196, 100%, 47%

RGB:0, 178, 242

Sky 500--ds-sky-500

HEX:#0098e1

HSL:199, 100%, 44%

RGB:0, 152, 225

Sky 600--ds-sky-600

HEX:#0076bb

HSL:202, 100%, 37%

RGB:0, 118, 187

Sky 700--ds-sky-700

HEX:#005c93

HSL:202, 100%, 29%

RGB:0, 92, 147

Sky 800--ds-sky-800

HEX:#004d77

HSL:201, 100%, 23%

RGB:0, 77, 119

Sky 900--ds-sky-900

HEX:#004061

HSL:200, 100%, 19%

RGB:0, 64, 97

Sky 950--ds-sky-950

HEX:#00293f

HSL:201, 100%, 12%

RGB:0, 41, 63

Sky alpha 24--ds-sky-alpha-24

Value:rgba(0, 152, 225, 0.24)

Sky alpha 16--ds-sky-alpha-16

Value:rgba(0, 152, 225, 0.16)

Sky alpha 10--ds-sky-alpha-10

Value:rgba(0, 152, 225, 0.1)

Red

Red 50--ds-red-50

HEX:#fff0f0

HSL:0, 100%, 97%

RGB:255, 240, 240

Red 100--ds-red-100

HEX:#ffdede

HSL:0, 100%, 94%

RGB:255, 222, 222

Red 200--ds-red-200

HEX:#ffc3c4

HSL:359, 100%, 88%

RGB:255, 195, 196

Red 300--ds-red-300

HEX:#ff9a9b

HSL:359, 100%, 80%

RGB:255, 154, 155

Red 400--ds-red-400

HEX:#ff6466

HSL:359, 100%, 70%

RGB:255, 100, 102

Red 500--ds-red-500

HEX:#fe393b

HSL:359, 99%, 61%

RGB:254, 57, 59

Red 600--ds-red-600

HEX:#f01d21

HSL:359, 88%, 53%

RGB:240, 29, 33

Red 700--ds-red-700

HEX:#c4171b

HSL:359, 79%, 43%

RGB:196, 23, 27

Red 800--ds-red-800

HEX:#a01518

HSL:359, 77%, 35%

RGB:160, 21, 24

Red 900--ds-red-900

HEX:#841517

HSL:359, 73%, 30%

RGB:132, 21, 23

Red 950--ds-red-950

HEX:#430b0c

HSL:359, 72%, 15%

RGB:67, 11, 12

Red alpha 24--ds-red-alpha-24

Value:rgba(254, 57, 59, 0.24)

Red alpha 16--ds-red-alpha-16

Value:rgba(254, 57, 59, 0.16)

Red alpha 10--ds-red-alpha-10

Value:rgba(254, 57, 59, 0.1)

Yellow

Yellow 50--ds-yellow-50

HEX:#fefce6

HSL:55, 92%, 95%

RGB:254, 252, 230

Yellow 100--ds-yellow-100

HEX:#fff9c0

HSL:54, 100%, 88%

RGB:255, 249, 192

Yellow 200--ds-yellow-200

HEX:#fff08a

HSL:52, 100%, 77%

RGB:255, 240, 138

Yellow 300--ds-yellow-300

HEX:#ffdf54

HSL:49, 100%, 66%

RGB:255, 223, 84

Yellow 400--ds-yellow-400

HEX:#ffc939

HSL:44, 100%, 61%

RGB:255, 201, 57

Yellow 500--ds-yellow-500

HEX:#f0af30

HSL:40, 86%, 56%

RGB:240, 175, 48

Yellow 600--ds-yellow-600

HEX:#ca8225

HSL:34, 69%, 47%

RGB:202, 130, 37

Yellow 700--ds-yellow-700

HEX:#9f591b

HSL:28, 71%, 36%

RGB:159, 89, 27

Yellow 800--ds-yellow-800

HEX:#834518

HSL:25, 69%, 30%

RGB:131, 69, 24

Yellow 900--ds-yellow-900

HEX:#703816

HSL:23, 67%, 26%

RGB:112, 56, 22

Yellow 950--ds-yellow-950

HEX:#3e1e0c

HSL:22, 68%, 15%

RGB:62, 30, 12

Yellow alpha 24--ds-yellow-alpha-24

Value:rgba(240, 175, 48, 0.24)

Yellow alpha 16--ds-yellow-alpha-16

Value:rgba(240, 175, 48, 0.16)

Yellow alpha 10--ds-yellow-alpha-10

Value:rgba(240, 175, 48, 0.1)

Green

Green 50--ds-green-50

HEX:#ebfef3

HSL:145, 90%, 96%

RGB:235, 254, 243

Green 100--ds-green-100

HEX:#d2fde5

HSL:147, 91%, 91%

RGB:210, 253, 229

Green 200--ds-green-200

HEX:#a8facb

HSL:146, 89%, 82%

RGB:168, 250, 203

Green 300--ds-green-300

HEX:#64f5a6

HSL:147, 88%, 68%

RGB:100, 245, 166

Green 400--ds-green-400

HEX:#00e97b

HSL:152, 100%, 46%

RGB:0, 233, 123

Green 500--ds-green-500

HEX:#00ce5c

HSL:147, 100%, 40%

RGB:0, 206, 92

Green 600--ds-green-600

HEX:#00a348

HSL:147, 100%, 32%

RGB:0, 163, 72

Green 700--ds-green-700

HEX:#007e3a

HSL:148, 100%, 25%

RGB:0, 126, 58

Green 800--ds-green-800

HEX:#006331

HSL:150, 100%, 19%

RGB:0, 99, 49

Green 900--ds-green-900

HEX:#00502a

HSL:152, 100%, 16%

RGB:0, 80, 42

Green 950--ds-green-950

HEX:#002b17

HSL:152, 100%, 8%

RGB:0, 43, 23

Green alpha 24--ds-green-alpha-24

Value:rgba(0, 206, 92, 0.24)

Green alpha 16--ds-green-alpha-16

Value:rgba(0, 206, 92, 0.16)

Green alpha 10--ds-green-alpha-10

Value:rgba(0, 206, 92, 0.1)

Orange

Orange 50--ds-orange-50

HEX:#fff6eb

HSL:33, 100%, 96%

RGB:255, 246, 235

Orange 100--ds-orange-100

HEX:#ffebd1

HSL:34, 100%, 91%

RGB:255, 235, 209

Orange 200--ds-orange-200

HEX:#ffd3a5

HSL:31, 100%, 82%

RGB:255, 211, 165

Orange 300--ds-orange-300

HEX:#ffb370

HSL:28, 100%, 72%

RGB:255, 179, 112

Orange 400--ds-orange-400

HEX:#ff8941

HSL:23, 100%, 63%

RGB:255, 137, 65

Orange 500--ds-orange-500

HEX:#ff6a28

HSL:18, 100%, 58%

RGB:255, 106, 40

Orange 600--ds-orange-600

HEX:#f54f20

HSL:13, 91%, 54%

RGB:245, 79, 32

Orange 700--ds-orange-700

HEX:#c6391a

HSL:11, 77%, 44%

RGB:198, 57, 26

Orange 800--ds-orange-800

HEX:#9d2d17

HSL:10, 74%, 35%

RGB:157, 45, 23

Orange 900--ds-orange-900

HEX:#7d2714

HSL:11, 72%, 28%

RGB:125, 39, 20

Orange 950--ds-orange-950

HEX:#40140b

HSL:10, 71%, 15%

RGB:64, 20, 11

Orange alpha 24--ds-orange-alpha-24

Value:rgba(255, 106, 40, 0.24)

Orange alpha 16--ds-orange-alpha-16

Value:rgba(255, 106, 40, 0.16)

Orange alpha 10--ds-orange-alpha-10

Value:rgba(255, 106, 40, 0.1)

Pink

Pink 50--ds-pink-50

HEX:#ffeff7

HSL:330, 100%, 97%

RGB:255, 239, 247

Pink 100--ds-pink-100

HEX:#ffe2f0

HSL:331, 100%, 94%

RGB:255, 226, 240

Pink 200--ds-pink-200

HEX:#ffc7e3

HSL:330, 100%, 89%

RGB:255, 199, 227

Pink 300--ds-pink-300

HEX:#ff9bcc

HSL:331, 100%, 80%

RGB:255, 155, 204

Pink 400--ds-pink-400

HEX:#ff61ab

HSL:332, 100%, 69%

RGB:255, 97, 171

Pink 500--ds-pink-500

HEX:#fb378c

HSL:334, 96%, 60%

RGB:251, 55, 140

Pink 600--ds-pink-600

HEX:#ee186a

HSL:337, 86%, 51%

RGB:238, 24, 106

Pink 700--ds-pink-700

HEX:#c81151

HSL:339, 84%, 43%

RGB:200, 17, 81

Pink 800--ds-pink-800

HEX:#a31042

HSL:340, 82%, 35%

RGB:163, 16, 66

Pink 900--ds-pink-900

HEX:#861139

HSL:339, 77%, 30%

RGB:134, 17, 57

Pink 950--ds-pink-950

HEX:#4c0820

HSL:339, 81%, 16%

RGB:76, 8, 32

Pink alpha 24--ds-pink-alpha-24

Value:rgba(251, 55, 140, 0.24)

Pink alpha 16--ds-pink-alpha-16

Value:rgba(251, 55, 140, 0.16)

Pink alpha 10--ds-pink-alpha-10

Value:rgba(251, 55, 140, 0.1)

Teal

Teal 50--ds-teal-50

HEX:#ebfef9

HSL:164, 90%, 96%

RGB:235, 254, 249

Teal 100--ds-teal-100

HEX:#bffcf0

HSL:168, 91%, 87%

RGB:191, 252, 240

Teal 200--ds-teal-200

HEX:#7ef8e3

HSL:170, 90%, 73%

RGB:126, 248, 227

Teal 300--ds-teal-300

HEX:#27f0d4

HSL:172, 87%, 55%

RGB:39, 240, 212

Teal 400--ds-teal-400

HEX:#00e0c5

HSL:173, 100%, 44%

RGB:0, 224, 197

Teal 500--ds-teal-500

HEX:#00b7a3

HSL:173, 100%, 36%

RGB:0, 183, 163

Teal 600--ds-teal-600

HEX:#008e81

HSL:175, 100%, 28%

RGB:0, 142, 129

Teal 700--ds-teal-700

HEX:#007168

HSL:175, 100%, 22%

RGB:0, 113, 104

Teal 800--ds-teal-800

HEX:#005953

HSL:176, 100%, 17%

RGB:0, 89, 83

Teal 900--ds-teal-900

HEX:#004b46

HSL:176, 100%, 15%

RGB:0, 75, 70

Teal 950--ds-teal-950

HEX:#002a29

HSL:179, 100%, 8%

RGB:0, 42, 41

Teal alpha 24--ds-teal-alpha-24

Value:rgba(0, 183, 163, 0.24)

Teal alpha 16--ds-teal-alpha-16

Value:rgba(0, 183, 163, 0.16)

Teal alpha 10--ds-teal-alpha-10

Value:rgba(0, 183, 163, 0.1)

Purple

Purple 50--ds-purple-50

HEX:#faf3fe

HSL:278, 85%, 97%

RGB:250, 243, 254

Purple 100--ds-purple-100

HEX:#f2e4fd

HSL:274, 86%, 94%

RGB:242, 228, 253

Purple 200--ds-purple-200

HEX:#e7cefc

HSL:273, 88%, 90%

RGB:231, 206, 252

Purple 300--ds-purple-300

HEX:#d5a8f9

HSL:273, 87%, 82%

RGB:213, 168, 249

Purple 400--ds-purple-400

HEX:#bb73f6

HSL:273, 88%, 71%

RGB:187, 115, 246

Purple 500--ds-purple-500

HEX:#a13ef1

HSL:273, 86%, 59%

RGB:161, 62, 241

Purple 600--ds-purple-600

HEX:#8b0de8

HSL:275, 89%, 48%

RGB:139, 13, 232

Purple 700--ds-purple-700

HEX:#7600cf

HSL:274, 100%, 41%

RGB:118, 0, 207

Purple 800--ds-purple-800

HEX:#6300a5

HSL:276, 100%, 32%

RGB:99, 0, 165

Purple 900--ds-purple-900

HEX:#510081

HSL:278, 100%, 25%

RGB:81, 0, 129

Purple 950--ds-purple-950

HEX:#350059

HSL:276, 100%, 17%

RGB:53, 0, 89

Purple alpha 24--ds-purple-alpha-24

Value:rgba(161, 62, 241, 0.24)

Purple alpha 16--ds-purple-alpha-16

Value:rgba(161, 62, 241, 0.16)

Purple alpha 10--ds-purple-alpha-10

Value:rgba(161, 62, 241, 0.1)

Opacity scale

black 0--ds-opacity-black-0

Value:rgba(0, 0, 0, 0)

black 5--ds-opacity-black-5

Value:rgba(0, 0, 0, 0.05)

black 10--ds-opacity-black-10

Value:rgba(0, 0, 0, 0.1)

black 20--ds-opacity-black-20

Value:rgba(0, 0, 0, 0.2)

black 30--ds-opacity-black-30

Value:rgba(0, 0, 0, 0.3)

black 40--ds-opacity-black-40

Value:rgba(0, 0, 0, 0.4)

black 50--ds-opacity-black-50

Value:rgba(0, 0, 0, 0.5)

black 60--ds-opacity-black-60

Value:rgba(0, 0, 0, 0.6)

black 70--ds-opacity-black-70

Value:rgba(0, 0, 0, 0.7)

black 80--ds-opacity-black-80

Value:rgba(0, 0, 0, 0.8)

black 90--ds-opacity-black-90

Value:rgba(0, 0, 0, 0.9)

black 100--ds-opacity-black-100

Value:rgba(0, 0, 0, 1)

white 0--ds-opacity-white-0

Value:rgba(255, 255, 255, 0)

white 5--ds-opacity-white-5

Value:rgba(255, 255, 255, 0.05)

white 10--ds-opacity-white-10

Value:rgba(255, 255, 255, 0.1)

white 20--ds-opacity-white-20

Value:rgba(255, 255, 255, 0.2)

white 30--ds-opacity-white-30

Value:rgba(255, 255, 255, 0.3)

white 40--ds-opacity-white-40

Value:rgba(255, 255, 255, 0.4)

white 50--ds-opacity-white-50

Value:rgba(255, 255, 255, 0.5)

white 60--ds-opacity-white-60

Value:rgba(255, 255, 255, 0.6)

white 70--ds-opacity-white-70

Value:rgba(255, 255, 255, 0.7)

white 80--ds-opacity-white-80

Value:rgba(255, 255, 255, 0.8)

white 90--ds-opacity-white-90

Value:rgba(255, 255, 255, 0.9)

white 100--ds-opacity-white-100

Value:rgba(255, 255, 255, 1)