All colors are defined with HSLA values: hue saturation lightness alpha. HSLA format is easy to read and easy to modify.
Semantic colors
Whenever possible use semantic colors instead of Greyscale colors or Base colors.
Dynamic
Semantic colors are dynamic and will react to the current theme, for example: the color body will dynamically change from grey8 to grey1 in dark mode.
Semantic
Semantic color names indicate a specific usage. This reduces ambiguity when deciding which color to use. For example, for borders we can use border semantic color.
Scalable
Semantic colors are easier to maintain and scale, for example: instead of applying a specific color to the primary button we can use primary semantic color which will adapt if we change our primary color value in the future.
Light
primary--lns-color-primaryhsla(242, 88.4%, 66.3%, 1)#625df5
primaryHover--lns-color-primaryHoverhsla(242, 88.4%, 56.3%, 1)#342df2
primaryActive--lns-color-primaryActivehsla(242, 88.4%, 45.3%, 1)#140dda
body--lns-color-bodyhsla(0, 0%, 13%, 1)#212121
bodyDimmed--lns-color-bodyDimmedhsla(252, 13%, 46%, 1)#6c6685
background--lns-color-backgroundhsla(0, 0%, 100%, 1)#ffffff
backgroundHover--lns-color-backgroundHoverhsla(246, 16%, 26%, 0.1)
backgroundActive--lns-color-backgroundActivehsla(246, 16%, 26%, 0.3)
backgroundSecondary--lns-color-backgroundSecondaryhsla(246, 16%, 26%, 0.04)
backgroundSecondary2--lns-color-backgroundSecondary2hsla(45, 34%, 78%, 0.2)
overlay--lns-color-overlayhsla(0, 0%, 100%, 1)#ffffff
border--lns-color-borderhsla(252, 13%, 46%, 0.2)
focusRing--lns-color-focusRinghsla(242, 88.4%, 66.3%, 0.5)
record--lns-color-recordhsla(11, 100%, 62.2%, 1)#ff623e
recordHover--lns-color-recordHoverhsla(11, 100%, 52.2%, 1)#ff380b
recordActive--lns-color-recordActivehsla(11, 100%, 42.2%, 1)#d72700
info--lns-color-infohsla(206, 100%, 73.3%, 1)#77c4ff
success--lns-color-successhsla(180, 51.4%, 51.6%, 1)#44c3c3
warning--lns-color-warninghsla(39, 100%, 68%, 1)#ffc65c
danger--lns-color-dangerhsla(11, 80%, 45%, 1)#cf3917
dangerHover--lns-color-dangerHoverhsla(11, 80%, 38%, 1)#ae3013
dangerActive--lns-color-dangerActivehsla(11, 80%, 31%, 1)#8e2710
backdrop--lns-color-backdrophsla(0, 0%, 13%, 0.5)
backdropDark--lns-color-backdropDarkhsla(0, 0%, 13%, 0.9)
disabledContent--lns-color-disabledContenthsla(240, 7%, 62%, 1)#9797a5
highlight--lns-color-highlighthsla(240, 83.3%, 66.3%, 0.15)
disabledBackground--lns-color-disabledBackgroundhsla(260, 11%, 95%, 1)#f2f1f4
formFieldBorder--lns-color-formFieldBorderhsla(260, 11%, 85%, 1)#d7d5dd
formFieldBackground--lns-color-formFieldBackgroundhsla(0, 0%, 100%, 1)#ffffff
buttonBorder--lns-color-buttonBorderhsla(252, 13%, 46%, 0.25)
upgrade--lns-color-upgradehsla(206, 100%, 93%, 1)#dbf0ff
upgradeHover--lns-color-upgradeHoverhsla(206, 100%, 85%, 1)#b3deff
upgradeActive--lns-color-upgradeActivehsla(206, 100%, 77%, 1)#8accff
tabBackground--lns-color-tabBackgroundhsla(252, 13%, 46%, 0.15)
discoveryBackground--lns-color-discoveryBackgroundhsla(206, 100%, 93%, 1)#dbf0ff
discoveryLightBackground--lns-color-discoveryLightBackgroundhsla(206, 100%, 97%, 1)#f0f8ff
discoveryTitle--lns-color-discoveryTitlehsla(0, 0%, 13%, 1)#212121
discoveryHighlight--lns-color-discoveryHighlighthsla(206, 100%, 77%, 0.3)
Dark
primary--lns-color-primaryhsla(242, 87%, 73%, 1)#827ef6
primaryHover--lns-color-primaryHoverhsla(242, 88.4%, 56.3%, 1)#342df2
primaryActive--lns-color-primaryActivehsla(242, 88.4%, 45.3%, 1)#140dda
body--lns-color-bodyhsla(240, 7%, 97%, 1)#f7f7f8
bodyDimmed--lns-color-bodyDimmedhsla(240, 7%, 62%, 1)#9797a5
background--lns-color-backgroundhsla(0, 0%, 13%, 1)#212121
backgroundHover--lns-color-backgroundHoverhsla(0, 0%, 100%, 0.1)
backgroundActive--lns-color-backgroundActivehsla(0, 0%, 100%, 0.2)
backgroundSecondary--lns-color-backgroundSecondaryhsla(0, 0%, 100%, 0.04)
backgroundSecondary2--lns-color-backgroundSecondary2hsla(45, 13%, 44%, 0.2)
overlay--lns-color-overlayhsla(0, 0%, 20%, 1)#333333
border--lns-color-borderhsla(259, 12%, 75%, 0.2)
focusRing--lns-color-focusRinghsla(242, 88.4%, 66.3%, 0.5)
record--lns-color-recordhsla(11, 100%, 62.2%, 1)#ff623e
recordHover--lns-color-recordHoverhsla(11, 100%, 52.2%, 1)#ff380b
recordActive--lns-color-recordActivehsla(11, 100%, 42.2%, 1)#d72700
info--lns-color-infohsla(206, 100%, 73.3%, 1)#77c4ff
success--lns-color-successhsla(180, 51.4%, 51.6%, 1)#44c3c3
warning--lns-color-warninghsla(39, 100%, 68%, 1)#ffc65c
danger--lns-color-dangerhsla(11, 80%, 45%, 1)#cf3917
dangerHover--lns-color-dangerHoverhsla(11, 80%, 38%, 1)#ae3013
dangerActive--lns-color-dangerActivehsla(11, 80%, 31%, 1)#8e2710
backdrop--lns-color-backdrophsla(0, 0%, 13%, 0.5)
backdropDark--lns-color-backdropDarkhsla(0, 0%, 13%, 0.9)
disabledContent--lns-color-disabledContenthsla(240, 7%, 62%, 1)#9797a5
highlight--lns-color-highlighthsla(240, 83.3%, 66.3%, 0.15)
disabledBackground--lns-color-disabledBackgroundhsla(252, 13%, 23%, 1)#363342
formFieldBorder--lns-color-formFieldBorderhsla(252, 13%, 46%, 1)#6c6685
formFieldBackground--lns-color-formFieldBackgroundhsla(0, 0%, 13%, 1)#212121
buttonBorder--lns-color-buttonBorderhsla(0, 0%, 100%, 0.25)
upgrade--lns-color-upgradehsla(206, 92%, 81%, 1)#a2d4fb
upgradeHover--lns-color-upgradeHoverhsla(206, 92%, 74%, 1)#80c5fa
upgradeActive--lns-color-upgradeActivehsla(206, 92%, 67%, 1)#5db5f8
tabBackground--lns-color-tabBackgroundhsla(0, 0%, 100%, 0.15)
discoveryBackground--lns-color-discoveryBackgroundhsla(206, 92%, 81%, 1)#a2d4fb
discoveryLightBackground--lns-color-discoveryLightBackgroundhsla(0, 0%, 13%, 1)#212121
discoveryTitle--lns-color-discoveryTitlehsla(206, 100%, 73.3%, 1)#77c4ff
discoveryHighlight--lns-color-discoveryHighlighthsla(206, 100%, 77%, 0.3)
Greyscale
grey8--lns-color-grey8hsla(0, 0%, 13%, 1)#212121
grey7--lns-color-grey7hsla(246, 16%, 26%, 1)#3a384d
grey6--lns-color-grey6hsla(252, 13%, 46%, 1)#6c6685
grey5--lns-color-grey5hsla(240, 7%, 62%, 1)#9797a5
grey4--lns-color-grey4hsla(259, 12%, 75%, 1)#bcb8c7
grey3--lns-color-grey3hsla(260, 11%, 85%, 1)#d7d5dd
grey2--lns-color-grey2hsla(260, 11%, 95%, 1)#f2f1f4
grey1--lns-color-grey1hsla(240, 7%, 97%, 1)#f7f7f8
white--lns-color-whitehsla(0, 0%, 100%, 1)#ffffff
Base colors
red--lns-color-redhsla(11, 80%, 45%, 1)#cf3917
blurpleLight--lns-color-blurpleLighthsla(240, 83.3%, 95.3%, 1)#e9e9fd
blurpleMedium--lns-color-blurpleMediumhsla(242, 81%, 87.6%, 1)#c7c6f9
blurple--lns-color-blurplehsla(242, 88.4%, 66.3%, 1)#625df5
blurpleDark--lns-color-blurpleDarkhsla(242, 87.6%, 62%, 1)#4f49f3
offWhite--lns-color-offWhitehsla(45, 36.4%, 95.7%, 1)#f8f6f0
blueLight--lns-color-blueLighthsla(206, 58.3%, 85.9%, 1)#c6def0
blue--lns-color-bluehsla(206, 100%, 73.3%, 1)#77c4ff
blueDark--lns-color-blueDarkhsla(206, 29.5%, 33.9%, 1)#3d5a70
orangeLight--lns-color-orangeLighthsla(6, 100%, 89.6%, 1)#ffcfca
orange--lns-color-orangehsla(11, 100%, 62.2%, 1)#ff623e
orangeDark--lns-color-orangeDarkhsla(11, 79.9%, 64.9%, 1)#ed785e
tealLight--lns-color-tealLighthsla(180, 20%, 67.6%, 1)#9cbdbd
teal--lns-color-tealhsla(180, 51.4%, 51.6%, 1)#44c3c3
tealDark--lns-color-tealDarkhsla(180, 16.2%, 22.9%, 1)#314444
yellowLight--lns-color-yellowLighthsla(39, 100%, 87.8%, 1)#ffe9c1
yellow--lns-color-yellowhsla(50, 100%, 57.3%, 1)#ffdb25
yellowDark--lns-color-yellowDarkhsla(39, 100%, 68%, 1)#ffc65c