Cores

A paleta de cores do Design System Betha foi projetada para transmitir harmonia e seriedade aos produtos a partir de uma combinação de cores primárias, secundárias e terciárias. A gama de cores foi elaborada com base na graduação de luminosidade, o que resultou em uma paleta composta por 81 cores, além das cores institucionais Betha.

Quando utilizar

As cores podem ser utilizadas em ícones, ilustrações ou para destacar elementos importantes da interface. É importante utilizá-las com cautela, já que não é função de uma cor modificar a identidade visual dos produtos e sim de possibilitar ao usuário uma rápida identificação do estado de um elemento ou registro (status), de chamar sua atenção para uma determinada informação (notificação, alerta, etc.), entre outros usos dessa natureza.

Cores dos produtos

Devem ser utilizadas com extrema cautela nos elementos de UI de uma interface. Idealmente, elas servem para facilitar a área de negócio a qual o produto se destina (Contabilidade, Recursos Humanos, etc.)

Cor	Hexadecimal	Descrição
	`#001489`	Cor da marca Betha
	`#948B7D`	Gestão Municipal
	`#8986CA`	Planejamento e Contabilidade
	`#26D07C`	Arrecadação e Fiscalização
	`#AFB2B2`	Atendimento
	`#DF4661`	Gestão de Compras e Contratos
	`#009CDE`	Pessoal e Recursos Humanos
	`#A2C084`	Saúde e Assistência Social
	`#F7B51C`	Educação e Gestão Escolar
	`#F7932F`	Gestão de Leis Municipais
	`#004B7D`	Componentes genéricos/Perfor. Corporativa

Cores base

São as cores a partir das quais se originam todas as demais. Servem para identificar os diferentes componentes e seus estados.

Cor	Hexadecimal	Descrição
	`#3475C1`	blue
	`#48B1D3`	aqua
	`#EFBC3C`	yellow
	`#D64038`	red
	`#54A668`	green
	`#EA863E`	orange
	`#A46AB5`	purple
	`#CB528E`	pink
	`#C0C0C0`	gray

Variações tonais e predefinições de contraste

A partir de cada cor base foram criadas outras oito tonalidades, decrementando a luminosidade em 10% para os tons escuros e incrementando-a para os tons mais claros.


+40%
+30%
+20%
+10%
base
-10%
-20%
-30%
-40%

Azul (blue)

É a cor padrão do Design System, utilizada nas principais ações de funcionalidades.

Cor	Classe texto	Classe fundo	Hexadecimal	Contraste
AAA	`.tx__blue--d40`	`.bg__blue--d40`	`#091420`	18.54:1
AAA	`.tx__blue--d30`	`.bg__blue--d30`	`#142C48`	14.15:1
AAA	`.tx__blue--d20`	`.bg__blue--d20`	`#1E4471`	9.90:1
AA	`.tx__blue--d10`	`.bg__blue--d10`	`#295D99`	6.73:1
AA	`.tx__blue`	`.bg__blue`	`#3475C1`	4.71:1
AA	`.tx__blue--l10`	`.bg__blue--l10`	`#568FD2`	4.74:1
AA	`.tx__blue--l20`	`.bg__blue--l20`	`#7FAADC`	6.58:1
AAA	`.tx__blue--l30`	`.bg__blue--l30`	`#A7C4E7`	8.86:1
AAA	`.tx__blue--l40`	`.bg__blue--l40`	`#CFDFF2`	11.74:1

Azul claro (aqua)

É utilizada em notificações do tipo "informação".

