Style Guide

This page contains all the components used on your site. You can see it as a library where you can consult and edit any style. If you are beginning with Webflow, we highly recommend you to take a look at the Webflow 101 Crash Course.

Text Styles

These are all the text styles used on your site. Add the following classes to change the alignment: Center, Right.

Extra large

Large

Medium

Regular

Small

Extra small

Paragraph Big

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Rich Text

Formatted rich text element used for long sections of text like projects

Extra large

Large

Medium

Regular

Small
Extra small

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Here is a text link for your rich text element.

Placeholder Image
Don't forget to wright captions to your images
"Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system."

  1. Lorem ipsum dolor
  2. Lorem ipsum dolor
  3. Lorem ipsum dolor
  • Lorem ipsum dolor
  • Lorem ipsum dolor
  • Lorem ipsum dolor

Colors

Here you will find all the colors used on your site. Applying a color palette brings a unified and recognizable consistency to your interfaces.

Buttons

Buttons are used to initialize an action. Use clear button labels to express what action will occur when the user interacts with it.

Primary

Listen now

Secondary

Listen now

Form

A form is a group of related input controls that allows users to provide data or configure options.

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

Grids

Grid give you more direct control over your layout and design.

4 Grid

3 Grid

2 Grid

Tex Box

Boxes of different sizes to house content.

400px

500px

600px

1000px

Spacers

Spacing is important and often overlooked in product design. Using white space elements rather than adding margin on your components will help you to achieve a coherent spacing system. To use spacers, add a div in your design and give it the name "Spacer". Then select a combo class (ex: 32) to set its size.

8px

16px

24px

32px

40px