The purpose of the styleguide is to show the various styles that are present on the site and to demonstrate how they can work in concerpt. The body copy is set in PT Serif at 21px (rem equavalient) with a colour of #444 Headings are set in PT Sans and have a colour of #222.

The typography uses the Augmented Fourth modular scale. You can see an example below and also on Type Scale

Heading 1

Heading 2

Heading 3

Heading 4

Headings 4, 5 and 6 all have a border. They are small and so need that little extra flourish to distinguish themselves from the rest of the copy.

Heading 5

So, above is a 5th level heading. Cool.

Heading 6

Heading 6 isn’t used very much on this site; but it’s nice to know it’s there, you know?


Images should not be placed directly beneath a heading. There should always be some content to give some context before actually presenting an image.

Images are centered and extend beyond the constraints of the content. This draws more attention to them and breaks up the boxy nature of the left aligned content.

Images can be aligned to the left or to the right within content as well. For smaller images apply the .alignleft or .alignright class to get the desired effect.

Speaking of content, the links use a linear-background gradient to achieve a better underline. Find out how on Medium.


This paragraph has some code in it. It also has a lovely keyboard shortcut ⌘ + C which will never break onto two lines.

Here is some code:

<script src="jquery.js"></script>
<script src="dist/animatecss.min.js"></script>
  $(document).ready( function(){

Here is some code that is embedded from GitHub:

# Allow jQuery Validate to run validation on jQuery Chosen
# select boxes by changing the ignore selector from `:hidden`
ignore: '.no-validate'
# jQuery Validate doesn't mark fields as valid on hidden elements
# So when using Chosen we need to show the original input,
# give it focus and then hide it again
$('.js-chosen-select').on 'change', ->
'position' : 'absolute'
'left': '-9999px'
'opacity' : '0'
view raw hosted with ❤ by GitHub


  1. This is the first list item.

  2. This is the second list item.

  3. Red

  4. Green

  5. Blue

  6. Lists can have sublists

  7. This is an example of a sublist

  8. This list is ordered

  9. The same as the parent

  10. Unordered lists can have sublists too

    1. They can be ordered
    2. They can be unordered

Some headings have links in them

While the use of links in headings is discouraged, they work none-the-less.