Webflow Style Guide

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

h1

HTML H1

Heading 1

h2

HTML H2

Heading 2

h3

HTML H3

Heading 3

h4

HTML H4

Heading 4

h5
HTML H5
Heading 5
h6
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.

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

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

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

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Other

All Links
All Block Quotes
Block Quote
All Ordered Lists
  1. List Item
  2. List Item
  3. 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
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
lc2
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
lc3
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
lc4
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
lc5
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 sed do eiusmod

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
Select field
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