Spacing

Pulso usa uma base de 8pt, com passos intermediários de 4px para ajustes finos. A v3 adiciona cadência vertical para reduzir “caixas dentro de caixas” e deixar grupos mais legíveis.

Escala base

Token	Valor	Uso
`--space-1`	4px	Ajuste mínimo
`--space-2`	8px	Inline spacing
`--space-3`	12px	Compacto
`--space-4`	16px	Default
`--space-5`	20px	Blocos relacionados
`--space-6`	24px	Padding de card
`--space-8`	32px	Grid e seções
`--space-10`	40px	Separação forte
`--space-12`	48px	Margem de página
`--space-16`	64px	Seções editoriais
`--space-20`	80px	Hero / marketing

Cadência v3

Token	Valor	Uso
`--rhythm-cadence-tight`	12px	Itens dentro do mesmo bloco
`--rhythm-cadence-beat`	20px	Blocos dentro do mesmo grupo
`--rhythm-cadence-breath`	40px	Grupos ou seções diferentes

Densidade

A densidade default é comfortable. Aplique no contêiner de superfície com data-density.

Modo	Card	Row	Page	Controle	Uso
`compact`	`14px 16px`	`8px 16px`	`24px`	28px	Tabelas e filas
`comfortable`	`22px 24px`	`12px 22px`	`40px 32px`	32px	Default produto
`spacious`	`32px`	`18px 28px`	`56px 48px`	36px	Leitura executiva


<section data-density="compact" className="gap-[var(--density-gap)] p-[var(--density-pad-page)]">
  {/* operação densa */}
</section>

Alturas de controle

Token	Valor	Uso
`--control-h-compact`	28px	Tabelas densas
`--control-h-default`	32px	Botões e inputs padrão
`--control-h-prominent`	36px	CTA de destaque
`--control-h-hero`	44px	Ação hero
`--touch-target-critical`	48px	Ação crítica em mobile

Diretrizes

Não empilhe bordas quando espaçamento e hierarquia resolvem a leitura.
Use breath entre decisões diferentes; use beat entre partes do mesmo raciocínio.
Em mobile, ação crítica nunca fica abaixo de 48px de alvo de toque.