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-clases 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
#f5f5ec
T2
#020315
T3
#292929
T4
#e2e7f1
T5
#09b19

Secondary Colour

T6
#385982
T7
#021a69
T8
195, 198, 199, 0.8
T9
#f1674b

Other Colours

White
#ffffff
Black
#000000
Success
#00b04f
Error
#f19090

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 16px (1rem).
‍
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

H1

H1

Desktop: Changaone | 12.5rem | Normal
Mobile: Changaone | 7rem | Normal
H1.2

H1.2

Desktop: Changaone | 7.5rem | Normal
Mobile: Changaone | 3rem | Normal
H2

H2

Desktop: Changaone | 9.375rem | Normal
Mobile: Changaone | 5rem | Normal
H3

Heading 3

Desktop: Gilroy | 2.5rem | Bold
Mobile: Gilroy | 2rem | Bold
H4

Heading 4

Desktop: Gilroy | 2rem | Bold
Mobile: Gilroy | 1.75rem | Bold
H5
Heading 5
Desktop & Mobile: Gilroy | 1.5rem | Bold
H6
The quick brown fox jumps over the lazy dog.
Desktop & Mobile: Montserrat | 1rem | Medium
SUb HEading
This is some text inside of a div block.
Desktop & Mobile: Montserrat | 1rem | Medium
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: Montserrat | 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: Montserrat | 0.875rem | Light
Paragraph - PL

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: Gilroy | 1.5rem | Bold

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: Montserrat | 1rem | Normal

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

Text
This is a piece of text. Not quite the same as a paragraph element.
Desktop & Mobile: Montserrat | 1rem | Normal

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

Text
This is a piece of text. Not quite the same as a paragraph element.
Desktop & Mobile: Montserrat | 1rem | Normal

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

Text
This is a piece of text. Not quite the same as a paragraph element.
Desktop & Mobile: Montserrat | 1rem | Normal

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

Text
This is a piece of text. Not quite the same as a paragraph element.
Desktop & Mobile: Montserrat | 1rem | Normal

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

Logos & Assets

Logo - Black
Logo - White
Favicon - 32x32px
Webclip - 256x256px

Buttons & CTAs

Button Text
Button
Button Text
Button Outlline
Button Text
Filled Button - Primary
Button Text
404 Button
Button Text
Button Secondary
Button Text
Submit Button

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.

‍

Dzign Media Logo
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."

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.

‍

Dzign Media Logo
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."

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.

‍

Dzign Media Logo
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."
Website Style Guide
Introduction
Colours
Typography
Logos & Assets
Buttons & CTAs
Rich Text - Blog Posts