# Sistema de Design Imperatriz pra Excalidraw

Sistema visual completo. Sempre que gerar/auditar diagrama, use este como referencia.

## 1. Setup do canvas (sempre antes de desenhar)

1. Background ≠ branco puro. Default: marfim `#FAF8F3` (light) ou carvao `#0F0F0F` (dark)
2. Grid de 20px ativado (View > Show grid)
3. Snap to objects + Snap to grid: ON
4. Stats panel: ON (pra alinhamento pixel-perfect)
5. Roughness: defina UMA pro diagrama todo (default: `architect`)

## 2. Paletas oficiais

**4 paletas suportadas** (helpers/paleta.py):

### imperatriz (default — marca pessoal Tata)
- `#C9A961` dourado (accent)
- `#1F4E3D` esmeralda (dominante)
- `#FAF8F3` marfim (background)
- `#1A1A1A` carvao (traco)
- `#8B5E3C` caramelo (destaque quente)

### mckinsey (consultoria seria, B2B)
- `#000000` preto (dominante)
- `#FFD700` amarelo (accent)
- `#4A4A4A` cinza escuro
- `#B8B8B8` cinza claro
- `#F5F5F0` offwhite (background)

### dark_premium (apresentacao cinematografica)
- `#0F0F0F` carvao (background)
- `#E8E2D0` neon claro (dominante)
- `#D4AF37` dourado (accent)
- `#3A3A3A` cinza
- `#FFFFFF` branco (uso pontual)

### notion_minimal (SaaS clean)
- `#FBFAF7` offwhite (background)
- `#191919` preto (dominante)
- `#2F65D0` azul (accent)
- `#E8E6E0` cinza claro
- `#87837C` cinza medio

**Regra de ouro**: maximo 5 cores no diagrama inteiro. 1 dominante + 1 accent + 2 neutros + 1 destaque.

## 3. Tipografia em camadas

| Hierarquia | Fonte | Tamanho | Codigo |
|---|---|---|---|
| Titulo diagrama | Helvetica | 48-72px UPPERCASE | FONT_HELVETICA (2) |
| Subtitulo | Helvetica | 24-32px | FONT_HELVETICA (2) |
| Label de bloco | Helvetica | 16-20px | FONT_HELVETICA (2) |
| Annotation manuscrita | Virgil | 14-18px | FONT_VIRGIL (1) |
| Metrica/codigo | Cascadia | 14-16px | FONT_CASCADIA (3) |

**Combo premium**: Helvetica nos titulos formais + Virgil em annotations laterais ("← cuidado aqui", "obs:") = look notebook de consultor senior.

## 4. Espacamento canonico

- Grid base: **20px**
- Gap entre blocos: minimo **40px**
- Padding interno em card: **16px**
- Margem dentro de Frame: **80px**
- Margem entre Frames: **120px**

## 5. Os 7 truques visuais (helpers/excalidraw.py implementa todos)

### Sombra falsa
- Duplica shape, move 6px direita+baixo, fill cinza translucido 15%, manda pra tras
- Helper: `card_premium(sombra=True)`

### Borda dupla
- Retangulo externo + interno 8px de margem
- Helper: `card_premium(borda_dupla=True)`

### Highlighter
- Retangulo amarelo translucido 40% atras de texto importante, sem borda, roughness=1
- Helper: `highlighter(x, y, w, h, paleta)`

### Gradiente em camadas
- 3-4 retangulos sobrepostos com fills progressivamente mais escuros (use `cor_sombra(cor, opacidade_pct)`)
- Sem bordas

### Sticky note 3D
- Retangulo amarelo com rotacao 3-5 graus + sombra falsa + texto Virgil
- Helper: `post_it(x, y, w, h, paleta, conteudo)`

### Conector profissional
- Tipo elbow (`elbowed=True`) ou curved (`curvada=True`)
- Espessura 2px
- Cor: cinza medio (`paleta["neutro_medio"]`), nunca preto puro
- Label no meio com highlighter atras pra texto nao brigar com a linha
- Helper: `conector_inteligente(el_origem, el_destino, paleta, label, elbow=True)`

### Container com label flutuante
- Retangulo grande fill cor-de-marca 10% opacidade
- Borda tracejada
- Label no canto superior esquerdo em CAPS pequenas
- Helper: `container_secao(x, y, w, h, nome, paleta)`

## 6. Roughness — escolha uma

- `architect` (0) — diagramas executivos, dashboards, frameworks B2B
- `artist` (1) — mapa mental, brainstorm, didatico
- `cartoonist` (2) — conteudo divertido, storytelling

**NUNCA misture** roughness no mesmo diagrama.

## 7. Anti-patterns (auditar.py detecta)

| NAO | SIM |
|---|---|
| 10+ cores | 3-5 cores fixas |
| Borda preta sempre | Cinza medio `#87837C` ou cor do tema |
| Roughness misturada | Uma roughness so |
| Setas diagonais retas | Elbow ou curved |
| Texto colado no shape | Padding interno 16px |
| Background branco puro | Marfim ou carvao |
| Virgil em titulo grande | Virgil so em annotation |
| Capslock em label de bloco | Caps so em titulos/labels de container |
| Setas grossas (4px+) | 2px |
| Cor solida em fill destaque | fill com opacidade ou hachure |

## 8. Composicao premium

- **Regra de respiracao**: nunca menos de 40px entre blocos
- **Hierarquia por tamanho**: central 1.5x maior que secundarios; detalhes 0.7x
- **Alinhamento**: tudo alinhado em pelo menos 1 eixo (Stats panel)
- **Margem segura**: 80px ao redor do conteudo dentro de Frame

## 9. Formato Excalidraw v2

```json
{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [...],
  "appState": {
    "viewBackgroundColor": "#FAF8F3",
    "gridSize": 20,
    "gridStep": 5
  },
  "files": {}
}
```

Pra formato Obsidian (.excalidraw.md), embrulhar em frontmatter + code fence:

```markdown
---
excalidraw-plugin: parsed
tags: [excalidraw, imperatriz]
---

# Drawing
\`\`\`json
{JSON aqui}
\`\`\`
```

Detalhes do esquema de elementos: ver `formato-excalidraw.md`.
