menu_open

An open-source design system with built-in-beauty.

Webflow 'w' Logo
Webflow
Clone on Marketplace

open_in_new

article

CSS Docs
Learn LiftKit CSS

open_in_new

Figma 'F' logo
Figma
Clone on Community

open_in_new

Github mark icon
GitHub
Clone on GitHub

open_in_new

Utility Classes

Elements

menu_open
Close Menu
Color

Simplified Palette

Best for marketers

Brand

Your official brand colors
expand_more
Key Colors
Main swatches
Containers
Soft variants of key colors
Primary
Your main brand color

bg-light__primary

bg-light__primaryContainer

Secondary
Desaturated primary

bg-light__secondary

bg-light__secondaryContainer

Tertiary
Your accent color

bg-light__tertiary

bg-light__tertiaryContainer

Semantic

Colors for alerts, warnings, notifications, and success messages
expand_more
Key Colors
Main swatches
Containers
Soft variants of key colors
Error
High severity

bg-light__error

bg-light__errorContainer

Warning
Mid severity

bg-light__warning

bg-light__warningContainer

Success
Good news

bg-light__success

bg-light__successContainer

Info
Neutral notifications

bg-light__info

bg-light__infoContainer

Surfaces

Backgrounds, cards, and neutral containers
expand_more
Key Colors
Main swatches
"On" Colors
Color of text and icons that are literally "on" the key color
Background
High severity

bg-light__background

bg-light__onBackground

Surface
Mid severity

bg-light__surface

bg-light__onSurface

Surface Container
Neutral notifications

bg-light__surfaceContainer

bg-light__onSurface

Surface Variant
Good news

bg-light__surfaceVariant

bg-light__onSurfaceVariant

Outlines

For borders and dividers
expand_more
Outline
Use for borders on containers

bg-light__outline

Outline Variant
Use for lines, dividers, and low-emphasis outlines

bg-light__outlineVariant

Full Palette

Best for product designers (and masochists)

Light Mode

Brand

Your official brand colors
expand_more
Default
Changes between light and dark modes
Fixed
Same across light and dark modes
Primary
Your main brand color

bg-light__primary

bg-light__onPrimary

bg-light__primaryContainer

bg-light__onPrimaryContainer

bg-light__primaryFixed

bg-light__primaryFixedDim

bg-light__onPrimaryFixed

bg-light__onPrimaryFixedVariant

Secondary
Desaturated primary

bg-light__secondary

bg-light__onSecondary

bg-light__secondaryContainer

bg-light__onSecondaryContainer

bg-light__secondaryFixed

bg-light__secondaryFixedDim

bg-light__onSecondaryFixed

bg-light__onSecondaryFixedVariant

Tertiary
Your accent color

bg-light__tertiary

bg-light__onTertiary

bg-light__tertiaryContainer

bg-light__onTertiaryContainer

bg-light__tertiaryFixed

bg-light__tertiaryFixedDim

bg-light__onTertiaryFixed

bg-light__onTertiaryFixedVariant

Semantic

Colors for alerts, warnings, notifications, and success messages
expand_more
Default
Changes between light and dark modes
Error
High severity

bg-light__error

bg-light__onError

bg-light__errorContainer

bg-light__onErrorContainer

Warning
Mid severity

bg-light__warning

bg-light__onWarning

bg-light__warningContainer

bg-light__onWarningContainer

Success
Good news

bg-light__success

bg-light__onSuccess

bg-light__successContainer

bg-light__onSuccessContainer

Info
Neutral notifications

bg-light__info

bg-light__onInfo

bg-light__infoContainer

bg-light__onInfoContainer

Surfaces

Backgrounds, cards, and neutral containers
expand_more
Key Colors
Main swatches
"On" Colors
For text, icons literally "on" the key color
Background
High severity

bg-light__background

bg-light__onBackground

Surface
Mid severity

bg-light__surface

bg-light__onSurface

