Cores

No nosso Design System utilizamos as cores com as suas funções específicas, todas elas derivam de uma paleta global.

Paleta global

Esta paleta serve como referência para a construção dos temas utilizados em nossos produtos. Com ela podemos criar todas as possibilidades de cores de função que cada produto exige.

Brand colors

As Brand colors, ou cores de marca, são as cores que definem as bases dos nossos produtos em seus principais componentes.

Purple Amethyst

Base

Luminosidade

purple-amethyst.50

#8A38FE

purple-amethyst.90

#E8D7FF

purple-amethyst.70

#C49BFE

purple-amethyst.40

#5705CB

purple-amethyst.30

#00005C

purple-amethyst.20

#000043

Blue Sapphire

Base

Luminosidade

blue-sapphire.50

#08A0FF

blue-sapphire.90

#E6F5FF

blue-sapphire.70

#B5E2FF

blue-sapphire.40

#006DCC

blue-sapphire.30

#00004C

blue-sapphire.20

#000033

Green Emerald

Base

Luminosidade

green-emerald.50

#33FF99

green-emerald.90

#EBFFF5

green-emerald.70

#ADFFD6

green-emerald.40

#009933

green-emerald.30

#004C00

green-emerald.20

#003300

Neutral colors

Utilizamos as cores neutras para definir as cores de fundo e textos pensando sempre no contraste que auxilie na leitura de informações importantes.

neutrals.100

#FFFFFF

neutrals.90

#F4F3F7

neutrals.80

#E9E7EE

neutrals.70

#CDCAD4

neutrals.60

#B0ADB7

neutrals.50

#938F9A

neutrals.40

#676270

neutrals.30

#3A3546

neutrals.20

#27232F

neutrals.10

#15131B

Support Colors

As cores de suporte podem ser utilizadas tanto para feedbacks, textos que demandem atenção, quanto para criação de novos temas.

Mas atenção: Utilizá-las para novos temas pode influenciar na compreensão de usuários em caso de também serem utilizadas como feedbacks.

Green Jade

green-jade.90

#E2FCED

green-jade.70

#A9DFBF

green-jade.50

#27AE60

green-jade.40

#0D9446

green-jade.30

#004800

green-jade.20

#001500

Yellow Topaz

yellow-topaz.90

#FCEACF

yellow-topaz.70

#F9D59F

yellow-topaz.50

#F0960F

yellow-topaz.40

#D67C00

yellow-topaz.30

#8A3000

yellow-topaz.20

#3D0000

Red Ruby

red-ruby.90

#FFEAF3

red-ruby.70

#EB99BB

red-ruby.50

#CC0055

red-ruby.40

#B2003B

red-ruby.30

#660000

red-ruby.20

#330000

Opacity Colors

As cores de suporte podem ser utilizadas tanto para feedbacks, textos que demandem atenção, quanto para criação de novos temas.

Mas atenção: Utilizá-las para novos temas pode influenciar na compreensão de usuários em caso de também serem utilizadas como feedbacks.

Dark

opacity.dark.04

#15131B

opacity.dark.08

#15131B

opacity.dark.16

#15131B

opacity.dark.24

#15131B

opacity.dark.40

#15131B

opacity.dark.64

#15131B

Light

yellow-topaz.90

#FFFFFF

yellow-topaz.70

#FFFFFF

yellow-topaz.50

#FFFFFF

yellow-topaz.40

#FFFFFF

yellow-topaz.30

#FFFFFF

yellow-topaz.20

#FFFFFF