Color

Using this method we can ensure a that our design will

Brand palette

Brand colors are the main colors of an interface and are a reflection of the brand, althought having a secondary color is optional. Divided by primary and secondary colors, they are mainly used for UI actions (Buttons, links) or to highlight active states.

Primary

Color	Hex	CSS Variable
Primary	#1068eb	--color-red-darkest

Secondary

Color	Hex	CSS Variable
Secondary	#303d60	--color-red-darkest

Extended palette

Used to assist particular content areas and data visualization.

Red

Color	Hex	CSS Variable
Red Darkest	#6f1717	--color-red-darkest
Red Darker	#8d1d1d	--color-red-darker
Red Dark	#ab2424	--color-red-dark
Red	#c92a2a	--color-red
Red Light	#d96a6a	--color-red-light
Red Lighter	#e9aaaa	--color-red-lighter
Red Lightest	#faeaea	--color-red-lightest

Orange

Color	Hex	CSS Variable
Orange Darkest	#883904	--color-orange-darkest
Orange Darker	#ad4805	--color-orange-darker
Orange Dark	#d25806	--color-orange-dark
Orange	#f76707	--color-Orange
Orange Light	#f99551	--color-orange-light
Orange Lighter	#fcc29c	--color-orange-lighter
Orange Lightest	#fef0e6	--color-orange-lightest

---

Semantic palette

Used to convey a meaning or a value state, such as Info, Success, Warning, and Error. It applies to Alerts and Feedback Messages.

Info

color	css variable
Info	--color-info
Info Light	--color-info-light

Success

color	css variable
Success	--color-success
Success Light	--color-success-light

Warning

color	css variable
Warning	--color-warning
Warning Light	--color-warning-light

Error

color	css variable
Error	--color-error
Error Light	--color-error-light

Error Error Base Error Light

Naming?

light-color-feedback-background-error light-color-background-button

light-color-primary-500 dark-color-primary-500