# desain.md — Template Gaya Video Explainer (contoh: KolamDigital)

Template aturan gaya untuk membuat video motion graphic dengan Claude + Remotion.
Simpan file ini di folder project Anda, lalu minta Claude: "Pakai desain.md, buat video tentang …".

Cara memakai template ini:
1. Ganti setiap nilai yang bertanda **[GANTI]** dengan identitas brand Anda.
2. Nilai yang sudah terisi adalah contoh dari channel YouTube KolamDigital. Boleh dipakai apa adanya.
3. Hapus bagian yang tidak Anda perlukan, misalnya karakter pemandu.

Template oleh KolamDigital · kolamdigital.com · versi 1.0, November 2026.
Bebas dipakai dan diubah untuk proyek pribadi maupun komersial, tetapi tidak boleh dijual ulang sebagai produk.

---

## 0. Ringkasan gaya dalam satu paragraf

Kanvas terang putih kebiruan dengan grid tipis, jendela aplikasi ilustrasi yang mengambang, dan judul
tebal miring yang mengikuti kemiringan logo. Warna utama logo memegang semua elemen aktif; warna kedua
hanya untuk penekanan dan ajakan. Di atas layar ada pita langkah berbentuk jajaran genjang miring, di
pojok kanan bawah ada karakter pemandu yang berbicara mengikuti narasi. Sekali atau dua kali per video,
layar berganti ke adegan gelap "Catatan Penting". Nadanya skeptis dan jujur soal fakta, dengan humor
ringan, tetapi disampaikan dengan bahasa yang sopan. Setiap klaim yang beredar diberi vonis
(BENAR, SETENGAH BENAR, KELIRU).

[GANTI] paragraf ini dengan ringkasan gaya Anda sendiri.

## 1. Format

| Hal | Nilai |
| --- | --- |
| Video utama | 1920 × 1080, 30 fps, H.264, audio AAC 48 kHz |
| Durasi | 5–8 menit untuk YouTube (lewat 8:00 bila ingin slot iklan tengah) |
| Turunan | Shorts/Reels 1080 × 1920 (cuplikan 60–90 detik) |
| Zona aman | Konten penting x 96–1824, y 72–1008. Takarir y 940–1010. Karakter pemandu x ≥ 1660 |
| Layar akhir | 20 detik terakhir: kosongkan area tengah untuk elemen end screen YouTube |
| Loudness | −14 LUFS terintegrasi, true peak −1,5 dBTP |

## 2. Warna

Contoh KolamDigital, diambil dari sampel piksel logo. [GANTI] dengan warna logo Anda.

| Token | Hex | Dipakai untuk |
| --- | --- | --- |
| `primary` | `#6666FF` | warna utama logo: pil aktif, cincin karakter, kotak seleksi, judul besar |
| `primaryDeep` | `#5A59E3` | bayangan, tombol ditekan |
| `primaryText` | `#3D3DC8` | teks warna utama berukuran kecil di atas putih (kontras 7,8:1) |
| `accent` | `#FF9933` | penekanan kata, stabilo, label PERHATIAN, tombol ajakan |
| `accentTint` | `#FFE9D2` | isi stabilo di atas putih |
| `paper` | `#FFFFFF` | kartu dan jendela |
| `canvas` | `#F6F6FF` | latar terang |
| `grid` | `#E6E6F7` | garis grid 1 px, jarak 80 px |
| `ink` | `#14142B` | teks utama |
| `mute` | `#8A8AA3` | teks sekunder, kata takarir yang belum diucapkan |
| `hairline` | `#E3E3F0` | garis tepi kartu |
| `night` | `#12123A` | latar adegan gelap |
| `nightCard` | `#1E1E52` | kartu di adegan gelap, latar terminal |
| `success` | `#21A05A` | centang, vonis BENAR |
| `danger` | `#E5484D` | silang, coretan, vonis KELIRU |

Aturan:
- Warna utama di atas putih hanya untuk teks besar (≥ 36 px tebal). Teks kecil memakai `primaryText`.
- Warna aksen tidak dipakai sebagai warna teks di atas putih. Pakai sebagai isi stabilo atau tombol.
- Satu layar maksimal satu elemen aksen.

## 3. Tipografi

