# Design System & UI Guidelines (design.md)
## WasteBank - Platform Bank Sampah Digital & Daur Ulang Modern

**Mata Pelajaran:** Pemrograman Web  
**Jenjang:** SMK TJKT / PPLG Kelas XII Semester 5  
**Kelompok:** Kelompok 2 PW  
**Anggota Kelompok:**
1. 21. Kamarul Arifin Muzaffar
2. 27. Muhammad Fauzan Habibul Adha
3. 30. Mutiara Endah Gusti Ayu
4. 32. Niken Ayu Larasati
5. 39. Zahra Syaila Hidayat

**Versi:** 1.0  
**Tanggal:** 18 Agustus 2026  
**Status:** Approved Design Guidelines  
**Acuan PRD:** [4.1_Tugas_Perancangan_Kelompok2.md](4.1_Tugas_Perancangan_Kelompok2.md)

---

# 1. Overview (Brand & Style)

### A. Brand Identity & Visual Positioning
**WasteBank** adalah platform digital pengelolaan dan penyetoran sampah daur ulang terintegrasi yang memberdayakan masyarakat, generasi muda (pelajar/mahasiswa), dan unit Bank Sampah lokal. Visual aplikasi dirancang untuk menghapus stigma bahwa urusan sampah itu "kotor, kuno, dan ribet", mengubahnya menjadi pengalaman digital yang **segar, bernilai ekonomi, transparan, dan membanggakan (Eco-Tech & Rewarding)**.

- **Karakter Visual (Tone & Mood):**
  - **Fresh & Eco-Futuristic (*Fresh Green & Clean*):** Menggabungkan palet warna hijau alam yang menyegarkan dengan estetika modern antarmuka teknologi digital (*Clean Tech*).
  - **Transparan & Akuntabel (*Trust-Driven*):** Berdasarkan hasil survei di mana 73,7% responden menuntut verifikasi bank sampah dan 61,8% menuntut pencatatan transaksi yang jelas, UI mengedepankan kartu status ringkas, rincian berat timbangan presisi, dan indikator keamanan tepercaya.
  - **Mudah & Menyenangkan (*Frictionless & Rewarding*):** Mengurangi kerumitan prosedur dengan tombol aksi satu sentuhan (*One-Tap Pickup*), peta interaktif intuitif, dan badge poin reward yang menarik minat generasi muda.

### B. Tema Desain (Visual Theme)
- **Eco-Modern Card & Bento Grid Architecture:** Memanfaatkan struktur kartu dengan sudut membulat halus (*soft rounded corners*), bayangan bertingkat (*subtle layered shadows*), dan ikonografi ramah lingkungan yang konsisten.
- **Glassmorphic Floating Overlays:** Menggunakan panel semi-transparan (*frosted glass effect*) pada bar kontrol peta dan status pelacakan penjemputan *real-time*.

---

# 2. Colors (Skema Warna)

Palet warna **WasteBank** dibangun secara harmonis menggunakan sistem hierarki warna berbasis fungsi (Brand, Aksi, Status Lingkungan, dan Netral).

### A. Pembagian Peran Warna

| Kategori | Nama Token | Kode HEX | Peran & Kegunaan |
| :--- | :--- | :--- | :--- |
| **Primary (Eco Green)** | `Emerald Core` | `#16a34a` | Warna identitas utama, tombol CTA primer, header status, logo |
| **Primary Hover** | `Deep Emerald` | `#15803d` | Status hover/aktif pada tombol utama dan tautan |
| **Primary Light (Tint)**| `Mint Soft` | `#dcfce7` | Background badge, highlight saldo, area kartu aktif |
| **Secondary (Accent)** | `Eco Cyan / Teal` | `#0d9488` | Tombol sekunder, filter kategori, navigasi tab |
| **Accent Gold (Rewards)**| `Eco Gold / Poin` | `#eab308` | Ikon saldo koin, badge reward poin nasabah, bintang rating |
| **Success (Verified)** | `Forest Green` | `#059669` | Status order "Selesai", verifikasi mitra, tanda timbangan sah |
| **Warning (Pending)** | `Warm Amber` | `#f59e0b` | Status order "Menunggu Penjemputan", peringatan kuota jemput |
| **Info (Process)** | `Ocean Blue` | `#3b82f6` | Status order "Assigned" atau "On The Way", notifikasi jadwal |
| **Danger (Alert)** | `Coral Crimson` | `#ef4444` | Tombol batal order, status order ditolak, validasi error |
| **Dark Neutral (Text)** | `Slate Black` | `#0f172a` | Warna teks judul utama (H1–H3) dan label berbobot tinggi |
| **Medium Neutral** | `Cool Slate` | `#64748b` | Warna teks paragraf, deskripsi sub-label, garis border card |
| **Light Neutral (Surface)**| `Pure White` | `#ffffff` | Latar belakang kartu (*card background*), modal box, input form |
| **Canvas Background** | `Soft Eco Grey` | `#f8fafc` | Latar belakang seluruh halaman aplikasi web |

