# DESIGN.md — indicadores.online

> **Fonte única da verdade visual** para o site e produto Indicadores Saúde.
> Este documento deve ser consultado antes de qualquer decisão de UI/UX.
> Última atualização: abril/2026

---

## ⚡ QUICK REFERENCE (resumo executivo)

> Resumo das decisões visuais principais. Para detalhes completos, ver seções 1-15.

### Visual
- **Cor da marca:** `#1212B6` (azul institucional)
- **Cor de ação UI:** `#4338CA` (roxo, botões e links)
- **Cor de sucesso:** `#38BA38` (verde)
- **Tipografia:** Inter (Google Fonts)
- **Border radius:** 8px (botões), 10px (cards)
- **Espaçamento:** múltiplos de 4px

### Cores semânticas Previne Brasil (RESERVADAS)
4 cores usadas APENAS em componentes de indicadores (cards, gráficos, badges):
- 🔵 `#1212B6` — Ótimo
- 🟢 `#38BA38` — Bom
- 🟡 `#D5BA0A` — Suficiente
- 🟠 `#C46500` — Regular

### Personalidade
**Institucional, sério, técnico.** Cara de "ferramenta profissional B2G", não de startup. Design clean e organizado. SEM gradientes neon, efeitos 3D, animações chocantes.

### Públicos
- **Site público (`indicadores.online`):** gestor público B2G — secretários municipais, coordenadores de APS
- **Produto interno:** mesmas pessoas + equipes técnicas (digitação, tabulação)

### Referência viva
Site atual em produção: **https://indicadores.online/**
Use como referência principal de visual existente. O design deve **evoluir** desse base, mantendo coerência mas elevando qualidade.

### Anti-referências visuais
- ❌ Hotmart, Kajabi (marketing infoproduto)
- ❌ Sites com gradientes neon ou efeitos 3D
- ❌ Sites tech "hacker" (preto + verde matrix)
- ❌ Sites governamentais "chapa-branca" sem alma
- ❌ Sistemas hospitalares antigos (cara de Moodle)

### Inspirações positivas
- ✅ Linear.app (tipografia, dashboards)
- ✅ Stripe Dashboard (cards de métrica)
- ✅ Vercel (hero institucional)
- ✅ GitHub (tabelas, hierarquia)
- ✅ gov.br Design System (padrões brasileiros)

---

## 🌐 SITE DE REFERÊNCIA

### URL principal
**https://indicadores.online/**

Esse é o site atual em produção do produto. Use como **base visual viva** para extrair:
- Estrutura de cores em uso real
- Hierarquia tipográfica praticada
- Estilo de cards de indicadores
- Padrão de tabelas e listagens
- Forma dos botões e CTAs
- Layout do dashboard principal
- Estilo do mapa territorial

### O que evoluir do site atual
O redesign deve **manter o que funciona** e **melhorar** em:
1. Tipografia mais consistente (padronizar Inter)
2. Cores mais sistemáticas (separar marca / ação / semântica)
3. Cards de indicadores mais informativos
4. Espaçamento mais generoso
5. Mobile-first mais robusto
6. Hierarquia visual mais clara em dashboards densos

### O que preservar do site atual
- Cores Previne Brasil (4 cores semânticas — não inventar novas)
- Estrutura de drill-down (visão geral → equipe → microárea)
- Densidade informacional para usuários técnicos
- Padrões de relatório PDF
- Idioma e referências brasileiras (eSUS, SUS, APS, Previne)

### Telas-chave para inspecionar no site atual
1. **Dashboard inicial** — visão consolidada dos 7 indicadores
2. **Tela de indicador específico** — drill-down em C2-C7
3. **Listagem de equipes** — tabela com performance por equipe
4. **Mapa territorial (CVAT)** — microáreas coloridas
5. **Relatório de equipe** — formato PDF gerado
6. **Tela mobile do dashboard** — adaptação responsiva

---

## 1. IDENTIDADE & POSICIONAMENTO

### O produto
**Indicadores Saúde** é uma plataforma B2G (governo) de monitoramento em tempo real dos indicadores Previne Brasil (Atenção Primária à Saúde) baseada em dados do e-SUS APS. Permite gestores municipais acompanharem a performance da APS, identificarem oportunidades de melhoria e baterem metas pactuadas.

### Modelo comercial
- **Tipo de contrato:** Lei 14.133/2021, Art. 75, inciso II (dispensa de licitação)
- **Cliente:** Secretarias municipais de saúde
- **Razão social do fornecedor:** Curso Interativo Digital Solutions Ltda (CNPJ 49.300.441/0001-06)
- **Pagamento:** Mensal recorrente
- **Acompanhamento:** Suporte técnico contínuo

### Público
**Gestores públicos da saúde municipal**:
- Secretários(as) Municipais de Saúde
- Coordenadores(as) de Atenção Primária
- Técnicos da Vigilância em Saúde
- Equipes de digitação e tabulação dos sistemas SUS
- Tabuladores e analistas SIA/SIH

