Cores

As cores são um dos elementos mais fundamentais em qualquer Design System, pois desempenham um papel crucial na identidade visual, usabilidade e experiência do usuário. Elas não apenas transmitem emoções e significados, mas também ajudam a estabelecer hierarquia, consistência e acessibilidade em interfaces digitais.

Baixar PDF

Paleta de Cores

Cores de elementos do sistema

#4D008C

Botões (salvar)

Cor principal para botões de ação positiva, ações lógicas

#6C48C2

Cor de links

Links e elementos interativos, redirecionamento de página

#FD33D7

Botões críticos

Ações que alteram o funcionamento e uso, ex: mudar senha, comprar algo.

#0BB3FC

Elementos de feedback

Alertas, notificações e mensagens

#E300FD

Botões secundários e ícones

Detalhes, ícones, botões secundários

#D0B0FD

Fundo de ícones

Ao fundo dos ícones

Cards de estado

#2ECC71

Habilitado

Elementos ativos e disponíveis, aprovados, positivo

#B3E9CA

Texto

Cor principal para textos de habilitado

#E74C3C

Desabilitado

Elementos inativos, desaprovados, negativo, desativado

#F3A59D

Texto

Cor principal para textos de inativo

#CC782E

Neutro

Elementos parados, em repouso, sem movimento, transporte

#F3BE8E

Texto

Cor principal para textos de neutro

#3498DB

Anonimizado

Não mostra as informações, anonimizado, sem dados ainda

#91D3FF

Texto

Cor principal para textos sem infos.

#6C48C2

Em processo

Em transporte, algo está acontecendo, em movimento.

#A885F9

Texto

Cor principal para textos em mov.

Tipografia

#0F0A1D

Títulos

Cabeçalhos principais

#422C76

Subtítulos

Cabeçalhos secundários

#5F5B68

Textos

Corpo de texto principal

#B1B1B1

Informação da tabela

Destaques em tabelas

#85828C

Dentro dos inputs

Texto em campos de formulário

#AFAEB4

Desabilitado

Texto desativado

Fundos

#FFFFFF

Fundo 2

Fundo secundário