Sistem desain

Vouchera

Periksa status sebelum mencoba ulang

Paper, sage, olive, lime.

Satu bahasa visual untuk katalog, tugas, pasar tiket dan bantuan.

Komponen yang dipakai di produk. Tanpa transaksi, masuk akun, atau kode rahasia.

Maskot Vouchera menyapa

Kategori

Enam kategori publik. Setiap kartu menaut ke katalog atau pasar, bukan gambar statis.

Banner & maskot

Banner hero olive dengan satu ajakan utama dan maskot utuh; tinggi mengikuti isi.

Vouchera

Top up game favorit.

Isi saldo harian dari satu tempat. Pilih produk, periksa detail, lalu lanjutkan.

Pilih layanan ↗
Maskot Vouchera utuh hingga sepatu dengan headphone hijau limau dan jaket hijau zaitun sambil menunjuk ponsel

Radius panel, CTA lime kapsul, maskot utuh di kolom gambar. Tanpa saldo, statistik, atau klaim transaksi.

Warna & token

Delapan token merek dan dua garis batas. Paper untuk halaman, Sage untuk navigasi dan kartu, Olive untuk hero dan CTA gelap, Lime untuk aksi utama. Garis isian memakai border-sage. Status selalu membawa nama, bukan warna saja.

Olive$olive · #26331EHero, navigasi tugas, tombol sekunder dan CTA gelap
Deep$deep · #1C2617Latar gelap dan kursor di atas olive
Lime$lime · #D8F58FAksi utama, aksen dan menu aktif
Paper$paper · #FBF8E9Latar utama halaman dan label pada olive
Sage$surface-sage · #E8EDD9Navbar, kartu produk dan panel pendukung
Ink$ink · #151E0ETeks utama, judul dan harga
Muted$muted · #52604ATeks bantuan, label isian dan keterangan
Border$border-sage · #CCD5BCGaris isian dan panel; bukan penanda fokus

Aturan permukaan

Paper
Latar utama halaman dan isian kartu konten.
Sage
Navbar, kartu produk, panel pendukung dan kategori.
Olive
Hero, CTA gelap dan bilah notifikasi singkat.
Lime
Aksi utama, menu samping aktif dan penanda langkah.
Putih
Hanya untuk contoh warna, gambar produk dan latar maskot; warna kanonik, bukan permukaan konten.
Sage lembut
Kartu artikel, hub, bantuan, tanya jawab, dialog, spesimen dan keadaan galat sebagai permukaan lunak; juga isian tidak aktif.
Garis sage
Garis isian dan panel; bukan penanda fokus.
Garis lembut
Pemisah dan garis nonaktif pada isian serta daftar.

Pasangan kontras yang dipakai

Teks memakai token pasangan yang tertulis, bukan warna acak.

Olive

Teks contoh di atas olive.

Label
Deep

Teks contoh di atas deep.

Label
Lime

Teks contoh di atas lime.

Label
Paper

Teks contoh di atas paper.

Label
Sage

Teks contoh di atas sage.

Label
Ink

Teks contoh di atas ink.

Label

Tipografi

DM Sans 400 sampai 700 dalam rem: body 1rem/500, label 0.875rem/600, heading 1.75rem/700. Caption tidak lebih kecil dari 0.875rem.

Display · DM Sans 2.75–3.375rem / 700

Top up game favorit.

Heading · DM Sans 1.75rem / 700

Pilihan game

Judul bagian · DM Sans 1.375rem / 700

Rincian biaya

Body · DM Sans 1rem / 500

Pilih nominal, lalu cek detail pesananmu.

Label & keterangan · DM Sans 0.875rem / 600

Nomor telepon

Caption & bantuan · DM Sans 0.875rem / 500, minimum

Gunakan nomor yang masih aktif.

Ruang & bentuk

Grid dasar 0.5rem, jarak bagian 1.5 sampai 2rem, relatif terhadap ukuran teks pembaca. Isian minimal 3rem; target sentuh 2.75rem.

Skala jarak

