Skip to main content

Spacing

Space is the horizontal and vertical distance between or around different design elements.

Static spacing

Static spacing tokens are used in instances where spacing inside, between or around components needs to be the same regardless of the the size of the viewport.

Example Description Token name
  • Spacing none 0dp/sp/px or 0rem Global token used: $spacing-00
    $spacing-none
  • Spacing a 4dp/sp/px or 0.25rem Global token used: $spacing-01
    $spacing-a
  • Spacing b 8dp/sp/px or 0.5rem Global token used: $spacing-02
    $spacing-b
  • Spacing c 12dp/sp/px or 0.75rem Global token used: $spacing-03
    $spacing-c
  • Spacing d 16dp/sp/px or 1rem Global token used: $spacing-04
    $spacing-d
  • Spacing e 24dp/sp/px or 1.5rem Global token used: $spacing-05
    $spacing-e
  • Spacing f 32dp/sp/px or 2rem Global token used: $spacing-06
    $spacing-f
  • Spacing g 40dp/sp/px or 2.5rem Global token used: $spacing-07
    $spacing-g
  • Spacing h 56dp/sp/px or 3.5rem Global token used: $spacing-08
    $spacing-h
  • Spacing i 64dp/sp/px or 4rem Global token used: $spacing-09
    $spacing-i
  • Spacing j 80dp/sp/px or 5rem Global token used: $spacing-10
    $spacing-j