amezquita design systemGet started

Foundations

Spacing

19 spacing tokens, named for what they separate rather than how big they are. Pick the role and the size follows, so two components that mean the same thing end up the same distance apart. Spacing is the same in light and dark.

Tokens

Page layout

The side gutter and the gap between major sections. Both are fluid: they grow with the viewport between a minimum and a maximum.

TokenPreviewValue
--space-layout-marginclamp(1.25rem, 4vw, 2rem)
--space-section-gapclamp(3rem, 8vw, 5rem)
--space-layout-max-width1200px

Gaps

Distance between things, from components in a section down to the tightest gap inside a small element.

TokenPreviewValue
--space-component-gap24px
--space-element-gap16px
--space-inline-gap8px
--space-label-gap12px
--space-tight-gap4px

Padding

Space inside things. Control padding for buttons and inputs, prominent and compact for larger and smaller variants, container and dialog padding for boxes.

TokenPreviewValue
--space-control-padding-x16px
--space-control-padding-y12px
--space-prominent-padding-x24px
--space-prominent-padding-y16px
--space-compact-padding-x12px
--space-compact-padding-y8px
--space-container-padding32px
--space-container-padding-lg48px
--space-dialog-padding-mobile16px
--space-dialog-padding-tablet24px
--space-dialog-padding-desktop32px

Usage

css
.settings-form {
  display: grid;
  gap: var(--space-element-gap);      /* between fields */
  padding: var(--space-container-padding);
}

.settings-form__actions {
  display: flex;
  gap: var(--space-inline-gap);       /* between buttons */
  margin-top: var(--space-component-gap);
}

Do and don’t

Do

  • Choose by relationship: fields in a form are elements, cards in a grid are components.
  • Use the fluid layout tokens for page gutters and section spacing, so small screens get less.
  • Use a padding token inside a box and a gap token between boxes.

Don’t

  • Write padding: 16px. The linter rejects hardcoded spacing in component CSS.
  • Pick a token because its value happens to be right. If the role is wrong, the next change to it will be too.
  • Use margins to separate siblings when the parent can set a gap.