# DESIGN SYSTEM — Direcao C (Navy/Gold + Paper Cream)

A identidade visual oficial dos decks da Tata. Replica exata do deck "Rotinas no Claude Code" que originou esta skill.

---

## TOKENS DE COR

### Familia NAVY (slides escuros — uso 60%)

```css
--navy:   #0E1B2E;   /* bg principal */
--navy2:  #162538;   /* cards, ex-cards, op-cards */
--navy3:  #1B2D45;   /* hover/active de cards */
--cream:  #F5EBD4;   /* texto principal sobre navy */
--cream2: #C6BEA8;   /* texto secundario */
--cream3: #8A8472;   /* legendas, mono uppercase */
--gold:   #D6A648;   /* destaque (italics, eyebrows, lines) */
--gold2:  #B98A2F;   /* hover state do gold */
--border: #2A3B55;   /* borda de cards sobre navy */
```

### Familia PAPER (slides claros — uso 30%)

```css
--paper:   #FAF7F0;  /* bg principal cream */
--paper2:  #F0E9D8;  /* cards highlighted, cells de tabela */
--ink:     #0A1020;  /* texto principal sobre paper */
--ink2:    #2A3655;  /* texto secundario */
--ink3:    #5C6784;  /* legendas */
--brick:   #C0432A;  /* destaque vermelho-telha (so paper) */
--border-p: #DDD5C0; /* borda sobre paper */
```

### Familia DARK (slide de limitacoes — uso 10%)

```css
--dark: #060E1A;     /* navy mais profundo */
/* Usa tokens cream + cor alerta #FF6B4A pra warnings */
```

### REGRAS DE USO

- **Navy** — slides core do conteudo (definicao, comparacao secundaria, cards, lista numerada, fechamento, titulo, comando, cron alternativo)
- **Paper** — slides de respiro/contraste (rotina vs loop, sintaxe, casos yes/no, timeline)
- **Dark** — APENAS slide de "limitacoes/warnings". Maximo 1 por deck.

**Distribuicao tipica em deck de 10 slides:** 6 navy + 3 paper + 1 dark.

---

## TIPOGRAFIA

### 3 fontes (Google Fonts)

```html
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
```

```css
--font-d: 'Instrument Serif', serif;       /* display — titulos h1/h2, italic */
--font-b: 'Inter', sans-serif;             /* body — paragrafos, descricoes */
--font-m: 'JetBrains Mono', monospace;     /* mono — codigo, cron, eyebrows, labels */
```

### Escala tipografica

| Token | Tamanho | Font | Uso |
|---|---|---|---|
| **t-h1** | 280px | Display | Titulo da aula (slide 01) |
| **bg-word** | 500px | Display italic | Background word slide fechamento |
| **big** | 240px | Display | Frase grande no fechamento |
| **limits h2** | 112px | Display | Titulo slide limitacoes |
| **create h2** | 100px | Display | Titulo slides com h2 grande |
| **compare/cron/cases h2** | 96px | Display | Titulos slides paper |
| **what h2** | 86px | Display | Titulo slide definicao (mais curto) |
| **cp-num** | 88px | Mono bold | Numeros gigantes (breakdown) |
| **op-n / cg-title** | 76px / 60px | Display | Cards numerados / sub-titulos |
| **bp-n** | 52px | Display | Numeros da lista boas praticas |
| **bp-title** | 40px | Display | Titulo de item da lista |
| **t-sub / close-sub** | 32px / 30px | Body | Subtitulos |
| **def / cmd-text** | 28px | Body/Mono | Definicao, comando |
| **sc-val / op-name / cg-val** | 26px | Body | Valores de cards |
| **eye / cron / lim-text / case-item / desc** | 24px | Mono/Body | Textos secundarios |

**REGRA DURA:** nenhum texto visivel abaixo de 24px. Sem excecao.

### Letter-spacing

- Titulos display: `letter-spacing: -.03em` a `-.045em` (negative tracking)
- Mono uppercase (eyebrows, labels): `letter-spacing: .08em` a `.14em` (positive)
- Body: default (0)

### Line-height

- h1/h2 gigantes: `.84` a `.95` (apertado pra impacto)
- Subtitulos: `1.4` a `1.55`
- Body: `1.4` a `1.6`

---

## FRAME DO SLIDE

```css
:root {
  --px: 120px;  /* padding lateral */
  --py: 88px;   /* padding top */
  --pb: 72px;   /* padding bottom */
}

deck-stage section {
  font-family: var(--font-b);
  padding: var(--py) var(--px) var(--pb);
  position: relative;
  overflow: hidden;
}
```

**Tamanho do slide:** 1920×1080px (Full HD landscape). O `deck-stage.js` escala automaticamente.

---

## COMPONENTES COMPARTILHADOS

### `.eye` (eyebrow)

Pequena etiqueta uppercase mono com linha gold antes. Aparece no canto superior de slides secundarios.

```css
.eye {
  font-family: var(--font-m);
  font-size: 24px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream3);          /* navy */ /* ou ink3 em paper */
  display: flex;
  align-items: center;
  gap: 18px;
}
.eye::before {
  content: "";
  width: 44px;
  height: 2px;
  background: var(--gold);       /* navy */ /* ou brick em paper */
}
```

