Causas

Quais os problemas mais prementes? Como Priorizar?

More than just a box of prefab components

Long Term Rentals

LiftKit lays the groundwork for a strong design foundation. You won't find hundreds of random components here. Instead, LiftKit merely lets you skip the boring stuff, empowering you to build your way.

A comprehensive design system for building clean, modern interfaces

Chainlift's utility classes guarantee everything—every width, every font size, and every border radius—is scaled in perfect proportion to everything else. You'll have to really go out of your way to make it look bad.

Easier to learn, use, and customize than anything you've tried before

Utility classes have never been this easy. And with Chainlift Color, you can easily swap your entire color scheme in a matter of seconds, making it the perfect solution for agencies or high-volume freelancers

Mental Health Awareness

The Importance of Mental Health

Mental health is crucial for overall well-being. It encompasses emotional, psychological, and social well-being, influencing how we think, feel, and act. Mental health issues can affect anyone, regardless of age or background.

Common Mental Health Disorders

Some common mental health disorders include anxiety, depression, and bipolar disorder. Understanding these conditions is essential for reducing stigma and promoting treatment.

"Mental health is not a destination, but a process. It's about how you drive, not where you're going."

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

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

.display__block

.display__flex-h

.display__flex-v

.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

viverra ornare

Consectetur adipiscing elit

Lorem Ipsum Dolor Sit Amet

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.

Default Card (Link)

.card__link

.scaleFactor__heading

.bg-light__surfaceContainerLowest

viverra ornare

Lorem ipsum dolor sit amet

Consectetur adipiscing elit

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Outlined Card

viverra ornare

Lorem ipsum dolor sit amet

Consectetur adipiscing elit

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Outlined Card (Link)

.card__outline__link

.scaleFactor__heading

viverra ornare

Lorem ipsum dolor sit amet

Consectetur adipiscing elit

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

Badges

Utility Classes

These two are easier to navigate using the Navigator than with the canvas.

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

Stickers

Components

Default

Hue Group

Default

Primary

Secondary

Tertiary

Error

Warning

Success

Info

Key Colors

public

Label

public

Label

public

Label

public

Label

public

Label

public

Label

public

Label

public

Label

Containers

n/a

public

Label

public

Label

public

Label

public

Label

public

Label

public

Label

public

Label

Fixed

n/a

public

Label

public

Label

public

Label

Size

n/a

Fixed Dim

n/a

public

Label

public

Label

public

Label

n/a

On Fixed

n/a

public

Label

public

Label

public

Label

n/a

On Fixed Variant

n/a

public

Label

public

Label

public

Label

n/a

Buttons

Utility Classes

These two are easier to navigate using the Navigator than with the canvas.

Template

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

CSS Example

.button

.large

.start-icon.end-icon

Example appearance in Webflow

Components

.start-icon

.end-icon

.start-icon.end-icon

Large

.start-icon

.end-icon

arrow_forward

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

Purpose

Example Implementations

info

Snackbar Info

For neutral notifications and alerts.

Action

info

Snackbar Info.

For neutral notifications and alerts.

Action

check_circle

Snackbar Success.

For confirmations, like form submission success states.

Action

warning

Snackbar Warning.

For cautionary info, like a "warning, deprecated" message.

Action

error

Snackbar Error.

For high severity alerts, like error messages.

Action

Icons

Purpose

The plain-ol' icon component. Meant to be dropped pretty much anywhere and quickly detached if necessary. Uses Google's Material Symbols font family.

Variants

info

.material-symbols-outlined

info

.material-symbols-filled

Customization

To change the icon, double click it and edit it like you would any plain bit of text. The Google Fonts API will automatically render the correct icon. For a list of all the icon names, visit Material Symbols on Google Fonts.

Object-Fit

Purpose

Default

Example Implementations

Mental Health Awareness

LiftKit

The universal design system for clean, modern UI's

More than just a box of prefab components

Long Term Rentals

A comprehensive design system for building clean, modern interfaces

Easier to learn, use, and customize than anything you've tried before

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

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 __xxs to__xxl.

margin-top

m-top__xxs

m-top__xs

m-top__s

m-top__m

m-top__l

m-top__xl

m-top__xxl

margin-right

m-right__xxs

m-right__xs

m-right__s

m-right__m

m-right__l

m-right__xl

m-right__xxl

margin-bottom

m-bottom__xxs

m-bottom__xs

m-bottom__s

m-bottom__m

m-bottom__l

