Simple Website Design Guide

Simple Website Design Guide

Fonts & Colours

Fonts

Questrial

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.

Roboto

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.

Space Mono

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.

Colours

Placid Gray

#BFC9CA

Orange

#E59866

Midnight

#291C19

White

#FFFFFF

Soft Pink

#FCEBEB

Text Styles

H1: Main page heading

  • Font-weight: 700 (bold)
  • Font-size: 2em
  • Font-family: Space Mono

H2: Subheading

  • Font-weight: Bold
  • Font-size: 1.5em
  • Font-family: Roboto Condensed

P: Paragraph & Regular text

  • Font-weight: 400 (regular)
  • Font-size: 14px
  • Font-family: Questrial

LI LI a : List Items & Nav

  • Font-weight: 400 (regular)
  • Font-size: 14px A: 12px
  • Font-family: Questrial
  • LI a: Text Decoration Underline, Orange

Buttons

Button with hover style.

Button with active style.

Button with hover and active style.

Psuedo Classes


Grey:hover background-color: #E59866; box-shadow: 0px 2px #BFC9CA; color:#291C19;


Midnight:active {font-size: 22px;} Midnight:hover {background-color:rgba(229, 152, 102, 0) ; border: #291C19 solid 1px; color:#291C19;}


Orange:hover background-color:rgba(229, 152, 102, 0) ; border: #291C19 solid 1px; color:#291C19;} Orange:active {font-size: 22px;}