Skip to content
Gloss v2.0.0
Source
Foundations

Space

Nine fluid Utopia steps, 3xs through 3xl — the same clamp() config as type, because there is no fixed base unit here to count multiples of.

The scale

space-3xs 5px
space-2xs 9 → 10px
space-xs 14 → 15px
space-s 18 → 20px
space-m 27 → 30px
space-l 36 → 40px
space-xl 54 → 60px
space-2xl 72 → 80px
space-3xl 108 → 120px

How to pick one

Distance between Reach for
An icon and its own label --gl-space-3xs / --gl-space-2xs
A field’s label and its control --gl-space-2xs
Two controls in a row, CardRow padding --gl-space-xs
Two fields in a form, a Dialog’s title/footer padding --gl-space-s
Card body padding, a Dialog’s body padding --gl-space-m
Two sections of a page --gl-space-l
Major section spacing --gl-space-xl / --gl-space-2xl
Hero and empty-state breathing room --gl-space-3xl
The same card at three densities

Compact

space-xs padding, space-3xs gap. For dense lists.

Default

space-m padding, space-2xs gap. What Card ships with.

Roomy

space-l padding, space-s gap. For a card that is the whole screen.

Markup 
<article class="card">
  <div class="card-body" style="gap: var(--gl-space-3xs); padding: var(--gl-space-xs);">
    <h3>Compact</h3>
    <p>space-xs padding, space-3xs gap. For dense lists.</p>
  </div>
</article>
<article class="card">
  <div class="card-body">
    <h3>Default</h3>
    <p>space-m padding, space-2xs gap. What Card ships with.</p>
  </div>
</article>
<article class="card">
  <div class="card-body" style="gap: var(--gl-space-s); padding: var(--gl-space-l);">
    <h3>Roomy</h3>
    <p>space-l padding, space-s gap. For a card that is the whole screen.</p>
  </div>
</article>

Radius

4/6/10px — small and quiet, kept modest so it reads as a neutral default rather than a decorative flourish. Nothing pill-shaped except true pills.

Rules