# DESIGN.md (v2)

# MUSYAWARA

Platform Musyawarah dan Pemilihan Digital

---

## DESIGN PHILOSOPHY

Musyawara bukan aplikasi voting.

Musyawara adalah platform yang membantu organisasi mengambil keputusan bersama secara aman, transparan, dan terpercaya.

Visual harus mencerminkan:

- Amanah
- Transparan
- Modern
- Premium
- Profesional
- Human Centered

Inspirasi:

- Linear
- Stripe
- Arc Browser
- Notion
- Apple Liquid Glass
- Future.co

Hindari:

- Dashboard Pemerintahan
- Admin Template Klasik
- Bootstrap Jadul
- Tampilan Form Berat

---

## DESIGN LANGUAGE

**Nama Sistem:** Musyawara

**Tagline:** Keputusan Bersama, Secara Digital

---

## VISUAL STYLE

**Pendekatan:** Liquid Glass SaaS

**Karakter:**

- Soft Blur
- Soft Glow
- Layered Transparency
- Floating Components
- High Contrast Typography
- Large White Space

**Prinsip:** Trust First — Bukan Fancy First

---

## TYPOGRAPHY

### Heading

| Property | Value    |
|----------|----------|
| Font     | Fustat   |
| Weight   | 700, 800 |

### Body

| Property | Value        |
|----------|--------------|
| Font     | Inter        |
| Weight   | 400, 500, 600|

### Font Rendering

```css
-webkit-font-smoothing: antialiased;
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
```

### Import

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Fustat:wght@700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
```

---

## FONT SCALE

| Element       | Size      | Line Height | Letter Spacing |
|---------------|-----------|-------------|----------------|
| Hero Title    | 72–80px   | 1.05        | -2px           |
| Section Title | 48px      | 1.1         | -1px           |
| Card Title    | 20px      | 1.3         | -0.3px         |
| Body          | 16px      | 1.6         | 0              |
| Small Text    | 14px      | 1.5         | 0              |

---

## COLOR SYSTEM

| Name              | Value                    | Usage                        |
|-------------------|--------------------------|------------------------------|
| Primary Blue      | `#0084FF`                | CTA, aktif, primary action   |
| Secondary Blue    | `#60B1FF`                | Hover, highlight, glow       |
| Accent Blue       | `#319AFF`                | Link, badge, outline         |
| Dark Text         | `#0F172A`                | Heading, body utama          |
| Secondary Text    | `#64748B`                | Subtext, placeholder, meta   |
| Background        | `#FFFFFF`                | Halaman utama                |
| Surface           | `rgba(255,255,255,0.3)`  | Glass card, glass panel      |
| Success           | `#16A34A`                | Status sukses, verified      |
| Warning           | `#F59E0B`                | Status peringatan            |
| Danger            | `#DC2626`                | Error, status bahaya         |

### CSS Custom Properties

```css
:root {
  --color-primary:        #0084FF;
  --color-primary-light:  #60B1FF;
  --color-accent:         #319AFF;
  --color-dark:           #0F172A;
  --color-secondary-text: #64748B;
  --color-bg:             #FFFFFF;
  --color-surface:        rgba(255, 255, 255, 0.3);
  --color-success:        #16A34A;
  --color-warning:        #F59E0B;
  --color-danger:         #DC2626;
}
```

---

## GLOBAL BACKGROUND

**Default:** Pure White `#FFFFFF`

**Efek Tambahan:** Layered Blur Glow

```css
/* Background ambient glow */
body::before {
  content: '';
  position: fixed;
  top: -200px;
  left: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(96,177,255,0.18) 0%, transparent 70%);
  filter: blur(150px);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  top: -100px;
  right: -150px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(49,154,255,0.12) 0%, transparent 70%);
  filter: blur(200px);
  pointer-events: none;
  z-index: 0;
}
```

**Tujuan:** Memberikan kesan modern tanpa mengganggu keterbacaan.

---

