Fondasi Desain
Gerak & Elevasi
Token durasi transisi, bayangan halus, skala z-index, dan reduced-motion.
Animasi pada sistem desain publik hanya berfungsi untuk fungsionalitas (menjelaskan hubungan spasial antar-elemen), bukan untuk hiasan visual semata.
Token Gerak (Motion)
/* Durasi */
--mjl-duration-instant: 0ms;
--mjl-duration-fast: 150ms; /* Hover tombol, transisi warna */
--mjl-duration-normal: 250ms; /* Modal buka/tutup, expand accordion */
--mjl-duration-slow: 400ms; /* Drawer mobile, perpindahan tab besar */
/* Easing */
--mjl-ease-standard: cubic-bezier(0.2, 0, 0, 1);
--mjl-ease-enter: cubic-bezier(0, 0, 0, 1);
--mjl-ease-exit: cubic-bezier(0.3, 0, 1, 1);
Kepatuhan Aksesibilitas: prefers-reduced-motion
Sistem secara baku mematikan atau mempersingkat durasi transisi saat pengguna mengaktifkan mode hemat gerak di sistem operasi mereka:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
Elevasi & Bayangan (Shadows)
Bayangan dirancang halus dengan saturasi sangat rendah agar tampilan tetap bersih dan modern:
| Token | Nilai CSS | Penggunaan |
|---|---|---|
shadow-none | none | Kartu di dalam kartu; garis tepi pembatas |
shadow-sm | 0 1px 2px rgba(11, 14, 21, 0.06) | Kartu layanan, tabel |
shadow-md | 0 4px 12px rgba(11, 14, 21, 0.08) | Dropdown select, popover, hover kartu |
shadow-lg | 0 16px 40px rgba(11, 14, 21, 0.14) | Modal dialog formulir, drawer menu |
Lapisan Terkelola (Z-Index)
Dilarang menggunakan angka acak seperti z-index: 99999. Gunakan token resmi berikut:
--mjl-layer-base: 0;
--mjl-layer-dropdown: 1000;
--mjl-layer-sticky: 1100; /* Sticky navbar & TrustBanner */
--mjl-layer-overlay: 1200; /* Backdrop modal */
--mjl-layer-modal: 1300; /* Jendela dialog */
--mjl-layer-popover: 1400;
--mjl-layer-toast: 1500; /* Notifikasi mengambang */
--mjl-layer-tooltip: 1600; /* Tooltip & SkipLink aktif */