Typography

The primary colour for all typography on your website is #EEEEEE.

As mentioned in the introduction, the sizing of your headings differ between desktop and mobile breakpoints. Both desktop and mobile breakpoints have a base font size of 18px (1em). All pixel values have been rounded.

Desktop - Major Third Scale (1.25)
44px | 35px | 28px | 23px | 18px | 14px | 12px

Mobile - Minor Third Scale (1.20)
37px | 31px | 26px | 22px | 18px | 15px | 12px

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Desktop & Mobile: Arial | 18px / 1em | 140% | Bold

The quick brown fox jumps over the lazy dog.

Desktop & Mobile: Arial | 14px / 0.78em | 140% | Bold | All Caps

Paragraph

Lorem ipsum dolor sit amet, 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.

Desktop & Mobile: Arial | 18px / 1em | 150% | Normal

The .p1 class can have a number of combo-classes applied to it, such as -
‍
.small (reduces font size to 14px / 0.78em).
.tiny (reduces font size to 12px / 0.67em).
.centred (centre aligns the text).
.capitals (makes the the text all CAPS).
.no-max-width (disables the 65ch max-width setting).
.desktop-only (texts only displays on desktop breakpoints).
.mobile-only (text only displays on tablet & mobile breakpoints).

Text

This is a piece of text. Not quite the same as a paragraph element.

Desktop & Mobile: Arial | 18px / 1em | 150% | Normal

The .text class can also have the same combo-classes applied to it as the .p1 class.

Logos & Assets

Logo - White

Logo - Black

Favicon - 32x32px

Webclip - 256x256px

Buttons & CTAs

Button Text

Filled Button - Primary

Button Text

Filled Button - Secondary

Button Text

Filled Button - Icon

Button Text

Outlined Button - Primary

Button Text

Outlined Button - Secondary

Button Text

Outlined Button - Icon

Rich Text - Blog Posts

Rich text blocks (RTBs) are different from regular paragraph and text elements. RTBs allow you to format headings, paragraphs, quotes, images, videos, captions, and lists all within the one element.

RTBs are what will be used for the primary body of your blog posts.

orem ipsum dolor sit amet, 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.

‍

This is a H2 heading

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

‍

This is a H3 heading

‍

This is a H4 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

‍

This is a H5 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

‍

This is a H6 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

‍

‍

This is an ordered list -

Fully responsive
Cloneable
Swap in with your client's styles

‍

This an unordered list -

Fully responsive
Cloneable
Swap in with your client's styles

‍

Below is what block quotes will look like in your blog posts -

"Lorem ipsum dolor sit amet, consectetur adipiscing elit."

Other

You can use this section for any other important elements that you'll use throughout your client's website, such as -
‍
• Navigation
• Footer
• Icons
• Cards
• Form elements
• Social media share buttons

Thank you for checking out this style guide template. You can clone it here. If you have any questions about it, please feel free to message me on Twitter.

Introduction

Colours

Primary Colour

Secondary Colour

Other Colours

Typography

The quick brown fox jumps over the lazy dog.