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
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
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.
Captions
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
Block Quote
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
Utilities
Text Color
Font Weight
Text Transform
Line Clamp
Alignment
Text Wrap
Image

height: 100%;

heiolute; top: 0; left: 0;
Padding
Other
UI
Form
Adaptive Values
Spaces
0.125rem
0.25rem
0.5rem
0.75rem
1rem
1.5rem
2rem
3rem
5rem
Border Radius
0.25rem
0.375rem
0.5rem
0.625rem
0.75rem
1rem
1.25rem
2rem
Round
Sizes
0px
2px
4px
6px
8px
10px
12px
14px
16px
20px
24px
28px
32px
36px
40px
48px
56px
60px
80px
96px
112px
128px
144px
160px
192px
224px
256px
288px
304px