0.25rem
0.5rem
0.75rem
1rem
1.25rem
1.5rem
1.75rem
2rem
2.25rem

Sudut melengkung

var(--radius-control)Isian, pilihan radio/checkbox, toast dan langkah checkout · 12px
var(--radius-panel)Panel konten, kartu kategori dan kartu produk ringkas · 24px
var(--radius-dialog)Dialog konfirmasi dan pemulihan · 28px
var(--radius-button)CTA kapsul, pagination, tab dan lencana status · penuh (100px)

Kontrol 12px, panel 24px, kapsul penuh (100px). Garis fokus 3px dengan jarak luar 3px tetap tipis.

Ikon

Tabler Icons bergaya garis 24px untuk navigasi, status dan aksi. Label teks tetap ada untuk aksi yang belum jelas.

Beranda
Dompet
Pengendali game
Tiket
Bangunan
Pesawat
Petir
Cari
Menu
Tutup
Centang
Peringatan
Jam
Unggah
Perlindungan
Panah kanan

Sumber: tabler/tabler-icons. Ikon bukan pengganti logo penyedia.

Tombol & tautan

Lime untuk aksi utama, Olive untuk sekunder, Sage dan ghost untuk pendukung. Hover hanya memperjelas; tekan tidak menggeser tata letak.

Normal
Ditekan
Fokus keyboard
Nonaktif

Isi tujuan untuk melanjutkan.

Memuat
Gagal + pemulihan

Pilih tombol untuk melihat tanggapan.

Kondisi tautan

Kerangka & navigasi

Landing memakai navbar kapsul sage yang mengapung; beranda dan halaman tugas memakai menu samping 13.75rem yang menyusut di layar sempit. Baris aktif memakai lime dengan label, bukan ikon saja.

Menu samping persisten

  • Beranda
  • Top up game
  • E-wallet
  • Pulsa & tagihan
  • Tiket & acara
  • Hotel
  • Transportasi
Game & e-walletSaldo siap. Gas lagi!Top up sekarang ↗Cara kerja · Privasi & ketentuan · Sistem desain

Navbar publik mengapung

Latar sage dengan garis border-sage; kategori membungkus, bukan terpotong.

Menu ikon ringkas

Isian & kode OTP

Label 0.875rem/600 dan bantuan minimal 0.875rem. Isian memakai kontrol bersama: tinggi minimal 3rem, radius kontrol dan garis sage. Kode OTP dapat ditempel sekaligus.

Grup kategori layanan

Tombol tertekan yang sama dengan katalog top up.

Kategori contoh: Semua. Tanpa produk nyata.

Gunakan nomor yang masih aktif.

Nama pemain perlu dikonfirmasi melalui pengecekan akun.

Nomor tujuan wajib diisi.

Tidak dapat diubah saat diproses.

Tunggu daftar produk dimuat.

Masukkan atau tempel 6 digit kode.

Masukkan kode OTP.

Isian pilihan kartu

Kategori tiketRegularRp250.000 · contoh
Pilihan kamarDeluxe Double2 tamu · 1 kasur double · 24 m²

Kartu pilihan: latar sage lembut, radius kontrol 12px, garis sage, label dan keterangan terpisah.

Kesalahan isian

Saat pengiriman gagal, ringkasan menerima fokus dan setiap tautan menuju isian terkait.

Rincian biaya di bawah memakai perilaku yang sama dan dapat dicoba.

Cek tujuan

Nomor HP, akun game dan nomor meter tidak saling menggantikan. Ringkasan menampilkan tujuan tersamarkan, bukan verifikasi.

Pulsa · Nomor HP08•• •••• 0248

Data disamarkan. Periksa nomor lengkap di isian privat.

Koreksi nomor
Game · Orbit ArenaID game 12345678 · ID server 1001

ID contoh. Nama pemain belum diperiksa.

Koreksi akun
PLN prabayar · Nomor meter54•• •••• 1234

Token Rp200.000 sedang tidak tersedia. Pilih nominal lain; tujuan tetap tersimpan.

