Color variables - Primary
These are the colors that are most frequently used across your UI and imparts a distinct identity to the product.
color-one-100
color-one-90
color-one-10
color-one-5
color-one-110
Color variables - Secondary
These colors highlight or complement the primary color. These are to be used sparingly to make the UI elements stand out.
color-two-100
color-two-90
color-two-10
color-two-5
color-two-110
Color variables - Tertiary
color-three-100
color-three-90
color-three-10
color-three-5
color-three-110
Color variables - Accent
color-four-100
color-four-90
color-four-10
color-four-5
color-four-110
Color variables - Link
Color for links, anchor tag, hyperlinks.
color-link-100
color-link-90
color-link-10
color-link-5
color-link-110
Color variables - Neutrals
These include shades of grey, all the way from White to Black. These are used for backgrounds, text colors, etc, and form the majority of your UI.
color-white
color-neutral-5
color-neutral-20
(default border color)
color-neutral-40
color-neutral-60
color-neutral-80
(default body font color)
color-neutral-100
(default headings font color)
color-black
Color variables - State colors
These are the colors that communicate purpose. They help users convey messages. For example, Green has a positive connotation.
Color variables - Success
color-success-100
color-success-90
color-success-10
color-success-5
color-success-110
Color variables - Warning
color-warning-100
color-warning-90
color-warning-10
color-warning-5
color-warning-110
Color variables - Error
color-error-100
color-error-90
color-error-10
color-error-5
color-error-110
Color variables - Info
color-info-100
color-info-90
color-info-10
color-info-5
color-info-110