### `.wm` (watermark "tatá.")

Marca-tatá no canto inferior esquerdo de TODO slide. Italic serif, com ponto destacado em gold/brick.

```css
.wm {
  position: absolute;
  bottom: 52px;
  left: var(--px);
  font-family: var(--font-d);
  font-style: italic;
  font-size: 30px;
  letter-spacing: -.03em;
  color: var(--cream);
  opacity: .55;
}
.wm .dot { color: var(--gold); opacity: 1; }
```

```html
<div class="wm a av-in a-N">tatá<span class="dot">.</span></div>
```

**REGRA ABSOLUTA:** todo slide tem watermark. Sem excecao.

---

## SISTEMA DE ANIMACAO

7 keyframes + 9 niveis de delay escalonado.

### Keyframes

```css
@keyframes kUp    { from { opacity:0; transform:translateY(22px); }  to { opacity:1; transform:translateY(0); } }
@keyframes kIn    { from { opacity:0; }                              to { opacity:1; } }
@keyframes kRight { from { opacity:0; transform:translateX(32px); }  to { opacity:1; transform:translateX(0); } }
@keyframes kLeft  { from { opacity:0; transform:translateX(-32px); } to { opacity:1; transform:translateX(0); } }
@keyframes kScale { from { opacity:0; transform:scale(0.93); }       to { opacity:1; transform:scale(1); } }
@keyframes kBig   { from { opacity:0; transform:translateY(40px) scale(0.95); } to { opacity:1; transform:translateY(0) scale(1); } }
```

### Aplicacao

```css
.a { opacity: 0; }
.a.go.av-up    { animation: kUp    0.65s cubic-bezier(.22,1,.36,1) both; }
.a.go.av-in    { animation: kIn    0.55s cubic-bezier(.22,1,.36,1) both; }
.a.go.av-right { animation: kRight 0.65s cubic-bezier(.22,1,.36,1) both; }
.a.go.av-left  { animation: kLeft  0.65s cubic-bezier(.22,1,.36,1) both; }
.a.go.av-scale { animation: kScale 0.6s  cubic-bezier(.22,1,.36,1) both; }
.a.go.av-big   { animation: kBig   0.8s  cubic-bezier(.22,1,.36,1) both; }
```

### Delays escalonados

```css
.a-1 { animation-delay: .05s }   .a-2 { animation-delay: .18s }
.a-3 { animation-delay: .31s }   .a-4 { animation-delay: .44s }
.a-5 { animation-delay: .57s }   .a-6 { animation-delay: .70s }
.a-7 { animation-delay: .83s }   .a-8 { animation-delay: .96s }
.a-9 { animation-delay: 1.09s }
```

### Padroes de uso

- **Slide titulo (01):** eye → av-in a-1 | h1 → av-big a-2 | sub → av-up a-3 | wm → av-in a-5
- **Slide com 2 colunas:** col-esq sobe (av-up), col-dir entra da direita (av-right) com delays escalonados nos cards
- **Slide com tabela:** header sobe (av-up) → tabela aparece (av-scale)
- **Slide fechamento:** bg-word fade (av-in a-1) → eye (a-2) → big (av-big a-3) → sub (av-up a-4) → wm (a-5)

**Regra:** sempre comecar com a-1 e ir escalonando. Nao pular delays.

---

## CORES DE STATUS (yes/no e warnings)

```css
/* yes / sucesso */
color: #2F7D4F;                              /* texto verde */
background: rgba(47,125,79,.07);             /* bg verde claro */
border: 1.5px solid rgba(47,125,79,.2);

/* no / erro */
color: #B8321E;                              /* texto vermelho-escuro */
background: rgba(184,50,30,.06);             /* bg vermelho claro */
border: 1.5px solid rgba(184,50,30,.18);

/* alerta laranja (limitacoes) */
color: #FF6B4A;                              /* destaque alerta */
background: rgba(255,107,74,.07);
border: 1px solid rgba(255,107,74,.25);
```

---

## ASSETS EXTERNOS

- **Fontes:** Google Fonts (Instrument Serif, Inter, JetBrains Mono) via CDN
- **Sem icones SVG** — usar emoji funcional (❌✅💰📍⚠️) quando necessario
- **Sem imagens** — decks da Tata sao tipografia + cor + animacao

---

## PROIBIDO NO DESIGN SYSTEM

- ❌ Sombras box-shadow grandes (degrade do design clean)
- ❌ Gradientes em texto (so em accent vertical line do slide 01)
- ❌ Bordas arredondadas exageradas (max 16px, padrao 10-14px)
- ❌ Cores fora da paleta (sem azul claro, sem rosa, sem verde fluo)
- ❌ Emoji decorativo (so funcional)
- ❌ Fontes diferentes de Instrument Serif / Inter / JetBrains Mono
- ❌ Font-size abaixo de 24px
- ❌ Italic em fonte Inter ou Mono (so Instrument Serif italic)
- ❌ Bg images ou patterns
- ❌ Border-radius com shape (so retangulos arredondados)

---

**Quando em duvida:** abra `exemplos/exemplo-01-rotinas-claude-code/output.html` e copie o padrao.
