Typography
Heading
Body
Background Color
Text Color
Text Weights
Text Alignments
Buttons
Layout
Rows
Columns
Margin
Padding
Documentation

Simon's
Styleguide

With a focus on enhancing the design and development process, I have crafted a dynamic style guide website tailored specifically for Webflow projects, aiming to streamline workflows and promote cohesive visual aesthetics.

Typography

Aa
Body (All Pages)
system-ui
Aa
All Headings
system-ui

Headings

Element

All H1 Headings
5.5rem
6rem

Element

All H2 Headings
4rem
4.5rem

Element

All H3 Headings
3rem
3.5rem

Element

All H4 Headings
2.4rem
2.8rem
Element
All H5 Headings
1.6rem
2rem
Element
All H6 Headings
1.2rem
1.5rem

Headings Class

Class

heading-1
5.5rem
6rem

Class

heading-2
4rem
4.5rem

Class

heading-3
3rem
3.5rem

Class

heading-4
2.4rem
2.8rem
Class
heading-5
1.6rem
2rem
Class
heading-6
1.2rem
1.5rem

Body

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 Paragraphs
1rem
1.4rem

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.

paragraph
1rem
1.4rem

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. 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.

paragraph-0.9
0.9rem
1.3rem

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. 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.

paragraph-1.25
1.25rem
1.8rem

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. 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.

paragraph-1.5
1.5rem
2rem
  • Unordered List Lorem Ipsum
  • Unordered List Lorem Ipsum
  • Unordered List Lorem Ipsum
All Unordered Lists
1rem
1.4rem
  • Unordered List Lorem Ipsum
  • Unordered List Lorem Ipsum
  • Unordered List Lorem Ipsum
list-unordered
list-item
1rem
1.4rem
  1. Unordered List Lorem Ipsum
  2. Unordered List Lorem Ipsum
  3. Unordered List Lorem Ipsum
All Ordered Lists
1rem
1.4rem
  1. Unordered List Lorem Ipsum
  2. Unordered List Lorem Ipsum
  3. Unordered List Lorem Ipsum
list-ordered
list-item
1rem
1.4rem
Text Block Lorem Ipsum
Body (All PAges)
1rem
1.4rem
Text Block Lorem Ipsum
text
1rem
1.4rem
Text Link Lorem Ipsum
All Links
1rem
1.4rem
Text Link Lorem Ipsum
link
1rem
1.4rem
Block Quote Lorem Ipsum
All Block Quotes
1.4rem
2rem
Block Quote Lorem Ipsum
block-quote
1.4rem
2rem
Text Block Lorem Ipsum
text-0.9
0.9rem
1.3rem
Text Block Lorem Ipsum
text-1.25
1.25rem
1.8rem
Text Block Lorem Ipsum
text-1.5
1.5rem
2rem
Text Block Lorem Ipsum
eyebrow
0.9rem
1.3rem

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Image Caption
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
rich-text

Background Color

Primary
#0D86FF
bg-color-primary
Black
#222222
bg-color-black
Grey
#858585
bg-color-grey
Mid Grey
#F0F0F0
bg-color-midgrey
Light Grey
#F8F8F8
bg-color-lightgrey
White
#FFFFFF
bg-color-white

Text Color

Lorem Ipsum
Primary
#0D86FF
text-color-primary
Lorem Ipsum
Black
#222222
text-color-black
Lorem Ipsum
Grey
#858585
text-color-grey
Lorem Ipsum
Mid Grey
#F0F0F0
text-color-midgrey
Lorem Ipsum
Light Grey
#F8F8F8
text-color-lightgrey
Lorem Ipsum
White
#FFFFFF
text-color-white

Text Weights

Lorem Ipsum
Extrabold
text-weight-extrabold
Lorem Ipsum
Bold
text-weight-bold
Lorem Ipsum
Medium
text-weight-medium
Lorem Ipsum
Normal
text-weight-normal
Lorem Ipsum
Light
text-weight-light
Lorem Ipsum
Thin
text-weight-thin

Text Alignments

Lorem Ipsum
left
text-align-left
Lorem Ipsum
Middle
text-align-middle
Lorem Ipsum
Right
text-align-right

Buttons

Button
Button Version 1
button
Button
Button Version 2
button
version-2
Button
Button Version 3
button
version-3
Button
Button Version 4
button
version-4
Button
Button Version 5
button
version-5
Button
Button Version 6
button
version-6

Layout

container
container-large
container-medium
container-medium
max-width-large
max-width-medium
max-width-small

Rows

row-0
row-0
row-1
row-1
row-2
row-2
row-3
row-3
row-4
row-4
row-5
row-5

Rows Flex

row-0-flex
row-0-flex
row-1-flex
row-1-flex
row-2-flex
row-2-flex
row-3-flex
row-3-flex
row-4-flex
row-4-flex
row-5-flex
row-5-flex

Columns

col-0
col-0
col-1
col-1
col-2
col-2
col-3
col-3
col-4
col-4
col-5
col-5

Columns Flex

col-0-flex
col-0-flex
col-1-flex
col-1-flex
col-2-flex
col-2-flex
col-3-flex
col-3-flex
col-4-flex
col-4-flex
col-5-flex
col-5-flex

Margin

margin-1-top
margin-2-top
margin-3-top
margin-1-bottom
margin-2-bottom
margin-3-bottom
margin-1-left
margin-2-left
margin-3-left
margin-1-right
margin-2-right
margin-3-right
margin-1-all
margin-2-all
margin-3-all

Padding

padding-1-top
padding-2-top
padding-3-top
padding-1-bottom
padding-2-bottom
padding-3-bottom
padding-1-left
padding-2-left
padding-3-left
padding-1-right
padding-2-right
padding-3-right
padding-1-right
padding-2-right
padding-3-right