DS by Berit

Foundations

Documentation / foundations / tokens

Spacing

Eight steps from 4px to 64px, used for gaps, padding and page layout.

Spacing examples

Each bar is as wide as the space it stands for. Use only these values for gaps and padding, so that spacing looks consistent everywhere.

  • space.14pxMicro gap.
  • space.28pxInline and label gap.
  • space.312pxCompact control gap.
  • space.416pxDefault component gap.
  • space.624pxCard and section inset.
  • space.832pxLarge component gap.
  • space.1248pxSection spacing.
  • space.1664pxPage rhythm.

Spacing tokens

9 values
space.14pxMicro gap.
space.28pxInline and label gap.
space.312pxCompact control gap.
space.416pxDefault component gap.
space.624pxCard and section inset.
space.832pxLarge component gap.
space.1248pxSection spacing.
space.1664pxPage rhythm.
space.component.gapspace.4Default gap between related component parts.