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 breakpoints||Font size||Computed font size at default browser setting|
|viewport < 731px||100%||16px|
|731px < viewport < 1695px||125%||20px|
|viewport > 1695px||162.5%||26px|
|Name/rem value||Root font size 16px||Root font size 20px||Root font size 26px|
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 name||Root font size 16px||Root font size 20px||Root font size 26px|
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):
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
You can override the generic spacing within a 'Vspace' on a per-element basis.