Fondasi Desain
Spasi & Bentuk
Grid kelipatan 4px, skala radius sudut, dan target sentuh minimum 44px.
Konsistensi tata letak dicapai dengan disiplin grid 4px dan radius sudut yang proporsional.
Grid Kelipatan 4px
Semua margin, padding, dan jarak antar-elemen wajib merupakan kelipatan 4px:
--mjl-space-1: 4px; --mjl-space-2: 8px; --mjl-space-3: 12px;
--mjl-space-4: 16px; --mjl-space-5: 20px; --mjl-space-6: 24px;
--mjl-space-8: 32px; --mjl-space-10: 40px; --mjl-space-12: 48px;
--mjl-space-16: 64px; --mjl-space-20: 80px; --mjl-space-24: 96px;
Radius Sudut (Border Radius)
| Token | Nilai | Komponen |
|---|---|---|
radius-sm | 6px | Badge, tag status, checkbox |
radius-md | 10px | Tombol, input text, select dropdown |
radius-lg | 16px | Kartu layanan, modal dialog, panel container |
radius-full | 9999px | Avatar bundar, pil status khusus |
Tombol aksi dilarang menggunakan
border-radius: 9999px (pill). Sudut yang terlalu bulat memberi kesan main-main atau aplikasi hiburan, yang berlawanan dengan citra resmi dan tepercaya institusi pemerintah.Ukuran Target Sentuh (Touch Target)
Mengacu pada pedoman WCAG 2.1 Success Criterion 2.5.5:
- Target Sentuh Minimum 44×44 piksel untuk seluruh elemen interaktif (tombol, input, checkbox, pagination, dan tombol close modal).
- Jarak minimum antar-target sentuh yang berdekatan adalah 8 piksel untuk mencegah salah klik jempol di layar sentuh ponsel.
- Tinggi Input Khusus Lansia 52px (
--mjl-touch-large) disediakan untuk form layanan kependudukan dan bantuan sosial.