Piktogram
Aset grafis kecil dan sederhana yang meningkatkan komponen web utama, menyampaikan ide dengan cepat dan efektif.
Literal, fungsional, dan geometris — piktogram kami menyaring ide ke bentuknya yang paling murni, menyampaikan tujuan yang jelas dan kesederhanaan yang tak lekang oleh waktu.
Tipe
Piktogram Spaceship hadir dalam dua tipe: regular dan comp. Tipe comp menggabungkan piktogram regular dengan ikon dari Spaceship’s Iconography Library, sehingga kami dapat 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 sebuah piktogram membutuhkan bobot visual yang lebih ringan daripada piktogram, teks, atau komponen UI di sekitarnya. Ini membantu membangun hierarki visual dalam tata letak yang kompleks.
Konstruksi
Piktogram didasarkan pada serangkaian aturan, mulai dari grid dasar hingga parameter gradien dan stroke, untuk memastikan hasil yang konsisten dan seimbang.
Ukuran
Piktogram Spaceship dirancang agar dapat diskalakan, mempertahankan konsistensi visual dan memastikan keterbacaan terbaik. Ada lima ukuran piktogram dalam sistem desain kami.
Warna
Piktogram umumnya menggunakan satu rona. Satu-satunya pengecualian adalah tipe comp, yang dapat mencakup warna merek atau notifikasi, yang informasinya 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, tindakan, 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 saat dampak visual yang lebih kuat dibutuhkan atau untuk memperkuat identitas Spaceship. Lihat halaman warna untuk detail lebih lanjut.
Warna produk
Warna utama produk harus digunakan untuk piktogram dalam konteks yang didedikasikan untuk 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 dalam pesan sistem umum dan bukan dalam status peringatan.
Panduan
Berikut beberapa contoh hal yang harus dihindari saat membuat dan menggunakan piktogram.
Jangan biarkan elemen kunci dari piktogram regular jatuh di sudut kanan bawah.
Jangan gunakan gradien yang kompleks atau beraneka warna pada versi filled.
Jangan campurkan elemen filled dan outlined dalam tipe comp.
Jangan gunakan warna lain pada versi filled selain yang diidentifikasi di atas.
Jangan gunakan warna apa pun pada versi outlined selain warna default.
Jangan gabungkan warna default dengan warna apa pun selain warna utama merek Spaceship dan warna Notification.