Color system

Unique, accessible and consistent.

The color system helps you reflect our brand and style creating a visual pattern in every component aspect. We select a harmonious cool gray color palette and secondary colors to provide accessibility, simplicity and create a consistent experience in all our products ensuring color contrast between the elements.

Primary palette

Is focused in cool gray tones with varying degrees of saturation to allow dark and light variants to applied in UI in different ways as backgrounds or text

Gray 900

#1A202E

Gray 800

#27303F

Gray 700

#364152

Gray 600

#475569

Gray 500

#64748B

Gray 400

#97A6BA

Gray 300

#CFD8E3

Gray 200

#E2E8F0

Gray 100

#F1F5F9

Gray 50

#F8FAFC

Secondary palette

Contains a variety of colors to keep it fresh and consistent. Colors mostly used in messages like errors, warning, progress, updates or successful states.

Red

Red 50

#FDF2F2

Red 100

#FDE8E8

Red 200

#fbd5d5

Red 300

#f8b4b4

Red 400

#f98080

Red 500

#f05252

Red 600

#e02424

Red 700

#C81E1E

Red 800

#9b1c1c

Red 900

#771d1d

Green

Green 50

#f3faf7

Green 100

#def7ec

Green 200

#bcf0da

Green 300

#84e1bc

Green 400

#31c48d

Green 500

#0e9f6e

Green 600

#057a55

Green 700

#046c4e

Green 800

#03543f

Green 900

#014737

Yellow

Yellow 50

#fdfdea

Yellow 100

#fdf6b2

Yellow 200

#fce96a

Yellow 300

#faca15

Yellow 400

#e3a008

Yellow 500

#c27803

Yellow 600

#9f580a

Yellow 700

#8e4b10

Yellow 800

#723b13

Yellow 900

#633112

Blue

Blue 50

#ebf5ff

Blue 100

#e1effe

Blue 200

#c3ddfd

Blue 300

#a4cafe

Blue 400

#76a9fa

Blue 500

#3f83f8

Blue 600

#1c64f2

Blue 700

#1a56db

Blue 800

#1e429f

Blue 900

#233876