Overview
All of our layouts work to an 8px soft grid which provides the flexibility of dynamic content balanced with a structured approach to spacing.
Providing space around content creates clear grouping while providing room to breathe and improves readability. Spacing in a consistent manner creates familiarity for the user.
What is a soft grid?
A soft grid simply defines the spacing between elements – not a document-wide grid like a hard grid.
As Compound supports multiple platforms and viewports, a soft grid provides more flexibility while maintaining a visual structure.
Spacing between elements should be in factors of 8px depending on the groupings displayed.
Hard Grid v Soft Grid Example
Typography and dynamic content is the biggest factor in defining the overall size of our elements. Where possible, our Compound components of fixed height or width are created to a factor of 4px or 8px to fit better with the soft grid.
Annotation example
Hard grids
Hard grids are similar to old print layouts where every item on the page lined up to a grid of 8px cells.
On digital products that support dynamic content and various viewport sizes, this would be difficult to achieve, as every element would have to be specifically calculated.
Our layout grids take a similar method to hard grid on the horizontal axis. It requires each element to line up to to the edge of a column and use the gutter as whitespace.
Spacing scales
Layouts vary and there's no specific template that can be applied to every page. But as a guideline, content should be grouped based on content or context. And within that, a consistent scale can be applied.
This scale should have the smallest space increment to show that elements are grouped and then increase in increments of 8px as the elements change.
Forms example
If we take the example of a simple form, the space between elements related to an input are 8px – the smallest space increment.
Component spacing
The space between input fields is then increased to 16px, the next increment up, then 24px for between the title and field.
Composition spacing
Although this example moves up nicely in linear steps, there may be use cases to scale in larger increments. The three key elements that should remain consistent are:
- Spacing should be in increments of 8 (for both vertical and horizontal UI elements)
- Narrow and wide spacing should be used to display the relation between groups of elements
- Elements are spaced from the bounding box of one element to the other
Vertical rhythm
While soft grids relate to the overall document, vertical rhythm is a term specific to how typography is evenly spaced on the page.
Consistent scale improves readability and creates an overall clean documentation. Within Compound, we have three vertical rhythm scales:
- Native - for both iOS and Android
- Large web - This has a larger line height
- Small web - This has a tighter line height
The Compound type scale and colour palette have been created to meet AA accessiblity standards so they can be used in conjunction.
Much like the spacing scale, there is no single solution for every layout. The scale should be used to demonstrate hierarchy of textual content. When used alongside our soft grid scale, it's possible to use spacing to indicate content groupings.
How to check spacing in Figma
- Select an item within Figma (it can be a frame, component, text block or pretty much anything)
- Press the 'Option' key
- Move your mouse to another object and you’ll see the measurement shown on screen
It’s also recommended to set your big nudge to 8px so you can move objects in units of 8. This can be set in Preferences > Big Nudge.
Adjusting fudge amount