Spacing

Acopl UI uses a 4px base scale. All spacing values are multiples of 4px (0.25rem).

Scale

Value	rem	px
`0`	`0`	`0`
`1`	`0.25rem`	`4px`
`2`	`0.5rem`	`8px`
`3`	`0.75rem`	`12px`
`4`	`1rem`	`16px`
`5`	`1.25rem`	`20px`
`6`	`1.5rem`	`24px`
`8`	`2rem`	`32px`
`10`	`2.5rem`	`40px`
`12`	`3rem`	`48px`
`16`	`4rem`	`64px`
`20`	`5rem`	`80px`
`24`	`6rem`	`96px`

Container sizes

Token	Value
`--ac-container-sm`	`640px`
`--ac-container-md`	`768px`
`--ac-container-lg`	`1024px`
`--ac-container-xl`	`1280px`
`--ac-container-2xl`	`1536px`
`--ac-container-3xl`	`1728px`
`--ac-container-4xl`	`1920px`
`--ac-container-5xl`	`2048px`
`--ac-container-6xl`	`2560px`
`--ac-container-7xl`	`3072px`

Container class

<!-- Full width (up to 3072px max) -->
<div class="container">...</div>

<!-- Constrained widths -->
<div class="container container--xl">...</div>
<div class="container container--lg">...</div>
<div class="container container--md">...</div>

Section spacing

<!-- Default section padding: 4rem block -->
<section class="section">...</section>

<!-- Variants -->
<section class="section section--sm">...</section>  <!-- 2rem -->
<section class="section section--lg">...</section>  <!-- 6rem -->
<section class="section section--xl">...</section>  <!-- 8rem -->