SLDS Styling Hooks

360 hooks
HEX: #0d9dda
RGB: rgb(13, 157, 218)
HSL: hsl(198, 88.7%, 45.3%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #0176d3
RGB: rgb(1, 118, 211)
HSL: hsl(207, 99.1%, 41.6%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #032d60
RGB: rgb(3, 45, 96)
HSL: hsl(213, 93.9%, 19.4%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #001639
RGB: rgb(0, 22, 57)
HSL: hsl(217, 100%, 11.2%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #c9c9c9
RGB: rgb(201, 201, 201)
HSL: hsl(0, 0%, 78.8%)
Colorcolor

Nuetral border color for UI elements.

HEX: #aeaeae
RGB: rgb(174, 174, 174)
HSL: hsl(0, 0%, 68.2%)
Colorcolor

Neutral border color for UI elements.

HEX: #939393
RGB: rgb(147, 147, 147)
HSL: hsl(0, 0%, 57.6%)
Colorcolor

Neutral border color for UI elements.

HEX: #747474
RGB: rgb(116, 116, 116)
HSL: hsl(0, 0%, 45.5%)
Colorcolor

Neutral border color for UI elements.

HEX: #78b0fd
RGB: rgb(120, 176, 253)
HSL: hsl(215, 97.1%, 73.1%)
Colorcolor

Brand border color for UI elements.

HEX: #1b96ff
RGB: rgb(27, 150, 255)
HSL: hsl(208, 100%, 55.3%)
Colorcolor

Alternate brand border color for UI elements.

HEX: #001639
RGB: rgb(0, 22, 57)
HSL: hsl(217, 100%, 11.2%)
Colorcolor

Brand Base 10 - if used as a background, please use Brand Base 100-65 to meet accessibility guidelines.

Alias Value
SLDS alias value
Colorcolor

Brand Base 100 - if used as a background, please use Brand Base 60-10 to meet accessibility guidelines.

HEX: #03234d
RGB: rgb(3, 35, 77)
HSL: hsl(214, 92.5%, 15.7%)
Colorcolor

Brand Base 15 - if used as a background, please use Brand Base 100-65 to meet accessibility guidelines.

HEX: #032d60
RGB: rgb(3, 45, 96)
HSL: hsl(213, 93.9%, 19.4%)
Colorcolor

Brand Base 20 - if used as a background, please use Brand Base 100-70 to meet accessibility guidelines.

HEX: #014486
RGB: rgb(1, 68, 134)
HSL: hsl(210, 98.5%, 26.5%)
Colorcolor

Brand Base 30 - if used as a background, please use Brand Base 100-80 to meet accessibility guidelines.

HEX: #0b5cab
RGB: rgb(11, 92, 171)
HSL: hsl(210, 87.9%, 35.7%)
Colorcolor

Brand Base 40 - if used as a background, please use Brand Base 100-90 to meet accessibility guidelines.

HEX: #0176d3
RGB: rgb(1, 118, 211)
HSL: hsl(207, 99.1%, 41.6%)
Colorcolor

Brand Base 50 - if used as a background, please use Brand Base 100-95 to meet accessibility guidelines.

HEX: #1b96ff
RGB: rgb(27, 150, 255)
HSL: hsl(208, 100%, 55.3%)
Colorcolor

Brand Base 60 - if used as a background, please use Brand Base 100 to meet accessibility guidelines.

HEX: #57a3fd
RGB: rgb(87, 163, 253)
HSL: hsl(213, 97.6%, 66.7%)
Colorcolor

Brand Base 65 - if used as a background, please use Brand Base 15-10 to meet accessibility guidelines.

HEX: #78b0fd
RGB: rgb(120, 176, 253)
HSL: hsl(215, 97.1%, 73.1%)
Colorcolor

Brand Base 70 - if used as a background, please use Brand Base 20-10 to meet accessibility guidelines.

HEX: #aacbff
RGB: rgb(170, 203, 255)
HSL: hsl(217, 100%, 83.3%)
Colorcolor

Brand Base 80 - if used as a background, please use Brand Base 30-10 to meet accessibility guidelines.

HEX: #d8e6fe
RGB: rgb(216, 230, 254)
HSL: hsl(218, 95%, 92.2%)
Colorcolor

Brand Base 90 - if used as a background, please use Brand Base 40-10 to meet accessibility guidelines.

HEX: #eef4ff
RGB: rgb(238, 244, 255)
HSL: hsl(219, 100%, 96.7%)
Colorcolor

Brand Base 95 - if used as a background, please use Brand Base 50-10 to meet accessibility guidelines.

HEX: #ea001e
RGB: rgb(234, 0, 30)
HSL: hsl(352, 100%, 45.9%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #8e030f
RGB: rgb(142, 3, 15)
HSL: hsl(355, 95.9%, 28.4%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #300c01
RGB: rgb(48, 12, 1)
HSL: hsl(14, 95.9%, 9.6%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #300c01
RGB: rgb(48, 12, 1)
HSL: hsl(14, 95.9%, 9.6%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #300c01
RGB: rgb(48, 12, 1)
HSL: hsl(14, 95.9%, 9.6%)
Colorcolor

Error Base 10 - if used as a background, please use Error Base 100-50 to meet accessibility guidelines.

HEX: #ffffff
RGB: rgb(255, 255, 255)
HSL: hsl(0, 0%, 100%)
Colorcolor

Error Base 100 - if used as a background, please use Error Base 60-10 to meet accessibility guidelines.

HEX: #640103
RGB: rgb(100, 1, 3)
HSL: hsl(359, 98%, 19.8%)
Colorcolor

Error Base 20 - if used as a background, please use Error Base 100-60 to meet accessibility guidelines.

HEX: #8e030f
RGB: rgb(142, 3, 15)
HSL: hsl(355, 95.9%, 28.4%)
Colorcolor

Error Base 30 - if used as a background, please use Error Base 100-70 to meet accessibility guidelines.

HEX: #ba0517
RGB: rgb(186, 5, 23)
HSL: hsl(354, 94.8%, 37.5%)
Colorcolor

Error Base 40 - if used as a background, please use Error Base 100-80 to meet accessibility guidelines.

HEX: #ea001e
RGB: rgb(234, 0, 30)
HSL: hsl(352, 100%, 45.9%)
Colorcolor

Error Base 50 - if used as a background, please use Error Base 100-90 to meet accessibility guidelines.

HEX: #fe5c4c
RGB: rgb(254, 92, 76)
HSL: hsl(5, 98.9%, 64.7%)
Colorcolor

Error Base 60 - if used as a background, please use Error Base 20-10 to meet accessibility guidelines.

HEX: #fe8f7d
RGB: rgb(254, 143, 125)
HSL: hsl(8, 98.5%, 74.3%)
Colorcolor

Error Base 70 - if used as a background, please use Error Base 30-10 to meet accessibility guidelines.

HEX: #feb8ab
RGB: rgb(254, 184, 171)
HSL: hsl(9, 97.6%, 83.3%)
Colorcolor

Error Base 80 - if used as a background, please use Error Base 40-10 to meet accessibility guidelines.

HEX: #feded8
RGB: rgb(254, 222, 216)
HSL: hsl(9, 95%, 92.2%)
Colorcolor

Error Base 90 - if used as a background, please use Error Base 50-10 to meet accessibility guidelines.

HEX: #1818181a
RGB: rgba(24, 24, 24, 0.1)
HSL: hsla(0, 0%, 9.4%, 0.1)
Colortransparentcolor

Neutral Base 10 with 10% opacity.

HEX: #18181840
RGB: rgba(24, 24, 24, 0.25)
HSL: hsla(0, 0%, 9.4%, 0.25)
Colortransparentcolor

Neutral Base 10 with 25% opacity.

HEX: #18181880
RGB: rgba(24, 24, 24, 0.5)
HSL: hsla(0, 0%, 9.4%, 0.5)
Colortransparentcolor

Neutral Base 10 with 50% opacity.

HEX: #181818bf
RGB: rgba(24, 24, 24, 0.75)
HSL: hsla(0, 0%, 9.4%, 0.75)
Colortransparentcolor

Neutral Base 10 with 75% opacity.

HEX: #ffffff1a
RGB: rgba(255, 255, 255, 0.1)
HSL: hsla(0, 0%, 100%, 0.1)
Colortransparentcolor

Neutral Base 100 with 10% opacity.

HEX: #ffffff40
RGB: rgba(255, 255, 255, 0.25)
HSL: hsla(0, 0%, 100%, 0.25)
Colortransparentcolor

Neutral Base 100 with 25% opacity.

HEX: #ffffff80
RGB: rgba(255, 255, 255, 0.5)
HSL: hsla(0, 0%, 100%, 0.5)
Colortransparentcolor

Neutral Base 100 with 50% opacity.

HEX: #ffffffbf
RGB: rgba(255, 255, 255, 0.75)
HSL: hsla(0, 0%, 100%, 0.75)
Colortransparentcolor

Neutral Base 100 with 75% opacity.

HEX: #181818
RGB: rgb(24, 24, 24)
HSL: hsl(0, 0%, 9.4%)
Colorcolor

Neutral Base 10 - if used as a background, please use Neutral Base 100-65 to meet accessibility guidelines.

HEX: #ffffff
RGB: rgb(255, 255, 255)
HSL: hsl(0, 0%, 100%)
Colorcolor

Neutral Base 100 - if used as a background, please use Neutral Base 60-10 to meet accessibility guidelines.

HEX: #242424
RGB: rgb(36, 36, 36)
HSL: hsl(0, 0%, 14.1%)
Colorcolor

Neutral Base 15 - if used as a background, please use Neutral Base 100-65 to meet accessibility guidelines.

HEX: #2e2e2e
RGB: rgb(46, 46, 46)
HSL: hsl(0, 0%, 18%)
Colorcolor

Neutral Base 20 - if used as a background, please use Neutral Base 100-70 to meet accessibility guidelines.

HEX: #444444
RGB: rgb(68, 68, 68)
HSL: hsl(0, 0%, 26.7%)
Colorcolor

Neutral Base 30 - if used as a background, please use Neutral Base 100-80 to meet accessibility guidelines.

HEX: #5c5c5c
RGB: rgb(92, 92, 92)
HSL: hsl(0, 0%, 36.1%)
Colorcolor

Neutral Base 40 - if used as a background, please use Neutral Base 100-90 to meet accessibility guidelines.

HEX: #747474
RGB: rgb(116, 116, 116)
HSL: hsl(0, 0%, 45.5%)
Colorcolor

Neutral Base 50 - if used as a background, please use Neutral Base 100-95 to meet accessibility guidelines.

HEX: #939393
RGB: rgb(147, 147, 147)
HSL: hsl(0, 0%, 57.6%)
Colorcolor

Neutral Base 60 - if used as a background, please use Neutral Base 100 to meet accessibility guidelines.

HEX: #a0a0a0
RGB: rgb(160, 160, 160)
HSL: hsl(0, 0%, 62.7%)
Colorcolor

Neutral Base 65 - if used as a background, please use Neutral Base 15-10 to meet accessibility guidelines.

HEX: #aeaeae
RGB: rgb(174, 174, 174)
HSL: hsl(0, 0%, 68.2%)
Colorcolor

Neutral Base 70 - if used as a background, please use Neutral Base 20-10 to meet accessibility guidelines.

HEX: #c9c9c9
RGB: rgb(201, 201, 201)
HSL: hsl(0, 0%, 78.8%)
Colorcolor

Neutral Base 80 - if used as a background, please use Neutral Base 30-10 to meet accessibility guidelines.

HEX: #e5e5e5
RGB: rgb(229, 229, 229)
HSL: hsl(0, 0%, 89.8%)
Colorcolor

Neutral Base 90 - if used as a background, please use Neutral Base 40-10 to meet accessibility guidelines.

HEX: #f3f3f3
RGB: rgb(243, 243, 243)
HSL: hsl(0, 0%, 95.3%)
Colorcolor

Neutral Base 95 - if used as a background, please use Neutral Base 50-10 to meet accessibility guidelines.

HEX: #ffffff
RGB: rgb(255, 255, 255)
HSL: hsl(0, 0%, 100%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #eef4ff
RGB: rgb(238, 244, 255)
HSL: hsl(219, 100%, 96.7%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #aacbff
RGB: rgb(170, 203, 255)
HSL: hsl(217, 100%, 83.3%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #032d60
RGB: rgb(3, 45, 96)
HSL: hsl(213, 93.9%, 19.4%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #ffffff
RGB: rgb(255, 255, 255)
HSL: hsl(0, 0%, 100%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #fef1ee
RGB: rgb(254, 241, 238)
HSL: hsl(11, 88.9%, 96.5%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #feb8ab
RGB: rgb(254, 184, 171)
HSL: hsl(9, 97.6%, 83.3%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #640103
RGB: rgb(100, 1, 3)
HSL: hsl(359, 98%, 19.8%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #ffffff
RGB: rgb(255, 255, 255)
HSL: hsl(0, 0%, 100%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #ebf7e6
RGB: rgb(235, 247, 230)
HSL: hsl(102, 51.5%, 93.5%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #91db8b
RGB: rgb(145, 219, 139)
HSL: hsl(116, 52.6%, 70.2%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #194e31
RGB: rgb(25, 78, 49)
HSL: hsl(147, 51.5%, 20.2%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #080707
RGB: rgb(8, 7, 7)
HSL: hsl(0, 6.7%, 2.9%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #514f4d
RGB: rgb(81, 79, 77)
HSL: hsl(30, 2.5%, 31%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #706e6b
RGB: rgb(112, 110, 107)
HSL: hsl(36, 2.3%, 42.9%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #dddbda
RGB: rgb(221, 219, 218)
HSL: hsl(20, 4.2%, 86.1%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #ffffff
RGB: rgb(255, 255, 255)
HSL: hsl(0, 0%, 100%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #fbf3e0
RGB: rgb(251, 243, 224)
HSL: hsl(42, 77.1%, 93.1%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #fcc003
RGB: rgb(252, 192, 3)
HSL: hsl(46, 97.6%, 50%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #371e03
RGB: rgb(55, 30, 3)
HSL: hsl(31, 89.7%, 11.4%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #001639
RGB: rgb(0, 22, 57)
HSL: hsl(217, 100%, 11.2%)
Colorcolor

Blue 10

HEX: #03234d
RGB: rgb(3, 35, 77)
HSL: hsl(214, 92.5%, 15.7%)
Colorcolor

Blue 15

HEX: #032d60
RGB: rgb(3, 45, 96)
HSL: hsl(213, 93.9%, 19.4%)
Colorcolor

Blue 20

HEX: #014486
RGB: rgb(1, 68, 134)
HSL: hsl(210, 98.5%, 26.5%)
Colorcolor

Blue 30

HEX: #0b5cab
RGB: rgb(11, 92, 171)
HSL: hsl(210, 87.9%, 35.7%)
Colorcolor

Blue 40

HEX: #0176d3
RGB: rgb(1, 118, 211)
HSL: hsl(207, 99.1%, 41.6%)
Colorcolor

Blue 50

HEX: #1b96ff
RGB: rgb(27, 150, 255)
HSL: hsl(208, 100%, 55.3%)
Colorcolor

Blue 60

HEX: #57a3fd
RGB: rgb(87, 163, 253)
HSL: hsl(213, 97.6%, 66.7%)
Colorcolor

Blue 65

HEX: #78b0fd
RGB: rgb(120, 176, 253)
HSL: hsl(215, 97.1%, 73.1%)
Colorcolor

Blue 70

HEX: #aacbff
RGB: rgb(170, 203, 255)
HSL: hsl(217, 100%, 83.3%)
Colorcolor

Blue 80

HEX: #d8e6fe
RGB: rgb(216, 230, 254)
HSL: hsl(218, 95%, 92.2%)
Colorcolor

Blue 90

HEX: #eef4ff
RGB: rgb(238, 244, 255)
HSL: hsl(219, 100%, 96.7%)
Colorcolor

Blue 95

HEX: #001a28
RGB: rgb(0, 26, 40)
HSL: hsl(201, 100%, 7.8%)
Colorcolor

Cloud Blue 10

HEX: #0a2636
RGB: rgb(10, 38, 54)
HSL: hsl(202, 68.8%, 12.5%)
Colorcolor

Cloud Blue 15

HEX: #023248
RGB: rgb(2, 50, 72)
HSL: hsl(199, 94.6%, 14.5%)
Colorcolor

Cloud Blue 20

HEX: #084968
RGB: rgb(8, 73, 104)
HSL: hsl(199, 85.7%, 22%)
Colorcolor

Cloud Blue 30

HEX: #05628a
RGB: rgb(5, 98, 138)
HSL: hsl(198, 93%, 28%)
Colorcolor

Cloud Blue 40

HEX: #107cad
RGB: rgb(16, 124, 173)
HSL: hsl(199, 83.1%, 37.1%)
Colorcolor

Cloud Blue 50

HEX: #0d9dda
RGB: rgb(13, 157, 218)
HSL: hsl(198, 88.7%, 45.3%)
Colorcolor

Cloud Blue 60

HEX: #08abed
RGB: rgb(8, 171, 237)
HSL: hsl(197, 93.5%, 48%)
Colorcolor

Cloud Blue 65

HEX: #1ab9ff
RGB: rgb(26, 185, 255)
HSL: hsl(198, 100%, 55.1%)
Colorcolor

Cloud Blue 70

HEX: #90d0fe
RGB: rgb(144, 208, 254)
HSL: hsl(205, 98.2%, 78%)
Colorcolor

Cloud Blue 80

HEX: #cfe9fe
RGB: rgb(207, 233, 254)
HSL: hsl(207, 95.9%, 90.4%)
Colorcolor

Cloud Blue 90

HEX: #eaf5fe
RGB: rgb(234, 245, 254)
HSL: hsl(207, 90.9%, 95.7%)
Colorcolor

Cloud Blue 95

HEX: #071b12
RGB: rgb(7, 27, 18)
HSL: hsl(153, 58.8%, 6.7%)
Colorcolor

Green 10

HEX: #0c2912
RGB: rgb(12, 41, 18)
HSL: hsl(132, 54.7%, 10.4%)
Colorcolor

Green 15

HEX: #1c3326
RGB: rgb(28, 51, 38)
HSL: hsl(146, 29.1%, 15.5%)
Colorcolor

Green 20

HEX: #194e31
RGB: rgb(25, 78, 49)
HSL: hsl(147, 51.5%, 20.2%)
Colorcolor

Green 30

HEX: #396547
RGB: rgb(57, 101, 71)
HSL: hsl(139, 27.8%, 31%)
Colorcolor

Green 40

HEX: #2e844a
RGB: rgb(46, 132, 74)
HSL: hsl(140, 48.3%, 34.9%)
Colorcolor

Green 50

HEX: #3ba755
RGB: rgb(59, 167, 85)
HSL: hsl(134, 47.8%, 44.3%)
Colorcolor

Green 60

HEX: #41b658
RGB: rgb(65, 182, 88)
HSL: hsl(132, 47.4%, 48.4%)
Colorcolor

Green 65

HEX: #45c65a
RGB: rgb(69, 198, 90)
HSL: hsl(130, 53.1%, 52.4%)
Colorcolor

Green 70

HEX: #91db8b
RGB: rgb(145, 219, 139)
HSL: hsl(116, 52.6%, 70.2%)
Colorcolor

Green 80

HEX: #cdefc4
RGB: rgb(205, 239, 196)
HSL: hsl(107, 57.3%, 85.3%)
Colorcolor

Green 90

HEX: #ebf7e6
RGB: rgb(235, 247, 230)
HSL: hsl(102, 51.5%, 93.5%)
Colorcolor

Green 95

HEX: #281202
RGB: rgb(40, 18, 2)
HSL: hsl(25, 90.5%, 8.2%)
Colorcolor

Hot Orange 10

HEX: #421604
RGB: rgb(66, 22, 4)
HSL: hsl(17, 88.6%, 13.7%)
Colorcolor

Hot Orange 15

HEX: #4a2413
RGB: rgb(74, 36, 19)
HSL: hsl(19, 59.1%, 18.2%)
Colorcolor

Hot Orange 20

HEX: #7e2600
RGB: rgb(126, 38, 0)
HSL: hsl(18, 100%, 24.7%)
Colorcolor

Hot Orange 30

HEX: #aa3001
RGB: rgb(170, 48, 1)
HSL: hsl(17, 98.8%, 33.5%)
Colorcolor

Hot Orange 40

HEX: #d83a00
RGB: rgb(216, 58, 0)
HSL: hsl(16, 100%, 42.4%)
Colorcolor

Hot Orange 50

HEX: #ff5d2d
RGB: rgb(255, 93, 45)
HSL: hsl(14, 100%, 58.8%)
Colorcolor

Hot Orange 60

HEX: #ff784f
RGB: rgb(255, 120, 79)
HSL: hsl(14, 100%, 65.5%)
Colorcolor

Hot Orange 65

HEX: #ff906e
RGB: rgb(255, 144, 110)
HSL: hsl(14, 100%, 71.6%)
Colorcolor

Hot Orange 70

HEX: #feb9a5
RGB: rgb(254, 185, 165)
HSL: hsl(13, 97.8%, 82.2%)
Colorcolor

Hot Orange 80

HEX: #ffded5
RGB: rgb(255, 222, 213)
HSL: hsl(13, 100%, 91.8%)
Colorcolor

Hot Orange 90

HEX: #fef1ed
RGB: rgb(254, 241, 237)
HSL: hsl(14, 89.5%, 96.3%)
Colorcolor

Hot Orange 95

HEX: #200647
RGB: rgb(32, 6, 71)
HSL: hsl(264, 84.4%, 15.1%)
Colorcolor

Indigo 10

HEX: #1f0974
RGB: rgb(31, 9, 116)
HSL: hsl(252, 85.6%, 24.5%)
Colorcolor

Indigo 15

HEX: #321d71
RGB: rgb(50, 29, 113)
HSL: hsl(255, 59.2%, 27.8%)
Colorcolor

Indigo 20

HEX: #2f2cb7
RGB: rgb(47, 44, 183)
HSL: hsl(241, 61.2%, 44.5%)
Colorcolor

Indigo 30

HEX: #3a49da
RGB: rgb(58, 73, 218)
HSL: hsl(234, 68.4%, 54.1%)
Colorcolor

Indigo 40

HEX: #5867e8
RGB: rgb(88, 103, 232)
HSL: hsl(234, 75.8%, 62.7%)
Colorcolor

Indigo 50

HEX: #7f8ced
RGB: rgb(127, 140, 237)
HSL: hsl(233, 75.3%, 71.4%)
Colorcolor

Indigo 60

HEX: #8e9bef
RGB: rgb(142, 155, 239)
HSL: hsl(232, 75.2%, 74.7%)
Colorcolor

Indigo 65

HEX: #9ea9f1
RGB: rgb(158, 169, 241)
HSL: hsl(232, 74.8%, 78.2%)
Colorcolor

Indigo 70

HEX: #bec7f6
RGB: rgb(190, 199, 246)
HSL: hsl(230, 75.7%, 85.5%)
Colorcolor

Indigo 80

HEX: #e0e5f8
RGB: rgb(224, 229, 248)
HSL: hsl(228, 63.2%, 92.5%)
Colorcolor

Indigo 90

HEX: #f1f3fb
RGB: rgb(241, 243, 251)
HSL: hsl(228, 55.6%, 96.5%)
Colorcolor

Indigo 95

HEX: #181818
RGB: rgb(24, 24, 24)
HSL: hsl(0, 0%, 9.4%)
Colorcolor

Neutral 10

HEX: #ffffff
RGB: rgb(255, 255, 255)
HSL: hsl(0, 0%, 100%)
Colorcolor

Neutral 100

HEX: #242424
RGB: rgb(36, 36, 36)
HSL: hsl(0, 0%, 14.1%)
Colorcolor

Neutral 15

HEX: #2e2e2e
RGB: rgb(46, 46, 46)
HSL: hsl(0, 0%, 18%)
Colorcolor

Neutral 20

HEX: #444444
RGB: rgb(68, 68, 68)
HSL: hsl(0, 0%, 26.7%)
Colorcolor

Neutral 30

HEX: #5c5c5c
RGB: rgb(92, 92, 92)
HSL: hsl(0, 0%, 36.1%)
Colorcolor

Neutral 40

HEX: #747474
RGB: rgb(116, 116, 116)
HSL: hsl(0, 0%, 45.5%)
Colorcolor

Neutral 50

HEX: #939393
RGB: rgb(147, 147, 147)
HSL: hsl(0, 0%, 57.6%)
Colorcolor

Neutral 60

HEX: #a0a0a0
RGB: rgb(160, 160, 160)
HSL: hsl(0, 0%, 62.7%)
Colorcolor

Neutral 65

HEX: #aeaeae
RGB: rgb(174, 174, 174)
HSL: hsl(0, 0%, 68.2%)
Colorcolor

Neutral 70

HEX: #c9c9c9
RGB: rgb(201, 201, 201)
HSL: hsl(0, 0%, 78.8%)
Colorcolor

Neutral 80

HEX: #e5e5e5
RGB: rgb(229, 229, 229)
HSL: hsl(0, 0%, 89.8%)
Colorcolor

Neutral 90

HEX: #f3f3f3
RGB: rgb(243, 243, 243)
HSL: hsl(0, 0%, 95.3%)
Colorcolor

Neutral 95

HEX: #201600
RGB: rgb(32, 22, 0)
HSL: hsl(41, 100%, 6.3%)
Colorcolor

Orange 10

HEX: #371e03
RGB: rgb(55, 30, 3)
HSL: hsl(31, 89.7%, 11.4%)
Colorcolor

Orange 15

HEX: #3e2b02
RGB: rgb(62, 43, 2)
HSL: hsl(41, 93.8%, 12.5%)
Colorcolor

Orange 20

HEX: #5f3e02
RGB: rgb(95, 62, 2)
HSL: hsl(39, 95.9%, 19%)
Colorcolor

Orange 30

HEX: #825101
RGB: rgb(130, 81, 1)
HSL: hsl(37, 98.5%, 25.7%)
Colorcolor

Orange 40

HEX: #a96404
RGB: rgb(169, 100, 4)
HSL: hsl(35, 95.4%, 33.9%)
Colorcolor

Orange 50

HEX: #dd7a01
RGB: rgb(221, 122, 1)
HSL: hsl(33, 99.1%, 43.5%)
Colorcolor

Orange 60

HEX: #f38303
RGB: rgb(243, 131, 3)
HSL: hsl(32, 97.6%, 48.2%)
Colorcolor

Orange 65

HEX: #fe9339
RGB: rgb(254, 147, 57)
HSL: hsl(27, 99%, 61%)
Colorcolor

Orange 70

HEX: #ffba90
RGB: rgb(255, 186, 144)
HSL: hsl(23, 100%, 78.2%)
Colorcolor

Orange 80

HEX: #fedfd0
RGB: rgb(254, 223, 208)
HSL: hsl(20, 95.8%, 90.6%)
Colorcolor

Orange 90

HEX: #fff1ea
RGB: rgb(255, 241, 234)
HSL: hsl(20, 100%, 95.9%)
Colorcolor

Orange 95

HEX: #370114
RGB: rgb(55, 1, 20)
HSL: hsl(339, 96.4%, 11%)
Colorcolor

Pink 10

HEX: #4b0620
RGB: rgb(75, 6, 32)
HSL: hsl(337, 85.2%, 15.9%)
Colorcolor

Pink 15

HEX: #61022a
RGB: rgb(97, 2, 42)
HSL: hsl(335, 96%, 19.4%)
Colorcolor

Pink 20

HEX: #8a033e
RGB: rgb(138, 3, 62)
HSL: hsl(334, 95.7%, 27.6%)
Colorcolor

Pink 30

HEX: #b60554
RGB: rgb(182, 5, 84)
HSL: hsl(333, 94.7%, 36.7%)
Colorcolor

Pink 40

HEX: #e3066a
RGB: rgb(227, 6, 106)
HSL: hsl(333, 94.8%, 45.7%)
Colorcolor

Pink 50

HEX: #ff538a
RGB: rgb(255, 83, 138)
HSL: hsl(341, 100%, 66.3%)
Colorcolor

Pink 60

HEX: #fe7298
RGB: rgb(254, 114, 152)
HSL: hsl(344, 98.6%, 72.2%)
Colorcolor

Pink 65

HEX: #fe8aa7
RGB: rgb(254, 138, 167)
HSL: hsl(345, 98.3%, 76.9%)
Colorcolor

Pink 70

HEX: #fdb6c5
RGB: rgb(253, 182, 197)
HSL: hsl(347, 94.7%, 85.3%)
Colorcolor

Pink 80

HEX: #fddde3
RGB: rgb(253, 221, 227)
HSL: hsl(349, 88.9%, 92.9%)
Colorcolor

Pink 90

HEX: #fef0f3
RGB: rgb(254, 240, 243)
HSL: hsl(347, 87.5%, 96.9%)
Colorcolor

Pink 95

HEX: #240643
RGB: rgb(36, 6, 67)
HSL: hsl(270, 83.6%, 14.3%)
Colorcolor

Purple 10

HEX: #300b60
RGB: rgb(48, 11, 96)
HSL: hsl(266, 79.4%, 21%)
Colorcolor

Purple 15

HEX: #401075
RGB: rgb(64, 16, 117)
HSL: hsl(269, 75.9%, 26.1%)
Colorcolor

Purple 20

HEX: #5a1ba9
RGB: rgb(90, 27, 169)
HSL: hsl(267, 72.4%, 38.4%)
Colorcolor

Purple 30

HEX: #7526e3
RGB: rgb(117, 38, 227)
HSL: hsl(265, 77.1%, 52%)
Colorcolor

Purple 40

HEX: #9050e9
RGB: rgb(144, 80, 233)
HSL: hsl(265, 77.7%, 61.4%)
Colorcolor

Purple 50

HEX: #ad7bee
RGB: rgb(173, 123, 238)
HSL: hsl(266, 77.2%, 70.8%)
Colorcolor

Purple 60

HEX: #b78def
RGB: rgb(183, 141, 239)
HSL: hsl(266, 75.4%, 74.5%)
Colorcolor

Purple 65

HEX: #c29ef1
RGB: rgb(194, 158, 241)
HSL: hsl(266, 74.8%, 78.2%)
Colorcolor

Purple 70

HEX: #d7bff2
RGB: rgb(215, 191, 242)
HSL: hsl(268, 66.2%, 84.9%)
Colorcolor

Purple 80

HEX: #ece1f9
RGB: rgb(236, 225, 249)
HSL: hsl(268, 66.7%, 92.9%)
Colorcolor

Purple 90

HEX: #f6f2fb
RGB: rgb(246, 242, 251)
HSL: hsl(267, 52.9%, 96.7%)
Colorcolor

Purple 95

HEX: #300c01
RGB: rgb(48, 12, 1)
HSL: hsl(14, 95.9%, 9.6%)
Colorcolor

Red 10

HEX: #4a0c04
RGB: rgb(74, 12, 4)
HSL: hsl(7, 89.7%, 15.3%)
Colorcolor

Red 15

HEX: #640103
RGB: rgb(100, 1, 3)
HSL: hsl(359, 98%, 19.8%)
Colorcolor

Red 20

HEX: #8e030f
RGB: rgb(142, 3, 15)
HSL: hsl(355, 95.9%, 28.4%)
Colorcolor

Red 30

HEX: #ba0517
RGB: rgb(186, 5, 23)
HSL: hsl(354, 94.8%, 37.5%)
Colorcolor

Red 40

HEX: #ea001e
RGB: rgb(234, 0, 30)
HSL: hsl(352, 100%, 45.9%)
Colorcolor

Red 50

HEX: #fe5c4c
RGB: rgb(254, 92, 76)
HSL: hsl(5, 98.9%, 64.7%)
Colorcolor

Red 60

HEX: #fe7765
RGB: rgb(254, 119, 101)
HSL: hsl(7, 98.7%, 69.6%)
Colorcolor

Red 65

HEX: #fe8f7d
RGB: rgb(254, 143, 125)
HSL: hsl(8, 98.5%, 74.3%)
Colorcolor

Red 70

HEX: #feb8ab
RGB: rgb(254, 184, 171)
HSL: hsl(9, 97.6%, 83.3%)
Colorcolor

Red 80

HEX: #feded8
RGB: rgb(254, 222, 216)
HSL: hsl(9, 95%, 92.2%)
Colorcolor

Red 90

HEX: #fef1ee
RGB: rgb(254, 241, 238)
HSL: hsl(11, 88.9%, 96.5%)
Colorcolor

Red 95

HEX: #071b12
RGB: rgb(7, 27, 18)
HSL: hsl(153, 58.8%, 6.7%)
Colorcolor

Teal 10

HEX: #072825
RGB: rgb(7, 40, 37)
HSL: hsl(175, 70.2%, 9.2%)
Colorcolor

Teal 15

HEX: #023434
RGB: rgb(2, 52, 52)
HSL: hsl(180, 92.6%, 10.6%)
Colorcolor

Teal 20

HEX: #024d4c
RGB: rgb(2, 77, 76)
HSL: hsl(179, 94.9%, 15.5%)
Colorcolor

Teal 30

HEX: #056764
RGB: rgb(5, 103, 100)
HSL: hsl(178, 90.7%, 21.2%)
Colorcolor

Teal 40

HEX: #0b827c
RGB: rgb(11, 130, 124)
HSL: hsl(177, 84.4%, 27.6%)
Colorcolor

Teal 50

HEX: #06a59a
RGB: rgb(6, 165, 154)
HSL: hsl(176, 93%, 33.5%)
Colorcolor

Teal 60

HEX: #03b4a7
RGB: rgb(3, 180, 167)
HSL: hsl(176, 96.7%, 35.9%)
Colorcolor

Teal 65

HEX: #01c3b3
RGB: rgb(1, 195, 179)
HSL: hsl(175, 99%, 38.4%)
Colorcolor

Teal 70

HEX: #04e1cb
RGB: rgb(4, 225, 203)
HSL: hsl(174, 96.5%, 44.9%)
Colorcolor

Teal 80

HEX: #acf3e4
RGB: rgb(172, 243, 228)
HSL: hsl(167, 74.7%, 81.4%)
Colorcolor

Teal 90

HEX: #def9f3
RGB: rgb(222, 249, 243)
HSL: hsl(167, 69.2%, 92.4%)
Colorcolor

Teal 95

HEX: #2e0039
RGB: rgb(46, 0, 57)
HSL: hsl(288, 100%, 11.2%)
Colorcolor

Violet 10

HEX: #3d0157
RGB: rgb(61, 1, 87)
HSL: hsl(282, 97.7%, 17.3%)
Colorcolor

Violet 15

HEX: #481a54
RGB: rgb(72, 26, 84)
HSL: hsl(288, 52.7%, 21.6%)
Colorcolor

Violet 20

HEX: #730394
RGB: rgb(115, 3, 148)
HSL: hsl(286, 96%, 29.6%)
Colorcolor

Violet 30

HEX: #9602c7
RGB: rgb(150, 2, 199)
HSL: hsl(285, 98%, 39.4%)
Colorcolor

Violet 40

HEX: #ba01ff
RGB: rgb(186, 1, 255)
HSL: hsl(284, 100%, 50.2%)
Colorcolor

Violet 50

HEX: #cb65ff
RGB: rgb(203, 101, 255)
HSL: hsl(280, 100%, 69.8%)
Colorcolor

Violet 60

HEX: #d17dfe
RGB: rgb(209, 125, 254)
HSL: hsl(279, 98.5%, 74.3%)
Colorcolor

Violet 65

HEX: #d892fe
RGB: rgb(216, 146, 254)
HSL: hsl(279, 98.2%, 78.4%)
Colorcolor

Violet 70

HEX: #e5b9fe
RGB: rgb(229, 185, 254)
HSL: hsl(278, 97.2%, 86.1%)
Colorcolor

Violet 80

HEX: #f2defe
RGB: rgb(242, 222, 254)
HSL: hsl(278, 94.1%, 93.3%)
Colorcolor

Violet 90

HEX: #f9f0ff
RGB: rgb(249, 240, 255)
HSL: hsl(276, 100%, 97.1%)
Colorcolor

Violet 95

HEX: #281202
RGB: rgb(40, 18, 2)
HSL: hsl(25, 90.5%, 8.2%)
Colorcolor

Yellow 10

HEX: #2e2204
RGB: rgb(46, 34, 4)
HSL: hsl(43, 84%, 9.8%)
Colorcolor

Yellow 15

HEX: #4f2100
RGB: rgb(79, 33, 0)
HSL: hsl(25, 100%, 15.5%)
Colorcolor

Yellow 20

HEX: #6f3400
RGB: rgb(111, 52, 0)
HSL: hsl(28, 100%, 21.8%)
Colorcolor

Yellow 30

HEX: #8c4b02
RGB: rgb(140, 75, 2)
HSL: hsl(32, 97.2%, 27.8%)
Colorcolor

Yellow 40

HEX: #a86403
RGB: rgb(168, 100, 3)
HSL: hsl(35, 96.5%, 33.5%)
Colorcolor

Yellow 50

HEX: #ca8501
RGB: rgb(202, 133, 1)
HSL: hsl(39, 99%, 39.8%)
Colorcolor

Yellow 60

HEX: #d79304
RGB: rgb(215, 147, 4)
HSL: hsl(41, 96.3%, 42.9%)
Colorcolor

Yellow 65

HEX: #e4a201
RGB: rgb(228, 162, 1)
HSL: hsl(43, 99.1%, 44.9%)
Colorcolor

Yellow 70

HEX: #fcc003
RGB: rgb(252, 192, 3)
HSL: hsl(46, 97.6%, 50%)
Colorcolor

Yellow 80

HEX: #f9e3b6
RGB: rgb(249, 227, 182)
HSL: hsl(40, 84.8%, 84.5%)
Colorcolor

Yellow 90

HEX: #fbf3e0
RGB: rgb(251, 243, 224)
HSL: hsl(42, 77.1%, 93.1%)
Colorcolor

Yellow 95

HEX: #45c65a
RGB: rgb(69, 198, 90)
HSL: hsl(130, 53.1%, 52.4%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #2e844a
RGB: rgb(46, 132, 74)
HSL: hsl(140, 48.3%, 34.9%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #194e31
RGB: rgb(25, 78, 49)
HSL: hsl(147, 51.5%, 20.2%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #071b12
RGB: rgb(7, 27, 18)
HSL: hsl(153, 58.8%, 6.7%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #071b12
RGB: rgb(7, 27, 18)
HSL: hsl(153, 58.8%, 6.7%)
Colorcolor

Success Base 10 - if used as a background, please use Success Base 100-50 to meet accessibility guidelines.

HEX: #ffffff
RGB: rgb(255, 255, 255)
HSL: hsl(0, 0%, 100%)
Colorcolor

Success Base 100 - if used as a background, please use Success Base 60-10 to meet accessibility guidelines.

HEX: #1c3326
RGB: rgb(28, 51, 38)
HSL: hsl(146, 29.1%, 15.5%)
Colorcolor

Success Base 20 - if used as a background, please use Success Base 100-60 to meet accessibility guidelines.

HEX: #194e31
RGB: rgb(25, 78, 49)
HSL: hsl(147, 51.5%, 20.2%)
Colorcolor

Success Base 30 - if used as a background, please use Success Base 100-70 to meet accessibility guidelines.

HEX: #396547
RGB: rgb(57, 101, 71)
HSL: hsl(139, 27.8%, 31%)
Colorcolor

Success Base 40 - if used as a background, please use Success Base 100-80 to meet accessibility guidelines.

HEX: #2e844a
RGB: rgb(46, 132, 74)
HSL: hsl(140, 48.3%, 34.9%)
Colorcolor

Success Base 50 - if used as a background, please use Success Base 100-90 to meet accessibility guidelines.

HEX: #3ba755
RGB: rgb(59, 167, 85)
HSL: hsl(134, 47.8%, 44.3%)
Colorcolor

Success Base 60 - if used as a background, please use Success Base 20-10 to meet accessibility guidelines.

HEX: #45c65a
RGB: rgb(69, 198, 90)
HSL: hsl(130, 53.1%, 52.4%)
Colorcolor

Success Base 70 - if used as a background, please use Success Base 30-10 to meet accessibility guidelines.

HEX: #91db8b
RGB: rgb(145, 219, 139)
HSL: hsl(116, 52.6%, 70.2%)
Colorcolor

Success Base 80 - if used as a background, please use Success Base 40-10 to meet accessibility guidelines.

HEX: #cdefc4
RGB: rgb(205, 239, 196)
HSL: hsl(107, 57.3%, 85.3%)
Colorcolor

Success Base 90 - if used as a background, please use Success Base 50-10 to meet accessibility guidelines.

HEX: #ffffff
RGB: rgb(255, 255, 255)
HSL: hsl(0, 0%, 100%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #fafaf9
RGB: rgb(250, 250, 249)
HSL: hsl(60, 9.1%, 97.8%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #f3f2f2
RGB: rgb(243, 242, 242)
HSL: hsl(0, 4%, 95.1%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #ecebea
RGB: rgb(236, 235, 234)
HSL: hsl(30, 5%, 92.2%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #fe9339
RGB: rgb(254, 147, 57)
HSL: hsl(27, 99%, 61%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #8c4b02
RGB: rgb(140, 75, 2)
HSL: hsl(32, 97.2%, 27.8%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #371e03
RGB: rgb(55, 30, 3)
HSL: hsl(31, 89.7%, 11.4%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #281202
RGB: rgb(40, 18, 2)
HSL: hsl(25, 90.5%, 8.2%)
Colorcolor

Compatibility semantic color hook generated from SLDS alias tokens.

HEX: #201600
RGB: rgb(32, 22, 0)
HSL: hsl(41, 100%, 6.3%)
Colorcolor

Warning Base 10 - if used as a background, please use Warning Base 100-50 to meet accessibility guidelines.

HEX: #ffffff
RGB: rgb(255, 255, 255)
HSL: hsl(0, 0%, 100%)
Colorcolor

Warning Base 100 - if used as a background, please use Warning Base 60-10 to meet accessibility guidelines.

HEX: #3e2b02
RGB: rgb(62, 43, 2)
HSL: hsl(41, 93.8%, 12.5%)
Colorcolor

Warning Base 20 - if used as a background, please use Warning Base 100-60 to meet accessibility guidelines.

HEX: #5f3e02
RGB: rgb(95, 62, 2)
HSL: hsl(39, 95.9%, 19%)
Colorcolor

Warning Base 30 - if used as a background, please use Warning Base 100-70 to meet accessibility guidelines.

HEX: #825101
RGB: rgb(130, 81, 1)
HSL: hsl(37, 98.5%, 25.7%)
Colorcolor

Warning Base 40 - if used as a background, please use Warning Base 100-80 to meet accessibility guidelines.

HEX: #a96404
RGB: rgb(169, 100, 4)
HSL: hsl(35, 95.4%, 33.9%)
Colorcolor

Warning Base 50 - if used as a background, please use Warning Base 100-90 to meet accessibility guidelines.

HEX: #dd7a01
RGB: rgb(221, 122, 1)
HSL: hsl(33, 99.1%, 43.5%)
Colorcolor

Warning Base 60 - if used as a background, please use Warning Base 20-10 to meet accessibility guidelines.

HEX: #fe9339
RGB: rgb(254, 147, 57)
HSL: hsl(27, 99%, 61%)
Colorcolor

Warning Base 70 - if used as a background, please use Warning Base 30-10 to meet accessibility guidelines.

HEX: #ffba90
RGB: rgb(255, 186, 144)
HSL: hsl(23, 100%, 78.2%)
Colorcolor

Warning Base 80 - if used as a background, please use Warning Base 40-10 to meet accessibility guidelines.

HEX: #fedfd0
RGB: rgb(254, 223, 208)
HSL: hsl(20, 95.8%, 90.6%)
Colorcolor

Warning Base 90 - if used as a background, please use Warning Base 50-10 to meet accessibility guidelines.

HEX: #0b5cab
RGB: rgb(11, 92, 171)
HSL: hsl(210, 87.9%, 35.7%)
Colorcolor

Default color for hyperlinks.

HEX: #032d60
RGB: rgb(3, 45, 96)
HSL: hsl(213, 93.9%, 19.4%)
Colorcolor

Default color on active for hyperlinks.

HEX: #014486
RGB: rgb(1, 68, 134)
HSL: hsl(210, 98.5%, 26.5%)
Colorcolor

Default color on focus for hyperlinks.

HEX: #014486
RGB: rgb(1, 68, 134)
HSL: hsl(210, 98.5%, 26.5%)
Colorcolor

Default color on hover for hyperlinks.

0 0 2px 0 #18181814, 0 2px 4px 1px #18181828
Shadowraw

Shadow depth 1

0 2px 8px -2px #18181814, 0 8px 12px -2px #18181828
Shadowraw

Shadow depth 2

0 12px 24px -4px #18181814, 0 16px 32px -4px #18181828
Shadowraw

Shadow depth 3

0 24px 48px -4px #18181833
Shadowraw

Shadow depth 4

0 0 0 2px #FFFFFF inset, 0 0 0 4px #0B5CAB inset
Shadowraw

Shadow with double border style inset

0 0 0 2px #0B5CAB inset, 0 0 0 4px #FFFFFF inset
Shadowraw

Shadow with double border style inset inverse

0 0 0 2px #0B5CAB
Shadowraw

Shadow around the border

0 0 0 2px #FFFFFF, 0 0 0 4px #0B5CAB
Shadowraw

Shadow with double border style outset

0.125rem / 2px
Radiusnumber

Small border radius for UI elements.

0.25rem / 4px
Radiusnumber

Medium border radius for UI elements.

0.5rem / 8px
Radiusnumber

Large border radius for UI elements.

1rem / 16px
Radiusnumber

Extra Large border radius for UI elements.

100%
Radiusnumber

Circular border radius for UI elements.

100%
Radiusnumber

Circular border radius for UI elements.

0.125rem / 2px
Border Widthsizingnumber

Size 1.

3rem / 48px
Border Widthsizingnumber

Size 10.

4rem / 64px
Border Widthsizingnumber

Size 11.

5rem / 80px
Border Widthsizingnumber

Size 12.

10rem / 160px
Border Widthsizingnumber

Size 13.

15rem / 240px
Border Widthsizingnumber

Size 14.

20rem / 320px
Border Widthsizingnumber

Size 15.

30rem / 480px
Border Widthsizingnumber

Size 16.

0.25rem / 4px
Border Widthsizingnumber

Size 2.

0.5rem / 8px
Border Widthsizingnumber

Size 3.

0.75rem / 12px
Border Widthsizingnumber

Size 4.

1rem / 16px
Border Widthsizingnumber

Size 5.

1.25rem / 20px
Border Widthsizingnumber

Size 6.

1.5rem / 24px
Border Widthsizingnumber

Size 7.

1.75rem / 28px
Border Widthsizingnumber

Size 8.

2rem / 32px
Border Widthsizingnumber

Size 9.

1px
Border Widthsizingnumber

Border size 1.

2px
Border Widthsizingnumber

Border size 2.

3px
Border Widthsizingnumber

Border size 3.

4px
Border Widthsizingnumber

Border size 4.

20ch
Border Widthsizingnumber

Content Size 1.

45ch
Border Widthsizingnumber

Content Size 2.

60ch
Border Widthsizingnumber

Content Size 3.

20ch
Border Widthsizingnumber

Header content size 1.

25ch
Border Widthsizingnumber

Header content size 2.

35ch
Border Widthsizingnumber

Header content size 3.

0.25rem / 4px
Spacingnumber

Spacing size 1.

4rem / 64px
Spacingnumber

Spacing size 10.

4.5rem / 72px
Spacingnumber

Spacing size 11.

5rem / 80px
Spacingnumber

Spacing size 12.

0.5rem / 8px
Spacingnumber

Spacing size 2.

0.75rem / 12px
Spacingnumber

Spacing size 3.

1rem / 16px
Spacingnumber

Spacing size 4.

1.5rem / 24px
Spacingnumber

Spacing size 5.

2rem / 32px
Spacingnumber

Spacing size 6.

2.5rem / 40px
Spacingnumber

Spacing size 7.

3rem / 48px
Spacingnumber

Spacing size 8.

3.5rem / 56px
Spacingnumber

Spacing size 9.

4/3
Rationumber

Landscape aspect ratio.

3/4
Rationumber

Portrait aspect ratio.

1
Rationumber

Square aspect ratio.

18/5
Rationumber

Ultra Widescreen aspect ratio.

16/9
Rationumber

Widescreen aspect ratio.

ABC abc 123
system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
Font Familyfontraw

System font stack for your application.

ABC abc 123
Consolas, Menlo, Monaco, Courier, monospace
Font Familyfontraw

Monospace font stack for your application.

The quick brown fox jumps over the lazy dog 0123456789
0.625rem / 10px
Font Sizefontnumber

Scaled font-size that is 1 stop bigger than the base.

The quick brown fox jumps over the lazy dog 0123456789
2rem / 32px
Font Sizefontnumber

Scaled font-size that is 10 stops bigger than the base.

The quick brown fox jumps over the lazy dog 0123456789
0.75rem / 12px
Font Sizefontnumber

Scaled font-size that is 2 stops bigger than the base.

The quick brown fox jumps over the lazy dog 0123456789
0.8125rem / 13px
Font Sizefontnumber

Scaled font-size that is 3 stops bigger than the base.

The quick brown fox jumps over the lazy dog 0123456789
0.875rem / 14px
Font Sizefontnumber

Scaled font-size that is 4 stops bigger than the base.

The quick brown fox jumps over the lazy dog 0123456789
1rem / 16px
Font Sizefontnumber

Scaled font-size that is 5 stops bigger than the base.

The quick brown fox jumps over the lazy dog 0123456789
1.125rem / 18px
Font Sizefontnumber

Scaled font-size that is 6 stops bigger than the base.

The quick brown fox jumps over the lazy dog 0123456789
1.25rem / 20px
Font Sizefontnumber

Scaled font-size that is 7 stops bigger than the base.

The quick brown fox jumps over the lazy dog 0123456789
1.5rem / 24px
Font Sizefontnumber

Scaled font-size that is 8 stops bigger than the base.

The quick brown fox jumps over the lazy dog 0123456789
1.75rem / 28px
Font Sizefontnumber

Scaled font-size that is 9 stops bigger than the base.

The quick brown fox jumps over the lazy dog 0123456789
0.875rem / 14px
Font Sizefontnumber

Scaled font-size that is 1 stop smaller than the base.

The quick brown fox jumps over the lazy dog 0123456789
0.8125rem / 13px
Font Sizefontnumber

Scaled font-size that is 2 stops smaller than the base.

The quick brown fox jumps over the lazy dog 0123456789
0.75rem / 12px
Font Sizefontnumber

Scaled font-size that is 3 stops smaller than the base.

The quick brown fox jumps over the lazy dog 0123456789
0.625rem / 10px
Font Sizefontnumber

Scaled font-size that is 4 stops smaller than the base.

The quick brown fox jumps over the lazy dog 0123456789
1rem / 16px
Font Sizefontnumber

Default font-size for your application.

The quick brown fox jumps over the lazy dog 0123456789
100
Font Weightfontany

Font weight 1

The quick brown fox jumps over the lazy dog 0123456789
200
Font Weightfontany

Font weight 2

The quick brown fox jumps over the lazy dog 0123456789
300
Font Weightfontany

Font weight 3

The quick brown fox jumps over the lazy dog 0123456789
400
Font Weightfontany

Font weight 4

The quick brown fox jumps over the lazy dog 0123456789
500
Font Weightfontany

Font weight 5

The quick brown fox jumps over the lazy dog 0123456789
600
Font Weightfontany

Font weight 6

The quick brown fox jumps over the lazy dog 0123456789
700
Font Weightfontany

Font weight 7

The quick brown fox jumps over the lazy dog 0123456789
bold
Font Weightfontany

Bold font-weight, use to increase emphasis.

Line one
Line two
1.5
Line Heightfontnumber

Default line-height for your application.

Line one
Line two
1
Line Heightfontnumber

Line-height 1.

Line one
Line two
1.25
Line Heightfontnumber

Line-height 2.

Line one
Line two
1.375
Line Heightfontnumber

Line-height 3.

Line one
Line two
1.5
Line Heightfontnumber

Line-height 4.

Line one
Line two
1.75
Line Heightfontnumber

Line-height 5.

Line one
Line two
2
Line Heightfontnumber

Line-height 6.