Want to learn how to unlock your behavioral data with reverse ETL? 🚀 Get our free ebook to do more with your data today.

Web Styleguide

-- Color Palette

Teal
#89f4ea
Purple Light
#807ff0
Purple
#4450e7
Indigo
#2f2c81
Indigo Dark
#090051
Fuchsia
#ef54ac
Fuchsia Light
#fdeef7
Eggshell
#fffcf3
Yellow Light
#fff799
Yellow
#fef047
Yellow Dark
#ffc20e
Purple X-Light
#e6e5fc
Teal Light
#e6e5fc

-- Typography - Gratimo Classic (Census)

All <h1> or .h1

All <h2> or .h2

.h2_alt

.h2_light

All <h3> or .h3

.h3_alt

All <h4> or .h4

All <h5> or .h5

All <p> OR .p

.p_largestText

.p_largerText

-- Button Styles

.p_largerText.highlight__textLink
.p_largerText.highlight__textLink.bold
.highlight__textLink

-- Rich Text Styles

.richText, h2

The rich text element is standard and 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.

heading h5

Heading h3

  • Example of an unordered list in this rich text box for stories
  • Another item of this list
  1. An example of an ordered list in this rich text box for stories
  2. Another ordered list item

Heading h4

This is a rich text element in webflow with lots of different functions and options. This is just an example to show you what styles this rich text field class name will produce.

.richText.larger, h2

The rich text element uses a larger baseline <p> and 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.

heading h5

Heading h3

  • Example of an unordered list in this rich text box for stories
  • Another item of this list
  1. An example of an ordered list in this rich text box for stories
  2. Another ordered list item

Heading h4

This is a rich text element in webflow with lots of different functions and options. This is just an example to show you what styles this rich text field class name will produce.

.richText.larger.sync, h2

The rich text element uses a larger baseline <p> and 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.

heading h5

Heading h3

  • Example of an unordered list in this rich text box for stories
  • Another item of this list
  1. An example of an ordered list in this rich text box for stories
  2. Another ordered list item

Heading h4

This is a rich text element in webflow with lots of different functions and options. This is just an example to show you what styles this rich text field class name will produce.

.richText.largest, h2

The rich text element uses the largest baseline <p> size and it is suggested you limit its use to create and format only headings and paragraphs. Just double-click and easily create content. Please note the standard heading size <h3> is not recommended for use here as it is too close in size.

heading h5

Heading h4

  • Example of an unordered list in this rich text box for stories
  • Another item of this list
  1. An example of an ordered list in this rich text box for stories
  2. Another ordered list item

-- Custom Bulleted (:check) unordered list

  • This is a custom bullet list used for any checkmark list item
  • You won't see the bullet in the Webflow designer panel because it is programmed in the custom code settings.

-- Site Notes

Throughout this site you will see high-level control classes as well as specific naming systems. Below are some things to look out for when developing on this site:

Naming

"__" = Used as a prefix for common html and common Webflow elements.

Examples
  • For a list: "uniqueListName__list"
  • For an item of above list: "uniqueListName_list__item"

Controls

Overrides/Adjustors
  • uniqueName__adjust = custom styling specific to this group of elements
  • uniqueName__element = custom styling specific to this image (eg. GDPRCert__image)
  • inlineblock__span = wraps the selected text element to prevent line breaking
  • medium__span = wraps the selected text element and changes the font-weight property to "500" or "medium".

Spacers
  • spacer_100 = 100px
  • spacer_80 = 80px
  • spacer_60 = 60px
  • spacer_40 = 40px
  • spacer_30 = 30px
  • spacer_20 = 20px
  • spacer_10 = 10px

Page Building
  • body_inner = used to wrap all content inside the <body>
  • page_content = used to wrap all content between <header> and <footer> sections

sections & section controls

Sections are made of three consecutive elements, each inside the other:

  1. section
  2. section_control
  3. section_content

All sections are transparent background by default, but you can change the color by adding the following to your "section" class:

  • For X-Light Purple, add "color-1"
  • For Fuchsia Light, add "color-2"
  • For Teal Light, add "color-3"
  • For Yellow Light, add "color-4"

All section_content elements are 1200px max-width by default, but can be adjusted by adding the following classes:

  • For 1225px max-width, add "x-large"
  • For 1000px max-width, add "small"
  • For 800px max-width, add "x-small"
  • For 620px max-width, add "xx-small"

Any additional customization can be made by adding another uniqueClassName and applying your styles.

More about using SVGs:

Direct Embed

In order to responsively control the height and width of an SVG asset, you must remove the "height" and "width" attributes from the parent SVG tag. Keep the "viewport" attribute.

Additionally, to control the color of a 1-color SVG asset via the Webflow CSS style panel replace all instances of hexcodes in the SVG code with "currentColor".

Video Tutorial - Direct Embed

<object> Embed

SVG assets that can be loaded directly into an embed module–those that do not exceed 10,000 character code module limit–should be. Other, more complex illustrations must be loaded as SVGs by using the <object> method. See code module below.

-- Build a Customer Story

Duplicate Existing Content

  1. Duplicate and existing story page.
  2. Delete all content except for the hero and tech stack sections.
  3. Change the remaining information for your new story.

Add new sections

  1. Select the "page_content" layer from your Navigator panel
  2. Select the Symbol tool in the left side panel
  3. Select the appropriate Story-Section__Color section starter. Page color order is purple, pink, blue, repeat.
  4. Once added to the page, with the symbol selected, detach the symbol from its instance by right-clicking the symbol name in the top left area of the symbol. Select "Unlink from instance". You can now edit this section (add elements) without affecting the original symbol.

Add reusable story blocks/elements

  1. Select the "section_control" layer from your Navigator panel
  2. Select the Symbol tool in the left side panel
  3. Choose from any symbol that begins with Story-Element to add to the currently selected section.
  4. Once your symbol is added to the page, with the symbol selected, detach it from the original instance by right-clicking the symbol name in the top left area of the symbol. Select "Unlink from instance". You can now edit this element (change text/images/etc) without affecting the original symbol.

Important Notes! - Unique sizing for images

  • To adjust width sizing of a story image, delete any secondary class names from the element and add your own unique name. For example, for an image asset with class name "...__image example-01": Delete "example-01" from the class name or duplicate the class name and add to class/rename "my-unique-name". This allows you to create a unique style setting without affecting the main element or any other existing element with the same class name.
  • ALL reusable story elements come with a parent "section_content" <div> wrap. This controls the varying widths of content and should stay in tact around each story element as you are building.
  • Use "spacer" <div> elements to add a bit of extra padding between elements if needed.

Video Tutorial - Full customer story build

https://www.loom.com/share/5554c1cb7f364817afdf9510f946ea84