Surface Variant
Good news

bg-light__surfaceVariant

bg-light__onSurfaceVariant

Surface Dim
Good news

bg-light__surfaceDim

Surface Bright
Good news

bg-light__surfaceBright

Surface Containers

Ideal for nested containers
expand_more
Key Colors
Main swatches
Surface Container Lowest
Lowest emphasis

bg-light__surfaceContainerLowest

Surface Container Low
Low emphasis

bg-light__surfaceContainerLow

Surface Container
Medium emphasis

bg-light__surfaceContainer

Surface Container High
High emphasis

bg-light__surfaceContainerHigh

Surface Container Highest
Highest emphasis

bg-light__surfaceContainerHighest

Inverse Surfaces

For toast messages, mostly
expand_more
Key Colors
Main swatches
Inverse Surface
The opposite color mode's "surface" value

bg-light__inverseSurface

Inverse On Surface
Text, icons on Inverse Surface

bg-light__inverseOnSurface

Inverse Primary
For clickable elements against Inverse Surface

bg-light__inversePrimary

Miscellaneous

Outlines, shadow, and scrim
expand_more
Outline
Use for borders on containers

bg-light__outline

Outline Variant
Use for lines, dividers, and low-emphasis outlines

bg-light__outlineVariant

Shadow
Self-explanatory

bg-light__shadow

Scrim
The transparent background used when you "dim the lights"

bg-light__scrim

Dark Mode

Brand

Your official brand colors
expand_more
Default
Changes between light and dark modes
Fixed
Same across light and dark modes
Primary
Your main brand color

bg-dark__primary

bg-dark__onPrimary

bg-dark__primaryContainer

bg-dark__onPrimaryContainer

bg-dark__primaryFixed

bg-dark__primaryFixedDim

bg-dark__onPrimaryFixed

bg-dark__onPrimaryFixedVariant

Secondary
Desaturated primary

bg-dark__secondary

bg-dark__onSecondary

bg-dark__secondaryContainer

bg-dark__onSecondaryContainer

bg-dark__secondaryFixed

bg-dark__secondaryFixedDim

bg-dark__onSecondaryFixed

bg-dark__onSecondaryFixedVariant

Tertiary
Your accent color

bg-dark__tertiary

bg-dark__onTertiary

bg-dark__tertiaryContainer

bg-dark__onTertiaryContainer

bg-dark__tertiaryFixed

bg-dark__tertiaryFixedDim

bg-dark__onTertiaryFixed

bg-dark__onTertiaryFixedVariant

Semantic

Colors for alerts, warnings, notifications, and success messages
expand_more
Default
Changes between light and dark modes
Error
High severity

bg-dark__error

bg-dark__onError

bg-dark__errorContainer

bg-dark__onErrorContainer

Warning
Mid severity

bg-dark__warning

bg-dark__onWarning

bg-dark__warningContainer

bg-dark__onWarningContainer

Success
Good news

bg-dark__success

bg-dark__successContainer

bg-dark__onSuccess

bg-dark__onSuccessContainer

Info
Neutral notifications

bg-dark__info

bg-dark__onInfo

bg-dark__infoContainer

bg-dark__onInfoContainer

Surfaces

Backgrounds, cards, and neutral containers
expand_more
Key Colors
Main swatches
"On" Colors
For text, icons literally "on" the key color
Background
High severity

bg-dark__background

bg-dark__onBackground

Surface
Mid severity

bg-dark__surface

bg-dark__onSurface

Surface Variant
Good news

bg-dark__surfaceVariant

bg-dark__onSurfaceVariant

Surface Dim
Good news

bg-dark__surfaceDim

Surface Bright
Good news

bg-dark__surfaceBright

Surface Containers

Ideal for nested containers
expand_more
Key Colors
Main swatches
Surface Container Lowest
Lowest emphasis

bg-dark__surfaceContainerLowest

Surface Container Low
Low emphasis

