Design Guideline — Central Membership & SSO Hub

1. Tujuan Dokumen

Dokumen ini menjadi panduan desain visual dan pengalaman pengguna (UX) yang wajib diikuti dalam pengembangan antarmuka Central Membership & SSO Hub.

2. Prinsip Desain

1. Mobile-First: Desain dirancang untuk layar mobile terlebih dahulu, kemudian diadaptasi ke tablet dan desktop.
2. Premium & Minimal: Elemen bersih, tidak berlebihan, setiap elemen harus memiliki tujuan.
3. Konsisten: Komponen, spacing, warna, dan tipografi harus konsisten di seluruh halaman.
4. Aksesibel: Kontras warna memenuhi standar WCAG 2.1 AA.
5. Responsif terhadap State: Setiap status (loading, error, success, empty) harus memiliki tampilan yang sesuai.

3. Tema

Sistem mendukung dua tema:

• Dark Mode (default)
• Light Mode

Pengguna dapat beralih antar tema melalui toggle di halaman profil atau pengaturan. Preferensi tema disimpan secara lokal.

4. Palet Warna

4.1 Dark Mode

4.2 Light Mode

4.3 Warna Aksen (Gradient)

Tombol utama dan elemen highlight menggunakan gradient:

background: linear-gradient(135deg, #7C3AED, #A78BFA);

5. Tipografi

Font Utama: Inter (Google Fonts)

Font Monospace (untuk License-ID): JetBrains Mono atau Fira Code

5.1 Skala Tipografi

6. Spacing

Menggunakan sistem kelipatan 4px:

Padding halaman mobile: 24px kiri-kanan

7. Border Radius

8. Komponen Utama

8.1 Button

• Ukuran default: height: 48px, border-radius: 12px, font-weight: 600
• Full-width di mobile
• State: default, hover, active, disabled, loading

8.2 Input Field

• height: 52px
• border-radius: 12px
• border: 1px solid border
• Label selalu di atas input (bukan floating label)
• State: default, focus, error, disabled
• Error message muncul di bawah input, berwarna merah

8.3 Status Badge

8.4 License-ID Card

• Background: bg-elevated dengan border subtle
• Font: monospace (JetBrains Mono)
• Tombol copy di sisi kanan
• Muncul feedback "Disalin!" setelah diklik (toast 2 detik)

8.5 Product Card

Kartu langganan produk di dashboard:

┌──────────────────────────────────┐
│  [Logo] Nama Produk    [● Aktif] │
│  ─────────────────────────────── │
│  License ID                      │
│  NTO-A1B2-C3D4-E5F6     [Copy]  │
│  ─────────────────────────────── │
│  [Free Forever]    Buka App →   │
└──────────────────────────────────┘

8.6 Toast / Snackbar

• Muncul di bagian bawah layar (mobile), atas kanan (desktop)
• Durasi: 3 detik, dapat ditutup manual
• Tipe: success, error, warning, info

8.7 Bottom Navigation (Mobile)

4 tab navigasi:

9. Animasi & Transisi

Semua animasi menggunakan ease-out easing.

10. Responsive Breakpoints

11. Dark / Light Mode Toggle

• Toggle tersedia di halaman Profil dan Header (ikon matahari/bulan).
• Transisi tema: 200ms fade semua elemen.
• Preferensi disimpan di localStorage dan diaplikasikan sebelum render (mencegah flash).

12. Aturan UX

1. Setiap aksi destruktif (batalkan, logout) harus meminta konfirmasi.
2. Tombol utama hanya satu per halaman (tidak membingungkan pengguna).
3. Pesan error harus spesifik dan memberi arahan solusi, bukan hanya kode error.
4. Halaman kosong (empty state) harus memiliki ilustrasi dan CTA yang relevan.
5. Setiap proses async harus menampilkan state loading.
6. Formulir yang gagal harus mempertahankan data yang sudah diisi.
7. License-ID harus selalu mudah disalin (satu tap/klik).
8. Navigasi utama selalu terlihat di mobile (sticky bottom nav).