Panduan Brand  •  AMOGENZ VIBE

Satu suara, dalam gelap
maupun terang.

Sistem desain AMOGENZ — soft, memahami user, dan konsisten di semua permukaan. Halaman ini sendiri bisa diganti modenya lewat tombol di atas.

Konsep UI: AMOGENZ VIBE

UI yang memahami user dan peka terhadap kebiasaan. Untuk web, artinya satu hal — pengunjung harus bisa berkata ini secepat mungkin:

"Oalah, ini to AMOGENZ."

Kalimat itu adalah ukuran sukses web ini. Bukan lama kunjungan, melainkan kecepatan paham.

Langkah 1Masuk
→
Langkah 2Ngeh± 3 detik
→
Langkah 3Paham
→
SuksesKeluar ✓

Informatif dulu. Tugas web ini bukan membuat orang betah, melainkan membuat pengunjung paham. Setiap layar menjawab satu pertanyaan: ini apa?

Mudah dicerna. Satu layar, satu pesan. Informasi disusun seperti tangga — dari yang paling penting ke pendukung.

Cepat pergi itu sukses. Begitu pengunjung "ngeh", web boleh ditutup. Menahan dengan distraksi justru mengkhianati tujuannya.

Biasa → Nyaman → Langsung Paham. Pakai pola yang sudah jadi kebiasaan. Nyaman tidak harus beda — kalau beda, user harus kenalan dulu.

Cara Kami Mendesain

Tiga pegangan kami dalam mendesain:

1. User tidak disuruh mikir

UI yang bagus itu yang tidak disadari. User memikirkan isi — pesan, postingan, orang — bukan aplikasinya. Setiap detik user berhenti dan bertanya "ini tombol apa ya?" adalah kegagalan kami.

2. Setiap aksi ada jawabannya

Setiap aksi ada jawabannya: terkirim, tersimpan, terhapus — seketika. Aplikasi bertanya hanya kalau akibatnya tidak bisa dibatalkan.

3. Posisi tidak pindah-pindah

Jari sudah hafal letak tombol dan menu. Jangan digeser-geser — antarhalaman maupun antarversi.

Intinya satu rantai:
Biasa→Nyaman→Langsung Paham

Pakai pola yang sudah biasa. Biasa → nyaman, nyaman → langsung paham tanpa belajar. Tidak harus beda — kalau beda, user harus kenalan dulu.

Targetnya bukan "mudah dipahami", tapi "tidak perlu dipahami". Baru sekali buka, rasanya sudah pernah pakai.
Kagum itu cuma sehari. Yang bikin betah bertahun-tahun: hal kecil yang mulus setiap hari — tombol yang tetap di tempatnya, kabar yang hilang sendiri.

Beda medium, beda kebiasaan

Tiap layar punya kebiasaan sendiri — jangan saling memaksa:

HP

Satu tangan, sesi cepat. Menu jadi satu tombol, yang penting dalam jangkauan jempol. Contoh: halaman ini — buka di HP.

iPad

Disentuh seperti HP, tapi layarnya lega.

Desktop

Mouse + keyboard. Navigasi terlihat semua, tidak perlu berburu menu. Contoh: spesimen topbar di bawah.

Warna

Palet resmi mode gelap + mode terang. Ketuk warna untuk menyalin hex.

MODE GELAP
MODE TERANG

Latar gelap #101210 = warna di belakang judul prototipe (revisi terbaru). Hijau #4CAF50 = hijau tulisan prototipe, berlaku semua halaman.

Prinsip Soft

Semua soft, tidak jeglek — di mode gelap maupun terang. Bandingkan:

JANGAN — JEGLEK

Terlalu kontras

Hitam pekat #000, putih murni #FFF, hijau neon. Mata cepat lelah, kesan murahan.

Tombol
LAKUKAN — SOFT

Lembut di mata

Latar #101210 / #F2F2ED, teks soft, hijau #4CAF50. Nyaman lama, kesan premium.

Tombol

Mode gelap ≠ hitam pekat. Latar memakai #101210 — hitamnya "bernapas", tidak menekan mata.

Mode terang ≠ putih murni. Latar memakai #F2F2ED — putihnya hangat, tidak menyilaukan.

Tangga Warna = Tangga Informasi

Warna mengikuti pentingnya informasi. Contoh langsung (ikut mode halaman ini):

Judul utama — teks utama
Penjelasan pendukung — teks sekunder, dibaca kedua.
Keterangan kecil — teks redup, untuk yang sempat saja.
Tautan penting → hijau, hanya untuk aksi & penanda.

Hirarki Informasi

Urutan penting-tidaknya informasi di sebuah tampilan.

Gampangnya: ibarat koran — judul besar dulu, baru isi, paling bawah keterangan kecil. Mata dituntun dari yang penting ke yang kurang penting.

Coba bandingkan dua kartu berisi info yang sama persis ini:

oleh @amogenz
13 OKT 2026
peluncuran fitur baru
Mulai hari ini semua pengguna bisa mencoba tema terang yang lembut di mata, lengkap dengan pilihan warna aksen.
BACA SELENGKAPNYA →

