Spacing

Os tokens de spacing definem a escala de espaçamento usada para padding, margin e gap em toda a interface. A escala segue um ritmo irregular que prioriza os valores mais comuns em UI — 4px e seus múltiplos.

Escala visual

Tokens de referência

Token	Valor	Contexto típico de uso
--db1-spacing-none	0px	Remove espaçamento explicitamente em overrides.
--db1-spacing-1	4px	Espaço mínimo entre ícone e label, entre badge e conteúdo.
--db1-spacing-2	8px	Padding interno de chips, tags e botões compactos.
--db1-spacing-3	12px	Gap entre itens de lista compacta, padding vertical de inputs pequenos.
--db1-spacing-4	16px	Padding padrão de botões e inputs. Espaço entre seções próximas.
--db1-spacing-5	20px	Gap entre elementos de formulário, padding de cards compactos.
--db1-spacing-6	24px	Padding interno de cards e painéis. Espaço entre grupos de formulário.
--db1-spacing-7	32px	Separação entre seções de conteúdo dentro de uma mesma tela.
--db1-spacing-8	40px	Margin entre blocos de conteúdo distintos, padding de modais.
--db1-spacing-9	48px	Padding de seções de página, espaço entre componentes de alto nível.
--db1-spacing-10	56px	Espaçamento entre áreas de layout — coluna lateral e conteúdo principal.
--db1-spacing-11	64px	Espaçamento de nível de página, margens de containers largos.
--db1-spacing-12	72px	Padding de hero sections, separação entre blocos de landing page.
--db1-spacing-13	80px	Espaçamento máximo da escala. Espaço entre seções de alto impacto visual.