Spacing

Een consistente spacing schaal gebaseerd op een 4px grid systeem voor harmonische layouts.

Basis

Spacing Scale

Alle spacing waarden zijn gebaseerd op een 4px grid. Dit zorgt voor consistente verhoudingen door het hele systeem.

0 --space-0

4px --space-1

8px --space-2

12px --space-3

16px --space-4

20px --space-5

24px --space-6

32px --space-8

40px --space-10

48px --space-12

64px --space-16

80px --space-20

96px --space-24

Visueel

Spacing in actie

space-2

8px padding

space-4

16px padding

space-6

24px padding

space-8

32px padding

Layout

Section Spacing

Verticale ruimte tussen secties voor een gebalanceerde pagina-structuur.

Token	Waarde	Gebruik
`--section-spacing-sm`	48px	Kleine secties
`--section-spacing-md`	64px	Standaard secties
`--section-spacing-lg`	96px	Grote secties
`--section-spacing-xl`	128px	Hero secties

Containers

Container Widths

Maximale breedtes voor verschillende content types.

Leestekst 672px

--container-prose

Content 896px

--container-content

Breed 1152px

--container-wide

Maximaal 1280px

--container-full

Responsive

Container Padding

Horizontale padding die meegroeit met de viewport.

Token	Waarde	Breakpoint
`--container-padding-mobile`	16px	< 768px
`--container-padding-tablet`	24px	768px - 1023px
`--container-padding-desktop`	32px	≥ 1024px

Richtlijnen

Gebruik

4px Grid

Gebruik altijd waarden uit de spacing scale. Vermijd willekeurige pixel waarden om consistentie te behouden.

Hiërarchie

Gebruik grotere spacing voor belangrijkere scheidingen. Secties krijgen meer ruimte dan elementen binnen een component.

Consistentie

Houd gerelateerde elementen op dezelfde afstand. Gebruik space-4 of space-6 voor standaard element spacing.