Website Style Guide

Colors

I have chosen a complementary color palette, comprising five custom colors ranging from beige to dark green. Hover over the colors to see the hexadecimal representations and the color names I have assigned to them.

Hexadecimal: #F4EFD2
Name: beige

Hexadecimal: #F3D944
Name: khaki

Hexadecimal: #D8E33D
Name: light green

Hexadecimal: #91BC3C
Name: green

Hexadecimal: #24310C
Name: dark green

Fonts

Titillium Web is a sans-serif font that I like to use in the main page heading element. It is easy to read.

Yanone Kaffeesatz is another sans-serif font that I like to use in subsequent page heading elements.

Zilla Slab is a serif font that I like to use for paragraph text and list items.

Typography

h1: Main Page Heading

  • font-family: 'Titillium Web', sans-serif;
  • font-size: 4em;
  • font-weight: 700 (bold);
  • text-align: center;
  • font-styles: normal & italic;

h2, h3, h4, h5 and h6: Subsequent Page Headings

  • font-family: 'Yanone Kaffeesatz', sans-serif;
  • font-size: 3em;
  • letter-spacing: 2px;
  • font-weight: 700 (bold);
  • font-styles: normal & italic;

Paragraphs (p) and List Items (li):

  • font-family: 'Zilla Slab', serif;
  • font-size: 1.5em;
  • font-weights: 400 (normal) & 700 (bold);
  • font-styles: normal & italic;