Arsip

CSS

2 artikel

Pengembangan Web 19 Sep 2026 6 min read

Token Tema Berbasis Warna Logo untuk Antarmuka Web yang Berkarakter

Palet warna logo bukan design system. Menyalin warna dominan logo ke button, card, background, border, dan gradient biasanya membuat halaman terasa terlalu penuh warna, bukan lebih berkarakter. Langkah yang lebih berguna adalah menerjemahkan logo menjadi token tema semantik: sekumpulan role kecil yang dapat dipakai komponen secara konsisten. Pemisahan ini semakin penting ketika interface memakai pola visual yang ekspresif seperti bento grid, typography berukuran besar, surface transparan, dan scroll motion. Teknik-teknik tersebut dapat membentuk identitas yang kuat, tetapi hasilnya baru terasa utuh jika warna, hierarchy, dan movement berasal dari satu sistem yang sama, bukan dari kumpulan efek yang ditempel terpisah.

Pengembangan Web Sistem Desain

CSS 19 Sep 2026 7 min read

Komposisi Class Saat Runtime Bukan Generasi CSS

Function yang menghasilkan string class dan compiler yang mengeluarkan CSS menyelesaikan masalah yang berbeda, walaupun keduanya pada akhirnya dapat menghasilkan atribut `class` di browser. Perbedaan itu penting ketika recipe komponen Tailwind dimulai seperti ini: const button = tv({ base: 'inline-flex rounded-md', variants: { color: { success: 'bg-green-500 hover:bg-green-700', }, disabled: { true: 'pointer-events-none opacity-50', }, }, compoundVariants: [ { color: 'success', disabled: true, class: 'bg-green-300 hover:bg-green-300', }, ], }); Mudah untuk mengira bahwa build step dapat mengubah recipe tersebut menjadi selector semantik seperti:

CSS Tailwind CSS