Medprev
Trepadeira

Padrão de Marca · Medprev

Referência viva pra qualquer HTML interno. Cores, fonte, logo, componentes e movimento.

01 / Identidade

Logo & Fonte

Use sempre essas URLs exatas. O logo precisa ficar sobre fundo branco. A fonte é Nunito em todos os pesos.

Logo Medprev (SVG)

Medprev
https://cdn.medprev.online/web-app/assets/4c53cd49/_next/static/media/logo.5120ca8f.svg

Fonte oficial · Nunito

Aa Nunito
https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap
02 / Cores

Paleta

Use sempre via variável CSS, nunca hex hardcoded no markup.

Principais
Verde Medprev
#096840
var(--green)
Verde Claro
#E5F9DF
var(--green-light)
Branco
#FFFFFF
var(--white)
Texto
#454155
var(--text)
Derivadas
Verde Hover
#075a37
var(--green-hover)
Texto suave
#6B6680
var(--text-soft)
Background
#F7F9F8
var(--bg)
Borda
#E5E7EB
var(--border)
Alertas
Atenção (laranja)
#EA580C
var(--warn)
Atenção (fundo)
#FFF4ED
var(--warn-soft)
Erro (vermelho)
#DC2626
var(--danger)
Erro (fundo)
#FEF2F2
var(--danger-soft)
03 / Tipografia

Hierarquia

Nunito em todos os pesos. Body em 500. Sem fonte secundária, sem monospace.

H136 / 800 / -0.6
Revisão de Campanhas
H228 / 800 / -0.4
Quais plataformas?
H320 / 700
Campanhas Meta Ads
Body15 / 500
Selecione 1 ou mais plataformas para continuar.
Small13 / 500 / soft
Texto auxiliar e descrições secundárias.
Label11 / 800 / verde
Etapa 1 · Plataformas
Code12 / 600 / pill
campanhas.csv
04 / Componentes

Biblioteca

Componentes prontos pra copiar. Todos seguem a paleta e a tipografia acima.

Botões
.btn / .btn.primary / .btn.ghost / .btn.danger
Input de texto
.input / .field-label
Choice card (seleção visual)
.choice / .choice.selected · toggle só o item clicado, sem re-render do grupo
Meta Ads
VideoView · Chatwoot · Leads · Conversão · Alcance
SELECIONADO
Google Ads
Search · Performance Max
CLIQUE
Drop zone (upload arrastar/soltar)
.drop-area / .drop-area.has-file / .drop-area.dragover
Vazio
↓
Período A
clique ou arraste
Período B
✓
campanhas.csv
142 KB
Dragover
↓
Solte aqui
Banner informativo (verde)
.banner / .banner-icon
Warning (laranja)
.warning-box
⚠ Atenção: A coluna Nome da campanha é essencial.
Danger (vermelho)
.danger-box
✕ Erro: Arquivo inválido.
Tags
.tag.green / .tag.warn / .tag.danger / .tag.neutral
PMAX PENDENTE ERRO RASCUNHO
Stepper (progresso)
.stepper / .dot.done / .dot.active
Modal de confirmação (genérico)
.modal-overlay#modalConfirm · substitui confirm() nativo

API: openConfirm({title, text, confirmLabel, confirmStyle, onConfirm}). Botão primário usa .btn.danger quando a ação é destrutiva (reset, apagar). Reusa o estilo do .modal-overlay.

⚠ Começar do zero?
Isso vai apagar todos os uploads e seleções. Não dá pra desfazer.
Toast
.toast-demo
✓ ZIP gerado com sucesso!
05 / Animações & Comportamentos

Movimento

Regras de transição. Use sempre os timings/easings definidos em :root. Nada além disso.

Timings & easings oficiais
definidos como variáveis CSS no :root
--t-fast: 150ms · hovers e estados rápidos
--t-base: 220ms · transições padrão (seleção, drop)
--t-slow: 300ms · modais, success, transições de tela
--ease-out: cubic-bezier(0.16, 1, 0.3, 1) · padrão suave
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1) · checks, pops, success

Transição entre etapas

200ms saída + 250ms entrada · slide horizontal sutil
Etapa N

Sai: opacity: 0; transform: translateX(-16px). Entra do lado oposto. Sempre na direção do avanço (forward = vem da direita, back = vem da esquerda).

Seleção de choice / check

400ms · ease-bounce · APENAS no item clicado
Item

Nunca re-renderizar a lista inteira ao clicar. Use classList.toggle('selected') no elemento. Os outros itens NÃO devem animar/piscar.

