Webflow Style Guide
This is the style guide that I use as a Webflow Designer & Developer when starting with any type of 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
h1-large
H1 Large
h2-large
H2 Large
h3-large
H3 Large
h1-medium
H1 Medium
h2-medium
H2 Medium
h3-medium
H3 Medium
h1-small
H1 Small
h2-small
H2 Small
h3-small
H3 Small
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-large
This is some text inside of a div block.
fs-medium
This is some text inside of a div block.
fs-regular
This is some text inside of a div block.
fs-small
This is some text inside of a div block.
fs-extra-small
This is some text inside of a div block.
Text Links
Tags
tag-large
This is some text inside of a div block.
tag-medium
This is some text inside of a div block.
tag-small
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
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Other
All Links
All Block Quotes
Block Quote
All Ordered Lists
- List Item
- List Item
- List Item
All Unordered Lists
- List Item
- List Item
- List Item
Colors
Swatch
transparent
light
dark
color-1
color-light-1
color-dark-1
color-2
color-light-2
color-dark-2
color-3
color-light-3
color-dark-3
color-4
color-light-4
color-dark-4
Neutral
Light
light-1
light-2
light-3
light-4
light-5
light-6
Dark
dark-1
dark-2
dark-3
dark-4
dark-5
dark-6
Light Mode
Background
primary
secondary
tertiary
quaternary
quinary
Text
Aa
primary
Aa
secondary
Aa
tertiary
Aa
quaternary
Aa
quinary
Border
primary
secondary
tertiary
quaternary
quinary
Dark Mode
Background
primary
secondary
tertiary
quaternary
quinary
Text
Aa
primary
Aa
secondary
Aa
tertiary
Aa
quaternary
Aa
quinary
Border
primary
secondary
tertiary
quaternary
quinary
Components
UI
Form
main
Themes
main
data-theme="invert"
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
data-theme="inherit"
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
data-theme="light"
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
data-theme="dark"
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Global
Eyebrow
g-eyebrow
Eyebrow Label
Spacer
g-spacer
Visual
g-visual
Sections
Section Starter
Utilities
Font Family
u-font-inherit
Lorem ipsum dolor sit amet.
u-font-primary
Lorem ipsum dolor sit amet.
u-font-secondary
Lorem ipsum dolor sit amet.
Text Color
u-color-inherit
Lorem ipsum dolor sit amet.
u-color-faded
Lorem ipsum dolor sit amet.
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.
Font Weight
u-weight-0
This is some text inside of a div block.
u-weight-1
This is some text inside of a div block.
u-weight-2
This is some text inside of a div block.
u-weight-3
This is some text inside of a div block.
u-weight-4
This is some text inside of a div block.
u-weight-5
This is some text inside of a div block.
Text Transform
u-transform-0
inherit
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames dictum habitant lorem in congue adipiscing varius.
u-transform-1
none
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames dictum habitant lorem in congue adipiscing varius.
u-transform-2
uppercase
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames dictum habitant lorem in congue adipiscing varius.
u-transform-3
capitalize
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames dictum habitant lorem in congue adipiscing varius.
u-transform-4
lowercase
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames dictum habitant lorem in congue adipiscing varius.
u-transform-5
italic
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames dictum habitant lorem in congue adipiscing varius.
Line Clamp
u-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-clamp-2
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-clamp-3
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-clamp-4
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-clamp-5
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.
Alignment
u-aligned-left
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.
u-aligned-center
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.
u-aligned-right
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.
u-aligned-streched
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.
Text Wrap
u-wrap-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.
u-wrap-2
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.
u-wrap-3
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.
Image
u-cover-full
cover full
width: 100%;
height: 100%;
height: 100%;
u-cover-absolute
cover absolute
width: 100%;
heiolute; top: 0; left: 0;
heiolute; top: 0; left: 0;
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"
Other
u-hide
All Devices Hidden
u-hide-tablet
Mobile Tablet Hidden
u-hide-landscape
Mobile Landscape Hidden
u-hide-mobile
Mobile Portrait Hidden
u-overflow-hidden
Overflow Hidden
u-auto-center
Auto Center
Adaptive Values
Spaces
ultra-small
0.125rem
extra-small
0.5rem
small
0.75rem
main
1rem
medium
1.5rem
large
2rem
extra-large
3rem
ultra-large
5rem
Border Radius
ultra-small
0.25rem
extra-small
0.375rem
small
0.5rem
main
0.75rem
medium
1rem
large
1.5rem
round
Round
Sizes
size.0rem
0rem
size.0.125rem
0.125rem
size.0.25rem
0.25rem
size.0.375rem
0.375rem
size.0.5rem
0.5rem
size.0.625rem
0.625rem
size.0.75rem
0.75rem
size.0.875rem
0.875rem
size.1rem
1rem
size.1.125rem
1.125rem
size.1.25rem
1.25rem
size.1.5rem
1.5rem
size.1.75rem
1.75rem
size.2rem
2rem
size.2.5rem
2.5rem
size.3rem
3rem
size.3.5rem
3.5rem
size.4rem
4rem
size.4.5rem
4.5rem
size.5rem
5rem
size.5.5rem
5.5rem
size.6rem
6rem
size.6.5rem
6.5rem
size.7rem
7rem
size.7.5rem
7.5rem
size.8rem
8rem
size.8.5rem
8.5rem
size.9rem
9rem
size.9.5rem
9.5rem
size.10rem
10rem
size.11rem
11rem
size.12rem
12rem
size.13rem
13rem
size.14rem
14rem
size.15rem
15rem
size.16rem
16rem