Home
DESIGN.mdStar on GitHub

PostHog

The single platform for all your product analytics, session replay, feature flags, A/B testing, and surveys.

Brand
red#F54E00Primary brand
yellow#F7A501Highlight, warn
teal#29DBBBData series 3
lilac#8567FFData series 5
purple#B62AD9Data series 6
Data Palette
green#6AA84FSuccess, series 1
blue#2F80FAInfo, series 4
pink#E34C6FError, series 7
salmon#F35454Danger state
gold#FFBA53Series 2 alt
Surfaces — Dark
bg#131316Page background
surface#232429Cards, panels
border#2F3037Dividers
text#EAECF6Primary text
text-muted#A8ABB8Secondary text
Surfaces — Light
bg#F5F5F0Warm off-white page
surface (tan)#EEEFE9Cards are tan
border#D4D5CFDividers
text#0D0E12Primary text
display
Product OS
Squeak70048px
heading
All your developer tools in one place.
IBM Plex Sans60024px
body-lg
PostHog gives engineers everything to build, test, measure, and ship successful products faster.
IBM Plex Sans40016px
body
Product Analytics · Session Replay · Feature Flags · A/B Testing · Surveys
IBM Plex Sans40014px
mono
pageview · $identify · user_signed_up · feature_flag_called
IBM Plex Mono40012px
LemonButton
LemonInput
LemonTag & Badges
Product Analytics Feature Flags
Activated Degraded Error Beta
Metric Cards
Unique users
24,183
↑ 12.4%
Events today
1.2M
↑ 8.1%
Conversion
3.7%
↓ 0.4%
Insights
Event Person URL / Screen Time
DO
Use Squeak only for hero and display headings — never body copy or sub-headings
Use #F54E00 as the single primary CTA per view — PostHog's brand orange-red
Apply radius-lg (20px) to cards, panels, and modals — PostHog's signature shape
Use tan (#EEEFE9) card backgrounds on the warm off-white (#F5F5F0) page in light mode — the depth is intentional
Use IBM Plex Mono for event names, user IDs, and all identifiers in data tables
DON'T
Use #F54E00 for error states — use salmon (#F35454) or pink (#E34C6F) instead
Use pure black or cool gray for dark backgrounds — dark bg is #131316, a near-black with warm undertone
Apply radius-lg to small buttons or inputs — those use radius-sm (4px)
Mix Squeak and IBM Plex Sans at the same heading level — Squeak is display-only
Swap tan cards for white cards in light mode — white on white collapses surface hierarchy