07
Khoảng cách
Thang cơ sở 4px cộng với bước phần linh hoạt. Container giới hạn ở ba chiều rộng.
Thang
xs
4px
4px
sm
8px
8px
md
16px
16px
lg
24px
24px
xl
40px
40px
2xl
60px
60px
3xl
80px
80px
section
clamp(60px, 10vw, 120px)
clamp(60px, 10vw, 120px)
gutter
20px
20px
container-px
22px
22px
Container
| Token | Width | Use | Anchor |
|---|---|---|---|
| content | 980px | default reading-width container | bg:container:content |
| wide | 1440px | wide marketing sections | bg:container:wide |
| narrow | 680px | narrow text columns, FAQ answers | bg:container:narrow |
| pricing-grid | 1120px | pricing grid max-width | bg:container:pricing-grid |
Bán kính
| Token | Value | Use | Anchor |
|---|---|---|---|
| skip-link | 0 0 4px 0 | skip-link bottom-right corner | bg:radius:skip-link |
| chip | 4px | small chip and badge | bg:radius:chip |
| control | 8px | default control and button | bg:radius:control |
| related | 12px | related cards, icon tile | bg:radius:related |
| card | 16px | feature cards, GEO block | bg:radius:card |
| pricing-card | 28px | pricing card | bg:radius:pricing-card |
| pill | 9999px | pill, toggle, hero badge | bg:radius:pill |