Produk tidak tersedia
Contoh cek tagihan

Tagihan contoh ditemukan

Jenis
BPJS Kesehatan
Peserta
PES••• · Contoh
Periode
September 2026
Tagihan
Rp25.000

Contoh lokal; belum termasuk biaya metode dan bukan pembayaran.

Tidak ada tagihan

Tidak ada tagihan untuk periode ini; bukan bukti pembayaran berhasil.

Pengecekan gagal

Layanan pengecekan tidak tersedia. Jangan pakai nama peserta atau nominal hasil lama.

Rincian biaya top up

Pilih tujuan, nominal dan metode. Formulir hanya memeriksa format; tidak ada pembayaran.

Tujuan top up

Untuk pulsa, nomor ini juga menjadi tujuan. Gunakan 08 atau +628 tanpa spasi.

Pilih nominal

Nominal game adalah nilai produk contoh, bukan jumlah token atau kurs nyata.

Metode & biaya

Contoh ini tidak membuat kode QR atau nomor VA.

Perubahan harga

Nominal, metode dan harga bisa berubah terpisah; rincian baru meminta persetujuan ulang.

Nominal sedang dimuat

Contoh memuat

Memeriksa metode

VA
Rekening virtual (VA)Biaya contoh Rp4.000
Menunggu konfirmasi

Tinjau total baru

Biaya metode ikut menentukan total baru.

Biaya belum diatur

Harga barang
Rp25.000
Komisi penjualan
Belum diatur
Total akhir
Belum tersedia

Perhitungan diblokir sampai tarif komisi tersedia. Tidak memakai komisi Rp0.

Radio & checkbox

Radio dan checkbox terlihat di atas baris sage ber-radius kontrol. Satu radio per grup; persetujuan tidak pernah dicentang otomatis.

Pilihan notifikasi

Dipilih: Email status pesanan. Hanya contoh lokal.

Persetujuan

Belum disetujui. Tidak ada yang tersimpan permanen.

Tab filter

Tab kapsul untuk menyaring status: aktif olive, lainnya sage. Panah kiri-kanan, Home dan End memindahkan fokus.

Semua

Daftar contoh berisi status menunggu bayar sampai tidak berhasil.

Stepper checkout

Empat langkah: data & pilihan, periksa pesanan, pembayaran, hasil. Langkah berjalan memakai lime, selesai dan berikutnya sage; langkah aktif ditandai aria-current.

  1. 01Data & pilihan
  2. 02Periksa pesanan
  3. 03Pembayaran
  4. 04Hasil

Langkah 1 dari 4: Pilih produk dan nominal.

Pagination

Tombol halaman minimal 2.75rem dengan radius kontrol: aktif olive, lainnya sage. Elipsis tidak dapat difokus.

Halaman 1 dari 10. Contoh lokal, bukan daftar nyata.

Toast, dialog & pemulihan

Toast mengumumkan hasil lokal sekali. Dialog memakai fokus bawaan, Escape dan pengembalian fokus. Galat jaringan atau isian tidak menghapus isian.

Toast berhasil

Tekan tombol untuk melihat toast ber-radius kontrol.

Dialog konfirmasi

Keluar dari akun dan perubahan belum disimpan memakai dialog yang sama.

Belum ada pesanan

Pesananmu dari seluruh layanan akan muncul di sini.

Pilih layanan

Produk tidak ditemukan

Coba kata kunci lain atau hapus beberapa filter.

Hapus filter

Belum bisa memuat data

Periksa koneksi, lalu coba lagi. Data yang kamu isi tetap disimpan.

Coba lagi

Memuat produk

Ruang disisakan agar tata letak tidak melompat dan isian pengguna tidak dihapus.

Status & urutan proses

Status bernama dengan tanggal, jam dan zona waktu pasti. Menunggu konfirmasi, hasil belum diketahui dan hasil akhir tidak saling menggantikan.

Lencana status transaksi

Nama selalu tertulis; warna bukan satu-satunya penanda.

