Espacamento | DS CANTA.

Escala de Espacamento

Cada token representa um multiplo da unidade base de 4px. Use esses valores para margin, padding, gap e posicionamento.

0
0px

1
4px

2
8px

3
12px

4
16px

5
20px

6
24px

8
32px

10
40px

12
48px

16
64px

20
80px

24
96px

32
128px

Tokens de Espacamento

Tabela completa de tokens SCSS com valores em rem e pixels.

Token	Valor	Pixels	Uso
`$spacing-0`	`0`	0px	Reset
`$spacing-1`	`0.25rem`	4px	Espacamento minimo, inline icons
`$spacing-2`	`0.5rem`	8px	Gap entre items inline, padding compacto
`$spacing-3`	`0.75rem`	12px	Padding interno de inputs, badges
`$spacing-4`	`1rem`	16px	Espacamento padrao, gap de grid
`$spacing-5`	`1.25rem`	20px	Padding de cards, inputs maiores
`$spacing-6`	`1.5rem`	24px	Padding de secoes, sidebar
`$spacing-8`	`2rem`	32px	Separacao entre secoes
`$spacing-10`	`2.5rem`	40px	Margem de secoes maiores
`$spacing-12`	`3rem`	48px	Padding de page headers
`$spacing-16`	`4rem`	64px	Grandes separacoes
`$spacing-20`	`5rem`	80px	Hero padding
`$spacing-24`	`6rem`	96px	Espacamento hero/landing
`$spacing-32`	`8rem`	128px	Espacamento maximo

Variaveis SCSS

$spacing-0:  0;
$spacing-1:  0.25rem;   // 4px
$spacing-2:  0.5rem;    // 8px
$spacing-3:  0.75rem;   // 12px
$spacing-4:  1rem;      // 16px
$spacing-5:  1.25rem;   // 20px
$spacing-6:  1.5rem;    // 24px
$spacing-8:  2rem;      // 32px
$spacing-10: 2.5rem;    // 40px
$spacing-12: 3rem;      // 48px
$spacing-16: 4rem;      // 64px
$spacing-20: 5rem;      // 80px
$spacing-24: 6rem;      // 96px
$spacing-32: 8rem;      // 128px

var(--canta-spacing-0)
var(--canta-spacing-1)
var(--canta-spacing-2)
var(--canta-spacing-3)
var(--canta-spacing-4)
var(--canta-spacing-6)
var(--canta-spacing-8)
var(--canta-spacing-12)
var(--canta-spacing-16)
var(--canta-spacing-20)
var(--canta-spacing-24)
var(--canta-spacing-32)

Exemplos de Uso

Como aplicar os tokens de espacamento em situacoes reais.

.card {
  margin-bottom: $spacing-8;  // 32px entre cards
}

.section {
  margin-bottom: $spacing-12; // 48px entre secoes
}

.card {
  padding: $spacing-6;           // 24px uniforme
}

.button {
  padding: $spacing-3 $spacing-6; // 12px vertical, 24px horizontal
}

.input {
  padding: $spacing-3 $spacing-4; // 12px vertical, 16px horizontal
}

.button-group {
  display: flex;
  gap: $spacing-4;    // 16px entre botoes
}

.grid {
  display: grid;
  gap: $spacing-6;    // 24px entre colunas/linhas
}