Feedback colours

Some colors tell the user more about the status or validation of a process. A few statusses you can think about are: success, warning and error states.

Name Variable	Description	Cross Reference	Preview
color.variables.feedback.success	Color to indicate a succeSsful process of some sort like successfully signing up or correctively filling in an inputfield.	color.accent.Persian.700
color.variables.feedback.error	Color to indicate an error or negative process of some sort like wrongly filling in an inputfield or loss on an asset.	color.accent.carmine.600

Font colours

Our typography stack is supported by our font colours. These colours decide the rules we made on what color a font shoult be when it’s a header, body text or even a link.

Name Variable	Description	Cross Reference	Preview
color.variables.font.headers	A color for every header in our applications and websites.	color.shades.900
color.variables.font.body	A color for every body text in our applications and websites.	color.shades.700
color.variables.font.linkDefault	The default link color.	color.brand.lsegblue.500
color.variables.font.linkHover	The link hover color.	color.brand.lsegblue.700

Depth colours

We also need colours for everything that happens on the background. Think about the app background colour, divider rules and surface background.

Name Variable	Description	Cross Reference	Preview
color.variables.depth.background	The background of our websites and apps. Subtle background, with low contrast, that doesn’t draw any attention.	color.shades.50
color.variables.depth.surface	The background of our main content. So the background of a card for example or a section.	color.shades.000
color.variables.depth.dividerSubtle	Subtle divider lines that separate two pieces of content. Used when the divider is larger so it has more body.	color.shades.100
color.variables.depth.dividerDefault	Divider lines that separate two pieces of content.	color.shades.200
color.variables.depth.backdrop	The background color that appears whenever a pop-over opens on top of actual content. The layer itself should have 60% opacity.	color.shades.999