setrip/UI_STYLE_GUIDE.md

🎨 SeTrip — UI Style Guide

Panduan visual untuk membuat tampilan SeTrip terasa natural, manusiawi, dan tidak "AI-generated" — tanpa mengorbankan SEO.

Prinsip utama: clean, calm, earthy. SeTrip itu social-companion platform ("pergi bareng, bukan sendiri"), bukan marketplace booking. UI harus terasa hangat & tenang, bukan ramai & promosi.

---

1. Filosofi Desain

Hindari (kesan AI-generated)	Gunakan (kesan natural)
❌ Gradient berlebihan	✅ Background putih bersih / neutral-50
❌ Neumorphism	✅ Soft green / earthy tone
❌ Glassmorphism ekstrem	✅ Border tipis 1px + shadow lembut
❌ Icon 3D / emoji sebagai UI icon	✅ Stroke icon tipis (lucide-react)
❌ Card mengambang dengan blur tebal	✅ Simple rounded card, datar, jelas
❌ Warna saturasi tinggi di mana-mana	✅ 1 warna aksen, sisanya netral

Tiga kata kunci: bersih · tenang · jujur. Kalau sebuah elemen terasa "ingin pamer", kemungkinan besar perlu disederhanakan.

---

2. Warna

Token warna sudah tersedia di app/globals.css — gunakan token, jangan hardcode hex.

