Pra equipe de mkt + dev

Vai criar com IA?

Escolhe o contexto abaixo, copia o prompt e cola como primeira mensagem em qualquer chat (Claude.ai, ChatGPT, Gemini, Cursor). A IA vai usar APENAS os componentes relevantes pro contexto — sem entupir com o que não importa.

Pra landing pages, sites institucionais, hotsites de campanha. B2C, captação de lead, agressivo em CTA.

Este projeto usa o Medprev Design System (Trepadeira) — MODO LANDING PAGE.

O DS e um CATALOGO de componentes e regras de marca, NAO um template forcado.
O briefing abaixo define O QUE criar; o DS so responde "o que existe pra usar"
e "quais regras de marca sao inegociaveis". Use SO os componentes que o briefing
pedir. Nao force sidebar, trust strip, calculadora, ou qualquer coisa que nao
foi pedida — o DS nao opina sobre estrutura nem layout.

SETUP TECNICO (inegociavel — sem isso o DS nao carrega):
  <link rel="stylesheet" href="https://trepadeira.mktmedprev.com.br/medprev.css">
  <script src="https://trepadeira.mktmedprev.com.br/medprev.js" defer></script>
  Nunito via Google Fonts.
  <html data-mp-theme="light">  (ou dark/auto — preserve o tema do HTML original; so troque se o briefing pedir explicitamente)

ASSETS OFICIAIS (use APENAS essas URLs — nunca baixar nem criar logo de projeto):
  Logo verde:   https://trepadeira.mktmedprev.com.br/logo.png
  Logo branca:  https://trepadeira.mktmedprev.com.br/logo-white.png
  Favicon:      https://trepadeira.mktmedprev.com.br/favicon.png
  Apple icon:   https://trepadeira.mktmedprev.com.br/apple-touch-icon.png

  No <head>:
    <link rel="icon" type="image/png" href="https://trepadeira.mktmedprev.com.br/favicon.png">
    <link rel="apple-touch-icon" href="https://trepadeira.mktmedprev.com.br/apple-touch-icon.png">
    <meta name="theme-color" content="#096840">

  Logo no markup (so se o briefing pedir logo na pagina):
    <img src="https://trepadeira.mktmedprev.com.br/logo.png" alt="Medprev" height="32">

COMPONENTES B2C DISPONIVEIS (catalogo — use SO os que o briefing precisar):
- .mp-hero / .mp-hero-blob (hero com gradiente, se a pagina tem hero)
- .mp-navbar (navbar publica com blur, se a pagina tem navegacao)
- .mp-trust-strip (faixa escura de objecoes resolvidas — opcional)
- .mp-comparison + .mp-comparison-col-bad/-good (comparativo lado-a-lado)
- .mp-calc + .mp-calc-result (calculadora interativa)
- .mp-steps-big (passos com numero gigante 01/02/03)
- .mp-doctor-card + .mp-doctor-grid (foto + nome + CRM + rating)
- .mp-wa-mockup (mockup de conversa WhatsApp)
- .mp-testimonial-rich (depoimento com aspas + estrelas)
- .mp-price-anchor (preco "de R$ X por R$ Y" riscado)
- .mp-pricing-row (linha de catalogo de preco)
- .mp-spec-grid + .mp-spec-chip (chips de servico + preco)
- .mp-fab-whatsapp (botao verde WhatsApp flutuante)
- .mp-sticky-cta (CTA fixo bottom mobile)
- .mp-contact-method + .mp-contact-method-icon-wa (cards multi-canal)
- .mp-cta-block (CTA verde dramatico)
- .mp-accordion + data-mp-accordion-single (FAQ)
- .mp-footer (rodape institucional)
- Mais tudo do DS base: .mp-btn, .mp-card, .mp-input, .mp-grid, etc.

REGRAS DE MARCA INEGOCIAVEIS (sempre validas, qualquer projeto):
- Prefixo "mp-" em TODA classe usada. Se uma classe existe no DS, use ela
  em vez de criar do zero.
