Spacing

The spacing system is based on 1rem as a central reference (--spacing-md), and scales up and down using LiftKit's golden ratio factors. Smaller absolute values are provided for fine-grained adjustments.

--spacing-nano

2px

0.125rem

--spacing-pico

4px

0.25rem

--spacing-xxs

approx 0.382rem / 6.1px

calc(1rem * var(--wholestep-dec) * var(--wholestep-dec))

--spacing-xs

approx 0.618rem / 9.9px

calc(1rem * var(--wholestep-dec))

--spacing-sm

approx 0.786rem / 12.6px

calc(1rem * var(--halfstep-dec))

--spacing-md

1rem / 16px

1rem

--spacing-lg

approx 1.272rem / 20.3px

calc(1rem * var(--halfstep))

--spacing-xl

approx 1.618rem / 25.9px

calc(1rem * var(--wholestep))

--spacing-2xl

approx 2.058rem / 32.9px

calc(1rem * var(--wholestep) * var(--halfstep))

--spacing-3xl

approx 2.618rem / 41.9px

calc(1rem * var(--wholestep) * var(--wholestep))

Usage Guidelines

--spacing-md (1rem) is the foundation of the system and should be used for most standard spacing needs.

Smaller values (nano, pico, xxs, xs, sm) are for fine-tuned spacing, borders, and compact layouts.

Larger values (lg, xl, 2xl, 3xl) create generous whitespace and section separation.

Golden ratio scaling ensures harmonious proportions throughout the interface.

Apply spacing using Tailwind classes: p-[var(--spacing-md)] or mb-[var(--spacing-lg)]

Scale Visualization

nano

pico

xxs

2xl

3xl