# Anti-Slop Design Guide (Landing Page & UI)

Dokumen ini merangkum analisis dari infografis **"The Anatomy of Slop (Don't Do This!)"** sebagai checklist dan panduan desain untuk menghindari jebakan template generik ("AI Slop") saat membangun landing page dan komponen UI.

---

## 🚫 18 Dosa Desain "AI Slop" & Solusinya

| No | Elemen Slop (Hindari) | Mengapa Ini "Slop"? | Solusi / Best Practice Alternatif |
|---|---|---|---|
| 1 | **Gradient + Glow Buttons** | Tombol kapsul dengan gradien warna jenuh dan drop-shadow berpendar (glow) berlebihan khas template AI klise. | Gunakan **solid button tegas**, border 1px yang crisp, contrast ratio tinggi, atau micro-interaction hover yang subtle. |
| 2 | **Emoji As Icons** | Menggunakan emoji OS bawaan (🚀, 📦, ✅, 🔥) sebagai ikon fitur alih-alih vector icon yang dirancang matang. | Gunakan icon library SVG konsisten (seperti Lucide, Phosphor, atau Heroicons) dengan stroke weight dan ukuran yang seragam. |
| 3 | **Heavy Shadows** | Drop-shadow yang tebal, gelap pekat, dan kotor di bawah card/panel yang membuat tampilan terlihat amatir. | Gunakan **layered subtle shadows** (opacity rendah 4–8%, blur halus) atau andalkan crisp 1px border tone-on-tone tanpa bayangan pekat. |
| 4 | **Boring Layouts** | Layout simetris kaku yang itu-itu saja (hero center polos, 3 card sejajar monoton tanpa hierarki). | Buat **editorial layout**, variasi Bento grid, asymmetric composition, dan visual pacing dinamis dengan ritme negative space. |
| 5 | **Overly Verbose + Visually Dense** | Menjejali satu kartu dengan teks deskripsi bertele-tele dan rentetan badge metrik kecil (+40%, +12, +98%) yang berdesakan. | Terapkan **copywriting ringkas, punchy, dan scannable**. Pisahkan metrik/statistik ke section khusus yang leluasa bernapas. |
| 6 | **Elements Wrapped In Cards ("Card-itis")** | Membungkus setiap elemen kecil ke dalam kartu ber-border sendiri (kartu di dalam kartu di dalam kartu). | Gunakan **flat grouping**, spacing alami, atau divider garis halus 1px tanpa harus membingkai semua hal dalam kotak kartu. |
| 7 | **Glassmorphism** | Panel frosted glass buram (`backdrop-blur`) dengan border gradien semi-transparan yang tidak punya tujuan fungsional. | Gunakan **solid surface yang bersih** dengan kontras jelas, atau surface tinted minimalis hanya jika benar-benar ada layer konteks di baliknya. |
| 8 | **Rounded Components (Overly Rounded)** | Memaksa semua elemen berujung bulat penuh (pill/capsule `rounded-full`) di mana-mana sehingga terasa murahan/generik. | Gunakan radius sudut yang konsisten dan proporsional (misal `rounded-md` atau `rounded-lg`, 6px–12px) untuk kesan profesional dan structured. |
| 9 | **Inconsistent Spacing** | Margin, padding, dan gap antar elemen atau baris list dibuat acak tanpa sistem skala. | Terapkan **skala spacing konsisten** (kelipatan 4px / 8px: 4, 8, 12, 16, 24, 32, 48, 64px) di seluruh halaman. |
| 10 | **Basic Fonts / No Typographic Choice** | Memakai font default sistem/Inter tanpa hierarki, ukuran, dan leading yang terkurasi sehingga teks terlihat flat. | Pilih kombinasi tipografi berkarakter (misal pairing font judul yang kuat dengan body sans yang legible), atur font-weight dan tracking secara presisi. |
| 11 | **No Visual Hierarchy** | Semua tombol aksi memiliki warna dan bobot visual yang sama kuat (misal Save, Discard, Delete sama-sama tombol cerah). | Definisikan hierarki tegas: **Primary** (aksi utama), **Secondary** (outline/muted), dan **Tertiary/Ghost** untuk aksi minor. |
| 12 | **Default Chart-Library Colors** | Membiarkan palet warna bawaan chart library (warna-warni default Recharts/Chart.js) yang tidak selaras dengan tema. | Kustomisasi palet warna chart agar mengikuti **design tokens / brand palette** aplikasi. |
| 13 | **Purple/Indigo Or Muted Amber** | Palet warna klise template AI SaaS (kombinasi Indigo-600, Purple-500, dan oranye pudar). | Kembangkan palet warna autentik untuk brand: monochromatic yang elegan, earthy, atau aksen warna yang spesifik pada identitas produk. |
| 14 | **Decorative Gradient Orbs ("Blob Backgrounds")** | Lingkaran blur warna-warni mengambang di latar belakang teks tanpa alasan fungsional ("content over blobs"). | Gunakan background solid yang clean, subtle grid/linework terstruktur, atau grain texture tipis yang menyatu dengan estetika produk. |
| 15 | **No Organic Or Textured Shapes** | Seluruh tampilan serba geometris kaku buatan mesin tanpa tekstur, gambar nyata, atau sentuhan grafis organik. | Hadirkan **tekstur nyata**, visual produk riil (screenshot UI produk sesungguhnya), ilustrasi berkualitas, atau aksen organik yang terkurasi. |
| 16 | **Side Borders On Everything** | Memberikan garis tebal aksen di sisi kiri (*left-border accent*) pada setiap kotak notifikasi, banner, atau card. | Buat status indicator yang lebih modern: subtle background tint, status pill badge kecil, atau icon semantik yang rapi. |
| 17 | **Weird Floating Animations** | Objek-objek kubus/lingkaran pastel yang melayang-layang naik-turun tanpa arti di background hero section. | Prioritaskan animasi fungsional: **smooth reveal saat scroll**, preview interaktif produk, atau micro-interaction responsif saat hover/klik. |
| 18 | **Neon-On-Dark** | Dark mode klise dengan garis border tipis yang menyala neon ungu/cyan ala cyberpunk murahan. | Desain dark mode yang **sophisticated** menggunakan nuansa deep charcoal/slate, depth berbasis lightness layer, dan border netral tone-on-tone. |

---

## 🧭 Checklist Anti-Slop Sebelum Deploy Landing Page

- [ ] **Ikonografi:** Semua ikon menggunakan SVG vector seragam (bukan emoji).
- [ ] **Warna & Aksen:** Palet warna brand orisinal, bukan kombinasi default purple-indigo AI.
- [ ] **Bayangan & Kedalaman:** Tidak ada drop-shadow hitam pekat; gunakan border halus 1px atau ambient soft shadow.
- [ ] **Hierarki Tombol:** Hanya ada 1 primary CTA yang menonjol per viewport/section.
- [ ] **Layout:** Variasi ritme visual (bento grid, perpaduan teks & preview produk interaktif), bukan sekadar tumpukan card berulang.
- [ ] **Background:** Latar bersih dan bertekstur teratur, bebas dari "gradient blob/orb" mengambang tanpa fungsi.
- [ ] **Tipografi:** Heading kontras dan ekspresif, body text nyaman dibaca dengan line-height proporsional.
- [ ] **Konten Asli:** Menggunakan mockup UI atau ilustrasi produk nyata daripada elemen abstrak melayang.