My Website Style Guide

Colors


White Smoke

#f5f5f5

For page Background Color

Steel Blue

#4682b4

For headings

Crimson

#DC143C

For warning buttons and notifications

Light Green

#90EE90

For success buttons and notifications

Fonts

Mulish

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.

Quicksand

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.

Inconsolata

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.


Text Styles

H1: Main page heading

  • Font-weight: 700 (Bold)
  • Font-size: 30px
  • Font-family: Mulish

H2: Subheading

  • Font-weight: 600
  • Font-size: 25px
  • Font-family: Quicksand

P: Paragraph text

  • Font-weight: 400
  • Font-size: 14px
  • Font-family: Inconsolata

Layout Styles

container: Main Layout Style

  • box-sizing: border-box
  • width: 95%
  • margin: 0 auto

section-box: Section Style

  • border: 2px solid gray
  • width: 95%
  • padding: 15px
  • margin-top: 15px