All colors are defined with HSLA values: hue saturation lightness alpha. HSLA format is easy to read and easy to modify.
Greyscale
grey8--lns-color-grey8hsla(0, 0%, 13%, 1)#212121
grey7--lns-color-grey7hsla(242, 21%, 28%, 1)#393856
grey6--lns-color-grey6hsla(240, 8%, 46%, 1)#6c6c7f
grey5--lns-color-grey5hsla(240, 7%, 62%, 1)#9797a5
grey4--lns-color-grey4hsla(240, 5.8%, 76.3%, 1)#bfbfc6
grey3--lns-color-grey3hsla(240, 6%, 87%, 1)#dcdce0
grey2--lns-color-grey2hsla(240, 8%, 93%, 1)#ececef
grey1--lns-color-grey1hsla(240, 7%, 97%, 1)#f7f7f8
white--lns-color-whitehsla(240, 7%, 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
Semantic colors
Whenever possible use semantic colors instead of colors from Greyscale 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 on 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
body--lns-color-bodyhsla(0, 0%, 13%, 1)#212121
bodyDimmed--lns-color-bodyDimmedhsla(0, 0%, 13%, 0.6)
background--lns-color-backgroundhsla(240, 7%, 100%, 1)#ffffff
backgroundHover--lns-color-backgroundHoverhsla(242, 21%, 28%, 0.1)
backgroundActive--lns-color-backgroundActivehsla(242, 21%, 28%, 0.3)
backgroundSecondary--lns-color-backgroundSecondaryhsla(242, 21%, 28%, 0.04)
overlay--lns-color-overlayhsla(240, 7%, 100%, 1)#ffffff
border--lns-color-borderhsla(240, 8%, 46%, 0.2)
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
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
success--lns-color-successhsla(180, 51.4%, 51.6%, 1)#44c3c3
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)
disabledContent--lns-color-disabledContenthsla(240, 7%, 62%, 1)#9797a5
highlight--lns-color-highlighthsla(240, 83.3%, 66.3%, 0.15)
disabledBackground--lns-color-disabledBackgroundhsla(240, 8%, 93%, 1)#ececef
formFieldBorder--lns-color-formFieldBorderhsla(240, 6%, 87%, 1)#dcdce0
formFieldBackground--lns-color-formFieldBackgroundhsla(240, 7%, 100%, 1)#ffffff
buttonBorder--lns-color-buttonBorderhsla(240, 8%, 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(240, 8%, 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
body--lns-color-bodyhsla(240, 7%, 97%, 1)#f7f7f8
bodyDimmed--lns-color-bodyDimmedhsla(240, 40%, 97%, 0.6)
background--lns-color-backgroundhsla(0, 0%, 13%, 1)#212121
backgroundHover--lns-color-backgroundHoverhsla(240, 7%, 100%, 0.1)
backgroundActive--lns-color-backgroundActivehsla(240, 8%, 0%, 0.2)
backgroundSecondary--lns-color-backgroundSecondaryhsla(240, 7%, 100%, 0.04)
overlay--lns-color-overlayhsla(0, 0%, 20%, 1)#333333
border--lns-color-borderhsla(240, 5.8%, 76.3%, 0.2)
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
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
success--lns-color-successhsla(180, 51.4%, 51.6%, 1)#44c3c3
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)
disabledContent--lns-color-disabledContenthsla(240, 7%, 62%, 1)#9797a5
highlight--lns-color-highlighthsla(240, 83.3%, 66.3%, 0.15)
disabledBackground--lns-color-disabledBackgroundhsla(240, 8%, 23%, 1)#36363f
formFieldBorder--lns-color-formFieldBorderhsla(240, 8%, 46%, 1)#6c6c7f
formFieldBackground--lns-color-formFieldBackgroundhsla(0, 0%, 13%, 1)#212121
buttonBorder--lns-color-buttonBorderhsla(240, 7%, 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(240, 7%, 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)