PostHog design system: fonts & colors

PostHog homepage, mobile — Mobile, 390px

Typography

scale ratio 1.189

Round Hogcss: RoundHogdisplay + body500 600 700 80054%
Menlocss: ui-monospacemono500 70044%
Source Code Proother400 500 7002%

style	family	size	weight	line	tracking
display	Round Hog	36px	800	1.111	-0.025em
headline	Round Hog	30px	700	1.333	-0.025em
title	Round Hog	18px	600	1.556	-0.025em
body	Round Hog	18px	500	1.5	0em
body-sm	Round Hog	15px	500	1.5	0em
label	Round Hog	14px	600	1.429	0em
mono	Menlo	15px	500	1.5	0em

Type scale

Aa10Aa11Aa12Aa13Aa13.5Aa14Aa15Aa15.5Aa17Aa18Aa20.5Aa24Aa30Aa36

Body size: 18px / 1.5
Display size: 36px
Display tracking: -0.025em
Case: sentence

Color

light scheme

Palette by painted area

Text on bg: 13.14:1
Muted on bg: 4.00:1
Accent on bg: 1.56:1
Dark mode: none

Space, shape & depth

Spacing scale

Corner radii

13455.5682022pill

Shadows (5)

Borders: hairline, 1px
Section padding: n/a

Components

exact computed values

button-primary

Get started - free

backgroundColor: #EB9D2A
textColor: #000000
rounded: 6px
padding: 0px 0px
height: 35.1px
fontFamily: Round Hog
fontSize: 13px
fontWeight: 700
border: 1px solid #B17816

button-secondary

Ask PostHog anything

backgroundColor: #B62AD9
textColor: #FFFFFF
rounded: 6px
padding: 10px 12px
height: 40px
fontFamily: Round Hog
fontSize: 14px
fontWeight: 600

card

rounded: 6px
padding: 0px
backgroundColor: #FDFDF8
border: 1px solid #BFC1B7
shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px

Layout & motion

Container: 979px
Grid columns: 2
Hero: left-aligned+media-below
Navigation: none-detected
Page height: 900px

Easing: cubic-bezier(0, 0, 0.2, 1)
Durations: 150ms 200ms 500ms 700ms
Transitions: 78
Keyframes: 7
Stack: gatsby, radix-ui, posthog, vercel

Page sections (1)

01footerShameless CTA

How PostHog compares

Body text: 18px: larger than 71% of indexed sites (median 16px).
Largest heading: 36px: smaller than 82% of indexed sites (median 60px).
Type scale: 1.19×: flatter than 85% of indexed sites (median 1.28×).
Container: 979px: narrower than 84% of indexed sites (median 1242px).
Text contrast: 13.1:1: lower than 85% of indexed sites (median 17.6:1).
Page length: 900px: shorter than 93% of indexed sites (median 8,217px).
Corner radius: Mostly 6px, shared by 14 of 274 indexed sites (5%).
Round Hog: The only site in the index that loads Round Hog.
Source Code Pro: One of 4 indexed sites that load Source Code Pro (1%).
Color scheme: Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.

In short

What font does PostHog use?

PostHog uses Round Hog (loaded as "RoundHog") for headings and body text. Menlo (loaded as "ui-monospace") is used for code. Source Code Pro is used for other.