---

### B. Deklarasi Variabel CSS (`:root`)

```css
:root {
  /* Brand Primary Colors */
  --color-primary: #16a34a;
  --color-primary-hover: #15803d;
  --color-primary-light: #dcfce7;
  --color-primary-dark: #14532d;

  /* Accent & Secondary */
  --color-secondary: #0d9488;
  --color-secondary-hover: #0f766e;
  --color-rewards-gold: #eab308;
  --color-rewards-bg: #fef9c3;

  /* Status Semantics */
  --color-status-success: #059669;
  --color-status-success-bg: #d1fae5;
  --color-status-warning: #f59e0b;
  --color-status-warning-bg: #fef3c7;
  --color-status-info: #3b82f6;
  --color-status-info-bg: #dbeafe;
  --color-status-danger: #ef4444;
  --color-status-danger-bg: #fee2e2;

  /* Neutral Typography & Surfaces */
  --color-bg-canvas: #f8fafc;
  --color-surface-card: #ffffff;
  --color-surface-muted: #f1f5f9;
  --color-text-main: #0f172a;
  --color-text-muted: #64748b;
  --color-text-light: #94a3b8;
  --color-border-card: #e2e8f0;
  --color-border-focus: #16a34a;
}
```

---

# 3. Typography (Tipografi)

### A. Pilihan Font Family
- **Font Judul & UI Brand (`Heading & Controls`):** `Plus Jakarta Sans`, sans-serif (Memberikan kesan modern, kokoh, berkarakter tech-startup).
- **Font Tubuh & Angka Finansial (`Body & Numbers`):** `Inter`, system-ui, sans-serif (Sangat mudah dibaca pada layar kecil, angka desimal berat kg dan saldo tercetak presisi).

### B. Hierarki & Skala Ukuran Font

| Tingkat / Elemen | Variabel CSS | Ukuran (Desktop) | Ukuran (Mobile) | Bobot (Weight) | Kegunaan Utama |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **Hero Title (`<h1>`)** | `--fs-h1` | `2.25rem` (36px) | `1.75rem` (28px) | Extra-Bold (800) | Judul utama Hero Banner, headline halaman |
| **Section Title (`<h2>`)**| `--fs-h2` | `1.50rem` (24px) | `1.25rem` (20px) | Bold (700) | Judul section katalog harga & pelacakan |
| **Card Title (`<h3>`)** | `--fs-h3` | `1.125rem` (18px)| `1.00rem` (16px) | Semi-Bold (600)| Nama jenis sampah, nama bank sampah unit |
| **Body Regular (`<p>`)** | `--fs-body` | `0.938rem` (15px)| `0.875rem` (14px)| Regular (400) | Deskripsi artikel edukasi, catatan jemput |
| **Body Bold** | `--fs-body-b` | `0.938rem` (15px)| `0.875rem` (14px)| Semi-Bold (600)| Nominal harga per kg, saldo nasabah |
| **Caption / Badge (`<small>`)**|`--fs-caption`|`0.75rem` (12px) | `0.75rem` (12px) | Medium (500) | Label status order, tanggal transaksi |

```css
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--fs-body);
  color: var(--color-text-main);
  background-color: var(--color-bg-canvas);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand-title, .ui-heading {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--color-text-main);
  line-height: 1.25;
}
```

---

# 4. Layout & Spacing (Sistem Grid & Jarak)

### A. Sistem Layout & Grid
- **Container Desktop:** Lebar maksimal `1200px` terpusat (*margin: 0 auto*), padding horizontal `24px` dengan sistem **12-Column Grid** (gap: `24px`).
- **Container Mobile:** Lebar `100%`, padding horizontal `16px` dengan sistem **Single / 2-Column Responsive Bento Layout**.
- **Peta Interaktif:** Menggunakan mode *Hybrid Layout* — Full Viewport pada mode pencarian `/peta` dan *Card Embedded* pada halaman formulir penjemputan.