| Peran | Font | Bobot | Ukuran @1080p |
| --- | --- | --- | --- |
| Judul besar | Plus Jakarta Sans Italic [GANTI] | 800 | 72–96 px |
| Judul kartu | Plus Jakarta Sans | 700 | 30–36 px |
| Isi kartu | Plus Jakarta Sans | 500 | 26–30 px |
| Takarir | Plus Jakarta Sans | 600 | 40 px, satu baris, lebar ≤ 1300 px |
| Label kecil, pil langkah | Plus Jakarta Sans Italic | 800 | 22–24 px, huruf kapital |
| Prompt, terminal, kode | JetBrains Mono | 500 | 24–28 px |

- Muat font secara lokal (misalnya paket `@fontsource`) supaya render tidak bergantung internet.
- Logo tidak pernah digambar ulang dengan font. Selalu pakai file logo asli [GANTI: path logo Anda].

## 4. Kerangka layar & komponen

- **Latar:** warna `canvas` + grid 80 px yang bergeser pelan ke kanan (2 px/detik).
- **Logo:** pakai dua versi. Logo panjang (wordmark) sebagai default di kiri atas adegan terang, lebar ±280 px.
  Logo mini (ikon, sama dengan favicon) untuk ruang sempit: pojok adegan gelap (±64 px), layar akhir,
  watermark YouTube, dan favicon situs. [GANTI] dengan kedua file logo Anda.
- **Pita langkah:** tengah atas, deret jajaran genjang miring (skewX −12°). Aktif: isi warna utama, teks putih.
  Selesai: tepi warna utama + centang. Belum: tepi abu, teks `mute`.
- **Karakter pemandu (opsional):** bulatan avatar 150 px bercincin warna utama di pojok kanan bawah, bibirnya
  bergerak mengikuti narasi, dengan panah kursor kecil untuk menunjuk elemen. Contoh KolamDigital memakai
  versi kartun Andy Hermawan. [GANTI] dengan karakter Anda, atau hapus bagian ini.
- **Jendela aplikasi ilustrasi:** kartu putih radius 20, bilah judul 52 px dengan tiga titik dan nama aplikasi,
  label kecil "ILUSTRASI" di pojok kanan. Varian: kotak prompt (teks diketik per huruf), terminal (latar gelap,
  baris ✓ hijau dan ✗ merah), berkas (baris penting diberi stabilo). Isi terminal harus berasal dari uji coba
  nyata, bukan karangan.
- **Takarir:** satu baris di bawah tengah. Kata yang sudah diucapkan berwarna `ink`, sisanya `mute`.
  Kata kunci diberi stabilo aksen yang tersapu dari kiri.
- **Chip janji:** pil bertepi warna utama dengan ikon gembok ("Biaya sebenarnya · di akhir video").
  Saat janji dilunasi, gembok terbuka dan chip terisi warna utama.
- **Kartu info:** kartu putih dengan garis kiri warna utama dan chip sumber ("Sumber: … · dicek [bulan tahun]").
- **Kartu klaim:** label "KATANYA", kutipan miring, tanda kutip besar.
- **Stempel vonis:** jajaran genjang miring, tepi tebal, huruf kapital: BENAR (hijau), SETENGAH BENAR (aksen),
  KELIRU (merah). Masuk dari skala 1,6 ke 1 dengan efek pegas.
- **Adegan gelap "Catatan Penting":** latar `night` + grid titik, label aksen miring, judul putih besar.
  Dipakai 1–2 kali per video untuk menebus janji atau memberi peringatan.

## 5. Gerak & transisi

| Gerak | Kurva | Durasi |
| --- | --- | --- |
| Elemen masuk | ease-out `cubic-bezier(.22,1,.36,1)` + naik 24 px + fade | 14–18 frame |
| Pop (chip, centang) | pegas (stiffness 380, damping 17) | ±12 frame |
| Kursor karakter | pegas teredam (stiffness 440, damping 42) | ±10 frame |
| Kamera | dorong masuk pelan 1,00 → 1,03 sepanjang adegan | per adegan |
| Ganti langkah | panel warna utama miring menyapu kiri ke kanan, garis aksen di tepinya | 16 frame |

- Tanpa guncangan kamera, tanpa partikel dekoratif, tanpa glow berlebihan.
- Teks yang harus dibaca bertahan minimal 1,5 detik setelah lengkap.
- Semua gerak dihitung dari nomor frame (di Remotion: `useCurrentFrame`, `interpolate`, `spring`), bukan animasi CSS.

## 6. Ritme & menjaga penonton tetap menonton