Cor	Classe texto	Classe fundo	Hexadecimal	Contraste
AAA	`.tx__aqua--d40`	`.bg__aqua--d40`	`#0F3440`	13.54:1
AAA	`.tx__aqua--d30`	`.bg__aqua--d30`	`#195569`	8.25:1
AA	`.tx__aqua--d20`	`.bg__aqua--d20`	`#237792`	5.09:1
AA	`.tx__aqua--d10`	`.bg__aqua--d10`	`#2D98BB`	4.79:1
AA	`.tx__aqua`	`.bg__aqua`	`#48B1D3`	6.44:1
AAA	`.tx__aqua--l10`	`.bg__aqua--l10`	`#71C3DD`	7.99:1
AAA	`.tx__aqua--l20`	`.bg__aqua--l20`	`#9AD4E7`	9.81:1
AAA	`.tx__aqua--l30`	`.bg__aqua--l30`	`#C3E6F1`	12.05:1
AAA	`.tx__aqua--l40`	`.bg__aqua--l40`	`#ECF7FB`	14.59:1

Vermelho (red)

É utilizado para chamar atenção em situações de risco e de erro, de extrema prioridade, bem como mostrar resultados negativos. Evitar utilizar em gráficos que possam gerar duplas interpretações.

Cor	Classe texto	Classe fundo	Hexadecimal	Contraste
AAA	`.tx__red--d40`	`.bg__red--d40`	`#370D0B`	17.14:1
AAA	`.tx__red--d30`	`.bg__red--d30`	`#611814`	12.79:1
AAA	`.tx__red--d20`	`.bg__red--d20`	`#8B221D`	8.86:1
AA	`.tx__red--d10`	`.bg__red--d10`	`#B62D25`	6.19:1
AA	`.tx__red`	`.bg__red`	`#D64038`	4.52:1
AA	`.tx__red--l10`	`.bg__red--l10`	`#DF6962`	4.80:1
AA	`.tx__red--l20`	`.bg__red--l20`	`#E7918D`	6.69:1
AAA	`.tx__red--l30`	`.bg__red--l30`	`#F0BAB7`	9.40:1
AAA	`.tx__red--l40`	`.bg__red--l40`	`#F9E2E1`	12.87:1

Amarelo (yellow)

Utilizar em situações que requerem atenção do usuário, contudo em momentos de menor risco.

Cor	Classe texto	Classe fundo	Hexadecimal	Contraste
AAA	`.tx__yellow--d40`	`.bg__yellow--d40`	`#584107`	9.66:1
AA	`.tx__yellow--d30`	`.bg__yellow--d30`	`#87640B`	5.44:1
AA	`.tx__yellow--d20`	`.bg__yellow--d20`	`#B6860F`	4.85:1
AAA	`.tx__yellow--d10`	`.bg__yellow--d10`	`#E5A913`	7.59:1
AAA	`.tx__yellow`	`.bg__yellow`	`#EFBC3C`	9.04:1
AAA	`.tx__yellow--l10`	`.bg__yellow--l10`	`#F3CC6B`	10.53:1
AAA	`.tx__yellow--l20`	`.bg__yellow--l20`	`#F7DC9A`	11.86:1
AAA	`.tx__yellow--l30`	`.bg__yellow--l30`	`#FBEDC9`	13.68:1
AAA	`.tx__yellow--l40`	`.bg__yellow--l40`	`#FEFDF9`	15.62:1

Verde (green)

O verde tem significado positivo. Utilizar em resultados favoráveis, situações de sucesso e metas cumpridas. Evitar utilizar em gráficos que possam gerar duplas interpretações.

Cor	Classe texto	Classe fundo	Hexadecimal	Contraste
AAA	`.tx__green--d40`	`.bg__green--d40`	`#0F1F13`	17.13:1
AAA	`.tx__green--d30`	`.bg__green--d30`	`#214028`	11.48:1
AAA	`.tx__green--d20`	`.bg__green--d20`	`#32623E`	7.11:1
AA	`.tx__green--d10`	`.bg__green--d10`	`#438453`	4.50:1
AA	`.tx__green`	`.bg__green`	`#54A668`	5.33:1
AA	`.tx__green--l10`	`.bg__green--l10`	`#74B985`	6.83:1
AAA	`.tx__green--l20`	`.bg__green--l20`	`#96CAA3`	8.54:1
AAA	`.tx__green--l30`	`.bg__green--l30`	`#B8DBC1`	10.56:1
AAA	`.tx__green--l40`	`.bg__green--l40`	`#DAECDE`	12.91:1

