Foundation home
Quick reference
Typography
Color palettes
Color surfaces
Color pairing
Iconography
Spacing and scale
Button - Filled
Foundation elements
Spacing and scale
In a design system, precise x-spacing and vertical spacing create a clean, organized interface. Using a 4px scale standardizes these measurements, ensuring components align seamlessly with adjacent text and elements, enhancing both aesthetics and usability.
4px Grid System
The 4px grid system forms the basis of our design system and provides uniform spacing and ratio. It divides the layout into 4-pixel units, enabling precise element positioning and sizing.

Adhering to this grid ensures all components align to 4-pixel increments, creating visual order and rhythm and promoting visual consistency and ease of maintenance across our product ecosystem.

All spacing is based on a 4px scale, with increments aligned to the using a base of 16 and rounded to 4px.
Spacing Scale
Spacing, the negative area between elements, is controlled via margin and padding in code. The spacing scale standardizes these properties across both vertical and horizontal edges, ensuring consistent margins and padding throughout the interface.

Larger spacing values establish priority and visual hierarchy, while smaller values differentiate related and unrelated content within an area.
Spacing
rem
px
Example
space-0
0
0
space-1
0.25
4
space-2
0.5
8
space-3
0.75
12
space-4
1
16
space-5
1.5
24
space-6
2
32
space-7
3
48
space-8
4
64
space-9
5
80
Component Spacing
Effective component spacing in a design system involves carefully managing the x-spacing, gap between elements, vertical spacing for alignment, and the overall height of components to ensure cohesive layout with adjacent components and text.

Based on the 4px scale, the overall height of the component is the important metric to ensure alignment with other content.
x-space
Text label component height x-space space top space bottom x-space
Gap Icon
simple component spacing anatomy example
Spacing scale - Guide values
Small Values: 0px - 8px Used for small and compact pieces of the UI. Examples below:
  • Gap between small icons and text
  • Container padding of small components (badges, icon buttons, table cells)
  • Gap between repeating elements (button groups)
  • Padding within input components
  • Vertical spacing between elements in a card (title and description, a description and actions)
  • Gap between the trigger and elevated elements (between dropdown button & menu)
Medium Values: 12px - 24px Used for larger and less dense pieces of the UI. Examples below:
  • Container padding of larger components (i.e. buttons)
  • Space between avatar/large icon and content.
  • Vertical spacing between elements in cards.
  • Spacing between items in less densely packed or larger components.
Large Values: 32px - 80px Used for the largest pieces of the UI. Examples below:
  • The space between content on the page (i.e. spacing between top of page and header)
  • Alignment within larger pieces of content.
  • In-app announcements
  • Space between illustrations or loading animation
Line-height Scale
In our 4pt grid system, prioritizing line-height over font size is essential for maintaining multiples of 4 compliance. Line-height, encompassing both ascent and descent, ensures consistent vertical spacing between text lines. Aligning it with the 4pt grid establishes a precise and harmonious layout, promoting visual cohesion within the grid's constraints.

The line height should be a multiple of 4 and greater than the font size. Line-height to font size varies but in our design system it is between x1.3 and x1.5 the font size
80 68 60 52 48 44 40 32 28 28 24 20 20
Major second (base 16 rounded to 4px)
Font size 56 48 Display Large Display Medium
36 32 28 26 22 20 18 16 42 Label large Label medium Label small Line-height
Line-height is always greater than the font size and a multiple of 4 14 12
Display Small Headline Large Headline Medium Headline Small Title Large Title Medium Title Small Body Large Label xlarge Body large Body mendium Body small
Contact us. If you have any questions or feedback relating to the Core Design System or have suggestions to help our commitment to continuous improvement, please contact:
simon.andrews@joinedup.com
aysha.miskin@beeline.com
CORE DESIGN SYSTEM
Foundations
Made
with