Unit system

The library is built with a 1/4rem system, this means it's relative to the font-size setting in the browser. Each unit of measure is equal to 4px given that you have a setting of 1rem being 16px, which is the default value for font-size in most browsers.

This means that if you change the default font-size of your browser from 16px to 32px, the library will automatically adjust and each unit will now be 8px. This allows for text, spacing and components to scale relative to the browser font-size setting. Meaning that if font-size increases, so does spacing, keeping everything nice and smooth.

The unit system goes from 1 - 25. 10 units converted to rem using the unit-to-rem function will result in 10rem - or 40px in a browsers with default settings. As a general rule of thumb you can multiply a unit with 4 to get the pixel size.