Final File

/

Webflow Style Guide

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

HTML Tags

Style

Visual Representation

h1

Heading 1

h2

Heading 2

h3

Heading 3

h4

Heading 4

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

All Links
Text Link
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
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 Headings

Style

Visual Representation

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

Style

Visual Representation

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

Style

Visual Representation

fl-lg
Text Link
fl-md
Text Link
fl-rg
Text Link
fl-sm
Text Link
fl-xsm
Text Link

Captions

Style

Visual Representation

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.

Font Weight

Style

Visual Representation

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.

Line Clamp

Style

Visual Representation

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

Text Wrap

Style

Visual Representation

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

Colors

Swatch

Variable:

Transparent

Variable:

Light

Variable:

Dark

Variable:

brand-primary

Variable:

brand-secondary

Variable:

brand-tertiary

Variable:

brand-quaternary

Variable:

brand-quaternary

Opacity

Light

Variable:

Light-1

Variable:

Light-2

Variable:

Light-3

Variable:

Light-4

Variable:

Light-5

Variable:

Light-1

Variable:

Light-2

Variable:

Light-3

Variable:

Light-4

Variable:

Light-5

Variable:

Brand-2

Variable:

Brand-3

Variable:

brand-4

Variable:

brand-5

Variable:

Brand-1

Theme / Light

Variable:

bg

Aa

Variable:

text

Variable:

border

Variable:

secondary-bg

Aa

Variable:

secondary-text

secondary-border

Variable:

Theme / Dark

Variable:

bg

Aa

Variable:

text

Variable:

border

Variable:

secondary-bg

Aa

Variable:

secondary-text

Variable:

secondary-border

Themes

data-theme="invert"
Inverts Parent's Theme

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.

data-theme="inherit"
Inherits Parent's Theme

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.

data-theme="light"
Light Theme

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.

data-theme="dark"
Dark Theme

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.

Components

Button Styles

data-button-style="primary"
Primary
data-button-style="secondary"
Secondary
data-button-style="tertiary"
Tertiary
data-button-style="outlined"
Outlined

Form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Adaptive Values

Our spacing system is built around a base of unit of 8 pixels. This base unit determines the spacing scale and ensures visual consistency across products.

Sizes

Global Styles

Visual Representation

Value

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

Space

Global Styles

Visual Representation

Value

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

Radius

Global Styles

Visual Representation

Value

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

Miscellaneous

Utilities

cf1
cover full
width: 100%; 

height: 100%;
ca1
cover absolute
width: 100%; height: 100%;

position: absolute; top: 0; left: 0;
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"