bg-dark__surfaceContainerLow

Surface Container
Medium emphasis

bg-dark__surfaceContainer

Surface Container High
High emphasis

bg-dark__surfaceContainerHigh

Surface Container Highest
Highest emphasis

bg-dark__surfaceContainerHighest

Inverse Surfaces

For toast messages, mostly
expand_more
Key Colors
Main swatches
Inverse Surface
The opposite color mode's "surface" value

bg-dark__inverseSurface

Inverse On Surface
Text, icons on Inverse Surface

bg-dark__inverseOnSurface

Inverse Primary
For clickable elements against Inverse Surface

bg-dark__inversePrimary

Miscellaneous

Outlines, shadow, and scrim
expand_more
Outline
Use for borders on containers

bg-dark__outline

Outline Variant
Use for lines, dividers, and low-emphasis outlines

bg-dark__outlineVariant

Shadow
Self-explanatory

bg-dark__shadow

Scrim
The transparent background used when you "dim the lights"

bg-dark__scrim

Text Color

Text color requires less variation for most use cases, so the only ones pre-bundled with LiftKit are the following. Feel free to use the provided class naming template to create your own.

Primary
Secondary
Info
Success
Warning
Error
Outline
On Surface Variant
Inverse Primary
Inverse On Surface
Typography

Standard Styles

The standard styles use light-to-medium weights (except for Heading) and give interfaces a light, airy feel.

Display 1
Display 2
Title A
Title B
Title C
Heading
Subheading
Body
Callout
Label
Caption
Overline
StyleWeightSize (em)Line HeightLetter Spacing (em)
Display 14004.2351.129-0.022
Display 24002.6181.272-0.022
Title A4002.0581.272-0.022
Title B4001.6181.272-0.02
Title C4001.2721.272-0.017
Heading6001.1291.272-0.014
Subheading4000.8851.272-0.007
Body40011.618-0.011
Callout4000.9431.272-0.009
Label5000.8351.272-0.004
Caption4000.7861.272-0.007
Overline4000.7861.2720.0618

Bold

Display1
Display2
TitleA
TitleB
TitleC
Heading
Subheading
Body
Callout
Label
Caption
overline
StyleWeightSize (em)Line Height (unitless)Letter Spacing (em)
Display 17004.2351.129-0.022
Display 27002.6181.272-0.022
Title A7002.0581.272-0.022
Title B6001.6181.272-0.02
Title C6001.2721.272-0.017
Heading7001.1291.272-0.014
Subheading6000.8851.272-0.007
Body60011.618-0.011
Callout6000.9431.272-0.009
Label7000.8351.272-0.004
Caption6000.7861.272-0.007
Overline6000.7861.2720.0618

Rich Text

Rich text applies the styles above to the corresponding HTML tags for each.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Figure caption

Text Alignment Utility Classes

These utility classes control the padding for when there's a start or end icon, or both.

text-align--left
text-align--center
text-align--right
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
Grid Templates

Every grid has class "grid." Combo classes indicate column count. Rows generate automatically.

Utility Classes

Every grid has class "grid." Combo classes indicate column count. Rows generate automatically.

Template

[Root Style] + [Column Count]

CSS Example

.grid

.col__3

Example appearance in Webflow

Examples

.grid
.grid
.col__1
.grid
.col__2
.grid
.col__3
.grid
.col__4
.grid
.col__5
.grid
.col__6
.grid
.col__7
.grid
.col__8
.grid
.col__9
.grid
.col__10
.grid
.col__11
.grid
.col__12
Sizes

Purpose

These are meant for niche use cases. It's often used for setting profile photos, avatars, and other circle-based image wraps where you must declare a fixed width or height in order for your desired aspect ratio to work.

Widths

.w-xxs

.w-xs

.w-s

.w-m

.w-l

.w-xl

.w-xxl

.w-xxxl

Height

.h-xs

.h-xs

.h-s

.h-m

