This prime-number multiplication chart is an absolutely beautiful visualization of which values UI designers / developers should use for height, width, x and y position a.k.a 'sticking to the grid'.

Hint: avoid the numbers wherever red and purple color shows up. :) Numbers having blue and green are acceptable, though not ideal. The more orange your number, the more pixel-perfect and crisp your designs will be at any screen size!

All these years, ever since I learned how to operate Adobe software, I would do these calculations automatically in my head and apply it in my work, and I 'sort of knew' why it yielded good results for me, but would struggle to explain in theory to others. I would never use odd values, never use decimal values, and would be picky about which even number values to use. For example, I would pick 16px, 24px, 32px as values, but NOT 10px, 28px, 30px.

I always knew deep inside that it was not exactly about following a '4-point-grid' or an '8-point grid', but it was only in 2021, a few months ago, that I realized it is all about prime factorization that I had learned in primary school! But still, I couldn't quite nail it down. I would often describe it as a 'powers-of-2-and-multiples-of-4' logic (with exceptions for 3 and 5) to other designers and developers..

But now it's crystal clear and I can explain it to anyone! This is so incredible. As someone who struggled a lot in senior high school with math, I cannot tell you how much joy it gives me that the theory I came up probably as long ago as 2013 out of 'practical common sense' and self-exploration is having a sound logic and a strong mathematical basis - and that this chart has already had a real-world application for me this whole time!