07
Spacing
Isang 4px base scale at fluid section step. Naka-cap ang mga container sa tatlong lapad.
Scale
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
Mga 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 |
Radius
| 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 |