Spacing · BIT · Casa Hacker DS

escala

01 · 13 tokens

Spacing-01 a spacing-13. Os primeiros 2 são frações do BIT (2px, 4px); os demais são múltiplos.

token	valor	múltiplo do BIT	uso típico
--spacing-01	2px	¼ BIT	ajuste fino · ícones inline
--spacing-02	4px	½ BIT	gap mínimo entre elementos
--spacing-03	8px	1 BIT	padding compacto · gap default
--spacing-04	12px	1.5	padding interno de form
--spacing-05	16px	2	padding standard
--spacing-06	24px	3	gap entre componentes
--spacing-07	32px	4	gap entre seções
--spacing-08	40px	5	padding generoso
--spacing-09	48px	6	margin de seção
--spacing-10	64px	8	main padding
--spacing-11	80px	10	hero spacing
--spacing-12	96px	12	margin entre macro-seções
--spacing-13	160px	20	display spacing

o bit

02 · unidade primitiva

BIT = 8px. Por que 8? É divisível por 2 e 4, encaixa em telas retina (×2, ×3), e cria um grid invisível que conecta padding, sizing, ícones e linha-altura.

8 BITs no horizontal · 32px cada · grid de 264px

modos de densidade

Componentes podem assumir 3 densidades. Para usar, troque os tokens base por seus equivalentes denser.

modo	altura input	altura btn	uso
compact	32px	32px	tabelas densas, toolbars
default	40px	48px	produto padrão
expressive	56px	64px	landings, formulários longos

quando usar cada valor

use

Múltiplos do BIT — mesmo se for valor pequeno (8px sim, 7px não)
spacing-03 (8px) como gap default entre rows
spacing-09 (48px) como margin de section em desktop
spacing-05 (16px) como padding interno padrão

não use

Valores arbitrários (13px, 17px) — quebra o ritmo
spacing-01 / 02 em layouts macro
spacing-13 (160px) em mobile — quebra responsividade
spacings diferentes pra coisas iguais — gera inconsistência

código

05 · css

/* uso de spacing tokens */
.my-card {
  padding: var(--spacing-05) var(--spacing-06);
  margin-bottom: var(--spacing-07);
  gap: var(--spacing-04);
}

/* responsivo */
@media (max-width: 600px) {
  .my-card { padding: var(--spacing-04); }
}