### B. Skala Spacing (8px Grid Scale System)

```css
:root {
  --space-2xs: 4px;   /* Jarak micro antara ikon koin & angka saldo */
  --space-xs:  8px;   /* Jarak internal badge status & pill chip */
  --space-sm:  12px;  /* Spacing internal button kecil & item list */
  --space-md:  16px;  /* Padding standar formulir input & isi card */
  --space-lg:  24px;  /* Padding utama container card & gap grid antar card */
  --space-xl:  32px;  /* Margin antar section konten di halaman */
  --space-2xl: 48px;  /* Spacing vertikal section hero banner */
}
```

---

# 5. Elevation & Depth (Tingkatan Bayangan)

Sistem elevasi digunakan untuk membedakan lapisan permukaan dasar dengan kartu interaktif dan modal dialog.

| Tingkat Elevasi | Variabel CSS | Nilai Shadow Box | Implementasi pada WasteBank UI |
| :--- | :--- | :--- | :--- |
| **Level 0 (Flat)** | `none` | `none` | Latar belakang canvas, input form default |
| **Level 1 (Card Rest)** | `--shadow-sm` | `0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04)` | Kartu katalog harga sampah, list riwayat order |
| **Level 2 (Hover/Active)**| `--shadow-md` | `0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06)`| Efek hover kartu, floating chip filter peta |
| **Level 3 (Floating UI)** | `--shadow-lg` | `0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.05)` | Floating Action Button, Bottom Navigation Mobile |
| **Level 4 (Modal Dialog)**| `--shadow-xl` | `0 20px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.08)` | Modal konfirmasi berat timbangan, pop-up setor |

```css
:root {
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
}
```

---

# 6. Shapes & Border Radius (Bentuk & Sudut)

Menghasilkan estetika antarmuka yang ramah pengguna, bersih, dan modern:

- **Radius Sm (`6px`):** Digunakan untuk badge status kecil dan tag jenis sampah.
- **Radius Md (`10px`):** Digunakan untuk kolom input form, tombol standar, dan dropdown.
- **Radius Lg (`16px`):** Digunakan untuk kartu ringkasan saldo, kartu harga sampah, dan modal popup.
- **Radius Pill (`9999px`):** Digunakan untuk tombol utama "Minta Penjemputan", Floating Button, dan Chip Filter Kategori.

```css
:root {
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
}
```

---

# 7. Components (Spesifikasi Komponen UI Utama)

### A. Tombol Utama (*Primary Action Button*)

```html
<!-- Tombol Aksi Permintaan Jemput Sampah -->
<button class="btn btn-primary">
  <svg class="btn-icon" viewBox="0 0 24 24"><!-- Ikon Mobil Pickup --></svg>
  <span>Minta Penjemputan Sampah</span>
</button>
```

```css
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--fs-body);
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.35);
}

.btn-primary:focus {
  outline: 3px solid rgba(22, 163, 74, 0.4);
  outline-offset: 2px;
}

.btn-primary:disabled {
  background-color: var(--color-text-light);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
```

---

### B. Kartu Katalog Harga Sampah (*Waste Price Card*)

```html
<!-- Kartu Harga Sampah Botol PET -->
<div class="waste-price-card">
  <div class="card-header">
    <span class="badge badge-anorganik">Anorganik</span>
    <span class="reward-points">+10 Poin / kg</span>
  </div>
  <h3 class="waste-name">Botol Plastik Bening (PET)</h3>
  <p class="waste-criteria">Kondisi bersih, tanpa air, tutup dilepas.</p>
  <div class="card-footer">
    <span class="price-label">Harga Beli:</span>
    <span class="price-val">Rp 4.500 <small>/ kg</small></span>
  </div>
</div>
```

```css
.waste-price-card {
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.waste-price-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
}

.badge-anorganik {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: 700;
}

.reward-points {
  color: #854d0e;
  background-color: var(--color-rewards-bg);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: 600;
}

.waste-name {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2xs);
}

.waste-criteria {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--color-border-card);
}

.price-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-primary);
}
```

---

### C. Kolom Input Formulir Penjemputan (*Form Input Field*)

```css
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-md);
}

.form-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--color-text-main);
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-body);
  color: var(--color-text-main);
  background-color: var(--color-surface-card);
  border: 1.5px solid var(--color-border-card);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.form-control:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.form-control::placeholder {
  color: var(--color-text-light);
}

.form-control.is-invalid {
  border-color: var(--color-status-danger);
  background-color: #fffaf0;
}
```

