Bukan rahasia lagi bahwa desainer menyukai kit UI yang bagus. Namun, lebih dari sekadar menyusun toolkit dan panduan gaya, tampaknya baru-baru ini ada peningkatan fokus yang ditempatkan pada perancangan sistem yang dimaksudkan untuk menyatukan seluruh produk. Orang-orang mulai menyadari pentingnya desain sistemik. Sistem desain (yang berkaitan dengan produk teknologi) lebih dari sekadar kerangka kerja, toolkit UI, atau pustaka komponen, lebih dari sekadar panduan gaya atau serangkaian panduan kode, bahkan lebih dari jumlah bagian-bagian itu. Sistem desain adalah seperangkat aturan yang berkembang yang mengatur komposisi suatu produk. Ada banyak aspek dari sistem desain yang bagus, mulai dari budaya/misi perusahaan dan terus berlanjut hingga ke branding, copywriting, pustaka komponen, dan bahasa desain lainnya. Poin level yang lebih tinggi bisa dibilang merupakan aspek terpenting dari sistem desain apa pun.

Sebelum dapat mulai mendesain komponen yang mengkilap, perlu meletakkan fondasi untuk komponen tersebut. Perlu memecah produk menjadi bentuk yang paling sederhana, memecah segalanya sampai mencapai minimum yang tidak dapat direduksi; gaya yang paling penting. Tempat yang baik untuk memulai adalah daftar lengkap properti gaya CSS. Sebagian besar properti ini hanya menerima nilai tetap dan karenanya dapat digunakan kembali di setiap situs web di internet. Properti yang menerima nilai khusus pada akhirnya akan membedakan produk dari produk lain. Nilai kustom inilah yang akan menentukan palet gaya global. Palet gaya global adalah apa yang akan digunakan untuk merancang dan membangun setiap aspek dari semua produk.

Mari mulai dengan properti gaya yang paling jelas, satu-satunya properti gaya yang tampaknya dipahami oleh alat desain modern dapat diberi nama, disimpan, dan digunakan kembali yaitu warna. Memanfaatkan warna untuk mengkomunikasikan keberhasilan dan kegagalan adalah pola desain yang umum. Tentu saja

Bayangan adalah properti gaya lain yang umum digunakan di sebagian besar UI. Dari apa yang terlihat, banyak desainer hanya datang dengan bayangan off-the-cuff saat merancang komponen. Hal yang sama berlaku untuk sebagian besar properti gaya sebenarnya. Mendesain secara terpisah seperti ini sering kali menyebabkan UI yang tidak konsisten. Mari mundur selangkah dan mempertimbangkan apa yang ingin capai dengan bayangan. Tambahkan beberapa perspektif ke UI tetapi kemungkinan banyak komponen dapat mengambil manfaat dari efek yang sama. Jadi mari abstrakkan gaya dari komponen individual dan ke dalam palet gaya global.

Untuk membuat hierarki visual yang sesuai pada setiap layar, perlu menentukan sejumlah ukuran font yang berbeda. Sama seperti not dalam sebuah musik, tipe huruf harus mengikuti tangga nada, membantu mempertahankan ritme vertikal yang mulus. Langkah selanjutnya adalah memutuskan secara kasar ukuran font mana yang akan perlukan, lalu memplotnya pada skala tipe huruf.

Properti gaya yang paling umum digunakan di hampir semua desain adalah spasi. Baik memisahkan tautan di header, memisahkan item dalam kisi, menambahkan jarak antara avatar dan tautan, atau mengisi komponen dropdown, tidak boleh ada spasi kosong di produk yang sembarangan atau tidak disengaja. Seperti halnya tipe huruf, dengan mengikuti skala jarak, dapat memastikan bahwa setiap komponen dan tata letak akan seragam. 

Seperti yang sebutkan sebelumnya, ukuran font bukan satu-satunya properti gaya yang perlukan untuk mendefinisikan komponen teks. Spasi huruf adalah properti berguna lainnya yang dapat gunakan untuk mengencangkan heading besar atau memungkinkan heading yang lebih kecil untuk bernafas. 

Sekarang setelah mendefinisikan palet gaya global, dapat mengambil blok penyusun tersebut dan mulai membangun pustaka komponen. Untuk sebagian besar, mendesain komponen bukanlah proses kreatif, hanya memetakan gaya yang telah ditentukan sebelumnya ke komponen. Pada tahap ini, tidak membutuhkan satu gaya pun yang belum didefinisikan dalam palet gaya. Proses kreatif terjadi selama fase desain palet gaya. Mulai saat ini, apakah itu warna, ukuran font, nilai margin/padding, lebar/tinggi atau lainnya, setiap gaya yang digunakan untuk mendesain komponen dan tata letak harus diambil dari palet gaya. Hampir tidak ada hal baru yang perlu diperkenalkan. 

Adalah kontradiktif untuk merancang sebuah komponen dengan tujuan untuk digunakan kembali secara global, kemudian memodifikasi komponen tersebut hanya dalam satu bagian produk tertentu. Setiap kali mengganti komponen global di satu area produk, juga mengikis konsistensi sistem desain. Ketika membuat cukup banyak modifikasi sporadis pada komponen yang tersebar di seluruh produk, tidak lagi memiliki sistem desain yang konsisten. 

Mari ambil beberapa komponen umum dan telusuri bagaimana bisa membangunnya hanya dengan menggunakan gaya yang telah definisikan di palet di atas. Sekali lagi, warna, ukuran font, bayangan, dan nilai padding ini semuanya diambil langsung dari palet gaya yang telah definisikan sebelumnya di atas.