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. Divided by primary and secondary colors, they are mainly used for UI actions or to highlight active states.
Neutral Palette
Used for text, borders, backgrounds, shadows and disabled elements.
Pastel Palette
Used to present different types or categories.
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, variables and classes
Brand Palette
#263951
.background-primary
.text-primary
--color-primary
#272b30
.background-secondary
.text-secondary
--color-secondary
#111d2b
.background-primary-dark
.text-primary-dark
--color-primary-dark
#405065
.background-primary-medium
.text-primary-medium
--color-primary-medium
#2e598c
.background-primary-button-hover
.text-primary-button-hover
--color-primary-button-hover
#9cb0c6
.background-primary-light
.text-primary-light
--color-primary-light
#edf5fd
.background-primary-lightest
.text-primary-lightest
--color-primary-lightest
#6d928a
.background-marine
.text-marine
--color-marine
#d8f0ec
.background-marine-light
.text-marine-light
--color-marine-light
#eee2db
.background-beige
.text-beige
--color-beige
#f7a993
.background-peach
.text-peach
--color-peach
#ffffff
.background-body
--color-background-body
Neutral Palette
Neutral 0
(body background)#ffffff
.background-neutral-0
.text-neutral-0
--color-neutral-0
#f8f9fa
.background-neutral-1
.text-neutral-1
--color-neutral-1
Neutral 2
(disabled input/button - background)#f1f3f5
.background-neutral-2
.text-neutral-2
--color-neutral-2
#e9ecef
.background-neutral-3
.text-neutral-3
--color-neutral-3
Neutral 4
(disabled input/button - border / disabled checkbox)#dee2e6
.background-neutral-4
.text-neutral-4
--color-neutral-4
Neutral 5
(enabled input / dropdown / checkbox - border)#ced4da
.background-neutral-5
.text-neutral-5
--color-neutral-5
Neutral 6
(disabled input/button - text)#adb5bd
.background-neutral-6
.text-neutral-6
--color-neutral-6
#6a7178
.background-neutral-7
.text-neutral-7
--color-neutral-7
#4f575e
.background-neutral-8
.text-neutral-8
--color-neutral-8
Neutral 9
(Secondary Base - body text, headings)#272b30
.background-neutral-9
.text-neutral-9
--color-neutral-9
#101213
.background-neutral-10
.text-neutral-10
--color-neutral-10
Pastel Palette
#f6c7db
.background-pastel-pink
.text-pastel-pink
--color-pastel-pink
#98b8e1
.background-pastel-blue
.text-pastel-blue
--color-pastel-blue
#d7eff6
.background-pastel-blue-light
.text-pastel-blue-light
--color-pastel-blue-light
#d8e9b6
.background-pastel-green
.text-pastel-green
--color-pastel-green
#fdedb2
.background-pastel-yellow
.text-pastel-yellow
--color-pastel-yellow
#fdc595
.background-pastel-orange
.text-pastel-orange
--color-pastel-orange
#f8ada3
.background-pastel-red
.text-pastel-red
--color-pastel-red
#eee2db
.background-pastel-beige
.text-pastel-beige
--color-pastel-beige
Semantic Palette
Info
#e5f5fc
.background-info-light
.text-info-light
--color-info-light
#017aad
.background-info
.text-info
--color-info
Success
#eaf3eb
.background-success-light
.text-success-light
--color-success-light
#29823b
.background-success
.text-success
--color-success
Warning
#fdf6e5
.background-warning-light
.text-warning-light
--color-warning-light
#e9a100
.background-warning
.text-warning
--color-warning
Error
#fceaea
.background-error-light
.text-error-light
--color-error-light
#dc2020
.background-error
.text-error
--color-error