Elevasi, Bayangan & Sudut
Hierarki kedalaman Zenko dicapai melalui perpaduan border hairline yang presisi, bayangan difusi lembut (soft diffusion), dan sudut kelengkungan ergonomis.
1. Sistem Corner Radius (Border Radii)
Mulai dari 8px hingga 32px untuk menjaga ritme visual yang konsisten di semua skala komponen.
Tombol aksi, input formulir, keyword chips
Thumbnail foto paket, dropdown menu, code block
Kartu dalam (Inner card), modal box
Nampan luar kartu (Tray), Brand Icon squircle
Section wrapper, banner hero container
Pill status aktif, badge kategori
2. Skala Elevasi (Shadow Elevation)
Arahkan kursor ke masing-masing kartu untuk melihat transisi elevasi interaktif.
--shadow-xsResting state kartu & tombol standar
--shadow-liftHover state kartu paket & fitur
--shadow-floatFocus floating search bar, popover
--shadow-brandCTA banner glow, primary highlight
3. CTA Depth Treatment (.panel-inset)
Kombinasi 3 lapis inner highlight putih di bagian atas, inner rim border semi-transparan, dan floor shadow gelap di sisi bawah.
Siap Mulai Try Out Online?
Panel ini mengaplikasikan token .panel-inset untuk menghadirkan efek kedalaman 3D premium.