Primitives
Size
Dimensional constraints for containers, breakpoints, and elements.
Size tokens define dimensional constraints — how big things can be, where the layout breaks, what hero heights to clamp.
Size scale (primitives)
--size-00px--size-251px--size-502px--size-1004px--size-1506px--size-2008px--size-30012px--size-40016px--size-50020px--size-60024px--size-70028px--size-80032px--size-90036px--size-100040px--size-110044px--size-120048px--size-130048px--size-140052px--size-150056px--size-160060px--size-170064px--size-180072px--size-190080px--size-200084px--size-210088px--size-220096pxSemantic size tokens
Container sizes
Width constraints for content containers. Pair with max-width to bound page-level content.
| Token | CSS Variable | Value |
|---|---|---|
| Full width | --container-size-full-width | 100% |
| Three-quarter | --container-size-three-quarter-width | 75% |
| Two-third | --container-size-two-third-width | 66% |
| Half | --container-size-half-width | 50% |
| One-third | --container-size-one-third-width | 33% |
| Quarter | --container-size-quarter-width | 25% |
Screen breakpoints
Used in CSS media queries and responsive container sizing.
| Token | CSS Variable | Value |
|---|---|---|
| Wider | --screen-size-wider | 1440px |
| Wide | --screen-size-wide | 1280px |
| Desktop | --screen-size-desktop | 1080px |
| Tablet | --screen-size-tablet | 768px |
| Mobile | --screen-size-mobile | 320px |
Hero constraints
| Token | CSS Variable | Value |
|---|---|---|
| Max hero height | --container-size-max-hero-height | 100vh |
| Max hero width | --container-size-max-hero-width | 100vw |
Element sizes
Semantic size tokens follow the same tiny-to-huge scale as spacing — for icons, dots, indicators.
| Token | Value |
|---|---|
--size-tiny | 2px |
--size-sm | 4px |
--size-md | 8px |
--size-lg | 16px |
--size-xl | 24px |
--size-xxl | 32px |
--size-huge | 40px |
Related
- Spacing tokens — same numeric primitives used for padding and gap
- Typography → Icon sizes — semantic icon-size tokens