Modal: abertura e fechamento

300ms · overlay fade + card scale/slide
Modal

Overlay sempre presente no DOM com visibility: hidden; opacity: 0. Classe .active dispara fade-in + card sobe (translateY(20px) scale(0.96) → 0/1). Fechamento reverte. Nunca display: none direto.

Loading overlay

300ms · mesmo padrão do modal

Mesma técnica do modal: visibility + opacity + transition. Spinner roda continuamente. Texto e progress bar opcionais.

Pop ao receber arquivo

400ms · ease-bounce
✓
arquivo.csv

Drop area que acabou de receber um arquivo faz um pop sutil. Feedback de "deu certo".

Confete na conclusão

canvas-confetti via CDN · cores Medprev

Usar canvas-confetti nas cores #096840 · #E5F9DF · #B5E8C2 · #FFFFFF. Frames laterais por 2s + burst central. Dispara quando entra na tela de sucesso.

Estrutura de telas (separação visibilidade × layout)
.screen controla SÓ display none/block · layout vive em wrapper interno

Cada .screen tem só uma responsabilidade: aparecer ou sumir. Layout (centralização, flexbox, max-width) fica num wrapper interno (.full-center pra welcome/success, .wrap pro wizard). Isso evita conflito de especificidade entre display: block e display: flex no mesmo elemento.

<div class="screen active"> ← só visibility
<div class="full-center"> ← layout
conteúdo...
</div>
</div>
Fluxo de telas (multi-etapa)
welcome → wizard (etapas) → success

Três containers separados, cada um com display: none default e .active pra mostrar com animation: page-fade-in 0.4s. A tela welcome tem logo grande, label "Wizard", título, descrição, botão grande de iniciar, blobs verdes flutuando ao fundo. As etapas mostram stepper, header com logo pequeno, link "✕ Recomeçar" no canto direito. A success não mostra stepper nem header de etapa: replica visualmente a welcome, com logo grande, label "✓ Concluído", título, estatísticas e botões de próxima ação.

Reset dentro do app (botão "Recomeçar" no header ou "Começar do zero" na success) zera o state e vai direto pra primeira etapa, não volta pra welcome. O usuário já decidiu começar, não faz sentido fazer ele clicar de novo.

Manifesto · Para a IA

Quando o Patrick pedir um HTML interno, siga isso à risca.

  1. Fonte: Nunito e somente Nunito. Sem fonte secundária, sem monospace.
  2. Logo da Medprev: usar a URL exata do bloco 01 / Identidade, sempre em fundo branco, dentro de um .logo-box.
  3. Cores: usar variáveis CSS (--green, --green-light, --text, etc). Nunca hex hardcoded no markup.
  4. Timings: sempre via variáveis --t-fast / --t-base / --t-slow e easings --ease-out / --ease-bounce.
  5. Tema sempre claro. Fundo --bg, cards brancos com borda --border.
  6. Botões: primário verde sólido. Secundário branco. Ghost transparente verde. Hover do .primary e .danger mantém color: var(--white).
  7. Alertas: laranja para atenção, vermelho só para erro/destrutivo.
  8. Tipografia: títulos peso 800, body 500, labels técnicas 800 caixa alta com letter-spacing 2px.
  9. Seleção: toggle só o item clicado via classList.toggle('selected'). NUNCA re-renderizar a lista inteira (faz tudo piscar).
  10. Modais e overlays: sempre visibility + opacity + transition. Jamais display: none → flex direto.
  11. Confirmações: NUNCA alert() / confirm() / prompt() nativos. Sempre modal customizado (ver componente "Modal de confirmação"). Ação destrutiva = botão .danger.
  12. Estrutura de telas: .screen controla SÓ visibilidade (display none/block). Layout (flexbox, centralização) vai em wrapper interno. Não misturar responsabilidades no mesmo elemento — gera conflito de especificidade.
  13. Transição entre etapas: 200ms saída + 250ms entrada, slide horizontal sutil seguindo a direção (forward/back).
  14. Fluxos multi-etapa: sempre 3 telas separadas (welcome / etapas / success). Success NÃO mostra stepper nem header de etapa. Reset dentro do app pula a welcome — vai direto pra primeira etapa.
  15. Sem emojis decorativos. Apenas símbolos funcionais (✓ ↓ ✕ ↔ ⚠).
  16. Nada de gradiente roxo, glassmorphism, ou estética genérica de IA. Aparência limpa, profissional, healthcare.
  17. Respeitar prefers-reduced-motion sempre.