---
name: design-tokens
description: "Criar, revisar ou estender tokens de design dentro do SDD: cores semânticas, spacing, tipografia, radius, sombras, motion, breakpoints, dark mode e componentes. Use quando uma feature visual precisar de sistema, consistência, theme, Tailwind, CSS variables, design system ou acessibilidade."
---

# Design Tokens SDD

## Objetivo

Garantir que a UI use linguagem visual consistente e verificável. Tokens existentes vencem tokens novos; lacunas devem ser preenchidas sem substituir o sistema inteiro.

## Descoberta

Procure antes de propor:

- CSS variables: `:root`, `[data-theme]`, `tokens.css`, `variables.css`, `theme.css`, `globals.css`.
- Tailwind: `tailwind.config.js`, `tailwind.config.ts`, `theme.extend`.
- UI frameworks: MUI, Chakra, shadcn, Radix, design system interno.
- Token JSON: Style Dictionary, Figma export, theme files.
- Fontes: imports, `@font-face`, Google Fonts, CDN.
- Componentes: botões, inputs, cards, modals, nav, feedback, estados.

## Categorias mínimas

- Cor: background, surface, text, border, focus, action, semantic states.
- Espaçamento: escala baseada em 4px ou 8px conforme densidade do produto.
- Tipografia: family, size, weight, line-height e tracking.
- Layout: max-width, grid/container, breakpoints e z-index.
- Forma: radius, border, shadow/elevation.
- Motion: duration, easing, reduced motion.
- Componentes: tokens por botão, input, card, modal, toast, table, nav.
- Tema: light, dark e high contrast quando aplicável.

## Saída

```md
## Tokens
- Fonte existente:
- Estratégia: criar | estender | corrigir lacunas
- Arquivos:

| Categoria | Token | Valor | Uso | Evidência |
|---|---|---|---|---|

## Dark mode
- Suporte atual:
- Lacunas:
- Regra de contraste:
```

## Regras

- Não hardcode valor em componente quando já existe token semântico.
- Não inverter cores para dark mode; ajuste intenção, contraste e sombras.
- Não trocar fonte/paleta global sem Tech Spec ou checkpoint quando afetar produto inteiro.
- Valide contraste AA para texto e foco visível.
