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.
We use the formula 320 * 1.5x to calculate the sizes
Then we scale from here in increments of 1.5x as follows:
320 * 1.51 = 480
320 * 1.52 = 720
320 * 1.53 = 1080
320 * 1.53.4 = 1270
320 * 1.54 = 1620
320 * 1.55 = 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:
🔵 Squash & 🎾 Tennis uses
🏀 Basketball, 🏑 Hockey & ⚽ Football & uses
🏉 Rugby & ⚪️ Polo uses
Read more about our Typography and how Modular Scale applies.