# Tokens de tema

A **consulta rápida** do sistema de tokens: as famílias que compõem o Design System e as variáveis CSS que o motor de tema escreve a partir do manifesto. É o lado de referência do assunto — o **conceito** está em [Design System e tema](/pt-BR/docs/apps/temas) e o **passo prático** em [03 · Tema e marca](/pt-BR/docs/tutorial/03-tema-e-marca).

Leia esta página em duas camadas:

- **(a) O Design System oficial da Fayz** — o artefato de referência (`design/fayz-tokens.css`) que define a taxonomia completa das oito famílias. É o vocabulário-alvo.
- **(b) O que o runtime aplica hoje** — as 3 chaves do manifesto (`brand`, `radius`, `mode`) e as variáveis CSS que o `theme engine` (`@fayz-ai/saas`) deriva delas. É o subconjunto vivo.

## (a) As oito famílias — Design System oficial

Valores canônicos do Design System da Fayz, como taxonomia de referência.

### 1 · Marca + tints

| Token | Valor | Papel |
| --- | --- | --- |
| `ignite` | `#2FDD4B` | Verde-assinatura — o hit da marca. |
| `ignite-deep` | `#119A27` | Verde escuro — campos e blocos de marca. |
| `ignite-soft` | `#DFFBE3` | Tint claro — halos de seleção e hover. |
| `ignite-bg` | `#F2FDF4` | Tint pálido — acentos de superfície no claro. |

### 2 · Escala de neutros

| Token | Valor | | Token | Valor |
| --- | --- | --- | --- | --- |
| `n-0` | `#FFFFFF` | | `n-500` | `#8A8A82` |
| `n-50` | `#FAFAF8` | | `n-600` | `#5C5C57` |
| `n-100` | `#F4F4F1` | | `n-700` | `#3D3D3A` |
| `n-200` | `#EAEAE5` | | `n-800` | `#26262B` |
| `n-300` | `#D9D9D2` | | `n-900` | `#131816` |
| `n-400` | `#B8B8AF` | | `n-1000` | `#0B0F0E` |

### 3 · Secundárias (usar com parcimônia)

| Token | Valor |
| --- | --- |
| `yellow` | `#F2DB0F` |
| `cyan` | `#17C1EA` |
| `coral` | `#FF6B5C` |
| `magenta` | `#E81073` |

### 4 · Semântica por modo

| Papel | Claro | Escuro |
| --- | --- | --- |
| Fundo | `paper #FAFAF8` | `black #0B0F0E` |
| Superfície | `paper-2 #F4F4F1` | `n-900 #131816` |
| Borda | `rgba(11,15,14,0.06)` | `rgba(255,255,255,0.08)` |
| Texto | `near-black` | `white` |
| Texto atenuado | `n-600` | `n-400` |

### 5 · Tipografia

| Token | Família | Uso |
| --- | --- | --- |
| `font-display` | `Outfit` | Títulos e herói. |
| `font-logo` | `Sora` | Só o wordmark. |
| `font-body` | `DM Sans` | Corpo. |
| `font-mono` | `JetBrains Mono` | Código. |

### 6 · Espaçamento

Grade de **4px**: `4 · 8 · 12 · 16 · 24 · 32 …` — a malha que alinha tudo.

### 7 · Radius

| Token | Valor | | Token | Valor |
| --- | --- | --- | --- | --- |
| `xs` | `4px` | | `lg` | `22px` |
| `sm` | `8px` | | `xl` | `32px` |
| `md` | `14px` | | `pill` | `9999px` |

### 8 · Elevação + motion

| Token | Valor |
| --- | --- |
| `shadow-sm` | `0 1px 3px rgba(11,15,14,.06)…` |
| `shadow-md` | `0 4px 12px rgba(11,15,14,.06)…` |
| `shadow-lg` | `0 12px 32px rgba(11,15,14,.08)…` |
| `shadow-glow` | halo verde `0 0 0 4px rgba(47,221,75,.15)…` |
| `ease-out` | `cubic-bezier(0.22, 1, 0.36, 1)` |
| `dur-base` | `240ms` |

**Nona peça — vidro + aurora.** Receitas nomeadas, não cores soltas: o **vidro fosco** (`rgba(255,255,255,0.55)` + `blur 24px` no claro) e a **aurora** (`radial-gradient` verde que vaza atrás do herói). Cada uma combina fundo, borda, desfoque e brilho num único token.

## (b) O que o runtime aplica hoje

No manifesto você declara três chaves. Detalhe dos valores e da personalidade de cada uma em [03 · Tema e marca](/pt-BR/docs/tutorial/03-tema-e-marca).

| Chave | Valores | Deriva |
| --- | --- | --- |
| `brand` | `blue` `violet` `green` `orange` `red` `pink` `teal` | `primary`, `ring`, `accent` (matiz −50°) e a barra lateral opcional. |
| `radius` | `none` `sm` `md` `lg` `full` | botões, cards, inputs e modais juntos. |
| `mode` | `light` `dark` `system` | a estratégia de cor. |

A partir daí, o `theme engine` (`createTheme` / `applyTheme`, em `@fayz-ai/saas`) escreve cada valor como **variável CSS** no documento:

| Variável CSS | Vem de |
| --- | --- |
| `--primary` | a marca (`primaryForeground` branco). |
| `--ring` | a marca — anel de foco. |
| `--accent` | a marca com matiz girado **−50°**. |
| `--sidebar`, `--sidebar-*` | rail colorido opcional (borda −12% de luz, item ativo −15%, ícones `matiz 35% 82%`). |
| `--button-radius` | (com `--card-radius`, `--input-radius`, `--modal-radius`) da chave `radius`. |
| `--font-family` | do preset base curado. |
| `--shadow-sm` / `--shadow-md` / `--shadow-lg` | do preset base curado. |

Tudo o que não vem da marca — neutros, superfícies, semânticas de `success`/`warning`/`destructive`, tipografia e sombras — sai de um **preset base curado** (o admin clássico) no qual a marca se encaixa.

{% callout type="info" %}
As oito famílias em (a) são a **taxonomia-alvo**; o manifesto expõe hoje o subconjunto em (b). Cor livre em HSL, as 11 famílias de fonte, os níveis de sombra e presets inteiros já existem no motor, atrás do runtime da plataforma — expô-los no manifesto é a evolução do contrato de tema. Contexto em [Além das 3 chaves](/pt-BR/docs/tutorial/03-tema-e-marca).
{% /callout %}

---

Próximo: as versões que coordenam esses pacotes em [Versões e canais](/pt-BR/docs/referencia/versoes).