Referensi UI · v1

WebKoGedy

Sistem pengelolaan bahan dan pesanan restoran. Minimalis tapi hangat — oranye dipakai untuk tindakan dan penanda, bukan untuk dekorasi. Setiap komponen di bawah adalah yang benar-benar dipakai layar pembelian, laporan, dan stock opname.

Warna

Aksi--o-600
Hover terang--o-500
Tint--o-100
Latar tint--o-50
Kanvas--bg
Permukaan--surface
Garis--line
Teks--ink
Teks 2--ink-2
Berhasil--ok-ink
Perlu cek--warn-ink
Gagal--bad-ink

Netralnya hangat (dasar coklat, bukan abu-abu), supaya oranye terbaca ramah dan bukan peringatan. Warna semantik sengaja diredam agar tidak bersaing dengan warna aksi.

Tipografi

32 / 700 / -0.02em — judul halaman Laporan Pengeluaran
16 / 600 — judul kartu & tabel Pembelian bulan ini
15 / 400 — teks isi Daftar pembelian tersimpan berkesinambungan dan dapat disaring per kategori.
13 / 600 — label formulir Nama supplier
11.5 / 600 / 0.06em — header tabel Total harga
tabular-nums — semua angka Rp 12.480.000 · 1.250,500 kg

Plus Jakarta Sans: geometris dan bulat, jadi ramah, tapi tetap netral untuk data. Angka selalu tabular-nums — kolom rupiah yang tidak sejajar membuat perbandingan mustahil.

Tombol

Satu tombol utama per layar. Ekspor dan kirim pesan bersifat sekunder — sering dipakai, tapi bukan tujuan halaman.

Formulir

Catat pembelian

Satu nota bisa memuat lebih dari satu bahan.

kg
Rp
Jumlah tidak boleh kurang dari nol.

Penanda status

Final Perlu diperiksa Dari Pawoon Terjadwal Nonaktif Gagal kirim

Bulat penuh dan kecil, jadi terbaca sebagai penanda, bukan tombol. Titik hanya pada status yang berubah sendiri — agar mata menangkap yang perlu ditindak.

Ringkasan angka

Pengeluaran bulan ini
Rp 48,2 jt
↑ 6,4% dari Juli
Pembelian tercatat
184
dari 12 supplier
Perlu diperiksa
7
hasil baca nota otomatis
HPP Juli
31,8%
↓ 1,2 poin

Saringan laporan

Kategori: Daging Kategori: Sayur Agu 2026

Tabel

Pembelian — Agustus 2026

TanggalBahanSupplier JumlahHarga satuan TotalStatus
27 Agu Ayam potong
Daging
CV Daging Sejahtera 12,500 kg38.000 Rp 475.000 Final
27 Agu Cabai merah keriting
Sayur
Toko Sayur Bu Yanti 8,000 kg62.000 Rp 496.000 Perlu diperiksa
26 Agu Beras premium
Bahan pokok
UD Bumbu Nusantara 50,000 kg14.200 Rp 710.000 Final
26 Agu Minyak goreng
Bahan pokok
UD Bumbu Nusantara 24,000 ltr17.500 Rp 420.000 Terjadwal
Total 184 pembelian Rp 48.204.500
Menampilkan 1–4 dari 184

Angka rata kanan dan tabular; total tebal dengan garis atas ganda. Baris hover memakai tint oranye paling muda — cukup untuk melacak baris, tidak cukup untuk mengalahkan penanda status.

Kerangka aplikasi

Catatan pembelian

GG
7 nota menunggu diperiksaHasil baca otomatis dari WhatsApp tidak pernah langsung final — periksa jumlah dan harganya dulu.
Pesanan terkirimDikirim ke Toko Sayur Bu Yanti pukul 07.00.
WhatsApp terputusPesan terjadwal tertunda sampai sesi disambungkan kembali.

Keadaan kosong

Belum ada pembelian bulan ini

Catatan pembelian akan muncul di sini begitu nota pertama dimasukkan, baik manual maupun hasil baca otomatis.

Aturan yang dipakai

Oranye hanya untuk tindakan

Tombol utama, baris aktif, dan tint penanda. Bukan latar besar, bukan hiasan. Kalau semua oranye, tidak ada yang menonjol.

Netral yang hangat

Dasar coklat muda, bukan abu-abu. Ini yang membuat tampilannya ramah tanpa perlu ilustrasi atau sudut sangat bulat.

Angka selalu tabular

Rata kanan, lebar digit sama, ribuan bertitik. Ini software uang — kolom yang tidak sejajar bikin salah baca.

Datar, bayangan tipis

Batas 1px dan bayangan nyaris tidak terlihat. Kedalaman dipakai hanya untuk yang mengambang: dialog dan menu.

Sudut 10px

Cukup bulat untuk terasa lembut, cukup tegas untuk tabel padat. Tombol 7px agar tidak terlihat seperti pil.

Status pakai kata

Warna saja tidak cukup — dibaca di layar terang, oleh mata yang berbeda. Setiap penanda selalu bertuliskan keadaannya.