Laranja (orange)

Nas interfaces da Betha, é utilizado como uma cor de suporte para status de processos.

Cor	Classe texto	Classe fundo	Hexadecimal	Contraste
AAA	`.tx__orange--d40`	`.bg__orange--d40`	`#532809`	12.54:1
AAA	`.tx__orange--d30`	`.bg__orange--d30`	`#813E0E`	7.99:1
AA	`.tx__orange--d20`	`.bg__orange--d20`	`#AF5413`	5.12:1
AA	`.tx__orange--d10`	`.bg__orange--d10`	`#DD6A18`	4.66:1
AA	`.tx__orange`	`.bg__orange`	`#EA863E`	6.04:1
AA	`.tx__orange--l10`	`.bg__orange--l10`	`#EFA36C`	7.67:1
AAA	`.tx__orange--l20`	`.bg__orange--l20`	`#F4C09A`	9.74:1
AAA	`.tx__orange--l30`	`.bg__orange--l30`	`#F9DDC8`	12.20:1
AAA	`.tx__orange--l40`	`.bg__orange--l40`	`#FEF9F6`	15.22:1

Roxo (purple)

Nas interfaces da Betha, é utilizado como uma cor de suporte para status de processos.

Cor	Classe texto	Classe fundo	Hexadecimal	Contraste
AAA	`.tx__purple--d40`	`.bg__purple--d40`	`#311C37`	15.53:1
AAA	`.tx__purple--d30`	`.bg__purple--d30`	`#4F2C5A`	11.41:1
AAA	`.tx__purple--d20`	`.bg__purple--d20`	`#6E3D7C`	8.05:1
AA	`.tx__purple--d10`	`.bg__purple--d10`	`#8C4E9E`	5.68:1
AA	`.tx__purple`	`.bg__purple`	`#A46AB5`	4.02:1
AA	`.tx__purple--l10`	`.bg__purple--l10`	`#B98CC6`	5.78:1
AAA	`.tx__purple--l20`	`.bg__purple--l20`	`#CEAED7`	8.08:1
AAA	`.tx__purple--l30`	`.bg__purple--l30`	`#E2D0E8`	10.93:1
AAA	`.tx__purple--l40`	`.bg__purple--l40`	`#F7F2F9`	14.41:1

Cor-de-rosa (pink)

Nas interfaces da Betha, é utilizado como uma cor de suporte para status de processos.

Cor	Classe texto	Classe fundo	Hexadecimal	Contraste
AAA	`.tx__pink--d40`	`.bg__pink--d40`	`#3E1328`	15.81:1
AAA	`.tx__pink--d30`	`.bg__pink--d30`	`#651F42`	11.49:1
AAA	`.tx__pink--d20`	`.bg__pink--d20`	`#8D2A5B`	8.03:1
AA	`.tx__pink--d10`	`.bg__pink--d10`	`#B43674`	5.64:1
AA	`.tx__pink`	`.bg__pink`	`#CB528E`	4.09:1
AA	`.tx__pink--l10`	`.bg__pink--l10`	`#D779A8`	5.45:1
AAA	`.tx__pink--l20`	`.bg__pink--l20`	`#E3A0C1`	7.63:1
AAA	`.tx__pink--l30`	`.bg__pink--l30`	`#EEC8DB`	10.55:1
AAA	`.tx__pink--l40`	`.bg__pink--l40`	`#FAEFF4`	14.18:1

Cinza (gray)

Os tons de cinza são geralmente utilizados em textos, ícones, tabelas e listas.

