The universal design system for clean, modern UI's

Webflow Cloneable

The fastest way to get started

content_copy

Clone in Webflow

CSS

Join the beta for access

arrow_forward

Fill Out Quick Form

Figma

Coming soon!

notifications

Tell Me When It's Ready

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

Style	Weight	Size (em)	Line Height	Letter Spacing (em)
Display 1	400	4.235	1.129	-0.022
Display 2	400	2.618	1.272	-0.022
Title A	400	2.058	1.272	-0.022
Title B	400	1.618	1.272	-0.02
Title C	400	1.272	1.272	-0.017
Heading	600	1.129	1.272	-0.014
Subheading	400	0.885	1.272	-0.007
Body	400	1	1.618	-0.011
Callout	400	0.943	1.272	-0.009
Label	500	0.835	1.272	-0.004
Caption	400	0.786	1.272	-0.007
Overline	400	0.786	1.272	0.0618

Bold

Display1

Display2

TitleA

TitleB

TitleC

Heading

Subheading

Body

Callout

Label

Caption

overline

Style	Weight	Size (em)	Line Height (unitless)	Letter Spacing (em)
Display 1	700	4.235	1.129	-0.022
Display 2	700	2.618	1.272	-0.022
Title A	700	2.058	1.272	-0.022
Title B	600	1.618	1.272	-0.02
Title C	600	1.272	1.272	-0.017
Heading	700	1.129	1.272	-0.014
Subheading	600	0.885	1.272	-0.007
Body	600	1	1.618	-0.011
Callout	600	0.943	1.272	-0.009
Label	700	0.835	1.272	-0.004
Caption	600	0.786	1.272	-0.007
Overline	600	0.786	1.272	0.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

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

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

.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-s

.h-m

.h-l

.h-xl

.h-xxl

.h-xxxl

Border Radius

Root Classes

xxs

xxl

xxxl

circle

Visual Preview

xxs

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

container__wide

container_default

container__narrow

container__narrowest

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

Term	Definition	Examples
Card Style	Whether the card uses the "default" or "outline" style. Default does not require a modifier, so you can simply use .card	.card .card__outline
Scale Factor	The largest font size contained within the card. LiftKit uses this value to provide optical corrections to card padding symmetry.	scaleFactor__heading scaleFactor__titleB
Background Color	The 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

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Default Card (Link)

.card__link

.scaleFactor__heading

.bg-light__surfaceContainerLowest

Card Heading

Card Subheading

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Outlined Card

Card Heading

Card Subheading

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Outlined Card (Link)

.card__outline__link

.scaleFactor__heading

Quote highlight should go up on top

Author Name

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

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

Containers

n/a

public

Fixed

n/a

Size

public

n/a

Fixed Dim

n/a

public

n/a

On Fixed

n/a

public

n/a

On Fixed Variant

n/a

public

n/a

Large

Default

Primary

Secondary

Tertiary

Error

Warning

Success

Info

Key Colors

public

Containers

n/a

public

Fixed

n/a

public

Hue Group

Variant

n/a

Fixed Dim

n/a

public

n/a

On Fixed

n/a

public

n/a

On Fixed Variant

n/a

public

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

Large

.start-icon

.end-icon

.start-icon.end-icon

.button.large

.button__outline.large

.button__text.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.