07
スペーシング
4px ベースのスケールと、フルイドなセクション・ステップ。コンテナは 3 種類の最大幅で止まります。
スケール
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
コンテナ
| 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 |
ラディウス
| 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 |