Introduction

I created this doc as a way to codify skills in front end web development. This page might be something that you'd like to try and re-create. The rules here might even be useful as a boiler plate to create your own brand system.

Fonts

Specified fonts and font weights. The pangrams include every letter of the alphabet to show the font family as a whole.

Futura

For main headings, titles and advertisement headlines

A quart jar of oil mixed with zinc oxide makes a very bright paint.

font-family: "futura-pt, arial, sans-serif";

Mrs Eaves

For headings, paragraphs and body text.

The five boxing wizards jump quickly.

font-family: "mrs-eaves", Georgia, 'Times New Roman', serif;

Mrs Eaves Small Caps

For links, labels and navigation

A wizard's job is to vex chumps quickly in fog.

font-family: "mrs-eaves-roman-all-small-ca", Georgia, 'Times New Roman', serif;

Colours

Specified colours and codes web colours only. HEX, RGB and HSL

Harris Blue

  • #00e1ff
  • rgb(0, 225, 255)
  • hsl(187, 100%, 50%)

Harris Blue Hover

  • #001780
  • rgb(0, 23, 128)
  • hsl(229, 100%, 25%)

Typography

Specified styles and sizes for text content

Heading 1

Heading 2

Heading 3

Heading 4

Paragraph styles should be set with line height and appropriate margins.

Interface

Interface elements including buttons and forms