Style Guide

Logo and Icon

Fonts

For Print

For Web

  • Serif: Lora, PT Serif
  • Condensed: Oswald
  • Sans-Serif: System Fonts ( San Francisco, Helvetica, etc… )

Colors

There is no single Creepy Catalog red, pick one based on context. Using HSL color system, they all have a hue around 5. Use ConvertAColor if you’re not familiar with HSL.

#FF7366AAA Accessible on black
#FF4433AA Accessible on black
#FE1600AA Accessible on black
#E01600AA Accessible on white
#AA0E01AAA Accessible on white

Font Sizes

We use a fluid font size. It’s calculated like this:

( 15/16 * Browser Font Size ) + ( 1/320 * Viewport Width )

Here are the values at a few screen sizes where it results in whole numbers:

  • 320px Screen = 16px font
  • 640px Screen = 17px font
  • 960px Screen = 18px font
  • etc…

2em Heading 1

1.5em Heading 2

1.375em Heading 3

1.25em Heading 4

1.125em Heading 5
1em Heading 6

1em Paragraph text

0.875em Small

0.75em Extra Small

Content Widths

Default Content Width ( Max 32em )
Wide Content Width ( Max 64em )
Full Content Width ( 64em + 7.5vw )

Buttons

I can’t insert SVGs in post content. There are buttons that handle SVGs too. In any of these button styles, the SVG fill color works just like the text color.

Primary Buttons

Secondary Buttons

Default Buttons