Menunggu bayarDiprosesSelesaiGagalKedaluwarsaRefund diproses

Hasil proses

Menunggu konfirmasi mitraBelum diketahui: belum ada hasilHasil akhir: berhasilHasil akhir: gagal
  1. Pembayaran terkonfirmasi

    Mitra pembayaran sudah mengonfirmasi. Barang belum terpenuhi.

  2. Pemenuhan sedang diproses

    Menunggu hasil mitra, bukan status berhasil.

  3. Hasil belum diketahui

    Periksa status melalui sistem. Jangan membeli ulang sebelum hasil jelas.

Pesanan sendiri

Status pembayaran, pemenuhan dan pengembalian dana dibaca terpisah. Beli lagi selalu meminta rincian harga baru.

Pesanan saya · contoh

Top up game · 120 kredit

Tujuan tersamarkan: ID •••• 4821

Pembayaran diterimaPemenuhan diproses
Rp24.500

Beli lagi diblokir selama hasil pemenuhan belum jelas agar tidak membuat pesanan ganda.

Pesanan saya · contoh

Isi dompet digital · Rp50.000

Nomor tujuan: +62 •••• ••91

Pembayaran diterimaPemenuhan berhasil
Rp51.500
Beli lagi: rincian harga baru

Nominal, biaya dan total diambil ulang dari sistem. Harga lama bukan persetujuan penarikan dana baru.

Pesanan saya · contoh

Token listrik · Rp100.000

Pemenuhan gagalPengembalian dana menunggu mitra

Gagal mengirim tidak berarti dana sudah kembali.

Rp102.000
Data lama, produk tidak aktif & pengembalian dana selesai
Status perlu diperbarui

Data terakhir 12 Nov 2026, 10.08 WIB. Beli lagi ditahan sampai pemeriksaan sistem.

Produk tidak aktif

Riwayat tetap terbaca. Tidak bisa mengulang produk ini.

Pengembalian dana terkonfirmasi

Hasil mitra: dikonfirmasi 12 Nov 2026, 11.00 WIB. Terpisah dari pemenuhan gagal.

Kartu acara

Jadwal, kategori tiket dan kursi terlihat sebelum tindakan. Ilustrasi bukan sampul asli.

Ilustrasi panggung untuk contoh acara
Contoh · Acara

Senja di Taman

Lapangan Taman Utara, Jakarta

Tersedia: 2 tiketFestival · tanpa kursi

Rp450.000 per tiket · belum termasuk biaya

Lihat pola penawaran
Gambar sampul belum tersedia

Ruang Musik Kota

Bandung · 28 Nov 2026, 18.00 WIB

Tanpa gambar sampul

Tribun A · kursi A12 · 1 tiket tersedia

Pentas Akhir Pekan

Jakarta · 7 Nov 2026, 19.00 WIB

Acara dibatalkan

Penawaran diblokir. Pengembalian dana penerbit tiket belum terkonfirmasi.

Festival Kebun

Bogor · 2 Nov 2026, 16.00 WIB

Acara telah lewat

Arsip saja, tidak menerima penawaran.

Daftar penawaran

Harga per unit dan jumlah dijelaskan. Di ponsel kolom harga turun ke baris baru.

Pilih contoh penawaran

Dipilih: Senja di Taman. Unit tidak dipotong; hotel tidak dikali malam.

Penawaran beli & jual

Penawaran beli: harga maksimum per unit. Penawaran jual: harga minimum per unit.

Penawaran beli

Tidak akan setuju di atas Rp450.000 per tiket.

Maksimum harga barang
Rp900.000
Biaya / total akhir
Belum ada rincian dari sistem

Batas 3 penawaran beli lintas kategori.

Contoh lokal; tidak memublikasikan penawaran.

Penawaran jual

Untuk keseluruhan 2 malam, bukan harga per malam.

Paket dijual bersama: kamar dan seluruh tanggal tidak dapat dipisah.

Pengaturan komisi belum tersedia. Tidak memakai biaya Rp0 atau perkiraan hasil bersih.

