# Tino — Design System **Versão:** 0.1 · **Data:** 2026-05-21 · **Direção visual:** Precision Warm **Caminho:** catalog (linear-app + revolut, com overrides de marca) --- ## Visão Geral O design system do Tino traduz o posicionamento de marca — "sócio organizado que chegou antes de você" — em valores concretos de CSS. A direção visual **Precision Warm** é a fusão de precisão editorial (Linear, Wise) com calor humano discreto: nem fintech fria de dashboard institucional, nem app de finanças pessoais colorido demais. O sistema é **dark-first**: o canvas padrão é escuro profundo com temperatura neutra, sério sem ser clínico. O único acento de alta saturação é o lima-verde — o sinal de ação, saúde e controle. Todo o restante é neutro. A densidade escolhida é **comfortable** (base 8px), calibrada para B2B SaaS de dashboard financeiro: informação densa na tabela de transações, espaço generoso nas telas de onboarding e no painel principal. Os tokens residem em `tokens.css` como CSS custom properties registradas sob um bloco `@theme` do Tailwind v4, gerando classes utilitárias (`bg-primary`, `text-fg`, `p-md`, `rounded-lg`). A anatomia e estados de cada componente estão em `components.md`. Este documento é o narrativo — o "porquê" por trás de cada decisão de valor. --- ## Narrativa de Tokens ### Cor O sistema de cores do Tino tem **13 tokens semânticos** na camada escura — deliberadamente abaixo do teto de 14 para forçar escolhas. Cada token tem uma função, não um valor. #### Surfaces (canvas → elevated) | Token | Valor (dark) | Onde é usado | |---|---|---| | `--color-background` | `hsl(220,12%,6%)` | Canvas de página — o fundo mais profundo | | `--color-surface` | `hsl(220,10%,9%)` | Sidebar, nav rail, áreas de navegação | | `--color-surface-raised` | `hsl(220,9%,12%)` | Cards, inputs, dropdowns — superfícies elevadas | | `--color-surface-hover` | `rgba(255,255,255,0.04)` | Overlay de hover em botões ghost e rows de tabela | O modelo de elevação é luminância progressiva — a mesma abordagem do Linear App onde profundidade é expressada por opacidade crescente de branco sobre escuro, nunca por sombras opacas. #### Foregrounds (hierarquia de texto) | Token | Valor (dark) | Onde é usado | |---|---|---| | `--color-fg` | `hsl(210,10%,97%)` | Texto principal — KPI values, títulos, labels primários | | `--color-fg-secondary` | `hsl(216,14%,82%)` | Corpo de texto, descrições, nav links | | `--color-fg-muted` | `hsl(92,12%,42%)` | Labels de campo, chips de categoria, eyebrows, legendas de gráfico | | `--color-fg-subtle` | `hsl(216,5%,42%)` | Timestamps, placeholders, estados desabilitados | O gradiente de contraste — do `--color-fg` em 18:1+ até o `--color-fg-subtle` em ~4.5:1 — garante hierarquia visual clara sem sacrificar acessibilidade. > **Nota sobre `--color-fg-muted`:** este token foi ajustado na auditoria de UX (F-01). Ver seção [Audit Response](#audit-response) abaixo. #### Acento e ação | Token | Valor (dark) | Onde é usado | |---|---|---| | `--color-primary` | `hsl(82,68%,42%)` | Lima-verde saturado — CTA primário, gauge do limite MEI, indicador de saúde | | `--color-primary-hover` | `hsl(82,72%,36%)` | Estado hover sobre o primary | O lima-verde é o **único tom cromático de alta saturação** no sistema. Tudo o mais é neutro. Isso garante que quando o verde aparece — no botão de emitir NFS-e, no gauge verde do limite, no badge de banco conectado — ele comunica "tudo bem, pode avançar" sem competição visual. #### Semântica de alerta | Token | Valor (dark) | Onde é usado | |---|---|---| | `--color-warning` | `hsl(38,92%,50%)` | Âmbar — limite MEI ≥75%, DAS vencendo, consent expirando | | `--color-danger` | `hsl(4,72%,56%)` | Vermelho — limite excedido, banco desconectado, NFS-e rejeitada | | `--color-positive` | `hsl(153,56%,37%)` | Verde de confirmação — transação confirmada, NFS-e autorizada | A escassez semântica é intencional: quando aparece vermelho, o MEI sabe que é sério. Não há arco-íris de status, não há paleta inflacionada. O `--color-positive` em dark mode tem contraste de 3.84:1 — suficiente para texto grande (≥18pt) e como complemento de ícone, mas **não deve ser usado como texto de corpo pequeno** (conforme nota da auditoria de acessibilidade). #### Bordas e overlay | Token | Valor (dark) | Onde é usado | |---|---|---| | `--color-border` | `rgba(255,255,255,0.08)` | Borda padrão de cards, inputs, separadores de seção | | `--color-border-subtle` | `rgba(255,255,255,0.05)` | Borda mais suave — linhas de tabela, dividers | | `--color-overlay` | `rgba(0,0,0,0.82)` | Backdrop de dialogs e drawers | As bordas semi-transparentes são herança direta do Linear App: em superfícies escuras, bordas sólidas criam ruído visual desnecessário. A transparência de 5–8% cria estrutura sem peso. --- ### Tipografia O Tino usa **Inter Variable** como única família de texto — geométrica, sem serifa, de alta legibilidade para dados fiscais. A escolha segue o posicionamento do brand-book: "sem serifas — a leitura de números fiscais precisa de clareza, não de personalidade tipográfica". **IBM Plex Mono** cobre os casos de monospace: CNPJ, NFS-e número, valores em tabelas (alinhamento decimal), códigos de banco. É uma escolha deliberada sobre Berkeley Mono (Linear) — IBM Plex Mono tem cobertura brasileira mais completa e é open-source sem necessidade de licença. | Token | Valor | Onde é usado | |---|---|---| | `--font-sans` | Inter Variable + fallbacks sistema | Todo o UI — labels, body, headings | | `--font-mono` | IBM Plex Mono + fallbacks sistema | CNPJ, valores em tabelas, códigos de operação | #### Escala de tamanhos | Token | Tamanho | Onde é usado | |---|---|---| | `--text-xs` | 11px (0.6875rem) | Overlines, micro labels, carimbos de data compactos | | `--text-sm` | 13px (0.8125rem) | Captions, timestamps, metadados de tabela | | `--text-base` | 15px (0.9375rem) | Corpo padrão — descrições, labels de campo, hint text | | `--text-md` | 16px (1rem) | Labels de UI, texto de botão, nav links | | `--text-lg` | 20px (1.25rem) | Títulos de card, sub-seções de página | | `--text-xl` | 24px (1.5rem) | Headings de painel, títulos de modal | | `--text-2xl` | 32px (2rem) | KPI values no dashboard — receita, % limite, valor DAS | | `--text-3xl` | 48px (3rem) | Headline da landing page, hero da página de onboarding | A escala de 7 passos cobre do micro (`--text-xs` para etiquetas de estado) ao macro (`--text-3xl` para a headline da landing). A ausência de tamanhos acima de 48px reflete a postura Precision Warm: autoridade vem da precisão do dado, não da escala tipográfica. O peso segue a hierarquia do Linear — 400 para leitura, 500-510 para ênfase de UI, 600 para destaque forte. O brand-book proíbe peso 700 (bold) no UI principal. --- ### Espaçamento | Token | Valor | Onde é usado | |---|---|---| | `--spacing-xs` | 4px (0.25rem) | Gap ícone+label, padding de badge, micro-ajustes | | `--spacing-sm` | 8px (0.5rem) | Padding interno de componente (vertical), gap de lista | | `--spacing-md` | 16px (1rem) | Padding de card, espaçamento de campo de formulário | | `--spacing-lg` | 24px (1.5rem) | Gutters de seção, padding de sidebar | | `--spacing-xl` | 32px (2rem) | Separação de seções na página | | `--spacing-2xl` | 48px (3rem) | Separação de seções maiores | | `--spacing-3xl` | 80px (5rem) | Ritmo vertical de hero, seções da landing page | O espaçamento **comfortable** (base 8px) é o equilíbrio entre a densidade do `/transacoes` (tabela densa) e o espaço generoso do `/painel` (KPI cards com respiro). O brand-book especifica "margem interna ampla" nas telas principais — o `--spacing-md` de 16px é o piso de padding de card. --- ### Raio de Borda | Token | Valor | Onde é usado | |---|---|---| | `--radius-none` | 0px | Linhas de tabela, elementos inline, separadores | | `--radius-sm` | 4px | Botões, inputs, badges, chips — UI chrome financeiro | | `--radius-md` | 8px | Cards, modais, dropdowns | | `--radius-lg` | 12px | Painéis laterais, drawers, featured cards | O **raio máximo de 4px** para UI chrome é diretamente especificado no brand-book: "raio de borda máximo de 4px — produto financeiro não é app de jogos". O Revolut usa 9999px (pill) para botões; o Tino usa 4px deliberadamente, marcando a distinção entre um produto de gestão séria e um app de pagamentos consumer. --- ## Componentes O catálogo completo de componentes com anatomia, variantes, estados e tokens consumidos está em [`components.md`](./components.md). **Filosofia:** anatomia primeiro — cada componente é descrito pelos seus slots e estados; a implementação (React, Server Components, Radix UI primitives) é escolha da superfície consumidora. O design system não dita framework; ele dita contrato. Os componentes mínimos — derivados diretamente do inventário dos 27 routes do `sitemap.yaml` — são: | Componente | Routes principais | |---|---| | Button | todos (27/27) | | Input | `/onboarding`, `/transacoes`, `/nfse/emitir`, `/crm/deals/[id]`, `/configuracoes/*` | | Card | `/painel`, `/bancos`, `/contador`, `/configuracoes/billing` | | Table | `/transacoes`, `/nfse`, `/contador`, `/configuracoes/membros` | | Badge | `/transacoes` (categoria), `/nfse` (status), `/bancos` (estado de conexão) | | Dialog | `/nfse/emitir` (preview), `/transacoes` (nova transação), `/configuracoes/membros` (convite) | | EmptyState | 12 routes com estado `empty` declarado no sitemap | --- ## Padrões de Composição ### 1. Layout de Formulário Fiscal **Quando usar:** lançamento de transação (`/transacoes`), emissão de NFS-e (`/nfse/emitir`), configuração de empresa. **Componentes compostos:** `Input` (text, currency, date, select, textarea) + `Button (primary)` + `Button (ghost)` + mensagens de erro inline. **Tokens críticos:** `--spacing-md` para gap entre campos; `--color-danger` para erro inline; `--radius-sm` em todos os campos. **Regra:** campo de valor monetário sempre usa `--font-mono` para alinhamento decimal. Campos readonly (CNPJ preenchido via lookup) recebem `opacity: 0.65` — não `disabled` real, para preservar a leitura do valor pelo leitor de tela. --- ### 2. Lista com Empty State **Quando usar:** `/transacoes` sem transações, `/bancos` sem banco conectado, `/crm` sem deals. **Componentes compostos:** `Table` ou lista de cards → estado `empty` → `EmptyState (variant=first-run ou filtered-empty)` + `Button`. **Tokens críticos:** `--spacing-xl` para padding da área de empty state; `--color-fg-secondary` para o texto descritivo. **Regra de voz:** o empty state não é silêncio — é orientação. "Nada aqui ainda. Conecte o banco e o Tino organiza tudo para você." Verbo de ação direto no CTA. Sem emojis, sem exclamações. --- ### 3. Padrão de Erro Inline em Formulário **Quando usar:** qualquer campo com validação — CNPJ inválido, valor ≤ 0, data no futuro inválida. **Componentes compostos:** `Input (state=error)` + mensagem de erro abaixo. **Tokens críticos:** `--color-danger` na borda e no ícone; `--text-sm` no texto de erro; `--spacing-xs` entre ícone e texto. **Marcação acessível obrigatória:** ```html

