Sistem Desain
Dari konten TikTok ke web — aturan visual, layar yang dihasilkan, dan file yang membangunnya.
Baca dalam English
- Versi
- 1.0
- Sumber
- DESIGN.md
- Layar
- 16 screenshot
- Kontak
- croissantsmoon@gmail.com
01
Ringkasan
Sistem visual ini tidak dikarang dari nol. Ia diterjemahkan dari materi yang sudah berjalan di TikTok agensi: carousel “Types of Gen Z Workers,” moodboard “cara ngonten & branding,” dan sepuluh kartu profil talent seri “meet our trover.” Tugas dokumen ini memastikan situs terasa seperti akun yang sama, bukan seperti situs agensi generik yang kebetulan memakai logo yang sama.
Setiap bagian berikut menampilkan tiga hal berurutan: aturan dari DESIGN.md, screenshot layar yang sudah jadi, lalu file yang mengimplementasikannya.
02
Kepribadian Brand
Berani, blak-blakan, editorial, sedikit konfrontatif. Sistemnya terbaca seperti majalah streetwear yang disilangkan dengan thread hot-take: tipografi besar yang bicara, dekorasi minimal, dan satu warna aksen yang memikul seluruh beban emosional.
Dua register hidup berdampingan dan keduanya harus terasa milik brand yang sama — suara agensi/kultur yang punchy dan meme-adjacent untuk konten opini serta halaman About, dan suara talent/editorial yang bersih dan high-fashion untuk roster serta profil.
03
Palet Warna
Tiga warna, tidak lebih. Aturan inilah yang membuat puluhan post TikTok terbaca sebagai satu sistem, dan aturan yang sama berlaku di web.
- Latar utama #FFFFFF
Dominan di hampir seluruh halaman - Latar sekunder #000000
Section break dan CTA full-black - Merah aksen #EA1B23
Wordmark, satu kata dalam headline, label callout
Implementasi Palet Tailwind bawaan diganti total di tailwind.config.ts, sehingga hanya black, white, dan brand-red yang tersedia. Menulis text-red-500 atau bg-gray-100 gagal saat compile — aturannya dipaksa oleh build, bukan oleh review.
04
Tipografi
Headline sengaja berukuran besar relatif terhadap viewport: tipografi adalah elemen grafis, bukan sekadar label. Karena itu skalanya fluid dengan clamp(), bukan langkah tetap. Penekanan dilakukan dengan mewarnai satu kata merah di dalam headline, bukan dengan menambah ukuran atau warna baru.
| Token | Ukuran | Pemakaian |
|---|---|---|
| wordmark | clamp(4rem, 19vw, 15rem) | Nama talent di halaman profil |
| display-xl | clamp(2.75rem, 10.5vw, 9.5rem) | Headline hero home |
| display-lg | clamp(2.25rem, 7vw, 6rem) | Headline section besar |
| display-md | clamp(1.75rem, 4.5vw, 3.5rem) | Judul section |
| display-sm | clamp(1.375rem, 2.6vw, 2rem) | Sub-judul dan statement callout |
| eyebrow | clamp(0.75rem, 1vw, 0.875rem) | Label kecil uppercase, tracking lebar |
| lead | clamp(1.0625rem, 1.5vw, 1.3125rem) | Paragraf pembuka |
Catatan Typeface display asli belum diidentifikasi (DESIGN.md §10.2). Build ini memakai Archivo dengan sumbu lebar untuk logotype, dan Figtree untuk wordmark talent serta body. Keduanya di-host sendiri lewat next/font, tanpa request ke origin pihak ketiga.
05
Pola Layout
Sebelas pola berikut menutup seluruh situs. Masing-masing menampilkan aturannya, layar yang dihasilkan, dan file yang membangunnya.
§3 · §4.3 — Hero
Two-tone headline
Desain Headline oversized dipecah ke beberapa baris pendek dengan leading rapat, lalu satu kalimat penuh dialihkan ke merah sebagai punchline. Tidak ada foto, tidak ada dekorasi — tipografi memikul seluruh layar.
Implementasi TwoToneHeadline menerima potongan teks dan menandai bagian mana yang beraksen, sehingga pemisahan warna tidak pernah ditulis manual di tiap halaman. Ukurannya memakai token display-xl.
- components/ui/TwoToneHeadline.tsx
- components/sections/HomeHero.tsx
Pola situs lama
Stats bar & marquee tagline
Desain Tiga angka pembuktian dipisah garis vertikal tipis, lalu strip tagline berjalan horizontal sebagai jeda ritmis sebelum konten berikutnya — pola yang sudah ada di situs lama dan dibawa maju.
Implementasi MarqueeTicker menggandakan isinya lalu menganimasi translate -50% secara linear tanpa henti, dengan durasi diatur lewat CSS custom property. Animasi berhenti saat hover dan mati total di bawah prefers-reduced-motion.
- components/ui/MarqueeTicker.tsx
- app/globals.css
PRD §6.1 — Audience fork
Percabangan dua audiens
Desain Percabangan dua audiens dibuat sebagai dua panel besar yang bisa diklik, bukan sekadar item navigasi. Kontras putih lawan hitam memisahkan keduanya tanpa menambah satu warna pun.
Implementasi Satu grid dua kolom yang menumpuk di mobile. Panel gelap memakai varian onDark pada komponen teksnya, sehingga kontras tetap lolos AA tanpa nilai warna baru.
- components/sections/AudienceFork.tsx
§4.3 — Numbered content
Grid layanan bernomor
Desain Pola slide bernomor dari carousel TikTok dipindahkan apa adanya: angka besar berwarna merah, judul tebal, paragraf, lalu daftar poin. Sel dipisah garis hitam tipis, bukan kartu dengan shadow.
Implementasi Data lima layanan dibaca dari content/services.json dan divalidasi saat build, jadi menambah layanan cukup mengedit satu file JSON. Satu sel sengaja dibiarkan hitam untuk memutus keteraturan grid.
- components/sections/ServicesGrid.tsx
- content/services.json
§4.5 · §4.3
CompareGrid & Kontroversial Take
Desain Moodboard tiga kolom dari post “cara ngonten & branding” menjadi komponen perbandingan, lalu ditutup dengan gerakan retoris khas brand: label merah “Kontroversial Take :” diikuti satu kalimat berpendapat.
Implementasi TakeCallout hanya menerima satu baris statement, bukan paragraf — batasan API-nya sengaja memaksa pernyataan tegas, bukan hedge. Varian onDark tersedia untuk pemakaian di section hitam.
- components/ui/CompareGrid.tsx
- components/ui/TakeCallout.tsx
§4.1 — Talent card
Portrait + name lockup
Desain Wordmark nama huruf kecil, portrait cutout dengan latar putih, lalu handle dan jumlah follower pada pill translusen di bawah. Kartu tidak punya rounded corner maupun shadow — hanya garis hitam.
Implementasi Aset yang tersedia adalah kartu sosial jadi: logo, wordmark, dan pill sudah menyatu di piksel. TalentPortrait memotongnya dengan crop berbasis fraksi supaya elemen yang dibangun ulang sebagai HTML tidak muncul dua kali, dan crop tetap benar di semua lebar srcset.
- components/ui/TalentPortrait.tsx
- components/ui/StatBadge.tsx
- components/sections/TalentGrid.tsx
§4.2 — Bio spread
Meet our trover
Desain Layout dua kolom, portrait tidak pernah di tengah. Heading bertumpuk dengan “trover” merah, bio dengan dua sampai empat frasa niche ditebalkan, dan niche yang sama diangkat menjadi chip.
Implementasi TalentBio membaca bio dan daftar niche dari file JSON talent, lalu merender keduanya: tebal di dalam paragraf sekaligus sebagai chip terpisah. Bio tetap berbahasa Indonesia sesuai suara brand — code-switching tidak dipaksa diterjemahkan.
- components/ui/TalentBio.tsx
- components/ui/TalentHero.tsx
- content/talents/*.json
§4.4 — Full-black
Section break & CTA
Desain Slide hitam berfungsi sebagai palate cleanser di antara section yang padat foto, sekaligus panggung terakhir sebelum CTA. Tidak ada fotografi di sini — hanya teks dan satu tombol.
Implementasi SectionBreakBlack membungkus konten dan menyalakan varian onDark pada komponen anaknya. WhatsApp tetap jalur konversi utama, sesuai perilaku situs yang berjalan sekarang.
- components/ui/SectionBreakBlack.tsx
- components/layout/WhatsAppCTA.tsx
PRD §6.2 — Portfolio
Case study & logo wall
Desain Klien tanpa case study tertulis tetap tampil sebagai logo saja, bukan kartu palsu yang mengarang metrik. Kejujuran ini bagian dari suara brand, bukan kompromi.
Implementasi clients.json boleh menunjuk caseStudySlug; loader konten memeriksa silang setiap slug ke file case study yang ada dan menggagalkan build kalau salah ketik, sehingga tidak ada tautan mati yang lolos.
- components/sections/ClientLogos.tsx
- lib/content.ts
- content/clients.json
PRD §6.5 — About
Pilar Why Us
Desain Empat pilar dari situs lama dibawa maju dengan penataan ulang, memakai pola bernomor yang sama seperti grid layanan supaya sistemnya konsisten lintas halaman.
Implementasi Komponen kartu bernomor yang sama dipakai ulang — pola yang muncul di tiga halaman berbeda hanya ditulis sekali.
- components/ui/NumberedInsightCard.tsx
- app/about/page.tsx
PRD §6.5 · ARCHITECTURE §7
Kontak
Desain WhatsApp diletakkan sebagai jalur pertama, bukan alternatif, karena itu perilaku yang sudah terbukti di situs sekarang. Form menyusul sebagai jalur kedua.
Implementasi Form hanya tampil bila NEXT_PUBLIC_FORM_ENDPOINT diisi dengan endpoint Web3Forms atau Formspree. Tanpa itu panelnya menampilkan blok WhatsApp beserta catatan setup, sehingga situs tidak pernah menayangkan form yang tidak mengirim ke mana-mana.
- components/sections/ContactForm.tsx
- .env.example
06
Komponen yang Dipakai Ulang
Seluruh pola di atas dibangun dari daftar berikut. Kolom terakhir menunjuk bagian DESIGN.md yang melahirkannya.
| Komponen | Fungsi | Sumber |
|---|---|---|
| TwoToneHeadline | Headline dengan satu kata beraksen merah | §3, §4.1, §4.2 |
| TalentHero | Portrait full-bleed, wordmark nama, logo, pill statistik | §4.1 |
| TalentBio | Bio dua kolom dengan niche keyword tebal + tag chip | §4.2 |
| TakeCallout | Eyebrow merah “Kontroversial Take :” + satu kalimat tegas | §4.3 |
| NumberedInsightCard | Foto + nomor + judul + body + TakeCallout | §4.3 |
| SectionBreakBlack | Pemisah section full-black tanpa foto | §4.4 |
| CompareGrid | Grid tiga kolom + blok penjelasan di bawahnya | §4.5 |
| StatBadge | Ikon platform + handle + follower, pill translusen | §4.1 |
| MarqueeTicker | Strip tagline berjalan horizontal | Pola situs lama |
| TalentPortrait | Gambar responsif + crop terhadap kartu sosial sumber | §4.1, §5 |
| Reveal | Reveal singkat saat elemen masuk viewport | §7 |
07
Motion & Interaksi
Motion di sini cepat dan singkat, meniru pergantian slide carousel, bukan parallax sinematik yang membuat situs agensi terdengar seragam. Reveal berdurasi 380ms dengan pergeseran vertikal kecil, dijalankan sekali saat elemen masuk viewport.
Implementasi Reveal memakai IntersectionObserver dan hanya membalik satu atribut data; transisi sesungguhnya hidup di CSS. Marquee berhenti saat hover. Seluruh animasi dimatikan di bawah prefers-reduced-motion, termasuk scroll-behavior.
08
Aksesibilitas
- Merah dipakai untuk teks berukuran besar atau label uppercase pendek; pada ukuran body, kontrasnya diperiksa sebelum merge.
- Focus ring merah dengan offset terlihat baik di atas latar putih maupun hitam.
- Setiap gambar punya alt deskriptif — portrait talent menjelaskan konteks, bukan mengulang nama.
- Menu mobile memakai elemen <details> bawaan: semantik disclosure benar tanpa JavaScript.
- Skip link menuju konten utama tersedia di setiap halaman.
09
Do / Don’t
Do
- Kunci setiap layar ke hitam + putih + satu merah.
- Biarkan tipografi jadi elemen grafis dominan — besar, percaya diri, sesekali memotong grid.
- Pakai fotografi cutout full-bleed, bukan gambar berbingkai.
- Ulang “Kontroversial Take :” sebagai momen tanda tangan brand.
Don’t
- Menambah warna aksen kedua, gradien, atau nuansa pastel.
- Memakai display type tipis untuk headline — suara brand ini berat dan blak-blakan.
- Meratakan tengah body copy panjang.
- Membiarkan halaman talent jatuh ke template influencer generik: kartu rounded, shadow lembut, gradien pastel.
10
Item Terbuka untuk Handoff
- Ambil nilai hex merah persis dari file logo sumber — #EA1B23 masih perkiraan dari DESIGN.md §2.
- Identifikasi atau lisensikan typeface display asli pada wordmark talent. Build ini memakai Archivo untuk logotype dan Figtree untuk wordmark serta body sebagai padanan terdekat.
- Sediakan portrait talent resolusi tinggi. Aset saat ini adalah kartu sosial jadi, sehingga logo, wordmark, dan pill statistik harus di-crop lewat TalentPortrait.
- Putuskan apakah fotografi konten kultur hitam-putih dipakai apa adanya atau diarahkan ulang khusus web.
11
Kontak
Pertanyaan soal sistem desain ini, asetnya, atau implementasinya:
croissantsmoon@gmail.comDokumen ini bisa disimpan sebagai PDF lewat dialog cetak peramban.