Brand system

TapRasa brand kit untuk layar mobile yang modern, hangat, dan premium.

Gallery ini memusatkan logo, glyph, warna, tipografi, komponen, dan contoh screen agar identitas TapRasa konsisten di seluruh produk.

Primary wordmark

Tone

Clean, friendly, warm, dan premium tanpa noise visual yang berlebihan.

CTA

Green untuk aksi utama, orange hanya untuk highlight dan call to action.

Structure

8pt spacing, radius 12–20px, shadow lembut, typography berhierarki jelas.

Asset library

Logo, icon, dan glyph untuk kebutuhan brand

Asset utama TapRasa sekarang tersimpan di /public/brand dan dipakai langsung oleh design system.

Primary Logo

/brand/logo.png

Temporary React Icon

react-icons / FiSmartphone

Brand Glyph

/brand/glyph.png

Color tokens

Palet dipusatkan supaya komponen tetap konsisten di semua layar dan state.

Primary Green

#1E4D3B

Secondary Green

#2E7D4C

Accent Orange

#FF8A00

Background Cream

#F6F1EB

White

#FFFFFF

Text Dark

#1F1F1F

Text Grey

#8A8A8A

Border

#E5E5E5

Typography

Poppins dipakai sebagai suara visual utama. Hierarki dijaga agar mobile terasa rapi dan tidak padat.

28px bold

TapRasa

Pesan cepat, rasa tepat.

Kombinasi ini menjaga nada brand tetap hangat, jelas, dan premium di layar kecil.

20px semibold

TapRasa

Pesan cepat, rasa tepat.

Kombinasi ini menjaga nada brand tetap hangat, jelas, dan premium di layar kecil.

Body

16px regular

TapRasa

Pesan cepat, rasa tepat.

Kombinasi ini menjaga nada brand tetap hangat, jelas, dan premium di layar kecil.

Caption

12px medium

TapRasa

Pesan cepat, rasa tepat.

Kombinasi ini menjaga nada brand tetap hangat, jelas, dan premium di layar kecil.

UI kit

Komponen dibikin reusable dan mobile-first, dengan primary action yang jelas dan mudah dipindai mata.

Button

Input field

Default

Masukkan teks

Focus

State focus

Error

Email salah

Format email tidak valid

With icon

Cari restoran

Password

••••••••

Badge

PromoNewVerified4.8

Card

Warung Hijau

Nusantara · Coffee

Verified

4.8 ★15-20 menit1.2 km

Nasi Ayam Bakar

Ayam bakar, sambal, lalapan

Rp32k

Promo

Gratis ongkir untuk order pertama

Aktifkan promo untuk pelanggan baru hari ini.

Pakai sekarang

Belum ada hasil

Ubah kata kunci pencarian atau hapus filter.

Reset filter

Search bar

Cari restoran atau menuFilter

Toast

Pesanan tersimpan

Keranjang berhasil diperbarui.

Promo aktif

Kamu mendapatkan diskon 20% untuk menu tertentu.

Pembayaran gagal

Coba metode pembayaran lain atau ulangi proses.

Navigation

Bottom navigation menempatkan Scan sebagai primary action dan tidak tenggelam di antara item lain.

Aturan layout

Scan di tengah dengan ukuran paling menonjol.
Green untuk active state, orange hanya aksen penting.
Maksimal 5 item untuk menjaga fokus dan keterbacaan.

Modal & feedback

Bottom sheet, modal, dan toast dibuat ringan supaya tidak mengganggu alur order dan pembayaran.

Pilih metode pembayaran

QRISRekomendasi

CashlessOVO / GoPay / Dana

Pesanan tersimpan

Keranjang berhasil diperbarui.

Promo aktif

Kamu mendapatkan diskon 20% untuk menu tertentu.

Pembayaran gagal

Coba metode pembayaran lain atau ulangi proses.

Mascot usage

3D dan 2D tidak boleh dicampur dalam satu screen. Atur berdasarkan konteks screen-nya.

3D mascot

Hero
Onboarding
Promo
404

2D mascot

Empty state
Loading
Error
Success

Larangan

Jangan campur 3D dan 2D dalam satu screen.
Jangan gabungkan 3D dan 2D pada satu screen.

Storybook gallery

Preview screen inti untuk login sampai 404 dengan komposisi visual yang konsisten.

Masuk ke TapRasa

Scan, tap, pesan, dan bayar dalam alur yang cepat untuk restoran dan UMKM kuliner.

nama@domain.com

Password

••••••••

Buat akun

Bergabung untuk order lebih cepat

Nama

Nama lengkap

nama@domain.com

Password

Buat password

✓Saya setuju dengan ketentuan penggunaan.

Home

TapRasa

Selamat datang, Rasa

Pesan dari restoran favoritmu

New

Cari restoran atau menuFilter

Promo

Diskon 20% hari ini

Cocok untuk makan siang atau dinner cepat. Berlaku sampai jam 21.00.

Pakai sekarang

Warung Hijau

Nusantara · Kopi · Rice bowl

Verified

4.8 ★15-20 menit1.2 km

Restaurant detail

Verified4.8

Warung Hijau

Comfort food, kopi, dan menu cepat saji

Promo aktifBaru buka

Nasi Ayam Bakar

Ayam bakar, sambal, lalapan, dan nasi hangat

Rp32k

Iced Coffee Latte

Kopi susu creamy dengan es batu premium

Rp24k

Menu list

Cari dan pilih item dengan cepat

Cari menu favoritFilter

Mie Goreng TapRasa

Mie goreng spesial dengan topping ayam suwir

Rp28k

Promo

Matcha Latte

Minuman creamy untuk pairing dessert

Rp26k

Cart / checkout

Keranjang

Review sebelum checkout

Ringkasan pesanan

Nasi Ayam BakarRp32k

Iced Coffee LatteRp24k

TotalRp56k

Kode promo

Masukkan kode

Order status

Status pesanan

Pesanan sedang diproses

Pesanan diterima

Dapur sedang menyiapkan pesananmu.

Diterima

Diproses

Siap diambil

Empty state

Belum ada pesanan

Mulai dari halaman beranda atau scan QR di meja restoran untuk melihat menu.

Mulai pesan

404 page

Halaman tidak ditemukan

Coba kembali ke beranda atau gunakan scan untuk masuk ke alur pesan.

Layout rules

Mobile first
8pt spacing system
Soft shadow
Cream background

Color rules

Orange hanya untuk CTA / highlight
Green untuk primary action
Avoid heavy shadows

Typography rules

H1 28 bold
H2 20 semibold
Body 16 regular
Caption 12 medium

System intent

Clean
Warm
Friendly
Premium