Webflow Style Guide

A style guide is a strong foundation for any design project. In this case, the design project is our very own website. This will ensure that our designs are consistent across our webpages like our blog, homepage, about us, and any future webpages we create.

🤔

What's a style guide anyway?

A style guide is a document that defines the digital components of your company or brand. This includes everything from typography, brand colors, buttons, toggles, visual containers, and everything in between.

✍️

Typography

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.

H1

Heading one

H2

Heading two

H3

Heading three

H4

Heading four

H5
Heading five
H6
Heading six
Paragraph

This is a paragraph element. This is some bold text 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 and this is some italicized text lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Quote Block
This is a quote block. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Bullet Lists
  • This is a list item.
  • This is a list item.
  • This is a list item.
Numbered Lists
  1. This is a list item.
  2. This is a list item.
  3. This is a list item.

🎨

Colors

The different weights of greys and colours used throughout the website.

Black
Light Black
Dark Gray
Gray
White
White Smoke
Light Gray
Steel Gray
Primary Blue
Sunny Gradient
Green Gradient
Purple Gradient

🔵

Buttons - dark mode

The different weights of greys and colours used throughout the website.

🔵

Buttons - light mode

The different types of buttons used throughout the website.