Kopi Renjana · Spesimen desain

Warm Editorial

Majalah kopi independen, bukan toko online. Halaman ini jangkar semua keputusan UI berikutnya — kalau ada yang terasa meleset, betulkan di sini dulu, bukan di halaman jadi.

roast · paper · hands

01

Palet

Enam warna inti. Satu aksen saja — Toffee. Sisanya netral hangat.

  • Espresso#2A2019

    Teks utama (ink)

  • Coffee#6F4E37

    Teks & tombol sekunder

  • Toffee#C17A3F

    Aksen tunggal — CTA, link

  • Cream#F5EFE5

    Background utama (paper)

  • Terracotta#B0532F

    Tag seasonal

  • Sage#6B7A52

    Aksen work-friendly

Token semantik

  • --color-paper-deep#EDE4D3Card / surface sekunder
  • --color-ink-soft#5C4A3ATeks sekunder / caption
  • --color-line#D9CCB8Border hairline
  • --color-accent-deep#9A5B2AHover / active aksen

Rasio pemakaian 60 · 25 · 10 · 5

Kalau satu section mulai terasa “terlalu ramai”, hampir selalu penyebabnya Toffee lewat dari 10%.

02

Tipografi

Fraunces untuk suara, Plus Jakarta Sans untuk keterbacaan, Fragment Mono untuk angka & tag — nuansa struk.

  • display-1Fraunces · 56–88px · lh 1.0

    Kopi serius.

  • display-2Fraunces · 36–48px · lh 1.05

    Boleh kerja di sini.

  • h3Fraunces · 24–28px · lh 1.2

    Kopi Susu Renjana

  • body-lgPlus Jakarta Sans · 18–20px

    Renjana dimulai dari satu mesin espresso secondhand di garasi.

  • bodyPlus Jakarta Sans · 16px

    WiFi 100 Mbps, colokan tiap meja, dan area quiet buat ngejar deadline.

  • labelFragment Mono · 12–13px · tracking +0.08em

    Seasonal · Manual brew

  • priceFragment Mono · 14–16px

    Rp28.000

Bukan Inter (wajah default AI slop), bukan Playfair (klise mewah palsu). Plus Jakarta Sans buatan Tokotype — kebetulan yang enak: font Indonesia untuk kopi Indonesia.

03

Kontras

Angka dari riset 08 §1. Satu baris gagal, dan itu disengaja dicatat.

  • Espresso di atas Cream13:1Teks utama — aman semua ukuran
  • Ink-soft di atas Cream7:1Caption & teks sekunder
  • Toffee sebagai teks kecil3:1Jangan. Toffee hanya untuk teks besar atau background
  • Espresso di atas Toffee4.5:1Pola tombol CTA yang dipakai
04

Tombol

Tekan tombolnya. Umpan baliknya menekan ke dalam (scale 0.97), bukan mengambang atau menyala.

Badge work-friendly

  • Colokan tiap meja
  • WiFi 100 Mbps
  • Area quiet
  • Parkir motor & mobil
  • Non-smoking
05

Permukaan

Radius 6px, border hairline hangat, bayangan bernada cokelat. Tanpa blur, tanpa translucency.

Signature

Kopi Susu Renjana

Espresso, susu segar, gula aren dari Ciamis. Manisnya berhenti sebelum bikin eneg.

Rp28.000

Seasonal

Es Kopi Pandan

Cuma sampai akhir bulan. Pandan asli diseduh, bukan sirup.

Rp32.000

Kiri pakai shadow-card, kanan shadow-lift — keduanya bernada rgb(42 32 25), jadi tak pernah terlihat abu-abu dingin di atas kertas cream.

06

Roast mode

Hanya untuk /order — layar HP di meja saat sore. Token yang sama, nilai berbeda; komponen tak perlu tahu.

Meja 12

Pesanan kamu

  • 1× Kopi Susu RenjanaRp28.000
  • 2× Croissant ButterRp36.000
TotalRp64.000
07

Motion

Fisik, pendek, dan berhenti. Tak ada yang bergerak selamanya.

  • Tombol pressscale(0.97) · 120ms · ease-tactile
  • Reveal on scrollfade-up 12px · 400ms · ease-out · stagger 60ms
  • Hover kartu menuimage scale(1.03) 500ms · judul jadi Toffee
  • Marquee menu hari ini60s loop · pause on hover
  • Dilarangparallax scroll-jacking · glow gradient · animasi tanpa henti

Semua transisi mati otomatis saat prefers-reduced-motion aktif.