Peran	Token	Catatan
Aksi utama / brand	primary-600 (#16A34A)	Hijau gunung — earthy, tidak neon
Hover aksi utama	primary-700	Hindari primary-500 (terlalu terang) untuk hover tombol
Aksen sekunder	secondary-600 (#0EA5E9)	Pakai hemat — info, link, badge vibe
Teks utama	neutral-800
Teks sekunder	neutral-500
Border	neutral-200	Selalu 1px
Background halaman	neutral-50
Surface / card	white

Aturan warna

• Satu aksen per layar. Hijau adalah bintangnya. Biru hanya bumbu.
• Maksimal 1 area gradient per halaman, dan harus halus (mis. hero). Sisanya warna solid.
• Surface = putih solid. Jangan pakai bg-white/80 + backdrop-blur untuk card biasa.
• Earthy tone tambahan diperbolehkan sebagai background section (primary-50, amber-50) tapi jangan dijadikan blok besar warna-warni.

---

3. Sistem Ikon — lucide-react

lucide-react sudah terpasang. Stroke icon = wajah baru SeTrip.

Aturan ikon

• Stroke icon, bukan filled. Lucide default sudah stroke — jangan ganti fill.
• Ukuran konsisten: 16 (inline teks), 20 (tombol/list), 24 (header section).
• Ketebalan stroke seragam: strokeWidth={1.75} (default lucide 2 sedikit terlalu tebal untuk gaya clean ini).
• Warna ikut teks: text-neutral-500 untuk netral, text-primary-600 untuk aktif.
• Jangan beri ikon background bulat berwarna + emoji di dalamnya (pola lama). Cukup ikon polos, atau ikon di atas lingkaran neutral-100 yang sangat soft bila perlu penekanan.

import { Mountain } from "lucide-react";

// inline
<Mountain size={16} strokeWidth={1.75} className="text-neutral-500" />

// di tombol
<Plus size={20} strokeWidth={1.75} />

Pemetaan ikon per fitur

Fitur	Ikon lucide
Trip	Mountain
Group / peserta	Users
Organizer	BadgeCheck
Verified	ShieldCheck
Payment	Wallet
Meeting Point	MapPinned
Chat	MessageCircle
Review / rating	Star
Profil	UserRound

Saran tambahan yang konsisten dengan set di atas:

Konteks	Ikon lucide
Tanggal / jadwal	CalendarDays
Lokasi umum	MapPin
Buat trip (FAB & CTA)	Plus
Cari / filter	Search, SlidersHorizontal
Menu mobile	Menu / X
Kategori (jelajah)	Compass
Sedang ramai / populer	Flame atau TrendingUp
Harga	Tag

Catatan emoji kategori: categoryMeta() di lib/activity-category.ts masih memakai emoji (🏔️🏕️🤿). Boleh dipertahankan hanya di konten data trip (terasa playful & manusiawi di tempat itu), tapi elemen UI/chrome (navbar, header section, tombol, badge status) harus pakai stroke icon.

---

4. Komponen

Card

✅ rounded-2xl  ·  border border-neutral-200  ·  bg-white
✅ hover: shadow lembut + translate-y-0.5 (sudah dipakai di TripCard — pertahankan)
❌ jangan: shadow tebal default, blur, gradient border

Tombol

Jenis	Style
Primer	bg-primary-600 hover:bg-primary-700 text-white rounded-xl
Sekunder	border border-neutral-200 text-neutral-700 hover:bg-neutral-50
Ghost	text-neutral-600 hover:bg-neutral-100

• Shadow tombol seperlunya. shadow-lg shadow-primary-600/25 boleh untuk satu CTA utama per layar, jangan semua tombol.
• hover:scale-105 cukup untuk CTA hero saja — jangan di semua tombol (terasa "demo template").
• Sertakan ikon lucide bila memperjelas aksi (mis. Plus untuk "Buat Trip").

Badge / pill

• rounded-full, teks kecil, warna soft (primary-50/primary-700).
• Status pakai warna semantik solid lembut, bukan transparan + blur.

Header section

Pola lama: kotak berwarna + emoji. Pola baru:

<div className="flex items-center gap-2.5">
  <Compass size={20} strokeWidth={1.75} className="text-primary-600" />
  <div>
    <h2 className="text-base font-bold text-neutral-800 sm:text-lg">Jelajah per Kategori</h2>
    <p className="text-xs text-neutral-500">Hiking, diving, konser, sampai retreat</p>
  </div>
</div>

---

5. Yang Perlu Dirombak di Codebase

Temuan konkret dari kode saat ini:

Lokasi	Masalah	Aksi
app/(public)/page.tsx	Header section pakai kotak warna + emoji (✨🔥🏔️🤝), badge hero pakai emoji 🤝	Ganti ke stroke icon (Compass, Flame, Mountain, Users)
app/(public)/page.tsx	Hero gradient 3 warna (from-primary-900 via-neutral-900 to-secondary-900)	Sederhanakan jadi overlay solid neutral-900/80 atau gradient 2 warna halus
app/(public)/page.tsx	FAB pakai teks "+"	Ganti <Plus size={24} />
app/(public)/page.tsx	Stat "100% Seru" terasa filler/AI	Ganti metrik nyata (jumlah peserta, organizer terverifikasi) atau hapus
components/shared/navbar.tsx	Hamburger pakai inline SVG manual	Ganti Menu / X dari lucide
components/shared/navbar.tsx	bg-white/90 backdrop-blur-md	Boleh dipertahankan (tipis, wajar untuk sticky nav) — jangan ditebalkan
features/trip/components/trip-card.tsx	Avatar fallback & meta info bisa diperkuat dengan ikon stroke (Users, CalendarDays, MapPin)	Tambah ikon kecil di baris meta

Prioritas: homepage dulu (paling sering dilihat & paling kuat kesan AI-nya), lalu navbar, lalu komponen kartu.

---

6. SEO — Wajib Dijaga

Perubahan visual tidak boleh menurunkan SEO. Aturan:

• Ikon lucide = inline SVG, ringan & tidak memblokir render. Aman untuk Core Web Vitals.
• Ikon dekoratif (hiasan di samping teks) harus aria-hidden. Lucide perlu di-set manual:

  <Mountain size={16} aria-hidden className="text-neutral-500" />
  

• Ikon yang berdiri sendiri sebagai tombol (mis. tombol menu) wajib punya label:

  <button aria-label="Buka menu"><Menu size={20} aria-hidden /></button>
  

• Jangan ubah teks jadi gambar. Heading, slogan, deskripsi harus tetap teks HTML.
• Pertahankan hirarki heading: satu <h1> per halaman, <h2> untuk section. Jangan turunkan jadi <div> saat merapikan visual.
• Pertahankan metadata & JSON-LD di app/layout.tsx dan app/(public)/page.tsx — structured data, OpenGraph, canonical jangan disentuh saat refactor UI.
• Komponen tetap Server Component kalau memungkinkan. Jangan tambah "use client" cuma untuk render ikon — lucide jalan di server.
• Gambar: terus pakai next/image dengan alt deskriptif dan priority untuk LCP (cover hero & kartu pertama).
• Kontras warna minimal AA: stroke icon neutral-500 di atas putih sudah memenuhi; jangan pakai neutral-300 untuk ikon/teks penting.

---

7. Checklist Implementasi

• Ganti semua emoji di chrome UI (navbar, header section, tombol, FAB) → stroke icon lucide
• Standarkan size (16/20/24) & strokeWidth={1.75} di seluruh ikon
• Sederhanakan gradient hero homepage jadi maksimal 2 warna / overlay solid
• Ganti hamburger SVG manual di navbar → Menu/X
• Tinjau metrik "100% Seru" — ganti angka nyata atau hapus
• Pastikan ikon dekoratif aria-hidden, ikon-tombol punya aria-label
• Pastikan struktur heading h1/h2 tetap utuh setelah refactor
• Jalankan Lighthouse — skor SEO & Accessibility tidak turun
• Verifikasi tidak ada "use client" baru yang ditambahkan hanya demi ikon

---

Acuan token: app/globals.css · Acuan brand: lib/site.ts