PostHog – We make dev tools for product engineers

DesignScan preview · https://posthog.com · 2026-06-13

Colors

primary#eb9d2a
on-primary#111111
secondary#cd8407
on-secondary#23251d
background#ffffff
text#374151
accent-1#4d4f46
accent-2#111827
on-accent-2#ffffff
border#bfc1b7
muted-surface#eeefe9

Typography

headline-sm24px · 800 · lh 1.33
The quick brown fox jumps
title21px · 800 · lh 1.33
The quick brown fox jumps
title-1818px · 800 · lh 1.33
The quick brown fox jumps
body15px · 400 · lh 1.5
The quick brown fox jumps
label13px · 400 · lh 1.5
The quick brown fox jumps

Spacing

xs4px
sm8px
md12px
lg16px
xl20px
2xl24px
3xl32px

Radius

xs2px
sm4px
md6px
lg8px

Layout

sm425px
md640px
lg768px
xl900px
2xl1024px
3xl1280px

Elevation

sm
md

Components

button-primary · :active
button-secondary
surface · input · body-text · border

Body text on the surface color — this is what reading copy looks like.

divider
surface-muted
Subtle secondary surface — sidebars, sections, callouts.
link
Inline link example →
badge Badge