## NAVBAR

**Style:** Strong Liquid Glass  
**Position:** Sticky  
**Top:** 30px  
**Width:** Fit content (center aligned)

```css
.navbar {
  position: sticky;
  top: 30px;
  width: fit-content;
  margin: 0 auto;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  background: rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow:
    inset 0px 4px 4px rgba(255, 255, 255, 0.25),
    0 8px 32px rgba(0, 132, 255, 0.08);
}
```

### Navbar Items

- Logo: **Musyawara**
- Menu: Home · Features · Solutions · Verification Center · Pricing

### CTA Button (Mulai Sekarang)

```css
.btn-navbar-cta {
  background: #0084FF;
  color: #fff;
  border-radius: 10px;
  padding: 8px 20px;
  font-weight: 600;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.btn-navbar-cta:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(0, 132, 255, 0.3);
}
```

---

## HERO SECTION

**Layout:**

- Desktop: 2 columns (content left + visual right)
- Mobile: 1 column (stacked)

### Left Content

- **Badge:** `Dipercaya oleh Organisasi, Kampus, dan Komunitas`
- **Rating:** ★★★★★ 4.9/5
- **Headline:** `Musyawarah dan Pemilihan Digital yang Aman, Transparan, dan Anonim`
- **Subheadline:** `Kelola pemilihan, musyawarah, dan pengambilan keputusan dalam satu platform yang modern dan terpercaya.`
- **CTA:** `[ Mulai Event ]` `[ Lihat Demo ]`

### Hero Visual

**Style:** Glassy Orb  
**Scale:** 125%  
**Mix Blend Mode:** `screen`

```css
.hero-orb {
  filter: hue-rotate(-55deg) saturate(250%) brightness(1.2) contrast(1.1);
  mix-blend-mode: screen;
  transform: scale(1.25);
}
```

**Makna visual orb:** Suara · Transparansi · Keterhubungan · Keputusan Bersama

---

## TRUST SECTION

**Headline:** `Dipercaya Oleh Berbagai Organisasi`

**Logo Grid:** 5–8 logo, grayscale, gap 100px

```css
.trust-logo-grid {
  display: flex;
  gap: 100px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.trust-logo-grid img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: opacity 200ms ease;
}
.trust-logo-grid img:hover {
  opacity: 0.8;
}
```

---

## FEATURE SECTION

**Layout:** 3×2 Grid

### Glass Card

```css
.glass-card {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 4px 24px rgba(0, 132, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  padding: 28px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.glass-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 12px 40px rgba(0, 132, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
```

### Features List

| Feature               | Deskripsi Singkat                          |
|-----------------------|--------------------------------------------|
| Anonymous Voting      | Suara tidak dapat dilacak ke pemilih       |
| OTP Verification      | Verifikasi identitas via email OTP         |
| Event Lock System     | Data terkunci saat event dipublikasikan    |
| Vote Hash Chain       | SHA-256 chain untuk deteksi manipulasi     |
| Audit Center          | Timeline lengkap semua aktivitas event     |
| Public Verification   | Halaman publik verifikasi integritas       |
| Realtime Monitoring   | Partisipasi dan trend secara real-time     |
| Multi Organization    | Kelola banyak organisasi dari satu akun    |

---

## SECURITY SECTION

**Judul:** `Keamanan yang Dapat Diverifikasi`

### Elemen yang Ditampilkan

- Event Lock
- Vote Hash Chain
- Public Verification
- Audit Trail
- Integrity Verification

### Visual

Timeline atau Security Flow Diagram (lihat komponen SECURITY_FLOW)

```
[Event Published] → [Data Locked] → [Voting Opens] → [Vote + Hash] → [Chain Verified] → [Public Proof]
```

---

## HOW IT WORKS

| Step | Label                    |
|------|--------------------------|
| 1    | Verifikasi Kehadiran     |
| 2    | Verifikasi Email dan OTP |
| 3    | Pilih Kandidat           |
| 4    | Konfirmasi Pilihan       |
| 5    | Suara Direkam            |
| 6    | Integrity Verified       |

