Siapa kami, dalam satu halaman
Sebelum bicara warna dan fonta: ini yang harus dipahami dulu, karena semua keputusan desain di bawah bermuara ke sini.
Tagline
Ngebut dan bikin closing.
Positioning
OrderHero adalah platform all-in-one untuk jualan online di Indonesia — landing page, form order, pembayaran otomatis, sampai pengiriman produk digital. Semuanya dalam satu tempat, tanpa perlu ngerakit lima tool berbeda.
Misi
Bikin siapa pun bisa jualan online secara profesional tanpa perlu tim teknis.
Visi
Jadi fondasi default penjual digital Indonesia — dari yang baru mulai sampai yang sudah skala besar.
Untuk siapa
Penjual digital & UMKM Indonesia yang beriklan sendiri: penjual ebook, kelas online, membership, jasa, dan produk fisik.
Nama legal: PT Rega Digital Indonesia
Satset
Cepat setup, langsung jualan. Tidak ada langkah yang tidak perlu.
Transparan
Harga, fee, dan limit ditulis apa adanya. Tidak ada biaya siluman.
Fokus Closing
Setiap fitur diukur dari satu hal: apakah bikin orang jadi bayar.
Aman
Pembayaran terenkripsi, data merchant dan pembeli terlindungi.
Logo dan aturan pakainya
Logo adalah satu-satunya elemen merek yang tidak boleh diutak-atik. Ukurannya boleh berubah, sisanya tidak.
Nama file mengikuti pola orderhero-<jenis>-<latar>. Bagian "on-light" dan "on-dark" menunjuk ke LATAR tempat logo ditempel, bukan warna logonya — file on-dark berisi logo putih.
Ruang bebas
Area biru adalah ruang bebas minimum: setengah tinggi logo di keempat sisi. Tidak boleh ada teks, garis, atau elemen lain masuk ke dalamnya.
½½½½Ukuran minimum
Ditampilkan dalam ukuran sebenarnya. Lebih kecil dari ini, ikonnya jadi bubur.
120 px — layar
24 px — ikon
Contoh yang salah
Enam perlakuan yang paling sering terjadi. Semuanya dilarang.
Warna diubah
Diregangkan
Dimiringkan
Diberi bayangan
Di atas foto ramai
Kontras kurang
Ruang & ukuran minimum
- Clear space. Sisakan ruang kosong minimal setinggi setengah tinggi logo di keempat sisi. Tidak boleh ada teks, garis, atau elemen lain masuk ke area itu.
- Minimum layar. 120 px lebar
- Minimum cetak. 25 mm lebar
- Ikon persegi. 24 px (ikon persegi)
- Latar. Latar terang: pakai varian on-light. Latar gelap atau foto: pakai varian on-dark. Kalau kontras kurang dari 4.5:1, taruh logo di atas panel polos.
Warna di dalam artwork logo
Sengaja berbeda dari palet antarmuka. Jangan disamakan, jangan pula dipakai sebagai warna UI.
Boleh & tidak boleh
- Pakai file resmi dari halaman ini, jangan hasil screenshot.
- Jaga proporsi asli saat mengubah ukuran (tahan Shift).
- Taruh di latar polos dengan kontras cukup.
- Pakai varian dark mode kalau latarnya gelap.
- Mengubah warna logo, termasuk memberi gradien sendiri.
- Memiringkan, memutar, menarik, atau memberi bayangan/outline.
- Menaruh logo di atas foto ramai tanpa panel di belakangnya.
- Menyusun ulang ikon dan wordmark, atau memakai fonta lain untuk menulis "OrderHero".
- Memakai logo OrderHero sebagai bagian dari logo atau nama produk kamu sendiri.
Aset siap unduh
Semua aset dalam satu ZIP
18 file — 6 varian logo dalam format SVG, PNG, dan WEBP.
Logo — latar terang1898 × 420
Lockup horizontal, tinta biru tua. Varian yang paling sering dipakai.
orderhero-logo-on-light
Logo — latar gelap1898 × 420
Lockup horizontal, tinta putih. Untuk latar gelap dan foto.
orderhero-logo-on-dark
Ikon — latar terang512 × 512
Ikon persegi tanpa wordmark. Untuk avatar, app icon, dan favicon.
orderhero-icon-on-light
Ikon — latar gelap512 × 512
Ikon persegi versi terang, untuk avatar di latar gelap.
orderhero-icon-on-dark
Lockup "Powered By" — latar terang1898 × 401
Dipakai di footer form order & landing page merchant.
orderhero-powered-on-light
Lockup "Powered By" — latar gelap1898 × 401
Varian footer untuk tema gelap.
orderhero-powered-on-dark
Gambar social share (OG)1200 × 630
Rasio standar Open Graph untuk preview link di WhatsApp, X, dan Facebook.
Pakai langsung dari CDN
Turunan siap-pakai dengan ukuran yang sudah disesuaikan. Jangan menempelkan file master 1898 px di antarmuka — itu 25 KB untuk logo yang tampil 34 px.
Base URL
Semua aset di atas boleh di-hotlink langsung dari CDN. Varian on-dark tersedia untuk setiap berkas — ganti "on-light" menjadi "on-dark" pada nama file.
Berdampingan dengan logo lain
Berlaku untuk mitra, afiliasi, dan siapa pun yang menampilkan logo kami bersama logo mereka sendiri.
LOGO MITRASusunan yang benar: tinggi optis sama, dipisah garis, jarak lega di kiri-kanan garis.
LOGO MITRATerlalu rapat dan tanpa pemisah — kedua merek terbaca seperti satu logo.
LOGO MITRAUkuran timpang — salah satu merek terlihat menumpang pada yang lain.
- Samakan tinggi optis kedua logo, bukan lebarnya. Logo yang lebih panjang bukan berarti harus lebih kecil.
- Pisahkan dengan garis vertikal setinggi sekitar 60% tinggi logo, dengan jarak kiri-kanan minimal satu clear space.
- Di materi milik OrderHero, logo OrderHero di sebelah kiri. Di materi milik mitra, logo mitra yang di kiri.
- Kedua logo memakai versi resmi masing-masing — jangan memutihkan atau menghitamkan logo mitra supaya "serasi".
- Menggabungkan dua logo menjadi satu bentuk atau lambang baru.
- Menempelkan nama merek lain ke wordmark OrderHero (mis. "OrderHero x Toko Kamu" sebagai satu logo).
- Menaruh logo OrderHero di materi yang menyiratkan kemitraan resmi tanpa izin tertulis.
Cara afiliasi menyebut diri
Boleh
Tidak boleh tanpa izin tertulis
Nama akun, nama toko, dan domain tidak boleh diawali atau seluruhnya berisi "OrderHero" (mis. orderhero-indonesia.com atau @orderhero.jakarta) — itu membuat orang mengira mereka sedang berbicara dengan kami. Logo OrderHero juga tidak boleh dipakai sebagai foto profil akun pribadi atau toko. Baca ketentuan afiliasi.
Palet
Klik nilai hex untuk menyalin. Angka kontras dihitung dengan rumus WCAG 2.1 — pakai itu untuk memutuskan warna teks di atas tiap warna.
Gradien merek
Gradien resmi merek. Dipakai untuk tombol utama, header hero, dan panel CTA. Sudut 135° tidak diubah — gradien yang arahnya beda-beda bikin satu produk terlihat seperti tiga produk.
Warna Inti
Tulang punggung seluruh antarmuka. Biru tua memimpin, tidak dipakai bergantian sesuka hati.
Dark Blue
PRIMARY
Warna utama merek: header, tombol utama, judul.
Medium Blue
SECONDARY
Warna kedua: link, status info, ujung gradien.
Light Blue
ACCENT
Highlight, border default, keadaan hover.
Very Light Blue
VERY_LIGHT_BLUE
Latar kartu, panel informasi, garis pemisah lembut.
Aksen
Satu-satunya warna panas di palet. Justru karena jarang, dia yang paling kelihatan — jangan diobral.
Orange
ACCENT / WARNING
Penekanan tunggal: peringatan, tenggat, badge promo.
Netral & Teks
Teks tidak pernah memakai warna merek. Hitam lembut untuk isi, abu-abu untuk keterangan.
Title
TEXT_TITLE
Judul dan heading.
Body
TEXT_BODY
Teks isi.
Description
TEXT_DESCRIPTION
Keterangan pendukung.
Caption
TEXT_CAPTION
Label kecil, timestamp.
Surface
BACKGROUND_LIGHT
Latar halaman dan kartu netral.
Border
BORDER_LIGHT
Garis dan pembatas.
Status
Dipakai hanya untuk menyampaikan keadaan sistem, bukan untuk dekorasi.
Success
SUCCESS
Berhasil, lunas, aktif.
Info
INFO
Informasi netral.
Warning
WARNING
Perlu perhatian, menunggu pembayaran.
Danger
SUSPEND_RED
Gagal, ditangguhkan, dibatalkan.
Palet khusus email
Klien email mengabaikan CSS variable, class, dan stylesheet eksternal — setiap warna harus ditulis inline di tiap tempat. Nilai latar sengaja sedikit berbeda dari palet layar supaya tetap terbaca di klien yang memaksakan latar putih.
- Maksimal SATU kotak callout berwarna per email. Dua kotak yang saling bersaing membuat pembaca tidak tahu baris mana yang sebenarnya penting.
- Tombol email menulis background-color solid SEBELUM background-image gradien. Outlook desktop membuang background-image, dan tanpa warna solid lebih dulu tombolnya jadi tulisan putih di atas kotak transparan.
Roboto Flex
Fonta tunggal untuk seluruh produk dan materi pemasaran. Variable font, dimuat lewat next/font supaya tidak ada kedip saat halaman terbuka.
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 Rp . , ? ! @ & %
Bobot yang dipakai
Fonta monospace
Untuk kode, kode order, nomor VA, dan apa pun yang dibaca karakter per karakter.
Skala tipografi
Ikon Lucide
Satu pustaka ikon untuk semua permukaan. Ikon selalu berupa garis (outline), bukan ikon padat, dan mewarisi warna teks di sekitarnya.
Ukuran
Pustaka lengkap: lucide.dev
Tanpa emoji
Jangan pakai emoji sebagai ikon di antarmuka. Emoji dirender berbeda di tiap perangkat dan tidak bisa mengikuti warna merek. Pengecualian: pesan WhatsApp dan email berformat teks polos.
Tombol, sudut, dan bayangan
Tombol utama memakai isian gradien merek; tombol sekunder memakai garis tepi dan teks berwarna merek dengan latar transparan. Tidak ada varian ketiga.
Tombol
Sudut (radius)
Bayangan
XS
Elevasi paling tipis
SM
Kartu & tombol
MD
Kartu menonjol
LG
Dropdown, popover
Skala spasi
Semua jarak adalah kelipatan 4 px. Angka di luar skala (13 px, 22 px, 35 px) tidak dipakai — itu yang bikin dua halaman terasa disusun oleh dua orang berbeda.
Lebar konten & breakpoint
Kontainer maksimum 1140 px. Lebar maksimum area konten, dengan padding 24 px di kiri-kanan pada layar kecil.
Standar minimum
Halaman order kami dibuka orang di jalan, dengan layar silau dan koneksi seadanya. Aturan ini bukan formalitas — ini yang membedakan order jadi dan order batal.
Kontras minimum
Teks biasa 4.5:1, teks besar (≥ 24 px) dan elemen UI 3:1. Angka kontras tiap warna ada di bagian Palet.
Warna bukan satu-satunya penanda
Status selalu disertai label teks atau ikon. Sekitar 1 dari 12 pria tidak bisa membedakan merah dan hijau.
Fokus keyboard harus terlihat
Jangan menghapus outline fokus tanpa menggantinya. Form order harus bisa diisi tanpa mouse.
Target sentuh 44 × 44 px
Ukuran minimum area yang bisa diketuk di ponsel, termasuk tombol ikon dan tombol tutup.
Akun, avatar & ukuran
Satu username di semua platform supaya mudah dicari dan sulit dipalsukan. Akun yang memakai nama mirip tapi handle berbeda bukan akun kami.
Username resmi
@orderheroid
Foto profil
- Foto profil memakai ikon persegi, bukan wordmark — di lingkaran kecil tulisan "orderhero.id" tidak terbaca.
- Sisakan margin sekitar 10% di sekeliling ikon: sebagian besar platform memotongnya menjadi lingkaran.
- Latar foto profil selalu polos. Jangan menaruh ikon di atas foto atau gradien ramai.
- Unggah ukuran terbesar yang diminta platform — mereka mengecilkan sendiri, tapi tidak bisa memperbesar.
TikTok
YouTube
Discord
Semua platform
Cara kami menulis
Merek ini lebih sering dibaca daripada dilihat. Kalimat yang salah nadanya merusak lebih cepat daripada warna yang salah.
Bahasa sehari-hari
Bahasa Indonesia yang dipakai orang beneran. Kalau sebuah kalimat tidak akan diucapkan saat ngobrol, tulis ulang.
Langsung ke inti
Kalimat pertama sudah menjawab. Konteks menyusul, bukan mendahului.
Konkret, bukan klaim
Sebut angka dan hal yang bisa dicek. Hindari kata "revolusioner", "terdepan", "canggih".
Error selalu ada jalan keluar
Setiap pesan gagal menyebutkan penyebab dan langkah berikutnya. Kode error saja bukan pesan.
Tulis begini
Bukan begini
Sapaan. Di dalam produk, panggil merchant dengan "kamu". Di dokumen legal, syarat & ketentuan, dan surat resmi, pakai "Anda". Untuk pembeli akhir di halaman order, pakai "Anda" karena mereka bukan pengguna kita.
Menulis nama merek
Nama yang ditulis salah adalah kesalahan merek yang paling sering terjadi — dan paling gampang dihindari.
OrderHero
Satu kata, tanpa spasi, huruf O dan H kapital. Berlaku di semua bahasa dan semua ukuran teks.
Jangan ditulis begini
Alamat situs
Alamat situs selalu ditulis huruf kecil: orderhero.id. Jangan ditulis "OrderHero.id" di dalam URL.
Penyebutan pertama
Pada penyebutan pertama di artikel atau siaran pers, tulis "OrderHero (PT Rega Digital Indonesia)". Selanjutnya cukup "OrderHero".
Keluarga produk
Ejaan yang sering keliru
Angka, uang & tanggal
Mata uang
Ada spasi setelah "Rp", titik sebagai pemisah ribuan, tanpa angka desimal.
Angka
Locale id-ID: titik untuk ribuan, koma untuk desimal. Jangan pakai format Inggris.
Tanggal
Tanggal berupa angka semua bisa terbaca terbalik oleh pembaca Indonesia. Tulis bulannya.
Waktu
Format 24 jam dan selalu sebut zona waktu. Seluruh sistem memakai Asia/Jakarta.
Nomor WhatsApp
Untuk tampilan pakai format +62. Di dalam sistem nomor disimpan sebagai 62… tanpa "+" dan tanpa "0" di depan.
Persen & satuan
Koma untuk desimal, tanpa spasi sebelum "%", dengan spasi sebelum satuan lain.
Izin penggunaan merek
ORDERHERO adalah merek terdaftar yang dipakai menjalankan layanan OrderHero oleh PT Rega Digital Indonesia. Kamu boleh memakai nama dan logonya untuk menyebut atau mereferensikan layanan kami — misalnya di artikel, ulasan, atau materi afiliasi — selama mengikuti panduan di halaman ini. Penggunaan yang menyiratkan kemitraan, sponsor, atau afiliasi resmi memerlukan izin tertulis lebih dulu.
ORDERHERO & Logo — merek terdaftar
Terdaftar pada Direktorat Jenderal Kekayaan Intelektual Republik Indonesia. Perlindungan merek bersifat teritorial dan hanya berlaku untuk kelas yang terdaftar.
Alat pengolah data, alat penyimpan data komputer, perangkat lunak komputer.
Hosting platform e-commerce, penyediaan platform internet untuk transaksi komersial elektronik.
Memakai simbol ®
- Pakai ® hanya untuk kelas dan wilayah tempat merek benar-benar terdaftar. Untuk merek yang masih dalam proses, simbolnya ™.
- Cukup satu kali pada penyebutan pertama di materi resmi — perjanjian, siaran pers, kemasan. Tidak perlu di setiap kalimat.
- Jangan ditempelkan ke file logo. Artwork tetap bersih; simbolnya urusan teks di sekitarnya.
- Dalam teks sehari-hari — antarmuka produk, blog, media sosial — tulis "OrderHero" saja tanpa simbol.
Badan hukum
PT Rega Digital Indonesia
Alamat
Kalibaru 001/001 No. 91, Tridayasakti, Kec. Tambun Selatan, Kab. Bekasi, Jawa Barat, Indonesia 17510
Pertanyaan merek & media
hello@orderhero.idSitus
orderhero.idNgebut dan bikin closing.
Panduan ini akan terus diperbarui. Ada yang kurang jelas atau butuh aset dalam format lain? Kabari kami.
Hubungi kami