PostHog design system

PostHog's website (posthog.com) uses a light interface with #e1d7c2 as its primary color and IBM Plex Sans Variable as the main typeface, with Open Runde alongside it. designlang measured 11 font sizes from 12px to 36px, 8 spacing values, 4 corner radii.

Captured 25 June 2026Light UI5,000 elements read

Download tokens Read it yourself

PostHog colors

The brand roles and neutrals posthog.com renders, with how many elements use each one.

Brand colors

Primary#e1d7c217 uses
Secondary#eb9d2a7 uses
Accent#eeefe918 uses

Neutrals

#0000007,110 uses
#4d4f461,332 uses
#374151617 uses
#23251d166 uses
#9ea096111 uses
#65675e62 uses
#bfc1b737 uses
#ffffff31 uses
#b6b7af14 uses
#13131614 uses

Backgrounds

#e5e7e0
#e1d7c2
#ffffff
#eeefe9
#fdfdf8
#2f80fa
#f3f4f0

Text colors

#00000016.84:1 on #e5e7e0
#23251d12.44:1 on #e5e7e0
#73756b3.75:1 on #e5e7e0
#65675e4.61:1 on #e5e7e0
#4d4f466.68:1 on #e5e7e0
#9ea0962.13:1 on #e5e7e0
#3741518.26:1 on #e5e7e0
#11182714.22:1 on #e5e7e0

Contrast checks (WCAG 2.1)

Text and background pairs found together on the page; 96% of them pass.

Text	Background	Ratio	Result
`#ffffff`	`#2f80fa`	3.76:1	Fails AA
`#4d4f46`	`#e1d7c2`	5.83:1	AA
`#000000`	`#eb9d2a`	9.39:1	AAA
`#4d4f46`	`#ffffff`	8.33:1	AAA

PostHog fonts and type scale

Every font family and size in use, read from computed styles rather than the CSS source.

Font families

IBM Plex Sans Variable: sans, body (3,801 elements)
Open Runde: sans, most text (1,192 elements)
Source Code Pro: mono, body (1 elements)

Body text: 15px at weight 400, line height 25.7143px.

Weights in use: 400, 500, 600, 700, 800.

Type scale

Size	Weight	Line height	Tracking	Used on
36px	700	54px	normal	p
24px	800	32px	-0.6px	h1, div, svg, path
21.4286px	700	30px	-0.535714px	h2
20px	700	28px	normal	s, span
19.2857px	600	30px	-0.482143px	h3
18px	700	27px	normal	p, br, strong
16px	400	24px	normal	html, head, meta, link
15px	400	25.7143px	normal	article, div, p, img
14px	600	20px	normal	button, svg, path, span
13px	500	13px	normal	button, div, svg, path
12px	400	16px	normal	button, svg, path, span

Spacing and radii

Spacing scale

1px
20px
32px
48px
64px
120px
144px
220px

Corner radii

2px
5px
8px
pill

Pill-shaped controls are a large share of the rounded elements. 2 distinct box shadows.

Motion

The motion reads as mixed.

Durations

xs: 150ms
md: 300ms

Easing

custom (43 uses): cubic-bezier(0.4, 0, 0.2, 1)

Design system audit

designlang scores how consistently a site uses its own values. How the audit works.

Overall

87/100, grade B

Components found: buttons (48), cards (2), links (100), navigation (2), footer (1), tabs (4).

By category

Color Discipline	80/100
Typography Consistency	80/100
Spacing System	100/100
Shadow Consistency	100/100
Border Radius Consistency	100/100
Accessibility	96/100
CSS Tokenization	100/100

1 WCAG contrast failures
541 !important rules — prefer specificity over overrides
94% of CSS is unused — consider purging
7683 duplicate CSS declarations

Download the tokens

The files designlang wrote for posthog.com. Run it yourself for a fresh read: npx designlang posthog.com.

The core values as CSS variables

:root {
  --color-primary: #e1d7c2;
  --color-secondary: #eb9d2a;
  --color-accent: #eeefe9;
  --color-background: #e5e7e0;
  --color-text: #000000;
  --color-neutral-1: #000000;
  --color-neutral-2: #4d4f46;
  --color-neutral-3: #374151;
  --color-neutral-4: #23251d;
  --font-primary: "IBM Plex Sans Variable", sans-serif;
  --font-secondary: "Open Runde", sans-serif;
  --radius-sm: 2px;
  --radius-md: 5px;
  --radius-lg: 8px;
}

Read posthog.com yourself

Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.

Get started CLI reference

Brands with a similar design

All design systems

Postman design system

Light UI, inter, #e05320

Mintlify design system

Light UI, inter, #faf8f5

Airbnb design system

Light UI, Airbnb Cereal VF, #ff385c

Duolingo design system

Light UI, duolingo-sans, #d7ffb8

Quick answers

What font does PostHog use?

posthog.com sets most of its text in IBM Plex Sans Variable (3,801 elements), with Open Runde and Source Code Pro alongside it. designlang read this from the computed styles of the live page on 25 June 2026.

What are PostHog's brand colors?

The brand roles on posthog.com are primary #e1d7c2, secondary #eb9d2a and accent #eeefe9, on a #e5e7e0 background. The neutrals used most are #000000, #4d4f46 and #374151.

How do I use the PostHog design system in my own app?

Download the DTCG tokens, Tailwind config or CSS variables on this page, or run npx designlang posthog.com for a fresh read. To apply the look to an existing repo, Retheme maps the tokens onto your Tailwind or shadcn theme and opens a pull request.

Is this the official design system?

No. It is measured from posthog.com's public pages on 25 June 2026, so it shows what the site renders, not PostHog's internal source files. PostHog is a trademark of its owner and is not affiliated with designlang.

Measured from the public pages of posthog.com on 25 June 2026. PostHog is a trademark of its owner; designlang is not affiliated with it. More: the full PostHog brand kit, the token extraction guide and the markdown version of this page.