Composição e hierarquia
Ritmo visual
Como elementos se relacionam verticalmente e como superfícies criam separação. Proximidade semântica: headings se aproximam do conteúdo que introduzem e se afastam do anterior.
Ritmo vertical
Heading → próximo elemento (margin-bottom)
| Heading | → Lead / Subtítulo | → Conteúdo direto | Token lead | Token conteúdo |
|---|---|---|---|---|
| H1 (hero) | 32px | 32px | --sp-8 | --sp-8 |
| H2 | 16px | 48px | --sp-4 | --sp-12 |
| H3 (card) | 8px | 8px | --sp-2 | --sp-2 |
| H4 (card) | 8px | 8px | --sp-2 | --sp-2 |
Lead / Descrição → conteúdo (margin-bottom)
| Par | Valor | Token |
|---|---|---|
| Descrição de seção → grid / conteúdo | 48px | --sp-12 |
| Descrição de hero → CTA | 32px | --sp-8 |
Eyebrow → Heading
8px
--sp-2
Formam uma unidade visual, espaçamento mínimo
Entre parágrafos
16px
--sp-4
Bloco de título de seção → conteúdo principal
| Contexto | Valor | Token |
|---|---|---|
| Padrão (grid, lista, conteúdo) | 48px | --sp-12 |
Dentro de cards
| Par | Valor | Token |
|---|---|---|
| Ícone / imagem → heading do card | 16px | --sp-4 |
| Heading do card (H3/H4) → texto | 8px | --sp-2 |
| Texto → CTA do card | 16px | --sp-4 |
| Entre itens de lista em card | 8px | --sp-2 |
Grids e listas
| Contexto | Valor | Token |
|---|---|---|
| Cards em grid (2–4 colunas) | 24px | --sp-6 |
| Cards em lista vertical (1 coluna) | 16px | --sp-4 |
| Feature rows (itens com ícone) | 16px | --sp-4 |
Micro-espaçamentos internos de componente
| Par | Valor | Token |
|---|---|---|
| Estrelas / rating → texto | 4px | --sp-1 |
| Subtítulo de contexto → corpo | 4px | --sp-1 |
| H4 inline → descrição curta | 2px | — |
| Label de form → input | 6px | — |
Regra geral
Usar apenas tokens para espaçamento vertical entre elementos semânticos. Valores de 2px e 6px são permitidos apenas dentro de componentes fechados (form fields, ratings, badges) onde o espaçamento é cosmético, não estrutural.
Superfícies e separação visual
A separação entre elementos é feita por contraste de fundo, não por bordas. Cards, slides, painéis e containers se destacam do fundo pela diferença de cor de superfície e, quando necessário, por sombra.
Hierarquia de superfícies — modo institucional claro
Fundo de página
--frost
Base geral
Card / painel
--card-bg
Conteúdo elevado
Card interno / destaque
--card-inner
Área dentro de card que precisa de contraste
Quando usar bordas
| Contexto | Borda |
|---|---|
| Tabelas (<table>) | 1px solid var(--divider) |
| Inputs e selects | 1px solid var(--input-border) |
| Dividers horizontais | 1px solid var(--divider) ou <hr> |
| Botão secundário/outline | 1px solid (tokens de estado) |
Onde NÃO usar bordas
Nesses elementos, usar contraste de background e/ou box-shadow para separação visual.
Ícones em superfícies
NimbusIcons são usados diretamente, com cor via token semântico (--accent, --text-secondary, etc.). Por padrão, sem container decorativo (sem div com background + border-radius atrás do ícone). Containers são aceitáveis quando o contexto exige área de toque aumentada ou agrupamento visual intencional.