### Tom de voz
**Técnico, sério, claro e confiável.** Sem jargões de marketing exagerados. Sem promessas vazias. Linguagem que respeita a complexidade do gestor público brasileiro. Direto ao ponto, mas humano.

### Personalidade visual
- **Institucional e séria** (cara de produto profissional, não de startup)
- **Técnica sem ser fria** (mostra dados, mas é humanizada)
- **Confiável** (gestor público desconfia de "moderninho demais")
- **Funcional** (UX prevalece sobre estética decorativa)

### O que a marca NÃO é
- ❌ Startup "moderninha" com gradientes neon
- ❌ Marketing milagreiro ("aumente 300% suas metas!")
- ❌ Linguagem corporativa vazia
- ❌ Site "fofinho" com ilustrações cartoon
- ❌ Hacker/tech showoff
- ❌ Chapa-branca governamental sem alma

### Ecossistema (posicionamento entre os produtos do grupo)

```
CI Digital Solutions (holding)
├── Brasil Treinamentos (B2C — aluno final)
├── Online Curso (B2B — empreendedor)
└── Indicadores Saúde (B2G — gestor público) ← ESTE
```

**Diferencial visual do Indicadores Saúde:** é o produto **mais técnico e institucional** do ecossistema. Design deve ser visivelmente mais "ferramenta profissional" e menos "marketing/conversão" que os outros 2 produtos.

---

## 2. LOGOTIPO

### Símbolo
Monograma "ID" (Indicadores Digital) dentro de um quadrado arredondado azul, com 4 pontos coloridos verticais à direita representando as 4 categorias de performance dos indicadores Previne Brasil (Ótimo, Bom, Suficiente, Regular).

### Composição
- **Container:** quadrado azul `#1212B6` com cantos arredondados (radius 12)
- **Letra I:** barra vertical verde `#38BA38` à esquerda
- **Letra D:** curva branca `#FFFFFF` ao centro
- **4 pontos verticais:** azul, verde, amarelo, laranja (do topo à base, à direita do D)

### Significado conceitual
- **ID** = "Identidade" + "Indicadores Digital"
- **Pontos coloridos** = sistema de classificação Previne Brasil
- **Hierarquia visual** = produto + sua função na mesma marca

### Variações de uso
- **Logo principal:** símbolo + "Indicadores Saúde" + "Digital Solutions"
- **Logo símbolo:** apenas o quadrado com ID + pontos
- **Logo horizontal:** símbolo + nome ao lado direito
- **Logo vertical:** símbolo em cima, nome embaixo
- **Favicon:** apenas o ID dentro do quadrado (sem pontos, otimizado para 16-32px)
- **Monocromática:** versão preta (1 cor) e branca (1 cor)
- **Fundo escuro:** azul mais claro `#3B45D9`

### Regras
- ✅ Sempre manter as proporções originais
- ✅ Usar fundo claro ou neutro nas versões coloridas
- ✅ Manter margem de respiro (1/4 da largura da logo em todos os lados)
- ❌ NUNCA distorcer proporções
- ❌ NUNCA aplicar sombras, gradientes, efeitos 3D
- ❌ NUNCA alterar as cores oficiais
- ❌ NUNCA usar a logo colorida em fundos com baixo contraste
- ❌ NUNCA reduzir abaixo de 32px (use favicon nesse caso)

---

## 3. PALETA DE CORES

### Cor da marca (identidade)

| Token | HEX | Uso |
|-------|-----|-----|
| `--color-brand` | `#1212B6` | Logo, headers institucionais, identidade da marca |
| `--color-brand-dark` | `#0E0E91` | Hover sobre fundo claro |
| `--color-brand-light` | `#3B45D9` | Logo em fundos escuros, tons claros do azul |

### Cor de ação UI (botões, links, hover)

| Token | HEX | Uso |
|-------|-----|-----|
| `--color-action` | `#4338CA` | **CTA principal**, botões secundários, links |
| `--color-action-hover` | `#3730A3` | Hover de botões e links |
| `--color-action-light` | `#EDE9FE` | Background de hover, badges informativas |
| `--color-action-text` | `#312E81` | Texto sobre fundo `--color-action-light` |

### Cores semânticas Previne Brasil (RESERVADAS para indicadores)

> ⚠️ Essas 4 cores **só podem ser usadas em componentes de dados** (cards de indicadores, gráficos, tabelas, badges de classificação). Nunca em botões, links ou UI genérica.

| Token | HEX | Significado | Uso |
|-------|-----|-------------|-----|
| `--color-perf-otimo` | `#1212B6` | Ótimo | Indicador atingiu nível máximo |
| `--color-perf-bom` | `#38BA38` | Bom | Indicador atingiu nível bom |
| `--color-perf-suficiente` | `#D5BA0A` | Suficiente | Indicador atingiu nível mínimo aceitável |
| `--color-perf-regular` | `#C46500` | Regular | Indicador abaixo do mínimo |

### Cores semânticas de sistema (UI feedback)

