[CLIENT] Website Style Guide

A handy style guide for [client] website

Logo

Colours

Primary and Accent Colours

Primary Colour 1

Mavn Red
#FF2D2D

Primary Colour 2

Mavn Red
#FF2D2D

Accent Colour 1

Mavn Red
#FF2D2D

Accent Colour 2

Mavn Red
#FF2D2D

Grey Text Colours and Backgrounds

Primary Colour 1

Mavn Red
#FF2D2D

Primary Colour 2

Mavn Red
#FF2D2D

Accent Colour 1

Background
#FF2D2D

Accent Colour 2

Mavn Red
#FF2D2D

Typography

Heading 1

Font Family:       Montserrat
Font Size:            45px
Font Colour:       #333
Font Weight:       700
Line Height:        1.15

The quick brown fox jumps over the lazy dog

Heading 2

Font Family:       Montserrat
Font Size:            36px
Font Colour:       #333
Font Weight:       500
Line Height:        1.15

The quick brown fox jumps over the lazy dog

Heading 3

Font Family:       Montserrat
Font Size:            26px
Font Colour:       #333
Font Weight:       300
Line Height:        1.15

The quick brown fox jumps over the lazy dog

Heading 4

Font Family:       Montserrat
Font Size:            18px
Font Colour:       #333
Font Weight:       300
Line Height:        1.15

The quick brown fox jumps over the lazy dog

Body Text

Font Family:       Roboto
Font Size:            16px
Font Colour:       #333
Font Weight:       300
Line Height:        1.5

Lorem ipsum dolor sit amet, nam ad ipsum ludus intellegat, mei nonumes noluisse in, posse omnium indoctum sed ea. Ullum quodsi est ad. Ferri etiam hendrerit ius ea. Pro et quem oporteat, ei soleat convenire nec. Eam tritani tibique consequat id, sit an prima ornatus, eu quando democritum quo.

Pri ne utinam iudicabit. Solum aperiri salutandi usu an, essent definiebas eam ea. No nonumes omittantur necessitatibus eum, vim ei feugiat blandit, vis ei nostrud vulputate.

Sample Usage

The quick brown fox jumps over the lazy dog

Lorem ipsum dolor sit amet, nam ad ipsum ludus intellegat, mei nonumes noluisse in, posse omnium indoctum sed ea. Ullum quodsi est ad. Ferri etiam hendrerit ius ea. Pro et quem oporteat, ei soleat convenire nec. Eam tritani tibique consequat id, sit an prima ornatus, eu quando democritum quo.

  • Te nam solum mucius inermis.
  • Everti efficiendi no pro, et vel inani falli altera.
  • No eius convenire nam, vim probo constituam ut.

 

  1. Integre omnesque reprimique eum ut, eam at tibique indoctum.
  2. Tibique suscipit cotidieque at vim, vis quis amet in.
  3. Per ad dicant salutatus.

 

Ne choro iudico primis qui, nam splendide reformidans at, ei usu ullum explicari.

 

Pri ne utinam iudicabit. Solum aperiri salutandi usu an, essent definiebas eam ea. No nonumes omittantur necessitatibus eum, vim ei feugiat blandit, vis ei nostrud vulputate.

Button Styles

Primary Colour Buttons

FILLED BUTTONS

Normal

OUTLINED BUTTONS

Normal

FILLED ICON BUTTON

Normal

OUTLINE ICON BUTTON

Normal

Secondary Colour Buttons

FILLED BUTTONS

Normal

OUTLINED BUTTONS

Normal

FILLED ICON BUTTON

Normal

OUTLINE ICON BUTTON

Normal