.h-l

.h-xl

.h-xxl

.h-xxxl

Border Radius

Root Classes

xxs
xs
s
m
l
xl
xxl
xxxl
circle

Visual Preview

xxs
xs
s
m
l
xl
xxl
xxxl
circle
Aspect Ratios

Common

.aspect__16x9
.aspect__4x3
.aspect__3x2
.aspect__1x1
.aspect__16x9
Shadows

Common

.shadow1
.shadow2
.shadow3
.shadow4
.shadow5
Layout Blocks

Containers

Used to set maximum width within a section.
.container__widest
max-width: none;
.container__wide
max-width: 1800px;
.container__default
max-width: 1600px;
.container__narrow
max-width: 1257px;
.container__narrowest
max-width: 988px;

Sections

Used to set vertical padding between sections.
section__mostPadding
section__morePadding
section__default
section__lessPadding
section__leastPadding
Display
TODO: add 'none'
.display__block
.display__flex-h
.display__flex-v
.display__grid
Cards

Root Classes

Card

.card

Outline card

.card__outline

Clickable Card

.card__link

Clickable Outline Card

.card__outline__link

Utility Classes

Template

[Card Style] + [Scale Factor] + [Background Color]

CSS Example

.card

.scaleFactor__heading

.bg__infoContainer

Example appearance in Webflow

Glossary

TermDefinitionExamples
Card StyleWhether the card uses the "default" or "outline" style. Default does not require a modifier, so you can simply use .card
  • .card
  • .card__outline
Scale FactorThe largest font size contained within the card. LiftKit uses this value to provide optical corrections to card padding symmetry.
  • scaleFactor__heading
  • scaleFactor__titleB
Background ColorThe fill color of the card. Will also set the corresponding text color. See Color for list of options.
  • .bg-light__surface
  • .bg-light__inverseSurface

Example Implementations

Default Cards

Scaled for each type style
expand_more

Display1

.card.scaleFactor__display1

Display2

.card.scaleFactor__display2

TitleA

.card.scaleFactor__titleA

TitleB

.card.scaleFactor__titleB

TitleC

.card.scaleFactor__titleC

Heading

.card.scaleFactor__heading

Subheading

.card.scaleFactor__subheading

Body

.card.scaleFactor__body

Callout

.card.scaleFactor__callout

Label

.card.scaleFactor__label

Caption

.card.scaleFactor__caption

Overline

.card.scaleFactor__overline

Outlined Cards

Scaled for each type style
expand_more

Display1

.card.scaleFactor__display1

Display2

.card.scaleFactor__display2

TitleA

.card.scaleFactor__titleA

TitleB

.card.scaleFactor__titleB

TitleC

.card.scaleFactor__titleC

Heading

.card.scaleFactor__heading

Subheading

.card.scaleFactor__subheading

Body

.card.scaleFactor__body

Callout

.card.scaleFactor__callout

Label

.card.scaleFactor__label

Caption

.card.scaleFactor__caption

Overline

.card.scaleFactor__overline

Default Link Cards

Interactive with built-in state layers
expand_more

Display1

.card.scaleFactor__display1

Display2

.card.scaleFactor__display2

TitleA

.card.scaleFactor__titleA

TitleB

.card.scaleFactor__titleB

TitleC

.card.scaleFactor__titleC

Heading

.card.scaleFactor__heading

Subheading

.card.scaleFactor__subheading

Body

.card.scaleFactor__body

Callout

.card.scaleFactor__callout

Label

.card.scaleFactor__label

Caption

.card.scaleFactor__caption

Overline

.card.scaleFactor__overline

Outlined Link Cards

Interactive with built-in state layers
expand_more

Display1

.card.scaleFactor__display1

Display2

.card.scaleFactor__display2

TitleA

.card.scaleFactor__titleA

TitleB

.card.scaleFactor__titleB

TitleC

.card.scaleFactor__titleC

Heading

