Customize

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.

Onyx
#33302D
BG Onyx
Cotton
#FFFEFE
BG Cotton
Sand
#F0EFED
BG Sand
Light Sand
#F9F9F8
BG Light Sand
Cloud
#E7EAEC
BG Cloud

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
Onyx
#33302D
Text Onyx
Aa
Onyx 70
#33302D / Opacity: .7
Text Onyx 70

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.

Antic Didone
Headings
Weight Used: Normal (400)
Source: Google Fonts
Palanquin
Body & Text Elements
Weight Used: Light (300), Medium (500)
Source: Google Fonts
Allison
Special Text Treatments
Weight Used: 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: 4rem / Line-height: 1.15

Display Heading

H1. Heading

H1. Style Heading

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

All H1 Headings
H1 Style

H2. Heading

H2. Style Heading

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

All H2 Headings
H2 Style

H3. Heading

H3. Style Heading

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

All H3 Headings
H3 Style

H4. Style Heading

H4. Style Heading

Font-size: 1.75rem / 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.25rem / Line-height: 1.15

All H6 Headings
H6 Style

Cursive Text

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

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

Components

Buttons & Links

Components with a single class name are shown. Some components would be restricted by implementing a Webflow component, so some won't have the green component indicator around them.

Primary Button
Primary Button
Secondary Button
Secondary Button
Text Link
All Links
Primary Nav Link
Primary Nav Link
Secondary Nav Link
Secondary Nav Link
Navbar Link
Navbar Link
Nav Dropdown
Primary Footer Link
Primary Footer Link
Secondary Footer Link
Secondary Footer Link
CTA Link Left
CTA Link Right

Forms

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

Cards

Tabs

Tab 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.

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!

Tan living room with large black windows
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

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

Helpers

Center Align
Aligns text elements to the center of the screen