Dua Fungsi Warna dalam UI

Warna di UI punya 2 peran berbeda yang penting dipahami:

Structural Color (Background/Surface)

Warna latar belakang dan struktur — tidak mengundang aksi:

• Background halaman
• Surface card
• Border/divider
• Sidebar, header background

Biasanya menggunakan neutral/gray tones:

:root {
  --bg-primary: #ffffff;     /* Background utama */
  --bg-secondary: #F9FAFB;  /* Background sekunder (card, sidebar) */
  --bg-tertiary: #F3F4F6;   /* Background tertier (hover, selected) */
  --border: #E5E7EB;        /* Border dan divider */
}

Interactive Color (Action)

Warna yang mengundang aksi — elemen yang bisa diklik:

• Button primary
• Link
• Toggle aktif
• Icon aksi

Menggunakan warna aksen/brand yang menonjol:

:root {
  --interactive-primary: #2563EB;    /* Button, link utama */
  --interactive-hover: #1D4ED8;      /* Hover state */
  --interactive-active: #1E40AF;     /* Active/pressed state */
  --interactive-disabled: #93C5FD;   /* Disabled state */
}

Aturan Emas

1. Structural color harus netral — jangan gunakan warna cerah untuk background
2. Interactive color harus menonjol — harus jelas terlihat dari elemen sekitar
3. Jangan campurkan — background section jangan pakai warna yang sama dengan button
4. Konsisten — semua elemen interaktif utama pakai warna yang sama

Apple menggunakan structural gray yang sangat halus dan interactive blue yang konsisten di seluruh ecosystem mereka.