Style Guide

Fonts

We are using all system fonts so far. PT Serif is a font we also use on Thought Catalog.

Serif Font Stack

“PT Serif”, Charter, “Noto Serif”, Palatino, Palatino Linotype, Times, Times New Roman, serif

Sans Serif Stack

-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif

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