Batas waktu pembayaran

Tanggal dan jam pasti dari sistem, bukan hitung mundur peramban.

Menunggu pembayaran

Batas bayar

Asia/Jakarta (UTC+7); batas waktu ditetapkan sistem.

Status diperiksa: 12 Nov 2026, 10.15 WIB.

Batas waktu kedaluwarsa

Pembayaran perlu dicek ulang

Jangan bayar ke instruksi yang kedaluwarsa.

Pola pemeriksaan kedaluwarsa

Periksa sistem sebelum keputusan akhir. Jika mitra masih menunggu konfirmasi, tampilkan kondisi itu, bukan gagal.

Verifikasi berdasarkan bukti

Masuk akun bukan verifikasi penjual. HP, rekening bank dan identitas punya hasil sendiri.

Nomor HP

+62 •••• ••91 · pemilik akun

Disetujui / terverifikasi

Bukan bukti identitas penumpang atau penerima.

Rekening bank

Rekening •••• 0812

Menunggu pemeriksaan

Belum memenuhi syarat penerimaan hasil penjualan.

Verifikasi identitas

Ditolak

Dokumen tidak terbaca. Data pribadi tidak ditampilkan publik.

Perbaiki bukti identitas

Baca alasan penolakan, siapkan foto jelas, lalu kirim ulang lewat unggahan privat.

Reservasi & kategori

Pasar pemindahtanganan reservasi yang sudah ada, bukan tempat pemesanan baru.

Contoh

Hotel Kebun Kota

Hotel · 20–22 Nov 2026

Pemindahan diizinkan pengelola hotelRp1.600.000 / reservasi utuhLihat detail
Contoh

Jakarta → Tokyo

Penerbangan · 2 rute · 1 dewasa

Izin pemindahan menunggu konfirmasiRp4.200.000 / rangkaian perjalananLihat detail
Contoh

Jakarta → Bandung

Kereta · 25 Nov 2026, 08.00 WIB

Tidak tersediaRp180.000 / perjalananLihat detail
Contoh

Bandung → Yogyakarta

Bus · 26 Nov 2026, 20.00 WIB

Batas pemindahan telah lewatRp220.000 / perjalananLihat detail
Contoh

Kebun Cahaya

Wisata · 29 Nov 2026, sesi 16.00–18.00 WIB

Izin pemindahan belum diketahuiRp125.000 / tiket masukLihat detail

Tanpa nama tamu, kode pemesanan atau dokumen privat di kartu publik.

Mobile LegendsDiamonds · Pilih nominal ↗

Lencana merek dompet

Logo resmi GoPayLogo resmi OVOLogo resmi ShopeePayLogo resmi DANA biru

Varian biru resmi menjadi acuan; logo putih resmi dipakai di kartu produk berlatar olive. Pertahankan proporsi dan ruang aman.

Ringkasan masa inap

Harga mencakup satu reservasi seluruh masa inap; tanggal dan jam memakai zona properti.

Ilustrasi ruang kamar hotel

Hotel Kebun Kota, Bandung

Masuk 20 Nov 2026, 15.00 WIB · keluar 22 Nov 2026, 12.00 WIB · 2 malam

Kamar / paket harga
Dua tempat tidur tunggal dengan pemandangan taman · Pemindahan fleksibel
Jumlah tamu
1 kamar · 2 dewasa
Harga per unit
Rp1.600.000 / reservasi seluruh masa inap

Pelepasan dana paling awal: keluar hotel + 24 jam, 23 Nov 2026, 12.00 WIB. Konfirmasi pembeli tidak mempercepatnya.

Rincian perjalanan

Semua rute dan zona waktu kedatangan terbaca; tiket mencakup perjalanan utuh.

Jakarta → Singapura → Tokyo

Maskapai: Aurora Air (contoh) · 1 dewasa · Rp4.200.000 per rangkaian utuh

  1. Jakarta (CGK) → Singapura (SIN)23 Nov 2026, 18.00 WIB → 20.50 SGT (Asia/Singapore)
  2. Singapura (SIN) → Tokyo (NRT)23 Nov 2026, 23.55 SGT → 24 Nov 2026, 08.00 JST (Asia/Tokyo)