CNPJ não encontrado na Receita Federal.

``` Este padrão resolve o F-03 da auditoria (formulário de lançamento sem estados de erro inline). --- ### 4. Loading Skeleton **Quando usar:** qualquer surface com dados assíncronos — tabela de transações, cards de KPI, gauge do limite. **Componentes compostos:** placeholder com pulse animation substituindo o componente real. **Tokens críticos:** `--color-surface-raised` para o fundo do skeleton; `--color-border-subtle` para o shimmer. **Regra de reduced-motion:** sob `prefers-reduced-motion: reduce`, o pulse para; o skeleton exibe gradiente estático. O componente real aparece quando os dados chegam — sem flash. --- ### 5. Fluxo de Confirmação de Ação Irreversível **Quando usar:** cancelamento de NFS-e, revogação de acesso de membro, pagamento Pix (F-06 da auditoria — implementado no screen-atlas). **Componentes compostos:** `Button (destructive)` → `Dialog (variant=confirmation)` com resumo da ação → `Button (primary)` de confirmação final. **Tokens críticos:** `--color-overlay` no backdrop; `--color-danger` no botão de confirmação quando a ação é destrutiva; `--color-border` no panel. **Regra:** o dialog de confirmação exibe o valor concreto da ação ("Cancelar NFS-e #001 — R$ 1.250,00 para Empresa XYZ?"). Nunca uma pergunta abstrata ("Tem certeza?"). --- ### 6. Status Gauge — Limite MEI **Quando usar:** `/painel` — o medidor do limite anual MEI é o componente mais crítico do produto. Também presente em `/contador/empresas/[cnpj]/painel`. **Componentes compostos:** progressbar SVG ou CSS + `Badge` de estado + texto de valor. **Tokens críticos:** `--color-primary` (lima-verde) para 0–74%; `--color-warning` (âmbar) para 75–99%; `--color-danger` (vermelho) para 100%+. **Regra de acessibilidade:** `role="progressbar"`, `aria-valuenow`, `aria-valuemin="0"`, `aria-valuemax="100"`, `aria-label="Limite MEI: R$ 62.300 de R$ 81.000 usados (77%)"`. O estado é comunicado por texto e cor — nunca só por cor (WCAG 1.4.1). --- ## Accessibility Floor O Tino segue **WCAG 2.1 AA** como piso inegociável. Produto financeiro com dados sensíveis do MEI — acessibilidade não é feature, é contrato. ### Contraste de texto | Par de cores | Contraste calculado | Critério | |---|---|---| | `--color-fg` / `--color-background` (dark) | ~18:1 | ✓ AAA | | `--color-fg-secondary` / `--color-background` | ~11:1 | ✓ AAA | | `--color-fg-muted` / `--color-background` | ≥4.5:1 | ✓ AA (pós fix F-01) | | `--color-fg-subtle` / `--color-background` | ~4.5:1 | ✓ AA mínimo | | `--color-primary` / `--color-background` (dark) | ~4.7:1 | ✓ AA | | `--color-warning` / `--color-background` | ~4.6:1 | ✓ AA (texto, não apenas ícone) | | `--color-danger` / `--color-background` | ~4.8:1 | ✓ AA | | `--color-positive` / `--color-background` (dark) | 3.84:1 | ⚠ AA apenas para texto ≥18pt + ícone | | `--color-fg` / `--color-surface` (dark) | ~16:1 | ✓ AAA | | `--color-fg-muted` / `--color-surface` (dark) | ≥4.5:1 | ✓ AA (pós fix F-01) | **Nota crítica sobre `--color-positive`:** use este token apenas para texto grande (≥18pt / ≥24px) ou acompanhado de ícone. Em body small (≤15px), use `--color-fg-secondary` com ícone de check para comunicar sucesso — nunca o verde sozinho. ### Focus indicator ```css /* aplicado via seletor universal — não sobrescrever sem razão documentada */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } ``` O foco é visível em **todos** os elementos interativos. `outline: none` é proibido sem um `outline` alternativo equivalente. Min-height 44px em touch targets (44×44px mínimo conforme WCAG 2.5.5). ### Navegação por teclado - Tab order segue a ordem visual do DOM — sem `tabindex` positivo - Dialogs implementam focus trap (sem fuga de Tab para o backdrop) - Escape fecha dialogs — sem exceção além de loading de ação irreversível em processamento - Skip link (`Pular para conteúdo principal`) em todas as rotas com sidebar/nav ### Disciplina de elementos semânticos - Tabelas usam ``, ``, `` — nunca divs tabulares - Formulários: `` associado a cada ``; `

