6. Linimasa — 4 Minggu

Rencana peluncuran asli dalam PRD terbentang 8 minggu. Versi berikut memadatkannya menjadi empat minggu kerja dengan menjalankan produksi konten secara paralel dengan pembangunan, dan menggabungkan QA dengan peluncuran di minggu terakhir.

1. DNA Brand

Jack & John Kitchen bukan rumah makan babi kelas fine-dining, dan bukan pula warung tradisional. Ia menempati ruang tersendiri: fast-casual premium dengan energi budaya jalanan. Bayangkan kepercayaan diri visual Shake Shack bertemu budaya street food grafis Jakarta.

1.1 Lima Nilai Komunikasi

• Lantang — kalau ragu judulnya sudah cukup besar, besarkan lagi.
• Kontras — latar hitam, huruf putih, aksen kuning atau merah. Tanpa nada tengah yang keruh.
• Bangga — "#1 Babi Kriuk In Town" bukan klaim, melainkan pekik perang.
• Komunitas — tagar seperti #PorkFreak dan #KaryareboHack adalah aset brand kelas satu.
• Selera — setiap keputusan desain harus membuat penonton lapar.

1.2 Estetika

Primer: Bold Graphic / Type-Led. Sekunder: Street Food Editorial. Energi: kontras tinggi, percaya diri, tanpa permintaan maaf. Rujukan brand: Shake Shack (garis, keberanian), Dave's Hot Chicken (huruf sebagai desain), Howlin' Ray's (street food premium), Supreme (bahasa grafis diterapkan pada makanan).

1.3 Lima Penanda Visual Unik

1. Garis — pola garis vertikal hitam-putih pada seluruh kemasan. Aset visual paling dikenali dan wajib muncul di setiap titik sentuh digital.
2. Kuning — kuning asam adalah momen "tombol volume di angka 11". Menandai kegembiraan, promosi, dan energi puncak.
3. Huruf sebagai atmosfer — judul seperti "CRUNCHY! CRUNCHY! CRUNCHY!" tidak mendeskripsikan makanan; ia adalah pengalaman makanannya.
4. Fotografi gelap dan dramatis — latar marmer arang, close-up tajam. Makanan bersinar melawan kegelapan.
5. Budaya hack — edisi terbatas dibingkai sebagai "hack" sehingga brand punya energi drop streetwear.

2. Logo

Emblem lingkaran ganda dengan garpu dan pisau bersilang di atas wordmark. Huruf "O" pada JOHN adalah cincin berongga yang menjadi titik fokus visual. Kata "KITCHEN" duduk di bawah wordmark dengan spasi huruf rapat.

2.1 Varian Warna

2.2 Ruang Bebas & Ukuran Minimum

Ruang bebas minimum = tinggi huruf "K" pada kata KITCHEN, di keempat sisi. Ukuran minimum: 32×32 px untuk favicon (ikon garpu-pisau saja), 80 px tinggi untuk pemakaian dalam halaman, dan diameter 20 mm untuk cetak.

2.3 Larangan

• Jangan diputar, diregangkan, atau didistorsi
• Jangan diberi bayangan jatuh atau efek glow
• Jangan ditempatkan di atas latar foto ramai tanpa alas badge solid
• Jangan mewarnai ikon garpu-pisau terpisah dari wordmark

3. Sistem Warna

3.1 Palet Inti

3.2 Palet Perluasan

3.3 Aturan Pemakaian

3.4 Rasio Kontras (WCAG AA)

Catatan implementasi: tombol merah memakai #C41A16 sebagai permukaan, bukan #E8231E. Putih di atas #E8231E hanya 4.5:1 — cukup untuk teks besar, tetapi label tombol berukuran 14 px membutuhkan 4.5:1 pada teks normal. #C41A16 memberi 6.0:1 dan lolos tanpa syarat; #E8231E tetap dipakai sebagai warna hover dan aksen non-teks.

4. Tipografi

