07
Mellomrom
En 4px-basisskala pluss et flytende seksjonstrinn. Containere stopper på tre bredder.
Skala
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
Containere
| 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 |
Avrunding
| 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 |