Bagasi tercatat 20 kg dan kabin 7 kg. Batas perubahan nama maskapai: 22 Nov 2026, 18.00 WIB.

Ringkasan tiket masuk

Wisata memakai tiket masuk dan sesi; acara memakai jadwal, kategori tiket dan kursi.

Contoh · Wisata

Kebun Cahaya

Taman Cahaya Utara, Jakarta · 29 Nov 2026, sesi 16.00–18.00 WIB

Tiket masuk
1 dewasa · sekali masuk
Harga
Rp125.000 / tiket masuk
Izin pemindahan belum diketahui
Contoh · Acara

Senja di Taman

21 Nov 2026, 19.00 WIB · Lapangan Taman Utara, Jakarta

Festival · tanpa kursi bernomor · Rp450.000

Tiket masuk bukan kode batang atau bukti akses.

Pemindahan tiket dan dana

Berkas siap dilihat belum berarti pemindahan resmi terverifikasi.

Pemindahan reservasi hotel

  1. Berkas siap dilihatMelihat bukan konfirmasi.
  2. Pemindahan resmi menunggu konfirmasiPengelola hotel menilai perubahan tamu dan kendali pembatalan.
  3. Belum terverifikasiPerubahan nama pada tampilan saja tidak cukup.

Jadwal pelepasan dana

Ditahan · menunggu konfirmasi mitra
Akhir layanan terverifikasi
Keluar hotel 22 Nov 2026, 12.00 WIB
Akhir layanan + 24 jam
23 Nov 2026, 12.00 WIB
Pelepasan dana aktual
Belum dilakukan

Berkas privat & tiket

Nama berkas, alasan penahanan dan izin melihat terpisah; pratinjau bukan persetujuan pemindahan.

Pilih berkas

Hanya nama berkas ditampilkan. Isi tidak dibaca, disimpan, atau dikirim.

Nama: Belum ada berkas dipilih.

Siap dilihat · contoh lokal

tiket-contoh-redacted.pdf

Isi privat, nama peserta, kode reservasi dan kode batang tidak ditampilkan.

Melihat tidak mengonfirmasi penerimaan atau mempercepat pelepasan dana.

Sedang diperiksa
Pemeriksaan belum selesai. Belum dapat dilihat.
Ditolak
Jenis berkas tidak sesuai. Pilih berkas pengganti.
Ditahan untuk pemeriksaan
Berkas ditahan untuk ditinjau. Pratinjau belum tersedia.
Akses ditolak
Tidak ada izin melihat. Gunakan bantuan, bukan tautan publik.

Percakapan & jejak bukti

Percakapan contoh dengan data disamarkan; pesan gagal tetap terlihat dan bisa dicoba ulang.

Percakapan kasus contoh

  1. Peserta A · 14 Okt 2026, 10.20 WIB

    Apakah pemindahan atas nama peserta sudah ditinjau penerbit tiket?

  2. Peserta B · contoh sedang dikirim

    Dokumen pendukung sedang disiapkan. Nama dan kode reservasi disamarkan.

    Sedang dikirim · belum terkirim
  3. Peserta B · contoh gagal

    Mohon tinjau bukti pemindahan sebelum konfirmasi.

Jejak bukti privat

  1. Sedang diperiksa

    bukti-transfer-contoh.pdf · nama berkas saja.

  2. Perlu ditinjau

    Pola kontak perlu ditinjau. Detail kontak disamarkan.

Kosong, memuat & galat

Ruang tetap disisakan saat memuat. Pesan menyebut yang diketahui dan langkah berikutnya.

Contoh lokal · kosong

Belum ada berkas

Pilih berkas lokal; tidak membuat pesanan atau tiket nyata.

Pilih berkas
Contoh lokal · memuat

Memuat ringkasan contoh...

Informasi

