Style Guide
Logo and Icon
Fonts
For Print
- Serif: Minion Pro
- Condensed: Alternate Gothic No 3 D
- Sans-Serif: San Francisco or Inter
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.
| #FF7366 | AAA Accessible on black |
| #FF4433 | AA Accessible on black |
| #FE1600 | AA Accessible on black |
| #E01600 | AA Accessible on white |
| #AA0E01 | AAA 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
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.