Scaling System

Overview

The scaling system and lift kit are based on the golden ratio and its derived coefficient. But what does that mean? In short, it means that everything is scaled in perfect balance with phi, the mathematical constant roughly equal to 1.618.

by using a global scaling factor everything in lift kit with regards to how far apart things are how big they are how round the border radii are comes down to this one mathematical constant. So, if you want to make things look sharper closer together and in general tighter, you would reduce this global scaling factor to something like 1.25. If you want things to be more spread out rounder more open, you make it bigger. However, one .618 already keeps things as far apart as they should be, so it isn't recommended to increase it beyond this unless you really know what you're Doing.

Customization

Since everything in LiftKit scales based on the global scale factor, you can update that one number to make the appearance of the entire system change.

To update the value, navigate to globals.css and modify these properties:

--scaleFactor: 1.618;
--wholestep: var(--scaleFactor);
--halfstep: 1.272; /* Equal to sq. root of scale factor */
--quarterstep: 1.128; /* Equal to sq. root of sq. root of scale factor */
--eighthstep: 1.06; /* equal to sq. root of quarterstep*/

Unfortunately we still need to make a calculator for you that’ll find these values and output some CSS. We’re working on it.

Underlying Logic

The scale factor defines the proportions of elements to one another. A greater scale factor doesn’t necessarily make everything bigger, it just makes the proportions between sizes bigger.

A low scale factor will:

• Tighter spacing
• Sharper Corners
• Less pronounced differences between type styles

A higher scale factor will have:

• Looser spacing
• Rounder corners
• More pronounced differences between type styles

Further Reading

When making a property greater or lesser, do it with the scaling steps.

Let’s start with a simple example: a <div> block measuring 1em high and 1em wide.

To increase its width, we multiply by an increment.

To decrease the width, we divide by an increment.