.card.scaleFactor__heading

Subheading

.card.scaleFactor__subheading

Body

.card.scaleFactor__body

Callout

.card.scaleFactor__callout

Label

.card.scaleFactor__label

Caption

.card.scaleFactor__caption

Overline

.card.scaleFactor__overline

Components

These components deliberately have more elements than necessary for most use cases.This was done to make them faster to implement. It's quicker to delete elements you don't need than to drag in new ones. So, the recommended use for these is to quickly place an instance and then immediately detach it. From there, you can delete elements as needed.

Default Card

.card

.scaleFactor__heading

.bg-light__surfaceContainerLowest

Quote highlight should go up on top

Author Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
arrow_forward
Label
arrow_forward
arrow_forward
Label
arrow_forward
Default Card (Link)

.card__link

.scaleFactor__heading

.bg-light__surfaceContainerLowest

Card Heading

Card Subheading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
arrow_forward
Label
arrow_forward
arrow_forward
Label
arrow_forward
Outlined Card

Card Heading

Card Subheading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
arrow_forward
Label
arrow_forward
arrow_forward
Label
arrow_forward
Outlined Card (Link)

.card__outline__link

.scaleFactor__heading

Quote highlight should go up on top

Author Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
arrow_forward
Label
arrow_forward
arrow_forward
Label
arrow_forward
Quote Card

.card__quote

.scaleFactor__heading

Quote highlight should go up on top

Author Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Badges

Utility Classes

Template

[Root Style] + [Background Color]

Example appearance in Webflow

Components

Default
Hue Group
Default
Primary
Secondary
Tertiary
Error
Warning
Success
Info
Key Colors
public
public
public
public
public
public
public
public
Containers
n/a
public
public
public
public
public
public
public
Fixed
n/a
Size
public
public
public
n/a
n/a
n/a
n/a
Fixed Dim
n/a
public
public
public
n/a
n/a
n/a
n/a
On Fixed
n/a
public
public
public
n/a
n/a
n/a
n/a
On Fixed Variant
n/a
public
public
public
n/a
n/a
n/a
n/a
Large
Default
Primary
Secondary
Tertiary
Error
Warning
Success
Info
Key Colors
public
public
public
public
public
public
public
public
Containers
n/a
public
public
public
public
public
public
public
Fixed
n/a
public
public
public
Hue Group
Variant
n/a
n/a
n/a
n/a
Fixed Dim
n/a
public
public
public
n/a
n/a
n/a
n/a
On Fixed
n/a
public
public
public
n/a
n/a
n/a
n/a
On Fixed Variant
n/a
public
public
public
n/a
n/a
n/a
n/a
Buttons

Utility Classes

Template

[Card Style] + [Size] + [Icon Placement]

CSS Example

.button

.large

.start-icon.end-icon

Example appearance in Webflow

Components

default

startIcon=true

endIcon=true

both true

style=fill

Label
arrow_forward
Label
Label
arrow_forward
arrow_forward
Book Quick Chat
arrow_forward

style=outline

Label
arrow_forward
Label
Label
arrow_forward
arrow_forward
Label
arrow_forward

style=text

Label
arrow_forward
Label
Label
arrow_forward
arrow_forward
Label
arrow_forward

Large

Icon Placement Classes

These utility classes control the padding for when there's a start or end icon, or both.

.start-icon
.end-icon
.start-icon.end-icon
Snackbar
Snackbars are great for displaying notifications to the user. Sometimes they're also called toast messages, although toasts tend to be smaller than these and usually don't have a badge.

Example Implementations

info
Hourly rate varies. We're going to use a fake one here for the sake of example.
info
Need help? Email the devs! Send questions to info@chainlift.io.
check_circle
Hourly rate varies. We're going to use a fake one here for the sake of example.
warning
Hourly rate varies. We're going to use a fake one here for the sake of example.
error
Hourly rate varies. We're going to use a fake one here for the sake of example.