Design System
Referência viva dos componentes base do Portal HempMeds
1Cores
Tokens centralizados em styles/tokens.css; exceções pontuais documentadas nas seções abaixo.
2Tipografia (Manrope)
--fs-page-title e --fs-kpi-value usam clamp() para escalar com a viewport.3Botões
4Inputs, busca e filter bar
Filter bar (padrão de filtros responsivo, usa flex-wrap):
5Cards e KPIs
KPIs usam .grid--kpi (auto-fit minmax(200px, 1fr)) e tipografia em clamp(). Shell compartilhado: .card.kpi-card (base + variante).
Card branco, sombra suave, raio var(--radius-lg), padding 24px. Pode receber .card--compact para padding reduzido.
6Tabela responsiva (data-priority)
Cada <th> e <td> tem data-priority="1|2|3". Cols 3 somem <1440px, cols 2 somem <1280px, col 1 sempre visível. Redimensione a janela para testar.
| ID | Cliente | Data | Valor | Tracking | Status | Ações |
|---|---|---|---|---|---|---|
| #2 Carlos Eduardo Silva | Carlos Eduardo Silva | 15 Jan, 2024 | R$ 2.450,00 | MEM-9021-BR | Em Processamento |
7Badges
Badge compacto (.badge--compact, --radius-md, sem bolinha):
8Timeline
9Upload
10Estado vazio
11Skeleton (loading)
12Interativos: Modal e Toast
13Definition list (.dl)
Pares label/valor em grid de 2 colunas. Variante .dl--single para 1 coluna.
14Cards de integração externa
Usado em cliente.html (Pipedrive, WooCommerce). Layout: label + valor grande + sub + seta laranja.
15Profile card (avatar grande)
Usado em prescritor / representante / usuário. Avatar circular + nome + sub + badges + verified.
16Card de Documentos (header laranja)
Usado em cliente.html à direita. Header em laranja-soft + linhas de documento + footer com link.
17Sub-cards (painel direito)
Usados em pedido.html para Origem / Tracking. Fundo bg-muted, label uppercase, valor strong + ação opcional.
18Order totals
Bloco de totais (subtotal/frete/total) com destaque em laranja para o total.
19Donut com label central
Wrapper para Chart.js doughnut + número grande no centro + legenda à direita.
20Lista de pendências (dashboard)
21Mini-indicador de documentos
Usado na coluna "Docs" da listagem de pedidos. X/Y + bolinha de status.
22Stat row com barra de percentual
Usado em "Top produtos" do representante.
23Inline alerts
3 variantes: warning (default), info, danger.
24Dashed CTA
Usado no fluxo guiado de novo pedido (etapas 1 e 2) para "cadastrar novo".
25Separador "ou"
26Summary card (fluxo guiado)
Card sticky usado em pedido.html (modo criação) à direita. Mostra estado atual do pedido em construção.
27Page header com breadcrumb e meta
Padrão para páginas de detalhe.
Pedido #ORD-2023-8472
Em Processamento28Thumbnails
Imagem circular para listagens (produtos, usuários).
29Shell responsivo (sidebar 3 estados)
Header full-width fixo no topo. Sidebar abaixo, à esquerda. 3 estados:
- Expanded (220px) — desktop padrão.
- Collapsed (64px) — só ícones, tooltip ao hover.
- Drawer (overlay) — automático em viewport < 1024px.
Toggle: botão hamburger no header. Estado persiste em localStorage.
29.1Faixa Representante Comercial
Indicador de contexto exibido no topo do app quando o usuário logado tem perfil comercial (data-comercial-view="true" no <html>). Injetado via layout.js; não aparece em telas auth nem para administradores.
Tokens: --color-primary, --text-on-primary, --comercial-banner-height (38px), --z-comercial-banner (21).
30Auth (login e recuperação de senha)
Componentes das telas login.html e recuperar-senha.html. Estilos em components.css (bloco Auth layout).
30.1 — Tokens auth
Definidos em styles/tokens.css. Específicos para layouts de autenticação.
30.2 — Marca
.auth-brand — padrão
Brasil Admin.auth-brand.auth-brand--sm — cabeçalho do formulário
Brasil Admin.auth-brand.auth-brand--center — login e recuperação (layout centrado)
Brasil Admin30.3 — Links e checkbox
30.4 — Input com ícone
Padrão usado nos formulários auth. Compartilha .input e .field com a seção 4.
30.5 — Tela de login (layout centrado)
30.6 — OTP e alertas de recuperação
Componentes da etapa 2 do fluxo em recuperar-senha.html.
Verifique seu e-mail e digite o código de 6 dígitos abaixo.
Classes: .inline-alert--success, .inline-alert--recovery (modificador posicional — margin abaixo do logo), .otp-inputs, .otp-input, .recovery-lead, .recovery-success-icon, .recovery-step
30.7 — Tela de recuperação (layout centrado)
30.8 — Referência de classes
Agrupamento das classes em components.css:
- Shell:
.auth-page,.auth-page--centered,.auth-page__backdrop,.auth-page__waves— compartilhado por login e recuperação - Card:
.auth-card,.auth-card--solo,.auth-solo - Formulário:
.auth-form,.auth-form--solo,.auth-form__options,.auth-form__subtitle - Decoração:
.auth-hex-network,.auth-hex-cluster,.auth-hex-icon - Marca e texto:
.auth-brand,.auth-brand--sm(variante compacta),.auth-brand--center,.auth-solo__title - Interativos:
.auth-link,.auth-link--back,.auth-checkbox,.input-icon - Recuperação:
.recovery-step,.otp-inputs,.otp-input,.inline-alert--recovery,.recovery-success-icon,.inline-alert--success
Telas completas: login.html · recuperar-senha.html
31Preview drawer
Painel lateral de preview rápido usado em pedidos.html e usuarios.html. Markup em partials/preview-drawer.html (via mountPreviewDrawer()); controlado por UI.Drawer em components.js; estilos em components.css (.preview-drawer, .drawer-overlay).
32Hierarquia de cards
Shell base compartilhado (background, border-radius, box-shadow) entre .card, .kpi-card e .integration-card.
| Classe | Uso |
|---|---|
.card | Container genérico (filtros, tabelas, painéis) |
.card.kpi-card | Métricas de listagem (KPIs) |
.card.integration-card | Link externo / CRM (Pipedrive) |
.subcard | Bloco aninhado em painéis (bg-muted, sem shadow) |
.card.summary-card | Coluna lateral sticky em fluxos guiados |
33Padrão ListPage
Listagens montadas via UI.ListPage em components.js. Piloto: clientes.html. Convenção de IDs: filtro-busca, btn-limpar, tabela-*, paginacao-info, paginacao-pages, kpi-*.
UI.ListPage.shell({
title, subtitle, actionsHtml,
kpis: [{ label, valueId, variant, icon }],
searchPlaceholder, filterFieldsHtml,
tbodyId, theadHtml
})Botão "Novo": sempre <a class="btn btn--primary" href="..."> (navegação nativa).
34Padrão DetailPage
Telas de detalhe/cadastro com col-8/col-4 via UI.DetailPage.shell(). Piloto: cliente.html (cliente.js).
UI.DetailPage.shell({
breadcrumb: [{ href, label }, { label }],
title, titleRowHtml, subtitle, metaHtml, actionsHtml,
mainHtml, sideHtml, stickySide: false
})35Kanban (logística)
Funil em logistica.html. Classes: .kanban, .kanban__col, .kanban__col-header, .kanban-card, .kanban-card__title, .kanban-card__meta.
36Date filter
.date-filter-field, .date-filter-field__picker — wrapper de período com ícone; ativado via UI.enhanceDateInputs().
37Paginação de tabela
.table__pagination, #paginacao-info.muted, .pagination__pages, .pagination__btn.
38Notificações (header)
tr.notif-row--unread (em tabela), .notif-dot, .header-notif-dropdown. Warning em inline alerts = classe base .inline-alert (sem modificador).
Pagamento mal sucedido Pedido #4 — há 2 h |