Style Guide

As I continue to develop my portfolio site, a challenge that I face is learning how to refine the visual identity of my site.

So, I created this style guide to help me with my challenge by showing the visual styles of each element that comprise of my portfolio — ensuring that all of the elements work consistently and cohesively.

Feel free to view the source code of this site on my GitHub repository. Drop me a message if you think there is something I can improve on my site, a typo maybe?

Colors

The shades of grey.

Grey Darker #333333
Grey Dark #555555
Grey #888888
Grey Light #aaadad
Grey Lighter #f0f0f0
Grey Lightest #f9f9f9

Fonts

Custom fonts served via Typekit.

Aa
Freight Sans Pro
Aa
Freight Text Pro
Aa
Freight Display Pro
Aa
Canada Type Gibson
Aa
Courier

Font Weights

A couple of font weights.

Aa Book
Aa SemiBold
Freight Sans Pro
Aa Book
Aa Book Italic
Aa Bold
Freight Text Pro
Aa Bold
Freight Display Pro
Aa SemiBold
Canada Type Gibson
Aa Regular
Courier

Font Sizes

There are 8 declared font sizes — excluding root size of 62.5%

The quick brown fox jumps over the lazy dog
45px — Triple size
The quick brown fox jumps over the lazy dog
37.5px — Title size
The quick brown fox jumps over the lazy dog
30px — Double size
The quick brown fox jumps over the lazy dog
22.5px — Larger size
The quick brown fox jumps over the lazy dog
18.75px — Large size
The quick brown fox jumps over the lazy dog
15px — Base size
The quick brown fox jumps over the lazy dog
13.125px — Small size
The quick brown fox jumps over the lazy dog
11.25px — Smaller size

Headings

Heading styles used for naming pages, sections, and articles.

This is a heading

Heading 1

This is a heading

Heading 2

This is a heading

Heading 3

This is a heading

Heading 4
This is a heading
Heading 5
This is a heading
Heading 6

List Items

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Quotes

Blockquotes — for quotes by someone else.

Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.

Steve Jobs

Quotes — for quotes by me.

I am absolutely blessed and I'm very grateful for where I am today

Dividers

Horizontal line for general use.

Dotted divider for separating sections.

Button

Only one type of button so far. This is an anchor tag styled as a button though.

Button