Discover how you can scale your data with TechCues
Learn More

Style Guide

This styleguide provides a central location to make broad stylistic changes to your site. Updating colors, typography and some graphic elements is quick and easy with the use of Webflow's visual website builder. If you need additional help, Webflow University provides a robust library of videos, tutorials and resources.

Visit Webflow University

Colors

Making updates to the site's color palette is quick and easy. Simply select one of the color swatches below and edit the pre-defined swatch in the background color inspector panel. For an overview of the background styles you can set on an element, visit Webflow University.

Primary / Lightest
Primary / Lighter
Primary / Light
Primary / Base
Primary / Dark
Primary / Darker
Primary / Super Dark
Primary / Super Dark
Neutral / Lightest
Neutral / Lighter
Neutral / Light
Neutrals / Base

Typography

Making updates to the typography on the site is quick and easy. Simply select a style below, select the appropriate HTML Tag in the Selector Panel and adjust to your desired typeface. To learn more about Webflow's HTML Tags, visit Webflow University.

Heading 1, Inter, 48px / 140%

AaBbCc

Heading 2, Inter, 36px / 140%

AaBbCc

Heading 3, Inter, 30px / 140%

AaBbCc

Heading 4, Inter, 24px / 150%

AaBbCc

Heading 5, Inter, 20px / 150%
AaBbCc
Heading 6, Inter, 14px / 150%
AaBbCc
Section Description, Inter, 18px / 160%

Lorem ipsum 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.

Default Paragraph, Inter, 18px / 160%

Lorem ipsum 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.

Text Link

A text link inside a paragraph

A text link inside of a text block.
Rich Text Element

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!

Text link

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.

Caption, Inter, 15px / 160%

Lorem ipsum 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.

Block Quotes
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.
Numbered List
  1. Lorem ipsum consectetur adipiscing elit.
  2. Lorem ipsum consectetur adipiscing elit.
  3. Lorem ipsum consectetur adipiscing elit.
Unumbered List
  • Lorem ipsum consectetur adipiscing elit.
  • Lorem ipsum consectetur adipiscing elit.
  • Lorem ipsum consectetur adipiscing elit.
Figures & Captions
Lorem ipsum consectetur adipiscing elit.

Buttons

Updating the buttons for the site is quick and easy. Simply select the button you would like to change, and make the necessary adjustments in the properties panels.

Default Button

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.

Table of contents H2Table of contents H3Table of contents H4Table of contents H5
This is some text inside of a div block.

Heading 1

Heading 2

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.