ZUI — Space

Scale

--space-5xs3→4px

--space-4xs4→5px

--space-3xs6→8px

--space-2xs8→10px

--space-xs12→15px

--space-sm16→20px

--space-md24→30px

--space-lg32→40px

--space-xl48→60px

--space-2xl64→80px

--space-3xl96→120px

One-up pairs

Fluid pairs that transition between two adjacent steps for responsive spacing that grows faster.

--space-5xs-4xs   /* 3→5px */
--space-4xs-3xs   /* 4→8px */
--space-3xs-2xs   /* 6→10px */
--space-2xs-xs    /* 8→15px */
--space-xs-sm     /* 12→20px */
--space-sm-md     /* 16→30px */
--space-md-lg     /* 24→40px */
--space-lg-xl     /* 32→60px */
--space-xl-2xl    /* 48→80px */
--space-2xl-3xl   /* 64→120px */

Usage

.card {
  padding: var(--space-md);
  gap: var(--space-xs);
  margin-block-start: var(--space-lg-xl); /* fluid pair */
}