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 e o passo prático em 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.

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.

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.

Próximo: as versões que coordenam esses pacotes em Versões e canais.