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
    $spacing-none
  • Spacing a 4dp/sp/px or 0.25rem
    $spacing-a
  • Spacing b 8dp/sp/px or 0.5rem
    $spacing-b
  • Spacing c 12dp/sp/px or 0.75rem
    $spacing-c
  • Spacing d 16dp/sp/px or 1rem
    $spacing-d
  • Spacing e 24dp/sp/px or 1.5rem
    $spacing-e
  • Spacing f 32dp/sp/px or 2rem
    $spacing-f
  • Spacing g 40dp/sp/px or 2.5rem
    $spacing-g
  • Spacing h 56dp/sp/px or 3.5rem
    $spacing-h
  • Spacing i 64dp/sp/px or 4rem
    $spacing-i
  • Spacing j 80dp/sp/px or 5rem
    $spacing-j