spacing
spacing, border radius, shadows, opacity, z-index — tất cả environment tokens nhất quán bất kể brand.
spacing scale
dựa trên 4px grid. mọi gap, margin, và padding đều từ scale này. 7 cấp từ --space-xs (4px) đến --space-3xl (64px).
border radius
sáu cấp từ gần vuông đến hình viên hoàn toàn. radius nhất quán tạo phân cấp thị giác nhất quán.
shadows / elevation
bốn cấp elevation tạo chiều sâu. dùng elevation tối thiểu cần thiết — đừng nâng mọi thứ lên.
0 1px 2px 0 rgba(2, 6, 23, 0.05) 0 4px 6px -1px rgba(2, 6, 23, 0.1) 0 10px 15px -3px rgba(2, 6, 23, 0.1) 0 20px 25px -5px rgba(2, 6, 23, 0.15) opacity
bốn opacity tokens cho interactive và overlay states. không bao giờ dùng raw opacity values.
size tokens
kích thước component — icon boxes, input heights, button heights. dùng --size-* tokens thay vì hardcode px.
| token | giá trị | dùng cho |
|---|---|---|
--size-icon-sm | 16px | icon nhỏ trong button, badge |
--size-icon-md | 20px | icon mặc định |
--size-icon-lg | 24px | icon lớn, navigation |
--size-icon-xl | 32px | icon hero, feature |
--size-input-sm | 32px | input nhỏ, compact form |
--size-input-md | 40px | input mặc định |
--size-input-lg | 48px | input lớn, search bar |
--size-btn-sm | 32px | button nhỏ, table action |
--size-btn-md | 40px | button mặc định |
--size-btn-lg | 48px | button lớn, CTA |
border width
độ dày viền — mặc định 1px, focus ring 2px, accent 4px.
| token | giá trị | dùng cho |
|---|---|---|
--border-width | 1px | viền mặc định — card, input, divider |
--border-width-md | 2px | focus ring, active indicator |
--border-width-lg | 4px | accent bar, brand indicator |
component spacing reference
mỗi component dùng một bộ spacing token nhất quán.
| component | padding | gap | height |
|---|---|---|---|
| button | --space-sm --space-lg | --space-xs | --size-btn-* |
| card | --space-md --space-lg | — | — |
| input | --space-sm --space-md | — | --size-input-* |
| badge | --space-xs --space-sm | — | — |
| modal | --space-lg | — | — |
| table cell | --space-sm --space-md | — | — |
| tooltip | --space-xs --space-sm | — | — |
z-index / stacking layers
stacking context phân lớp. mỗi layer cách nhau 100 để chừa chỗ cho sub-layers.