# Design System — Clinic Sistema de tokens e componentes para o nicho **clinic**. Pensado para ser **tematizado** por demo: a estrutura semântica e os componentes ficam fixos; a identidade visual de cada demo vem do `themeJson` que sobrescreve os tokens. > Regra de ouro: **nenhum componente carrega hex hardcoded**. Tudo via `var(--token)` ou classe utilitária Tailwind apontando para a variável. --- ## 1. Tokens ### 1.1 Cores semânticas (6 tokens base + auxiliares) | Token | Função | Exemplo (premium) | Exemplo (popular) | Exemplo (técnico) | |---|---|---|---|---| | `--color-primary` | Cor principal de marca, headers de seção, botões primários | `#2D3B2D` | `#16A34A` | `#0E4C66` | | `--color-secondary` | Cor de apoio, hover, gráficos secundários | `#8B7355` | `#0F766E` | `#0A6E8C` | | `--color-accent` | CTA forte, destaques pontuais, badges | `#C9A961` | `#FACC15` | `#FF7A59` | | `--color-bg` | Fundo da página | `#F7F3EC` | `#FFFFFF` | `#F4F6F8` | | `--color-surface` | Cards, áreas elevadas | `#FFFFFF` | `#F0FDF4` | `#FFFFFF` | | `--color-text` | Texto principal | `#1A1A1A` | `#0F172A` | `#0B1F2A` | | `--color-muted` | Texto secundário, legendas | `#6B6B6B` | `#475569` | `#5A6B75` | Aux: `--color-success`, `--color-warning`, `--color-danger`, `--color-border`. Derivar de primary/secondary com ajuste de luminância sempre que possível. **Regra de contraste (WCAG AA):** texto sobre `--color-bg` e `--color-surface` ≥ 4.5:1. Texto sobre `--color-primary` ≥ 4.5:1 ou usar versão `--color-on-primary`. Validar com ferramentas (não no olho). ### 1.2 Tipografia Duas famílias por demo: - `--font-heading`: títulos, hero. Pode ser serif (premium), sans rounded (popular) ou sans técnica (especialista). - `--font-body`: corpo, UI, formulários. Sempre sans humanista, legível em mobile. Escala (rem, base 16px): | Token | rem | px | Uso | |---|---|---|---| | `text-xs` | 0.75 | 12 | rótulos, legais | | `text-sm` | 0.875 | 14 | metadados, badges | | `text-base` | 1.0 | 16 | corpo padrão | | `text-lg` | 1.125 | 18 | corpo enfático, lead | | `text-xl` | 1.25 | 20 | subtítulos card | | `text-2xl` | 1.5 | 24 | títulos de seção menores | | `text-3xl` | 1.875 | 30 | título de seção | | `text-4xl` | 2.25 | 36 | hero mobile | | `text-5xl` | 3.0 | 48 | hero desktop | | `text-6xl` | 3.75 | 60 | hero premium / display | Pesos: 400 (body), 500 (UI), 600 (subtítulo), 700 (título). Nunca usar `font-weight: 800+` para corpo. Line-height: 1.2 para títulos, 1.5 para corpo, 1.6 para textos longos. ### 1.3 Espaço (escala 4px) `0, 1 (4px), 2 (8px), 3 (12px), 4 (16px), 5 (20px), 6 (24px), 8 (32px), 10 (40px), 12 (48px), 16 (64px), 20 (80px), 24 (96px), 32 (128px)`. Regras: - Padding lateral mobile: `4` (16px). Desktop: `8` (32px) ou container centralizado max-w-6xl. - Espaço entre seções: `16` mobile, `24` desktop. - Gap padrão de cards: `6`. ### 1.4 Raio | Token | Valor | Uso | |---|---|---| | `--radius-none` | 0 | linhas técnicas, demos técnicos | | `--radius-sm` | 4px | inputs, badges | | `--radius-md` | 8px | cards padrão | | `--radius-lg` | 16px | cards destaque, hero | | `--radius-full` | 9999px | avatares, pílulas, botões redondos | Cada demo escolhe um "raio dominante" e o usa de forma consistente. Não misturar `radius-sm` em uns cards e `radius-lg` em outros sem motivo semântico. ### 1.5 Sombra (3 níveis) | Token | Valor | Uso | |---|---|---| | `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.04)` | linha sutil, inputs em foco | | `--shadow-md` | `0 4px 16px rgba(0,0,0,0.06)` | cards padrão | | `--shadow-lg` | `0 20px 40px rgba(0,0,0,0.10)` | hero, modal, sticky CTA | Nunca sombras coloridas saturadas. Demos técnicos podem usar `shadow: none` e bordas no lugar. --- ## 2. Componentes-base ### 2.1 Botão (`btn`) **Anatomia**: label · ícone opcional (esquerda) · ícone opcional (direita). **Variantes**: - `btn-primary`: fundo `--color-primary`, texto `--color-on-primary`. - `btn-secondary`: fundo `--color-surface`, borda `--color-primary`, texto `--color-primary`. - `btn-accent`: fundo `--color-accent`, texto contraste alto. Reservado para CTA principal. - `btn-ghost`: sem fundo, texto `--color-primary`, hover sublinhado. **Tamanhos**: `sm` (h-9 px-4), `md` (h-11 px-5), `lg` (h-14 px-7). **Estados**: hover (escurece 8%), focus (anel `--color-accent` 2px), disabled (opacity 50, cursor not-allowed), loading (spinner + label dim). **Hit target**: mínimo 44px de altura em mobile. CTA principal sempre `lg` em mobile. **Do**: usar um único `btn-accent` por viewport. Verbos no infinitivo ("Agendar avaliação", "Falar no WhatsApp"). **Don't**: empilhar 3 CTAs do mesmo peso. Usar "Clique aqui" como label. ### 2.2 Card **Anatomia**: media (opcional) · header (título + meta) · body · footer (CTA opcional). **Variantes**: - `card-service`: ícone + título + descrição + preço/cta. - `card-testimonial`: aspas + texto + autor (foto, nome, especialidade). - `card-team`: foto + nome + CRM/CRO + especialidade. - `card-stat`: número grande + label. Padding interno: `6` (24px). Sombra: `--shadow-md`. Hover: elevação para `--shadow-lg` + translateY(-2px). ### 2.3 Header / Navbar **Anatomia**: logo · nav links · CTA · botão WhatsApp (fixo flutuante em mobile). - Sticky no scroll, fundo `--color-surface` com `--shadow-sm` ao descolar do topo. - Mobile: hamburguer + drawer lateral, CTA WhatsApp persistente no rodapé fixo. - Inclui badge "atendemos hoje" quando aplicável. ### 2.4 Hero **Anatomia**: eyebrow (kicker) · headline · sub · CTAs · prova social mínima · mídia (foto profissional, equipe, ou ambiente). Variantes de layout: - `hero-split`: 50/50 texto + imagem (padrão premium). - `hero-stack`: stack vertical com foto full-bleed acima (mobile-first popular). - `hero-data`: texto à esquerda, painel de stats à direita (técnico). **Don't**: hero sem foto humana. Hero com 4+ CTAs. Headline genérica ("Sua clínica de confiança"). ### 2.5 CTA Block Bloco de meio/fim de página: headline forte + 1 CTA primário + 1 CTA secundário (WhatsApp). Fundo `--color-primary` ou imagem com overlay. ### 2.6 Formulário - Labels acima dos inputs, nunca placeholder-only. - Inputs: altura 44px+, raio `--radius-sm` ou `--radius-md`, borda `--color-border`, foco anel `--color-accent`. - Campos mínimos: nome, WhatsApp, especialidade/serviço (select), horário preferido. - Validação inline, mensagem de erro abaixo do campo. - CTA do form: `btn-accent` lg + microcopy "Retornamos em até 1h em horário comercial". - Privacidade visível: "Seus dados são protegidos pela LGPD". ### 2.7 Depoimento Card com aspas tipográficas grandes, texto curto (até 240 caracteres), autor com foto opcional + idade/especialidade tratada. Nunca usar nome completo sem consentimento; preferir "Marina S., 42 — paciente desde 2022". ### 2.8 FAQ Accordion. Pergunta em `text-lg` peso 600, resposta `text-base` `--color-muted`. Apenas 1 aberta por vez. 5–8 perguntas máx., focadas em objeção real (preço, dor, convênio, horário, primeira consulta). ### 2.9 Footer **Anatomia**: - Coluna 1: marca + endereço + mapa estático. - Coluna 2: links institucionais. - Coluna 3: contato (WhatsApp, telefone, e-mail, horário). - Coluna 4: redes sociais + selos (convênios, associações). - Faixa inferior: responsável técnico (Dr. Nome — CRM/CRO XX.XXX), CNPJ, política de privacidade, **disclaimer demo**. --- ## 3. Variações de estado | Componente | Estados | |---|---| | Botão | default, hover, focus, active, disabled, loading | | Input | default, focus, filled, error, disabled | | Card | default, hover (elevação), selected (borda accent) | | Link nav | default, hover (underline), active (peso 600 + accent) | | Accordion | collapsed, expanded | | Toast/banner | success, warning, danger, info | --- ## 4. Regras de uso 1. **Um CTA dominante por viewport.** Use `btn-accent` com parcimônia. Os demais são `primary`/`secondary`. 2. **WhatsApp é canal principal**: botão flutuante fixo em mobile, link com `wa.me/55...?text=...` pré-preenchido. 3. **Confiança visual**: foto real do espaço/equipe > stock. Quando não houver, usar placeholder com aviso, nunca SVG decorativo "médico genérico". 4. **Antes/depois** apenas em odonto/estética e com contexto educativo + consentimento. Médicos: nunca. 5. **Selos e certificações** no rodapé, não no hero (não dar peso demais). 6. **Contraste mínimo** AA em todos os pares texto/fundo. Validar `--color-accent` sobre `--color-bg`. 7. **Mobile-first**: tudo desenhado primeiro em 360px de largura; desktop é progressive enhancement. 8. **Densidade**: clínica popular = densa e direta. Premium = espaçada e silenciosa. Técnica = densa em dados. 9. **Linguagem**: pt-BR, "você" formal/respeitoso. Evitar "garantido", "melhor", "milagre". Verbos diretos. 10. **LGPD**: aviso de cookies + link de política em todos os demos. --- ## 5. Como tematizar Cada demo carrega seu `themeJson` em ` ``` Todos os componentes consomem essas variáveis. Trocar o `themeJson` muda a identidade sem tocar em markup.