Hierarki
Spaceship Design System dibangun secara berlapis, di mana setiap lapisan menambah kejelasan, struktur, dan tujuan. Lapisan-lapisan ini membentuk hierarki yang membimbing cara kami merancang, membangun, dan mengembangkan produk — mulai dari keputusan visual terkecil hingga perjalanan pengguna yang paling luas.
Dengan mengikuti prinsip-prinsip Atomic Design, kami telah menyusun sumber daya utama kami ke dalam kategori berikut, sehingga lebih mudah digunakan oleh semua tim.
Fondasi
Menentukan aturan inti dari bahasa visual kami — warna, tipografi, spasi, grid, gerakan, dan token. Semua ini memberi kami dasar yang konsisten untuk bekerja.
Komponen
Menghidupkan aturan fondasi dalam elemen antarmuka yang dapat digunakan kembali untuk menyelesaikan masalah desain sehari-hari.
Templat
Menunjukkan bagaimana komponen dan pola bekerja bersama dalam konteks, menyediakan struktur siap pakai untuk halaman dan pengalaman yang lengkap.
Pola
Menangkap solusi yang telah terbukti dan praktik terbaik, memastikan pekerjaan kami tetap konsisten, mudah diakses, dan berpusat pada pengguna di setiap titik interaksi.
Fondasi
Atom-atom esensial dari Spaceship Design System. Ini mendefinisikan aturan visual dan struktural yang menjadi dasar bagi setiap komponen dan pola.
Warna
Menentukan palet merek dan fungsional yang memastikan harmoni, aksesibilitas, dan fleksibilitas di seluruh produk.
Tipografi
Membangun hierarki dan kejelasan dengan skala tipografi yang membuat konten mudah dibaca dan dipindai.
Spasi
Menyediakan skala sistematis untuk margin, padding, dan ritme tata letak guna mempertahankan antarmuka yang konsisten.
Grid
Menciptakan tata letak responsif yang beradaptasi di berbagai perangkat sambil mempertahankan struktur dan perataan..
Gerakan
Menggunakan transisi dan animasi untuk mengarahkan perhatian, mengomunikasikan status, dan membuat interaksi terasa alami.
Design Tokens
Menerjemahkan nilai-nilai fondasi ke dalam kode, berfungsi sebagai satu sumber kebenaran sekaligus memudahkan pembaruan yang cepat dan mudah.
Fondasi yang jelas berarti lebih sedikit hambatan, lebih inklusif, dan lebih banyak waktu untuk menyelesaikan masalah nyata daripada memulai dari awal.
Komponen
Ini adalah elemen yang dapat digunakan kembali dari Spaceship Design System. Masing-masing menyelesaikan masalah antarmuka tertentu — mulai dari tombol dan input hingga navigasi dan pesan umpan balik. Setiap komponen dapat diakses, responsif, dan mudah disesuaikan dengan konteks atau perangkat yang berbeda.
Komponen yang dapat digunakan kembali memastikan setiap produk yang kami bangun diluncurkan lebih cepat dan terasa terhubung dengan gambaran yang lebih besar.
Templat
Templat adalah jembatan antara blok penyusun dan pengalaman pengguna. Templat menggabungkan fondasi dan komponen ke dalam konteks halaman penuh, menunjukkan bagaimana sistem bekerja dalam praktik.
Templat Halaman Produk
Struktur halaman tingkat tinggi untuk landing page dan halaman produk, tempat desainer terutama memperbarui konten dan menyesuaikan modul agar sesuai dengan setiap konteks.
Komponen yang dapat dibagikan
Struktur yang lebih kompleks dan dapat digunakan kembali seperti tabel perbandingan atau kartu harga dirancang untuk menangani skenario tertentu secara konsisten di seluruh produk.
Dengan struktur siap pakai sebagai titik awal, tim dapat lebih sedikit berfokus pada keputusan tata letak dan lebih banyak pada pemenuhan kebutuhan nyata pengguna.
Pola
Pola menangkap apa yang telah kami pelajari dari pengujian, umpan balik, dan penggunaan di dunia nyata, lalu mengubahnya menjadi solusi standar yang dapat digunakan kembali. Setiap pola didasarkan pada niat pengguna, baik itu menyederhanakan proses checkout, menangani kesalahan, atau memandu pengguna melalui formulir.
Dengan mendefinisikan solusi yang telah terbukti, pola membuat pekerjaan kami lebih terarah, memastikan setiap pengalaman tidak hanya fungsional tetapi juga dirancang dengan penuh pertimbangan.