Brand memakai tipografi sebagai elemen desain utama, bukan sekadar penyampai informasi. Judul bersifat arsitektural — ia mengisi ruang dan menciptakan energi. Jarak antara display dan body sengaja dibuat ekstrem.

4.1 Skala Ukuran

4.2 Spasi Huruf & Tinggi Baris

Display: -0.01em (dirapatkan sedikit pada ukuran sangat besar). Sub-judul kapital: 0.08em. Body: 0.01em. Badge kapital kecil: 0.12em. Tinggi baris: display 0.95, heading 1.1, body 1.6, keterangan 1.4.

5. Ikonografi & Pola

5.1 Pola Garis

Garis vertikal hitam-putih adalah aset visual paling khas — hadir di seluruh kemasan, tas, dan kolateral. Tiga varian dipakai di web:

Dipakai untuk: pembatas antar seksi utama, aksen batas kiri/kanan kartu callout, status loading, elemen dekoratif di belakang bingkai foto produk, latar badge "baru" atau "unggulan". Tidak dipakai untuk: latar seluruh halaman (terlalu ramai), latar di belakang teks isi (masalah keterbacaan), atau di atas latar kuning maupun merah (bentrok).

5.2 Perlakuan Tagar

Tagar bukan sekadar salinan teks — ia elemen grafis. Selalu kapital, karakter # adalah bagian dari visual, boleh diperbesar melampaui teks sekitarnya, dan boleh dipakai sebagai tekstur latar pada opasitas 8–12%.

5.3 Sistem Badge

Tiga tipe badge: kuning dengan teks hitam (ORDER NOW, MOST POPULAR), merah dengan teks putih (BESTSELLER, NEW OUTLET), dan latar garis dengan teks putih (varian baru). Semuanya memakai Barlow Bold 12–14 px, spasi huruf 0.08em, padding 6×12 px, dan radius sudut 0 px — badge promo tidak pernah membulat.

6. Arah Fotografi

Gaya: gelap, dramatis, editorial. Latar: hitam pekat atau arang gelap, sesekali tekstur marmer gelap. Pencahayaan: satu sumber terarah kuat dari atas-depan sehingga bayangan dan sorotan pada kulit babi menjadi dramatis. Pembingkaian: makanan mengisi 60–80% bidang; tidak ada foto piring kosong. Suhu warna: hangat — amber keemasan kulit renyah meletup di atas latar dingin.

Difoto: close-up ekstrem tekstur kulit renyah, potongan melintang yang memperlihatkan lapisan, uap dari saus yang baru dituang, tangan yang memegang atau mengoper mangkuk, beberapa mangkuk sekaligus, tuangan saus dalam gerak. Tidak difoto: latar putih terang, piring kosong, flat lay dengan properti yang menenggelamkan makanan, hero yang tidak fokus, dan stock photography apa pun.

7. Motion & Animasi

Motion harus terasa seperti makanannya: cepat, energik, memuaskan. Tidak ada pudar lambat yang anggun — ini bukan brand spa. Animasi tajam, bertujuan, dan sedikit mengejutkan.

7.1 Kurva Easing

7.2 Skala Durasi

7.3 Katalog Animasi

• strikeIn — judul hero menghantam masuk dari bawah dengan skew 2°, bukan mengambang lembut. Tiap kata di-stagger 0/80/160 ms.
• cardReveal — kartu menu naik 32 px saat masuk viewport melalui IntersectionObserver, di-stagger 80 ms.
• Hover kartu — translateY(-4px) scale(1.02) plus gambar dicerahkan 10%.
• Tekan tombol — scale(0.96) selama 80 ms.
• Pulse WhatsApp — cincin box-shadow hijau mengembang tiap 2.5 detik pada tombol mengambang.
• stripeSlide — pembatas garis bergeser terus-menerus 24 px per 0.8 detik.

7.4 Reduced Motion

