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, 87.6%, 62%, 1)#4f49f3
primaryActive--lns-color-primaryActivehsla(242, 55%, 36%, 1)#2d298e
body--lns-color-bodyhsla(228, 6%, 17%, 1)#292a2e
bodyDimmed--lns-color-bodyDimmedhsla(224, 5%, 44%, 1)#6b6e76
bodyInverse--lns-color-bodyInversehsla(0, 0%, 100%, 1)#ffffff
background--lns-color-backgroundhsla(0, 0%, 100%, 1)#ffffff
backgroundHover--lns-color-backgroundHoverhsla(209, 75.6%, 8%, 0.06)
backgroundActive--lns-color-backgroundActivehsla(225.5, 56.9%, 10%, 0.14)
backgroundSecondary--lns-color-backgroundSecondaryhsla(0, 0%, 97.25%, 1)#f8f8f8
backgroundSecondary2--lns-color-backgroundSecondary2hsla(0, 0%, 97.25%, 1)#f8f8f8
backgroundInverse--lns-color-backgroundInversehsla(228, 6%, 17%, 1)#292a2e
overlay--lns-color-overlayhsla(0, 0%, 100%, 1)#ffffff
backdrop--lns-color-backdrophsla(224, 72%, 7%, 0.46)
border--lns-color-borderhsla(225.5, 57%, 10%, 0.14)
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
focusRing--lns-color-focusRinghsla(242, 88.4%, 66.3%, 0.8)
backdropDark--lns-color-backdropDarkhsla(228, 6%, 17%, 0.9)
backdropTwilight--lns-color-backdropTwilighthsla(242, 55%, 36%, 0.8)
highlight--lns-color-highlighthsla(242, 88.4%, 66.3%, 0.15)
warning--lns-color-warninghsla(45.5, 96%, 57%, 1)#fbc828
info--lns-color-infohsla(215, 80.25%, 47.65%, 1)#1869db
success--lns-color-successhsla(155, 62%, 32%, 1)#1f845a
danger--lns-color-dangerhsla(4, 64%, 48%, 1)#c9372c
dangerHover--lns-color-dangerHoverhsla(4.3, 65.7%, 41.2%, 1)#ae2e24
dangerActive--lns-color-dangerActivehsla(4.5, 56.3%, 23.3%, 1)#5d1f1a
disabledContent--lns-color-disabledContenthsla(223, 5%, 73%, 1)#b7b9be
disabledBackground--lns-color-disabledBackgroundhsla(0, 0%, 9%, 0.03)
formFieldBorder--lns-color-formFieldBorderhsla(223.6, 5%, 57%, 1)#8c8f97
formFieldBackground--lns-color-formFieldBackgroundhsla(0, 0%, 100%, 1)#ffffff
buttonBorder--lns-color-buttonBorderhsla(252, 13%, 46%, 0.25)
tabBackground--lns-color-tabBackgroundhsla(209, 75.6%, 8%, 0.06)
upgrade--lns-color-upgradehsla(277.5, 89%, 96.5%, 1)#f8eefe
upgradeHover--lns-color-upgradeHoverhsla(277, 86%, 91.6%, 1)#eed7fc
upgradeActive--lns-color-upgradeActivehsla(278.6, 84.5%, 79.8%, 1)#d8a0f7
discoveryBackground--lns-color-discoveryBackgroundhsla(278.6, 48.4%, 52.2%, 1)#964ac0
discoveryLightBackground--lns-color-discoveryLightBackgroundhsla(277.5, 89%, 96.5%, 1)#f8eefe
discoveryTitle--lns-color-discoveryTitlehsla(228, 6%, 17%, 1)#292a2e
discoveryHighlight--lns-color-discoveryHighlighthsla(277.5, 89%, 96.5%, 1)#f8eefe
Dark
primary--lns-color-primaryhsla(242, 87%, 73%, 1)#827ef6
primaryHover--lns-color-primaryHoverhsla(242, 87.6%, 62%, 1)#4f49f3
primaryActive--lns-color-primaryActivehsla(242, 55%, 36%, 1)#2d298e
body--lns-color-bodyhsla(225, 4.3%, 81.6%, 1)#cecfd2
bodyDimmed--lns-color-bodyDimmedhsla(217.5, 4%, 60.4%, 1)#96999e
bodyInverse--lns-color-bodyInversehsla(240, 3%, 12.5%, 1)#1f1f21
background--lns-color-backgroundhsla(240, 3%, 12.5%, 1)#1f1f21
backgroundHover--lns-color-backgroundHoverhsla(240, 12.6%, 83%, 0.07)
backgroundActive--lns-color-backgroundActivehsla(236, 36.6%, 92%, 0.12)
backgroundSecondary--lns-color-backgroundSecondaryhsla(210, 4%, 9.8%, 1)#18191a
backgroundSecondary2--lns-color-backgroundSecondary2hsla(210, 4%, 9.8%, 1)#18191a
backgroundInverse--lns-color-backgroundInversehsla(225, 4.3%, 81.6%, 1)#cecfd2
overlay--lns-color-overlayhsla(225, 4%, 17.6%, 1)#2b2c2f
backdrop--lns-color-backdrophsla(210, 11%, 7%, 0.6)
border--lns-color-borderhsla(236, 36.6%, 92%, 0.12)
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
focusRing--lns-color-focusRinghsla(242, 88.4%, 66.3%, 0.8)
backdropDark--lns-color-backdropDarkhsla(228, 6%, 17%, 0.9)
backdropTwilight--lns-color-backdropTwilighthsla(242, 55%, 36%, 0.8)
highlight--lns-color-highlighthsla(242, 88.4%, 66.3%, 0.15)
warning--lns-color-warninghsla(45.5, 96%, 57%, 1)#fbc828
info--lns-color-infohsla(216.3, 83%, 67.25%, 1)#669df1
success--lns-color-successhsla(155, 57%, 55%, 1)#4bce97
danger--lns-color-dangerhsla(3.75, 91%, 69%, 1)#f87168
dangerHover--lns-color-dangerHoverhsla(4, 96%, 78%, 1)#fd9891
dangerActive--lns-color-dangerActivehsla(4, 100%, 91.2%, 1)#ffd5d2
disabledContent--lns-color-disabledContenthsla(225, 5%, 33%, 1)#505258
disabledBackground--lns-color-disabledBackgroundhsla(0, 0%, 1%, 0.46)
formFieldBorder--lns-color-formFieldBorderhsla(222, 4%, 51.4%, 1)#7e8188
formFieldBackground--lns-color-formFieldBackgroundhsla(225, 5%, 15%, 1)#242528
buttonBorder--lns-color-buttonBorderhsla(0, 0%, 100%, 0.25)
tabBackground--lns-color-tabBackgroundhsla(240, 12.6%, 83%, 0.07)
upgrade--lns-color-upgradehsla(277.8, 27.3%, 19.4%, 1)#35243f
upgradeHover--lns-color-upgradeHoverhsla(278, 44.2%, 25.3%, 1)#48245d
upgradeActive--lns-color-upgradeActivehsla(278, 45%, 44.7%, 1)#803fa5
discoveryBackground--lns-color-discoveryBackgroundhsla(278.5, 84.5%, 72.2%, 1)#c97cf4
discoveryLightBackground--lns-color-discoveryLightBackgroundhsla(277.8, 27.3%, 19.4%, 1)#35243f
discoveryTitle--lns-color-discoveryTitlehsla(225, 4.3%, 81.6%, 1)#cecfd2
discoveryHighlight--lns-color-discoveryHighlighthsla(277.8, 27.3%, 19.4%, 1)#35243f
Greyscale
grey8--lns-color-grey8hsla(228, 6%, 17%, 1)#292a2e
grey7--lns-color-grey7hsla(223, 6%, 24.5%, 1)#3b3d42
grey6--lns-color-grey6hsla(224, 5%, 44%, 1)#6b6e76
grey5--lns-color-grey5hsla(224, 5%, 57%, 1)#8c8f97
grey4--lns-color-grey4hsla(223, 5%, 73%, 1)#b7b9be
grey3--lns-color-grey3hsla(225, 6%, 87.5%, 1)#dddee1
grey2--lns-color-grey2hsla(210, 7%, 94.5%, 1)#f0f1f2
grey1--lns-color-grey1hsla(0, 0%, 97.25%, 1)#f8f8f8
white--lns-color-whitehsla(0, 0%, 100%, 1)#ffffff
Base colors
red--lns-color-redhsla(4, 64%, 48%, 1)#c9372c
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
blurpleStrong--lns-color-blurpleStronghsla(242, 55%, 36%, 1)#2d298e
offWhite--lns-color-offWhitehsla(0, 0%, 97.25%, 1)#f8f8f8
blueLight--lns-color-blueLighthsla(216.5, 92%, 90.2%, 1)#cfe1fd
blue--lns-color-bluehsla(215.4, 80%, 47.65%, 1)#1868db
blueDark--lns-color-blueDarkhsla(216.3, 69.2%, 23%, 1)#123263
magenta--lns-color-magentahsla(323, 42%, 48%, 1)#ae4786
orangeLight--lns-color-orangeLighthsla(4, 100%, 91.2%, 1)#ffd5d2
orange--lns-color-orangehsla(11, 100%, 62.2%, 1)#ff623e
orangeDark--lns-color-orangeDarkhsla(10.9, 100%, 42.2%, 1)#d72700
tealLight--lns-color-tealLighthsla(155, 70%, 84%, 1)#baf3db
teal--lns-color-tealhsla(155, 62%, 32%, 1)#1f845a
tealDark--lns-color-tealDarkhsla(155, 55%, 19%, 1)#164b35
yellowLight--lns-color-yellowLighthsla(43, 93%, 82%, 1)#fce4a6
yellow--lns-color-yellowhsla(45.5, 96%, 57%, 1)#fbc828
yellowDark--lns-color-yellowDarkhsla(39.8, 100%, 49.4%, 1)#fca700
Gradients
ai-primary--lns-gradient-ai-primaryradial-gradient(134.96% 884.49% at 119.29% 112.58%, #DC43BE 0%, #565ADD 70%)
ai-secondary--lns-gradient-ai-secondaryradial-gradient(100% 138.41% at 100% 100%, #EFF0FF 0%, #FFFFFF 100%)