Spacing
Elevate CSS features a meticulously crafted 4pt spacing system with three scales to address different design needs: detail, content, and space. This structure ensures consistency across components and layouts, supporting projects of all sizes.
Spacing Scales Overview
1. Detail Scale
The detail scale is for fine-grained adjustments in small components, such as buttons, cards, and inputs. It offers precise control over spacing from 0.25rem to 3.5rem.
| Token | Value | Description |
|---|---|---|
d1 | 0.25rem | 4pt |
d2 | 0.5rem | 8pt |
d3 | 0.75rem | 12pt |
d4 | 1rem | 16pt |
d5 | 1.25rem | 20pt |
d6 | 1.5rem | 24pt |
d7 | 1.75rem | 28pt |
d8 | 2rem | 32pt |
d9 | 2.25rem | 36pt |
d10 | 2.5rem | 40pt |
d11 | 2.75rem | 44pt |
d12 | 3rem | 48pt |
d13 | 3.25rem | 52pt |
d14 | 3.5rem | 56pt |
2. Content Scale
The content scale is optimized for spacing within layouts, such as column gaps or section margins, spanning 4rem to 20rem.
| Token | Value | Description |
|---|---|---|
c1 | 4rem | 64pt |
c2 | 4.5rem | 72pt |
c3 | 5rem | 80pt |
c4 | 5.5rem | 88pt |
c5 | 6rem | 96pt |
c6 | 7rem | 112pt |
c7 | 7.5rem | 120pt |
c8 | 8rem | 128pt |
c9 | 9rem | 144pt |
c10 | 10rem | 160pt |
c11 | 12rem | 192pt |
c12 | 16rem | 256pt |
c13 | 20rem | 320pt |
3. Space Scale
The space scale addresses large-scale layouts, ideal for page sections, full-width elements, and major spacing needs. The values range from 24rem to 120rem.
| Token | Value | Description |
|---|---|---|
s1 | 24rem | 384pt |
s2 | 28rem | 448pt |
s3 | 32rem | 512pt |
s4 | 36rem | 576pt |
s5 | 40rem | 640pt |
s6 | 48rem | 768pt |
s7 | 56rem | 896pt |
s8 | 60rem | 960pt |
s9 | 64rem | 1024pt |
s10 | 72rem | 1152pt |
s11 | 80rem | 1280pt |
s12 | 90rem | 1440pt |
s13 | 120rem | 1920pt |
Differences Between Scales
| Aspect | Detail Scale | Content Scale | Space Scale |
|---|---|---|---|
| Granularity | Fine-grained adjustments | Medium-scale spacing | Large-scale layouts |
| Primary Use | Component-level styling | Layout spacing for sections | Major page structures |
| Value Range | 0.25rem to 3.5rem | 4rem to 20rem | 24rem to 120rem |
Applying Spacing in Utility Strings
You can mix and match these scales in your designs:
<!-- Detail spacing for components --><div class="pd:d4 mg:d8"> <!-- Padding of 1rem and margin of 2rem --></div>
<!-- Content spacing for layouts --><div class="mg-t:c3 mg-b:c5"> <!-- Top margin of 5rem and bottom margin of 6rem --></div>
<!-- Space scale for sections --><section class="pd:s3 mg-b:s5"> <!-- Padding of 32rem and margin-bottom of 40rem --></section>