---

## VERIFICATION CENTER

**URL:** `/event/{slug}/verification`  
**Akses:** Publik, tanpa login

### Tampilan

- Integrity Score
- Status Event
- Participation Rate
- Vote Count
- Verification Status

### Status Card

```
✓ Event Locked
✓ Candidate Locked
✓ Voter Locked
✓ Hash Verified
✓ Vote Count Valid
```

### Status Card Style

```css
.status-card-ok {
  background: rgba(22, 163, 74, 0.08);
  border: 1px solid rgba(22, 163, 74, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  color: #166534;
  display: flex;
  align-items: center;
  gap: 10px;
}
.status-card-fail {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  color: #991b1b;
}
```

---

## ACTIVE EVENTS

**Style:** Glass Card  
**Layout:** Grid, responsive

### Konten Card

- Nama Event
- Status (badge)
- Partisipasi (progress bar)
- Tanggal mulai – selesai

**CTA:** `Ikuti Event`

---

## EVENT PAGE

Komponen utama:

| Komponen        | Deskripsi                       |
|-----------------|---------------------------------|
| Hero Event      | Banner dengan foto/branding     |
| Countdown       | Timer menuju event mulai        |
| Progress        | Real-time partisipasi bar       |
| Information     | Detail event, kandidat          |
| Voting Button   | CTA utama dengan state-aware    |

---

## CANDIDATE CARD

**Surface:** Glass  
**Hover Effect:** Lift (translateY -4px)

### Konten

- Foto kandidat
- Nomor urut
- Nama
- Ringkasan visi

### Action

- `Lihat Profil` (secondary)
- `Pilih` (primary — `#0084FF`)

```css
.candidate-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 20px rgba(0, 132, 255, 0.07);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.candidate-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 132, 255, 0.14);
}
.btn-pilih {
  background: #0084FF;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 24px;
  font-weight: 600;
  font-size: 15px;
  transition: background 200ms, transform 200ms;
}
.btn-pilih:hover {
  background: #319AFF;
  transform: scale(1.02);
}
```

---

## DASHBOARD

**Style:** Linear Style Dashboard

**Bukan:** AdminLTE / SB Admin / Bootstrap klasik

### Overview Cards (4 cards)

- Total Event
- Total Voter
- Participation Rate
- Vote Count

### Analytics

- Realtime Participation
- Hourly Trend
- Daily Trend

### Dashboard Card Style

```css
.dashboard-overview-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.dashboard-metric-value {
  font-family: 'Fustat', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1;
}
.dashboard-metric-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #64748B;
  font-weight: 500;
  margin-top: 6px;
}
```

---

## AUDIT CENTER

**Layout:** Timeline

### Aktivitas yang Dicatat

| Icon | Aktivitas             |
|------|-----------------------|
| 📧   | OTP Sent              |
| ✅   | OTP Verified          |
| 🗳️   | Vote Recorded         |
| 🔒   | Event Locked          |
| 🔍   | Verification Generated|

### Timeline Style

```css
.audit-timeline {
  position: relative;
  padding-left: 28px;
}
.audit-timeline::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #0084FF, rgba(0, 132, 255, 0.1));
  border-radius: 2px;
}
.audit-item {
  position: relative;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition: box-shadow 200ms ease;
}
.audit-item:hover {
  box-shadow: 0 4px 16px rgba(0, 132, 255, 0.08);
}
.audit-item::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0084FF;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 0 2px #0084FF;
}
```

---

## MOTION DESIGN

**Duration:** 200ms

### Allowed

- Fade
- Scale
- Slide
- TranslateY (lift)

### Avoid

- Bounce
- Flash
- Infinite Animation
- Complex keyframe chains

### Standard Transitions

```css
/* Standard ease */
transition: all 200ms ease;

/* Hover lift */
transition: transform 200ms ease, box-shadow 200ms ease;

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 200ms ease both;
}
```

