Visão geral
Showcase de todos os componentes, utilities e padrões do Medprev Design System.
Tipografia
Nunito em todos os pesos. Hierarquia consistente do display ao caption.
Cores
Tokens semânticos, não hex. Cada cor é uma intenção.
Botões
Variantes para todas as ações: ênfase, secundário, ghost, outline, destrutivo, sucesso, ícone, loading.
Formulários
Inputs, validation, choices, switches, uploads — todos com a11y embutida.
Form completo
Choices · Switches · Checkboxes
Upload / Drop zone
Validation states
Overlays
Modal nativo (<dialog>), drawer lateral, popover, tooltip, dropdown.
Feedback
Alertas, progress, skeletons, badges — comunicação de estado.
Progress
Skeleton loaders
Badges / Tags / Chips
Tabelas
Densidade adaptável, header sticky, ações inline, paginação.
| 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
|
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
|
Erro | 0 | — |
Visualização de dados
Cards, calendar, kanban, empty states.
Calendário
Empty state
Kanban
Extras
Chat widget, avatares, onboarding card.
Chat
Onboarding card
Conecte sua conta do Meta Ads
Você está a 1 passo de começar a importar campanhas automaticamente.
Avatares
Dashboards
Padrões para BI, painéis admin, telemetria. KPIs, gráficos de linha, donut, funil, heatmap, sparklines.
| 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.
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.
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.
Para começar a entender o produto.
- ✓ 1 plataforma
- ✓ 100 leads/mês
- ✓ Relatórios básicos
Para a operação que precisa escalar.
- ✓ Todas as plataformas
- ✓ Leads ilimitados
- ✓ BI e relatórios avançados
- ✓ Integrações via API
Para redes e grupos hospitalares.
- ✓ SSO + permissões
- ✓ Suporte 24/7
- ✓ SLA dedicado
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.
Painel admin, app SaaS, BI, wizard. Usa sidebar + topbar + main, forms complexos, modais, gráficos.
Hero, pricing, footer, navbar com blur. Geralmente sem app shell. Forms só se houver captura de lead.
Se for ultra-performático e tiver tooling de tree-shake: tokens + themes + layout + components + utilities. Pula forms.css se não houver inputs.
Campanha curta, 1-2 telas, máxima velocidade. Card de oferta, botão, hero compacto.
JS opcional — só se houver modal/toast/cmdk.
Widget injetado em outro site (chat, calculadora, formulário). Não controla o <html>.
Reset do bundle pode brigar com host. Em produção, recomenda Shadow DOM.
Clientes de email não suportam variáveis CSS nem <link> externo. Bundle não funciona direto.
Mantenha as cores e fontes do DS, mas sem dinâmica. Sem dark mode (a maioria dos clientes não suporta).
Conteúdo longo de leitura. Tipografia importa muito, layout simples, código inline.
Use .mp-max-w-prose no conteúdo. Approve tabs e accordion via JS.
Cheatsheet — esqueletos mínimos
<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><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
- Logo: URL oficial do CDN, em fundo branco, dentro de
.mp-logo-boxou.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.
- Apenas classes e data-mp-* no HTML. Sem
<style>, sem<script>com lógica de componente, semonclick=. - Apps dashboard usam
.mp-app+.mp-sidebar+.mp-topbar+.mp-main. - LPs e sites usam
.mp-navbar+.mp-hero+.mp-section+.mp-footer.
- 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.
- 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. ESCsempre fecha (browser nativo cuida).- Nunca
alert(),confirm(),prompt(). Sempre modal custom.
- 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-motionrespeitado automaticamente.- Labels obrigatórios em todos os inputs.
.mp-sr-onlyse o label visual existe em outro lugar. - Contraste mínimo WCAG AA em texto, AAA quando possível.
- Duração via
--mp-duration-fast(150ms),-base(220ms),-slow(300ms). - Easing oficial:
--mp-ease-outpadrão,--mp-ease-bouncesó 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.
- 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.
- Todo produto suporta light · dark · auto via
data-mp-themeno<html>. - Tokens semânticos (
--mp-surface,--mp-text) — não use os primitivos diretos. - Tema persiste em localStorage automaticamente.
/Claude/ — não gambiarra no produto.