Card de ferramenta
Use para itens de catálogo, métricas, resumos de recursos e prévias leves.
Tokens
Cor, espaçamento, raio e movimento
Os tokens são a única fonte de verdade permitida para primitivas visuais. Páginas novas devem consumi-los, não redefini-los.
Fundo
Superfície
Destaque
Raio
6 / 10 / 16
Use apenas `sm`, `md`, `lg`.
Espaçamento
8-32
A maior parte da UI se encaixa na faixa central de espaçamento.
Movimento
150-220ms
As transições devem permanecer sutis e rápidas.
Tipografia
Hierarquia legível com densidade compacta
H1 da página: identidade principal da página
Seção H2: bloco de conteúdo principal
Grupo de cards H3: agrupamento secundário
Card H4: título padrão do card
O texto de abertura é reservado para introduções curtas de página e textos explicativos.
O texto principal é a camada padrão para textos de ajuda, descrições de ferramentas e explicações de resultados.
A legenda é usada para metadados, contadores, notas de campo e auxiliares secundários.
Cards
Contêineres de conteúdo padronizados
Card de lista
Use para linhas de resultado, ferramentas relacionadas, listas de atalhos ou blocos de histórico recente.
Controles
Botões, campos, pills e linguagem de estado
Padrões
Composição de página reutilizável
!
Aviso principal
Use blocos de aviso para textos de ajuda, mensagens de privacidade ou limitações da ferramenta.
| Camada | Caso de uso |
|---|---|
| Token | Cor, tipografia, espaçamento, movimento |
| Base | Primitivos de tipografia e layout |
| Componente | Botões, cards, controles de formulário |