Spacing Presets

Spacing in Rare Styles is derived from a single base unit. Every margin, padding, gap and container width is a multiple of one number. The result is rhythm: blocks align, edges echo, scrolling feels predictable. Nothing is random.

Base Unit

The base unit is 16px, exposed as --base-unit. It matches the browser default font size and anchors every spacing token, every grid gap, and several layout primitives — grid columns, header height, fr fractions.

To re-tune the entire system, override --base-unit at :root. All derived sizes scale proportionally without forking the library.

:root { --base-unit: 14px; }   /* tighter scale across the entire site */

Scale

The scale is intentionally non-linear: small steps for micro-adjustments inside components, wider doublings for layout-scale spacing. Each step carries a semantic shift, not a gradual visual nudge.

Special values: --space-0 (0), --space-auto (auto), and percentage tokens for layout sizing — --space-5, --space-10, --space-25, --space-50, --space-100, and the rest in between.

Utility classes

For every token in the scale, the library generates utility classes for the common spacing properties. Replace {token} with any value from the scale (xs, md, xxl, 50, …).

.padding-{token}

padding on all four sides

.padding-x-{token}

padding-left and -right

.padding-y-{token}

padding-top and -bottom

.padding-t/r/b/l-{token}

per-side padding

.margin-...

same shape, for margin

.gap-...

same shape, for flex / grid gap

.width-{token}

fixed width

.height-{token}

fixed height

.top/.right/.bottom/.left-{token}

positional offsets

<div class="padding-md gap-x-lg margin-y-xl">

Responsive prefixes

Every spacing utility is available with breakpoint prefixes: mobile:, tablet:, desktop:. Prefixed utilities apply only inside the named breakpoint and override the unprefixed value.

<div class="padding-md mobile:padding-sm desktop:padding-lg">

Aliases

Shorter aliases are available for the most-used spacing utilities, intended for finer typographic control inside content blocks. Each alias is one step smaller than its core counterpart — useful when the literal name would interrupt the reading flow of inline class lists.

.p-s

= .padding-xs (4px)

.p-m

= .padding-sm (8px)

.p-l

= .padding-md (16px)

.p-xl

= .padding-lg (32px)

.p-xxl

= .padding-xl (48px)

The same shape works for .m-* (margin), .gap-*, .w-* (width), .h-* (height), with all per-side variants (.pt-s, .mx-l, .gy-xl, …).

Override

To customize a single token without forking the library, override it at :root or on a specific element:

:root {
  --space-md: 20px;            /* tighten or expand the base step */
  --space-xxxxl: 32rem;        /* taller list-group-pack columns */
}

Components that consume tokens via custom properties accept inline overrides too:

<div class="list-group-pack" style="height: var(--space-xxxxl);">