Space

A fluid spacing scale generated with Utopia. Values interpolate between 320px and 1350px viewport widths. These should

Scale

--space-5xs 3→4px

--space-4xs 4→5px

--space-3xs 6→8px

--space-2xs 8→10px

--space-xs 12→15px

--space-sm 16→20px

--space-md 24→30px

--space-lg 32→40px

--space-xl 48→60px

--space-2xl 64→80px

--space-3xl 96→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 */
}