spacing
spacing, radius, shadows, opacity, z-index, và size tokens — tất cả dùng chung, không phụ thuộc brand.
spacing scale
dựa trên bội số của 4. dùng cho padding, margin, gap.
xs
4px sm
8px md
16px lg
24px xl
32px 2xl
48px 3xl
64px border radius
6 mức bo góc, từ sắc nét đến bo tròn hoàn toàn. cùng một cấp độ phân cấp thị giác → cùng một radius.
none
2px sm
4px md
8px lg
12px xl
16px full
9999px shadows / elevation
5 mức elevation tạo chiều sâu cho giao diện.
sm
card resting
md
dropdown, tooltip
lg
modal, dialog
xl
drawer, sheet
opacity
disabled
0.4 overlay
0.5 hover
0.8 pressed
0.9 z-index / stacking
base
0 dropdown
100 sticky
200 overlay
300 modal
400 toast
500 tooltip
600 component sizes
icon
16px
20px
24px
32px
button
32px
40px
48px
input
32px
40px
48px