Subtlety dan Border Radius

Detail kecil membuat perbedaan besar antara desain amatir dan profesional. Dua aspek paling penting: subtlety dan corner radius.

Subtlety dalam Desain

Kurang itu lebih. Efek yang halus hampir selalu lebih baik dari efek yang besar:

/* ❌ Terlalu berlebihan */
.card-loud {
  border: 3px solid #000;
  box-shadow: 5px 5px 0 #000;
  border-radius: 20px;
}

/* ✅ Subtle dan elegan */
.card-subtle {
  border: 1px solid #E5E7EB;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border-radius: 0.75rem;
}

Corner Radius — Consistency is Key

Border-radius memberikan "personality" pada desain. Yang penting: konsistensi.

Radius scale yang umum:

:root {
  --radius-sm: 0.25rem;   /* 4px — badge, tag */
  --radius-md: 0.5rem;    /* 8px — input, card kecil */
  --radius-lg: 0.75rem;   /* 12px — card, modal */
  --radius-xl: 1rem;      /* 16px — card besar */
  --radius-full: 9999px;  /* Pill shape — button, avatar */
}

Aturan Radius

1. Elemen di dalam elemen: radius inner harus lebih kecil dari outer
2. Konsisten: semua card pakai radius yang sama, semua button pakai radius yang sama
3. Nested radius: jika container punya radius: 12px dengan padding: 8px, inner element idealnya radius: 4px (12 - 8 = 4)
4. Context matters: app formal (bank) → radius kecil/none. App friendly (social) → radius besar

Tips

1. Pilih 1 style dan konsisten — jangan mix sharp corners dan rounded di satu halaman
2. Avatar selalu bulat (border-radius: 9999px)
3. Full pill shape untuk button kecil dan tag terlihat modern
4. Test di semua ukuran — radius yang bagus di desktop mungkin terlalu besar di mobile