Versi acak: tanggalnya teriak, judulnya bisik — mata bingung mulai dari mana. Versi rapi: sekali lirik langsung paham. Yang penting tampil penting.

Hirarki Desain (Visual)

Urutan yang dilihat mata — diatur lewat ukuran, warna, dan jarak.

Gampangnya: mata manusia itu malas — dia selalu menangkap yang besar dan kontras dulu. Jadi kalau ada yang penting, bikin dia besar atau kontras. Kalau semuanya besar dan warna-warni, mata menyerah: tidak ada yang penting.
1 2 3
Kaos AMOGENZ 2026
Rp 120.000
Katun combed 30s, sablon hijau AMOGENZ. Stok terbatas.

Urutan baca mata: judul (paling besar) → harga (kontras) → tombol beli. Alatnya cuma tiga: ukuran, warna, jarak.

Penerapan

Komponen baku dalam mode aktif halaman ini — ganti sakelar tema untuk melihat keduanya tetap soft:

TOMBOL

LENCANA

BARU INFO

KARTU

Judul kartuDeskripsi singkat dengan teks sekunder yang lembut di mata.

GEOMETRI

Semua sudut membulat — tanpa sudut lancip. Jari-jari: 8 / 10 / 12 / 16 / pil.

Spesimen Hidup

Ini elemen asli dari produk kami — hidup dan bisa diklik, bukan gambar.

DIKLON DARI — AMOGENZ

Topbar web utama

Topbar asli web utama — kode dan gayanya sama persis dengan yang live.

Gampangnya: bingkai ini sempit seperti layar HP — makanya tampil hamburger. Klik untuk membuka drawer; klik bulan/matahari untuk ganti tema di dalam bingkai.

Ini topbar beneran — bukan gambar. Di web aslinya yang layar lebar, navigasinya tampil semua.

DIKLON DARI — BLOG AMOGENZ

Banner — kabar yang hilang sendiri

Persis seperti banner blog kami: muncul 3,2 detik, lalu hilang sendiri.

Gampangnya: seperti pelayan — lapor "beres", lalu pergi.

Klik tombolnya — ini banner asli blog kami.

DIKLON DARI — BLOG AMOGENZ

Dialog konfirmasi — bertanya hanya kalau permanen

Dialog asli blog kami saat menghapus gambar. Batal kiri, tombol bahaya kanan — tidak pernah tukar. Pola yang sama dipakai aplikasi Aksara.

Gampangnya: aplikasi bertanya hanya untuk hal yang tidak bisa dibatalkan.

Klik → jawab → banner muncul. Alur beneran di blog kami.

DIKLON DARI — BLOG AMOGENZ

Tombol — bentuk dan posisi dikunci

Tombol asli blog kami: utama pil hijau, bahaya pil merah, sekunder hantu.

Klik Simpan → banner. Klik Hapus → dialog. Tersambung seperti di produk asli.

DIKLON DARI — BLOG AMOGENZ

Tombol aksi 44 — dijawab seketika

Tombol bulat 44px dari halaman baca blog kami — pas seukuran jari. Sentuh → langsung merespons. Sentuh lagi → batal.

Gampangnya: untuk hal ringan, aplikasi percaya saja sama jarimu.

Klik — langsung hijau, angka tambah, posisi tidak bergeser.

Yang Tidak Kami Lakukan

Daftar larangan kami — kalau ada yang melanggar ini di produk AMOGENZ, itu bug.

  • ×Tombol pindah-pindah tempat antarhalaman atau antarversi tanpa alasan.
  • ×Satu ikon untuk dua maksud, atau dua ikon beda untuk maksud yang sama.
  • ×Bertanya untuk hal yang bisa dibatalkan. Masa like saja ditanya yakin?
  • ×Kabar baik yang nempel terus. Notifikasi yang tidak hilang sendiri untuk kabar gembira = dilarang.
  • ×Animasi yang minta dikagumi. UI tidak sedang tampil di panggung.
  • ×Tombol penting di luar jangkauan jempol pada layar utama HP.
  • ×Memaksa pola satu layar ke layar lain. Pola HP dipaksa ke desktop, atau pola aplikasi dipaksa ke web.

Untuk Developer: Angka yang Dikunci

Mau pakai AMOGENZ VIBE di proyekmu? Ini angka yang tidak boleh diubah:

Hijau utama

Tombol & elemen: #4CAF50
Teks hijau di latar gelap: #7CC47F
Teks hijau di latar terang: #2E7D32

Makna warna

Bahaya (hapus): #E5484D
Peringatan: #E8A13D

Latar gelap

Latar: #101210
Kartu: #212421
Teks: #F2F3F0

Latar terang

Latar: #F2F2ED
Kartu: #FAFAF6
Teks: #20221F

Sudut (radius)

Kartu: 20
Dialog: 28
Kolom isian: 12
Tombol aksi: pil 999

Lainnya

Font: font sistem (bukan kustom)
Jarak: kelipatan 4 / 8
Target sentuh minimal: 44

Yang dikunci: angka dan perilakunya. Selama itu dipatuhi, proyekmu sudah ber-VIBE.