Cores

A paleta do SystemClinic é deliberadamente restrita. Três cores. Cada uma com um papel preciso. Sem exceções.

Restrição não é limitação — é clareza. Uma paleta pequena é mais fácil de aplicar de forma consistente, produz interfaces mais silenciosas e transmite mais profissionalismo do que uma paleta ampla mal calibrada.

Paleta

Navy — Cor primária

O navy é a cor de maior peso da marca. Comunica profundidade, seriedade e confiança. É usado em tudo que precisa de autoridade: textos principais, cabeçalhos, botões primários, ícones ativos.

Atributo	Valor
Hex	#0F2B46
RGB	15, 43, 70
Uso	Textos, botões primários, cabeçalhos, ícones ativos

--color-navy: #0F2B46;

---

Branco — Base

O branco é o fundo da interface. Não é neutro — é uma escolha deliberada de silêncio. Maximiza o contraste com o navy, dá respiro ao conteúdo e mantém a leveza visual em qualquer dispositivo.

Atributo	Valor
Hex	#FFFFFF
RGB	255, 255, 255
Uso	Fundo de páginas, cards, modais, inputs

--color-white: #FFFFFF;

---

Cinza — Apoio

O cinza médio é a cor de suporte. Texto secundário, descrições, labels, ícones inativos, bordas e divisores. Não compete com o navy — acompanha.

Atributo	Valor
Hex	#585858
RGB	88, 88, 88
Uso	Texto secundário, bordas, placeholders, ícones inativos

--color-gray: #585858;

---

Tokens semânticos

Use sempre os tokens — nunca os valores hex diretamente no código.

:root {
  /* Texto */
  --text-primary:   #0F2B46;   /* títulos, labels obrigatórios */
  --text-secondary: #585858;   /* corpo de texto, descrições */
  --text-muted:     #8a8a8a;   /* placeholders, texto desabilitado */
  --text-inverse:   #FFFFFF;   /* texto sobre fundo navy */

  /* Superfícies */
  --surface-base:   #FFFFFF;   /* fundo principal */
  --surface-subtle: #f7f7f7;   /* fundo alternativo, hover sutil */
  --surface-muted:  #f0f0f0;   /* fundo de code, inputs desabilitados */

  /* Bordas */
  --border-light:   #e8e8e8;   /* divisores, separadores */
  --border-default: #d0d0d0;   /* bordas de input, cards */
  --border-strong:  #0F2B46;   /* foco, selecionado */

  /* Ação */
  --action-primary:       #0F2B46;
  --action-primary-hover: #0a2038;
  --action-primary-text:  #FFFFFF;
}

---

Hierarquia de contraste

Todas as combinações usadas na interface atingem no mínimo 4.5:1 (WCAG AA) para texto normal.

Texto	Fundo	Ratio	Nível
#0F2B46	#FFFFFF	14.7:1	AAA
#585858	#FFFFFF	5.9:1	AA
#FFFFFF	#0F2B46	14.7:1	AAA
#8a8a8a	#FFFFFF	3.5:1	AA (texto grande)

Validação

Use Who Can Use para verificar qualquer nova combinação antes de implementar.

---

Estados semânticos

Para feedback de estado (sucesso, erro, aviso, info), use cores funcionais de forma pontual — nunca como base de layout.

Estado	Cor	Hex	Uso
Sucesso	Verde	#16a34a	Confirmação, fatura paga, agendamento confirmado
Erro	Vermelho	#dc2626	Validação, exclusão, falha
Aviso	Âmbar	#d97706	Alertas, pendências, atenção
Info	Azul	#0284c7	Informativo neutro

Essas cores são usadas apenas em badges, banners de estado e ícones de feedback. Nunca em botões principais, fundos de seção ou texto corrido.

---

O que não fazer

• Adicionar novas cores à paleta sem decisão de design documentada
• Usar #0F2B46 como fundo de grandes áreas (reservado para elementos de ação e texto)
• Aplicar gradientes ou efeitos de cor sobre o navy
• Usar as cores semânticas (verde, vermelho, âmbar) como cor de destaque em elementos neutros