Spacing and Sizing
Last modified with commit 74094e5 on
by Martin Jagodic.
The spacing and sizing system defines consistent space and dimensions across all components and layouts. It uses CSS variables that automatically scale from desktop to mobile, ensuring consistency and responsive behavior across all brands.
Soft Scale
Used for ~90% of spacing needs. Values decrease gradually (linearly) from desktop to mobile.
Primary use: Gaps, margins, paddings, and sizing for icons, badges, and small images.
| Desktop | Mobile |
|---|---|
| 128 | 104 |
| 112 | 88 |
| 96 | 72 |
| 80 | 64 |
| 72 | 56 |
| 64 | 48 |
| 48 | 40 |
| 40 | 32 |
| 32 | 24 |
| 24 | 20 |
| 20 | 16 |
| 16 | 12 |
| 12 | 10 |
| 10 | 8 |
| 8 | 6 |
| 6 | 4 |
| 4 | 2 |
| 2 | 0 |
Hard Scale
Values decrease by half for more dramatic scaling. Used for main section DIVs and specific cases requiring sharper reduction.
Primary use: Section-level spacing and containers.
| Desktop | Mobile |
|---|---|
| 128 | 64 |
| 112 | 56 |
| 96 | 48 |
| 80 | 40 |
| 72 | 36 |
| 64 | 32 |
| 48 | 24 |
| 40 | 20 |
| 32 | 16 |
| 24 | 12 |
| 20 | 10 |
| 16 | 8 |
| 12 | 6 |
| 10 | 5 |
| 8 | 4 |
| 6 | 3 |
| 4 | 2 |
| 2 | 1 |
Variable Scale
Custom scaling for contexts where flex direction changes and spacing needs may vary (increase, decrease, or stay the same).
Primary use: Gaps that transition from horizontal to vertical layouts.
24px variable values:
| Desktop | Variable Options |
|---|---|
| 24 | 16, 24, 32, 40, 48 |
16px variable values:
| Desktop | Variable Options |
|---|---|
| 16 | 8, 16, 24 |
To Zero Scale
Desktop values reduce to zero on mobile to maximize space.
Primary use: Decorative paddings and offsets that can be removed on mobile.
| Desktop | Mobile |
|---|---|
| 128 | 0 |
| 112 | 0 |
| 96 | 0 |
| 80 | 0 |
| 64 | 0 |
| 48 | 0 |
| 40 | 0 |
| 32 | 0 |
| 24 | 0 |
| 20 | 0 |
| 16 | 0 |
| 12 | 0 |
| 8 | 0 |
| 4 | 0 |
From Zero Scale
Zero on desktop, scales up on mobile (inverse of To Zero Scale).
Primary use: Spacing that’s only needed on mobile devices.
| Desktop | Mobile |
|---|---|
| 0 | 128 |
| 0 | 112 |
| 0 | 96 |
| 0 | 80 |
| 0 | 64 |
| 0 | 48 |
| 0 | 40 |
| 0 | 32 |
| 0 | 24 |
| 0 | 20 |
| 0 | 16 |
| 0 | 12 |
| 0 | 8 |
| 0 | 4 |
Site-Specific Variables
Certain values are brand-specific (Collegium, Mondial) for grid and navigation spacing:
| Property | Desktop | Mobile |
|---|---|---|
| 12-col | 1392 | 1392 |
| Navi offset | 76 | 113 |
| Navi offset with announcement strip | 118 | 150 |
Site-specific variables:
--navi-offset: Navigation offset (varies by breakpoint)--navi-banner-offset: Navigation offset with announcement banner (varies by breakpoint)