Style Guide

This style guide provides a central location to make stylistic changes to your site. If you need additional help, Webflow University provides a library of videos, tutorials and resources to help you get started.

Text Link
Note: Change the colors through the swatches panel. This will change all locations where the color is used on the website.
ffa220
FEC645
f6d96e
f7e78d
5E64EA
102226
485B60
99A1A3
DDE3E4
F1F3F3
ffffff

Typography

Any edits here will apply to all reflective elements across the site. We use Nunito Sans as a font, either Regular(400), Italic, or Bold (700).

H1 / Hero Title — 700 Bold
44/48px(3rem) font Size
-0.06rem Letter Spacing
3.6rem Line Height

The quick brown fox jumps over the lazy dog

H1 / H1 Title — 700 Bold
44/48px(3rem) Font Size
-0.06rem Letter Spacing
3.6rem Line Height

The quick brown fox jumps over the lazy dog

H2 / H2 Title — 700 Bold
28/32px(2rem) Font Size
-0.03rem Letter Spacing
2.4rem Line Height

The quick brown fox jumps over the lazy dog

H3 / H3 Title — 700 Bold
24px/1.5rem Font Size
0rem Letter Spacing
2rem Line Height

The quick brown fox jumps over the lazy dog

H4,5,6 / H4,5,6 Title — 700 Bold
20px/1.3rem Font Size
0rem Letter Spacing
1.5 rem Line Height

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Body Large — 400/700
20px/1.3rem Font Size
0.00 Letter Spacing
1.8rem Line Height

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

Body Normal / Default Base — 400/700
16px/1rem Font Size
0.00 Letter Spacing
1.6rem Line Height

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

Body Small — 400/700 use for small text
14px/0.9rem Font Size
0.02rem Letter Spacing
1.25rem Line Height

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

Caption — 400 use to describe images
14px/0.9rem Font Size
0.025rem Letter spacing

Caption

Overline ALL CAPS — 700 use to describe headin
14px/0.9rem Font Size
0.05rem Letter spacing

Overline

Breadcrumbs — 700 use to show navigation on the page
16px/1.6 rem Font Size
0rem Letter spacing
Button — 400 for text buttons
14px/0.9 rem Font Size
0.05rem Letter spacing

BUTTON TEXT

Buttons

For additional information, please visit the Webflow University

Primary button — use for most important action on card, section or page
11,24,11,24 Padding
8 Margin
Secondary buttons — use for other actions
11,24,11,24 Padding
8 Margin
0 Padding
GET STARTED
arrow

Text Pairings

For additional information, please visit the Webflow University

What’s a Rich Text element?

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.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

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.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

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.

  • Work closely with our outreach team on various SEO campaigns
  • Maintain website’s SEO health
  • Perform keyword research including discovery and expansion of keyword opportunities
  • Track keywords’ rankings, and report and analyze website analytics
  • Research and analyze competitor sites
  • Stay up to date with all SEO and content marketing trends
How to customize formatting for each rich text

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.

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.

Hero Header

Hero subheading goes here

Section heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

Article heading

Details of the article

Article subheading goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

Card heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

Text Link