# Modular Scale

The purpose of a Modular Scale is to create visual harmony in the sizing and spacing of elements on our page. Rather than arbitrary sizing or spacing values we can equip ourselves with a small collection of values that are derived from a mathematical algorithm. These values can be used to set padding, margins, sizes, etc.

By sticking to our modular scale values we can avoid visual discord in our layouts. Just select the scale value that solves our spacing/sizing needs the best and know that these will scale appropriately and always be proportional to every other element's spacing/sizing.

The modular scale **ratio** for this design was not chosen arbitrarily either. It was set by determining a baseline value from the design to serve as `--s0`, then finding the extreme ends of large and small represented in the design. The ratio was derived from this range to give us a set of harmonious points on the scale.

For more on Modular Scale see [Every Layout](https://every-layout.dev/rudiments/modular-scale/).
