Live Docs

Navigation

Foundations /

stable

Spacing

Scale berbasis 0.25rem (4px). Pakai untuk padding, margin, gap. Komponen Stack/Inline/Grid menerima prop gap dengan nilai dari scale ini.

Scale

Setiap unit = kelipatan 4px (kecuali 0.5/1.5/2.5/3.5 yang half-step).

0

0px · 0px

px

1px · 1px

0.5

0.125rem · 2px

1

0.25rem · 4px

1.5

0.375rem · 6px

2

0.5rem · 8px

2.5

0.625rem · 10px

3

0.75rem · 12px

3.5

0.875rem · 14px

4

1rem · 16px

5

1.25rem · 20px

6

1.5rem · 24px

8

2rem · 32px

10

2.5rem · 40px

12

3rem · 48px

16

4rem · 64px

20

5rem · 80px

24

6rem · 96px

32

8rem · 128px

Cara Pakai

Stack/Inline/Grid menerima string nama scale, bukan nilai px.

// ✅ Pakai nama scale
<Stack gap="4">       // 1rem
<Inline gap="2">      // 0.5rem
<Grid gap="6">        // 1.5rem

// CSS langsung
padding: var(--spacing-4);   // 1rem
margin-top: var(--spacing-8); // 2rem

// ❌ Hindari hard-code
padding: 16px;
margin: 24px;

Filosofi

Why kelipatan 4?

Pixel-perfect

Semua nilai bisa dibagi 4, menghasilkan render tajam tanpa subpixel blur.

Konsisten

Designer pakai 4px grid di Figma, developer pakai scale yang sama. Tidak ada gap.

Mudah diingat

Hanya 19 nilai. Lebih cepat keputusan dibanding free-form spacing.