Style Guide: Font & Color

Font

Interface – SF Compact

SF compact Regular 400
SF Compact Semi-Bold 600
SF Compact Bold 700

Dataframes – SF Mono

SF Mono

Color

DADOS Blue
RGB 15, 123, 182
Hex #0f7bb6
HSL 201, 85%, 39%
HWB 201, 6%, 29%
CMYK 92%, 32%, 0%, 29%
Ncol C35, 6%, 29%
DADOS Orange
RGB 245, 115, 32
HEX #f57320
HSL 23, 91%, 54%
HWB 23, 13%, 4%
CMYK 0%, 53%, 87%, 4%
Ncol R39, 13%, 4%
Highlight Blue
RGB 0, 145, 182
HEX #0091b6
HSL 192, 100%, 36%
HWB 192, 0%, 29%
CMYK 100%, 20%, 0%, 29%
Ncol C20, 0%, 29%
Highlight Orange
RGB 255, 176, 0
HEX #ffb000
HSL 41, 100%, 50%
HWB 41, 0%, 0%
CMYK 0%, 31%, 100%, 0%
Ncol R69, 0%, 0%

DADOS Gray

RGB 35, 31, 32
HEX #707070
HSL 345, 6%, 13%
HWB 345, 12%, 86%
CMYK 0%, 11%, 9%, 86%
Ncol M75, 12%, 86%

DADOS Charcoal

RGB 35, 31, 32
HEX #231f20
HSL 345, 6%, 13%
HWB 345, 12%, 86%
CMYK 0%, 11%, 9%, 86%
Ncol M75, 12%, 86%

DADOS RED

RGB 204, 0, 0
HEX #cc0000
HSL 0, 100%, 40%
HWB 0, 0%, 20%
CMYK 0%, 100%, 100%, 20%
Ncol R0, 0%, 20%

DADOS Green

RGB 122, 204, 0
HEX #7acc00
HSL 84, 100%, 40%
HWB 84, 0%, 20%
CMYK 40%, 0%, 100%, 20%
Ncol Y40, 0%, 20%

DADOS Light Gray

RGB 242, 242, 242
HEX #F3F0E7
HSL 0, 95%, 5%
HWB 0, 95%, 5%
CMYK 0%, 0%, 0%, 5%
Ncol R0, 95%, 5%

DADOS Apple White

RGB 243, 240, 231
HEX #F3F0E7
HSL 45, 33%, 93%
HWB 45, 91%, 5%
CMYK 0%, 1%, 5%, 5%
Ncol R75, 91%, 5%
Blue Gradient
Blue Gradient background: rgb(15,123,182);
background: linear-gradient(90deg, rgba(15,123,182,1) 0%, rgba(0,145,182,1) 100%);
Orange Gradient
Orange Gradient background: rgb(245,115,32);
background: linear-gradient(90deg, rgba(245,115,32,1) 0%, rgba(255,176,0,1) 100%);

UX Palettes

DADOS Base (color-blind safe by default)

DARK:

#1266A1

#55A103

#FFB000

#F75F00

#CE2B08

#F3F0E7

#0091B6

#E8906D

#DA89DE

#940E85

 

#D44B49

#B5DCEA

#4E71AD

#C71B6F

#FFDD00

#A4ABAB

#B26E77

#8A888A

#84B087

#487C8E

LIGHT:

#000A61

#55A103

#FFB000

#F75F00

#4EC693

#0091B6

#CE2B08

#A60B00

#B5DCEA

#1A94EB

 

#9B854D

#C71B6F

#FFDD00

#6D787D

#8A468A

#494D4D

#313333

#925A57

#3F7C41

#487C8E

DADOS base (default) List

