# Indicadores Saúde — Design System
> Sistema de design oficial do produto **Indicadores Saúde** (indicadores.online),
> uma plataforma B2G de monitoramento dos indicadores Previne Brasil para gestores
> municipais de saúde.
## Sources used to build this system
- `uploads/DESIGN-indicadores-online-v1.1.md` — design doc oficial v1.1 (abril/2026), copiado para `reference/DESIGN-original.md`.
- `uploads/indicadores-saude-logo.svg` — símbolo principal da marca, copiado para `assets/logo-symbol.svg`.
- **Site de produção:** https://indicadores.online/ — referência viva do produto. Não acessei diretamente (sem fetch de URL); todas as decisões visuais saíram do design doc.
- **Tipografia:** Inter (variable font) servida localmente de `fonts/Inter-VariableFont_opsz_wght.ttf` via `@font-face` em `colors_and_type.css`. Variable font cobre todos os pesos 100–900 num único arquivo.
---
## Sobre o produto
**Indicadores Saúde** é uma plataforma B2G (governo) que monitora em tempo real
os 7 indicadores Previne Brasil da Atenção Primária à Saúde, alimentada por
dados do e-SUS APS. O cliente é a Secretaria Municipal de Saúde; o usuário é o
gestor público (secretário, coordenador APS, técnico de vigilância, equipes de
digitação SUS).
**Modelo:** contrato por dispensa de licitação (Lei 14.133/2021, Art. 75 II).
**Fornecedor:** Curso Interativo Digital Solutions Ltda (CNPJ 49.300.441/0001-06).
### Posicionamento dentro do grupo
```
CI Digital Solutions (holding)
├── Brasil Treinamentos — B2C — aluno final
├── Online Curso — B2B — empreendedor
└── Indicadores Saúde — B2G — gestor público ← ESTE
```
O Indicadores Saúde é o produto **mais técnico e institucional** do grupo. O
design precisa parecer "ferramenta profissional", não startup — gestor público
desconfia de moderninho demais.
### Personalidade
**Institucional, sério, técnico-confiável.** B2G. Cara de produto que respeita a
complexidade do gestor público brasileiro: clean, organizado, denso quando
precisa ser, sem efeitos chamativos.
**Adjetivos da marca:** Profissional · Sério · Confiável · Técnico · Preciso · Funcional · Brasileiro · Acessível.
**O que NÃO somos:** Divertido · Disruptivo · Brincalhão · Trendy · Moderninho · Hype.
### Anti-referências (NUNCA imitar)
- Hotmart / Kajabi (marketing infoproduto)
- Sites com gradientes neon, glow, 3D
- Sistemas hospitalares antigos (cara de Moodle)
- Sites govermamentais "chapa-branca" sem alma
- Tech "hacker" preto + verde matrix
### Inspirações positivas
Linear · Stripe Dashboard · GitHub · Vercel · gov.br Design System.
---
## Index — manifest do design system
| Arquivo / pasta | O que tem |
|---|---|
| `README.md` | Este arquivo. Visão geral, fundamentos de conteúdo, fundamentos visuais, iconografia. |
| `colors_and_type.css` | Todos os tokens (cores, tipografia, espaçamento, raios, sombras, transições) + utilitários `.t-h1`, `.t-eyebrow`, etc. **Importe primeiro.** |
| [`SKILL.md`](SKILL.md) | Frontmatter + instruções para uso como Agent Skill. |
| `assets/` | Logos (SVG), favicon, variações on-dark e monocromáticas. |
| [`reference/DESIGN-original.md`](reference/DESIGN-original.md) | Design doc original v1.1 (fonte da verdade). |
| `preview/` | Cards HTML registrados na aba Design System (palette, type, components, etc). |
| [`ui_kits/site-publico/README.md`](ui_kits/site-publico/README.md) | UI kit do site institucional `indicadores.online` (hero, features, pricing, FAQ). |
| [`ui_kits/produto/README.md`](ui_kits/produto/README.md) | UI kit do produto interno (dashboard, cards de indicador, tabela de equipes, mapa CVAT). |
| [`uploads/DESIGN-indicadores-online-v1.1.md`](uploads/DESIGN-indicadores-online-v1.1.md) | Upload original usado para consolidar a v1.1 do design system. |
---
## CONTENT FUNDAMENTALS
### Idioma
**Português brasileiro.** Use terminologia oficial do SUS: APS (Atenção Primária à Saúde), e-SUS APS, Previne Brasil, eSF, eAP, ACS, microárea, CNES, CIDs, SIA/SIH, CNDs. Não traduzir — gestor público brasileiro espera os termos exatos.
### Tom de voz
**Técnico, sério, claro e confiável.** Direto ao ponto, mas humano. Respeita a complexidade do gestor público.
- ✅ "Acompanhe os 7 indicadores Previne Brasil em tempo real."
- ✅ "Contratação por dispensa de licitação (Lei 14.133/2021, Art. 75, II)."
- ✅ "Sua equipe digitou hoje? Veja a cobertura por microárea."
- ❌ "Aumente 300% suas metas com nossa solução revolucionária!"
- ❌ "Bora bater meta? 🚀"
- ❌ "Transforme a gestão da sua saúde pública."
### Casing
- **Títulos (H1/H2):** sentence case ("Indicadores Previne Brasil em tempo real"), nunca Title Case do inglês.
- **Botões:** sentence case ("Solicitar demonstração", "Ver detalhes", "Baixar relatório").
- **Eyebrows:** UPPERCASE com letter-spacing 1.5px ("PRODUTO", "PARA GESTORES MUNICIPAIS").
- **Badges Previne:** Capitalized ("Ótimo", "Bom", "Suficiente", "Regular").
- **Métricas:** sempre em pt-BR — "82,4%", "1.234 atendimentos", "R$ 12.450,00".
### Pessoa
**"Você" para o gestor.** Nunca "tu" nem "vocês". A plataforma fala em primeira pessoa do plural quando se posiciona ("Monitoramos os 7 indicadores Previne Brasil") e em segunda do singular para chamar à ação ("Veja sua cobertura agora").
### Emoji
**NÃO usar.** Nem em landing, nem em produto, nem em copy de erro. A única exceção: o design doc usa ⚡✅❌ como sinalização interna do próprio doc — isso não vai para a interface.
### Vibe
"Ferramenta profissional para quem entende do assunto." Como Stripe Dashboard ou Linear, mas com vocabulário SUS. Densidade informacional alta é OK — o usuário é técnico. Não simplifique demais.
### Exemplos de copy real
**Hero:**
> Monitoramento em tempo real dos indicadores Previne Brasil
> Acompanhe os 7 indicadores da APS, identifique oportunidades por equipe e bata as metas pactuadas com seu município.
> [Solicitar demonstração] [Ver casos de uso]
**Card de indicador (Ótimo):**
> COBERTURA VACINAL · Indicador 5
> 91,3% [↑ 4,2 pp vs trimestre anterior]
> Badge: "Ótimo"
> Ver detalhes →
**Empty state:**
> Sem dados para o filtro selecionado.
> Tente ampliar o período ou trocar a equipe.
**Erro:**
> Não foi possível conectar ao e-SUS. Tente novamente em instantes ou contate o suporte técnico.
---
## VISUAL FOUNDATIONS
### Paleta — uso em hierarquia
1. **Branco** (`#FFFFFF`) é o fundo base de quase tudo. Densidade alta, ar.
2. **Slate-50/100** para criar ritmo entre seções, hover de linha de tabela, headers de tabela.
3. **Azul de marca `#1212B6`** entra como CTA principal e identidade — máximo 1 por seção.
4. **Roxo de ação `#4338CA`** é o color da UI: links, botões secundários, navegação ativa, focus rings, gráficos de linha temporal.
5. **As 4 cores Previne** (`#1212B6`, `#38BA38`, `#D5BA0A`, `#C46500`) são **reservadas** — só aparecem em badges de classificação, células de tabela de performance, barras de gráfico, segmentos de donut. **NUNCA em CTAs ou navegação.**
6. Verde `#38BA38` fora do contexto Previne = só sucesso/positivo. Laranja `#C46500` fora do Previne = só erro/destrutivo.
### Tipografia
- **Inter exclusivamente.** Weights 400, 500, 600, 700, 800. Servida localmente como variable font (`fonts/Inter-VariableFont_opsz_wght.ttf`) via `@font-face` com `font-display: swap`.
- **Letter-spacing negativo** (-0.5 a -1px) em qualquer headline 28px+. Em corpo de texto, tracking zero.
- **`font-variant-numeric: tabular-nums`** obrigatório em tabelas, valores numéricos de KPI, eixos de gráfico, paginação.
- **Eyebrows** sempre uppercase, 11px, weight 600, tracking 1.5px, em roxo de ação.
- **Sem serifa, sem fonte secundária, sem display.** Uma fonte só.
### Espaçamento
- **Múltiplos de 4** sem exceções. 4-8-12-16-20-24-32-40-48-64-80-96.
- Padding de card padrão: 24px. Card grande: 40px.
- Gap entre seções de página: 64–96px desktop / 48–64px mobile.
- Containers: 1140px é o padrão de seção; 1280px só para hero / grid grande; 820px para artigos.
### Backgrounds & imagery
- Fundo de página = **branco**. Sem gradientes coloridos de fundo.
- **Hero**: branco ou gradiente sutilíssimo `slate-50 → branco` (vertical). Nunca gradiente colorido.
- **Sem padrões repetitivos, sem texturas, sem ilustrações cartoon.**
- Imagens são **screenshots reais do produto** com `border-radius: 10px` e `border: 1px solid slate-200`. Aspect-ratio 16:10 ou 16:9.
- Nada de stock corporate. Nada de mockup de laptop vazio. Se não tem screenshot, mostra placeholder marcado como tal.
- Foto de pessoa = real, crop quadrado 60–80px, círculo. Fallback = iniciais em círculo azul `#1212B6` com texto branco.
### Animação
- Tokens: 150ms (focus), 200ms (hover/transição padrão), 300ms (modais/drawers).
- Curvas: `cubic-bezier(0,0,0.2,1)` para `ease-out`; `cubic-bezier(0.4,0,0.2,1)` para `ease-in-out`.
- **O que animar:** hover de botão (background + `translateY(-1px)` leve), hover de card (`translateY(-2px)` + sombra), focus ring de input, reveal sutil ao scroll (fade 300ms), counter numérico de KPI (de 0 ao valor, ~1s).
- **O que NUNCA animar:** parallax exagerado, texto digitando, ícones girando infinitamente, bounces grandes, qualquer coisa "show-off". Gestor público não tolera.
- `prefers-reduced-motion` sempre respeitado.
### Hover & press states
- **Botão primário azul:** hover = `#0E0E91` + `translateY(-1px)` + `shadow-md`.
- **Botão de ação roxo:** hover = `#3730A3`.
- **Outline roxo:** hover = background `#EDE9FE`.
- **Link de texto:** hover = underline + cor `#3730A3`.
- **Card:** hover = `translateY(-2px)` + `shadow-card-hover` + borda passa de slate-200 para slate-300.
- **Item de nav:** hover = background `slate-100`, texto slate-900.
- **Item de nav ativo:** background `#EDE9FE` (action-light), texto `#4338CA`, weight 600.
- **Press/active:** sem shrink. No máximo um `translateY(0)` para "afundar" levemente.
### Borders
- **Padrão:** 1px sólido `slate-200` (`#E2E8F0`).
- **Inputs:** 1.5px sólido `slate-200`. Focus = 1.5px `#4338CA` + `box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.1)` (focus ring).
- **Card destacado:** 2px sólido `#1212B6`, OU `border-left: 4px solid #4338CA` no canto.
- **Divisor de tabela:** só horizontal (`border-bottom`), nunca vertical.
### Sombras
Sutis, monocromas slate-900 com alpha baixo. Nunca colorida, nunca neon, nunca glow.
| Token | Uso |
|---|---|
| `--shadow-sm` | header sticky, divisor leve |
| `--shadow-card` (default) | cards padrão |
| `--shadow-card-hover` | cards em hover |
| `--shadow-md` | botão primário em hover, dropdowns |
| `--shadow-lg` | toasts, popovers grandes |
| `--shadow-xl` | modais |
| `--shadow-focus-ring` | ring de foco de input |
### Capsules vs gradients de proteção
- Pílulas (`border-radius: 9999px`) usadas em: avatares, badges informativas, filter pills, status dots. Nunca em botões principais.
- Não usar gradientes de proteção em texto sobre imagem — preferir overlay sólido `rgba(15,23,42,0.4)` com `backdrop-filter: blur(4px)` apenas em modais.
### Layout
- **Grid de 12 colunas** com gap 24px desktop / 16px mobile.
- **Header sticky** em produto interno (top: 0, z-index: 100, shadow-sm).
- **Sidebar 240px** (collapse 64px) como alternativa ao header em produtos densos.
- **Tabela:** th sticky, padding 12px 16px, header em uppercase 12px slate-600, body 14px slate-900, hover de linha em slate-50, zebra opcional.
- **Mobile-first** mas com fidelidade desktop alta — gestor frequentemente usa em desktop, mas precisa funcionar em 375px.
### Transparência & blur
- **`backdrop-filter: blur(4px)`** apenas em backdrop de modal/drawer, sobre `rgba(15, 23, 42, 0.4)`.
- Não usar glassmorphism em cards, headers ou navegação. Header é sólido branco com `border-bottom`.
### Corner radii
| Token | Valor | Onde |
|---|---|---|
| `--radius-sm` | 6px | badges pequenas, status dots agrupadas |
| `--radius-md` | 8px | botões, inputs, filter pills |
| `--radius-lg` | 10px | **cards padrão**, imagens, toasts, alerts |
| `--radius-xl` | 16px | modais, seções destacadas |
| `--radius-full` | 9999px | avatares, pills de filtro |
### Cards — anatomia padrão
```
background: #FFFFFF
border: 1px solid #E2E8F0
border-radius: 10px
padding: 24px
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04)
hover: translateY(-2px), shadow up, border slate-300
```
### Imagery vibe
Screenshots reais e tratados, sem grão artificial, sem b&w, sem warmth artística — **neutros e nítidos**. A plataforma mostra dados; a imagem precisa ser legível.
---
## ICONOGRAPHY
### Biblioteca oficial
**Lucide Icons** — https://lucide.dev. Linha consistente, peso 1.5–2, cantos arredondados leves, mesma família visual do Inter. Já é o padrão do design doc.
**Como usar:**
- Via CDN: `` + `` + `lucide.createIcons()`.
- Ou copiando o SVG inline do site oficial.
- Cor: `currentColor`. O elemento pai define `color`.
- Stroke: `1.5` (padrão Lucide). Não alterar.
### Tamanhos consistentes
14 · 16 · 20 · 24px. Não usar valores fora desses.
| Tamanho | Uso |
|---|---|
| 14px | Inline em texto pequeno, breadcrumbs |
| 16px | **Padrão**: botões, sidebar, lista de items, badges |
| 20px | Cards, action buttons isolados |
| 24px | Empty states pequenos, headers de modal |
| 32–48px | Empty state grande (cor `slate-300`) |
### Status dots Previne (NÃO são ícones, são marcadores semânticos)
Círculo cheio 8–10px nas 4 cores Previne (`#1212B6`, `#38BA38`, `#D5BA0A`, `#C46500`). Aparece ao lado de valores em tabela de performance. Disponível como componente `` no UI kit do produto.
### SVGs no projeto
Em `assets/`:
- `logo-symbol.svg` — quadrado azul com ID + 4 pontos coloridos. **Original do upload.**
- `logo-horizontal.svg` — símbolo + texto "Indicadores Saúde / DIGITAL SOLUTIONS".
- `logo-on-dark.svg` — versão com fundo `#3B45D9` para fundos escuros.
- `logo-mono-dark.svg` — versão monocromática preta (para impressão / 1 cor).
- `favicon.svg` — só ID dentro do quadrado (sem pontos), otimizado 16–32px.
### PNGs / raster
Nenhum até agora. Quando o produto fornecer screenshots reais, devem ir em `assets/screenshots/` em WebP com fallback PNG.
### Emoji
**Não usar em interface ou copy.** O design doc usa ⚡✅❌ apenas como sinalização interna no markdown — fica no doc, não vai pra UI.
### Unicode chars como ícone
- Setas em breadcrumbs / "ver mais": **`→`** (U+2192) é aceito quando ícone Lucide seria excessivo.
- Indicador de tendência em KPI: **`↑`** / **`↓`** colorido (verde sucesso / laranja regular). Aceito porque o design doc usa essa convenção em métricas.
- Bullets, dividers, etc — não.
### Substituições flagged
- Inter via variable font local (`fonts/Inter-VariableFont_opsz_wght.ttf`) — fornecida pelo usuário, sem substituição.
- Lucide é a biblioteca oficial declarada no design doc; nada substituído.
---
## Como começar a usar
```html
Monitoramento em tempo real dos indicadores Previne Brasil
Acompanhe os 7 indicadores da APS por equipe.
```
Depois, importe componentes do UI kit relevante:
```jsx
// site institucional
import { Header } from './ui_kits/site-publico/Header.jsx';
// produto interno
import { IndicatorCard } from './ui_kits/produto/IndicatorCard.jsx';
```
---
## Caveats / pontos abertos
- Não tive acesso ao site `indicadores.online` em produção nem ao codebase real — todas as decisões saíram do design doc v1.1.
- Os screenshots reais do produto não foram fornecidos; UI kit usa recreações fiéis ao doc com placeholders sinalizados.
- Inter como variable font local (`fonts/Inter-VariableFont_opsz_wght.ttf`) — fornecida pelo usuário.
- Logo horizontal foi composto a partir do símbolo + tipo Inter — se houver versão oficial do designer, substitua `assets/logo-horizontal.svg`.