Radius & elevation
Dua radius untuk seluruh library, dan empat tingkat bayangan yang menyatakan seberapa jauh sesuatu mengapung.
Dua radius, dan tidak lebih
Hanya ada dua token radius: --radius-control 4px dan --radius-panel 6px. Tidak ada komponen yang memakai rounded-lg atau rounded-xl.
4 dan 6, bukan 6 dan 12: pada kerapatan ERP, sudut 12px membuat setiap panel terbaca seperti stiker, dan mencampur rounded-lg dengan rounded-xl per komponen membuat satu set terlihat disusun tangan. Angkanya mengikuti ERP yang sudah jalan, dan diputuskan bersama Rio pada 23 September 2026 (#063).
rounded-control4px
Kontrol: tombol, input, baris menu, segmen, badge kotak
rounded-panel6px
Permukaan yang memuat kontrol: kartu, modal, popover, toast, tabel
rounded-full∞
Avatar, titik status, badge pil, penanda Stepper
rounded-sm / rounded-xs2px / 1px
Hal kecil di dalam kontrol: kotak ikon, potongan bilah Progress
Elevation
Bayangan menyatakan jarak dari halaman, bukan kepentingan. Semakin tinggi sesuatu mengapung — dan semakin mudah ia ditutup — semakin tebal bayangannya.
Tombol dan penanda yang duduk di permukaan halaman
Tombol saat hover — terangkat 2px bersamaan
Panel mengapung: dropdown, popover, select, kalender
Lapisan teratas: Modal, Drawer, CommandPalette
Di mode gelap, bayangan hampir tidak terlihat — yang memisahkan lapisan di sana adalah warna: bg-surface untuk halaman, bg-surface-raised untuk panel di atasnya. Karena itu panel tidak pernah mengandalkan bayangan saja; selalu ada border-border juga.