/* Color Theme Swatches in Hex */
.DADOS-Base—Light-1-hex { color: #000A61; }
.DADOS-Base—Light-2-hex { color: #55A103; }
.DADOS-Base—Light-3-hex { color: #FFB000; }
.DADOS-Base—Light-4-hex { color: #F75F00; }
.DADOS-Base—Light-5-hex { color: #4EC693; }
.DADOS-Base—Light-6-hex { color: #0091B6; }
.DADOS-Base—Light-7-hex { color: #CE2B08; }
.DADOS-Base—Light-8-hex { color: #A60B00; }
.DADOS-Base—Light-9-hex { color: #B5DCEA; }
.DADOS-Base—Light-10-hex { color: #1A94EB; }
.DADOS-Base—Light-11-hex { color: #9B854D; }
.DADOS-Base—Light-12-hex { color: #C71B6F; }
.DADOS-Base—Light-13-hex { color: #FFDD00; }
.DADOS-Base—Light-14-hex { color: #6D787D; }
.DADOS-Base—Light-15-hex { color: #8A468A; }
.DADOS-Base—Light-16-hex { color: #494D4D; }
.DADOS-Base—Light-17-hex { color: #313333; }
.DADOS-Base—Light-18-hex { color: #925A57; }
.DADOS-Base—Light-19-hex { color: #3F7C41; }
.DADOS-Base—Light-20-hex { color: #487C8E; }

/* Color Theme Swatches in RGBA */
.DADOS-Base—Light-1-rgba { color: rgba(0, 10, 97, 1); }
.DADOS-Base—Light-2-rgba { color: rgba(85, 161, 3, 1); }
.DADOS-Base—Light-3-rgba { color: rgba(255, 176, 0, 1); }
.DADOS-Base—Light-4-rgba { color: rgba(247, 95, 0, 1); }
.DADOS-Base—Light-5-rgba { color: rgba(78, 198, 147, 1); }
.DADOS-Base—Light-6-rgba { color: rgba(0, 145, 182, 1); }
.DADOS-Base—Light-7-rgba { color: rgba(206, 43, 8, 1); }
.DADOS-Base—Light-8-rgba { color: rgba(166, 11, 0, 1); }
.DADOS-Base—Light-9-rgba { color: rgba(181, 220, 234, 1); }
.DADOS-Base—Light-10-rgba { color: rgba(26, 148, 235, 1); }
.DADOS-Base—Light-11-rgba { color: rgba(155, 133, 77, 1); }
.DADOS-Base—Light-12-rgba { color: rgba(199, 27, 111, 1); }
.DADOS-Base—Light-13-rgba { color: rgba(255, 221, 0, 1); }
.DADOS-Base—Light-14-rgba { color: rgba(109, 120, 125, 1); }
.DADOS-Base—Light-15-rgba { color: rgba(138, 70, 138, 1); }
.DADOS-Base—Light-16-rgba { color: rgba(73, 77, 77, 1); }
.DADOS-Base—Light-17-rgba { color: rgba(49, 51, 51, 1); }
.DADOS-Base—Light-18-rgba { color: rgba(146, 90, 87, 1); }
.DADOS-Base—Light-19-rgba { color: rgba(63, 124, 65, 1); }
.DADOS-Base—Light-20-rgba { color: rgba(72, 124, 142, 1); }

/* Color Theme Swatches in HSLA */
.DADOS-Base—Light-1-hsla { color: hsla(233, 100, 19, 1); }
.DADOS-Base—Light-2-hsla { color: hsla(88, 96, 32, 1); }
.DADOS-Base—Light-3-hsla { color: hsla(41, 100, 50, 1); }
.DADOS-Base—Light-4-hsla { color: hsla(23, 100, 48, 1); }
.DADOS-Base—Light-5-hsla { color: hsla(154, 51, 54, 1); }
.DADOS-Base—Light-6-hsla { color: hsla(192, 100, 35, 1); }
.DADOS-Base—Light-7-hsla { color: hsla(10, 92, 41, 1); }
.DADOS-Base—Light-8-hsla { color: hsla(3, 100, 32, 1); }
.DADOS-Base—Light-9-hsla { color: hsla(195, 55, 81, 1); }
.DADOS-Base—Light-10-hsla { color: hsla(204, 83, 51, 1); }
.DADOS-Base—Light-11-hsla { color: hsla(43, 33, 45, 1); }
.DADOS-Base—Light-12-hsla { color: hsla(330, 76, 44, 1); }
.DADOS-Base—Light-13-hsla { color: hsla(52, 100, 50, 1); }
.DADOS-Base—Light-14-hsla { color: hsla(198, 6, 45, 1); }
.DADOS-Base—Light-15-hsla { color: hsla(300, 32, 40, 1); }
.DADOS-Base—Light-16-hsla { color: hsla(180, 2, 29, 1); }
.DADOS-Base—Light-17-hsla { color: hsla(180, 1, 19, 1); }
.DADOS-Base—Light-18-hsla { color: hsla(3, 25, 45, 1); }
.DADOS-Base—Light-19-hsla { color: hsla(121, 32, 36, 1); }
.DADOS-Base—Light-20-hsla { color: hsla(195, 32, 41, 1); }

Alternate Palettes

Altimeter

DARK:

#9E9E9E

#6eb7db

#F26D6D

#A2A403

#e2863e

#D9E8F5

#F3F0E7

#E9A9BD

#FC6E17

#E0C892

 

#99A3F2

#76AFAA

#2E96FF

#CAFEE1

#A5CC0A

#D5A6F5

#FFBDA2

#FFE152

#CE2B08

#85D5E4

LIGHT:

#011526

#0091B6

#D0476B

#878E00

#D96A29

#446EA6

#777374

#F28EC6

#0091B6

#9C8B65

 

#76AFAA

#2978EA

#AC4A3D

#88BF08

#D5A6F5

#8866A6

#DA4754

#E9C102

#972B08

#85D5E4

Altimeter List (Hex, RGBA, HSLA)

DARK:

/* Color Theme Swatches in Hex */
.Altimeter-Dark-1-hex { color: #9E9E9E; }
.Altimeter-Dark-2-hex { color: #6EB7DB; }
.Altimeter-Dark-3-hex { color: #F26D6D; }
.Altimeter-Dark-4-hex { color: #A2A403; }
.Altimeter-Dark-5-hex { color: #E2863E; }
.Altimeter-Dark-6-hex { color: #99A3F2; }
.Altimeter-Dark-7-hex { color: #F3F0E7; }
.Altimeter-Dark-8-hex { color: #E9A9BD; }
.Altimeter-Dark-9-hex { color: #FC6E17; }
.Altimeter-Dark-10-hex { color: #E0C892; }
.Altimeter-Dark-11-hex { color: #76AFAA; }
.Altimeter-Dark-12-hex { color: #2E96FF; }
.Altimeter-Dark-13-hex { color: #CAFEE1; }
.Altimeter-Dark-14-hex { color: #A5CC0A; }
.Altimeter-Dark-15-hex { color: #D5A6F5; }
.Altimeter-Dark-16-hex { color: #FFBDA2; }
.Altimeter-Dark-17-hex { color: #FFE152; }
.Altimeter-Dark-18-hex { color: #E9C102; }
.Altimeter-Dark-19-hex { color: #CE2B08; }
.Altimeter-Dark-20-hex { color: #85D5E4; }

/* Color Theme Swatches in RGBA */
.Altimeter-Dark-1-rgba { color: rgba(158, 158, 158, 1); }
.Altimeter-Dark-2-rgba { color: rgba(110, 183, 219, 1); }
.Altimeter-Dark-3-rgba { color: rgba(242, 109, 109, 1); }
.Altimeter-Dark-4-rgba { color: rgba(162, 164, 3, 1); }
.Altimeter-Dark-5-rgba { color: rgba(226, 134, 62, 1); }
.Altimeter-Dark-6-rgba { color: rgba(153, 163, 242, 1); }
.Altimeter-Dark-7-rgba { color: rgba(243, 240, 231, 1); }
.Altimeter-Dark-8-rgba { color: rgba(233, 169, 189, 1); }
.Altimeter-Dark-9-rgba { color: rgba(252, 110, 23, 1); }
.Altimeter-Dark-10-rgba { color: rgba(224, 200, 146, 1); }
.Altimeter-Dark-11-rgba { color: rgba(118, 175, 170, 1); }
.Altimeter-Dark-12-rgba { color: rgba(46, 150, 255, 1); }
.Altimeter-Dark-13-rgba { color: rgba(202, 254, 225, 1); }
.Altimeter-Dark-14-rgba { color: rgba(165, 204, 10, 1); }
.Altimeter-Dark-15-rgba { color: rgba(213, 166, 245, 1); }
.Altimeter-Dark-16-rgba { color: rgba(255, 189, 162, 1); }
.Altimeter-Dark-17-rgba { color: rgba(255, 225, 82, 1); }
.Altimeter-Dark-18-rgba { color: rgba(233, 193, 2, 1); }
.Altimeter-Dark-19-rgba { color: rgba(206, 43, 8, 1); }
.Altimeter-Dark-20-rgba { color: rgba(133, 213, 228, 1); }

/* Color Theme Swatches in HSLA */
.Altimeter-Dark-1-hsla { color: hsla(0, 0, 61, 1); }
.Altimeter-Dark-2-hsla { color: hsla(199, 60, 64, 1); }
.Altimeter-Dark-3-hsla { color: hsla(0, 83, 68, 1); }
.Altimeter-Dark-4-hsla { color: hsla(60, 96, 32, 1); }
.Altimeter-Dark-5-hsla { color: hsla(26, 73, 56, 1); }
.Altimeter-Dark-6-hsla { color: hsla(233, 77, 77, 1); }
.Altimeter-Dark-7-hsla { color: hsla(45, 33, 92, 1); }
.Altimeter-Dark-8-hsla { color: hsla(341, 59, 78, 1); }
.Altimeter-Dark-9-hsla { color: hsla(22, 97, 53, 1); }
.Altimeter-Dark-10-hsla { color: hsla(41, 55, 72, 1); }
.Altimeter-Dark-11-hsla { color: hsla(174, 26, 57, 1); }
.Altimeter-Dark-12-hsla { color: hsla(210, 100, 59, 1); }
.Altimeter-Dark-13-hsla { color: hsla(146, 96, 89, 1); }
.Altimeter-Dark-14-hsla { color: hsla(72, 90, 41, 1); }
.Altimeter-Dark-15-hsla { color: hsla(275, 79, 80, 1); }
.Altimeter-Dark-16-hsla { color: hsla(17, 100, 81, 1); }
.Altimeter-Dark-17-hsla { color: hsla(49, 100, 66, 1); }
.Altimeter-Dark-18-hsla { color: hsla(49, 98, 46, 1); }
.Altimeter-Dark-19-hsla { color: hsla(10, 92, 41, 1); }
.Altimeter-Dark-20-hsla { color: hsla(189, 63, 70, 1); }

LIGHT:

/* Color Theme Swatches in Hex */

.Altimeter-Light–1-hex { color: #011526; }
.Altimeter-Light–2-hex { color: #0091B6; }
.Altimeter-Light–3-hex { color: #D0476B; }
.Altimeter-Light–4-hex { color: #878E00; }
.Altimeter-Light–5-hex { color: #D96A29; }
.Altimeter-Light–6-hex { color: #446EA6; }
.Altimeter-Light–7-hex { color: #777374; }
.Altimeter-Light–8-hex { color: #F28EC6; }
.Altimeter-Light–9-hex { color: #0091B6; }
.Altimeter-Light–10-hex { color: #9C8B65; }
.Altimeter-Light–11-hex { color: #76AFAA; }
.Altimeter-Light–12-hex { color: #2978EA; }
.Altimeter-Light–13-hex { color: #AC4A3D; }
.Altimeter-Light–14-hex { color: #88BF08; }
.Altimeter-Light–15-hex { color: #D5A6F5; }
.Altimeter-Light–16-hex { color: #8866A6; }
.Altimeter-Light–17-hex { color: #DA4754; }
.Altimeter-Light–18-hex { color: #E9C102; }
.Altimeter-Light–19-hex { color: #972B08; }
.Altimeter-Light–20-hex { color: #85D5E4; }

/* Color Theme Swatches in RGBA */

.Altimeter-Light–1-rgba { color: rgba(84, 84, 84, 1); }
.Altimeter-Light–2-rgba { color: rgba(0, 145, 182, 1); }
.Altimeter-Light–3-rgba { color: rgba(208, 71, 107, 1); }
.Altimeter-Light–4-rgba { color: rgba(135, 142, 0, 1); }
.Altimeter-Light–5-rgba { color: rgba(217, 106, 41, 1); }
.Altimeter-Light–6-rgba { color: rgba(68, 110, 166, 1); }
.Altimeter-Light–7-rgba { color: rgba(119, 115, 116, 1); }
.Altimeter-Light–8-rgba { color: rgba(242, 142, 198, 1); }
.Altimeter-Light–9-rgba { color: rgba(0, 145, 182, 1); }
.Altimeter-Light–10-rgba { color: rgba(156, 139, 101, 1); }
.Altimeter-Light–11-rgba { color: rgba(118, 175, 170, 1); }
.Altimeter-Light–12-rgba { color: rgba(41, 120, 234, 1); }
.Altimeter-Light–13-rgba { color: rgba(172, 74, 61, 1); }
.Altimeter-Light–14-rgba { color: rgba(136, 191, 8, 1); }
.Altimeter-Light–15-rgba { color: rgba(213, 166, 245, 1); }
.Altimeter-Light–16-rgba { color: rgba(136, 102, 166, 1); }
.Altimeter-Light–17-rgba { color: rgba(218, 71, 84, 1); }
.Altimeter-Light–18-rgba { color: rgba(233, 193, 2, 1); }
.Altimeter-Light–19-rgba { color: rgba(151, 43, 8, 1); }
.Altimeter-Light–20-rgba { color: rgba(133, 213, 228, 1); }

/* Color Theme Swatches in HSLA */

.Altimeter-Light–1-hsla { color: hsla(0, 0, 32, 1); }
.Altimeter-Light–2-hsla { color: hsla(192, 100, 35, 1); }
.Altimeter-Light–3-hsla { color: hsla(344, 59, 54, 1); }
.Altimeter-Light–4-hsla { color: hsla(62, 100, 27, 1); }
.Altimeter-Light–5-hsla { color: hsla(22, 69, 50, 1); }
.Altimeter-Light–6-hsla { color: hsla(214, 41, 45, 1); }
.Altimeter-Light–7-hsla { color: hsla(345, 1, 45, 1); }
.Altimeter-Light–8-hsla { color: hsla(326, 79, 75, 1); }
.Altimeter-Light–9-hsla { color: hsla(192, 100, 35, 1); }
.Altimeter-Light–10-hsla { color: hsla(41, 21, 50, 1); }
.Altimeter-Light–11-hsla { color: hsla(174, 26, 57, 1); }
.Altimeter-Light–12-hsla { color: hsla(215, 82, 53, 1); }
.Altimeter-Light–13-hsla { color: hsla(7, 47, 45, 1); }
.Altimeter-Light–14-hsla { color: hsla(78, 91, 39, 1); }
.Altimeter-Light–15-hsla { color: hsla(275, 79, 80, 1); }
.Altimeter-Light–16-hsla { color: hsla(271, 26, 52, 1); }
.Altimeter-Light–17-hsla { color: hsla(354, 66, 56, 1); }
.Altimeter-Light–18-hsla { color: hsla(49, 98, 46, 1); }
.Altimeter-Light–19-hsla { color: hsla(14, 89, 31, 1); }
.Altimeter-Light–20-hsla { color: hsla(189, 63, 70, 1); }

Color Blind Accessible

DARK:

#98A47C

#4DDB96

#FF406C

#A45368

#E58F4C

#99A3F2

#F3E8C4

#EA9FC5

#FC6E17

#E1C6B7

 

#EA9FC5

#FC6E17

#CAFEE1

#CCCC05

#BC61F5

#D5A6F5

#FFBDA2

#FFE152

#6C1D90

#85D4E4

LIGHT:

#6A7357

#2D8057

#94253F

#824253

#9C6033

#656CA1

#8F8B8E

#D7827D

#BF5411

#005B7E

 

#527A77

#1B4C7D

#FF9A3A

#7D7102

#954EC2

#70542A

#C9B112

#651B87

#CE2B08

#3F6DD9

Color-Blind Accessible (Hex, RGBA, HSLA)

/* Color Theme Swatches in Hex */
.Color-Blind-Accessible—Light-1-hex { color: #6A7357; }
.Color-Blind-Accessible—Light-2-hex { color: #2D8057; }
.Color-Blind-Accessible—Light-3-hex { color: #94253F; }
.Color-Blind-Accessible—Light-4-hex { color: #824253; }
.Color-Blind-Accessible—Light-5-hex { color: #9C6033; }
.Color-Blind-Accessible—Light-6-hex { color: #656CA1; }
.Color-Blind-Accessible—Light-7-hex { color: #8F8B8E; }
.Color-Blind-Accessible—Light-8-hex { color: #D7827D; }
.Color-Blind-Accessible—Light-9-hex { color: #BF5411; }
.Color-Blind-Accessible—Light-10-hex { color: #005B7E; }
.Color-Blind-Accessible—Light-11-hex { color: #527A77; }
.Color-Blind-Accessible—Light-12-hex { color: #1B4C7D; }
.Color-Blind-Accessible—Light-13-hex { color: #FF9A3A; }
.Color-Blind-Accessible—Light-14-hex { color: #7D7102; }
.Color-Blind-Accessible—Light-15-hex { color: #954EC2; }
.Color-Blind-Accessible—Light-16-hex { color: #70542A; }
.Color-Blind-Accessible—Light-17-hex { color: #C9B112; }
.Color-Blind-Accessible—Light-18-hex { color: #651B87; }
.Color-Blind-Accessible—Light-19-hex { color: #CE2B08; }
.Color-Blind-Accessible—Light-20-hex { color: #3F6DD9; }

/* Color Theme Swatches in RGBA */
.Color-Blind-Accessible—Light-1-rgba { color: rgba(106, 115, 87, 1); }
.Color-Blind-Accessible—Light-2-rgba { color: rgba(45, 128, 87, 1); }
.Color-Blind-Accessible—Light-3-rgba { color: rgba(148, 37, 63, 1); }
.Color-Blind-Accessible—Light-4-rgba { color: rgba(130, 66, 83, 1); }
.Color-Blind-Accessible—Light-5-rgba { color: rgba(156, 96, 51, 1); }
.Color-Blind-Accessible—Light-6-rgba { color: rgba(101, 108, 161, 1); }
.Color-Blind-Accessible—Light-7-rgba { color: rgba(143, 139, 142, 1); }
.Color-Blind-Accessible—Light-8-rgba { color: rgba(215, 130, 125, 1); }
.Color-Blind-Accessible—Light-9-rgba { color: rgba(191, 84, 17, 1); }
.Color-Blind-Accessible—Light-10-rgba { color: rgba(0, 91, 126, 1); }
.Color-Blind-Accessible—Light-11-rgba { color: rgba(82, 122, 119, 1); }
.Color-Blind-Accessible—Light-12-rgba { color: rgba(27, 76, 125, 1); }
.Color-Blind-Accessible—Light-13-rgba { color: rgba(255, 154, 58, 1); }
.Color-Blind-Accessible—Light-14-rgba { color: rgba(125, 113, 2, 1); }
.Color-Blind-Accessible—Light-15-rgba { color: rgba(149, 78, 194, 1); }
.Color-Blind-Accessible—Light-16-rgba { color: rgba(112, 84, 42, 1); }
.Color-Blind-Accessible—Light-17-rgba { color: rgba(201, 177, 18, 1); }
.Color-Blind-Accessible—Light-18-rgba { color: rgba(101, 27, 135, 1); }
.Color-Blind-Accessible—Light-19-rgba { color: rgba(206, 43, 8, 1); }
.Color-Blind-Accessible—Light-20-rgba { color: rgba(63, 109, 217, 1); }

/* Color Theme Swatches in HSLA */
.Color-Blind-Accessible—Light-1-hsla { color: hsla(79, 13, 39, 1); }
.Color-Blind-Accessible—Light-2-hsla { color: hsla(150, 47, 33, 1); }
.Color-Blind-Accessible—Light-3-hsla { color: hsla(345, 60, 36, 1); }
.Color-Blind-Accessible—Light-4-hsla { color: hsla(344, 32, 38, 1); }
.Color-Blind-Accessible—Light-5-hsla { color: hsla(25, 50, 40, 1); }
.Color-Blind-Accessible—Light-6-hsla { color: hsla(233, 24, 51, 1); }
.Color-Blind-Accessible—Light-7-hsla { color: hsla(314, 1, 55, 1); }
.Color-Blind-Accessible—Light-8-hsla { color: hsla(3, 52, 66, 1); }
.Color-Blind-Accessible—Light-9-hsla { color: hsla(23, 83, 40, 1); }
.Color-Blind-Accessible—Light-10-hsla { color: hsla(196, 100, 24, 1); }
.Color-Blind-Accessible—Light-11-hsla { color: hsla(175, 19, 40, 1); }
.Color-Blind-Accessible—Light-12-hsla { color: hsla(210, 64, 29, 1); }
.Color-Blind-Accessible—Light-13-hsla { color: hsla(29, 100, 61, 1); }
.Color-Blind-Accessible—Light-14-hsla { color: hsla(54, 96, 24, 1); }
.Color-Blind-Accessible—Light-15-hsla { color: hsla(276, 48, 53, 1); }
.Color-Blind-Accessible—Light-16-hsla { color: hsla(36, 45, 30, 1); }
.Color-Blind-Accessible—Light-17-hsla { color: hsla(52, 83, 42, 1); }
.Color-Blind-Accessible—Light-18-hsla { color: hsla(281, 66, 31, 1); }
.Color-Blind-Accessible—Light-19-hsla { color: hsla(10, 92, 41, 1); }
.Color-Blind-Accessible—Light-20-hsla { color: hsla(222, 66, 54, 1); }

Universe

DARK:

#DA89DE

#55A103

#FFB000

#F3F0E7

#0091B6

#E8906D

#25c3fa

LIGHT:

#000A61

#1266A1

#A80000

#940E85

#D44B49

#C71B6F

#494D4D

Universe Hex List

DARK:
#DA89DE
#55A103
#FFB000
#F3F0E7
#0091B6
#E8906D
#25C3FA

LIGHT:
#000A61
#1266A1
#A80000
#940E85
#D44B49
#C71B6F
#494D4D

Corporate

DARK:

#DB5C16

#DBB916

#D1DBBD

#91AA9D

#83A6C7

#D9E8F5

#F3F0E7

LIGHT:

#466893

#304269

#8F3707

#5C2543

#8F7810

#3B592D

#537334

Corporate Hex list

DARK:
#DB5C16
#DBB916
#D1DBBD
#91AA9D
#83A6C7
#D9E8F5
#F3F0E7

LIGHT:
#466893
#304269
#8F3707
#5C2543
#8F7810
#3B592D
#537334

Winter Tropics

DARK:

#B3BF54

#BFA450

#88D3CA

#C3E3C8

#F2A057

#F26D6D

#56ACBF

LIGHT:

#446EA6

#940E85

#D079A8

#D9695F

#239EA5

#41477A

#487C8E

Winter Tropics Hex List

DARK:
#B3BF54
#BFA450
#88D3CA
#C3E3C8
#F2A057
#F26D6D
#56ACBF

LIGHT:
#446EA6
#940E85
#D079A8
#D9695F
#239EA5
#41477A
#487C8E

Serenity 

DARK:

#EDD9B6

#E8CBD0

#D7C9DA

#F3F0E7

#F1B88B

#8BD0E8

#8BE8CE

LIGHT:

#011526

#024059

#0396A6

#D96A29

#494D4D

#7D828C

#A6836F

Serenity Hex list

DARK:
#EDD9B6
#E8CBD0
#D7C9DA
#F3F0E7
#F1B88B
#8BD0E8
#8BE8CE

LIGHT:
#011526
#024059
#0396A6
#D96A29
#494D4D
#7D828C
#A6836F

Mindful 

DARK:

#F8F4ED

#56ACBF

#F2A057

#E35C38

#F8E462

#8BD0E8

#D079A8

LIGHT:

#001B2E

#2A4B5F

#56ACBF

#F2A057

#E35C38

#7D828C

#A6836F

Mindful Hex list

DARK:
#F8F4ED
#56ACBF
#F2A057
#E35C38
#F8E462
#8BD0E8
#D079A8

LIGHT:
#001B2E
#EA4B5F
#56ACBF
#F2A057
#E35C38
#7D828C
#A6836F