Custom

Style Guide

This style guide serves as a centralized hub for making stylistic modifications to your website. If you need Webflow related help, checkout their resources page.

Color

Backgrounds

To apply a background color to any element, simply assign a class name to it.

Obsidian
#1c1f1d
BG Obsidian
Pure White
#fff
BG Pure White
Ember Red
#ff2d2d
BG Ember Red
White Smoke
#f7f7f7
BG White Smoke

Text Colors

To apply a text color to any element, simply assign a class name to it.

Aa
Obsidian
#1c1f1d
Text Obsidian
Aa
Obsidian 70
#1c1f1d / Opacity: .7
Text Obsidian 70
Aa
Pure White
#fff
Text Pure White
Aa
White Smoke
#f7f7f7
Text White Smoke

Typography

Fonts

All typography in this template is set using REMs, a unit of measure that works best for all devices and user preferences. If you want to easily convert PX to REM checkout this conversion tool: PX to REM converter.

Outfit
Headings
Weight Used: Light (200), Regular/Normal (400)
Source: Google Fonts

Headings

Header styling is set globally, and each one has a class name override, enabling any text element to utilize its specific styling.

H1. Display Heading

Font-size: 11rem / Line-height: .075

Display Heading

H1. Display Subheading

Font-size: 6rem / Line-height: 1.15

Display Subheading
Hero Eyebrow Title

Font-size: 3.5rem / Line-height: 1.15

Hero Eyebrow Title

H1. Heading

H1. Style Heading

Font-size: 3.5rem / Line-height: 1.15

All H1 Headings
H1 Style

H2. Heading

H2. Style Heading

Font-size: 3rem / Line-height: 1.15

All H2 Headings
H2 Style

H3. Heading

H3. Style Heading

Font-size: 2.5rem / Line-height: 1.15

All H3 Headings
H3 Style

H4. Heading

H4. Style Heading

Font-size: 2rem / Line-height: 1.15

All H4 Headings
H4 Style
h5. Heading
h5 Style Heading

Font-size: 1.5rem / Line-height: 1.15

All H5 Headings
H5 Style
h6. Heading
h6 Style Heading

Font-size: 1.125rem / Line-height: 1.15

All H6 Headings
H6 Style

Body Copy

Paragraph styling is set globally, and has a class name that can be used to override other text elements.

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.

Font-size: 1.125rem / Line-height: 1.6

All Paragraphs
Paragraph Style
  1. Example Ordered List
  2. Example Ordered List

Font-size: 1.125rem / Line-height: 1.6

All Ordered Lists
  • Example Unordered List
  • Example Unordered List

Font-size: 1.125rem / Line-height: 1.6

All Unordered Lists
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.

Font-size: 1.125rem / Line-height: 1.6

All Block Quotes

Elements

Buttons & Links

Button
Button
Primary CTA Link
Primary CTA Link
Secondary CTA Link
Secondary CTA Link

Forms

Text Input
Select Input
Text Area
Checkbox Field
Checkbox
Checkbox Label
Radio Field
Radio Button
Radio Label
Button
Form Button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Cards

Tabs

Tab 1 Content

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.

Tab 2 Content

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.

Tab 3 Content

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.

Tab 4 Content

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.

Accordion

Women smiling a person next to whiteboard

01.

Accordion 1

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Picture of two people talking in office

02.

Accordion 2

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Rich Text

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 conten

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!

Two people working on project next to computer
This is an example Image Caption

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.

  • Here is a list item
  • Here is a list item
  • Here is a list item

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.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Block quote

Here are some examples of text styles you can use in a rich text editor:

  • Bold
  • Link
  • Emphasis
  • Superscript
  • Subscript

Layout

Sections

Section PD

Apply to sections requiring both top and bottom spacing.

Section PD Top

Apply to sections that only need top spacing. This usually happens in sections where the background colors blend into one another and you prefer to avoid excessive spacing.

Containers

Add a class name to a container or div to set a centered width.

Container Xsmall
Container Small
Container Medium
Container Large

Utilities

Margin

Use these global class names for a quick and easy way to apply margin.

MG Top 0
margin-top: 0;
MG Top 1rem
margin-top: 1rem;
MG Top 1.5rem
margin-top: 1.5rem;
MG Bottom 0
margin-bottom: 0;
MG Bottom 1rem
margin-bottom: 1rem;
MG Bottom 1.5rem
margin-bottom: 1.5rem;
MG Left 0
margin-left: 0;
MG Left 1rem
margin-left: 0;
MG Left 1.5rem
margin-left: 1.5rem;
MG Right 0
margin-right: 0;
MG Right 1rem
margin-right: 1rem;
MG Right 1.5rem
margin-right: 1.5rem;

Padding

Use these global class names for a quick and easy way to apply padding.

PD Top 0
padding-top: 0
PD Top 1rem
padding-top: 1rem;
PD Top 1.5rem
padding-top: 1.5rem;
PD Bottom 0
padding-bottom: 0
PD Bottom 1rem
padding-bottom: 1rem;
PD Bottom 1.5rem
padding-bottom: 1.5rem;
PD Left 0
padding-left: 0
PD Left 1rem
padding-left: 1rem;
PD left 1.5rem
padding-left: 1.5rem;
PD Right 0
padding-right: 0
PD Right 1rem
padding-right: 1rem;
PD Right 1.5rem
padding-right: 1.5rem;

Grids

Use these class names on a div to construct a fast layout.

2 Column Grid
3 Column Grid
4 Column Grid