---

# 8. Do's and Don'ts (Panduan Praktik Desain UI)

Berikut panduan ketat implementasi desain antarmuka untuk tim pengembang **WasteBank**:

###  DO (Praktik Terbaik yang Direkomendasikan)

1. **Gunakan Hierarki Nilai Ekonomi yang Sangat Jelas**  
   Nominal rupiah per kg (`Rp 4.500 / kg`) dan saldo tabungan nasabah wajib dicetak tebal (*font-weight: 700/800*) dengan warna primer hijau agar pengguna langsung merasakan nilai nyata dari pemilahan sampah.
2. **Sediakan Status Pelacakan Penjemputan Real-Time**  
   Gunakan indikator visual (*stepper* atau status badge warna: Kuning untuk Pending, Biru untuk Ditugaskan, Hijau untuk Selesai) agar nasabah memiliki kepastian waktu penjemputan sampah.
3. **Penyederhanaan Formulir Pemesanan (*Low-Friction Form*)**  
   Gunakan menu *dropdown* atau *chip-select* untuk memilih jadwal ketersediaan penjemputan daripada menyuruh pengguna mengetik tanggal manual. Gunakan deteksi lokasi otomatis via GPS / klik pin pada peta untuk mengisi koordinat alamat secara otomatis tanpa mengharuskan pengguna mengetik manual lintang/bujur.
4. **Tampilkan Verifikasi Transparansi Timbangan**  
   Saat transaksi selesai, sajikan rincian ringkas hasil timbangan per kategori (Kardus 5.2 kg x Rp 1.800 = Rp 9.360) sebagai bukti transparansi transaksi.
5. **Mobile-First Touch Target (> 44px)**  
   Pastikan semua tombol aksi dan chip kategori memiliki area sentuh minimal 44x44px untuk kenyamanan jempol saat diakses melalui smartphone.

---

###  DON'T (Praktik yang Dilarang)

1. **Dilarang Menggunakan Nuansa Warna Kusam / Kotor (*Muddy Brown/Grey Theme*)**  
   Hindari warna cokelat kusam atau abu-abu gelap berlebihan yang memperkuat citra sampah sebagai barang kotor. Gunakan palet hijau segar dan latar belakang putih bersih.
2. **Dilarang Menyembunyikan Rincian Pemotongan atau Harga Satuan**  
   Jangan hanya menampilkan nominal total saldo tanpa rincian berat dan harga per kilogram, karena akan menurunkan kepercayaan nasabah (Merujuk survei: 61,8% butuh catatan transparan).
3. **Dilarang Membuat Formulir Penjemputan yang Panjang dan Berbelit**  
   Hindari formulir multi-langkah lebih dari 3 tahap yang berisiko membuat calon nasabah membatalkan niat menyetor sampah.
4. **Dilarang Menampilkan Peta Kosong Tanpa Panduan Filter**  
   Peta tidak boleh dibiarkan hanya berupa pin tanpa panel info; wajib menyediakan filter kategori sampah yang diterima oleh masing-masing unit Bank Sampah.
5. **Dilarang Menggunakan Dialog Konfirmasi yang Menghilangkan Data Input**  
   Jika pengguna melakukan kesalahan input formulir, jangan pernah me-reset isian formulir yang sudah diketik sebelumnya.

---

# Rangkuman Integrasi Teknis

Dokumen sistem desain visual (**`5.1_Tugas_Desain_Kelompok2.md`**) ini menjadi panduan baku bagi tim pengembang Frontend dalam mengimplementasikan komponen, layout, serta styling berbasis HTML & Vanilla CSS pada aplikasi **WasteBank**.

---

### Lembar Pengesahan Design System

| Nama Anggota | No. Absen | Peran Desain UI/UX | Tanda Tangan |
| :--- | :---: | :--- | :---: |
| **Kamarul Arifin Muzaffar** | 21 | Layout Architect & Grid Specifier | (.......................) |
| **Muhammad Fauzan Habibul Adha** | 27 | Component States & Token Variable Master | (.......................) |
| **Mutiara Endah Gusti Ayu** | 30 | Typography & Content Hierarchy Specialist | (.......................) |
| **Niken Ayu Larasati** | 32 | Color Palette & Semantic System Designer | (.......................) |
| **Zahra Syaila Hidayat** | 39 | UI Accessibility & Do's/Don'ts Quality Assurance | (.......................) |