dari meja roaster
Design system
Panduan tampilan situs Drip & Roast: warna, huruf, bentuk, komponen, motif, ilustrasi, gerak, dan bahasa. Token di src/app.css, aturan di DESIGN.md. Versi 1 November 2026.
Karakter
Hangat, teliti, sedikit kasar seperti kertas kraft. Seperti berdiri di samping meja roaster yang rapi. Sumbernya bahan mereka sendiri: monogram D bertetes, warna biji sangrai, kantong kraft, dan catatan roaster.
Energi 2
Satu ilustrasi atau satu kemasan besar per bagian. Sisanya tenang dan mudah dibaca.
Ritme 3
Beranda dan Cerita berganti bentuk: carousel, deret alat, rak, kurva, tiket. Katalog dan checkout rata (1).
Gerak 2
Gerak sebagai umpan balik. Tanpa fade-up saat scroll, tanpa putar otomatis.
Warna
Warna dari bahan kopi: krim untuk ruang baca, sangrai untuk identitas, kraft untuk kemasan. Terakota satu-satunya aksen, dipakai hemat pada cap dan pita kategori. Variabel shadcn dipetakan ke palet ini.
krim#F5EAE0
Latar halaman
kertas#FBF6EF
Header, panel, isian
muted#EFE2D5
Panggung kemasan, chip
pasir#D8C6B2
Garis pemisah
pasir-tua#9C7B64
Garis kontrol
kraft#D4B896
Kantong, footer
kraft-tua#A98660
Lipatan kantong
kopi#7A5A47
Teks sekunder
espresso#3B251A
Teks utama
sangrai#55290F
Logo, hero, tombol utama
sangrai-2#6E3818
Hover tombol utama
terakota#A25432
Cap, pita seduh manual
terakota-tua#844025
Aksen teks
terakota-muda#E9B08F
Label di permukaan sangrai
Pasangan yang dipakai
| Contoh | Teks / latar | Kontras | Untuk |
|---|---|---|---|
| Aa Kopi | espresso / krim | 12,10:1 | Teks utama |
| Aa Kopi | kopi / krim | 5,24:1 | Teks sekunder |
| Aa Kopi | kopi / kertas | 5,78:1 | Teks sekunder di panel |
| Aa Kopi | krim / sangrai | 10,37:1 | Tombol utama, teks hero |
| Aa Kopi | terakota-muda / sangrai | 6,47:1 | Label di tiket dan hero |
| Aa Kopi | espresso / kraft | 7,57:1 | Footer dan label kemasan |
| Aa Kopi | terakota-tua / krim | 6,47:1 | Aksen teks |
| Aa Kopi | pasir-tua / krim | 3,26:1 | Garis kontrol (non-teks, min 3:1) |
Huruf
Young Serif hanya untuk wordmark dan satu judul utama per halaman, jadi serif terasa seperti cap di kemasan. Judul lain dan semua informasi memakai Schibsted Grotesk. Nanum Pen Script hanya untuk catatan roaster di hero dan anotasi kurva, tidak pernah untuk informasi.
step-542 → 72 px · Hero | Dari sangrai ke seduhanmu. |
step-436 → 64 px · Judul halaman (h1) | Kopi kami |
step-330 → 44 px · Judul bagian | Di rak minggu ini |
step-224 → 30 px · Judul panel, harga | Rp72.000 |
step-118 px · Paragraf pembuka | Kopi untuk alat seduh di rumahmu. |
step-016 px · Isi | Pilih berat dan gilingan sebelum menambahkan kopi ke keranjang. |
step--113 px · Keterangan | Ongkir dihitung di checkout setelah kota tujuan dipilih. |
Young Serifwordmark | DRIP & ROAST |
Nanum Pen Scriptcatatan roaster | baru keluar dari drum |
Bentuk dan bayangan
Tiga radius dan satu bayangan. Kartu dan panel duduk rata; bayangan hanya untuk yang mengambang di atas halaman.
--radius 8 px
Tombol, isian, chip, tiket
--radius-panel 12 px
Kartu, panggung kemasan, header
--radius-container 28 px
Hero dan footer
--shadow-float
Header, menu, dialog
Komponen
shadcn-svelte (bits-ui) yang sudah disesuaikan brand. Tinggi kontrol minimal 44 px. Fokus: satu gaya global, garis sangrai 2 px berjarak 2 px.
Semua contoh di bagian ini bisa dicoba: diklik, diketik, atau dipilih dengan keyboard.
Tombol
Pilihan produk
Filter katalog
4 kopi. Chip menyala sangrai saat aktif, angka di dalamnya menunjukkan jumlah kopi sebelum dipilih.
Kurva sangrai
Titik "diangkat" bergeser ke tingkat yang dipilih (300 ms). Lima biji yang sama muncul di setiap kartu produk.
Kartu
Kintamani Honey
Jeruk manis, Madu, Teh hitam
mulai Rp72.000
House Blend No. 1
Cokelat, Karamel, Kacang
mulai Rp58.000
Kirim hari ini
Pesan sebelum pukul 14.00 untuk Bekasi dan Jakarta Timur.
Disangrai
Senin sampai Sabtu, dalam jumlah kecil.
Digiling
Sesuai alat seduh yang kamu pilih.
Ringkasan checkout
Motif
Ornamen dari meja roaster mereka sendiri, dipakai hemat.
Kantong kraft dicetak dari data produk: pita kategori, nama, asal, lima biji. Pengganti foto sampai kemasan asli difoto.
Cap karet hanya untuk status nyata: Baru, Habis, kode error. Catatan tangan satu per layar, di hero.
Dither tinta cokelat di atas kraft, dari panorama footer. Menyatukan ilustrasi hero dengan penutup halaman.
Ilustrasi
Dither tinta cokelat berlatar transparan untuk hero dan footer, ikon garis untuk alat seduh. Tanpa teks dan tanpa wajah di dalam gambar. Build: WebP, hero dalam dua lebar (480 dan 960 px).
IL-01 · Tray pendingin roaster
IL-06 · Jeruk, madu, dan ranting kopi
IL-07 · Menuang air ke drip bagIL-24 · Meja roastery dalam ditherSlot yang menunggu gambar
Arahan gaya: Dither tinta cokelat (sangrai #55290F sampai kraft tua #A98660) berlatar transparan, seperti cetakan tinta pada kertas kraft. Samakan dengan IL-01, IL-06, IL-07, dan IL-24 yang sudah jadi: satu benda utama, komposisi longgar, aksen terakota #A25432 paling banyak 10% bidang. Tanpa gradien halus, tanpa teks di dalam gambar, tanpa wajah. Simpan WebP ukuran 2x di static/ilustrasi/ dengan nama sesuai kolom berkas.
| ID | Judul | Tempat | Rasio · ukuran | Berkas |
|---|---|---|---|---|
IL-10 | Biji dari dekat Segenggam biji sangrai dari dekat, garis belahan biji jelas. Satu versi dipakai semua produk sampai foto asli ada. | Halaman produk, foto kedua | 1:1 · 1000 × 1000 | il-10.webp |
IL-20 | Meja cupping Deretan mangkuk cupping, sendok, dan lembar catatan di meja panjang. Tampak atas miring. | Cerita, langkah 1 | 4:3 · 1600 × 1200 | il-20.webp |
IL-22 | Biji beristirahat Rak kayu berisi toples dan kantong biji berlabel tanggal, satu kantong terbuka dengan katup terlihat. | Cerita, langkah 3 | 4:3 · 1600 × 1200 | il-22.webp |
IL-23 | Grinder ke kemasan Grinder meja mengeluarkan bubuk ke kantong kraft yang dipegang terbuka, sendok takar di samping. | Cerita, langkah 4 | 4:3 · 1600 × 1200 | il-23.webp |
Kemasan
Belum ada foto produk. Selama itu setiap kopi tampil sebagai kantong kraft yang labelnya dibaca dari katalog. Warna pita membedakan kategori; cap Baru dan Habis menandai status stok.
Pita terakota · seduh manual
Pita sangrai · espresso dan blend
Pita kraft · drip bag
Gerak
| Elemen | Gerak | Alasan |
|---|---|---|
| Hero | Geser manual dengan tombol, titik, atau panah keyboard. Tanpa putar otomatis | Pembaca yang menentukan tempo |
| Kartu produk | Kantong naik 4 px, panggung sedikit menggelap (200 ms) | Tanda bisa diklik |
| Kurva sangrai | Titik "diangkat" bergeser 300 ms | Menghubungkan pilihan dengan kurva |
| Keranjang | Layar penuh, pudar dan naik 16 px (200 ms) | Asal muncul jelas, isi terbaca lega |
| Menu ponsel | Bar header memanjang ke bawah (200 ms) | Menu dibuka dari tempat yang sama |
| Chip, pilihan, tombol | Warna 150 ms, tombol turun 1 px saat ditekan | Umpan balik sentuhan |
Semua gerak berhenti bila pengunjung memilih kurangi gerakan di perangkatnya.
Bahasa
Sapa pembaca dengan "kamu". Kalimat pendek, seperti roaster yang menjelaskan di meja. Mulai dari alat seduh pembeli, bukan istilah proses. Fakta (harga, ongkir, jam batas kirim) diambil dari satu berkas dan diberi tanda contoh selama prototype.