Final File

This is the style guide template that I use as a Webflow Designer & Developer. I start with this with any type Webflow projects. It's inspired by the Lumos Wramework 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

Headings

HTML H1

Heading 1

HTML H2

Heading 2

HTML H3

Heading 3

HTML H4

Heading 4

HTML H5

Heading 5

HTML H6

Heading 6

Other Headings

lg-h1

Long h1

lg-h2

Long h2

md-h2

Medium h2

sm-h2

Small h2

lg-h3

Long h3

md-h3

Medium h3

sm-h3

Small h3

Text

All Paragraphs

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.

fs-lg

This is some text inside of a div block.

fs-md

This is some text inside of a div block.

fs-rg

This is some text inside of a div block.

fs-sm

This is some text inside of a div block.

fs-xsm

This is some text inside of a div block.

Text Links

fl-lg

fl-md

fl-rg

fl-sm

fl-xsm

Captions

caption-lg

This is some text inside of a div block.

caption-md

This is some text inside of a div block.

caption-sm

This is some text inside of a div block.

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 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Other

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

Components

Button

primary

Primary

secondary

Secondary

outlined

Outlined

Text Button

primary

Primary

Icon

primary

secondary

outlined

Play

primary

secondary

outlined

Spacer

primary

Utilities

Text Color

u_color_primary

Lorem ipsum dolor sit amet.

u_color_secondary

Lorem ipsum dolor sit amet.

u_color_tertiary

Lorem ipsum dolor sit amet.

u_color_fourtuary

Lorem ipsum dolor sit amet.

u_color_quinary

Lorem ipsum dolor sit amet.

u_color_senary

Lorem ipsum dolor sit amet.

u_color_mute

Lorem ipsum dolor sit amet.

Font Weight

fw0

This is some text inside of a div block.

fw1

This is some text inside of a div block.

fw2

This is some text inside of a div block.

fw3

This is some text inside of a div block.

fw4

This is some text inside of a div block.

Text Transform

tt0

inherit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

tt1

none

Lorem ipsum dolor sit amet, consectetur adipiscing elit

tt2

uppercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit

tt3

capitalize

Lorem ipsum dolor sit amet, consectetur adipiscing elit

tt4

lowercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit

tt5

italic

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Line Clamp

lc1

lc2

lc3

lc4

lc5

Alignment

u_text_left

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

u_text_center

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

u_text_right

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

u_text_streched

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

Text Wrap

tw1

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

tw2

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

Image

cf1

cover full

width: 100%;  
height: 100%;

ca1

cover absolute

width: 100%;  
heiolute; top: 0; left: 0;

Padding

data-padding-top="none"

data-padding-bottom="none"

data-padding-top="x-small"

data-padding-bottom"x-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="x-large"

data-padding-bottom="x-large"

Other

u_hide

All Device Hidden

u_hide_tablet

Mobile Tablet Hidden

u_hide_landscape

Mobile Landscape Hidden

u_hide_mobile

Mobil Portrait Hidden

UI

Form

main

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Adaptive Values

Spaces

xx-small

0.125rem

xx-small

0.25rem

x-small

0.5rem

small

0.75rem

main

1rem

medium

1.5rem

large

2rem

x-large

3rem

xx-large

5rem

Border Radius

xxxx-small

0.25rem

xxx-small

0.375rem

xx-small

0.5rem

x-small

0.625rem

small

0.75rem

main

1rem

medium

1.25rem

large

2rem

round

Round

Sizes

size.0rem

0px

size.0.125rem

2px

size.0.25rem

4px

size.0.375rem

6px

size.0.5rem

8px

size.0.625rem

10px

size.0.75rem

12px

size.0.875rem

14px

size.1rem

16px

size.1.125rem

20px

size.1.25rem

24px

size.1.5rem

28px

size.1.75rem

32px

size.2rem

36px

size.2.5rem

40px

size.3rem

48px

size.3.5rem

56px

size.4rem

60px

size.5rem

80px

size.6rem

96px

size.7rem

112px

size.8rem

128px

size.9rem

144px

size.10rem

160px

size.12rem

192px

size.14rem

224px

size.16rem

256px

size.18rem

288px

size.20rem

304px

Webflow Style Guide

Typography

Headings

HTML H1

Heading 1

HTML H2

Heading 2

HTML H3

Heading 3

HTML H4

Heading 4

HTML H5

Heading 5

HTML H6

Heading 6

Other Headings

Long h1

Long h2

Medium h2

Small h2

Long h3

Medium h3

Small h3

Text

Text Links

Captions

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Other

Components

Button

Text Button

Icon

Play

Spacer

Utilities

Text Color

Font Weight

Text Transform

Line Clamp

Alignment

Text Wrap

Image

Padding

Other

UI

Form

Adaptive Values

Spaces

Border Radius

Sizes