Design System — PostHog Design System

Visual Theme & Atmosphere

PostHog's marketing system is built on the visual contradiction at the heart of the brand: a serious open-source product analytics platform rendered as if it were a friendly engineering sketchbook. The chrome runs on a warm cream canvas ({colors.canvas} — #eeefe9) — not white — and every page is dotted with hand-drawn hedgehog mascots in lab coats, lounge chairs, terminals, and reading glasses, scattered across the layout like marginalia in a textbook. Type sits in IBM Plex Sans Variable at olive-gray ({colors.body} — #4d4f46) for body and deep olive-charcoal ({colors.ink} — #23251d) for headlines, with weights stepped tightly between 400, 600, 700, and 800 to create hierarchy without color. The single saturated yellow-orange pill ({colors.primary} — #f7a501) is the brand's only loud chromatic moment; everything else is cream, olive, white card, and the occasional pastel callout band.

The system has a distinctive two-mode body layout: marketing pages (home, workflows, pricing) lean on alternating-pastel callout bands and feature tiles in white cards on cream, while documentation pages add a sticky 240px left sidebar with a rounded outline-icon section list. Code samples are full-width dark blocks on {colors.surface-dark} (the same olive-charcoal that carries body ink, used inverted) inside white doc cards, creating the system's most distinctive visual moment: a dark-on-dark code island floating inside a white card on a cream canvas, with a hedgehog mascot doodled in the margin.

...

Key Characteristics:

Warm cream canvas ({colors.canvas} — #eeefe9) end-to-end with no surface alternation between sections — the page is one continuous sheet
...

Live Visual Theme Representation:

Visual Theme Example

Color Palette & Roles

> Source pages: / (home), /pricing (pricing detail), /docs/product-analytics (docs article), /workflows (product feature page). The chrome palette is identical across all four pages — only doc-specific accents (callout-banner pastels, code-block dark surface) appear exclusively inside the docs experience.

Brand & Accent

PostHog Yellow ({colors.primary} — #f7a501): the universal primary CTA. Sticky "Get started — free" pill in the top-right of every nav, hero CTAs, pricing-tier subscribe buttons, footer signup pill. The system's only saturated chromatic moment.
Yellow Pressed ({colors.primary-pressed} — #dd9001): pressed state for the primary pill.
...

Surface

Canvas ({colors.canvas} — #eeefe9): the warm cream page background. End-to-end on every page; the brand's most distinctive surface choice.
Soft Surface ({colors.surface-soft} — #e5e7e0): button-secondary fill, sub-nav strip background, inline-code chip background.
...

Text

Ink ({colors.ink} — #23251d): headlines, button text on light, primary nav links — deep olive-charcoal that reads near-black against cream.
Body ({colors.body} — #4d4f46): default paragraph text, doc article body, inline link color before hover. The brand's most-used text color.
...

Semantic

Link Blue ({colors.link-blue} — #1d4ed8): inline anchor link inside body prose. The system's primary informational link color.
Link Teal ({colors.link-teal} — #1078a3): doc-article inline link variant, paired with body text.
...

primary

#f7a501

primary-pressed

#dd9001

primary-active

#b17816

on-primary

#23251d

ink

#23251d

body

#4d4f46

charcoal

#33342d

mute

#6c6e63

ash

#9b9c92

stone

#b6b7af

hairline

#bfc1b7

hairline-soft

#dcdfd2

on-dark

#ffffff

canvas

#eeefe9

surface-soft

#e5e7e0

surface-card

#ffffff

surface-doc

#fcfcfa

surface-dark

#23251d

link-blue

#1d4ed8

link-teal

#1078a3

accent-blue

#2c84e0

accent-blue-soft

#dceaf6

accent-red

#cd4239

accent-red-soft

#f7d6d3

accent-green

#2c8c66

accent-green-soft

#d9eddf

accent-purple

#7c44a6

accent-purple-soft

#e7d8ee

Typography Rules

Font Family

IBM Plex Sans Variable is the system's primary face — used across every text role on every page at weights 400 (regular), 500 (medium), 600 (semibold), 700 (bold), and 800 (extra-bold). Falls back through IBM Plex Sans → -apple-system → system-ui → broad cross-platform sans stack.

ui-monospace + Source Code Pro carry code samples and inline-code chips at 14px / 1.43 line-height. Source Code Pro is the explicit display monospace; ui-monospace handles inline <code> chips.

The brand-distinctive choice is the mixed weight ladder (400 / 500 / 600 / 700 / 800) — most chrome lives in the 400–700 band, with weight 800 reserved exclusively for the larger display headlines on home and pricing. This gives the system its "engineering blog" feel: hierarchy is built from weight contrast much more than from size.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
...	...	...	...	...	...

Principles

The hierarchy is explicitly built from weight + size + occasional uppercase transform — there is no italic style, no decorative display variant, no proprietary face. The biggest display moments use weight 800 with -0.6px tracking, and the body settles at 400 with 1.5 line-height; everything else fills the band between. Section eyebrows ({typography.heading-sm} and {typography.utility-xs}) consistently render uppercase, which gives the doc layout its textbook-chapter feel.