Berkas siap dilihat tidak membuktikan pemindahan resmi sudah terverifikasi.

Berhasil

Contoh pesan berhasil untuk preferensi. Bukan pembayaran atau pelepasan dana selesai.

Belum diketahui

Status mitra belum diketahui. Jangan tampilkan selesai sebelum ada hasil terverifikasi.

Konfirmasi dengan konteks

Nominal, penerima dan alasan hadir sebelum aksi. Menunggu konfirmasi tidak sama dengan selesai.

Periksa sebelum lanjut

Periksa penerima, nominal dan alasan permintaan.

Identitas & metode masuk

Kode OTP adalah kode verifikasi sekali pakai. Profil Google bukan verifikasi HP, identitas atau izin pesanan.

Masuk dengan pilihanmu

Gunakan OTP

Tombol membuka penjelasan lokal; tanpa proses OAuth atau formulir buatan.

Metode terkait

Google · identitas penyedia disamarkan · satu metode.

Menunggu konfirmasi
Menunggu hasil penyedia layanan. Jangan memulai permintaan kedua.
Terkait akun lain
Identitas terkait akun lain. Email sama tidak menggabungkan akun otomatis.
Kedaluwarsa
Sesi penautan berakhir. Verifikasi ulang akses akun sebelum memulai proses baru.

Tanya jawab & notifikasi

Pola halaman publik dengan kontrol bawaan dan tanggapan lokal.

Apakah melihat tiket berarti menyetujui?

Tidak. Melihat tiket terpisah dari konfirmasi, pemindahan resmi dan pelepasan dana.

Apa yang terjadi saat memilih berkas?

Hanya nama pilihan lokal ditampilkan. Isi tidak dibaca atau diunggah.

Gerak & umpan balik

Umpan balik tekan dan masuk lembut 160–200ms, tanpa animasi dekoratif. Kurangi gerakan selalu diutamakan.

Siap diputar. Tanpa autoplay; kurangi gerakan perangkat selalu diutamakan.

Contoh lokal

Tekan tombol

160 ms · Tombol turun 1px saat ditekan lalu kembali; tata letak tidak bergeser.

Contoh lokal

Hover CTA

160 ms · Lime berubah ke #C8E77C hanya pada perangkat penunjuk halus, bukan sentuh.

Contoh lokal
Total contoh siap

Masuk lembut

200 ms · Luluh dan naik 8px, dipakai untuk konten yang muncul setelah diminta.

Contoh lokal
Berhasil disalin

Notifikasi singkat

180 ms · Toast sage/olive muncul dari bawah; isi dibaca pembaca layar sekali.

Gerak masuk melambat di akhir. Saat gerakan dikurangi, konten langsung ke keadaan akhir.

Ilustrasi & sumber

Enam ilustrasi kategori orisinal. Foto produk memakai bingkai cover, logo memakai contain agar utuh.

Ilustrasi 3D dompet hijau zaitun, kartu pembayaran polos hijau limau dan ponsel dengan layar kosong.

Dompet

Dompet, ponsel dan kartu polos; bukan saldo atau penyedia pembayaran.

WebP 768 × 768, kualitas 88, 59.916 byte. Unduh WebP

Berkas asli: docs/generated-images/system-assets/wallet.png

Ilustrasi 3D pengendali game hijau zaitun dan hijau limau dengan portal fantasi, kristal dan perisai orisinal.

Game

Dunia fantasi orisinal tanpa identitas seri game berlisensi.

WebP 768 × 768, kualitas 88, 85.154 byte. Unduh WebP

Berkas asli: docs/generated-images/system-assets/game.png

Ilustrasi 3D ponsel hijau zaitun, kartu SIM hijau limau, meter listrik dan objek petir tanpa tulisan.

Tagihan

Ponsel, SIM dan meter listrik untuk pulsa serta tagihan.

WebP 768 × 768, kualitas 88, 41.044 byte. Unduh WebP

Berkas asli: docs/generated-images/system-assets/bills.png

