Negative Space — Ruang Kosong yang Berbicara

Negative space (whitespace) adalah area kosong di antara dan di sekitar elemen. Ini bukan "ruang yang terbuang" — ini adalah salah satu tool desain paling kuat.

Mengapa Whitespace Penting?

1. Readability — Teks dengan spacing yang cukup jauh lebih mudah dibaca
2. Focus — Whitespace mengarahkan perhatian ke konten penting
3. Elegance — Website premium menggunakan whitespace secara generous
4. Breathability — Layout yang penuh sesak terasa "murah" dan overwhelming

Micro vs Macro Whitespace

Micro whitespace — ruang kecil di dalam komponen:

• Jarak antar huruf (letter-spacing)
• Jarak antar baris (line-height)
• Padding di dalam button, card

Macro whitespace — ruang besar antar section:

• Margin antar section halaman
• Jarak antara header dan konten
• Ruang kosong di sidebar

Contoh Praktis

Buruk — terlalu penuh:

.card { padding: 8px; margin-bottom: 4px; }
.section { margin-bottom: 8px; }

Baik — breathing room:

.card { padding: 24px; margin-bottom: 16px; }
.section { margin-bottom: 64px; }

Prinsip: "When in doubt, add more space"

Designer pemula cenderung takut dengan ruang kosong dan mengisi setiap pixel. Designer berpengalaman tahu bahwa ruang kosong menambah nilai.

Bandingkan:

• Apple.com — sangat banyak whitespace, terasa premium dan fokus
• Website berita yang penuh iklan — terasa overwhelming dan murah

Spacing Scale

Gunakan spacing yang terstruktur dan progressif:

:root {
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */
  --space-3xl: 4rem;    /* 64px */
}

Apple, Stripe, dan Notion adalah contoh sempurna penggunaan negative space — kontennya "bernapas".