| Token | HEX | Uso |
|-------|-----|-----|
| `--color-success` | `#38BA38` | Confirmações, sucesso ("Salvo!", "Login OK") |
| `--color-success-bg` | `#F0FDF4` | Background de toasts/alerts de sucesso |
| `--color-warning` | `#D5BA0A` | Avisos não-críticos |
| `--color-warning-bg` | `#FEFCE8` | Background de alerts de aviso |
| `--color-danger` | `#C46500` | Erros, ações destrutivas, alertas críticos |
| `--color-danger-bg` | `#FEF3F2` | Background de toasts/alerts de erro |
| `--color-info` | `#4338CA` | Informações, dicas, links |
| `--color-info-bg` | `#EDE9FE` | Background de toasts/alerts informativos |

### Neutros (slate moderno)

| Token | HEX | Uso |
|-------|-----|-----|
| `--color-slate-50` | `#F8FAFC` | Fundo de seções alternadas |
| `--color-slate-100` | `#F1F5F9` | Fundo de cards suaves, hover de listas |
| `--color-slate-200` | `#E2E8F0` | Bordas padrão, divisores |
| `--color-slate-300` | `#CBD5E1` | Bordas em hover |
| `--color-slate-400` | `#94A3B8` | Textos desabilitados, placeholders |
| `--color-slate-500` | `#64748B` | Textos secundários |
| `--color-slate-600` | `#475569` | Textos de apoio |
| `--color-slate-700` | `#334155` | Textos principais |
| `--color-slate-800` | `#1E293B` | Textos enfáticos |
| `--color-slate-900` | `#0F172A` | Títulos, preto principal |

### Regras de aplicação

**Hierarquia visual de cores:**
1. **Fundo padrão:** branco (`#FFFFFF`) — maioria do site
2. **Seções alternadas:** `--color-slate-50` ou `--color-slate-100` para criar ritmo
3. **Header:** branco com border-bottom slate-200, OU azul `#1212B6` em páginas específicas
4. **Hero principal:** branco com texto preto + CTAs azul + roxo
5. **CTA principal ("Solicitar demo"):** `--color-brand` (azul) com texto branco
6. **CTA secundário ("Ver casos"):** `--color-action` (roxo) com texto branco OU outline com borda roxa
7. **Links inline:** `--color-action` (roxo) com underline em hover

**Quando usar cada cor de ação:**
- **Azul `#1212B6`:** ação principal/conversão (1 por seção no máximo)
- **Roxo `#4338CA`:** ações secundárias, links, navegação interativa
- **Verde `#38BA38`:** apenas confirmação ou métrica positiva

---

## 4. TIPOGRAFIA

### Fonte oficial: Inter

Importação:

```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

--font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
```

### Por que Inter?
Inter é a fonte mais usada em SaaS sério globalmente (GitHub, Figma, Stripe, OpenAI). Tem:
- Excelente legibilidade em números (crítico para um produto de indicadores)
- Funciona em textos longos (relatórios, descrições técnicas)
- Aparência institucional sem ser datada
- Versão variable font para performance otimizada
- Gratuita (Google Fonts, OFL)

### Hierarquia tipográfica

| Nível | Weight | Size desktop | Size mobile | Line-height | Letter-spacing |
|-------|--------|--------------|-------------|-------------|----------------|
| H1 hero | 800 | 48–56px | 32–40px | 1.1 | -1px |
| H1 página | 800 | 36px | 28px | 1.15 | -0.75px |
| H2 seção | 700 | 28px | 24px | 1.2 | -0.5px |
| H3 card | 600 | 18px | 17px | 1.4 | -0.25px |
| H4 subtítulo | 600 | 15px | 14px | 1.5 | 0 |
| Eyebrow | 600 | 11px | 11px | 1 | 1.5px (uppercase) |
| Body grande | 400 | 17px | 16px | 1.65 | 0 |
| Body padrão | 400 | 15px | 14px | 1.6 | 0 |
| Body pequeno | 400 | 13px | 12px | 1.5 | 0 |
| Label | 500 | 13px | 12px | 1 | 0 |
| Botão | 600 | 14px | 13px | 1 | 0 |
| Valor numérico | 800 | 36–48px | 28–32px | 1 | -1px |

### Pesos disponíveis
- 400 (Regular) — corpo de texto
- 500 (Medium) — labels, links
- 600 (SemiBold) — botões, eyebrows, subtítulos
- 700 (Bold) — H2 e H3 importantes
- 800 (ExtraBold) — H1 e valores numéricos grandes

### Regras
- ✅ Inter para tudo (uma fonte só, sem fonte secundária)
- ✅ `font-display: swap` sempre
- ✅ Letter-spacing negativo em títulos grandes (40px+)
- ✅ Números tabulares (`font-variant-numeric: tabular-nums`) em valores em tabelas
- ❌ NUNCA usar serifas
- ❌ NUNCA usar weights acima de 800
- ❌ NUNCA misturar com outra fonte sans-serif

---

## 5. ESPAÇAMENTO

