The implementation of modular scale simplifies and beautifies our designs.
Scales are everywhere. Most notably in nature where the presence of the golden ratio can be found from the microscopic DNA's double helix to vast spiral galaxies.
Taking this approach and applying it to our Structure, Typography, Spacing and extending into Iconography, Illustrations and further, we are able to define a hierarchy which is beautiful, calculable and concise.
We have six viewports, the smallest width being 320px. This is our initial value that all the other viewports are based from.
320px is 1em
Then we scale from here in increments of 1.5x as follows:
320 x 1.5 = 480 480 x 1.5 = 720 720 x 1.5 = 1080 1080 x 1.5 = 1620 1620 x 1.5 = 2430
For Typography, we have three multipliers to generate our scales.
Major Second = 1.125 Minor Third = 1.2 Major Third = 1.25
These are applied to our Viewport sizes in the following way:
⚪️ Polo & 🏉 Rugby uses
🏑 Hockey & 🏀 Basketball uses
🎾 Tennis & 🔵 Squash uses
Read more about our Typography and how Modular Scale applies.