Situs ini proyek demo, bukan situs resmi Jack & John Kitchen.
Brief Proyek Demo
Jack & John Kitchen
Situs Web Resmi — Konsep & Rencana Kerja
Versi 1.0 · Dokumen demo · Bukan materi resmi Jack & John Kitchen atau ISMAYA Group
1. Ringkasan
Jack & John Kitchen adalah jaringan babi kriuk fast-casual dengan 10+ outlet di Surabaya dan Jakarta, didukung ISMAYA Group. Meski traksi offline kuat dan Instagram aktif dengan 24 ribu pengikut, brand ini belum memiliki situs web sendiri. Seluruh penemuan digital bergantung pada platform pihak ketiga: GoFood, GrabFood, ShopeeFood, Instagram, dan satu halaman link-in-bio.
Proyek ini adalah purwarupa demonstratif sebuah rumah digital resmi: gabungan penceritaan brand, etalase menu lengkap, dan alur pemesanan serta katering yang ringkas — dibangun untuk perilaku konsumen Indonesia yang mobile-first dan berbasis WhatsApp. Situs yang Anda lihat dibuat sebagai contoh kerja, bukan produk komersial yang dipesan klien.
2. Masalah Yang Diselesaikan
Tidak ada aset digital milik sendiri — nol kehadiran SEO untuk pencarian "babi kriuk Jakarta".
Kisah pendiri yang kuat tidak tersaji di mana pun.
Menu dan harga hanya bisa dilihat lewat aplikasi pengantaran.
Permintaan katering ditangani ad-hoc lewat WhatsApp tanpa alur terstruktur.
Audiens ekspatriat tidak terlayani karena tidak ada konten berbahasa Inggris.
3. Ruang Lingkup Halaman
Beranda
Hero, menu unggulan, cerita singkat, outlet, bukti sosial, CTA katering
Menu
Kategori Babi Kriuk, Babi Kecap, Babi Pedas, Paket, Produk Kemasan
Katering
Paket, galeri acara, formulir permintaan, FAQ
Tentang Kami
Kisah pendiri, cerita resep, kemitraan ISMAYA, linimasa, liputan media
Outlet
Peta Google, kartu lokasi, filter kota Surabaya / Jakarta
Kontak
Formulir umum, WhatsApp, email, tautan media sosial
4. Arah Desain
Estetika Bold Street Food Editorial — kontras tinggi, dipimpin tipografi, dan Instagram-native. Latar hitam pekat (#0C0C0C), teks putih, aksen kuning asam (#FFE600) dan merah (#E8231E). Tipografi Barlow Condensed 900 untuk display, Barlow untuk label, Plus Jakarta Sans untuk teks. Sudut selalu tajam — nol border-radius. Pola garis hitam-putih dari kemasan dipakai sebagai penanda brand di pembatas antar bagian. Motion cepat dan menghentak, bukan pudar perlahan, dengan dukungan penuh prefers-reduced-motion.
5. Arsitektur Teknis
Lapisan
Pilihan
Alasan
Framework
Next.js 14 (App Router)
SSG + ISR untuk SEO, pipeline gambar, server components
Bahasa
TypeScript
Keamanan tipe di seluruh model data
Styling
Tailwind CSS + CSS custom properties
Token desain dipetakan langsung ke variabel CSS
CMS
Sanity.io
Tim brand mengubah menu dan jam outlet tanpa deploy
Formulir
React Hook Form + Zod
Validasi tipe-aman, bundle kecil
Bilingual
next-intl
Bahasa Indonesia (default) ↔ English
Email
Resend
Pengiriman formulir katering dan kontak
Hosting
Vercel
Edge network dengan PoP Asia Tenggara
Gaya arsitektur: Jamstack dengan server-side rendering selektif. Tanpa backend kustom, tanpa basis data, tanpa autentikasi. Kompleksitas infrastruktur didorong ke layanan terkelola sehingga tim fokus pada produk, bukan operasional.
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.
Minggu
Fase
Keluaran
Minggu 1
Fondasi & Sistem Desain
Riset brand dan audit aset. Penetapan token desain (warna, tipografi, spasi, motion). Scaffold Next.js + Tailwind. Pembuatan komponen dasar: tombol, kartu, form field, navigasi, footer. Penyiapan model konten Sanity dan pengumpulan foto serta salinan teks.
Minggu 2
Halaman Inti
Beranda lengkap (hero, menu unggulan, pernyataan brand, Hack Series, cerita, outlet, bukti sosial, feed Instagram, CTA katering). Halaman Menu dengan tab kategori dan kartu produk. Halaman Outlet dengan peta dan filter kota.
Minggu 3
Konversi & Bilingual
Halaman Katering (paket, galeri, FAQ) beserta formulir permintaan. Halaman Tentang Kami dan Kontak. Serverless function untuk kedua formulir plus notifikasi email. Rate limiting. Penyelesaian terjemahan ID/EN dan routing lokal.
Minggu 4
QA, Optimasi & Peluncuran
Audit performa (Core Web Vitals, Lighthouse 90+), audit SEO (meta, JSON-LD, sitemap, hreflang), audit aksesibilitas WCAG 2.1 AA, uji lintas peramban dan perangkat, uji kirim formulir dan tautan WhatsApp, proofreading dua bahasa. Cutover DNS, Search Console, verifikasi analitik, pengumuman peluncuran.
7. Di Luar Lingkup
Checkout e-commerce dengan payment gateway
Akun pengguna atau login
Pelacakan pesanan real-time
Integrasi API GoFood / GrabFood (memakai deep link)
Program loyalitas / stamp card
Blog atau bagian resep
Aplikasi mobile iOS / Android
8. Kontak
Pertanyaan, umpan balik, atau diskusi mengenai proyek ini:
croissantsmoon@gmail.com
Panduan Sistem Desain
Jack & John Kitchen
Bold Street Food Editorial — Identitas Visual Situs Web
Versi 1.0 · Dokumen demo · Diturunkan dari DESIGN.md dan tangkapan layar implementasi
Gbr. 1 — Hero beranda. Seluruh prinsip sistem hadir sekaligus: latar hitam, fotografi makanan dramatis sebagai lapisan penuh, tipografi display Barlow Condensed, satu CTA kuning berdampingan dengan satu tombol ghost, dan navigasi transparan di atas hero.
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
Garis — pola garis vertikal hitam-putih pada seluruh kemasan. Aset visual paling dikenali dan wajib muncul di setiap titik sentuh digital.
Kuning — kuning asam adalah momen "tombol volume di angka 11". Menandai kegembiraan, promosi, dan energi puncak.
Huruf sebagai atmosfer — judul seperti "CRUNCHY! CRUNCHY! CRUNCHY!" tidak mendeskripsikan makanan; ia adalah pengalaman makanannya.
Fotografi gelap dan dramatis — latar marmer arang, close-up tajam. Makanan bersinar melawan kegelapan.
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.
Gbr. 2 — Emblem pada navigasi. Varian putih di atas hitam — varian utama di web. Emblem dipertahankan utuh; wordmark tidak pernah dipakai tanpa lingkaran pada konteks digital.
2.1 Varian Warna
Utama — hitam di atas putih
Latar terang, cetak, emboss
Terbalik — putih di atas hitam
Latar gelap (utama di situs web)
Satu warna — hitam penuh
Cetak monokrom, stempel
Putih penuh
Overlay di atas fotografi gelap, kemasan
Kuning di atas hitam
Konteks promosi / kampanye saja
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
#0C0C0C
Black
Latar utama seluruh materi brand
#FFFFFF
White
Teks utama di atas latar gelap, logo
#FFE600
Yellow
Aksen hero, CTA utama, sorotan kampanye
#E8231E
Red
Urgensi, promo, aksen sekunder
3.2 Palet Perluasan
#141414
Black Soft
Latar kartu, variasi permukaan
#1A1A1A
Black Stripe
Panel antara di pola garis
#FFD000
Yellow Hover
Status hover/pressed elemen kuning
#C41A16
Red Dark
Permukaan tombol merah (kontras AA)
#B0A89A
Grey Warm
Teks sekunder, keterangan, metadata
#2C2C2C
Grey Dark
Garis batas, pembatas, status nonaktif
#F5F0E8
Cream
Permukaan terang alternatif (jarang)
#25D366
WhatsApp
Tombol WhatsApp — warna platform
Gbr. 3 — Panel pernyataan brand. Satu-satunya seksi yang membalik seluruh skema menjadi kuning penuh dengan huruf hitam — 15.3:1, lolos AAA. Pembatas garis hitam-putih membingkai panel di atas dan bawah sehingga pembalikan warna terbaca sebagai keputusan sistem, bukan kecelakaan.
3.3 Aturan Pemakaian
Warna
Pemakaian Utama
Jangan Dipakai Untuk
Black
Latar halaman, permukaan kartu
Teks isi — pakai putih
White
Teks isi, judul di latar gelap, logo
Latar gelap — pakai hitam
Yellow
Tombol CTA utama, label kampanye, aksen seksi
Teks isi panjang, status galat
Red
CTA sekunder, urgensi, badge promo
Blok teks besar, latar
Grey Warm
Keterangan, metadata, label sekunder
Apa pun yang butuh penekanan tinggi
Grey Dark
Garis batas, pembatas, elemen nonaktif
Latar — terlalu dekat ke hitam
3.4 Rasio Kontras (WCAG AA)
Pasangan
Rasio
Status
Putih di atas Hitam #0C0C0C
20.7:1
AAA
Kuning #FFE600 di atas Hitam
15.3:1
AAA
Hitam di atas Kuning #FFE600
15.3:1
AAA
Putih di atas Merah #E8231E
4.6:1
AA (teks besar)
Putih di atas Merah Gelap #C41A16
6.0:1
AA
Hitam di atas Putih
20.7:1
AAA
Grey Warm di atas Hitam
5.1:1
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.
Lebar, tebal, terbaca di semua ukuran. Nama kategori, header, label tombol.
Body / antarmuka
Plus Jakarta Sans 400–600
Dioptimalkan untuk teks Indonesia/Latin, sangat terbaca di ukuran kecil.
Aksen / tagar
Barlow Condensed 500 italic
Label #PorkFreak, #HackSeries, sub-tag kampanye.
Gbr. 4 — Kutipan pendiri di halaman Tentang Kami. Contoh tipografi sebagai atmosfer: kutipan diperlakukan sebagai display, bukan sebagai teks isi bertanda kutip. Tanda kutip berwarna kuning dan bidang garis diagonal di kiri menggantikan foto potret.
4.1 Skala Ukuran
Token
Nilai
Pemakaian
display-xl
clamp(80px, 12vw, 160px)
Hero, header kampanye full-bleed
display-lg
clamp(56px, 8vw, 100px)
Hero seksi, callout kampanye
display-md
clamp(40px, 5vw, 64px)
Judul sub-seksi
display-sm
clamp(28px, 3.5vw, 40px)
Judul kartu, label fitur
heading-lg
24px
Judul seksi halaman
heading-md
18px
Label subseksi, nama kategori menu
heading-sm
14px
Tag, badge, label kapital kecil
body-lg
18px
Paragraf pembuka, deskripsi fitur
body-md
16px
Teks isi standar
body-sm
14px
Keterangan, metadata, cetakan halus
body-xs
12px
Teks legal, mikro-copy footer
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:
Standar 24px
Sempit 12px
Diagonal 45°
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%.
Gbr. 5 — Seksi Hack Series. #KARYAREBOHACK diperlakukan sebagai label kampanye kuning di atas judul display putih. Fotografi kemasan bergaris menempati separuh kanan layar tanpa bingkai — bleed penuh ke tepi.
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.
Gbr. 6 — Galeri acara katering. Fotografi kampanye dengan overlay tipografi berkontras tinggi. Foto boleh digelapkan 10–20% agar teks terbaca, tetapi makanan harus tetap dikenali. Tangan yang memegang mangkuk memberi rasa sosial dan skala.
Konteks
Format
Maks
Dimensi
Hero / full-bleed
WebP
300 KB
1920×1080
Kartu menu
WebP
80 KB
800×600
Thumbnail galeri
WebP
40 KB
400×400
Tentang / orang
WebP
120 KB
1200×800
OG / share sosial
PNG
100 KB
1200×630
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
ease-brand
cubic-bezier(0.22, 1, 0.36, 1)
Masuk tajam, keluar halus — default
ease-impact
cubic-bezier(0.34, 1.56, 0.64, 1)
Sedikit overshoot — judul display
ease-out
cubic-bezier(0.16, 1, 0.3, 1)
Ease-out standar
ease-press
cubic-bezier(0.4, 0, 0.2, 1)
Tekanan tombol
7.2 Skala Durasi
instant
80 ms
Tekan tombol, status toggle
fast
150 ms
Transisi hover
base
250 ms
Transisi UI standar
moderate
400 ms
Reveal kartu, dropdown
slow
600 ms
Masuknya seksi
dramatic
900 ms
Animasi hero
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%.
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
Varian
Permukaan / Teks
Pemakaian
Primary
Kuning #FFE600 / hitam
Aksi terpenting di halaman — Pesan Sekarang
Secondary
Merah gelap #C41A16 / putih
Penting tapi bukan utama — Katering, Kontak
Ghost
Transparan / putih, garis 2 px
Aksi sekunder di latar gelap — Lihat Menu
WhatsApp
Hijau #25D366 / hitam
Tautan pesan WhatsApp langsung
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.
Gbr. 7 — Kartu menu. Foto rasio 4:3 dengan bleed penuh, badge BESTSELLER kuning di pojok kiri atas, judul Barlow Condensed 800, deskripsi grey-warm, harga kuning, dan CTA WhatsApp hijau. Latar kartu #141414 dengan garis batas #2C2C2C dan aksen kuning 3 px di tepi kiri.Gbr. 8 — Kartu outlet. Nama outlet sebagai display, alamat dan jam buka memakai ikon garis tipis, dua tombol berdampingan. Badge kondisional DELIVERY ONLY (garis putih) dan NEW OUTLET (merah) muncul di pojok kanan atas kartu. Tab filter kota di atas grid memakai kuning untuk status aktif.Gbr. 9 — Kartu paket katering. Kartu tengah ditandai MOST POPULAR dan diberi garis batas kuning penuh — satu-satunya elemen kuning di seksi, sesuai aturan satu aksen per seksi. Harga memakai Barlow Bold kuning berukuran display; daftar isi paket memakai centang kuning.Gbr. 10 — Formulir kontak. Label Barlow Bold 12 px kapital dengan spasi lebar, input berlatar #141414 dengan garis 2 px #2C2C2C yang berubah kuning saat fokus, radius 0 px. Kolom kanan menempatkan CTA WhatsApp hijau sebagai jalur tercepat sebelum daftar email dan sosial.
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
HERO — satu viewport penuh, video/foto makanan gelap, teks rata kiri, dua CTA
PEMBATAS GARIS — bar garis animasi setinggi 8px
MENU UNGGULAN — 3–4 hidangan andalan, scroll horizontal di mobile, grid 4 kolom di desktop
CTA KATERING — seksi lebar penuh, "MADE FOR EVERY EVENT", dua CTA
FOOTER — logo, tautan, sosial, tautan cepat outlet, hak cipta
Gbr. 11 — Halaman menu dengan tab kategori. Tab filter memakai kuning untuk status aktif dan garis abu untuk sisanya, dengan jumlah item dalam kurung sehingga pengguna tahu isi tiap kategori sebelum menekannya. Grid empat kolom di desktop, scroll horizontal di mobile.
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.
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.
Prinsip
Contoh
Pimpin dengan selera
"Renyah. Gurih. Tak Tertandingi." bukan "Kami menyajikan hidangan babi berkualitas."
Kalimat pendek lebih menghantam
"Crunch. Savor. Repeat." bukan paragraf penjelas tekstur.
Tagar adalah salinan kelas satu
Pakai #PorkFreak di judul, bukan hanya di keterangan.
Bilingual tanpa kaku
Jaga tiap bahasa tetap wajar — jangan menerjemahkan harfiah antara ID dan EN.
Tindakan, bukan deskripsi
"PESAN SEKARANG" bukan "Klik di sini untuk memesan."
Kuasai ceruknya
"The No.1 Babi Kriuk In Town" — nyatakan, jangan ragu.
10.1 Panduan CTA
Aksi
Indonesia
English
Pesan makanan
Pesan Sekarang
Order Now
Pesan via WhatsApp
Pesan via WhatsApp
Order via WhatsApp
Lihat menu
Lihat Menu
See Menu
Permintaan katering
Pesan Katering
Inquire Catering
Cari outlet
Cari Outlet
Find Us
Pelajari cerita
Kenali Kami
Our Story
Kirim formulir
Kirim
Submit
11. Boleh & Tidak Boleh
Boleh
Gunakan sudut tajam pada semua elemen UI — kartu, tombol, tag
Biarkan tipografi display mendekati tepi layar untuk dampak maksimal
Pakai pola garis sebagai sinyal brand yang berulang
Pertahankan latar hitam kecuali seksi memang menuntut kontras
Pakai kuning hanya untuk satu elemen terpenting per seksi
Jadikan fotografi makanan sebagai pahlawan di tiap seksi
Gunakan huruf kapital untuk semua teks Barlow / Barlow Condensed
Jaga CTA tetap langsung dan berorientasi tindakan
Pastikan setiap halaman punya minimal satu pintu masuk WhatsApp
Tidak Boleh
Jangan pakai sudut membulat — bertentangan dengan karakter brand
Jangan pakai huruf serif di mana pun
Jangan pakai aksen ungu, biru, atau bernada dingin
Jangan jadikan latar terang sebagai default
Jangan pakai stock photography atau foto makanan generik
Jangan pakai kuning untuk teks isi — hanya untuk display dan tombol utama
Jangan pakai gradien pada tipografi
Jangan pakai lebih dari dua warna aksen dalam satu seksi
Jangan jadikan pola garis sebagai latar utama — ia hanya aksen
Jangan pakai keluarga font di luar tiga tipografi yang ditetapkan
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.
Kontak
Pertanyaan, umpan balik, atau diskusi mengenai sistem desain ini:
