Juli Living Showcase

Spacing scale

Fluid spacing steps from Utopia. Each bar's width is the live value of its token, so resizing this window shows the interpolation. Block-level rhythm — heading margins, paragraph margins, section padding, gaps — is drawn from this scale, which is what "baseline grid" means in this codebase (ADR 0002). Lines within a paragraph do not snap.

Base scale

  1. --space-3xsclamp(0.25rem, 0.2375rem + 0.0625vw, 0.3125rem)
  2. --space-2xsclamp(0.5rem, 0.475rem + 0.125vw, 0.625rem)
  3. --space-xsclamp(0.75rem, 0.7125rem + 0.1875vw, 0.9375rem)
  4. --space-sclamp(1rem, 0.95rem + 0.25vw, 1.25rem)
  5. --space-mclamp(1.5rem, 1.425rem + 0.375vw, 1.875rem)
  6. --space-lclamp(2rem, 1.9rem + 0.5vw, 2.5rem)
  7. --space-xlclamp(3rem, 2.85rem + 0.75vw, 3.75rem)
  8. --space-2xlclamp(4rem, 3.8rem + 1vw, 5rem)
  9. --space-3xlclamp(6rem, 5.7rem + 1.5vw, 7.5rem)

Pairs

A pair interpolates between two base steps over the viewport range, so it grows faster than either — --space-s-m iss at the small end and m at the large one.

  1. --space-3xs-2xsclamp(0.25rem, 0.175rem + 0.375vw, 0.625rem)
  2. --space-2xs-xsclamp(0.5rem, 0.4125rem + 0.4375vw, 0.9375rem)
  3. --space-xs-sclamp(0.75rem, 0.65rem + 0.5vw, 1.25rem)
  4. --space-s-mclamp(1rem, 0.825rem + 0.875vw, 1.875rem)
  5. --space-s-lclamp(1rem, 0.7rem + 1.5vw, 2.5rem)
  6. --space-m-lclamp(1.5rem, 1.3rem + 1vw, 2.5rem)
  7. --space-m-xlclamp(1.5rem, 1.05rem + 2.25vw, 3.75rem)
  8. --space-l-xlclamp(2rem, 1.65rem + 1.75vw, 3.75rem)
  9. --space-xl-2xlclamp(3rem, 2.6rem + 2vw, 5rem)
  10. --space-2xl-3xlclamp(4rem, 3.3rem + 3.5vw, 7.5rem)