Developer Tools

PostHog

posthog.com15 colors4 componentsRoundHogMulti-page · 12 screens

PostHog automatically diagnoses problems, fixes bugs, and generates pull requests – all without you having to prompt it.

Remix Visit

Remix

Visit

12 screenshots captured· posthog.com

1 / 12 · PostHog – Your product’s context layer · Above the fold

Preview

the generated design system

Switch between the Visual preview, the rendered DESIGN.md and the Raw file.

Design tokens

Extracted from posthog.com

Primary

#CD8407

Primary CTA, brand accent, active state

#EB9D2A

Secondary accent / hero band

#F54E00

Inline link colour

#374151

Accent / decorative

#6B7280

Accent / decorative

#B62AD9

Accent / decorative

#F35454

Accent / decorative

Neutral

#EEEFE9

Default page background

#FFFFFF

Card / panel background

#000000

Headings / primary text

#111111

Body copy

#111827

Captions, secondary text

#23251D

Tertiary / placeholder text; label colour on brand surfaces

#B17816

1px borders and dividers

#65675E

Neutral

Typography · RoundHog

body14px · 500 · 24.8889px

body15px · 600 · 25.7143px

caption13px · 500 · 16.25px

body15px · 500 · 22.5px

body14px · 700 · 20px

body15px · 700 · 25.7143px

button13px · 500 · 13px

body13px · 700 · 19.5px

nav-link16px · 500 · 24px

body14px · 400 · 20px

body18px · 600 · 28px

list-item16px · 400 · 24px

heading18px · 600 · 28px

body18px · 700 · 27px

caption12px · 500 · 18px

heading36px · 700 · 54px

h224px · 700 · 32px

button14px · 600 · 20px

h319.2857px · 600 · 30px

link16px · 500 · 24px

button14px · 700 · 20px

button14px · 500 · 16px

heading36px · 700 · 40px

body14px · 600 · 20px

button13px · 700 · 23.1111px

h136px · 800 · 40px

h230px · 700 · 40px

h324px · 600 · 36px

body18px · 500 · 27px

link14px · 600 · 20px

button18px · 500 · 32px

body17px · 500 · 25.5px

body12.8297px · 600 · 12.8297px

body17.5px · 700 · 24.0625px

body15.3956px · 500 · 21.5539px

body13.8561px · 600 · 19.3985px

h160px · 700 · 60px

h320px · 700 · 28px

h418px · 700 · 28px

body16px · 500 · 24px

link16px · 600 · 24px

button16px · 600 · 22px

list-item15px · 500 · 25.7143px

heading24px · 700 · 32px

heading16px · 700 · 24px

button15px · 700 · 22.5px

h130px · 700 · 36px

body16px · 400 · 24px

button15px · 400 · 25.7143px

button15px · 500 · 25.7143px

button14px · 400 · 20px

heading14px · 600 · 20px

body15px · 400 · 22.5px

heading20px · 700 · 28px

heading21.4286px · 700 · 30px

button18px · 700 · 28px

body16px · 600 · 24px

body13px · 400 · 24px

caption12px · 400 · 16px

h124px · 700 · 32px

quote18px · 500 · 32px

heading20px · 700 · 28px

body14px · 500 · 19.25px

heading30px · 700 · 36px

caption12px · 600 · 12px

caption12px · 700 · 16px

h130px · 800 · 36px

h221.4286px · 700 · 30px

h414px · 600 · 20px

link14px · 400 · 20px

quote15px · 500 · 25.7143px

body15px · 500 · 22.5px

body15px · 600 · 25.7143px

h136px · 700 · 45px

h214px · 700 · 20px

body10px · 500 · 17.1429px

link15px · 500 · 25.7143px

heading14px · 700 · 17.5px

Typography · ui-monospace

code13px · 500 · 18.85px

code15px · 500 · 22.5px

code13.5px · 700 · 16.875px

code11px · 500 · 19.5556px

code10px · 500 · 17.7778px

Typography · Source Code Pro

body13.5px · 500 · 18.225px

code13px · 500 · 18.85px

Spacing

8px

4px

12px

16px

32px

24px

20px

48px

Elevation

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

Components · 4

Remixes of PostHog

Latest remixes

No public remixes yet. Be the first to make one.

Remix it