Style Guide

Here is a summary of some of the main styles used throughout the site. If you edit styles here, they will change across the site.

Typography

HTML Heading Tags

HTML tags define default Heading styles.

H1

This is a H1

H2

This is a H2

H3

This is a H3

H4

This is a H4

H5
This is a H5
H6
This is a H6

Typography

Other HTML Tags

HTML tags define default text styles.

All paragraphs

This is a paragraph.

All Links
This is a link.
All Quotes
This is a quote.
All Ordered Lists
  1. This is an ordered list.
  2. This is an ordered list.
  3. This is an ordered list.
All Unordered Lists
  • This is an unordered list.
  • This is an unordered list.
  • This is an unordered list.
Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a paragraph with a link.

  • This is an unordered list.
  • This is an unordered list.
  • This is an unordered list.
  1. This is an ordered list.
  2. This is an ordered list.
  3. This is an ordered list.
This is a quote.

Typography

Heading Styles

Use these text classes when the visual typography style you want doesn't match the default HTML tag.

Heading Style H1

This is Heading style H1.

Heading Style H2

This is Heading style H2.

Heading Style H3

This is Heading style H3.

Heading Style H4

This is Heading style H4.

Heading Style H5
This is Heading style H5.
Heading Style H6

This is Heading style H6.

Typography

Text Sizes

Use these text classes when the visual typography style you want doesn't match the default HTML tag.

Text Size Large

This is a paragraph with text size large.

Text Size Medium

This is a paragraph with text size medium.

Text Size Regular

This is a paragraph with text size regular.

Text Size Small

This is a paragraph with text size small.

Text Size Tiny

This is a paragraph with text size tiny.

Accent
Features

Color Palette

Background Color

These colors have been created using Variables. If you edit the Variable color, it will change every element that uses that color Variable.

Black #00000
White #ffffff
Light Gray #F6F6F6
Medium Gray  #E5E5E5
Dark Gray #AAAAAA

Color Palette

Text Color

These colors have been created using Variables. If you edit the Variable color, it will change every element that uses that color Variable.

Text Color Black
Text Color Black
Text Color Dark Gray
Text Color Dark Gray
Text Color White
Text Color White

Buttons

Button Primary Small
Button Text
Button Primary Regular
Button Text
Button Primary Large
Button Text
Button Text Only
Button Text
Button Full Width
Button Text
Button Icon

Icons

Uniform icons sizes used throughout the template.

Icon 1x1 XXSmall
Icon 1x1 XSmall
Icon 1x1 Small
Icon 1x1 Medium
Icon 1x1 Large

Forms

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

Structure

Structure

Core structure classes used throughout the template.

Page Wrapper
Main Wrapper
Container - Small
Container Medium
Container Large
Container Full Width
Padding Global
Padding Section Small
Padding Section Medium
Padding Section Large
Button Group

Layout

Multi-column layouts used throughout the template.

2 Column Grid
2 Column Grid Uneven Right
2 Column Grid Uneven Left
3 Column Grid
4 Column Grid

Spacers

Uniform spacer sizes used throughout the template.

Spacer XXXSmall
Spacer XXSmall
Spacer XSmall
Spacer Small
Spacer Medium
Spacer Large
Spacer XLarge
Spacer XXLarge
Spacer XXXLarge
Spacer XXXXLarge
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

' Karl ‘ the foggy city..