Scaling System
LiftKit is more than just a collection of buttons and cards—it's a design system that empowers you to create your own unique components. Instead of pre-made UI elements, LiftKit provides the building blocks: variables and guidelines that shape the look and feel of your designs. Whether you're going for sleek minimalism or bold brutalism, LiftKit adapts to your creative vision, giving you the freedom to craft any aesthetic, from scratch, with ease.
Choose a Starter Kit
Get started with LiftKit using one of the official starter kits for Webflow, Figma, or CSS.
Quickstart
Get a feel for LiftKit by following along with this short tutorial.
Figure 1. Animation demonstrating state layer implementation.
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
