UI Design Kit

Structure

This section includes structural principles and patterns that our digital designs should live by: Spacing, the grid system for responsive web design and accessibility guidelines.

Spacing

Consistent spacing creates visual balance that makes the interface easier for people to scan. In the EF UI Design Kit we use two spacing scales, a static scale for Component Spacing and a responsive scale for Layout Spacing. Both are based on the common 8 pixel spacing.

Why use 8 pixel spacing?

The variety of screen sizes and pixel densities that exist is infinite and will continue to increase, making work complicated for designers. Utilising an even number like 8 to size and space elements makes scaling for a wide variety of devices easy and consistent. Learn more about 8 pixel spacing

Component Spacing (Static)

We recommend spacing for components and typography to be done in increments of 8 pixels. This means that divisions of 8 pixels (16px / 24px / 32 px/ 40px / 48 px) should preferably be used for all padding and margins between elements. This can be broken down to 4 pixels when necessary.

Layout Spacing (Responsive)

For spacing between components and sections we use a responsive layout scale based on a root unit of 32px. The scale adapts depending on breakpoints, ensuring a well balanced layout across screen sizes. If a smaller static spacing is required between components, use the Component Spacing instead.

How to use spacing

Use less space between components that share a close functional relationship and use more space between large components, or between components which are less functionally related.

Grid system

When all of your designs follow the same grid, the proportion, balance, and vertical alignment of components become more consistent. In many of our businesses, mobile traffic accounts for more than 75% of all web traffic. We recommend to design for mobile first, and then scale up to larger touch-points.

12 column grid system

Our grid is based on a 12 column responsive grid system that adapts to various screen sizes. We have 4 breakpoints, ranging from S to XL screen sizes.

Grid on mobile (screen S)
Grid on desktop (screen L)
How do I design with the grid?

The easiest way to make sure you’re designing with the grid system is to copy any of the artboards on the Grid page in the EF UI Design Kit Sketchfile and paste them into your Sketch file. The grid layout settings will then automatically be copied with the artboards. Alternatively you can go to your sketch toolbar: View > Layout settings and apply the above grid settings manually for each breakpoint.