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.
Get started with LiftKit using one of the official starter kits for Webflow, Figma, or CSS.
Get a feel for LiftKit by following along with this short tutorial.
Padding sets space following the same principles as margins.
@import "globals.css";
.p-top__2xs {
padding-top: var(--2xs);
}
.p-top__xs {
padding-top: var(--xs);
}
.p-top__sm {
padding-top: var(--sm);
}
.p-top__md {
padding-top: var(--md);
}
.p-top__lg {
padding-top: var(--lg);
}
.p-top__xl {
padding-top: var(--xl);
}
.p-top__2xl {
padding-top: var(--2xl);
}
.p-right__2xs {
padding-right: var(--2xs);
}
.p-right__xs {
padding-right: var(--xs);
}
.p-right__sm {
padding-right: var(--sm);
}
.p-right__md {
padding-right: var(--md);
}
.p-right__lg {
padding-right: var(--lg);
}
.p-right__xl {
padding-right: var(--xl);
}
.p-right__2xl {
padding-right: var(--2xl);
}
.p-bottom__2xs {
padding-bottom: var(--2xs);
}
.p-bottom__xs {
padding-bottom: var(--xs);
}
.p-bottom__sm {
padding-bottom: var(--sm);
}
.p-bottom__md {
padding-bottom: var(--md);
}
.p-bottom__lg {
padding-bottom: var(--lg);
}
.p-bottom__xl {
padding-bottom: var(--xl);
}
.p-bottom__2xl {
padding-bottom: var(--2xl);
}
.p-left__2xs {
padding-left: var(--2xs);
}
.p-left__xs {
padding-left: var(--xs);
}
.p-left__sm {
padding-left: var(--sm);
}
.p-left__md {
padding-left: var(--md);
}
.p-left__lg {
padding-left: var(--lg);
}
.p-left__xl {
padding-left: var(--xl);
}
.p-left__2xl {
padding-left: var(--2xl);
}
.display1.p-top__2xs,
.display2.p-top__2xs,
.title1.p-top__2xs,
.title2.p-top__2xs,
.title3.p-top__2xs,
.heading.p-top__2xs,
.subheading.p-top__2xs,
.body.p-top__2xs,
.callout.p-top__2xs,
.label.p-top__2xs,
.caption.p-top__2xs,
.overline.p-top__2xs,
.display1__bold.p-top__2xs,
.display2__bold.p-top__2xs,
.title1__bold.p-top__2xs,
.title2__bold.p-top__2xs,
.title3__bold.p-top__2xs,
.heading__bold.p-top__2xs,
.subheading__bold.p-top__2xs,
.body__bold.p-top__2xs,
.callout__bold.p-top__2xs,
.label__bold.p-top__2xs,
.caption__bold.p-top__2xs,
.overline__bold.p-top__2xs {
padding-top: var(--2xs);
}
.display1.p-top__xs,
.display2.p-top__xs,
.title1.p-top__xs,
.title2.p-top__xs,
.title3.p-top__xs,
.heading.p-top__xs,
.subheading.p-top__xs,
.body.p-top__xs,
.callout.p-top__xs,
.label.p-top__xs,
.caption.p-top__xs,
.overline.p-top__xs,
.display1__bold.p-top__xs,
.display2__bold.p-top__xs,
.title1__bold.p-top__xs,
.title2__bold.p-top__xs,
.title3__bold.p-top__xs,
.heading__bold.p-top__xs,
.subheading__bold.p-top__xs,
.body__bold.p-top__xs,
.callout__bold.p-top__xs,
.label__bold.p-top__xs,
.caption__bold.p-top__xs,
.overline__bold.p-top__xs {
padding-top: var(--xs);
}
.display1.p-top__sm,
.display2.p-top__sm,
.title1.p-top__sm,
.title2.p-top__sm,
.title3.p-top__sm,
.heading.p-top__sm,
.subheading.p-top__sm,
.body.p-top__sm,
.callout.p-top__sm,
.label.p-top__sm,
.caption.p-top__sm,
.overline.p-top__sm,
.display1__bold.p-top__sm,
.display2__bold.p-top__sm,
.title1__bold.p-top__sm,
.title2__bold.p-top__sm,
.title3__bold.p-top__sm,
.heading__bold.p-top__sm,
.subheading__bold.p-top__sm,
.body__bold.p-top__sm,
.callout__bold.p-top__sm,
.label__bold.p-top__sm,
.caption__bold.p-top__sm,
.overline__bold.p-top__sm {
padding-top: var(--sm);
}
/* Repeat for other margin directions and sizes */
.display1.p-top__md,
.display2.p-top__md,
.title1.p-top__md,
.title2.p-top__md,
.title3.p-top__md,
.heading.p-top__md,
.subheading.p-top__md,
.body.p-top__md,
.callout.p-top__md,
.label.p-top__md,
.caption.p-top__md,
.overline.p-top__md,
.display1__bold.p-top__md,
.display2__bold.p-top__md,
.title1__bold.p-top__md,
.title2__bold.p-top__md,
.title3__bold.p-top__md,
.heading__bold.p-top__md,
.subheading__bold.p-top__md,
.body__bold.p-top__md,
.callout__bold.p-top__md,
.label__bold.p-top__md,
.caption__bold.p-top__md,
.overline__bold.p-top__md {
padding-top: var(--md);
}
.display1.p-top__lg,
.display2.p-top__lg,
.title1.p-top__lg,
.title2.p-top__lg,
.title3.p-top__lg,
.heading.p-top__lg,
.subheading.p-top__lg,
.body.p-top__lg,
.callout.p-top__lg,
.label.p-top__lg,
.caption.p-top__lg,
.overline.p-top__lg,
.display1__bold.p-top__lg,
.display2__bold.p-top__lg,
.title1__bold.p-top__lg,
.title2__bold.p-top__lg,
.title3__bold.p-top__lg,
.heading__bold.p-top__lg,
.subheading__bold.p-top__lg,
.body__bold.p-top__lg,
.callout__bold.p-top__lg,
.label__bold.p-top__lg,
.caption__bold.p-top__lg,
.overline__bold.p-top__lg {
padding-top: var(--lg);
}
.display1.p-top__xl,
.display2.p-top__xl,
.title1.p-top__xl,
.title2.p-top__xl,
.title3.p-top__xl,
.heading.p-top__xl,
.subheading.p-top__xl,
.body.p-top__xl,
.callout.p-top__xl,
.label.p-top__xl,
.caption.p-top__xl,
.overline.p-top__xl,
.display1__bold.p-top__xl,
.display2__bold.p-top__xl,
.title1__bold.p-top__xl,
.title2__bold.p-top__xl,
.title3__bold.p-top__xl,
.heading__bold.p-top__xl,
.subheading__bold.p-top__xl,
.body__bold.p-top__xl,
.callout__bold.p-top__xl,
.label__bold.p-top__xl,
.caption__bold.p-top__xl,
.overline__bold.p-top__xl {
padding-top: var(--xl);
}
.display1.p-top__2xl,
.display2.p-top__2xl,
.title1.p-top__2xl,
.title2.p-top__2xl,
.title3.p-top__2xl,
.heading.p-top__2xl,
.subheading.p-top__2xl,
.body.p-top__2xl,
.callout.p-top__2xl,
.label.p-top__2xl,
.caption.p-top__2xl,
.overline.p-top__2xl,
.display1__bold.p-top__2xl,
.display2__bold.p-top__2xl,
.title1__bold.p-top__2xl,
.title2__bold.p-top__2xl,
.title3__bold.p-top__2xl,
.heading__bold.p-top__2xl,
.subheading__bold.p-top__2xl,
.body__bold.p-top__2xl,
.callout__bold.p-top__2xl,
.label__bold.p-top__2xl,
.caption__bold.p-top__2xl,
.overline__bold.p-top__2xl {
padding-top: var(--2xl);
}
.display1.p-right__2xs,
.display2.p-right__2xs,
.title1.p-right__2xs,
.title2.p-right__2xs,
.title3.p-right__2xs,
.heading.p-right__2xs,
.subheading.p-right__2xs,
.body.p-right__2xs,
.callout.p-right__2xs,
.label.p-right__2xs,
.caption.p-right__2xs,
.overline.p-right__2xs,
.display1__bold.p-right__2xs,
.display2__bold.p-right__2xs,
.title1__bold.p-right__2xs,
.title2__bold.p-right__2xs,
.title3__bold.p-right__2xs,
.heading__bold.p-right__2xs,
.subheading__bold.p-right__2xs,
.body__bold.p-right__2xs,
.callout__bold.p-right__2xs,
.label__bold.p-right__2xs,
.caption__bold.p-right__2xs,
.overline__bold.p-right__2xs {
padding-right: var(--2xs);
}
.display1.p-right__xs,
.display2.p-right__xs,
.title1.p-right__xs,
.title2.p-right__xs,
.title3.p-right__xs,
.heading.p-right__xs,
.subheading.p-right__xs,
.body.p-right__xs,
.callout.p-right__xs,
.label.p-right__xs,
.caption.p-right__xs,
.overline.p-right__xs,
.display1__bold.p-right__xs,
.display2__bold.p-right__xs,
.title1__bold.p-right__xs,
.title2__bold.p-right__xs,
.title3__bold.p-right__xs,
.heading__bold.p-right__xs,
.subheading__bold.p-right__xs,
.body__bold.p-right__xs,
.callout__bold.p-right__xs,
.label__bold.p-right__xs,
.caption__bold.p-right__xs,
.overline__bold.p-right__xs {
padding-right: var(--xs);
}
.display1.p-right__sm,
.display2.p-right__sm,
.title1.p-right__sm,
.title2.p-right__sm,
.title3.p-right__sm,
.heading.p-right__sm,
.subheading.p-right__sm,
.body.p-right__sm,
.callout.p-right__sm,
.label.p-right__sm,
.caption.p-right__sm,
.overline.p-right__sm,
.display1__bold.p-right__sm,
.display2__bold.p-right__sm,
.title1__bold.p-right__sm,
.title2__bold.p-right__sm,
.title3__bold.p-right__sm,
.heading__bold.p-right__sm,
.subheading__bold.p-right__sm,
.body__bold.p-right__sm,
.callout__bold.p-right__sm,
.label__bold.p-right__sm,
.caption__bold.p-right__sm,
.overline__bold.p-right__sm {
padding-right: var(--sm);
}
/* Repeat for other margin directions and sizes */
.display1.p-right__md,
.display2.p-right__md,
.title1.p-right__md,
.title2.p-right__md,
.title3.p-right__md,
.heading.p-right__md,
.subheading.p-right__md,
.body.p-right__md,
.callout.p-right__md,
.label.p-right__md,
.caption.p-right__md,
.overline.p-right__md,
.display1__bold.p-right__md,
.display2__bold.p-right__md,
.title1__bold.p-right__md,
.title2__bold.p-right__md,
.title3__bold.p-right__md,
.heading__bold.p-right__md,
.subheading__bold.p-right__md,
.body__bold.p-right__md,
.callout__bold.p-right__md,
.label__bold.p-right__md,
.caption__bold.p-right__md,
.overline__bold.p-right__md {
padding-right: var(--md);
}
.display1.p-right__lg,
.display2.p-right__lg,
.title1.p-right__lg,
.title2.p-right__lg,
.title3.p-right__lg,
.heading.p-right__lg,
.subheading.p-right__lg,
.body.p-right__lg,
.callout.p-right__lg,
.label.p-right__lg,
.caption.p-right__lg,
.overline.p-right__lg,
.display1__bold.p-right__lg,
.display2__bold.p-right__lg,
.title1__bold.p-right__lg,
.title2__bold.p-right__lg,
.title3__bold.p-right__lg,
.heading__bold.p-right__lg,
.subheading__bold.p-right__lg,
.body__bold.p-right__lg,
.callout__bold.p-right__lg,
.label__bold.p-right__lg,
.caption__bold.p-right__lg,
.overline__bold.p-right__lg {
padding-right: var(--lg);
}
.display1.p-right__xl,
.display2.p-right__xl,
.title1.p-right__xl,
.title2.p-right__xl,
.title3.p-right__xl,
.heading.p-right__xl,
.subheading.p-right__xl,
.body.p-right__xl,
.callout.p-right__xl,
.label.p-right__xl,
.caption.p-right__xl,
.overline.p-right__xl,
.display1__bold.p-right__xl,
.display2__bold.p-right__xl,
.title1__bold.p-right__xl,
.title2__bold.p-right__xl,
.title3__bold.p-right__xl,
.heading__bold.p-right__xl,
.subheading__bold.p-right__xl,
.body__bold.p-right__xl,
.callout__bold.p-right__xl,
.label__bold.p-right__xl,
.caption__bold.p-right__xl,
.overline__bold.p-right__xl {
padding-right: var(--xl);
}
.display1.p-right__2xl,
.display2.p-right__2xl,
.title1.p-right__2xl,
.title2.p-right__2xl,
.title3.p-right__2xl,
.heading.p-right__2xl,
.subheading.p-right__2xl,
.body.p-right__2xl,
.callout.p-right__2xl,
.label.p-right__2xl,
.caption.p-right__2xl,
.overline.p-right__2xl,
.display1__bold.p-right__2xl,
.display2__bold.p-right__2xl,
.title1__bold.p-right__2xl,
.title2__bold.p-right__2xl,
.title3__bold.p-right__2xl,
.heading__bold.p-right__2xl,
.subheading__bold.p-right__2xl,
.body__bold.p-right__2xl,
.callout__bold.p-right__2xl,
.label__bold.p-right__2xl,
.caption__bold.p-right__2xl,
.overline__bold.p-right__2xl {
padding-right: var(--2xl);
}
.display1.p-bottom__2xs,
.display2.p-bottom__2xs,
.title1.p-bottom__2xs,
.title2.p-bottom__2xs,
.title3.p-bottom__2xs,
.heading.p-bottom__2xs,
.subheading.p-bottom__2xs,
.body.p-bottom__2xs,
.callout.p-bottom__2xs,
.label.p-bottom__2xs,
.caption.p-bottom__2xs,
.overline.p-bottom__2xs,
.display1__bold.p-bottom__2xs,
.display2__bold.p-bottom__2xs,
.title1__bold.p-bottom__2xs,
.title2__bold.p-bottom__2xs,
.title3__bold.p-bottom__2xs,
.heading__bold.p-bottom__2xs,
.subheading__bold.p-bottom__2xs,
.body__bold.p-bottom__2xs,
.callout__bold.p-bottom__2xs,
.label__bold.p-bottom__2xs,
.caption__bold.p-bottom__2xs,
.overline__bold.p-bottom__2xs {
padding-bottom: var(--2xs);
}
.display1.p-bottom__xs,
.display2.p-bottom__xs,
.title1.p-bottom__xs,
.title2.p-bottom__xs,
.title3.p-bottom__xs,
.heading.p-bottom__xs,
.subheading.p-bottom__xs,
.body.p-bottom__xs,
.callout.p-bottom__xs,
.label.p-bottom__xs,
.caption.p-bottom__xs,
.overline.p-bottom__xs,
.display1__bold.p-bottom__xs,
.display2__bold.p-bottom__xs,
.title1__bold.p-bottom__xs,
.title2__bold.p-bottom__xs,
.title3__bold.p-bottom__xs,
.heading__bold.p-bottom__xs,
.subheading__bold.p-bottom__xs,
.body__bold.p-bottom__xs,
.callout__bold.p-bottom__xs,
.label__bold.p-bottom__xs,
.caption__bold.p-bottom__xs,
.overline__bold.p-bottom__xs {
padding-bottom: var(--xs);
}
.display1.p-bottom__sm,
.display2.p-bottom__sm,
.title1.p-bottom__sm,
.title2.p-bottom__sm,
.title3.p-bottom__sm,
.heading.p-bottom__sm,
.subheading.p-bottom__sm,
.body.p-bottom__sm,
.callout.p-bottom__sm,
.label.p-bottom__sm,
.caption.p-bottom__sm,
.overline.p-bottom__sm,
.display1__bold.p-bottom__sm,
.display2__bold.p-bottom__sm,
.title1__bold.p-bottom__sm,
.title2__bold.p-bottom__sm,
.title3__bold.p-bottom__sm,
.heading__bold.p-bottom__sm,
.subheading__bold.p-bottom__sm,
.body__bold.p-bottom__sm,
.callout__bold.p-bottom__sm,
.label__bold.p-bottom__sm,
.caption__bold.p-bottom__sm,
.overline__bold.p-bottom__sm {
padding-bottom: var(--sm);
}
/* Repeat for other margin directions and sizes */
.display1.p-bottom__md,
.display2.p-bottom__md,
.title1.p-bottom__md,
.title2.p-bottom__md,
.title3.p-bottom__md,
.heading.p-bottom__md,
.subheading.p-bottom__md,
.body.p-bottom__md,
.callout.p-bottom__md,
.label.p-bottom__md,
.caption.p-bottom__md,
.overline.p-bottom__md,
.display1__bold.p-bottom__md,
.display2__bold.p-bottom__md,
.title1__bold.p-bottom__md,
.title2__bold.p-bottom__md,
.title3__bold.p-bottom__md,
.heading__bold.p-bottom__md,
.subheading__bold.p-bottom__md,
.body__bold.p-bottom__md,
.callout__bold.p-bottom__md,
.label__bold.p-bottom__md,
.caption__bold.p-bottom__md,
.overline__bold.p-bottom__md {
padding-bottom: var(--md);
}
.display1.p-bottom__lg,
.display2.p-bottom__lg,
.title1.p-bottom__lg,
.title2.p-bottom__lg,
.title3.p-bottom__lg,
.heading.p-bottom__lg,
.subheading.p-bottom__lg,
.body.p-bottom__lg,
.callout.p-bottom__lg,
.label.p-bottom__lg,
.caption.p-bottom__lg,
.overline.p-bottom__lg,
.display1__bold.p-bottom__lg,
.display2__bold.p-bottom__lg,
.title1__bold.p-bottom__lg,
.title2__bold.p-bottom__lg,
.title3__bold.p-bottom__lg,
.heading__bold.p-bottom__lg,
.subheading__bold.p-bottom__lg,
.body__bold.p-bottom__lg,
.callout__bold.p-bottom__lg,
.label__bold.p-bottom__lg,
.caption__bold.p-bottom__lg,
.overline__bold.p-bottom__lg {
padding-bottom: var(--lg);
}
.display1.p-bottom__xl,
.display2.p-bottom__xl,
.title1.p-bottom__xl,
.title2.p-bottom__xl,
.title3.p-bottom__xl,
.heading.p-bottom__xl,
.subheading.p-bottom__xl,
.body.p-bottom__xl,
.callout.p-bottom__xl,
.label.p-bottom__xl,
.caption.p-bottom__xl,
.overline.p-bottom__xl,
.display1__bold.p-bottom__xl,
.display2__bold.p-bottom__xl,
.title1__bold.p-bottom__xl,
.title2__bold.p-bottom__xl,
.title3__bold.p-bottom__xl,
.heading__bold.p-bottom__xl,
.subheading__bold.p-bottom__xl,
.body__bold.p-bottom__xl,
.callout__bold.p-bottom__xl,
.label__bold.p-bottom__xl,
.caption__bold.p-bottom__xl,
.overline__bold.p-bottom__xl {
padding-bottom: var(--xl);
}
.display1.p-bottom__2xl,
.display2.p-bottom__2xl,
.title1.p-bottom__2xl,
.title2.p-bottom__2xl,
.title3.p-bottom__2xl,
.heading.p-bottom__2xl,
.subheading.p-bottom__2xl,
.body.p-bottom__2xl,
.callout.p-bottom__2xl,
.label.p-bottom__2xl,
.caption.p-bottom__2xl,
.overline.p-bottom__2xl,
.display1__bold.p-bottom__2xl,
.display2__bold.p-bottom__2xl,
.title1__bold.p-bottom__2xl,
.title2__bold.p-bottom__2xl,
.title3__bold.p-bottom__2xl,
.heading__bold.p-bottom__2xl,
.subheading__bold.p-bottom__2xl,
.body__bold.p-bottom__2xl,
.callout__bold.p-bottom__2xl,
.label__bold.p-bottom__2xl,
.caption__bold.p-bottom__2xl,
.overline__bold.p-bottom__2xl {
padding-bottom: var(--2xl);
}
.display1.p-left__2xs,
.display2.p-left__2xs,
.title1.p-left__2xs,
.title2.p-left__2xs,
.title3.p-left__2xs,
.heading.p-left__2xs,
.subheading.p-left__2xs,
.body.p-left__2xs,
.callout.p-left__2xs,
.label.p-left__2xs,
.caption.p-left__2xs,
.overline.p-left__2xs,
.display1__bold.p-left__2xs,
.display2__bold.p-left__2xs,
.title1__bold.p-left__2xs,
.title2__bold.p-left__2xs,
.title3__bold.p-left__2xs,
.heading__bold.p-left__2xs,
.subheading__bold.p-left__2xs,
.body__bold.p-left__2xs,
.callout__bold.p-left__2xs,
.label__bold.p-left__2xs,
.caption__bold.p-left__2xs,
.overline__bold.p-left__2xs {
padding-left: var(--2xs);
}
.display1.p-left__xs,
.display2.p-left__xs,
.title1.p-left__xs,
.title2.p-left__xs,
.title3.p-left__xs,
.heading.p-left__xs,
.subheading.p-left__xs,
.body.p-left__xs,
.callout.p-left__xs,
.label.p-left__xs,
.caption.p-left__xs,
.overline.p-left__xs,
.display1__bold.p-left__xs,
.display2__bold.p-left__xs,
.title1__bold.p-left__xs,
.title2__bold.p-left__xs,
.title3__bold.p-left__xs,
.heading__bold.p-left__xs,
.subheading__bold.p-left__xs,
.body__bold.p-left__xs,
.callout__bold.p-left__xs,
.label__bold.p-left__xs,
.caption__bold.p-left__xs,
.overline__bold.p-left__xs {
padding-left: var(--xs);
}
.display1.p-left__sm,
.display2.p-left__sm,
.title1.p-left__sm,
.title2.p-left__sm,
.title3.p-left__sm,
.heading.p-left__sm,
.subheading.p-left__sm,
.body.p-left__sm,
.callout.p-left__sm,
.label.p-left__sm,
.caption.p-left__sm,
.overline.p-left__sm,
.display1__bold.p-left__sm,
.display2__bold.p-left__sm,
.title1__bold.p-left__sm,
.title2__bold.p-left__sm,
.title3__bold.p-left__sm,
.heading__bold.p-left__sm,
.subheading__bold.p-left__sm,
.body__bold.p-left__sm,
.callout__bold.p-left__sm,
.label__bold.p-left__sm,
.caption__bold.p-left__sm,
.overline__bold.p-left__sm {
padding-left: var(--sm);
}
/* Repeat for other margin directions and sizes */
.display1.p-left__md,
.display2.p-left__md,
.title1.p-left__md,
.title2.p-left__md,
.title3.p-left__md,
.heading.p-left__md,
.subheading.p-left__md,
.body.p-left__md,
.callout.p-left__md,
.label.p-left__md,
.caption.p-left__md,
.overline.p-left__md,
.display1__bold.p-left__md,
.display2__bold.p-left__md,
.title1__bold.p-left__md,
.title2__bold.p-left__md,
.title3__bold.p-left__md,
.heading__bold.p-left__md,
.subheading__bold.p-left__md,
.body__bold.p-left__md,
.callout__bold.p-left__md,
.label__bold.p-left__md,
.caption__bold.p-left__md,
.overline__bold.p-left__md {
padding-left: var(--md);
}
.display1.p-left__lg,
.display2.p-left__lg,
.title1.p-left__lg,
.title2.p-left__lg,
.title3.p-left__lg,
.heading.p-left__lg,
.subheading.p-left__lg,
.body.p-left__lg,
.callout.p-left__lg,
.label.p-left__lg,
.caption.p-left__lg,
.overline.p-left__lg,
.display1__bold.p-left__lg,
.display2__bold.p-left__lg,
.title1__bold.p-left__lg,
.title2__bold.p-left__lg,
.title3__bold.p-left__lg,
.heading__bold.p-left__lg,
.subheading__bold.p-left__lg,
.body__bold.p-left__lg,
.callout__bold.p-left__lg,
.label__bold.p-left__lg,
.caption__bold.p-left__lg,
.overline__bold.p-left__lg {
padding-left: var(--lg);
}
.display1.p-left__xl,
.display2.p-left__xl,
.title1.p-left__xl,
.title2.p-left__xl,
.title3.p-left__xl,
.heading.p-left__xl,
.subheading.p-left__xl,
.body.p-left__xl,
.callout.p-left__xl,
.label.p-left__xl,
.caption.p-left__xl,
.overline.p-left__xl,
.display1__bold.p-left__xl,
.display2__bold.p-left__xl,
.title1__bold.p-left__xl,
.title2__bold.p-left__xl,
.title3__bold.p-left__xl,
.heading__bold.p-left__xl,
.subheading__bold.p-left__xl,
.body__bold.p-left__xl,
.callout__bold.p-left__xl,
.label__bold.p-left__xl,
.caption__bold.p-left__xl,
.overline__bold.p-left__xl {
padding-left: var(--xl);
}
.display1.p-left__2xl,
.display2.p-left__2xl,
.title1.p-left__2xl,
.title2.p-left__2xl,
.title3.p-left__2xl,
.heading.p-left__2xl,
.subheading.p-left__2xl,
.body.p-left__2xl,
.callout.p-left__2xl,
.label.p-left__2xl,
.caption.p-left__2xl,
.overline.p-left__2xl,
.display1__bold.p-left__2xl,
.display2__bold.p-left__2xl,
.title1__bold.p-left__2xl,
.title2__bold.p-left__2xl,
.title3__bold.p-left__2xl,
.heading__bold.p-left__2xl,
.subheading__bold.p-left__2xl,
.body__bold.p-left__2xl,
.callout__bold.p-left__2xl,
.label__bold.p-left__2xl,
.caption__bold.p-left__2xl,
.overline__bold.p-left__2xl {
padding-left: var(--2xl);
}