Cor	Classe texto	Classe fundo	Hexadecimal	Contraste
AAA	`.tx__gray--d40`	`.bg__gray--d40`	`#000000`	21.00:1
AAA	`.tx__gray--d30`	`.bg__gray--d30`	`#222222`	15.91:1
AAA	`.tx__gray--d20`	`.bg__gray--d20`	`#595959`	7.00:1
AA	`.tx__gray--d10`	`.bg__gray--d10`	`#767676`	4.54:1
AAA	`.tx__gray`	`.bg__gray`	`#C0C0C0`	8.74:1
AAA	`.tx__gray--l10`	`.bg__gray--l10`	`#E1E3E6`	12.37:1
AAA	`.tx__gray--l20`	`.bg__gray--l20`	`#EBEDF0`	13.56:1
AAA	`.tx__gray--l30`	`.bg__gray--l30`	`#F5F7FA`	14.82:1
AAA	`.tx__gray--l40`	`.bg__gray--l40`	`#FFFFFF`	15.91:1

Como utilizar

Para manter a interface agradável e de acordo com a identidade do sistema, é importante utilizar o balanço das cores adequadamente, pois dependendo de como e onde as cores forem aplicadas nos sistemas, podem ficar contrastantes.

As cores padrões dos componentes não devem ser alteradas, exceto quando o mesmos permitam;
Para elementos que tenham uma grande área que necessite de cor, é indicado as cores base e lights da paleta, ou em casos expecíficos até o tom --d20. Utiliza-se esses tons, por exemplo: em gráficos, ícones grandes em cards, e status;
As Cores dark da paleta podem ser utilizadas em elementos que ocupem uma pequena área, por exemplo: textos e ícones (16px, 24px);
Todos os elementos aos quais forem acrescidas cores devem estar de acordo com as taxas de contraste mínimo (nível AA), da WCAG.

No HTML, insira a classe .bg__nomedacor, para preenchimento da cor base no background, e .tx__nomedacor, para textos e ícones.

Caso seja necessário o uso de suas variações, utilize .bg__nomedacor--luminosidadepeso (Ex.: .bg__blue--d10) ou .tx__nomedacor--luminosidadepeso (Ex.: .tx__red--l30).

A luminosidade é definida por dark (quando mais escura) e light (quando mais clara). O peso varia entre 10 e 40 para os tons mais escuros, e de 10 a 40 para os tons mais claros.

<span class="tx__red--d10">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, animi, architecto consectetur corporis debitis delectus error harum in iste laudantium maxime mollitia perferendis provident quas repellendus repudiandae sequi similique voluptas.
</span>
<br/>
<span class="tx__green--d20">
  Commodi consequatur minus quis quos vero. Ad aliquam dignissimos dolore est perspiciatis ratione! Cupiditate
  laborum possimus quibusdam temporibus? Culpa explicabo, fugiat iste labore maxime necessitatibus nihil nisi
  obcaecati quibusdam temporibus.
</span>
<br/>
<span class="tx__pink">
  Accusamus alias commodi consequatur dignissimos exercitationem fugiat, fugit ipsa laudantium maiores, modi neque
  numquam perferendis praesentium quod rem, sint voluptates! Animi deserunt incidunt molestiae perferendis possimus
  quasi, sunt suscipit velit.
</span>

Quando utilizar​

Cores dos produtos​

Cores base​

Variações tonais e predefinições de contraste​

Azul (blue)​

Azul claro (aqua)​

Vermelho (red)​

Amarelo (yellow)​

Verde (green)​

Laranja (orange)​

Roxo (purple)​

Cor-de-rosa (pink)​

Cinza (gray)​

Como utilizar​

Quando utilizar

Cores dos produtos

Cores base

Variações tonais e predefinições de contraste

Azul (blue)

Azul claro (aqua)

Vermelho (red)

Amarelo (yellow)

Verde (green)

Laranja (orange)

Roxo (purple)

Cor-de-rosa (pink)

Cinza (gray)

Como utilizar