# EIXO — Design System

> Importado do Claude Design (projeto `3ebabb57-34ea-4171-bb77-f2743d944051` —
> "EIXO Design System: Dark Luxo"). Componentes React, guidelines e `SKILL.md`
> completos vivem lá; aqui ficam a fonte de verdade dos **tokens** (`styles.css` +
> `tokens/*.css`) e os **logos** (`assets/`).

Sistema de design da marca **EIXO — Acompanhamento Individual** (by Bruna Puga): mentoria jurídica high-ticket, individual e personalizada, para advogados(as) que querem escalar o próprio escritório.

**Posicionamento:** exclusivo, sofisticado, próximo e autoral. O nome EIXO remete a eixo/centro — alinhamento, estrutura, o ponto em torno do qual tudo gira.

**Direção visual:** *dark luxo & exclusivo* — o oposto de tech/neon. Fundo escuro quente, metálicos quentes (champanhe, bronze, ouro velho), serifa editorial de alto contraste, muito respiro, filetes finos dourados, brilho suave e quente. Sensação de clube fechado / consultoria de alto padrão / convite exclusivo. Deve destoar completamente do sistema CNE (dark + neon multicolor).

---

## Paleta

| Token | Valor | Uso |
|---|---|---|
| `--eixo-obsidian` | #0C0B0A | fundo mais profundo |
| `--eixo-graphite` | #17140F | fundo padrão |
| `--eixo-espresso` | #241E17 | superfícies elevadas |
| `--eixo-champagne` | #E7CBA0 | acento principal |
| `--eixo-bronze` | #B0895A | acento secundário |
| `--eixo-old-gold` | #C9A24B | ouro velho, meio do gradiente |
| `--eixo-cream` | #F3EDE3 | texto sobre escuro / surface light |
| `--eixo-sand` | #C9BCA8 | texto corpo |
| `--eixo-faded` | #8A7F6E | texto apagado |
| `--eixo-bordeaux` | #5B2334 | jewel profundo, uso raro |

**Aliases semânticos** (mesmo contrato do CNE): `--surface-dark`, `--surface-light`, `--accent-primary`, `--accent-secondary`, `--text-body`, `--text-on-dark`, `--text-muted`.
**Gradiente-assinatura:** `--metal-gold` / `--gold-rule` (champanhe→bronze).

## Tipografia

- `--font-display` / `--font-heading`: **Cormorant Garamond** — serifa de alto contraste, editorial. Títulos em peso 500–600, tracking levemente negativo.
- `--font-body`: **Manrope** — sans limpa e premium, pesos 300–700.
- `--font-quote`: Cormorant Garamond *itálico*.
- Kickers/overlines: caixa-alta, `--ls-kicker` (0.28em), `--fs-xs/sm`, champanhe ou apagado.
- Números/KPIs: `--metal-fill` com `background-clip: text`.

## Invariantes da marca

1. **Nenhum fundo chapado** — sempre `--bg-dark` (degradê grafite→obsidiana + vinheta quente) + grão sutil (`--texture-grain` em pseudo-elemento, opacity ~0.04).
2. **"Brilho" = halo quente** champanhe/ouro (`--glow-*`) — **jamais neon**.
3. **Filetes finos dourados** (`--gold-rule`, 1px) como divisores, molduras e âncoras.
4. **Motivo EIXO**: linha-eixo (vertical/horizontal) com ponto central — eco do logo (linha · linha). Marcas de alinhamento e grid preciso.
5. **Raios contidos** — quase reto (2–8px). Nada de cantos muito arredondados.
6. Superfícies claras são exceção e sempre levam **moldura/filete dourado**.
7. Motion lento e suave (`--ease-out`, 320–640ms), sem bounce.

## Recipes

**Fundo dark (obrigatório):**
```css
.section { background: var(--bg-dark); position: relative; }
.section::before { content:''; position:absolute; inset:0; background-image: var(--texture-grain); opacity:.04; pointer-events:none; }
```

**Vidro escuro quente:**
```css
background: var(--glass-bg); backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border); box-shadow: var(--shadow-card);
```

**Número metálico:**
```css
background: var(--metal-fill); -webkit-background-clip: text; background-clip: text; color: transparent;
```

**Filete/divisor eixo:** `height:1px; background: var(--gold-rule);` com ponto central de 3px champanhe.

## Conteúdo & tom

- Português (BR). Tratamento próximo mas sofisticado: "você", direto, sem gírias.
- Copy curta, editorial, com pausas. Kickers em CAIXA-ALTA espaçada ("MENTORIA JURÍDICA", "ACOMPANHAMENTO INDIVIDUAL").
- **Sem emoji.** Sem exclamações em excesso. Números falam por si.

## Logos

Símbolo em **vetor SVG** (extraído do ícone do logo): `assets/logo-eixo.svg` (recolorível via
`currentColor`), `logo-eixo-light.svg` (preenchimento metálico champanhe→bronze, para fundos
escuros), `logo-eixo-dark.svg` (preto, para fundos claros). Os PNGs originais (1254px) passam
de 256 KiB (limite do import) e ficam no projeto Claude Design.

## Índice (no projeto Claude Design)

- `styles.css` — entrada global (@imports) · `tokens/` — colors, typography, spacing, effects, fonts
- `assets/` — os 3 logos · `guidelines/` — specimen cards · `components/core/` — Badge, Button, GlassCard, Kpi, AxisDivider, QuoteBox · `SKILL.md`