This is my style guide. I also have a colophon, which explains what I used to build my website. This document talks more about the visual design.

Voice & Tone

My "brand" is a visual representation of my personality and goals. I would like to exhibit formal, clean, and sensible. Another value I'd like to display is friendliness. I want to be kind, warm, and inviting. This dichotomy of logic and emotion influences all my decisions, and I want my brand to reflect that.


We really only use 3 levels of headings. This is largely for visual taste, readability, and the user's sanity. Unless you're writing an academic report, web pages generally aren't detailed enough to merit a 4 levels of headings. If you feel the need for a 4th level, try restructuring your content and/or using different components.

Block-level Elements

This is a blockquote

  1. List
  2. of
  3. Things
col col col
table without text
rows upon rows
col col col
has detail text
another pointless row
Technically, this is just a description.
function foo(bar) {
    return bar;

Inline Elements

  1. It's a footnote. ↩︎