Piktogram
Aset grafis kecil dan sederhana yang meningkatkan komponen web utama, menyampaikan ide dengan cepat dan efektif.
Literal, fungsional, dan geometris — piktogram kami merangkum ide ke bentuk paling murni, menyampaikan tujuan yang jelas dan kesederhanaan yang abadi.
Tipe
Piktogram Spaceship hadir dalam dua tipe: reguler dan comp. Tipe comp menggabungkan piktogram reguler dengan ikon dari Spaceship’s Iconography Library, memungkinkan kami menyampaikan konsep yang lebih kompleks dan spesifik.
Versi
Semua piktogram Spaceship tersedia dalam dua versi: filled (utama) dan outlined (sekunder). Versi outlined hanya boleh digunakan ketika piktogram membutuhkan bobot visual yang lebih ringan dibandingkan piktogram, teks, atau komponen UI di sekitarnya. Ini membantu membangun hierarki visual dalam tata letak yang kompleks.
Konstruksi
Piktogram didasarkan pada seperangkat aturan, mulai dari grid dasar hingga parameter gradasi dan garis, untuk memastikan hasil yang konsisten dan seimbang.
Ukuran
Piktogram Spaceship dirancang agar dapat diskalakan, menjaga konsistensi visual dan memastikan keterbacaan terbaik. Ada lima ukuran piktogram dalam sistem desain kami.
Warna
Piktogram umumnya menggunakan satu warna saja. Satu-satunya pengecualian adalah tipe comp, yang dapat mencakup warna merek atau notifikasi, untuk informasi lebih lanjut dapat Anda temukan di bawah. Untuk memastikan konsistensi dalam konteks UI, piktogram mengikuti referensi warna Spaceship Design System.
Warna default
Abu-abu adalah warna default untuk piktogram dan harus digunakan untuk merepresentasikan pesan, aksi, atau fitur. Dalam kasus tertentu, warna ini juga dapat digunakan untuk produk. Piktogram outlined hanya tersedia dalam warna default.
Warna merek
SPS Blue, SPS Dark Gray, atau putih juga dapat digunakan sebagai pengganti warna default ketika diperlukan dampak visual lebih atau untuk memperkuat identitas Spaceship. Lihat halaman warna untuk detail lebih lanjut.
Warna produk
Warna utama produk harus digunakan untuk piktogram dalam konteks khusus produk (halaman produk, kartu produk, dll) untuk semua produk saat ini dan yang akan datang.
Warna notifikasi
Warna-warna ini harus digunakan untuk memperkuat pesan notifikasi. Versi comp hanya boleh digunakan pada pesan sistem umum dan bukan pada status peringatan.
Panduan
Berikut beberapa contoh hal yang harus dihindari saat membuat dan menggunakan piktogram.
Jangan biarkan elemen kunci dari piktogram reguler berada di sudut kanan bawah.
Jangan gunakan gradasi kompleks atau multicolor pada versi filled.
Jangan mencampur elemen filled dan outlined pada tipe comp.
Jangan gunakan warna lain pada versi filled selain yang telah disebutkan di atas.
Jangan gunakan warna apapun pada versi outlined selain warna default.
Jangan menggabungkan warna default dengan warna lain selain warna utama merek Spaceship dan warna Notifikasi.