### Sistema base: múltiplos de 4

| Token | Valor | Uso |
|-------|-------|-----|
| `--space-1` | 4px | Gaps mínimos |
| `--space-2` | 8px | Gaps pequenos |
| `--space-3` | 12px | Padding interno de badges |
| `--space-4` | 16px | Gaps padrão entre itens |
| `--space-5` | 20px | Padding interno de cards pequenos |
| `--space-6` | 24px | Padding interno de cards padrão |
| `--space-8` | 32px | Gaps entre componentes |
| `--space-10` | 40px | Padding interno de cards grandes |
| `--space-12` | 48px | Gaps entre seções pequenas |
| `--space-16` | 64px | Padding vertical de seções |
| `--space-20` | 80px | Padding vertical de seções grandes |
| `--space-24` | 96px | Padding vertical de hero |

### Containers

| Tipo | max-width | Uso |
|------|-----------|-----|
| `--container-sm` | 640px | Formulários, texto longo |
| `--container-md` | 820px | Conteúdo de artigo |
| `--container-lg` | 1140px | Padrão de seção |
| `--container-xl` | 1280px | Hero, grids grandes |

### Breakpoints

| Nome | Valor | Uso |
|------|-------|-----|
| `--bp-sm` | 640px | Celular grande |
| `--bp-md` | 768px | Tablet |
| `--bp-lg` | 1024px | Desktop pequeno |
| `--bp-xl` | 1280px | Desktop padrão |

---

## 6. CANTOS E SOMBRAS

### Border radius

| Token | Valor | Uso |
|-------|-------|-----|
| `--radius-sm` | 6px | Badges pequenas |
| `--radius-md` | 8px | Botões, inputs |
| `--radius-lg` | 10px | Cards padrão, modais |
| `--radius-xl` | 16px | Seções destacadas |
| `--radius-full` | 9999px | Pills, avatares |

### Sombras (sutis, institucional)

```css
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-md: 0 2px 8px rgba(15, 23, 42, 0.05);
--shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08);
--shadow-xl: 0 16px 40px rgba(15, 23, 42, 0.12);
--shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04);
--shadow-card-hover: 0 4px 12px rgba(15, 23, 42, 0.08);
```

### Regras
- ✅ Sombras sutis e institucionais (não exageradas)
- ✅ Shadow-card como padrão para cards
- ❌ NUNCA sombras coloridas neon
- ❌ NUNCA gradientes em sombra
- ❌ NUNCA glow effects

---

## 7. COMPONENTES

### Botões

#### Primário (CTA principal — Azul)

```css
background: #1212B6;
color: white;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 14px;
padding: 12px 22px;
border-radius: 8px;
transition: all 200ms ease;
```

Hover: `background: #0E0E91`, `transform: translateY(-1px)`, `box-shadow: var(--shadow-md)`

#### Secundário (Ação — Roxo)

```css
background: #4338CA;
color: white;
/* resto igual ao primário */
```

Hover: `background: #3730A3`

#### Terciário (Outline Roxo)

```css
background: white;
color: #4338CA;
border: 1.5px solid #4338CA;
padding: 11px 21px;
```

Hover: `background: #EDE9FE`

#### Link (sem borda)

```css
background: transparent;
color: #4338CA;
font-weight: 500;
font-size: 14px;
text-decoration: none;
```

Hover: `text-decoration: underline`, `color: #3730A3`

### Cards

#### Card padrão

```css
background: white;
border: 1px solid #E2E8F0;
border-radius: 10px;
padding: 24px;
box-shadow: var(--shadow-card);
transition: all 200ms ease;
```

Hover: `transform: translateY(-2px)`, `box-shadow: var(--shadow-card-hover)`, `border-color: #CBD5E1`

#### Card de indicador (com classificação Previne)

Estrutura obrigatória:
1. Header com nome do indicador (eyebrow + título)
2. Badge de classificação (Ótimo/Bom/Suficiente/Regular) com a cor semântica correspondente
3. Valor principal grande (Inter 800, 36px)
4. Tendência (subiu/desceu vs período anterior) com cor semântica
5. CTA "Ver detalhes" em roxo

#### Card destacado

Mesmo do padrão, mas com `border: 2px solid #1212B6` ou `border-left: 4px solid #4338CA`.

### Badges

#### Informativa (roxa)

```css
background: #EDE9FE;
color: #312E81;
font-weight: 600;
font-size: 11px;
padding: 4px 10px;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
```

#### Sucesso (verde)

`background: #F0FDF4; color: #166534;`

#### Aviso (amarelo)

`background: #FEFCE8; color: #854D0E;`

#### Crítico (laranja/vermelho)

`background: #FEF3F2; color: #9A3412;`

#### Performance Previne (4 variações)

```css
.badge-perf-otimo { background: #1212B6; color: white; }
.badge-perf-bom { background: #38BA38; color: white; }
.badge-perf-suficiente { background: #D5BA0A; color: white; }
.badge-perf-regular { background: #C46500; color: white; }
```