`+`` para grupos de radio/checkbox - Status/alertas: `role="alert"` para mensagens de erro imediatas; `aria-live="polite"` para atualizações assíncronas - Gauge do limite: `role="progressbar"` com `aria-valuenow`, `aria-valuemin`, `aria-valuemax`, `aria-label` com o valor em linguagem natural ### Reduced motion ```css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } ``` Incluído em `tokens.css` (fix F-07). Todo skeleton usa gradiente estático sob reduced-motion. Toda transição de Dialog é instantânea. --- ## Audit Response Os achados do relatório de validação UX (`docs/validation-report.md`) com `fix_skill_hint: "design-system"` foram aplicados neste design system. Os achados com `fix_skill_hint: "screen-atlas"` são deferidos para o Step 7. ### F-01 — WCAG 1.4.3 Contraste Mínimo · Severidade 4 (Crítico) **Achado:** `--muted hsl(92,8%,54%)` sobre `--surface (#fff)` produzia contraste de 3,20:1 — abaixo de 4,5:1 para texto normal. Afetava labels, eyebrows, chips e legendas em todos os 6 artefatos visuais. **Estado antes:** `--color-fg-muted: hsl(92, 8%, 54%)` — contraste 3.20:1 (falha WCAG AA) **Estado depois:** `--color-fg-muted: hsl(92, 12%, 42%)` — contraste ≥4.5:1 (aprovado WCAG AA) **Token(s) alterado(s):** `--color-fg-muted` (dark mode e light mode) **Detalhe do ajuste:** a luminosidade foi reduzida de 54% para 42%, e a saturação aumentada de 8% para 12%, para manter a temperatura levemente esverdeada que ancora o token na paleta (o verde-musgo é o único acento cromático, e o muted herda esse undertone intencionalmente). O ajuste foi calibrado sobre `--color-surface` (hsl 220,9%,12% dark) e `--color-background` (hsl 0,0%,100% light), passando em ambas as superfícies. **Inline em `tokens.css`:** ```css /* fix(F-01): raised from hsl(92,8%,54%) [3.2:1] → hsl(92,12%,42%) [≥4.5:1 on surface] */ --color-fg-muted: hsl(92, 12%, 42%); ``` --- ### F-05 — Nomenclatura Fragmentada de Tokens de Espaçamento · Severidade 2 (Médio) **Achado:** tokens de espaçamento com nomenclatura inconsistente nos protótipos: `--space-N` em 01-painel/04-das, `--sp-N` em 02-lancar-receita/05-multi-empresa, literais inline em 03-emitir-nfse. **Estado antes:** múltiplos namespaces (`--space-N`, `--sp-N`, valores literais) **Estado depois:** namespace único `--spacing-*` em conformidade com o Tailwind v4 `--spacing-*` convention (gera classes `p-md`, `gap-lg`, `my-xl` etc.) **Token(s) alterado(s):** toda a escala de espaçamento — 7 tokens de `--spacing-xs` a `--spacing-3xl` **Notas de migração:** os protótipos de screen-atlas (Step 7) devem ser atualizados para usar `--spacing-*`. Referências a `--sp-N` e `--space-N` nos arquivos de tela devem ser substituídas. --- ### F-07 — Transições sem `prefers-reduced-motion` · Severidade 1 (Baixo) **Achado:** transições CSS (`transform: scale`, `transition: .15s`) sem wrap `@media (prefers-reduced-motion: reduce)` em todos os screens. Sem alternativa para usuários sensíveis a movimento. **Estado antes:** ausência de media query reduced-motion **Estado depois:** bloco global ao final de `tokens.css`: ```css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } ``` **Token(s) alterado(s):** não são tokens — é uma regra global CSS aplicada no nível da folha de tokens para garantir que nenhuma superfície importadora esqueça de incluí-la. --- *Achados F-02, F-03, F-04, F-06 estão marcados como `fix_skill_hint: "screen-atlas"` e serão aplicados no Step 7 (screen-atlas). Não são responsabilidade deste design system.* --- ## Catalog Lineage O Tino adota o caminho **catalog** com dois sistemas âncora: **linear-app** e **revolut**. A combinação corresponde à descrição do brand-book ("Linear × Wise") e ao comparável produto ("Conta Azul encontra Linear"). ### Âncora 1 — linear-app **Vendor path:** `.claude/skills/product/design-systems/linear-app/DESIGN.md` **Mood:** "Project management. Ultra-minimal, precise, purple accent." — o sistema mais próximo da postura Precision Warm em termos de disciplina editorial e hierarquia. **O que foi herdado verbatim:** | Dimensão | Valor Linear | Adotado em | |---|---|---| | Canvas escuro profundo | `#08090a` / `#0f1011` | `--color-background` / `--color-surface` (aproximados em HSL) | | Texto primário near-white | `#f7f8f8` (não puro branco) | `--color-fg: hsl(210,10%,97%)` | | Bordas semi-transparentes | `rgba(255,255,255,0.05–0.08)` | `--color-border` e `--color-border-subtle` | | Modelo de elevação por luminância | opacidade branca crescente | `--color-surface-hover: rgba(255,255,255,0.04)` | | Inter Variable como família única | sim | `--font-sans` (Inter Variable) | | Escala tipográfica de 15px como base | "Small" 15px/400 | `--text-base: 0.9375rem` | **O que foi desviado (com justificativa):** | Dimensão | Linear | Tino | Justificativa | |---|---|---|---| | Acento cromático | Indigo-violet `#5e6ad2` | Lima-verde `hsl(82,68%,42%)` | Brand-book especifica "lima-verde saturado" como único acento — o verde carrega "saúde" e "controle fiscal", não "tecnologia de produto" | | Raio de borda de botão | 6px | 4px | Brand-book: "raio de borda máximo de 4px — produto financeiro não é app de jogos" | | Peso tipográfico de display | 510 (entre regular e medium) | 500 (standard medium) | Inter Variable 510 é disponível mas a maioria das stacks Next.js serve Inter sem instância variável — 500 é mais seguro como valor de fallback | | Berkeley Mono | sim (monospace) | IBM Plex Mono | IBM Plex Mono tem cobertura de caracteres brasileiros melhor e é open-source sem licença comercial | --- ### Âncora 2 — revolut **Vendor path:** `.claude/skills/product/design-systems/revolut/DESIGN.md` **Mood:** "Digital banking. Sleek dark interface, gradient cards, fintech precision." — referência para postura fintech e sistema semântico de cores de estado. **O que foi herdado verbatim:** | Dimensão | Valor Revolut | Adotado em | |---|---|---| | Sistema semântico `--rui-*` | danger, warning, teal, blue | `--color-danger`, `--color-warning`, `--color-positive` (valores calibrados) | | Near-black como superfície profissional | `#191c1f` | influenciou `--color-background` (escuro profundo com temperatura neutra) | | Zero inflação de paleta | marketing em near-black + white | Tino: UI em neutros + único acento lima-verde | **O que foi desviado (com justificativa):** | Dimensão | Revolut | Tino | Justificativa | |---|---|---|---| | Raio de botão pill (9999px) | universal | 4px (`--radius-sm`) | Brand-book proíbe pill: "produto financeiro não é app de jogos" | | Aeonik Pro como display | sim | Inter Variable | Aeonik Pro requer licença; Inter Variable é open-source e cobre o espectro de pesos necessário | | Zero sombras | totalmente flat | hairline borders + sombra suave em dialogs | Em dark mode, sombras de elevação leve (dialogs) melhoram a percepção de depth sem violar a postura minimalista | | Positive letter-spacing no body | +0.16px | 0 (tracking normal) | Inter Variable em 15px com tracking 0 já tem legibilidade adequada; tracking positivo é opção do Revolut para Aeonik Pro | --- ## Iconografia **Direção:** Lucide Icons (MIT license) — stroke weight 1.5px, 24×24px grid. Estilo outlined combina com a postura editorial do Linear e com a precisão do Tino. Alternativa: Heroicons (Sam Herbert, MIT) — mesma postura, levemente mais arredondado. **Regra de uso:** - SVGs informativos: `role="img"` + `aria-label` descritivo - SVGs decorativos: `aria-hidden="true"` - Tamanho mínimo: 16px; tamanho padrão: 20px em contexto de UI; 24px em empty states e onboarding --- ## Motion O Tino é **motion-light** por postura de produto financeiro. | Propriedade | Valor | Uso | |---|---|---| | Duração de micro-interação | 150ms | Hover, focus | | Duração de transição de tela | 200ms | Animação de Dialog open/close | | Easing padrão | `ease-out` | Entradas de elemento | | Easing de saída | `ease-in` | Saídas de elemento | Todas as transições são canceladas sob `prefers-reduced-motion: reduce` (fix F-07 — ver Audit Response). Transições proibidas: parallax, animações automáticas de loop, carousels com auto-play. O produto já tem urgência real (DAS, limite) — motion fabricado seria ruído. --- ## Guia de Adoção ### Integração com Next.js + Tailwind v4 ```css /* app/globals.css */ @import "tailwindcss"; @import "../docs/design-system/tokens.css"; /* ou caminhar para o build dir */ ``` Com o bloco `@theme` do `tokens.css`, o Tailwind v4 gera automaticamente: - `bg-background`, `bg-surface`, `bg-surface-raised`, `bg-primary` - `text-fg`, `text-fg-secondary`, `text-fg-muted`, `text-fg-subtle` - `border-border`, `border-border-subtle` - `p-xs`, `p-sm`, `p-md`, `p-lg`, `p-xl` - `rounded-none`, `rounded-sm`, `rounded-md`, `rounded-lg` - `font-sans`, `font-mono` - `text-xs`, `text-sm`, `text-base`, `text-md`, `text-lg`, `text-xl`, `text-2xl`, `text-3xl` ### Regra de ouro Nunca use um valor hexadecimal ou HSL diretamente em uma classe Tailwind ou em um `style=""` de componente. Use sempre o token semântico via classe Tailwind gerada ou via `var(--color-*)` em CSS. Isso garante que: 1. O light mode automático (via `@media prefers-color-scheme: light`) funcione 2. Um futuro tema alternativo (white-label para contador) não exija busca e substituição de hexadecimais ### Extensão de tokens Para adicionar um token, siga o padrão: 1. Declare em `tokens.css` no bloco `@theme` com comentário de intenção 2. Declare o override de light mode em `@media (prefers-color-scheme: light)` → `:root` 3. Documente em `README.md` com a coluna "onde é usado" 4. Referencie o(s) component(s) em `components.md` na seção "Tokens consumed" Tokens sem documentação de intenção são candidatos à remoção na próxima auditoria.