Style guide

Manage the look and feel of the entire website from our style guide. Style and components used on the site are documented here, and any changes made will be immediately visible across all pages.

Colors

The primary colors and shades of gray on the website are managed through the Global Swatch feature.

Primary 1

Secondary 1

Secondary 2

Secondary 3

Secondary 4

Dark

Light

Buttons

A variety of button styles are available throughout the website.

HTML Headings

Styles for HTML heading tags (H1-H6).

H1
All H1 Headings

Heading - H1

H2
All H2 Headings

Heading - H2

H3
All H3 Headings

Heading - H3

H4
All H4 Headings

Heading - H4

H5
All H5 Headings
Heading - H5
H6
All H6 Headings
Heading - H6
Heading classes

Heading classes are created to match the design style and apply them to different heading tags. This ensures that the style of heading tags that look good in design matches the recommended heading tags for SEO. For example, for page heading you use H1 tag but you want styling(Font size etc.) of H2. By using a "Heading H2" class in H1 tag will give the style of an H2 heading while still keeping the H1 tag for SEO purposes. This way, both visually appealing design and good SEO practices can be achieved.

H1
Heading H1
Heading H1
H2
Heading H2
Heading H2
H3
Heading H3
Heading H3
H4
Heading H4
Heading H4
H5
Heading H5
Heading H5
H6
Heading H6
Heading H6
Paragraphs

Different sizes of paragraphs and text styling are available.

P
All paragraphs

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.

P
Text Lead

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.

P
Text Small

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.

Inline text elements

Styling for common inline elements.

P
Text Mark

Suspendisse varius enim in highlight eros elementum tristique.

D
Text Delete

Suspendisse varius enim in highlight eros elementum tristique.

U
Text Underline

Suspendisse varius enim in highlight eros elementum tristique.

B
Text Bold

Suspendisse varius enim in highlight eros elementum tristique.

I
Text Italic

Suspendisse varius enim in highlight eros elementum tristique.

Text alignments

Text alignment styles are available to realign text to components.

Text Left

Text Left: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Center

Text Center: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Right

Text Right: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Blockquote

Styling for blockquotes.

This is a blockquote. Lorem comfort reached gay perhaps chamber his six detract besides add. Moonlight newspaper up its enjoyment agreeable depending. Timed voice share led him to widen noisy young. At weddings believed laughing although the material does the exercise of. Up attempt offered ye civilly so sitting to. Of acceptance insipidity remarkably is an invitation.
List Styles

Styling for ordered lists, unordered lists, and unstyled lists.

  1. This is an ordered list
  2. This is a list item within an ordered list
  3. Style each list item as you wish
  • This is an unordered list
  • This is a list item within an unordered list
  • Style each list item as you wish
  • This is an unbulleted list
  • This is a list item within an unbulleted list
  • Style each list item as you wish
Rich Text

The Rich Text Element (RTE) is used to create long-form content. For advanced styling, you can Learn more here

This is rich text heading

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.

  • This is an unordered list
  • This is a list item within an unordered list
  • Style each list item as you wish
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.

Type image caption here
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.
Form

A general style for Form elements.

Input
Textarea
Radio
Checkbox
Select
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Containers

Different types of container widths.

Container
1400px container
Container Medium
1200px container medium
Container Small
900px container small
Inner Container
800px inner container
Inner Container Small
600px inner container small
Inner Container
Left
800px inner container left
Section Spacings

To give sections more room to breathe and maintain all sections' spacing equally. In responsive, the spacing will be decreased.

Section Spacing
Padding Top Bottom 150px
Section Spacing Top
Padding Top 150px
Section Spacing Bottom
Padding Bottom 150px
Margins

Helper margin classes are available to add a margin between elements and keep spacing values consistent and unified throughout the site.

Margin bottom 0px
No Margin
Margin bottom 4px
Margin Bottom 4
Margin bottom 8px
Margin Bottom 8
Margin bottom 12px
Margin Bottom 12
Margin Bottom 16px
Margin Bottom 16
Margin bottom 20px
Margin Bottom 20
Margin bottom 24px
Margin Bottom 24
Margin Bottom 28px
Margin Bottom 28
Margin Bottom 32px
Margin Bottom 32
Margin bottom 36px
Margin Bottom 36
Margin bottom 40px
Margin Bottom 40
Margin Bottom 44px
Margin Bottom 44
Margin Bottom 48px
Margin Bottom 48
Margin Bottom 54px
Margin Bottom 54
Margin Bottom 60px
Margin Bottom 60
Margin Bottom 70px
Margin Bottom 70
Margin bottom 80px
Margin bottom 80
Photography

All images in this template are sourced from Pexels and Freepik and, are free for commercial use. Check out the license for Pexels here and Freepik here

Icons

All Icons in this template are sourced from Iconfinder, Flaticon and Bootstrap icon. Check out the license for Iconfinder here, Flaticon here and Bootstrap icon here.

Fonts

All fonts used in this template are available to use freely under the Google fonts license, Check out the license for Montserrat fonts license and Inter fonts license.

Important notes:
  • SVG: For a superior visual experience, we suggest using SVG icons and logotypes. To find a wide selection of SVG icons, you can browse Icon Finder and use the free filter to refine your search.
  • Resize your Images: It is important to resize your images before adding them to your website, rather than simply downloading and placing them as they are. The size and resolution of an image can have a significant impact, and using an image size of 1200px x 800px for a content size of 300px x 200px is unnecessary. Resize it to 300px x 200px.
  • Image Formats: There are mainly 2 common file types that are used for web images which are JPEG and PNG. For images with a Flat Background use JPEG images, for images with a Transparent background use PNG images.
  • Compress images to WebP: For a better loading site, compress existing image assets with the built-in WebP conversion tool. Please note, Webflow compression tool is currently not available within the CMS. You will need to manually convert them to WebP format and compress them separately.
  • Clean up: Clean up interactions and Clean up CSS styles before publishing your site.
  • Audit panel: Before going live with your site, find and fix accessibility issues with Webflow's Audit panel.
  • Compressing Images: For a better loading site, we recommend optimizing all your images using services like Tinypng.com
  • SEO: Before publishing your site, make sure to edit the Title Tag, Meta Description, etc. For more information on SEO and how to optimize your website, Visit Add SEO title and meta description and SEO and Webflow: the essential guide.
More Templates