- Visual berganti setiap 4–6 detik.
- Pola cek fakta: buka dengan klaim yang beredar ("Katanya …"), lalu "Saya cek." Vonis dibuka bertahap.
- Beri janji di 25 detik pertama (chip gembok), lalu lunasi di tengah dan di akhir video.
- Pita langkah selalu terlihat agar penonton tahu sisa perjalanan.
- Pengait ulang tiap 60–90 detik: pertanyaan ke penonton, "satu hal yang sering terlewat", atau hasil yang ditahan.
- Penutup: lunasi janji terakhir, rekap, lalu buka pertanyaan baru untuk episode berikutnya.

### 6.1 Ajakan interaksi

| Posisi | Ajakan | Contoh |
| --- | --- | --- |
| 25–50 detik pertama | Tebakan di kolom komentar sebelum vonis dibuka | "Tulis nomornya di kolom komentar, lalu cocokkan dengan hasilnya nanti." |
| Setelah nilai pertama tersampaikan | Subscribe: satu kalimat, alasan konkret | "Setiap minggu ada video baru yang menguji klaim seputar [GANTI topik]." |
| Penutup | Bagikan: sebut siapa yang perlu menonton | "Bagikan ke rekan yang masih percaya semuanya bisa gratis." |
| Penutup | Komentar: usulan topik berikutnya | "Klaim apa lagi yang perlu dicek?" |

- Jangan kaitkan subscribe, like, atau share dengan hadiah atau syarat unduhan. Mengajak boleh; memberi imbalan
  atau mewajibkan subscribe melanggar kebijakan YouTube.

## 7. Suara

- Satu suara narator berbahasa Indonesia, tenang, tempo sedang (±145 kata per menit). [GANTI] pilihan suara Anda.
- Setujui naskah dulu, baru buat suara (kredit ElevenLabs terpakai setiap kali suara dibuat).
- Buat suara satu kali jalan untuk seluruh naskah supaya kredit hemat (±1 kredit per karakter di ElevenLabs v3).
  Bila ada satu kata salah ucap, buat ulang kalimat itu saja lalu sambungkan.
- Tulis ejaan bantu untuk istilah asing, misalnya "Remotion" → "Ri-mo-syen", "Claude" → "Klod".
- Efek suara hanya pada momen bermakna: ganti langkah, centang, gembok terbuka, adegan gelap.
- Musik latar tipis di bawah narasi (sekitar −24 LUFS), hening sesaat sebelum adegan gelap.
- Pakai musik dan efek suara yang bebas lisensi atau Anda buat sendiri.

## 8. Gaya bahasa

- Sapaan "Anda". Kalimat aktif 12–20 kata. Istilah teknis dijelaskan sekali saat pertama muncul.
- Sopan dan rapi, tetapi tidak kaku:
  - **Skeptis:** klaim yang terlalu manis dicek dulu.
  - **Jujur:** sebutkan biaya asli, batasan, dan error yang benar-benar muncul.
  - **Intrik:** tahan jawaban atau vonis, beri petunjuk kapan akan dibuka.
  - **Humor ringan:** perumpamaan sehari-hari atau ironi kecil, tanpa slang kasar dan tanpa merendahkan orang.
- Kritik diarahkan ke klaim, bukan ke orang.
- Angka harga, lisensi, dan syarat platform selalu disertai sumber dan bulan pengecekan.

## 9. Aturan isi & hak

- Dari video referensi, yang diambil hanya gayanya. Jangan memakai logo, footage, karakter, atau musik milik pihak lain.
- Tampilan aplikasi adalah ilustrasi (diberi label), dengan isi yang sesuai uji coba nyata.
- Merek pihak ketiga hanya disebut namanya, tidak memakai logonya.

## 10. Checklist sebelum render penuh

- [ ] Frame pertama, tiap awal langkah, adegan gelap, dan frame terakhir sudah diperiksa sebagai gambar diam.
- [ ] Tidak ada teks terpotong atau menabrak karakter pemandu dan takarir.
- [ ] Kontras teks memenuhi aturan di bagian 2.
- [ ] Takarir sama persis dengan narasi yang disetujui.
- [ ] Mulut karakter bergerak hanya saat narasi berjalan.
- [ ] Loudness akhir −14 LUFS ±1, tanpa clipping.
- [ ] Setiap angka harga atau lisensi punya chip sumber.