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. This approach is utilized across multiple sections within the template.

Black
#000
BG Black
Black Gradient
rgba (0, 0, 0, 0.2)
BG Black Gradient
Pearl
#F5F5F5
BG Pearl
White
#FFFFFF
BG White
Anchor
#44464C
BG Anchor
Ash
#5D5F64
BG Ash
Orange
#F78F5E
BG Orange
Orange 2
#F48234
BG Orange 2

Text Colors

To apply a text color to any element, simply assign a class name to it. This approach is utilized across headings and paragraphs within the template.

Aa
Black
#000
Text Black
Aa
Midnight 70
#000/ Opacity: .7
Text Midnight 70
Aa
Midnight 50
#000/ Opacity: .5
Text Midnight 50
Aa
Pearl
#F5F5F5
Text Pearl
Aa
Pearl 70
#F5F5F5 / Opacity: .7
Text Pearl 70

Additional Color

Orange 2
#F48234

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.

Rajdahani
Headings
Weight Used: Normal (400), Medium (500), Semi Bold (600)
Source: Google Fonts
Merriweather
Body
Weight Used: Normal (400), Medium (500), Semi Bold (600)
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: 4rem / Line-height: 4rem

Display Heading

h1. Heading

h1 Style Heading

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

All H1 Headings
H1 Style

h2. Heading

h2 Style Heading

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

All H2 Headings
H2 Style

H3. Heading

H3 Style Heading

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

All H3 Headings
H3 Style

h4. Heading

h4 Style Heading

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

All H4 Headings
H4 Style
h5. Heading
h5 Style Heading

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

All H5 Headings
H5 Style
h6. Heading
h6 Style Heading

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

All H6 Headings
H6 Style

Eyebrow Heading

Font-size: 1.375rem / Line-height: 1.375rem

Eyebrow Heading

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: 2rem

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

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

All Ordered Lists
  • Example Unordered List
  • Example Unordered List

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

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: 2rem

All Block Quotes

Extras

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: 2.5rem / Line-height: 3rem

Callout Text

Componets

Buttons & Links

Primary Button
Primary Button
Secondary Button
Secondary Button
Text Link
All Links
Navigation Link
Navigation Link
Footer Link
Primary Footer Link
Nav Dropdown
Dropdown
CTA Link Pearl
CTA Link Pearl
CTA Link Midnight
CTA Link Midnight

Forms

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

Cards

Tabs

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!

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.

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.

Xsmall Container
Small Container
Medium Container
Large Container

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

Helpers

Center Align
Aligns text elements to the center of the screen