Final File

This is the style guide that we use when starting with any type of Webflow projects. It's inspired by the Lumos Framework from Timothy Ricks and Client First from Finsweet. Credit goes to them for their great work and giving me the best tools to perform. Edit these styles and UI elements here and the changes will be reflected throughout the library.

Typography

Font Styles

u-text-h1

Heading 1

u-text-h2

Heading 2

u-text-h3

Heading 3

u-text-h4

Heading 4

u-text-h5

Heading 5

u-text-h6

Heading 6

u-text-style-large

This is some text inside of a div block.

u-text-style-medium

This is some text inside of a div block.

u-text-style-main

This is some text inside of a div block.

u-text-style-small

This is some text inside of a div block.

u-text-style-extra-small

This is some text inside of a div block.

u-text-style-tag-large

This is some text inside of a div block.

u-text-style-tag-main

This is some text inside of a div block.

u-text-style-tag-small

This is some text inside of a div block.

Text Links

u-text-link-large

u-text-link-medium

u-text-link-main

u-text-link-small

u-text-link-extra-small

Text Link

Rich Text

u-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item
Item
Item

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

u-rich-text-body

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block quote

Ordered list

Item
Item
Item

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

u-rich-text-secondary

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block quote

Ordered list

Item
Item
Item

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

u-rich-text-alternative

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block quote

Ordered list

Item
Item
Item

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

u-rich-text-tab

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block quote

Ordered list

Item
Item
Item

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Typography Elements

All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

All Links

Text Link

All Block Quotes

Block Quote

All Ordered Lists

List Item
List Item
List Item

All Unordered Lists

List Item
List Item
List Item

Font Family

u-text-font-primary

Roboto

u-text-font-secondary

Roboto Condensed

Font Weight

u-weight-thin

Lorem ipsum dolor sit amet consectetur tortor semper.

u-weight-extra-light

Lorem ipsum dolor sit amet consectetur tortor semper.

u-weight-light

Lorem ipsum dolor sit amet consectetur tortor semper.

u-weight-normal

Lorem ipsum dolor sit amet consectetur tortor semper.

u-weight-medium

Lorem ipsum dolor sit amet consectetur tortor semper.

u-weight-semibold

Lorem ipsum dolor sit amet consectetur tortor semper.

u-weight-bold

Lorem ipsum dolor sit amet consectetur tortor semper.

u-weight-black

Lorem ipsum dolor sit amet consectetur tortor semper.

u-weight-extra-bold

Lorem ipsum dolor sit amet consectetur tortor semper.

Line Height

u-line-height-0-9

Lorem ipsum dolor sit amet consectetur tortor semper.

u-line-height-1

Lorem ipsum dolor sit amet consectetur tortor semper.

u-line-height-1-1

Lorem ipsum dolor sit amet consectetur tortor semper.

u-line-height-1-2

Lorem ipsum dolor sit amet consectetur tortor semper.

u-line-height-1-3

Lorem ipsum dolor sit amet consectetur tortor semper.

u-line-height-1-4

Lorem ipsum dolor sit amet consectetur tortor semper.

u-line-height-1-5

Lorem ipsum dolor sit amet consectetur tortor semper.

u-line-height-1-6

Lorem ipsum dolor sit amet consectetur tortor semper.

Line Clamp

u-line-clamp-1

Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames dictum habitant lorem in congue adipiscing varius ullamcorper amet quisque iaculis urna amet ornare a morbi commodo eu magna tristique sed in. Id eu facilisis dui eget auam egestas fames nisl pulvinar et. Et nisl mattis felis erat et enim diam adipiscing. Turpis egestas non congue bibendum lectus mattis nulla in urna sit et varius sit morbi ut. Neque varius dignissim posuere consequat vitae.

u-line-clamp-2

u-line-clamp-3

u-line-clamp-4

u-line-clamp-5

Letter Space

u-text-letter-space-none

Lorem ipsum dolor sit amet consectetur tortor semper.

u-text-letter-space-small

Lorem ipsum dolor sit amet consectetur tortor semper.

u-text-letter-space-main

Lorem ipsum dolor sit amet consectetur tortor semper.

u-text-letter-space-large

Lorem ipsum dolor sit amet consectetur tortor semper.

Text Align

u-text-letter-space-none

Lorem ipsum dolor sit amet consectetur tortor semper.

u-text-letter-space-small

Lorem ipsum dolor sit amet consectetur tortor semper.

u-text-letter-space-main

Lorem ipsum dolor sit amet consectetur tortor semper.

u-text-letter-space-large

Lorem ipsum dolor sit amet consectetur tortor semper.

Text Transform

u-text-transform-none

Lorem ipsum dolor sit amet consectetur tortor semper.

u-text-transform-uppercase

Lorem ipsum dolor sit amet consectetur tortor semper.

u-text-transform-capitalize

