Spacing and Sizing

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.

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.

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.

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.

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.

Site-Specific Variables

Certain values are brand-specific (Collegium, Mondial) for grid and navigation spacing:

Site-specific variables:

• --navi-offset: Navigation offset (varies by breakpoint)
• --navi-banner-offset: Navigation offset with announcement banner (varies by breakpoint)