Color
Color reference to support or emphasize content or to help conveying a message.
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.
Color Values
Primary
Color Values
Secondary
Extended Palette
Used to assist particular content areas and data visualization.
Color Values
Red
Color Values
Orange
Color Values
Yellow
Color Values
Lime
Color Values
Green
Color Values
Teal
Color Values
Cyan
Color Values
Blue
Color Values
Indigo
Color Values
Violet
Color Values
Grape
Color Values
Pink
Neutral Palette
Used for text, borders, backgrounds and shadows.
Color Values
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.
Color Values
Info
Color Values
Succcess
Color Values
Warning
Color Values
Error
Color values, variables and classes
Brand Palette
Primary
Color
Hex
Background Class
Text Class
CSS Variable
Primary Base
CSS Val
.background-primary
.text-primary
--color-primary
Secondary
Color
Hex
Background Class
Text Class
CSS Variable
Secondary Base
CSS Val
.background-secondary
.text-secondary
--color-secondary
Extended Palette
Red
Color
Hex
Background Class
Text Class
CSS Variable
Red Darkest
CSS Val
.background-red-darkest
.text-red-darkest
--color-red-darkest
Red Darker
CSS Val
.background-red-darker
.text-red-darker
--color-red-darker
Red Dark
CSS Val
.background-red-dark
.text-red-dark
--color-red-dark
Red
CSS Val
.background-red
.text-red
--color-red
Red Light
CSS Val
.background-red-light
.text-red-light
--color-red-light
Red Lighter
CSS Val
.background-red-lighter
.text-red-lighter
--color-red-lighter
Red Lightest
CSS Val
.background-red-lightest
.text-red-lightest
--color-red-lightest
Orange
Color
Hex
Background Class
Text Class
CSS Variable
Orange Darkest
CSS Val
.background-orange-darkest
.text-orange-darkest
--color-orange-darkest
Orange Darker
CSS Val
.background-orange-darker
.text-orange-darker
--color-orange-darker
Orange Dark
CSS Val
.background-orange-dark
.text-orange-dark
--color-orange-dark
Orange
CSS Val
.background-orange
.text-orange
--color-orange
Orange Light
CSS Val
.background-orange-light
.text-orange-light
--color-orange-light
Orange Lighter
CSS Val
.background-orange-lighter
.text-orange-lighter
--color-orange-lighter
Orange Lightest
CSS Val
.background-orange-lightest
.text-orange-lightest
--color-orange-lightest
Yellow
Color
Hex
Background Class
Text Class
CSS Variable
Yellow Darkest
CSS Val
.background-yellow-darkest
.text-yellow-darkest
--color-yellow-darkest
Yellow Darker
CSS Val
.background-yellow-darker
.text-yellow-darker
--color-yellow-darker
Yellow Dark
CSS Val
.background-yellow-dark
.text-yellow-dark
--color-yellow-dark
Yellow
CSS Val
.background-yellow
.text-yellow
--color-yellow
Yellow Light
CSS Val
.background-yellow-light
.text-yellow-light
--color-yellow-light
Yellow Lighter
CSS Val
.background-yellow-lighter
.text-yellow-lighter
--color-yellow-lighter
Yellow Lightest
CSS Val
.background-yellow-lightest
.text-yellow-lightest
--color-yellow-lightest
Lime
Color
Hex
Background Class
Text Class
CSS Variable
Lime Darkest
CSS Val
.background-lime-darkest
.text-lime-darkest
--color-lime-darkest
Lime Darker
CSS Val
.background-lime-darker
.text-lime-darker
--color-lime-darker
Lime Dark
CSS Val
.background-lime-dark
.text-lime-dark
--color-lime-dark
Lime
CSS Val
.background-lime
.text-lime
--color-lime
Lime Light
CSS Val
.background-lime-light
.text-lime-light
--color-lime-light
Lime Lighter
CSS Val
.background-lime-lighter
.text-lime-lighter
--color-lime-lighter
Lime Lightest
CSS Val
.background-lime-lightest
.text-lime-lightest
--color-lime-lightest
Green
Color
Hex
Background Class
Text Class
CSS Variable
Green Darkest
CSS Val
.background-green-darkest
.text-green-darkest
--color-green-darkest
Green Darker
CSS Val
.background-green-darker
.text-green-darker
--color-green-darker
Green Dark
CSS Val
.background-green-dark
.text-green-dark
--color-green-dark
Green
CSS Val
.background-green
.text-green
--color-green
Green Light
CSS Val
.background-green-light
.text-green-light
--color-green-light
Green Lighter
CSS Val
.background-green-lighter
.text-green-lighter
--color-green-lighter
Green Lightest
CSS Val
.background-green-lightest
.text-green-lightest
--color-green-lightest
Teal
Color
Hex
Background Class
Text Class
CSS Variable
Teal Darkest
CSS Val
.background-teal-darkest
.text-teal-darkest
--color-teal-darkest
Teal Darker
CSS Val
.background-teal-darker
.text-teal-darker
--color-teal-darker
Teal Dark
CSS Val
.background-teal-dark
.text-teal-dark
--color-teal-dark
Teal
CSS Val
.background-teal
.text-teal
--color-teal
Teal Light
CSS Val
.background-teal-light
.text-teal-light
--color-teal-light
Teal Lighter
CSS Val
.background-teal-lighter
.text-teal-lighter
--color-teal-lighter
Teal Lightest
CSS Val
.background-teal-lightest
.text-teal-lightest
--color-teal-lightest
Cyan
Color
Hex
Background Class
Text Class
CSS Variable
Cyan Darkest
CSS Val
.background-cyan-darkest
.text-cyan-darkest
--color-cyan-darkest
Cyan Darker
CSS Val
.background-cyan-darker
.text-cyan-darker
--color-cyan-darker
Cyan Dark
CSS Val
.background-cyan-dark
.text-cyan-dark
--color-cyan-dark
Cyan
CSS Val
.background-cyan
.text-cyan
--color-cyan
Cyan Light
CSS Val
.background-cyan-light
.text-cyan-light
--color-cyan-light
Cyan Lighter
CSS Val
.background-cyan-lighter
.text-cyan-lighter
--color-cyan-lighter
Cyan Lightest
CSS Val
.background-cyan-lightest
.text-cyan-lightest
--color-cyan-lightest
Blue
Color
Hex
Background Class
Text Class
CSS Variable
Blue Darkest
CSS Val
.background-blue-darkest
.text-blue-darkest
--color-blue-darkest
Blue Darker
CSS Val
.background-blue-darker
.text-blue-darker
--color-blue-darker
Blue Dark
CSS Val
.background-blue-dark
.text-blue-dark
--color-blue-dark
Blue
CSS Val
.background-blue
.text-blue
--color-blue
Blue Light
CSS Val
.background-blue-light
.text-blue-light
--color-blue-light
Blue Lighter
CSS Val
.background-blue-lighter
.text-blue-lighter
--color-blue-lighter
Blue Lightest
CSS Val
.background-blue-lightest
.text-blue-lightest
--color-blue-lightest
Indigo
Color
Hex
Background Class
Text Class
CSS Variable
Indigo Darkest
CSS Val
.background-indigo-darkest
.text-indigo-darkest
--color-indigo-darkest
Indigo Darker
CSS Val
.background-indigo-darker
.text-indigo-darker
--color-indigo-darker
Indigo Dark
CSS Val
.background-indigo-dark
.text-indigo-dark
--color-indigo-dark
Indigo
CSS Val
.background-indigo
.text-indigo
--color-indigo
Indigo Light
CSS Val
.background-indigo-light
.text-indigo-light
--color-indigo-light
Indigo Lighter
CSS Val
.background-indigo-lighter
.text-indigo-lighter
--color-indigo-lighter
Indigo Lightest
CSS Val
.background-indigo-lightest
.text-indigo-lightest
--color-indigo-lightest
Violet
Color
Hex
Background Class
Text Class
CSS Variable
Violet Darkest
CSS Val
.background-violet-darkest
.text-violet-darkest
--color-violet-darkest
Violet Darker
CSS Val
.background-violet-darker
.text-violet-darker
--color-violet-darker
Violet Dark
CSS Val
.background-violet-dark
.text-violet-dark
--color-violet-dark
Violet
CSS Val
.background-violet
.text-violet
--color-violet
Violet Light
CSS Val
.background-violet-light
.text-violet-light
--color-violet-light
Violet Lighter
CSS Val
.background-violet-lighter
.text-violet-lighter
--color-violet-lighter
Violet Lightest
CSS Val
.background-violet-lightest
.text-violet-lightest
--color-violet-lightest
Grape
Color
Hex
Background Class
Text Class
CSS Variable
Grape Darkest
CSS Val
.background-grape-darkest
.text-grape-darkest
--color-grape-darkest
Grape Darker
CSS Val
.background-grape-darker
.text-grape-darker
--color-grape-darker
Grape Dark
CSS Val
.background-grape-dark
.text-grape-dark
--color-grape-dark
Grape
CSS Val
.background-grape
.text-grape
--color-grape
Grape Light
CSS Val
.background-grape-light
.text-grape-light
--color-grape-light
Grape Lighter
CSS Val
.background-grape-lighter
.text-grape-lighter
--color-grape-lighter
Grape Lightest
CSS Val
.background-grape-lightest
.text-grape-lightest
--color-grape-lightest
Pink
Color
Hex
Background Class
Text Class
CSS Variable
Pink Darkest
CSS Val
.background-pink-darkest
.text-pink-darkest
--color-pink-darkest
Pink Darker
CSS Val
.background-pink-darker
.text-pink-darker
--color-pink-darker
Pink Dark
CSS Val
.background-pink-dark
.text-pink-dark
--color-grape-dark
Pink
CSS Val
.background-pink
.text-pink
--color-pink
Pink Light
CSS Val
.background-pink-light
.text-pink-light
--color-pink-light
Pink Lighter
CSS Val
.background-pink-lighter
.text-pink-lighter
--color-pink-lighter
Pink Lightest
CSS Val
.background-pink-lightest
.text-pink-lightest
--color-pink-lightest
Neutral Palette
Color
Hex
Background Class
Text Class
CSS Variable
Neutral 10
CSS Val
.background-neutral-10
.text-neutral-10
--color-neutral-10
Neutral 9
CSS Val
.background-neutral-9
.text-neutral-9
--color-neutral-9
Neutral 8
CSS Val
.background-neutral-8
.text-neutral-8
--color-neutral-8
Neutral 7
CSS Val
.background-neutral-7
.text-neutral-7
--color-neutral-7
Neutral 6
CSS Val
.background-neutral-6
.text-neutral-6
--color-neutral-6
Neutral 5
CSS Val
.background-neutral-5
.text-neutral-5
--color-neutral-5
Neutral 4
CSS Val
.background-neutral-4
.text-neutral-4
--color-neutral-4
Neutral 3
CSS Val
.background-neutral-3
.text-neutral-3
--color-neutral-3
Neutral 2
CSS Val
.background-neutral-2
.text-neutral-2
--color-neutral-2
Neutral 1
CSS Val
.background-neutral-1
.text-neutral-1
--color-neutral-1
Neutral 0
CSS Val
.background-neutral-0
.text-neutral-0
--color-neutral-0
Semantic Palette
Info
Color
Hex
Background Class
Text Class
CSS Variable
Info Base
CSS Val
.background-info
.text-info
--color-info
Info Light
CSS Val
.background-info-light
.text-info-light
--color-info-light
Success
Color
Hex
Background Class
Text Class
CSS Variable
Success Base
CSS Val
.background-success
.text-success
--color-success
Success Light
CSS Val
.background-success-light
.text-success-light
--color-success-light
Warning
Color
Hex
Background Class
Text Class
CSS Variable
Warning Base
CSS Val
.background-warning
.text-warning
--color-warning
Warning Light
CSS Val
.background-warning-light
.text-warning-light
--color-warning-light
Error
Color
Hex
Background Class
Text Class
CSS Variable
Error Base
CSS Val
.background-error
.text-error
--color-error
Error Light
CSS Val
.background-error-light
.text-error-light
--color-error-light
Click here to see your activities