design

Mengunci intent desain bukan dengan dokumentasi tebal, tapi dengan unit test yang memaksa class Tailwind tetap sesuai aturan token.

TL;DR: Abis restyle komponen, desainnya rapi bentar terus balik berantakan lagi gara-gara ketimpa kode dari branch lain. Bikin dokumen setebel apapun ternyata nggak ngaruh, akhirnya gue kunci pola class-nya pake unit test 129 baris yang ngecek string HTML. Jadi kalau ada yang nggak sengaja balikin style lama kayak bg-white atau rounded-xl, test-nya langsung meledak dan ketahuan di CI.

Lima subpage terasa seperti website lain setelah homepage didesain ulang. Solusinya bukan mempercantik satu per satu, tapi memindahkan bahasa desain ke komponen shared.

TL;DR: Awalnya homepage cakep tapi halaman lain kayak website beda jadi berantakan. Ternyata solusinya simpel cukup pakai dua komponen shared page-hero dan page-cta biar semua halaman konsisten. Ganti token sekali semua ikut keubah, kartu jadi lebih clean tanpa border tebal dan tombol pill-nya seragam.

Header navy gelap terasa berat di light mode. Solusinya: taruh 92% alpha di dalam token --color-header, biar backdrop-blur bekerja tanpa override per komponen.

TL;DR: Awalnya gue coba fix header light mode lewat bg-white/60 per komponen, malah ribet karena semua elemen harus di-override. Solusinya ternyata lewat token: bikin --color-header dengan nilai alpha di tokens.css, ditambah backdrop-blur-md buat efek kaca buram. Sekali ubah token, light sama dark mode langsung konsisten semua, cuma konsekuencinya navbar nggak ikut berubah kalau --background diganti total.

Panel konteks kanan workspace AI dilepas dari bingkai kartu: satu border kiri sebagai divider, mengikuti bahasa desain sidebar.

TL;DR: Panel konteks di kanan chat workspace berubah dari kartu melayang jadi panel yang nempel rata ke tepi viewport. Diff-nya cuma satu baris class, tapi perannya bergeser dari bingkai empat sisi jadi divider vertikal di sisi kiri. Pelajarannya: elemen yang nempel ke tepi layar nggak butuh bingkai, cukup satu garis pemisah ke sisa layout.

Mencerahkan token background menggeser seluruh halaman. Navbar butuh rasa putih khas chrome, jadi warna literal plus dark variant.

TL;DR: Navbar transparan terlihat kotor di light mode karena memakai token --background yang dibagi dengan seluruh halaman. Solusinya: warna literal bg-white untuk light mode, sedangkan dark mode tetap pakai token lewat variant dark:. Trade-off-nya navbar tak lagi ikut tema bila token diubah, tapi jalur migrasi ke token khusus tinggal satu baris.