Card padrão
Texto de demonstração para validar a paleta sobre superfície de card. As sombras usam --shadow-tint-light.
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.
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 sóbria de slate-petróleo + bege + off-white (segmento saúde premium), layout limpo e tipografia neutra de alta legibilidade.
Três cores: #324550 slate-petróleo (títulos, textos e CTA primário), #D1C3A3 bege/champagne (accent — eyebrows, detalhes, CTA sobre fundo dark) e #F0F0F0 off-white (fundo light). Toda a escala deriva delas.
Roboto (corpo, self-hosted) — humanista, neutra, ótima leitura em telas. Títulos em Helvetica/Arial do sistema, como no site original.
Institucional, humanizado e confiável. Light (off-white) é o default; seções de destaque usam data-theme="dark" com fundo slate e CTA bege.
Escala de 10 tons da marca, usada em backgrounds, accents, hovers e estados.
Cores derivadas para botões e interações.
Fundos de página, cards e containers. Use o toggle no canto superior direito para alternar tema.
Tipografia responsiva via clamp(). Use em headlines e seções hero.
Tokens de espaçamento (4px base). Use para padding, margin e gap.
Texto de demonstração para validar a paleta sobre superfície de card. As sombras usam --shadow-tint-light.
Variante com elevação maior — usar em destaques pontuais.