# Emerald Archive — Design System
Sistema de design do app de Votação IPCCG, documentado para **reúso em outros aplicativos**.
Tom sóbrio e institucional: claro (light mode), tipografia serifada para títulos, verde-floresta
e bronze como cores de marca.
> **Princípio central:** é um design system de **CSS puro com custom properties** — zero build,
> zero dependência de framework. Você copia um arquivo `.css`, referencia os tokens, e usa.
> Isso se alinha perfeitamente à filosofia **PET/TALL** (PHP de ciclo curto + HTML renderizado no
> servidor + JS leve), sem `npm run build`, sem bundler, sem Tailwind a compilar.
---
## Sumário
1. [Filosofia e stack](#1-filosofia-e-stack)
2. [Tokens de design](#2-tokens-de-design)
3. [Cores](#3-cores)
4. [Tipografia](#4-tipografia)
5. [Raios, sombras e espaçamento](#5-raios-sombras-e-espaçamento)
6. [Componentes](#6-componentes)
7. [Padrões de UX](#7-padrões-de-ux)
8. [Acessibilidade](#8-acessibilidade)
9. [Como reutilizar em outro app](#9-como-reutilizar-em-outro-app)
---
## 1. Filosofia e stack
O design system foi pensado para rodar em **hospedagem compartilhada (cPanel)** com a stack
PET/TALL, sem etapa de build:
| Camada | Tecnologia | Papel |
|---|---|---|
| Servidor | **PHP de ciclo curto** | Regras de negócio, SQL via PDO, renderiza HTML e morre (libera RAM) |
| Estilo | **CSS com custom properties** | Tokens em `:root`, componentes em classes — sem Tailwind/build |
| Comportamento | **JS leve, vanilla** (ou HTMX/Alpine) | Só o necessário no cliente; o estado mora no banco/DOM |
| Ícones | **SVG inline** ou Bootstrap Icons via CDN | SVG inline não depende de fonte externa |
| Fontes | Google Fonts (Merriweather + Inter) | Carregadas via `` no `` |
**Por que CSS puro e não Tailwind?** Tailwind exige um passo de compilação (PostCSS/CLI). Em um
fluxo "edita e sobe pro cPanel", custom properties entregam o mesmo poder de tema (uma variável,
mil usos) **sem build**. Se um projeto futuro adotar HTMX/Alpine, os tokens e componentes
continuam valendo — o CSS é agnóstico de stack.
**Regra de ouro de layout:** todo elemento visual deve ser validado em **mobile e
desktop/tablet**. Dar dimensão fixa/limitada a ícones (`width`/`height` no SVG + `max-width`),
nunca `width: 100%` em SVG sem `viewBox` controlado.
---
## 2. Tokens de design
Cole este bloco no topo do seu `app.css`. Tudo no sistema deriva daqui.
```css
:root {
/* ── Superfícies e texto ── */
--bg: #F7F7F6; /* fundo da página */
--surface: #FFFFFF; /* cards, inputs, áreas elevadas */
--fg: #062F3B; /* texto principal (teal profundo) */
--muted: #EBECE9; /* fundo sutil (linhas hover, caixas) */
--muted-fg: #5A7161; /* texto secundário */
--border: #D9DBD6; /* bordas e divisores */
/* ── Marca ── */
--primary: #334C3B; /* verde-floresta — ações primárias */
--primary-fg: #F7F7F6; /* texto sobre primary */
--primary-dim: rgba(51,76,59,.09);
--accent: #BD7522; /* bronze — destaque, foco, "eleito" */
--accent-fg: #FFFFFF;
--accent-dim: rgba(189,117,34,.10);
--accent-hover:#A2641D;
/* ── Navegação (sidebar) ── */
--sidebar-bg: #062F3B;
--sidebar-fg: #E6E7E3;
--sidebar-hover:#163A44;
--sidebar-w: 260px;
/* ── Semânticas (estado, NÃO é o accent) ── */
--ok: #667F6E; --ok-dim: rgba(102,127,110,.12);
--warn: #BD7522; --warn-dim: rgba(189,117,34,.12);
--danger: #DC2828; --danger-dim: rgba(220,40,40,.10);
--info: #2D7DA0; /* azul calmo — avisos neutros */
/* ── Forma ── */
--radius: 10px;
--radius-sm: 6px;
--radius-lg: 14px;
--shadow-card: 0 1px 2px rgba(6,47,59,.05), 0 1px 3px rgba(6,47,59,.04);
--shadow-hover:0 6px 16px rgba(6,47,59,.09);
}
```
> **Cor semântica ≠ cor de marca.** `--ok/--warn/--danger/--info` comunicam *estado* e são
> independentes do accent (bronze). Não use o bronze para "sucesso" nem o verde-floresta para
> "erro".
---
## 3. Cores
| Token | Hex | Uso |
|---|---|---|
| `--bg` | `#F7F7F6` | Fundo geral da aplicação |
| `--surface` | `#FFFFFF` | Cards, inputs, modais |
| `--fg` | `#062F3B` | Texto principal (teal quase-preto) |
| `--muted` | `#EBECE9` | Fundo de hover, caixas internas |
| `--muted-fg` | `#5A7161` | Texto secundário, legendas |
| `--border` | `#D9DBD6` | Bordas, divisores |
| `--primary` | `#334C3B` | Botões primários, links, ativo |
| `--accent` | `#BD7522` | Foco, destaque, indicador de ordenação, "eleito" |
| `--sidebar-bg` | `#062F3B` | Fundo da navegação lateral / topbar |
| `--ok` | `#667F6E` | Sucesso / aberto |
| `--warn` | `#BD7522` | Atenção / rascunho / congelada |
| `--danger` | `#DC2828` | Erro / exclusão |
| `--info` | `#2D7DA0` | Aviso neutro / "em pausa" |
**Neutros com viés:** os cinzas têm leve viés esverdeado (`--muted-fg #5A7161`), combinando com
a marca em vez de um cinza puro "sem escolha".
**Contraste (acessibilidade):** sobre fundos claros, prefira os tons escurecidos para texto —
ex.: erro `#8c1818`, atenção `#6e440f`, sucesso `#234433` — que passam em WCAG AA (ver
[Notificações](#notificações)).
---
## 4. Tipografia
Duas famílias via Google Fonts, carregadas no ``:
```html
```
| Papel | Família | Onde |
|---|---|---|
| **Títulos** | `Merriweather` (serif, 700/900) | `h1`–`h3`, títulos de card, KPIs, marca |
| **Corpo / UI** | `Inter` (sans, 300–700) | Texto, botões, formulários, tabelas |
| **Dados/código** | mono do sistema | Trechos de código, tokens |
```css
body {
font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
font-size: .95rem;
line-height: 1.6;
color: var(--fg);
background: var(--bg);
}
h1, h2, h3 { font-family: 'Merriweather', Georgia, serif; }
```
**Escala de tipo (use e não saia dela):**
| Elemento | Tamanho | Peso |
|---|---|---|
| `h1` / título de página | `1.5rem` | 700 |
| KPI / stat value | `1.75rem` | 700 (Merriweather) |
| `h2` / título de card | `1rem`–`1.125rem` | 700 |
| Corpo | `.95rem` | 400/500 |
| Legenda / `.muted` | `.875rem` | 400 |
| Rótulo / label | `.8rem` | 600, `text-transform: uppercase`, `letter-spacing:.04em` |
> **Mínimo 16px em inputs no mobile.** Campos de busca/formulário usam `font-size: 16px` em
> telas pequenas para evitar o auto-zoom do iOS.
---
## 5. Raios, sombras e espaçamento
```css
--radius-sm: 6px; /* botões, inputs, pills internas */
--radius: 10px; /* caixas, linhas de lista */
--radius-lg: 14px; /* cards, stat-cards, auth-card */
--shadow-card: 0 1px 2px rgba(6,47,59,.05), 0 1px 3px rgba(6,47,59,.04);
--shadow-hover: 0 6px 16px rgba(6,47,59,.09);
```
- **Sombras** sempre com matiz teal (`rgba(6,47,59,...)`), nunca preto puro — integra com a paleta.
- **Espaçamento:** prefira `gap` em flex/grid a margens por elemento. Padding de card: `22px`
(desktop) → `14px` (mobile). Margem entre cards: `16–18px`.
---
## 6. Componentes
Cada componente abaixo é uma classe pronta. Marcação mínima, sem utilitários soltos.
### Botões
```html
DestaqueFantasma
```
- O elemento `