Website Style Guide
Introduction
Colours
Typography
Logos & Assets
Buttons & CTAs
Rich Text - Blog Posts

Introduction

Welcome to the style guide for your website. You can use this page to quickly make changes to things such as fonts, text sizes, colours, buttons, and more. These changes will then be applied across your website.

To ensure your site is responsive and adapts to all devices, some elements will have different stylings across different breakpoints. For example, heading sizes on desktop breakpoints are slightly different to those on mobile breakpoints.

Your style guide is not viewable to the public, and can only be accessed with a password.

If you have any questions about this style guide or your website in general, then please do not hesitate to email me - marc@dzignemdia.com

Colours

The class can have a number of g-classes applied to it, such as -
‍
.bg** (bg** followed by the shade number will change the background colour).
.t* (changes the text colour).

Primary Colour

T1
#60b64c
T2
#F1674b
T3
#414141
T4
#8e8e8e
T5
#d1d1d1

Secondary Colour

T6
#121212
T7
#e3E3e3
T8
#f7f7f7
T9
194, 190, 179, 0.59
T10
#e3e3e3
T11
#011243

Other Colours

White
#EEEEEE
Black
#333333
Success
#00b04f
Error
#b00020

Typography

H1

H1

Desktop: Oswald | 7.6rem | Bold
Mobile: Oswald | 3.5rem | Bold
Hero H2

Hero Sub Head

Desktop: Cabin | 0.9rem | Medium
Mobile: Cabin | 0.8rem | Medium
H2

H2

Desktop: Cabin | 4.375rem | Semi Bold
Mobile: Cabin | 3rem | Semi Bold
H3

Heading 3

Desktop: Cabin | 3rem | Bold
Mobile: Cabin | 3rem | Bold
H4

Heading 4

Desktop: Cabin | 2rem | Bold
Mobile: Cabin | 2rem | Bold
H5
Heading 5
Desktop & Mobile: Cabin | 1rem | Medium
H6
Heading 6
Desktop & Mobile: Nunito | 0.75rem | Bold
Paragraph - P1

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: Nunito | 0.875rem | Light
Paragraph - P2

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: Nunito | 1rem | Light

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: Nunito | 1.5rem | Medium

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 - TX
This is a piece of text. Not quite the same as a paragraph element.
Desktop & Mobile: Nunito | 0.75rem | Normal

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

Text - TX0
This is a piece of text. Not quite the same as a paragraph element.
Desktop & Mobile: Cabin | 0.875rem | Normal

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

Text - TX1
This is a piece of text. Not quite the same as a paragraph element.
Desktop & Mobile: Nunito | 0.8rem | Normal

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

Text - TX2
This is a piece of text. Not quite the same as a paragraph element.
Desktop & Mobile: Nunito | 1rem | Bold

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

Text - TX3
This is a piece of text. Not quite the same as a paragraph element.
Desktop & Mobile: Cabin | 0.75rem | Semi Bold

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

Text - TX4
This is a piece of text. Not quite the same as a paragraph element.
Desktop & Mobile: Cabin | 2rem | Medium

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

Text - TX5
This is a piece of text. Not quite the same as a paragraph element.
Desktop & Mobile: Nunito | 0.9rem | Normal

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

Sub Heading Large
Sub Heading
Desktop & Mobile: Nunito | 1.3rem | Semi Bold
Sub Heading Small - shs
Sub Heading
Desktop & Mobile: Nunito | 1.3rem | Medium
H2 Italic
This is a piece of text. Not quite the same as a paragraph element.
Desktop: Oswald | 2.5rem | Medium
Mobile: Oswald | 2rem | Medium
Italic Text
This is a piece of text. Not quite the same as a paragraph element.
Desktop & Mobile: Nunito | 2.5rem | Normal
Italic Small
This is a piece of text. Not quite the same as a paragraph element.
Desktop & Mobile: Nunito | 0.875rem | Normal

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

Logos & Assets

Capto Logo in black
Logo - Black
Capto Logo White
Logo - White
Capto Favicon
Favicon - 32x32px
Capto Webclip
Webclip - 256x256px

Buttons & CTAs

Button Text
Button - Primary
Button Text
Button - Secondary
Button Text
Button - Secondary
Button Text
Button - Secondary
Button Text
Button - Secondary
Button Text
Button - Secondary
Button - Secondary
Button Text
Button - Secondary

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.

L

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

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.

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

‍

This is a H3 heading

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.

‍

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.

‍

Capto Logo in black
This is a figure/image caption

‍

This is an ordered list -

  1. Fully responsive
  2. Cloneable
  3. 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."

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.

L

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

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.

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

‍

This is a H3 heading

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.

‍

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.

‍

Capto Logo in black
This is a figure/image caption

‍

This is an ordered list -

  1. Fully responsive
  2. Cloneable
  3. 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."