PostHog

PostHog

Product analytics platform

An open-source product analytics suite, branded around a hedgehog mascot and a playful, developer-friendly dark UI.

posthog.com

Color palette

Accent

Primary#f7a501

Primary brand color — key actions and emphasis.

Primary Pressed#dd9001

Pressed or hover state of its base color.

Primary Active#b17816

Pressed or hover state of its base color.

Charcoal#33342d

Accent color used within the product's own UI.

Mute#6c6e63

Accent color used within the product's own UI.

Ash#9b9c92

Accent color used within the product's own UI.

Stone#b6b7af

Accent color used within the product's own UI.

Accent Blue#2c84e0

Accent color used within the product's own UI.

Accent Blue Soft#dceaf6

Accent color used within the product's own UI.

Accent Red#cd4239

Accent color used within the product's own UI.

Accent Red Soft#f7d6d3

Accent color used within the product's own UI.

Accent Green#2c8c66

Accent color used within the product's own UI.

Accent Green Soft#d9eddf

Accent color used within the product's own UI.

Accent Purple#7c44a6

Accent color used within the product's own UI.

Accent Purple Soft#e7d8ee

Accent color used within the product's own UI.

Neutral

On Primary#23251d

Text and icon color on a solid primary fill.

Ink#23251d

Primary text color.

Body#4d4f46

Secondary or muted text.

Hairline#bfc1b7

Borders and dividers.

Hairline Soft#dcdfd2

Borders and dividers.

On Dark#ffffff

Text and icon color on a solid primary fill.

Canvas#eeefe9

Page background.

Surface Soft#e5e7e0

Card and panel surfaces.

Surface Card#ffffff

Card and panel surfaces.

Surface Doc#fcfcfa

Card and panel surfaces.

Surface Dark#23251d

Card and panel surfaces.

Link Blue#1d4ed8

Primary text color.

Link Teal#1078a3

Primary text color.

Type scale

Display Xl
36px · 700 · 1.5
Display Lg
24px · 800 · 1.33
Heading Lg
21px · 700 · 1.4
Heading Md
20px · 700 · 1.4
Heading Sm
18px · 700 · 1.5
Heading Sm Mixed
18px · 600 · 1.56
Body Md
16px · 400 · 1.5
Body Strong
16px · 600 · 1.5
Link Md
16px · 400 · 1.5
Body Sm
15px · 400 · 1.71
Body Sm Strong
15px · 600 · 1.71
Body Xs
14px · 500 · 1.43
Caption Md
14px · 700 · 1.71
Button Md
14px · 700 · 1.5
Code Sm
14px · 400 · 1.43
Code Xs
14px · 500 · 1.43
Caption Sm
13px · 500 · 1.5
Button Sm
13px · 500 · 1
Caption Xs
12px · 600 · 1.33
Utility Xs
12px · 700 · 1.33

Fonts

PrimaryIBM Plex Sans VariableWeights 400, 500, 600, 700, 800
Codeui-monospaceWeights 400
SecondarySource Code ProWeights 500

Spacing & shape

Xxs
2px
Xs
4px
Sm
8px
Md
12px
Lg
16px
Xl
24px
Xxl
32px
Section
80px
None
0px
Xs
2px
Sm
4px
Md
6px
Lg
8px
Full
9999px

Guidelines

  • Reserve Primary for primary actions and emphasis — it is the system's one accent color.
  • Keep type on the documented family set (IBM Plex Sans Variable, ui-monospace, Source Code Pro).
  • Use one of the documented corner radii (0px, 2px, 4px, 6px, 8px, 9999px) rather than a one-off value.
  • Build spacing from the documented scale (2px, 4px, 8px, 12px, 16px, 24px, 32px, 80px) instead of arbitrary padding.
  • Don't apply Primary as a full-page background or a large fill.
  • Don't introduce a second accent color alongside Primary.
  • Don't mix in an additional typeface beyond the ones documented here.