info

Get Help from a LiftKit Expert

arrow_forward
Get Help

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.

No items found.

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
An example LiftKit UI using the default scale factor of 1.618
Example of LiftKit UI using an oversized scale factor of 2.618
Example of a LiftKit UI with very tight spacing, a scale factor of 1.272.

Further Reading

Give Us Feedback

Click or tap to reveal form.
expand_more
check_circle
Success! An email has been sent to you with more details.
Please allow up to 5 minutes for it to arrive. Mailchimp can take a bit.
error
Error: Something went wrong. Email [email protected] directly for assistance.