Scales are extremely important in The System and allow us to create a base, initially visually inappreciable, that gives solidity and coherence to our entire project. This idea is illustrated by Joe Sparano's phrase: “Good design is obvious. Great design is transparent”.
As Sparano's phrase indicates, scales are a design decision. Even so, there are too many times that we come across designs where these do not exist or are vaguely defined. For this reason, The System includes predefined font and spacing scales. Having these predefined scales has the following benefits:
Before moving on, we have to remember that The System is focused on creating marketing websites. And what does this have to do with scales? It turns out that in marketing sites the need to guide the visitor's navigation is greater than in the rest. This means greater contrast in the scales to help us focus the visitor's attention where we are interested.
On the other hand, we cannot forget the responsive nature of the web. Where the number of elements and information displayed simultaneously is reduced depending on the size of the device from which we access the web. For this reason, the contrast within the scales is reduced toward the smaller breakpoints.
All scales in The System have a base value of 1rem.
<aside> 💡 The key features of any scale are the base value and the coefficient.
</aside>
Of course these are not closed scales. They are open to be modified and extended if necessary. The important thing is that the modifications and extensions belong to the same pattern and respect the responsive nature of the scales.
Foundational scale for headlines
Foundational scale for headlines in rich text
Foundational scale for body text
The spacing scale is unique and supports the vertical, horizontal, and padding modules.