container__widest
container__wide
container_default
container__narrow
container__narrowest
section__mostPadding
section__morePadding
section__default
section__lessPadding
section__leastPadding
Display 1
Display1
Display2
TitleA
TitleB
TitleC
Heading
Subheading
Body
Callout
Label
Caption
overline
Spacing

In LiftKit, spacing uses utility classes to give designers the flexibility to assign spacing based on each use case. By leveraging balanced scaling derived from golden ratio coefficients, the spacing system guarantees that every element, gap, margin, or padding on a page is truly proportional to every other.

Margin

Margins are by far the most heavily-used spacing class in LiftKit. They range from __xs to__xxl. There is no xxs because, at that scale, the difference is visually indistinguishable.

margin-top

m-top__xs
m-top__s
m-top__m
m-top__l
m-top__xl
m-top__xxl

margin-right

m-right__xs
m-right__s
m-right__m
m-right__l
m-right__xl
m-right__xxl

margin-bottom

m-bottom__xs
m-bottom__s
m-bottom__m
m-bottom__l
m-bottom__xl
m-bottom__xxl

margin-left

m-left__xs
m-left__s
m-left__m
m-left__l
m-left__xl
m-left__xxl

Padding

padding-top

pad-top__xs
pad-top__s
pad-top__m
pad-top__l
pad-top__xl
pad-top__xxl

padding-right

pad-right__xs
pad-right__s
pad-right__m
pad-right__l
pad-right__xl
pad-right__xxl

padding-bottom

pad-bottom__xs
pad-bottom__s
pad-bottom__m
pad-bottom__l
pad-bottom__xl
pad-bottom__xxl

padding-left

pad-left__xs
pad-left__s
pad-left__m
pad-left__l
pad-left__xl
pad-left__xxl

Gaps

Gaps can be applied as combo classes to elements with display set to either flex or grid.

gap-xs
gap-s
gap-m
gap-l
gap-xl
gap-xxl