Spacers

Golden-ratio spacing scale. Klik op een bar of token-naam om de SCSS-variabele te kopiëren.

Why a spacer scale?

De spacer-schaal gebruikt de gulden snede (φ ≈ 1.618) als ratio. Elke stap is perceptueel duidelijk groter dan z'n voorganger zonder visuele "spring" — wat één enkele set van 10 waarden genoeg maakt om het hele bereik te dekken van 2px (hairline) tot 178px (marketing-rhythm). Naamgeving volgt t-shirt sizing (3xs–4xl) parallel met de overige scales (typography, radius, levitation).

Overview — alle 10 stappen op één as

De bars hebben hun letterlijke pixel-breedte; de golden-ratio progressie is in één blik zichtbaar. (actual size on wider screens — onder 720px viewport scalen ze proportioneel weg)

  1. 3xs2px
  2. 2xs4px
  3. xs6px
  4. s10px
  5. m16px
  6. l26px
  7. xl42px
  8. 2xl68px
  9. 3xl110px
  10. 4xl178px

Gebruik

example.scss
@use "@ftp/style-library/scss/variables/spacers" as *;

.my-element {
  padding: $space-m;
  margin-bottom: $space-l;
  gap: $space-xs;
}

Eén schaal, één naam: $space-<size>. Kies de stap die qua afstand klopt; geen aparte aliases voor padding / margin / gap nodig. De CSS-custom-property-variant --space-<size> is beschikbaar wanneer je runtime-themes wilt respecteren.

Per token — bar, gap-demo, rationale

  1. 3xs$space-3xs2px
    Literal size
    As gap (vertical)

    Hairline gaps between dense icons/glyphs; never for inset padding.

  2. 2xs$space-2xs4px
    Literal size
    As gap (vertical)

    Tight gap between a chip and its trailing × button, or icon-and-label.

  3. xs$space-xs6px
    Literal size
    As gap (vertical)

    Compact inline-flex gap; small-button inset padding.

  4. s$space-s10px
    Literal size
    As gap (vertical)

    Default input padding; small card content gap.

  5. m$space-m16px
    Literal size
    As gap (vertical)

    Standard component inset; the most-used spacer in a typical UI.

  6. l$space-l26px
    Literal size
    As gap (vertical)

    Section gap between distinct content blocks within a card or panel.

  7. xl$space-xl42px
    Literal size
    As gap (vertical)

    Page-region separator: between a primary content area and a sidebar widget.

  8. 2xl$space-2xl68px
    Literal size
    As gap (vertical)

    Major page-section margin (between hero and the first content row).

  9. 3xl$space-3xl110px
    Literal size
    As gap (vertical)

    Marketing-page rhythm; not used in productive UI.

  10. 4xl$space-4xl178px
    Literal size
    As gap (vertical)

    Marketing-page rhythm; not used in productive UI.