PostHog
Open source product analytics
5 colors
18 components
MatterSQ, Fira Code
Apr 11, 2026
Website Preview
Colors
Primary
#F9BD2B
Brand yellow, highlights
#1D4AFF
CTAs, links, charts
#FFFFFF
Page background
#151515
Dark mode background
#9A9A9A
Secondary text
Typography
MatterSQ
Role
SizeWeightHeight
Display
48px700—
Heading
28px600—
Body
16px400—
Fira Code
Role
SizeWeightHeight
Code
14px400—
DESIGN.md — PostHog
Overview
PostHog's design system is unapologetically quirky. A bright yellow paired with a bold blue creates a memorable, high-contrast brand that stands out in the analytics space. The personality extends to hedgehog illustrations and irreverent copy, but the data interfaces remain clean and functional.
Colors
Primary Palette
| Token | Hex | Usage |
|---|---|---|
color-yellow | #F9BD2B | Brand yellow, highlights |
color-blue | #1D4AFF | CTAs, links, charts |
color-bg | #FFFFFF | Page background |
color-dark | #151515 | Dark mode background |
color-muted | #9A9A9A | Secondary text |
Typography
| Role | Family | Size | Weight |
|---|---|---|---|
| Display | MatterSQ | 48px | 700 |
| Heading | MatterSQ | 28px | 600 |
| Body | MatterSQ | 16px | 400 |
| Code | Fira Code | 14px | 400 |
Components
Insight Card
- Chart type selector (line, bar, funnel, table)
- Date range picker and filter bar
- Interactive chart with hover tooltips
Feature Flag Row
- Flag name, key, rollout percentage
- Toggle switch for enable/disable
- Variant breakdown with percentage bars
Hedgehog Avatar
- Brand mascot used in empty states and onboarding
- Various poses and outfits
- Always hand-drawn style, never 3D or photorealistic
Do's and Don'ts
Do
- Use yellow for brand moments and marketing highlights
- Use blue for all interactive elements in the product
- Embrace personality — PostHog is intentionally fun
Don't
- Don't use yellow for interactive elements — it lacks contrast
- Don't make data visualizations too colorful — keep them readable
- Don't use the hedgehog in serious error or security contexts