Roha Design System.

01 · Konteks

Setiap project yang disentuh Roha pada akhirnya butuh keputusan yang sama: biru yang mana yang tepat, sekecil apa teks kecil boleh dibuat, seperti apa tombol yang dinonaktifkan. Tanpa sistem, keputusan itu diambil empat kali setahun oleh siapa pun yang kebetulan paling dekat dengan layarnya minggu itu.

Roha Design System adalah jawabannya: satu sumber kebenaran untuk warna, tipografi, spasi, radius, shadow, dan komponen, didokumentasikan di situs pratinjau yang hidup supaya tidak ada yang hilang di file Figma yang tidak ada yang bisa menemukannya.

02 · Prinsip

Sistem ini dibangun di atas sedikit batasan yang disengaja.

Satu aksen berwarna. Palet didominasi putih. Permukaan bertingkat dari Paper (#FFFFFF) ke Cream (#EAEFF6) ke Sand (#DBE2EC), dengan satu aksen berwarna: Blue (#2776EA). Cyan dan sage hanya muncul dalam konteks data; warna status (success, warning, danger) hanya muncul untuk feedback. Sisanya adalah ink dan permukaan.

Satu keluarga tipografi. Geist menangani semua pekerjaan display dan body. Geist Mono dipakai untuk setiap label huruf kapital dan detail monospace. Ukuran display selalu weight 500 dengan tracking rapat; kata aksen naik ke 600. Sistem ini tidak pernah butuh keputusan font di awal project.

Shadow rendah. Sebagian besar kedalaman diungkapkan dengan garis 1px. Shadow hanya muncul pada elemen yang benar-benar melayang: kartu saat hover, dialog, popover. Selebihnya datar.

Sudut lembut, bukan serba pill. Border radius memakai skala tetap (sm 10, btn 13, md 14, lg 22). Bulat penuh dicadangkan untuk tag, pill, dan avatar.

03 · Isinya

Situs dokumentasi diatur dalam dua bagian.

Foundations mencakup keputusan yang menopang semuanya: Color (set token lengkap dengan aturan pemakaian), Typography (skala + weight + contoh tracking), Logo usage (wordmark di latar terang dan gelap), Icons (Lucide dengan stroke 1,75), Shadows, Spacing (skala dasar 4px, sembilan langkah), dan Border radius.

Components adalah pustaka yang dipakai kerja:

• Badges, Buttons (varian, ukuran, state), Button groups
• Checkbox dan radio, Toggles, Select dan dropdown
• Indikator progres, Slider, Tooltips, Breadcrumbs
• Date picker, Empty states, Filters, Carousel
• Alerts (info, success, draft, unavailable), Modal, Notifications
• Pagination, Charts (linear + donut), Table, Vertical tabs

Setiap komponen menampilkan setiap state yang relevan termasuk disabled, hover, dan error. Tidak ada yang dirilis tanpa set state lengkapnya terdokumentasi.

04 · Hasil

Hasilnya adalah satu file HTML mandiri yang terbuka tanpa dependensi eksternal. Siapa pun di tim bisa membukanya di browser dan melihat setiap token, setiap komponen, dan setiap aturan pemakaian di satu tempat.

Sistem ini sekarang jadi titik awal setiap project Roha. Pekerjaan klien baru tidak dimulai dari keputusan warna; dimulai dari palet yang sudah berfungsi. Komponen baru memperluas pola yang ada, bukan menemukan ulang. File desain tetap mudah dinavigasi karena konvensi penamaannya sudah diputuskan.

Untuk studio yang sengaja menjaga daftar project tetap pendek, nilainya bukan efisiensi semata. Nilainya adalah konsistensi di seluruh pekerjaan yang mencakup klien, kategori, dan tahun yang berbeda.