BridgeBeta
  • Brand
  • Digital Assets
    Foundations
    Icons
    Components
    Templates
  • Resources
    Design Tokens
    How-tos
    Best Practices
    Libraries
    Accessibility
    Products List
  • Support
    • Overview
    • Colour
    • Grids & Layout
    • Spacing
    • Typography
foundations

Spacing

Spacing is the negative area between elements and components. It is commonly controlled in code with margin and padding.

We use a spacing system approach to decide what spacing to use in order to achieve a consistent visual experience across our products.

Bridge use the 8pt Grid System.

Spacing scale

Use the spacing scale when building individual components. It includes small increments needed to create appropriate spatial relationships for detail-level designs. This scale is applied and used within all Bridge components.

spacing-50
  • relative2px
  • px2px
  • scss$spacing-50
2px
spacing-75
  • relative4px
  • px4px
  • scss$spacing-75
4px
spacing-100
  • relative8px
  • px8px
  • scss$spacing-100
8px
spacing-200
  • relative12px
  • px12px
  • scss$spacing-200
12px
spacing-300
  • relative16px
  • px16px
  • scss$spacing-300
16px
spacing-400
  • relative24px
  • px24px
  • scss$spacing-400
24px
spacing-500
  • relative32px
  • px32px
  • scss$spacing-500
32px
spacing-600
  • relative40px
  • px40px
  • scss$spacing-600
40px
spacing-700
  • relative48px
  • px48px
  • scss$spacing-700
48px
spacing-800
  • relative64px
  • px64px
  • scss$spacing-800
64px
spacing-900
  • relative80px
  • px80px
  • scss$spacing-900
80px
spacing-1000
  • relative96px
  • px96px
  • scss$spacing-1000
96px

On this page

  • Spacing scale
Storybook
Figma library
Contact us
2025 © World Food Programme