---

## BUTTON SYSTEM

### Primary Button

```css
.btn-primary-musyawara {
  background: #0084FF;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 10px 24px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.btn-primary-musyawara:hover {
  background: #319AFF;
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(0, 132, 255, 0.3);
}
```

### Ghost Button

```css
.btn-ghost-musyawara {
  background: transparent;
  color: #0F172A;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 10px 24px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}
.btn-ghost-musyawara:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.2);
}
```

### Glass Button

```css
.btn-glass-musyawara {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #0F172A;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  padding: 10px 24px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.btn-glass-musyawara:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: scale(1.02);
}
```

---

## STATUS BADGE SYSTEM

```css
/* Status Badges */
.badge-draft     { background: rgba(100,116,139,0.1); color: #475569; }
.badge-published { background: rgba(0,132,255,0.1);   color: #0084FF; }
.badge-active    { background: rgba(22,163,74,0.1);   color: #16A34A; }
.badge-closed    { background: rgba(245,158,11,0.1);  color: #B45309; }
.badge-archived  { background: rgba(15,23,42,0.08);   color: #334155; }

/* Shared badge style */
[class^="badge-"] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
}
```

---

## FORM & INPUT STYLE

```css
.input-musyawara {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #0F172A;
  outline: none;
  width: 100%;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.input-musyawara:focus {
  border-color: #0084FF;
  box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.12);
}
.input-musyawara::placeholder {
  color: #94a3b8;
}
```

---

## ALERT / NOTIFICATION SYSTEM

```css
/* Alert base */
.alert-musyawara {
  border-radius: 12px;
  padding: 14px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid transparent;
}

/* Variants */
.alert-success { background: rgba(22,163,74,0.08);  border-color: rgba(22,163,74,0.2);  color: #166534; }
.alert-warning { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.2); color: #92400E; }
.alert-danger  { background: rgba(220,38,38,0.08);  border-color: rgba(220,38,38,0.2);  color: #991B1B; }
.alert-info    { background: rgba(0,132,255,0.08);  border-color: rgba(0,132,255,0.2);  color: #1D4ED8; }

/* Lock banner (integrity warning) */
.alert-lock {
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 12px;
  padding: 14px 16px;
  color: #78350F;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
}
```

---

## ADMIN LAYOUT NOTE

> Meskipun admin panel saat ini menggunakan template Sneat (Bootstrap),
> semua **komponen baru** harus mengikuti DESIGN.md v2 ini.
> Override styling menggunakan CSS custom properties yang telah didefinisikan di atas.
> Migrasi bertahap: komponen baru → glass style, komponen lama → tetap Sneat sementara.

---

## CORE UX PRINCIPLE

> Musyawara harus membuat pengguna merasa:
>
> **"Saya percaya bahwa suara saya direkam dengan benar."**
>
> Bukan:
>
> "Saya sedang menggunakan aplikasi voting."

Setiap keputusan desain harus memperkuat:

- **Kepercayaan**
- **Transparansi**
- **Integritas**
- **Kemudahan Penggunaan**

---

## IMPLEMENTATION NOTES

### Prioritas Implementasi

1. **Halaman Publik** (verification, landing, event page) → Full Liquid Glass
2. **Frontend Voting** (OTP, ballot) → Glass surface, clean typography
3. **Admin Dashboard** → Linear style cards, clean layout
4. **Admin Forms** → Clean inputs, tidak perlu glass berat

### Font Loading

```html
<!-- Load di <head> semua halaman -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Fustat:wght@700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
```

### Breakpoints

```css
/* Mobile  */ @media (max-width: 640px)  { ... }
/* Tablet  */ @media (max-width: 768px)  { ... }
/* Desktop */ @media (min-width: 1024px) { ... }
/* Wide    */ @media (min-width: 1280px) { ... }
```

---

*Last Updated: 2026-06-10*
*Version: 2.0*