Style Guide

Version 1.2

Typography / Global Font Family

To edit the font family and color used on all type elements, select the Body element and edit the Body (All Pages) class.

Font
This is the global font used on the site

Typography / HTML Headings

H1
Sample text is being used as a placeholder.

H2
Sample text is being used as a placeholder as real text.

H3
Sample text helps you understand how real text may look on your website.

H4
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

H5
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

H6
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

Typography / Text Styles

display-l

display-m

display-s

heading-xl

heading-l

heading-m

heading-s

heading-xs

heading-xxs

subhead-xl

subhead-l

subhead-m

subhead-s

subhead-xs

subhead-xxs

body-xl

body-l

body-m

body-s

body-xs

body-xxs

Overline

Caption

Typography / Other Tags

Paragraph

Block Quote

This is an unordered list item.
This is an unordered list item.
This is an unordered list item.

This is an unordered list item.
This is an unordered list item.
This is an unordered list item.

Typography / Rich Text

This is Heading 1 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 2 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 3 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 4 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 5 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 6 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

Paragraph

This is an unordered list item inside of a Rich Text
This is an unordered list item inside of a Rich Text
This is an unordered list item inside of a Rich Text

This is an ordered list item inside of a Rich Text
This is an ordered list item inside of a Rich Text
This is an ordered list item inside of a Rich Text

This is a block quote. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

figure example — This is an image caption

Typography / Text Sizes

text-size-xxs

text-size-xs

text-size-s

text-size-m

text-size-l

text-size-xl

text-size-xxl

text-size-3xl

text-size-4xl

text-size-5xl

text-size-6xl

text-size-7xl

text-size-8xl

text-size-9xl

text-size-10xl

Typography / Text Utilities

Font Family

text-family-sans (replace 'sans' with font name inside class name)

text-family-sans-2 (duplicate as needed)

Font Weight

text-weight-light

text-weight-regular

text-weight-medium

text-weight-semibold

text-weight-bold

Text Leading / Line Height

text-leading-none

text-leading-xtight

text-leading-tight

text-leading-snug

text-leading-normal

text-leading-relaxed

text-leading-loose

Text Tracking / Letter Spacing

text-tracking-tighter

text-tracking-tight

text-tracking-normal

text-tracking-wide

text-tracking-wider

text-tracking-widest

Text Align

text-align-left

text-align-center

text-align-right

text-align-justify

Text Decoration

text-decoration-underline

text-decoration-strike

Text Decoration

text-transform-uppercase

text-transform-lowercase

text-transform-capitalize

Colors / Color Grid

Use this color grid to replace Global Swatch colors. Select the swatch you want to edit and click click EDIT SWATCH (pencil icon)

05

10

20

30

40

50*

60

70

80

90

Neutral

Primary

Secondary

Tertiary

Success

Warning

Danger

Info

Colors / Alias Colors

Background Colors

.bg-color-base-01

.bg-color-base-02

.bg-color-dark

.bg-color-white

.bg-color-primary

.bg-color-secondary

.bg-color-tertiary

.bg-color-success

.bg-color-warning

.bg-color-danger

.bg-color-info

Text Colors

.text-color-base-01

.text-color-base-02

.text-color-base-03

.text-color-white

.text-color-primary

.text-color-secondary

.text-color-tertiary

.text-color-success

.text-color-warning

.text-color-danger

.text-color-info

Border Colors

.border-color-base-01

.border-color-base-02

.border-color-dark

.border-color-white

.border-color-primary

.border-color-secondary

.border-color-tertiary

.border-color-success

.border-color-warning

.border-color-danger

.border-color-info

Brand / Logos

Brand / Favicon & Webclip

Brand / Open Graph Image

open graph image

Icons / Icon Size

Icons / Icon Color

Elevation / Shadows

Elevation / Opacity

Webflow Elements / Buttons

Webflow Elements / Form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Webflow Elements / Tabs

This is the content of the Tab 1

This is the content of the Tab 2

This is the content of the Tab 3

This is the content of the Tab 4

Want to view components?

View Components