Spacing

The system uses a responsive scale and takes advantage of rem units to respond to changes in the root font size.

Using a responsive scale enables layouts to automatically resize and continue to work as viewports and font sizes change.

This is important as users can adjust the root font size in their browsers, which they may do for accessibility reasons.

By default, the system also increases the root font size as the viewport width increases to make use of extra screen space (this is customisable per-app).

Default breakpointsFont sizeComputed font size at default browser setting
viewport < 731px100%16px
731px < viewport < 1695px125%20px
viewport > 1695px162.5%26px

Scale

Name/rem valueRoot font size 16pxRoot font size 20pxRoot font size 26px
0.125
2px
2.5px
3.25px
0.25
4px
5px
6.5px
0.5
8px
10px
13px
0.75
12px
15px
19.5px
1
16px
20px
26px
1.25
20px
25px
32.5px
1.5
24px
30px
39px
2
32px
40px
52px
2.75
44px
55px
71.5px
3.75
60px
75px
97.5px
5
80px
100px
130px
6.5
104px
130px
169px
8.25
132px
165px
214.5px
10.25
164px
205px
266.5px

Planet scale (legacy)

In the past, we used an alternative scale based on the Solar System (it's a pun).

We found this scale hard to use because:

  • The naming is abstract and hard to remember
  • Tokens increased in size at different rates at different breakpoints
  • There is a limited number of steps in the scale
  • Lack of vertical rhythm

For this reason, this scale is legacy and not to be used for new designs or development. However, as we haven't yet completed the transition to the current scale, you will still see this used in plenty of places.

Step nameRoot font size 16pxRoot font size 20pxRoot font size 26px
moon
3px
6px
10px
mars
6px
13px
20px
earth
13px
26px
41px
saturn
26px
52px
83px
sun
52px
106px
168px

Vspace

Vspace lets you insert space between child flow elements, creating a regular rhythm without 'left over' margins at the top or bottom. For example, the elements inside the following Vspace element will have an earth size margin separating them on the vertical axis (earth is default):

Nesting

You can quickly divide the flow content into visually distinct sections, by nesting Vspace elements. In the following, the two sections are separated by a space of the saturn spacing, while elements within each of the two sections are spaced using the default earth spacing.

You can override the generic spacing within a 'Vspace' on a per-element basis.

Matthew James Cowlishaw, Matthew David Smith and Daniel Francis Butters, each Insolvency Practitioners of Teneo Restructuring Ltd, were appointed Joint Energy Administrators of Bulb Energy Limited on 24 November 2021. The affairs, business and property of the Company are managed by the Joint Energy Administrators. The Joint Energy Administrators act as agents of the Company and contract without personal liability.