Lorem ipsum dolor sit amet consectetur tortor semper.

u-text-transform-lowercase

Lorem ipsum dolor sit amet consectetur tortor semper.

u-text-transform-italic

Lorem ipsum dolor sit amet consectetur tortor semper.

Text Wrap

u-text-wrap-default

Lorem ipsum dolor sit amet consectetur tortor semper.

u-text-wrap-pretty

Lorem ipsum dolor sit amet consectetur tortor semper.

u-text-wrap-balance

Lorem ipsum dolor sit amet consectetur tortor semper.

Colors

Theme

u-theme-dark

Heading

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.

Button Label

u-theme-light

Heading

Button Label

Text Color

u-text-color-inherit

Lorem ipsum dolor sit amet.

u-text-color-faded

color-mix(in srgb, var(--text--primary) 50%, transparent)

u-text-color-primary

Lorem ipsum dolor sit amet.

u-text-color-secondary

Lorem ipsum dolor sit amet.

u-text-color-tertiary

Lorem ipsum dolor sit amet.

u-color-quaternary

Lorem ipsum dolor sit amet.

u-color-quinary

Lorem ipsum dolor sit amet.

Flexbox

Horizontal Flex Utilities

u-hflex-left-top

u-hflex-left-center

u-hflex-left-bottom

u-hflex-left-stretch

u-hflex-center-top

u-hflex-center-center

u-hflex-center-bottom

u-hflex-center-strech

u-hflex-right-top

u-hflex-right-center

u-hflex-right-bottom

u-hflex-right-stretch

u-hflex-between-top

u-hflex-between-center

u-hflex-between-bottom

u-hflex-between-stretch

Vertical Flex Utilities

u-vflex-left-top

u-vflex-left-center

u-vflex-left-stretch

u-vflex-center-top

u-vflex-center-center

u-vflex-center-bottom

u-vflex-center-between

u-vflex-right-top

u-vflex-right-center

u-vflex-right-bottom

u-vflex-right-between

u-vflex-stretch-top

u-vflex-stretch-center

u-vflex-stretch-bottom

u-vflex-stretch-between

Other Flex Utilities

u-hflex-wrap

u-vflex-wrap

u-flex-shrink

u-flex-grow

u-flex-noshrink

Grid

Utilities

u-grid-custom

u-grid-breakout

u-grid-desktop

u-grid-tablet

u-grid-landscape

u-grid-column-2

u-grid-column-3

u-grid-column-4

u-grid-autofit

u-grid-subgrid

Column Utilites

u-column-custom

u-column-full

u-column-indent

Order Utilities

u-order-first

u-order-first-desktop

u-order-first-tablet

u-order-first-landscape

u-order-last-desktop

u-order-last-tablet

Sizes

Gap Utilities

u-gap-0

u-gap-1

u-gap-2

u-gap-3

u-gap-4

u-gap-5

u-gap-6

u-gap-7

u-gap-8

Row Gap Utilities

u-gap-row-0

u-gap-row-1

u-gap-row-2

u-gap-row-3

u-gap-row-4

u-gap-row-5

u-gap-row-6

u-gap-row-7

u-gap-row-8

Padding Top & Bottom

data-padding-top="none"

data-padding-bottom="none"

data-padding-top="extra-small"

data-padding-bottom="extra-small"

data-padding-top="small"

data-padding-bottom="small"

data-padding-top="main"

data-padding-bottom="main"

data-padding-top="medium"

data-padding-bottom="medium"

data-padding-top="large"

data-padding-bottom="large"

data-padding-top="extra-large"

data-padding-bottom="extra-large"

Miscellaneos

Hide Utilties

u-display-none

u-display-tablet-none

u-display-landscape-none

u-display-mobile-none

Overflow Utilities

u-overflow-visible

u-overflow-hidden

u-overflow-clip

u-overflow-scroll

u-overflow-auto

u-overflow-x-auto

u-overflow-y-auto

Other Utilities

u-container-none

u-auto-center

u-visual-wrap

u-cover

u-cover-absolute

u-sr-only

Webflow Style Guide

Typography

Font Styles

Heading 1

Heading 1

Heading 2

Heading 2

Heading 3

Heading 3

Heading 4

Heading 4

Heading 5

Heading 5

Heading 6

Heading 6

Text Links

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Typography Elements

Font Family

Font Weight

Line Height

Line Clamp

Letter Space

Text Align

Text Transform

Text Wrap

Colors

Theme

Heading

Heading

Text Color

Flexbox

Horizontal Flex Utilities

Vertical Flex Utilities

Other Flex Utilities

Grid

Utilities

Column Utilites

Order Utilities

Sizes

Gap Utilities

Row Gap Utilities

Padding Top & Bottom

Miscellaneos

Hide Utilties

Other Utilities

Components

Buttons

Text Button

Tags