### Inputs

```css
background: white;
border: 1.5px solid #E2E8F0;
border-radius: 8px;
padding: 10px 14px;
font-family: 'Inter';
font-size: 15px;
color: #0F172A;
transition: border-color 200ms;
```

Focus: `border-color: #4338CA` + `box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.1)`
Placeholder: `color: #94A3B8`

### Hero

Estrutura preferida (institucional, sem exageros):

- Fundo: branco ou gradiente suave de slate-50 → branco
- Padding vertical: 80–96px desktop / 48–64px mobile
- Eyebrow com pílula leve (background `#EDE9FE`, texto `#4338CA`)
- H1: cor `#0F172A`, weight 800
- Subtítulo: cor `#475569`, weight 400, tamanho 17px
- 2 CTAs: Azul (primário) + Roxo (secundário)
- Mockup do produto/screenshot abaixo (opcional)

---

## 8. ÍCONES E IMAGENS

### Biblioteca de ícones
**Lucide Icons** (https://lucide.dev) — gratuito, moderno, consistente com Inter

Tamanhos consistentes: 14px · 16px · 20px · 24px

### Estilo de imagens

Este produto precisa de **muito screenshot real do produto** (mais que stock images):

- Painel de indicadores
- Drill-down de uma equipe
- Relatórios em PDF
- Mapa territorial
- Gráficos de evolução

### Regras
- **Aspect-ratio preferido:** 16:10 ou 16:9
- **Borda:** `1px solid #E2E8F0` + `border-radius: 10px`
- **Sombra opcional:** `var(--shadow-lg)` para destacar
- **Formato:** WebP com fallback PNG
- ✅ Screenshots **REAIS** do produto
- ✅ Capturas tratadas (escurecer se necessário pra contraste)
- ❌ NUNCA stock images "corporate"
- ❌ NUNCA mockups genéricos de laptop vazio

### Imagens de pessoas
Para depoimentos e cases:
- Foto real do gestor/secretário (sempre real, nunca stock)
- Crop quadrado, 60-80px de diâmetro
- `border-radius: 50%`
- Se não tiver foto: iniciais em círculo azul (`background: #1212B6; color: white`)

---

## 9. ANIMAÇÕES

### Tokens

```css
--transition-fast: 150ms ease;
--transition-base: 200ms ease;
--transition-slow: 300ms ease;
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
```

### Regras
- **Padrão:** 200ms ease (hovers, transitions de cor)
- **Rápido:** 150ms (focus states, active)
- **Lento:** 300ms (modais, drawers)
- **Reduced motion:** sempre respeitar `prefers-reduced-motion: reduce`

### O que animar
- ✅ Hover de botões (background + transform leve)
- ✅ Hover de cards (translateY -2px + sombra)
- ✅ Focus de inputs (border + ring)
- ✅ Reveal de seções ao scroll (fade-in suave, 300ms)
- ✅ Contadores numéricos animados (de 0 ao valor real, 1s)

### O que NÃO animar
- ❌ Parallax exagerado
- ❌ Texto digitando sozinho
- ❌ Ícones girando infinitamente
- ❌ Animações que distraem o gestor público (perfil sério, não tolera "show")

---

## 10. REFERÊNCIAS VISUAIS

### Inspirações principais (B2G/B2B sério)

**Linear** (https://linear.app)
- Como referência: tipografia limpa, hierarquia clara, dashboards
- Copiar: como apresentam dados, cards, tabelas

**Stripe Dashboard** (https://dashboard.stripe.com)
- Como referência: produto sério com dados em destaque
- Copiar: cards de métrica, formulários, navegação

**GitHub** (https://github.com)
- Como referência: produto técnico, dark/light, tipografia Inter
- Copiar: estrutura de tabelas, ações secundárias, contadores

**Vercel** (https://vercel.com)
- Como referência: SaaS premium, fundo branco, tipografia limpa
- Copiar: hero institucional, cards de feature

**Brasil.gov.br Design System** (https://www.gov.br/ds)
- Como referência: padrões brasileiros do governo
- Copiar: padrões de acessibilidade, hierarquia institucional

### Anti-referências (NUNCA imitar)
- ❌ Hotmart/Kajabi (marketing infoproduto)
- ❌ Sites com gradientes neon ou efeitos 3D
- ❌ Plataformas hospitalares antigas (cara de Moodle)
- ❌ Sites govermamentais "chapa-branca" sem alma
- ❌ Sites tech "hacker" (preto + verde matrix)
- ❌ Landing pages quebradas de copy-paste

### Adjetivos da marca
- Profissional · Sério · Confiável · Técnico · Preciso · Funcional · Brasileiro · Acessível · Útil

### Adjetivos que NÃO cabem
- Divertido · Disruptivo · Revolucionário · Brincalhão · Trendy · Moderninho · Hype · Show-off

### Posicionamento entre os produtos do grupo

| Aspecto | Indicadores Saúde | Online Curso | Brasil Treinamentos |
|---------|-------------------|--------------|---------------------|
| Cor principal | Azul `#1212B6` | Roxo `#4338CA` | Azul marinho `#002776` |
| Fonte | Inter | Geist | Plus Jakarta Sans |
| Tom | Técnico, institucional | Premium, empreendedor | Popular, motivador |
| Layout | Dashboard, organizado | Sofisticado, conversão | Generoso, colorido |
| Público | Gestor público B2G | Empreendedor B2B | Aluno final B2C |

---

## 11. CSS CUSTOM PROPERTIES (tokens prontos)

Cole em `:root` para ter todos os tokens disponíveis:

```css
:root {
  /* Marca */
  --color-brand: #1212B6;
  --color-brand-dark: #0E0E91;
  --color-brand-light: #3B45D9;

  /* Ação UI */
  --color-action: #4338CA;
  --color-action-hover: #3730A3;
  --color-action-light: #EDE9FE;
  --color-action-text: #312E81;

  /* Performance Previne (RESERVADAS) */
  --color-perf-otimo: #1212B6;
  --color-perf-bom: #38BA38;
  --color-perf-suficiente: #D5BA0A;
  --color-perf-regular: #C46500;

  /* Sistema */
  --color-success: #38BA38;
  --color-success-bg: #F0FDF4;
  --color-warning: #D5BA0A;
  --color-warning-bg: #FEFCE8;
  --color-danger: #C46500;
  --color-danger-bg: #FEF3F2;
  --color-info: #4338CA;
  --color-info-bg: #EDE9FE;

  /* Neutros */
  --color-slate-50: #F8FAFC;
  --color-slate-100: #F1F5F9;
  --color-slate-200: #E2E8F0;
  --color-slate-300: #CBD5E1;
  --color-slate-400: #94A3B8;
  --color-slate-500: #64748B;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1E293B;
  --color-slate-900: #0F172A;

  /* Tipografia */
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Espaçamento */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Containers */
  --container-sm: 640px;
  --container-md: 820px;
  --container-lg: 1140px;
  --container-xl: 1280px;

  /* Cantos */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 16px 40px rgba(15, 23, 42, 0.12);
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-card-hover: 0 4px 12px rgba(15, 23, 42, 0.08);

  /* Transições */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* Estilo base */
body {
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-slate-900);
  background: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tabular numbers em tabelas */
table, .indicator-value {
  font-variant-numeric: tabular-nums;
}
```

---

## 12. CONTEÚDO ESSENCIAL DO SITE

Seções obrigatórias do `indicadores.online` (ordem recomendada):

1. **Hero** com título institucional + KPIs + CTA principal (Solicitar demonstração) + secundário (Ver casos)
2. **Problema/Dor** (3-4 cards: "Você ainda usa planilhas?", "Não consegue ver dados em tempo real?")
3. **Como funciona** (3 passos: Conectar e-SUS → Visualizar indicadores → Atingir metas)
4. **Funcionalidades** (grid de 6 features com ícones e descrição: indicadores em tempo real, drill-down por equipe, relatórios PDF, mapa territorial, alerta de meta, comparação histórica)
5. **Preview do produto** (screenshots reais do dashboard, cards de indicador, telas mobile)
6. **Indicadores monitorados** (lista dos 7 indicadores Previne Brasil que a plataforma monitora)
7. **Caso de sucesso** (Taiobeiras como case principal, com números concretos)
8. **Depoimentos** (gestores reais que usam o produto)
9. **Compatibilidade técnica** (e-SUS APS, GraphQL, integrações)
10. **Lei 14.133/2021** (explicação clara da modalidade de contratação por dispensa de licitação, Art. 75 II)
11. **CNDs e documentação fiscal** (lista pronta de certidões da empresa, seriedade fiscal)
12. **FAQ** específica de gestor público (6-10 perguntas: como funciona a contratação, em quanto tempo está funcionando, dados ficam onde, e-SUS atualiza quando, etc.)
13. **CTA final** + WhatsApp profissional + e-mail de contato
14. **Footer** completo com: razão social, CNPJ, endereço, links de outros produtos do grupo (CI Digital Solutions / Online Curso / Brasil Treinamentos)

---

## 13. CHECKLIST DE IMPLEMENTAÇÃO

Antes de considerar qualquer página pronta, verifique:

- [ ] Logo Indicadores Saúde (símbolo + texto) visível no header
- [ ] Inter carregada via Google Fonts com `display=swap`
- [ ] Todas as cores usando CSS custom properties
- [ ] Espaçamento seguindo múltiplos de 4
- [ ] CTA principal Azul `#1212B6` visível acima da dobra
- [ ] CTA secundário Roxo `#4338CA` como alternativa
- [ ] Cores Previne (4) usadas APENAS em componentes de indicadores
- [ ] Verde `#38BA38` usado APENAS em sucesso/positivo
- [ ] Sem stock images "corporate"
- [ ] Screenshots reais do produto presentes
- [ ] Mobile funciona em 375px
- [ ] Contraste AAA em textos importantes (4.5:1 mínimo)
- [ ] Imagens com `loading="lazy"` abaixo da dobra
- [ ] Reveal animations sutis (não chocantes)
- [ ] CNDs e Lei 14.133/2021 visíveis na página
- [ ] Caso Taiobeiras com números concretos
- [ ] WhatsApp e e-mail visíveis em pelo menos 2 lugares
- [ ] Razão social completa no footer
- [ ] Focus states visíveis em todos os elementos interativos
- [ ] Tabular nums em valores numéricos
- [ ] Performance: Lighthouse 90+

---

## 14. COMPONENTES AVANÇADOS

> Componentes específicos para dashboards e produtos B2G de gestão de dados.
> Esta seção complementa a seção 7 (Componentes básicos).

### Tabelas de dados

#### Tabela padrão (listagem de equipes, agentes, indicadores)

```css
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}

th {
  background: #F8FAFC;
  color: #475569;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #E2E8F0;
  position: sticky;
  top: 0;
}

td {
  padding: 14px 16px;
  border-bottom: 1px solid #F1F5F9;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
}

tr:hover td {
  background: #F8FAFC;
}
```

Regras:
- ✅ Header fixo (sticky) em tabelas longas
- ✅ Hover de linha sutil (slate-50)
- ✅ Números sempre tabulares (`tabular-nums`)
- ✅ Zebra opcional (alternar `#FFFFFF` e `#F8FAFC`)
- ✅ Coluna de classificação Previne com badge colorida
- ❌ NUNCA bordas laterais nas células (só horizontais)
- ❌ NUNCA cores fortes em headers de tabela

#### Tabela de performance (com ranking semântico)

Estrutura:
- Coluna 1: Nome (equipe/agente/microárea)
- Coluna 2-N: Indicadores com badge colorida Previne
- Coluna final: Ação ("Ver detalhes")

Cada cédula com indicador deve ter:
1. Valor numérico (tabular-nums)
2. Pequena badge colorida ao lado mostrando a classificação

### Gráficos

#### Gráfico de barras (cobertura por equipe)

Cores aplicadas conforme classificação Previne:
- Barra com `--color-perf-otimo` (#1212B6) se atingiu nível Ótimo
- Barra com `--color-perf-bom` (#38BA38) se atingiu nível Bom
- Barra com `--color-perf-suficiente` (#D5BA0A) se Suficiente
- Barra com `--color-perf-regular` (#C46500) se Regular

Linha de meta: `stroke: #475569`, `stroke-dasharray: 4 4`

#### Gráfico de linhas (evolução temporal)

- Linha principal: `--color-action` (#4338CA), espessura 2.5px
- Pontos: círculos brancos com borda da cor da linha (4px de borda)
- Grid: `#F1F5F9`, espessura 1px
- Eixos: `#94A3B8`
- Labels: Inter 11px, `#64748B`

#### Gráfico de pizza/donut

- Mantém as cores Previne quando representando classificações
- Donut com furo central de 60% para mostrar valor total
- Labels externos em Inter 13px

### Modais e drawers

#### Modal padrão

```css
.modal-backdrop {
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
}

.modal-content {
  background: white;
  border-radius: 16px;
  padding: 32px;
  max-width: 560px;
  box-shadow: var(--shadow-xl);
}

.modal-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 8px;
}

.modal-close {
  /* botão X no canto superior direito */
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  color: #64748B;
}

.modal-close:hover {
  background: #F1F5F9;
  color: #0F172A;
}
```

#### Drawer lateral (filtros, configurações)

- Largura: 380px desktop / 100% mobile
- Slide da direita com `transform: translateX(100%)` → `0`
- Transição: 300ms ease-out
- Backdrop: `rgba(15, 23, 42, 0.4)` com blur

### Navegação

#### Header do produto (dashboard interno)

Estrutura:
1. Logo símbolo (esquerda) + nome do produto
2. Navegação central: Dashboard / Indicadores / Equipes / Relatórios
3. Lado direito: notificações + avatar do usuário + dropdown

```css
header {
  background: white;
  border-bottom: 1px solid #E2E8F0;
  padding: 12px 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.nav-item {
  font-family: 'Inter';
  font-weight: 500;
  font-size: 14px;
  color: #475569;
  padding: 8px 14px;
  border-radius: 8px;
  transition: all 200ms ease;
}

.nav-item:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.nav-item.active {
  background: #EDE9FE;
  color: #4338CA;
  font-weight: 600;
}
```

#### Sidebar (alternativa ao header em produtos densos)

- Largura: 240px desktop / collapse 64px mobile
- Background: `white` com `border-right: 1px solid #E2E8F0`
- Items com ícone Lucide (16px) + label
- Item ativo: `background: #EDE9FE`, `color: #4338CA`

#### Breadcrumb

```css
.breadcrumb {
  font-size: 13px;
  color: #64748B;
  display: flex;
  gap: 8px;
  align-items: center;
}

.breadcrumb a {
  color: #4338CA;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb-separator {
  color: #CBD5E1;
}
```

### Alertas e notificações

#### Toast notification

```css
.toast {
  background: white;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: var(--shadow-lg);
  border-left: 4px solid;
  display: flex;
  align-items: start;
  gap: 12px;
  max-width: 420px;
}

.toast.success { border-left-color: #38BA38; background: #F0FDF4; }
.toast.warning { border-left-color: #D5BA0A; background: #FEFCE8; }
.toast.error   { border-left-color: #C46500; background: #FEF3F2; }
.toast.info    { border-left-color: #4338CA; background: #EDE9FE; }
```

Estrutura interna:
- Ícone (Lucide CheckCircle/AlertTriangle/etc) à esquerda
- Título em weight 600, 13px
- Mensagem em weight 400, 12px, slate-600
- Botão fechar (X) opcional à direita

#### Alert inline (dentro de páginas)

```css
.alert {
  border-radius: 10px;
  padding: 16px 20px;
  border: 1px solid;
  display: flex;
  gap: 12px;
}

.alert.info {
  background: #EDE9FE;
  border-color: #C7D2FE;
  color: #312E81;
}

.alert.warning {
  background: #FEFCE8;
  border-color: #FDE68A;
  color: #854D0E;
}

.alert.danger {
  background: #FEF3F2;
  border-color: #FECACA;
  color: #991B1B;
}
```

### Filtros e seletores

#### Filtro dropdown

```css
.filter-dropdown {
  background: white;
  border: 1.5px solid #E2E8F0;
  border-radius: 8px;
  padding: 8px 12px;
  font-family: 'Inter';
  font-size: 14px;
  color: #0F172A;
  cursor: pointer;
}

.filter-dropdown:hover {
  border-color: #CBD5E1;
}

.filter-dropdown.active {
  border-color: #4338CA;
  background: #EDE9FE;
  color: #312E81;
}
```

#### Filtro pill (toggle)

Usado para alternar visualizações (mensal/trimestral/anual):

```css
.filter-pills {
  display: inline-flex;
  background: #F1F5F9;
  border-radius: 8px;
  padding: 4px;
}

.filter-pill {
  padding: 6px 14px;
  border-radius: 6px;
  font-family: 'Inter';
  font-weight: 500;
  font-size: 13px;
  color: #64748B;
  cursor: pointer;
  transition: all 150ms ease;
}

.filter-pill.active {
  background: white;
  color: #0F172A;
  box-shadow: var(--shadow-sm);
}
```

### Estados vazios (empty states)

Para quando não há dados (busca sem resultado, equipe sem agentes, etc):

```css
.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: #F8FAFC;
  border-radius: 12px;
  border: 2px dashed #E2E8F0;
}

.empty-state-icon {
  width: 48px;
  height: 48px;
  color: #CBD5E1;
  margin-bottom: 16px;
}

.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 4px;
}

.empty-state-message {
  font-size: 13px;
  color: #94A3B8;
}
```

### Loading states

#### Skeleton loader (para cards e tabelas)

```css
.skeleton {
  background: linear-gradient(90deg, #F1F5F9 0%, #E2E8F0 50%, #F1F5F9 100%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 6px;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
```

#### Spinner

- Pequeno (16px) para botões
- Médio (24px) para cards
- Grande (40px) para páginas inteiras
- Cor: `--color-action` (#4338CA)
- Animação: 1s linear infinite

### Tooltips

```css
.tooltip {
  background: #0F172A;
  color: white;
  font-size: 12px;
  font-family: 'Inter';
  padding: 6px 10px;
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  max-width: 240px;
  line-height: 1.4;
}

.tooltip-arrow {
  width: 8px;
  height: 8px;
  background: #0F172A;
  transform: rotate(45deg);
}
```

### Pagination

```css
.pagination {
  display: flex;
  gap: 4px;
  align-items: center;
}

.page-button {
  min-width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  background: white;
  color: #475569;
  font-family: 'Inter';
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
}

.page-button:hover {
  border-color: #4338CA;
  color: #4338CA;
}

.page-button.active {
  background: #4338CA;
  border-color: #4338CA;
  color: white;
}
```

### Tabs

```css
.tabs {
  display: flex;
  border-bottom: 1px solid #E2E8F0;
  gap: 4px;
}

.tab {
  padding: 12px 16px;
  font-family: 'Inter';
  font-weight: 500;
  font-size: 14px;
  color: #64748B;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 200ms ease;
}

.tab:hover {
  color: #0F172A;
}

.tab.active {
  color: #4338CA;
  border-bottom-color: #4338CA;
  font-weight: 600;
}
```

---

## 15. HISTÓRICO

| Data | Versão | Mudanças |
|------|--------|----------|
| abril/2026 | 1.0 | Versão inicial do design system Indicadores Saúde |
| abril/2026 | 1.1 | Adicionado Quick Reference, Site de Referência (https://indicadores.online/), seção 15 com componentes avançados (tabelas, gráficos, modais, navegação, alertas, filtros, loading states, tooltips, pagination, tabs) |