m-bottom__xl

m-bottom__xxl

margin-left

m-left__xxs

m-left__xs

m-left__s

m-left__m

m-left__l

m-left__xl

m-left__xxl

Padding

padding-top

p-top__xxs

p-top__xs

p-top__s

p-top__m

p-top__l

p-top__xl

p-top__xxl

padding-right

p-right__xxs

p-right__xs

p-right__s

p-right__m

p-right__l

p-right__xl

p-right__xxl

padding-bottom

p-bottom__xxs

p-bottom__xs

p-bottom__s

p-bottom__m

p-bottom__l

p-bottom__xl

p-bottom__xxl

padding-left

p-left__xxs

p-left__xs

p-left__s

p-left__m

p-left__l

p-left__xl

p-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

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

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

.display__block

.display__flex-h

.display__flex-v

.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

Default Card

.card

.scaleFactor__heading

.bg-light__surfaceContainerLowest

viverra ornare

Consectetur adipiscing elit

Lorem Ipsum Dolor Sit Amet

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

viverra ornare

Lorem ipsum dolor sit amet

Consectetur adipiscing elit

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Outlined Card

viverra ornare

Lorem ipsum dolor sit amet

Consectetur adipiscing elit

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Outlined Card (Link)

.card__outline__link

.scaleFactor__heading

viverra ornare

Lorem ipsum dolor sit amet

Consectetur adipiscing elit

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

Badges

Utility Classes

These two are easier to navigate using the Navigator than with the canvas.

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

Stickers

Components

Default

Hue Group

Default

Primary

Secondary

Tertiary

Error

Warning

Success

Info

Key Colors

public

Label

public

Label

public

Label

public

Label

public

Label

public

Label

public

Label

public

Label

Containers

n/a

public

Label

public

Label

public

Label

public

Label

public

Label

public

Label

public

Label

Fixed

n/a

public

Label

public

Label

public

Label

Size

n/a

Fixed Dim

n/a

public

Label

public

Label

public

Label

n/a

On Fixed

n/a

public

Label

public

Label

public

Label

n/a

On Fixed Variant

n/a

public

Label

public

Label

public

Label

n/a

Buttons

Utility Classes

These two are easier to navigate using the Navigator than with the canvas.

Template

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

CSS Example

.button

.large

.start-icon.end-icon

Example appearance in Webflow

Components

.start-icon

.end-icon

.start-icon.end-icon

.button

.button__outline

.button__text

Large

.start-icon

.end-icon

Snackbar Info.

For neutral notifications and alerts.

Action

check_circle

Snackbar Success.

For confirmations, like form submission success states.

Action

warning

Snackbar Warning.

For cautionary info, like a "warning, deprecated" message.

Action

error

Snackbar Error.

For high severity alerts, like error messages.

Action

Icons

Purpose

The plain-ol' icon component. Meant to be dropped pretty much anywhere and quickly detached if necessary. Uses Google's Material Symbols font family.

Variants

info

.material-symbols-outlined

info

.material-symbols-filled

Customization

Object-Fit

Purpose

Default

Causas

Quais os problemas mais prementes? Como Priorizar?

More than just a box of prefab components

A comprehensive design system for building clean, modern interfaces

Easier to learn, use, and customize than anything you've tried before

Utility Classes

Elements

The Importance of Mental Health

Common Mental Health Disorders

Utility Classes

Template

CSS Example

Examples

Purpose

Widths

Height

Root Classes

Visual Preview

Common

Common

Containers

Sections

Root Classes

Utility Classes

Template

CSS Example

Glossary

Example Implementations

Default Cards

Outlined Cards

Default Link Cards

Outlined Link Cards

Components

Lorem Ipsum Dolor Sit Amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Quote highlight should go up on top

Utility Classes

Template

Components

Components

Utility Classes

Template

CSS Example

Components

.start-icon

.end-icon

.start-icon.end-icon

.button

.button__outline

.button__text

Large

.start-icon

.end-icon

.start-icon.end-icon

.button.large

.button__outline.large

.button__text.large

Icon Placement Classes

Purpose

Example Implementations

Purpose

Variants

Customization

Purpose

Example Implementations

LiftKit

The universal design system for clean, modern UI's

More than just a box of prefab components

A comprehensive design system for building clean, modern interfaces

Easier to learn, use, and customize than anything you've tried before

Utility Classes

Elements

Simplified Palette

Brand

Semantic

Surfaces

Outlines

Full Palette