Seluruh animasi wajib menurun dengan anggun. Pada prefers-reduced-motion: reduce, durasi animasi dan transisi dipangkas ke 0.01 ms, iterasi dibatasi satu kali, smooth scroll dimatikan, dan elemen yang menunggu reveal langsung diberi opasitas penuh sehingga tidak ada konten yang hilang.

8. Pustaka Komponen

8.1 Tombol

Semua tombol memakai Barlow Bold 14 px kapital, spasi 0.08em, padding 14×28 px, radius 0 px, dan menyusut ke 0.96 saat ditekan. Varian kecil memakai padding 10×20 px dan ukuran 12 px. Tombol WhatsApp memakai teks hitam, bukan putih: hitam di atas #25D366 memberi 8.2:1 sedangkan putih hanya 2.5:1 dan gagal AA.

8.2 Navigasi

Tinggi 64 px di desktop dan 56 px di mobile. Transparan di atas hero, lalu berubah menjadi hitam solid dengan garis bawah begitu digulir lebih dari 24 px — tanpa transisi lembut, ia menjentik. Tautan aktif berwarna kuning. Toggle bahasa ID | EN dan tombol Pesan Sekarang duduk di kanan. Di mobile, menu hamburger membuka overlay hitam penuh layar dengan tautan bertumpuk dalam ukuran display Barlow Condensed.

8.3 Pembatas Seksi

Bar garis setinggi 8 px yang bergerak terus-menerus, dipasang di antara seksi-seksi besar. Ia adalah pengulang sinyal brand paling murah sekaligus paling dikenali.

9. Spesifikasi Halaman

9.1 Urutan Seksi Beranda

1. HERO — satu viewport penuh, video/foto makanan gelap, teks rata kiri, dua CTA
2. PEMBATAS GARIS — bar garis animasi setinggi 8px
3. MENU UNGGULAN — 3–4 hidangan andalan, scroll horizontal di mobile, grid 4 kolom di desktop
4. PERNYATAAN BRAND — panel penuh, tipografi Barlow Condensed berukuran ekstrem
5. HACK SERIES — seksi kampanye edisi terbatas, aksen kuning atau merah
6. CUPLIKAN CERITA — kutipan pendiri, foto Monica & Jocky, CTA ke halaman Tentang Kami
7. PEMBATAS GARIS
8. TEMUKAN KAMI — toggle kota, kartu outlet
9. BUKTI SOSIAL — kutipan ulasan Google, badge peringkat
10. FEED INSTAGRAM — 6–9 unggahan terbaru, judul "#PORKFREAK"
11. CTA KATERING — seksi lebar penuh, "MADE FOR EVERY EVENT", dua CTA
12. FOOTER — logo, tautan, sosial, tautan cepat outlet, hak cipta

9.2 Spasi

Grid dasar 8 pt: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, dan 128 px. Padding seksi desktop 96 px vertikal dan 64 px horizontal; di mobile 64 px dan 20 px.

9.3 Grid & Breakpoint

Grid 12 kolom, lebar maksimum kontainer 1280 px, ditengahkan. Breakpoint: 480 px (ponsel besar), 768 px (tablet), 1024 px (laptop), 1280 px (desktop), 1440 px (desktop lebar).

10. Suara & Gaya Salinan

Lantang. Bangga. Lapar. Jack & John Kitchen berbicara seperti kios terbaik di festival makanan — percaya diri, energik, sedikit nakal. Tidak pernah korporat, tidak pernah terlalu dipoles, selalu membuat ingin makan.

10.1 Panduan CTA

11. Boleh & Tidak Boleh

12. Token Desain

Seluruh nilai di dokumen ini hidup sebagai CSS custom property di app/globals.css dan menjadi satu-satunya sumber kebenaran. Komponen tidak pernah menulis nilai literal — mereka membaca token.

Override mobile pada breakpoint 768 px hanya menyentuh tiga token — padding seksi vertikal (64 px), padding horizontal (20 px), dan tinggi navigasi (56 px). Sisanya identik di semua ukuran layar; tidak ada sistem paralel untuk mobile.