Identidade Visual — Carol Sant'Anna

Educação veterinária premium: navy profundo #040023 + magenta/rosa #EC538E (CTA) + roxo #9526CA (decorativo), com Bebas Neue (display uppercase) e Manrope (corpo). Dark é a paleta default (home Pós-graduação); light vem da Imersão em Telemedicina. Tokens resolvidos em tempo real de styles/tokens.css + styles/theme.css — briefing completo em .claude/ds-briefing.md.

Regra de affordance: CTA é sempre rosa — o roxo é acento decorativo (marquee, badges, gradientes) e nunca aparece em botão. Design flat por borda: cards delimitados por borda 1px, sombra só em hover sutil.

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.