Ilustrasi 3D panggung hijau zaitun, lampu sorot, mikrofon dan potongan tiket hijau limau yang polos.

Konser

Panggung dan tiket polos; dekoratif, bukan tiket yang dapat dipakai.

WebP 768 × 768, kualitas 88, 59.704 byte. Unduh WebP

Berkas asli: docs/generated-images/system-assets/concert.png

Ilustrasi 3D potongan ruang kamar hotel dengan dinding hijau zaitun, tempat tidur putih kertas dan aksen hijau limau.

Hotel

Ruang hotel sebagai ilustrasi kategori, bukan foto properti tertentu.

WebP 768 × 768, kualitas 88, 93.732 byte. Unduh WebP

Berkas asli: docs/generated-images/system-assets/stay.png

Ilustrasi 3D pesawat, kereta dan bus dalam susunan diagonal hijau zaitun, hijau limau dan putih kertas.

Perjalanan

Pesawat, kereta dan bus tanpa identitas operator.

WebP 768 × 768, kualitas 88, 55.398 byte. Unduh WebP

Berkas asli: docs/generated-images/system-assets/travel.png

DANA

Logo putih resmi di atas olive, ditampilkan utuh. Menandai DANA saja, bukan seluruh kategori dompet digital.

Logo: contain di bingkai zaitun, seluruh lambang terlihat tanpa potong.

Sumber: DANA-Logo-white.svg resmi. Berkas lokal

Artwork resmi Mobile Legends: Bang Bang

Mobile Legends

Artwork resmi untuk Mobile Legends; rasio 600 × 315 tanpa filter.

Foto/artwork: cover mengisi bingkai penuh, sisi terluar boleh terpotong.

Sumber: situs resmi Mobile Legends, 600 × 315. Berkas lokal

Token listrik PLN

Logo penyedia produk listrik; warna dan proporsi asli dipertahankan.

Logo: contain di bingkai zaitun, seluruh lambang terlihat tanpa potong.

Sumber: situs resmi PLN. Berkas lokal

BPJS Kesehatan

Lambang BPJS Kesehatan; berkas favicon resmi 214 × 209 piksel.

Logo: contain di bingkai zaitun; berkas kecil diperbesar tanpa potong.

Sumber: aset situs resmi BPJS Kesehatan. Berkas lokal

Aset pihak ketiga mengidentifikasi contoh produk, bukan bukti kemitraan atau layanan aktif.

Asal ilustrasi

Model gpt-image-2 via CCS CLIProxy, 14 Oktober 2026. Enam gambar dibuat terpisah, lalu menjadi WebP 768 × 768 kualitas 88.

Asli 1254 × 1254 di docs/generated-images/system-assets/. Objek orisinal, latar paper, tanpa tulisan, logo atau kode pindai.

Ikon garis Tabler

16 SVG resmi dari tabler/tabler-icons, tanpa digambar ulang.

Lisensi MIT · Tabler Icons, Copyright 2020-2026 Paweł Kuna.

Salinan lisensi lokal

Galeri pose maskot

Enam pose dengan acuan wajah yang sama: rambut cokelat, mata hazel, headphone lime dan jaket olive.

Asal & pemakaian

Acuan wajah
docs/generated-images/portal-gamer.png dan pose wave.png, phone.png, full-body.png
Model & layanan
gpt-image-2 melalui CCS CLIProxy, POST /v1/images/edits
Ukuran
1024 × 1536 px yang diminta; berkas PNG asli dengan ukuran sama

Pakai object-fit: contain agar seluruh gambar terlihat. Jangan potong rambut, headphone, tangan atau sepatu.

Kontrak komponen

32 kontrak untuk halaman tugas; setiap kontrak menaut ke spesimen dan status yang perlu diuji.

Keadaan universal & umpan balik

Keadaan halaman dipilih dari menu skenario pratinjau. Tautan tetap berfungsi dan tidak mengklaim status transaksi.

Tersimpan selama halaman terbuka.

Preferensi: Persetujuan belum diberikan.

Belum ada tanggapan.