- Cores via var(--mp-...). Zero hex hardcoded (excecao: cores oficiais
  WhatsApp #25D366, #075E54, #DCF8C6, #E5DDD5 em mockups WhatsApp).
- Fonte: Nunito SO. Sem outra.
- Comportamento via data-mp-* (data-mp-open, data-mp-tabs, etc).
  Nunca onclick="" inline.
- Overlays (se houver): <dialog> nativo com .mp-modal/.mp-drawer/.mp-cmdk.
- PROIBIDO alert/confirm/prompt — use Medprev.toast.* ou modal.
- CSS local OK pra layout especifico/animacoes — nunca pra redefinir
  tokens ou hex hardcoded.

Detalhes completos (catalogo + exemplos canonicos, opcional):
https://trepadeira.mktmedprev.com.br/llms-lp.txt
https://trepadeira.mktmedprev.com.br/llms-full.txt

SE O BRIEFING ABAIXO ESTIVER VAZIO OU FOR SO "aplique o DS":
  Modo RETROFIT, nao redesign.
  - Preserve estrutura, secoes e tema do HTML original (se houver).
  - Substitua estilos/classes pelos equivalentes do DS (.mp-btn, .mp-card,
    .mp-input, var(--mp-*), Nunito).
  - NAO invente secoes que o original nao tinha (hero, trust strip,
    depoimentos, FAQ, CTA secundario, footer institucional, badges).
  - NAO reescreva copy. NAO troque o tema (dark<->light) sem instrucao.
  - Em duvida, PERGUNTE antes de mudar.
  Briefing curto = retrofit. Briefing vazio = retrofit. Nao e licenca pra redesign.

────────────────────────────────────────────────────────────
BRIEFING DO PROJETO: [DESCREVA O QUE QUER — pagina, objetivo, secoes, copy]

Pra sistemas, dashboards, painéis admin, BI. Densidade de dado alta, sidebar, tabelas, modais.

Este projeto usa o Medprev Design System (Trepadeira) — MODO SISTEMA / DASHBOARD.

O DS e um CATALOGO de componentes e regras de marca, NAO um template forcado.
O briefing abaixo define O QUE criar; o DS so responde "o que existe pra usar"
e "quais regras de marca sao inegociaveis". Use SO os componentes que o briefing
pedir. Nao force app shell, sidebar, topbar, KPIs, tabela, ou qualquer coisa
que nao foi pedida — o DS nao opina sobre estrutura.

SETUP TECNICO (inegociavel — sem isso o DS nao carrega):
  <link rel="stylesheet" href="https://trepadeira.mktmedprev.com.br/medprev.css">
  <script src="https://trepadeira.mktmedprev.com.br/medprev.js" defer></script>
  Nunito via Google Fonts.
  <html data-mp-theme="light">  (ou dark/auto — preserve o tema do HTML original; so troque se o briefing pedir explicitamente)

ASSETS OFICIAIS (use APENAS essas URLs):
  Logo verde:   https://trepadeira.mktmedprev.com.br/logo.png
  Logo branca:  https://trepadeira.mktmedprev.com.br/logo-white.png  (use em dark mode)
  Favicon:      https://trepadeira.mktmedprev.com.br/favicon.png

  No <head>:
    <link rel="icon" type="image/png" href="https://trepadeira.mktmedprev.com.br/favicon.png">
    <link rel="apple-touch-icon" href="https://trepadeira.mktmedprev.com.br/apple-touch-icon.png">
    <meta name="theme-color" content="#096840">

  Logo no markup (so se o briefing pedir):
    <img src="https://trepadeira.mktmedprev.com.br/logo.png" alt="Medprev" height="28">

COMPONENTES DISPONIVEIS (catalogo — use SO os que o briefing pedir):
- App shell: .mp-app / .mp-sidebar / .mp-topbar / .mp-main / .mp-page-header
  (use se o briefing pedir dashboard com sidebar. Se pedir tela isolada, ignore.)
- Botoes: .mp-btn + variants (primary/secondary/ghost/outline/danger/success/link)
- Cards: .mp-card + .mp-card-header/-body/-footer
- Forms: .mp-form / .mp-field / .mp-input / .mp-textarea / .mp-select / .mp-checkbox
  / .mp-radio / .mp-switch / .mp-range / .mp-drop / .mp-tags-input / .mp-choices
- Stats: .mp-stat / .mp-kpi (com sparkline)
- Feedback: .mp-alert / .mp-badge / .mp-chip / .mp-avatar / .mp-progress
  / .mp-skeleton / .mp-spinner
- Overlays: .mp-modal / .mp-drawer / .mp-cmdk (ctrl+K) / .mp-dropdown
  / .mp-popover / .mp-tooltip
- Navegacao: .mp-tabs / .mp-accordion / .mp-breadcrumbs / .mp-steps (wizard)
  / .mp-pagination
- Tabelas: .mp-table-wrap / .mp-table (compact/roomy/striped/clickable)
- Visualizacao: .mp-chart-bars / .mp-chart-line (SVG) / .mp-donut / .mp-funnel
  / .mp-sparkline / .mp-heatmap
- Extras: .mp-empty / .mp-timeline / .mp-calendar / .mp-kanban / .mp-chat
  / .mp-notification-item

REGRAS DE MARCA INEGOCIAVEIS (sempre valem):
- Prefixo "mp-" em TODA classe. Se uma classe existe no DS, USE em vez de criar.
- Cores via var(--mp-...). Zero hex hardcoded.
- Fonte Nunito SO. Sem outra.
- Use tokens semanticos (--mp-surface, --mp-text) — nao primitivos.
- Comportamento via data-mp-* (data-mp-open, data-mp-tabs, etc).
  Nunca onclick="" inline.
- Overlays (se houver): <dialog> nativo com .mp-modal/.mp-drawer/.mp-cmdk.
- PROIBIDO alert/confirm/prompt — use Medprev.toast.* ou modal.
- CSS local OK pra customizacoes — nunca pra redefinir tokens.

Componentes de LP que nao fazem sentido em dashboard (evite):
.mp-trust-strip, .mp-cta-block, .mp-fab-whatsapp, .mp-sticky-cta,
.mp-doctor-card, .mp-wa-mockup, .mp-spec-chip, .mp-price-anchor,
.mp-testimonial-rich, .mp-hero, .mp-navbar publica, .mp-footer institucional.

Detalhes completos:
https://trepadeira.mktmedprev.com.br/llms-app.txt
https://trepadeira.mktmedprev.com.br/llms-full.txt

SE O BRIEFING ABAIXO ESTIVER VAZIO OU FOR SO "aplique o DS":
  Modo RETROFIT, nao redesign.
  - Preserve estrutura, layout e tema do HTML original (se houver).
  - Substitua estilos/classes pelos equivalentes do DS (.mp-btn, .mp-card,
    .mp-input, var(--mp-*), Nunito).
  - NAO invente componentes que o original nao tinha (toggle de tema,
    sidebar, KPI, badges, empty states, headers).
  - NAO troque o tema (dark<->light) sem instrucao explicita.
  - Em duvida, PERGUNTE antes de mudar.
  Briefing curto = retrofit. Briefing vazio = retrofit. Nao e licenca pra redesign.

────────────────────────────────────────────────────────────
BRIEFING DO PROJETO: [DESCREVA O QUE QUER — tela, dados, acoes, estrutura]

Pra email marketing, transacional, newsletter. Tudo inline, sem CSS externo, sem variáveis CSS.

Este projeto usa o Medprev Design System (Trepadeira) — MODO EMAIL HTML.

O DS e um CATALOGO de regras tecnicas e tokens de marca. O briefing abaixo
define O QUE criar (assunto, copy, layout, blocos). Use SO os blocos que o
briefing pedir. Estrutura, ordem, presenca de header/footer institucional —
tudo decisao do briefing.

CONTEXTO: Email marketing, transacional ou newsletter.
ATENCAO: clientes de email (Outlook, Gmail mobile, Apple Mail) NAO suportam:
- variaveis CSS (var(--mp-...))
- <link> externo de CSS
- @import
- a maioria dos seletores complexos
- dark mode automatico
- flexbox / grid confiavelmente

REGRA: estilo TOTALMENTE INLINE com hex hardcoded.
Use os tokens do DS Trepadeira como REFERENCIA, mas escreva os valores literais.

ASSETS OFICIAIS PARA EMAIL (use APENAS estas URLs — SEMPRE PNG, NUNCA SVG):
  Logo verde:   https://trepadeira.mktmedprev.com.br/logo.png
  Logo branca:  https://trepadeira.mktmedprev.com.br/logo-white.png

  No header do email (sempre dentro de uma <table>, com width/height inline):
    <img src="https://trepadeira.mktmedprev.com.br/logo.png"
         alt="Medprev"
         width="120"
         height="32"
         style="display:block; height:32px; width:auto; border:0;">

CORES DO DS (use estas, hex literal):
  Brand verde:     #096840    (CTA, headings de destaque)
  Brand hover:     #075A37
  Brand soft:      #E5F9DF    (fundo de bloco verde claro)
  Brand contrast:  #FFFFFF    (texto sobre brand)
  Texto base:      #454155
  Texto strong:    #1B1925    (titulos)
  Texto soft:      #6B6680    (subtitulos)
  Texto muted:     #9CA3AF    (metadata)
  Fundo:           #F7F9F8
  Surface (card):  #FFFFFF
  Border:          #E5E7EB
  Danger:          #DC2626
  Success:         #10B981
  Warn:            #EA580C
  Info:            #2563EB

TIPOGRAFIA (Nunito, com fallback):
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  Tamanhos: 11, 12, 13, 15 (base), 17, 20, 24, 28, 36, 48px
  Pesos: 400, 500, 600, 700, 800, 900

ESPACO (escala 4px): 4, 8, 12, 16, 20, 24, 32, 40, 48, 64px
RADIUS:  3, 6, 10, 14, 20, 28, 9999px

SINTAXE QUE EMAIL EXIGE (fato tecnico, nao opiniao de layout):
  - <table> pra layout (clients quebram <div> com flex/grid)
  - width 600px maximo no container principal
  - Imagens com alt + width/height inline + display:block + border:0
  - Botoes como <table> bulletproof com background hex + texto branco + padding
  - PNG/JPG (clients nao renderizam SVG)
  - Sem JavaScript, sem form, sem iframe (todos bloqueados)
  - Tudo style INLINE (clients ignoram <link> externo)

  Quanto a estrutura, blocos, ordem, presenca de header/footer/CTAs —
  decisao do briefing.

EXEMPLO DE BOTAO (CTA) FUNCIONAL:
  <table cellpadding="0" cellspacing="0" border="0">
    <tr><td style="background:#096840; border-radius:10px;">
      <a href="..." style="display:inline-block; padding:14px 28px; color:#FFFFFF;
         font-family:Nunito,Arial,sans-serif; font-size:15px; font-weight:700;
         text-decoration:none;">Agendar agora</a>
    </td></tr>
  </table>

NUNCA:
- @media queries (so dark e raras)
- variaveis CSS
- Fontes web (clients ignoram, use o fallback)
- Background image em <td> (Outlook quebra — use cor solida)
- Position absolute/fixed
- Iframe / video / form

SE O BRIEFING ABAIXO ESTIVER VAZIO OU FOR SO "aplique o DS":
  Modo RETROFIT, nao redesign.
  - Preserve estrutura, blocos e hierarquia do email original (se houver).
  - Substitua estilos inline pelos tokens/padroes do DS (CTA bulletproof,
    cores hex literais acima, Nunito com fallback Arial).
  - NAO invente blocos que o original nao tinha (hero image, CTA secundario,
    depoimentos, social proof, footer institucional gigante, banner).
  - NAO reescreva copy. NAO invente assunto/preheader novo.
  - Se era transacional, mantenha transacional. Se era promocional, mantenha.
  - Em duvida, PERGUNTE antes de mudar.
  Briefing curto = retrofit. Briefing vazio = retrofit. Nao e licenca pra redesign.

────────────────────────────────────────────────────────────
BRIEFING DO EMAIL: [DESCREVA — assunto, audiencia, oferta, CTA, blocos]

Claude.ai ChatGPT Gemini Cursor Claude Code

▤ Ativo

Campanhas ativas

142

↑ 12% vs. mês anterior

★

Leads gerados

3.840

↑ 24%

$

CPL médio

R$ 18,40

↓ 8% vs. meta

◔

Conversão

4,8%

↑ 0,4 p.p.

Leads por dia

Últimos 14 dias

Atividade recente

Eventos do time

11:42

Campanha publicada

PMAX Implante capilar

11:08

Upload do CSV

campanhas-set.csv · 142 KB

10:30

Aprovação solicitada

Aguardando review

Fundação

Tipografia

Nunito em todos os pesos. Hierarquia consistente do display ao caption.

Display

Heading 1 · Padrão de marca

Heading 2 · Hierarquia clara

Heading 3 · Estrutura semântica

Heading 4 · Subseções

Heading 5 · Bloco

Heading 6 · Item

Lead · Texto introdutório, mais largo, para abrir uma seção.

Body · Texto padrão de leitura. Peso medium, line-height confortável, contraste suficiente em todos os temas.

Small · Notas, descrições secundárias, helper text.

Caption · 12px, soft

Eyebrow · Etapa 01

Inline elements: code-inline, ⌘K e link inline.

Fundação

Cores

Tokens semânticos, não hex. Cada cor é uma intenção.

Semânticas

Brand

--mp-brand

#096840

Brand soft

--mp-brand-soft

#E5F9DF

Success

--mp-success

#10B981

Warn

--mp-warn

#EA580C

Danger

--mp-danger

#DC2626

Info

--mp-info

#2563EB

Escala verde Medprev

50

#E5F9DF

100

#C8F0B7

200

#9FE197

300

#6BCD78

400

#2FA85A

500

#096840

600

#075A37

700

#064D2E

800

#043F25

900

#02301B

Componentes

Botões

Variantes para todas as ações: ênfase, secundário, ghost, outline, destrutivo, sucesso, ícone, loading.

Variants

Sizes

Icon · group · block

Componentes

Formulários

Inputs, validation, choices, switches, uploads — todos com a11y embutida.

Form completo

Nome Mínimo 3 caracteres.

Email

Com ícone

⌕

Input group

R$ BRL

Floating label

Plataforma

Mensagem

Choices · Switches · Checkboxes

Meta Ads

Facebook · Instagram · Messenger

Recomendado

Google Ads

Search · Performance Max

TikTok Ads

Spark Ads · TopView

Habilitar notificações por email Modo silencioso aos fins de semana Auto-otimização (recomendado)

Aceito os termos de uso

Você pode ler os termos a qualquer momento na sua conta.

Receber novidades por email

Upload / Drop zone

↓

Arraste ou clique para enviar

CSV até 10MB

Validation states

Email inválido

✕ Formato inválido

Nome válido

✓ Disponível

Componentes

Overlays

Modal nativo (<dialog>), drawer lateral, popover, tooltip, dropdown.

Componentes

Feedback

Alertas, progress, skeletons, badges — comunicação de estado.

i

Atualização disponível

Nova versão do sistema com melhorias de performance.

✓

Tudo certo

Configuração salva e propagada para todas as plataformas.

!

Atenção

O CSV está sem a coluna Nome da campanha.

✕

Falha no envio

Não foi possível conectar ao Meta Ads. Tente novamente.

Progress

Upload 68%

Sincronização 100%

Processando —

Skeleton loaders

Badges / Tags / Chips

Default Brand Info Success Warn Danger Ativo Pendente Pill Tag removível Outra tag

Componentes

Navegação

Tabs, accordion, breadcrumbs, stepper, pagination — caminhos do usuário.

Tabs

Conteúdo da visão geral. Métricas, gráficos e KPIs.

Conteúdo de criativos. Imagens, vídeos, copy.

Definições de público-alvo, segmentação, lookalike.

Orçamento, agendamento, parâmetros de otimização.

Tabs estilo pill

Hoje

7 dias

30 dias

Personalizado

Accordion

Seguimos LGPD com criptografia em trânsito e em repouso. Dados sensíveis são tokenizados.

Sim, exportamos via API REST, BigQuery ou CSV agendado.

Plano Enterprise tem suporte 24/7 com SLA de 1h.

Stepper · Steps · Pagination

✓ Plataformas

2 CSV

3 Revisão

Componentes

Tabelas

Densidade adaptável, header sticky, ações inline, paginação.

Campanhas ativas

142 resultados

⌕

Nome ↕	Plataforma	Status	Leads	CPL
[LEADS] Implante capilar Curitiba Criado por Mariana · há 2 dias	Meta	Ativo	412	R$ 17,80
[PMAX] Odontologia Porto Alegre Criado por João · ontem	Google	Pendente	128	R$ 22,40
[VIDEO VIEW] Estética Salvador Criado por Ana · há 1 semana	Meta	Ativo	3.840	R$ 0,12
[LEADS] Cirurgia bariátrica SP Criado por Marina · há 3 semanas	Google	Erro	0	—

Mostrando 4 de 142

Componentes

Visualização de dados

Cards, calendar, kanban, empty states.

Calendário

Maio 2026

D

S

T

Q

S

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

Empty state

∅

Nenhuma campanha

Crie sua primeira campanha para começar a coletar leads automaticamente.

Kanban

Backlog 4

Lookalike de leads quentes

Meta Mariana

Teste de copy v3

PMAX João

Em revisão 2

Vídeo institucional

Extras

Chat widget, avatares, onboarding card.

Chat

SP

Suporte Medprev

online agora

Oi! Sou a Sofia, do suporte. Como posso ajudar?

Quero entender o desempenho da última campanha

Claro! Estou puxando os dados aqui. Um instante…

Onboarding card

PRÓXIMO PASSO

Conecte sua conta do Meta Ads

Você está a 1 passo de começar a importar campanhas automaticamente.

Avatares

P

PC

JS

MA

JP

PC

MA

JS

+5

Composições

Dashboards

Padrões para BI, painéis admin, telemetria. KPIs, gráficos de linha, donut, funil, heatmap, sparklines.

Receita ↑ 12,4%

R$ 248K

12 meses

Leads convertidos ↑ 8,1%

1.842

12 meses

CPL médio ↓ 3,2%

R$ 18,40

12 meses

Churn ↓ 0,4 p.p.

2,1%

12 meses

Receita vs meta

12 meses · em milhares de R$

Receita Meta

Por plataforma

Distribuição de leads

1.842

leads

Meta Ads 48%

Google Ads 28%

TikTok 16%

Outros 8%

Funil de conversão

Últimos 30 dias

Impressões

128.420

100%

Cliques

82.180

64%

Visitas LP

48.792

38%

Leads

23.115

18%

Qualificados

11.520

9%

Convertidos

1.842

1,4%

68%

Campanha	Leads	Tendência
Implante capilar CWB Meta · Lead	412
Odontologia POA Google · PMAX	328
Estética SSA Meta · VideoView	284
Bariátrica SP Google · Search	198
Reumato RJ Meta · Lead	142

Landing & Hero

Para LPs, sites institucionais e páginas promocionais — fora do dashboard shell.

Public Navbar

.mp-navbar — com blur + brand + ações

Hero

.mp-hero — clamp() responsivo + blobs de fundo

Plataforma Medprev

Marketing médico que entrega leads de verdade.

Unifique Meta Ads, Google Ads e TikTok num só lugar. Crie campanhas em minutos, sem perder a régua técnica que clínicas sérias exigem.

Começar agora Ver demo →

Hero centrado

.mp-hero.mp-hero-center — variante alternativa

Confiável por +1.200 clínicas

A operação completa de marketing da sua clínica.

Do criativo ao CRM, da régua de leads ao relatório do dono. Sem planilha, sem caos.

Falar com vendas

Pricing cards

Compositção comum em LPs

Starter

R$ 0 /mês

Para começar a entender o produto.

✓ 1 plataforma
✓ 100 leads/mês
✓ Relatórios básicos

Pro

POPULAR

R$ 499 /mês

Para a operação que precisa escalar.

✓ Todas as plataformas
✓ Leads ilimitados
✓ BI e relatórios avançados
✓ Integrações via API

Enterprise

Custom

Para redes e grupos hospitalares.

✓ SSO + permissões
✓ Suporte 24/7
✓ SLA dedicado

Footer

.mp-footer — rodapé institucional

▲ Páginas públicas · 14 componentes B2C

Tudo pra montar landing page Medprev de verdade.

Hero, trust strip, comparativo, calculadora, depoimentos com aspas, equipe médica, mockup WhatsApp, catálogo, multi-canal e CTA final. Tudo no padrão Medprev, pronto pra equipe usar sem inventar nada.

14 componentes 100% tokens do DS Mobile-first Pronto pra IA usar

01

Provar valor na cara

Números fortes, comparativo direto, CTA final dramático. Vence objeção principal logo de cara.

Trust strip

.mp-trust-strip

Faixa escura com 3-4 números gigantes resolvendo objeções principais. Vem logo após o hero pra quebrar resistência.

Confiança

0

Mensalidade

0

Taxa de cadastro

0

Carência

−70%

vs. particular

Comparison VS

.mp-comparison

Lado-a-lado "ruim vs bom" com X vermelho e ✓ verde. Resolve a comparação principal com a alternativa que o lead conhece.

Confiança

Plano tradicional

R$ 250+ por mês

Fixo

✕ Mensalidade mesmo sem usar

✕ Carência 30 a 180 dias

✕ Reajuste anual obrigatório

VS

Medprev

A partir de R$ 90

Só quando usar

✓ Zero mensalidade, sempre

✓ Atendimento imediato

✓ Sem reajuste forçado

CTA block

.mp-cta-block

Bloco verde gradient dramático pra fim de LP. Mais agressivo que .mp-card-brand. Tipografia gigante + CTA XL pra fechar conversão.

Confiança

Sem mensalidade · Sem carência · Sem surpresa

Cuide da sua saúde pagando o justo.

Mais de 50 mil pessoas já economizam com a Medprev. Chama no WhatsApp e descubra o seu valor.

Falar agora pelo WhatsApp Ver tabela

02

Engajar e converter

Calculadora interativa, passos didáticos com número gigante, CTAs omnipresentes (FAB desktop + sticky mobile). Captura intenção real e facilita o próximo passo.

Calc

.mp-calc · .mp-calc-result

Calculadora interativa com inputs do DS. Resultado destacado em gradient verde com CTA. Lead qualificado de forma natural — quem usa, está pronto pra agendar.

Conversão

Sua simulação

Quanto você gasta hoje?

Mensalidade do plano

R$ /mês

Você economiza

R$ 2.370

por ano

Começar →

Steps big

.mp-steps-big · .mp-step-big

Passos didáticos com número gigante 64px em soft-brand. Pra LP B2C "como funciona". Diferente do .mp-steps (wizard de dashboard).

Conversão

01

Chama no WhatsApp

Diga o que precisa. Sem cadastro, sem login.

02

Recebe o preço

Tabela transparente, sem taxa surpresa.

03

Escolhe horário

Vagas em até 48h.

04

Compareça

Paga só na hora. Sem nada depois.

FAB WhatsApp · Sticky CTA mobile

.mp-fab-whatsapp · .mp-sticky-cta

Componentes flutuantes (não renderizados aqui pra não atrapalhar a doc). FAB verde fica desktop, sticky bottom fica mobile. Sempre presentes em LP.

Conversão

.mp-fab-whatsapp

Fixed bottom-right 60x60. Cor oficial WhatsApp #25D366. Desktop only.

<a href="https://wa.me/..." class="mp-fab-whatsapp">
  <svg>...</svg>
</a>

.mp-sticky-cta

Botão fixo bottom mobile (some em desktop). Padding-bottom do body injetado via body:has().

<a href="..."
   class="mp-btn mp-btn-primary mp-btn-lg
          mp-btn-block mp-sticky-cta">
  Consultar valores
</a>

03

Humanizar saúde

Médicos com foto e CRM, depoimentos com aspas grandes, mockup de WhatsApp real. Quebra a frieza do SaaS B2B e gera confiança de gente.

Doctor cards

.mp-doctor-grid · .mp-doctor-card

Grid de médicos com foto + nome + especialidade + CRM + rating. Em LP de saúde, usar SEMPRE com foto real (emoji destrói credibilidade).

Humanização

JS

Dr. João Silva

Clínico Geral

CRM/PR 12345

★ 4.9 +1.2k atendimentos

MO

Dra. Maria Oliveira

Cardiologista

CRM/PR 67890

★ 5.0 +840 atendimentos

PR

Dr. Paulo Ribeiro

Ortopedista

CRM/PR 11223

★ 4.8 +2.1k atendimentos

WhatsApp mockup

.mp-wa-mockup

Mockup de conversa real do WhatsApp pra hero "veja como é fácil". Cores oficiais (#075E54, #DCF8C6, #E5DDD5) — exceção justificada à regra "no hex".

Humanização

M

Medprev Atendimento

online · responde em minutos

Olá! Quanto custa uma consulta com dermatologista? 14:22

Oi! Consulta com dermato fica R$ 130 💚
Pague só no dia, sem mensalidade. 14:23

Quer agendar pra essa semana? 14:23

Quero sim! 14:24

Testimonial rich

.mp-testimonial-rich

Depoimento com aspas decorativas verdes, estrelas amarelas e fonte (Google + cidade). Mais rico que o card simples de dashboard.

Humanização

★★★★★

Super recomendo. Ótimo atendimento e valores bem acessíveis. Já indiquei pra família toda.

ME

Maria Elisabete F.

Cliente há 3 anos

Google · Araucária

★★★★★

Sem complicação nenhuma. Atendimento muito bom, médica atenciosa. Voltarei sempre.

EB

Eliane Basso M.

Cliente há 2 anos

Google · Curitiba

★★★★★

Uso há anos, desde Florianópolis. Em Araucária continua excelente. Vale muito a pena.

AM

Angela Maria R.

Cliente há 6 anos

Google · Florianópolis

04

Mostrar preço com clareza

Ancoragem "de R$ X por R$ Y", linha de catálogo compacta e chips de especialidade buscáveis. Zero mistério, zero "consulte valores".

Price anchor · Pricing row · Spec chip

.mp-price-anchor · .mp-pricing-row · .mp-spec-chip

3 componentes complementares pra exibir preço. Ancoragem comparativa, lista compacta e grid buscável.

Catálogo

.mp-price-anchor

R$ 280 R$ 90

R$ 280 R$ 90 /consulta

.mp-pricing-row

🩺

Clínico geral

Consulta presencial

R$ 280 R$ 90

🔬

Hemograma completo

Exame laboratorial

R$ 85 R$ 25

.mp-spec-grid + .mp-spec-chip

🩺Clínico geralR$ 90

👶PediatraR$ 100

❤️CardiologistaR$ 140

👁️OftalmologistaR$ 120

🦴OrtopedistaR$ 130

🧠PsiquiatraR$ 150

💆DermatoR$ 130

🥗NutriR$ 100

05

Multi-canal de contato

WhatsApp, telefone, endereço, parceiros. Cada lead tem seu canal preferido — facilite todos.

Contact method

.mp-contact-method

Cards de contato multi-canal. Use a variante .mp-contact-method-icon-wa pra WhatsApp em verde oficial.

Contato

Av. Vítor do Amaral, 33

Logo cloud

.mp-logo-cloud

Faixa de logos de parceiros/imprensa em grayscale com hover colorido. "Confiam na gente" / "como visto em".

Contato

Confiam na gente

UNIMED

SUSEP

CRM/PR

PREFEITURA

G1

BAND

Documentação

Manifesto

As regras inegociáveis + a documentação de uso. Pra IA (ou time) criar HTML pra qualquer produto Medprev sem precisar abrir o código fonte.

Arquivos do framework

A arquitetura é modular. Em 99% dos casos, importe só o bundle (medprev.css) — ele já inclui todos os módulos na ordem certa. Os arquivos individuais existem pra builds otimizados ou debugging.

Arquivo	O que contém	Tamanho
`medprev.css`	Bundle principal. Importa todos os módulos abaixo na ordem correta + reset + tipografia base + presets (`.mp-h1..h6`, `.mp-lead`, `.mp-kbd`). É só este que você precisa.	~7KB
`medprev.tokens.css`	Variáveis CSS fundacionais — cores, tipografia, espaço, raio, sombra, motion, z-index, breakpoints. Tudo deriva daqui.	~9KB
`medprev.themes.css`	Overrides de light/dark/auto. Mapeia tokens primitivos em tokens semânticos por tema.	~5KB
`medprev.layout.css`	`.mp-app` shell, `.mp-sidebar`, `.mp-topbar`, `.mp-container`, `.mp-row`/grid, `.mp-stack`, `.mp-section`, `.mp-hero`, `.mp-navbar`, `.mp-footer`, `.mp-split`, `.mp-auto-grid`.	~16KB
`medprev.forms.css`	`.mp-input`, `.mp-textarea`, `.mp-select`, `.mp-checkbox`, `.mp-radio`, `.mp-switch`, `.mp-range`, `.mp-drop` (upload), `.mp-tags-input`, `.mp-choices`, validation states, floating labels.	~17KB
`medprev.components.css`	Todo o resto — `.mp-btn`, `.mp-card`, `.mp-modal`, `.mp-drawer`, `.mp-toast`, `.mp-tabs`, `.mp-accordion`, `.mp-alert`, `.mp-badge`, `.mp-table`, `.mp-dropdown`, `.mp-tooltip`, `.mp-cmdk`, `.mp-stat`, `.mp-kpi`, `.mp-donut`, `.mp-funnel`, `.mp-sparkline`, `.mp-heatmap`, `.mp-chart-line`, `.mp-empty`, `.mp-timeline`, `.mp-calendar`, `.mp-kanban`, `.mp-chat`.	~55KB
`medprev.animations.css`	Keyframes globais (fade, slide, scale, spin, pulse, shimmer, etc.) + utilities `.mp-anim-*` + delays.	~5KB
`medprev.utilities.css`	Utilities atômicas tipo Tailwind — display, flex, grid, gap, padding, margin, width, height, position, z, overflow, text, color, bg, border, radius, shadow, opacity, cursor, transition. Com prefixos responsivos `mp-sm:`, `mp-md:`, `mp-lg:`, `mp-xl:`.	~25KB
`medprev.js`	Controllers vanilla. Auto-init em `DOMContentLoaded`: theme, modal, drawer, toast, dropdown, tabs, accordion, sidebar, command palette (⌘K), dropzone, tags input, form validation, scroll spy, back-to-top, copy, loading overlay.	~30KB

Perfis de uso — quais arquivos importar?

A resposta padrão é "importa o bundle". Mas se você precisar otimizar peso (microsite, AMP, email engine), tem como dividir.

App / Dashboard

Default

Sistema interno completo

Painel admin, app SaaS, BI, wizard. Usa sidebar + topbar + main, forms complexos, modais, gráficos.

✓ medprev.css (bundle)

✓ medprev.js

~170KB CSS + 30KB JS

Landing page

Web público

LP / site institucional

Hero, pricing, footer, navbar com blur. Geralmente sem app shell. Forms só se houver captura de lead.

✓ medprev.css (bundle, ainda mais simples)

✓ medprev.js

Se for ultra-performático e tiver tooling de tree-shake: tokens + themes + layout + components + utilities. Pula forms.css se não houver inputs.

Microsite

Promo

Página promocional única

Campanha curta, 1-2 telas, máxima velocidade. Card de oferta, botão, hero compacto.

✓ medprev.tokens.css

✓ medprev.themes.css

✓ medprev.css (reset + tipo)

✓ medprev.utilities.css

+ components sob demanda

JS opcional — só se houver modal/toast/cmdk.

Microfrontend

Widget

Componente embeddado

Widget injetado em outro site (chat, calculadora, formulário). Não controla o <html>.

✓ medprev.css scoped

✓ medprev.js (módulos seletivos)

Reset do bundle pode brigar com host. Em produção, recomenda Shadow DOM.

Email HTML

Limitado

Newsletter / transacional

Clientes de email não suportam variáveis CSS nem <link> externo. Bundle não funciona direto.

✗ Não importa nenhum arquivo

✓ Use tokens como referência

✓ Inline tudo com cores hex

Mantenha as cores e fontes do DS, mas sem dinâmica. Sem dark mode (a maioria dos clientes não suporta).

Documentação

Static

Docs / blog técnico

Conteúdo longo de leitura. Tipografia importa muito, layout simples, código inline.

✓ medprev.css (bundle)

✓ medprev.js (opcional)

Use .mp-max-w-prose no conteúdo. Approve tabs e accordion via JS.

Cheatsheet — esqueletos mínimos

App / Dashboard

<html data-mp-theme="light">
<head>
  <link rel="stylesheet" href=".../medprev.css">
</head>
<body>
  <div class="mp-app">
    <aside class="mp-sidebar">…</aside>
    <header class="mp-topbar">…</header>
    <main class="mp-main">…</main>
  </div>
  <script src=".../medprev.js"></script>
</body>

Landing page

<html data-mp-theme="light">
<head>
  <link rel="stylesheet" href=".../medprev.css">
</head>
<body>
  <div class="mp-container">
    <nav class="mp-navbar">…</nav>
    <section class="mp-hero">…</section>
    <section class="mp-section">…</section>
    <footer class="mp-footer">…</footer>
  </div>
  <script src=".../medprev.js"></script>
</body>

Regras inegociáveis

01

Identidade

Logo: URL oficial do CDN, em fundo branco, dentro de .mp-logo-box ou .mp-navbar-brand.
Fonte: Nunito e somente Nunito, com fallback system-ui. Sem fonte secundária.
Cores: só tokens (var(--mp-brand)). Nunca hex hardcoded no markup.

02

Estrutura

Apenas classes e data-mp-* no HTML. Sem <style>, sem <script> com lógica de componente, sem onclick=.
Apps dashboard usam .mp-app + .mp-sidebar + .mp-topbar + .mp-main.
LPs e sites usam .mp-navbar + .mp-hero + .mp-section + .mp-footer.

03

Botões

Primary verde sólido pra ação principal.
Secondary branco com borda pra ação alternativa.
Ghost pra ação neutra/cancel.
Danger só pra destrutivo, sempre com confirmação modal.
1 botão primário por contexto. Mais que isso, a hierarquia some.

04

Overlays

Sempre <dialog> nativo. Nunca <div role="dialog"> improvisado.
Modal, drawer e cmdk abrem e fecham com transição. Nunca seco.
Clique fora fecha drawer/cmdk por padrão. Modal opta com data-mp-close-on-backdrop.
ESC sempre fecha (browser nativo cuida).
Nunca alert(), confirm(), prompt(). Sempre modal custom.

05

Acessibilidade

Foco visível em todos os interativos (já vem default — não anule).
Checkbox, radio, switch usam <input> nativo (keyboard de graça).
prefers-reduced-motion respeitado automaticamente.
Labels obrigatórios em todos os inputs. .mp-sr-only se o label visual existe em outro lugar.
Contraste mínimo WCAG AA em texto, AAA quando possível.

06

Movimento

Duração via --mp-duration-fast (150ms), -base (220ms), -slow (300ms).
Easing oficial: --mp-ease-out padrão, --mp-ease-bounce só pra acentos (checks, pops, success).
Toggle de seleção: classList.toggle('selected') no item. Nunca re-render do grupo.
Tudo que abre/fecha tem que animar nas DUAS direções.

07

Estética

Limpa, profissional, healthcare tech.
Nada de gradiente roxo, glassmorphism gratuito, ou estética genérica de IA.
Sem emojis decorativos. Só símbolos funcionais (✓ ↓ ✕ ↔ ⚠) — idealmente SVGs.
Densidade adequada: ar suficiente, sem cansar. Use os tokens de espaço.

08

Temas

Todo produto suporta light · dark · auto via data-mp-theme no <html>.
Tokens semânticos (--mp-surface, --mp-text) — não use os primitivos diretos.
Tema persiste em localStorage automaticamente.

§

Regra de ouro

Se você precisou escrever CSS dentro do HTML da aplicação, ou JS controlando um componente, é porque o DS está faltando alguma coisa. PR no /Claude/ — não gambiarra no produto.

Vai criar com IA?

Visão geral

Tipografia

Cores

Botões

Formulários

Form completo

Choices · Switches · Checkboxes

Upload / Drop zone

Validation states

Overlays

Feedback

Progress

Skeleton loaders

Badges / Tags / Chips

Navegação

Tabs

Tabs estilo pill

Accordion

Stepper · Steps · Pagination

Tabelas

Visualização de dados

Calendário

Empty state

Kanban

Extras

Chat

Onboarding card

Conecte sua conta do Meta Ads

Avatares

Dashboards

Landing & Hero

Marketing médico que entrega leads de verdade.

A operação completa de marketing da sua clínica.

Tudo pra montar landing page Medprev de verdade.

Cuide da sua saúde pagando o justo.

Manifesto

Arquivos do framework

Perfis de uso — quais arquivos importar?

Cheatsheet — esqueletos mínimos

Regras inegociáveis