Fundamentos
Espaço e layout
Grade de 4pt, margem única 16 · 24 · 40 e controles de 28 a 48.
Escala de 4pt#
Os passos pulam de propósito: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 56 · 72. Use a escala do Tailwind que cai nesses valores (1, 2, 3, 4, 5, 6, 8, 10, 14, 18).
px em cima · classe Tailwind embaixo (p-{n}, gap-{n})
Uma margem só#
A margem lateral da página vem de --hb-gutter e muda por largura. Nenhuma tela inventa o próprio padding.
16px · < 768
24px · ≥ 768 (md)
40px · ≥ 1280 (xl)
<div className="hb-gutter">…</div> {/* padding-inline: var(--hb-gutter) */}
<div className="hb-gutter-m">…</div> {/* margin-inline: var(--hb-gutter) */}Alturas de controle#
Botão, input e chip compartilham a mesma escala. Lado a lado, sempre alinham.
Classes: h-c-xs, h-c-sm, h-c-md, h-c-lg (e w-c-*, min-h-c-*). Alvo mínimo de toque é xs (28); ação principal no celular pede md ou lg.
Grade#
O componente Grid usa só 1–6 colunas e os gaps da escala. Os cortes são os da margem: md 768, xl 1280. Não existe grade de 12.
Liquidado
Pendente
Falhou
<Grid columns={{ base: 1, md: 2, xl: 3 }} gap={4}>
<MetricWidget … />
</Grid>Regras#
Faça
- Espaço interno de cartão pelo padding do Card (sm, md, lg).
- Gap entre cartões de 12 (gap-3).
- Seção de página separada por 40–56.
Evite
- Valor arbitrário (p-[13px]).
- Padding lateral próprio na página.
- Controles de alturas diferentes na mesma linha.