info

Get Help from a LiftKit Expert

arrow_forward
Get Help

Global Variables

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.

Global Variables are exactly what they sound like. They are the preset variables, set on the :root of the DOM, which make up the backbone of the LiftKit system. There are two types: color and size. LiftKit doesn't currently have a global variable for typeface, because it only uses a single font family, which makes using a variable unnecessary. You can simply set the font family on the :root element directly with the CSS property font-family.

Color variables

We'll discuss the actual color system itself in the next section. For now, you just need to know how the variables are written, because the rest of this documentation will assume you know how to read them.

Color variables are named using the following syntax: --[Color Mode]__[Swatch Name]_lkv"

  1. Color Mode refers to either light or dark mode.
  2. Swatch Name refers to the actual color you're choosing. They're the same thing as design tokens in Material 3, but I think "Swatch Name" is easier for beginners to understand while meaning the same thing.
  3. "_lkv" simply stands for "LiftKit Variable" It's put at the end so that, if you ever want to write a function that modifies ONLY the LiftKit variables, this gives you an easy way to target them.

Size variables

Size variables are simpler and don't use the _lkv ending, because you really, really shouldn't modify these.

There are two kinds of size variables.

  1. Base sizes: (xxs to xxl) are the basic "building block" sizes that are used in utility classes that have a size in the name like .m-top__xxs or .p-right__ xl.
  2. Increments are the "steps" you can use when you need to scale something up or down. To scale up, multiply by this variable. To scale down, divide.
    1. wholestep is like scaling by 1 order of magnitude
    2. halfstep is like scaling by half an order of magnitude
    3. quarterstep is like scaling by "juuuuuust a little bit" (aka one-fourth an order of magnitude. It's really small.)
content_copy
Copy Code
:root {
  font-size: 1rem;

  /* Raw size variables */

  --md: 1em;
  /* It's okay to use em here because the root font size
                  has been manually set to 1rem */

  --scaleFactor: 1.618em;

  --sm: calc(var(--md) / var(--scaleFactor));
  --xs: calc(var(--sm) / var(--scaleFactor));
  --2xs: calc(var(--xs) / var(--scaleFactor));

  --lg: calc(var(--md) * var(--scaleFactor));
  --xl: calc(var(--lg) * var(--scaleFactor));
  --2xl: calc(var(--xl) * var(--scaleFactor));

  /*Increments*/

  --wholestep: 1.618;
  --halfstep: 1.272;
  --quarterstep: 1.128;
  --eighthstep: 1.061;

  --wholestep-dec: 0.618;
  --halfstep-dec: 0.272;
  --quarterstep-dec: 0.128;
  --eighthstep-dec: 0.061;

  /* Colors */

  --light__background_lkv: #fefbff;
  --light__onsurface_lkv: #1b1b1f;
  --light__primary_lkv: #4658ac;
  --light__surfacecontainerlowest_lkv: #fff;
  --light__onsurfacevariant_lkv: #45464f;
  --dark__outline_lkv: #90909a;
  --dark__error_lkv: #ffb4ab;
  --dark__primary_lkv: #b9c3ff;

  --light__onprimary_lkv: #fefbff;
  --light__outlinevariant_lkv: #c6c5d0;
  --light__shadow_lkv: #000;
  --light__info_lkv: #1758c7;
  --light__secondary_lkv: #5a5d72;
  --light__outline_lkv: #767680;
  --light__inverseprimary_lkv: #b9c3ff;
  --light__surfacecontainerlow_lkv: #cbdadd;
  --light__successcontainer_lkv: #92f8b4;
  --light__onsuccesscontainer_lkv: #00210f;
  --light__infocontainer_lkv: #dae2ff;
  --light__oninfocontainer_lkv: #001946;
  --light__warningcontainer_lkv: #ffdea7;
  --light__onwarningcontainer_lkv: #271900;
  --light__errorcontainer_lkv: #ffdad6;
  --light__onerrorcontainer_lkv: #410002;
  --light__onsecondarycontainer_lkv: #171b2c;
  --light__primarycontainer_lkv: #dee1ff;
  --light__onprimarycontainer_lkv: #001258;
  --light__onsecondary_lkv: #fff;
  --light__secondarycontainer_lkv: #dfe1f9;
  --light__tertiary_lkv: #76546e;
  --light__ontertiary_lkv: #fff;
  --light__tertiarycontainer_lkv: #ffd7f2;
  --light__ontertiarycontainer_lkv: #2d1228;
  --light__error_lkv: #ba1a1a;
  --light__onerror_lkv: #fff;
  --light__onbackground_lkv: #1b1b1f;
  --light__surface_lkv: #e8eced;
  --light__surfacevariant_lkv: #e3e1ec;
  --light__scrim_lkv: #000;
  --light__inversesurface_lkv: #303034;
  --light__inverseonsurface_lkv: #f3f0f4;
  --light__success_lkv: #006d3d;
  --light__onsuccess_lkv: #fff;
  --light__warning_lkv: #7c5800;
  --light__onwarning_lkv: #fff;
  --light__oninfo_lkv: #fff;
  --light__primaryfixed_lkv: #dee1ff;
  --light__onprimaryfixed_lkv: #001258;
  --light__primaryfixeddim_lkv: #b9c3ff;
  --light__onprimaryfixedvariant_lkv: #2d3f93;
  --light__secondaryfixed_lkv: #dfe1f9;
  --light__onsecondaryfixed_lkv: #171b2c;
  --light__secondaryfixeddim_lkv: #c3c5dd;
  --light__onsecondaryfixedvariant_lkv: #434659;
  --light__tertiaryfixed_lkv: #ffd7f2;
  --light__ontertiaryfixed_lkv: #2d1228;
  --light__tertiaryfixeddim_lkv: #e5bad8;
  --light__ontertiaryfixedvariant_lkv: #5c3c55;
  --light__surfacedim_lkv: #dcd9de;
  --light__surfacebright_lkv: #fbf8fd;
  --light__surfacecontainer_lkv: #f0edf1;
  --light__surfacecontainerhigh_lkv: #eae7ec;
  --light__surfacecontainerhighest_lkv: #e4e1e6;

  --dark__onprimary_lkv: #11277c;
  --dark__primarycontainer_lkv: #2d3f93;
  --dark__onprimarycontainer_lkv: #dee1ff;
  --dark__secondary_lkv: #c3c5dd;
  --dark__onsecondary_lkv: #2c2f42;
  --dark__secondarycontainer_lkv: #434659;
  --dark__onsecondarycontainer_lkv: #dfe1f9;
  --dark__tertiary_lkv: #e5bad8;
  --dark__ontertiary_lkv: #44263e;
  --dark__tertiarycontainer_lkv: #5c3c55;
  --dark__ontertiarycontainer_lkv: #ffd7f2;
  --dark__onerror_lkv: #690005;
  --dark__errorcontainer_lkv: #93000a;
  --dark__onerrorcontainer_lkv: #ffb4ab;
  --dark__background_lkv: #1b1b1f;
  --dark__onbackground_lkv: #e4e1e6;
  --dark__surface_lkv: #131316;
  --dark__onsurface_lkv: #e4e1e6;
  --dark__onsurfacevariant_lkv: #c6c5d0;
  --dark__surfacevariant_lkv: #45464f;
  --dark__shadow_lkv: #000;
  --dark__inversesurface_lkv: #e4e1e6;
  --dark__scrim_lkv: #000;
  --dark__inverseonsurface_lkv: #303034;
  --dark__inverseprimary_lkv: #4658ac;
  --dark__success_lkv: #76db9a;
  --dark__onsuccess_lkv: #00391d;
  --dark__successcontainer_lkv: #00522c;
  --dark__onsuccesscontainer_lkv: #92f8b4;
  --dark__warning_lkv: #f7bd48;
  --dark__onwarning_lkv: #412d00;
  --dark__warningcontainer_lkv: #5e4200;
  --dark__onwarningcontainer_lkv: #ffdea7;
  --dark__info_lkv: #b1c5ff;
  --dark__oninfo_lkv: #002c71;
  --dark__infocontainer_lkv: #00419e;
  --dark__oninfocontainer_lkv: #dae2ff;
  --dark__primaryfixed_lkv: #dee1ff;
  --dark__onprimaryfixed_lkv: #001258;
  --dark__primaryfixeddim_lkv: #b9c3ff;
  --dark__onprimaryfixedvariant_lkv: #2d3f93;
  --dark__secondaryfixed_lkv: #dfe1f9;
  --dark__secondaryfixeddim_lkv: #c3c5dd;
  --dark__onsecondaryfixed_lkv: #171b2c;
  --dark__onsecondaryfixedvariant_lkv: #434659;
  --dark__tertiaryfixed_lkv: #ffd7f2;
  --dark__ontertiaryfixed_lkv: #2d1228;
  --dark__tertiaryfixeddim_lkv: #e5bad8;
  --dark__ontertiaryfixedvariant_lkv: #5c3c55;
  --dark__surfacedim_lkv: #131316;
  --dark__surfacebright_lkv: #39393c;
  --dark__surfacecontainerlowest_lkv: #0e0e11;
  --dark__surfacecontainer_lkv: #1f1f23;
  --dark__surfacecontainerhigh_lkv: #2a2a2d;
  --dark__surfacecontainerhighest_lkv: #353438;
  --dark__surfacecontainerlow_lkv: #1b1b1f;
  --dark__outlinevariant_lkv: #45464f;

  /* Make text look sharper */

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
}

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.