Style Guide
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-xl
display-l
display-m
display-s
heading-xl
heading-l
heading-m
heading-s
heading-xs
heading-xxs
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.
Typography / Text Sizes
Typography / Text Utilities
Font Family
Font Style
Font Weight
Text Leading / Line Height
Text Tracking / Letter Spacing
Text Align
Text Decoration
Text Transform
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)
When you change global color swatches on this page, the changes are applied to everything that is linked to said swatches. This includes text elements, alias color styles, global color styles, and components.
This is a necessary step to perform at the beginning of every new project to ensure that colors are consistent between the design document and the development build.
Colors / Alias Colors
Background Colors
Text Colors
Border Colors
Colors / Global Colors
Global Colors
Every color within this system has a subsequent background color, text color, and border-color associated with it. All global color classes can are stored on the "Classes" page within the template folder.
To achieve your desired color, simply follow this naming structure when searching for color classes:
Background-color
For background color, type out "bg-color-[name][number]" or .bg-color-primary50 as an example.
Text-color
For text color, type out "text-color-[name][number]" or .text-color-primary50 as an example.
Border-color
For border-color: "border-color-[name][number]" or .border-color-primary50 as an example.
Brand / Logos
Brand / Favicon & Webclip
Brand / Open Graph Image
