Identidade Visual — Hexalife Laboratórios

Showroom dos tokens visuais do projeto — resolvidos em tempo real a partir de styles/tokens.css + styles/theme.css. Use este arquivo para validar a marca antes do go-live.

A marca

Hexalife Laboratórios é um laboratório clínico de São Carlos/SP, com cerca de 28 anos de mercado — exames de rotina e testes de alta complexidade. A identidade comunica confiança, precisão e cuidado humanizado: paleta azul + branco (segmento saúde), layout limpo e tipografia neutra de alta legibilidade.

Cor

Azul institucional em 3 níveis — petróleo #005878 (títulos), médio #0085BD (core) e vívido #0071BC (CTA), sobre branco/azul-claro. Fonte: Elementor globals do site original.

Tipografia

Roboto (corpo, self-hosted) — humanista, neutra, ótima leitura em telas. Títulos em Helvetica/Arial do sistema, como no site original.

Tom

Institucional, humanizado e confiável. Paleta light é a default; data-theme="dark" disponível por seção.

1. Paleta brand

Escala de 10 tons da marca, usada em backgrounds, accents, hovers e estados.

2. Accents (CTA + estados)

Cores derivadas para botões e interações.

3. Superfícies

Fundos de página, cards e containers. Use o toggle no canto superior direito para alternar tema.

4. Cores de texto

5. Status (semântica)

success — operação concluída
warning — atenção necessária
danger — erro ou falha
info — informação neutra

6. Famílias tipográficas

7. Pesos

8. Escala display — títulos

Tipografia responsiva via clamp(). Use em headlines e seções hero.

9. Escala texto corrido

10. Spacing scale

Tokens de espaçamento (4px base). Use para padding, margin e gap.

11. Border radius

12. Componentes-chave

Botões

Tamanhos

Badges

Novo Aprovado Atenção Erro Default

Card

Card padrão

Texto de demonstração para validar a paleta sobre superfície de card. As sombras usam --shadow-tint-light.

Card elevado

Variante com elevação maior — usar em destaques pontuais.