In it's simplest terms, the Golden Ratio is 1:1.61803398875...
There's more to it though. It's a very unique ratio in that the relationship between two numbers maintains the ratio to the next. Let me explain:
To get the Golden Ratio, you take any number and multiply it by 1.618... Take 1 for example: 1 x 1.618 = 1.618. If you keep going from there, 1.618 x 1.618 = 2.618. Then you can do 2.617924 x 1.618 = 4.236. Now here's the magic behind the Golden ratio: so far our sequence of numbers is 1, 1.618, 2.618, and 4.236. When you add the two previous numbers together, it equals the next number. So 1 + 1.618 = 2.618. The same is true for 1.618 + 2.618 = 4.236. This pattern continues forever and is unique only to the Golden Ratio. In more mathematical terms: the ratio between two lengths is the same as the ratio between the longer of the two and the total length of the two. Or, a is to b as b is to c where c = a + b.
Why is the Golden Ratio important?
It just so happens that we can observe this ratio in nature all over the place, and as such we can subconsiously find it visually pleasing. Things with the Golden Ratio have an inherent beauty and an often unexplained asymmetric balance that just feels right. Our eyes see it and likes it, but our brain might not register that it's the the Golden Ratio we are seeing.
So, with the tools provided below, we can more easily implement these nature-driven design patterns into our interfaces. The result will be a visual "rightness" that may be hard to consciously define, but is concretely present and intentional.
Currently, our Golden Ratio Tailwind CSS plugin will allow you to use the utilities and examples shown on our Spacing and Grid pages. Find tailwindcss-golden-ratio on github.
If you use the Alfred app, you can download our Golden Ratio workflow that helps you convert one number to the next number (up or down) using the Golden Ratio.
It's our hope to bring Golden Ratio workflows to other apps like figma in the future.
Have any feedback or ideas?Email us