Skip to content

Spacing

Consistent spacing scale based on 4px units.

Scale

TokenValueExample
--z-space-14pxInline spacing
--z-space-28pxCompact padding
--z-space-312pxDefault gap
--z-space-416pxComponent padding
--z-space-524pxSection spacing
--z-space-632pxLarge sections
--z-space-748pxPage sections
--z-space-864pxHero spacing

Usage

css
.card {
  padding: var(--z-space-4);
  margin-bottom: var(--z-space-5);
}

.stack > * + * {
  margin-top: var(--z-space-3);
}

Gaps

For flex and grid layouts:

css
.grid {
  display: grid;
  gap: var(--z-space-4);
}

Released under the MIT License.