Fundamentos / Cores

Cores

A paleta de cores CANTA. e composta por 5 cores de marca, uma escala de neutros e cores de feedback. Preto e branco dominam (80%), azul e o destaque (10%), cinza e magenta completam (5% cada).

Cores da Marca

As 5 cores oficiais CANTA. conforme o Guia de Marca 2024. O equilíbrio de uso garante consistencia visual em todas as pecas.

Preto
#000000 | 50%
Branco
#FFFFFF | 30%
Azul
#0050F2 | 10%
Cinza
#999999 | 5%
Magenta
#FF3264 | 5%
Amber
#F59E0B | warning
SCSS Variables 
$color-brand-black:   #000000;
$color-brand-white:   #FFFFFF;
$color-brand-blue:    #0050F2;
$color-brand-gray:    #999999;
$color-brand-magenta: #FF3264;
$color-brand-amber:   #F59E0B;
CSS Custom Properties 
var(--canta-color-brand-black)
var(--canta-color-brand-white)
var(--canta-color-brand-blue)
var(--canta-color-brand-gray)
var(--canta-color-brand-magenta)

Escala de Neutros

10 tons de neutro para hierarquia visual: backgrounds, textos, bordas e separadores.

100
#FFFFFF
200
#F5F5F5
300
#E5E5E5
400
#D4D4D4
500
#999999
600
#737373
700
#525252
800
#262626
900
#171717
1000
#000000

Cores de Feedback

Usadas em alertas, validacao de formularios e indicadores de status. Cada feedback tem 3 tons: claro (background), medio e escuro (texto/icone).

Feedback 100 (Background) 500 (Principal) 700 (Texto/Icone)
Success #DCFCE7 #22C55E #15803D
Error #FFE4E9 #FF3264 #BE123C
Warning #FEF9C3 #EAB308 #A16207
Info #DBEAFE #0050F2 #1D4ED8

Equilibrio de Uso

Para manter consistencia visual, respeitar o peso de uso das cores conforme o Guia de Marca CANTA. 2024.

Preto 50%
Branco 30%
10%
5%
5%