Satu Bahasa Desain untuk Semua Halaman

Homepage baru selesai. Saya refresh browser, lihat gradient mesh bergerak halus di background, tombol pill yang ukurannya pas, dotted grid yang nggak mengganggu konten. Puas.

Lalu saya klik link ke halaman /about.

Kok ini website lain?

Header-nya beda vibe, tombol CTA-nya nggak punya aksen glow, kartunya malah pakai border tebal yang bikin rame. Saya buka /service. Sama aja. Kayak buka website lain yang kebetulan domainnya sama.

Reaksi pertama saya: ya udah, ubah satu-satu. Copy paste styling dari homepage ke tiap halaman. Lima menit beres.

Tapi begitu saya ganti warna aksen di design tokens? Harus ubah semua halaman lagi. Setiap perubahan kecil berarti ngecek file halaman satu per satu. Saya udah bayangin nightmare-nya sebelum mulai.

Commit yang bikin saya mikir ulang

Saya buka git log, lihat commit b0a1e5f: "style: extend home design language to all subpages".

20 file berubah. Saya kira refactor besar-besaran. Ternyata intinya cuma dua komponen shared: page-hero.tsx dan page-cta.tsx di frontend/src/components/shared/. Keduanya sudah ada sebelumnya, tapi di commit ini pattern visual home (gradient mesh, dotted grid, accent glow, tombol pill) dipindahkan ke dalam komponen itu, lalu semua subpage tinggal memakainya.

Saya sadar selama ini saya memperlakukan setiap halaman sebagai entitas terpisah. Padahal yang bikin homepage terasa hidup cuma beberapa elemen kunci. Kenapa nggak dibungkus jadi satu komponen yang bisa dipakai ulang?

Gradient mesh dan layer yang bisa di-override

Gradient mesh di homepage itu bukan gambar statis. Itu background-image berlapis dari beberapa radial-gradient, sebuah tipe image di CSS yang menghasilkan transisi warna dari satu titik asal [3]. Karena hasilnya berupa image, beberapa gradient bisa ditumpuk sebagai layer, dan versi repeating-nya yang saya pakai untuk dotted grid.

Saya taruh itu di page-hero sebagai background default. Dotted grid dan accent glow jadi layer terpisah di atasnya. Satu komponen, tapi tiap halaman bisa override opacity atau posisi kalau perlu.

Warna-warnanya saya definisikan sebagai design token, berupa keputusan desain yang disimpan sebagai pasangan nama dan nilai [1], lalu diterjemahkan jadi CSS custom properties. Prinsipnya sederhana: satu nilai didefinisikan sekali, lalu dirujuk di banyak tempat [2]. Custom properties ini ikut aturan cascade dan inheritance, jadi kalau saya ganti satu token di level root, semua halaman yang memakai page-hero otomatis ikut berubah. Nggak perlu copy-paste, nggak perlu ngecek file satu-satu.

Idiom kartu: fewer borders, hairline divider

Kartu-kartu konten di homepage saya pakai idiom borderless. Border tebal dihapus, ganti hairline divider berupa garis tipis antar bagian.

Alasannya praktis: terlalu banyak border bikin desain terasa ramai dan penuh [4]. Alternatif yang disarankan justru ruang kosong, kontras warna, dan shadow. Saya pilih garis 1px dengan opacity rendah, cukup buat memisahkan konten tanpa bikin mata lelah.

Kartu ini juga shared. Tiap halaman tinggal memanggil, isinya masuk lewat props. Struktur dan spacing konsisten, kontennya bebas.

Lucide Check dan konsistensi visual

Ikon centang yang sebelumnya glyph teks biasa saya ganti Lucide Check dari lucide-react. Paketnya tree-shakable, jadi cuma ikon yang benar-benar dipakai yang masuk bundle [5].

Tombol CTA? Semua rounded-full: pill button yang sama di seluruh halaman. Komponennya menerima children lewat props, jadi labelnya bebas tapi bentuknya tetap. Satu bahasa visual, banyak ekspresi.

Sekarang tiap halaman cuma perlu memanggil page-hero dan page-cta. Homepage tetap punya kepribadian, /about juga, /service juga. Tapi semuanya jelas dari satu keluarga yang sama.

Saya pernah coba pendekatan "bebas sebebas-bebasnya" dulu. Hasilnya tiap halaman kayak didesain orang berbeda. Sekarang saya lebih percaya satu bahasa desain yang kuat, selama tiap halaman masih punya ruang lewat props.

Saya push commit-nya, lalu buka semua halaman satu-satu. Akhirnya terasa seperti satu website utuh, bukan kumpulan halaman yang kebetulan satu domain.

Sumber:

1. Design Tokens Community Group: Format Module
2. MDN: Using CSS custom properties
3. MDN: radial-gradient()
4. Refactoring UI (Wathan dan Schoger)
5. Lucide Icons