PostHog Design System

Overview

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.

Sections stack at {spacing.section} (80px) rhythm with cream canvas continuing edge-to-edge between them. The only color bands that interrupt the cream are pastel {component.banner-tip-blue} / -green / -red / -purple callout panels inside doc articles — soft tinted boxes that carry "💡 Tip", "✅ Success", "⚠️ Warning", "📘 Info" inline annotations. There are no decorative gradients, no atmospheric mesh backgrounds, and no full-bleed dark hero chapters; the cream canvas runs uninterrupted top to bottom and the hedgehogs are the entire visual identity.

Key Characteristics:

• Warm cream canvas ({colors.canvas} — #eeefe9) end-to-end with no surface alternation between sections — the page is one continuous sheet
• Single yellow-orange CTA pill ({colors.primary} — #f7a501) with deep olive text ({colors.on-primary}) — the brand's only saturated color
• IBM Plex Sans Variable across every text role with weights 400/500/600/700/800 — no other typeface in the system
• Hand-drawn hedgehog mascots scattered across the layout as the entire decorative system — no gradients, no mesh, no atmospheric backgrounds
• 4–8px radius card vocabulary: {rounded.md} (6px) for most components, {rounded.lg} (8px) for select containers, fully rounded for pill chips
• Pastel callout banners ({colors.accent-blue-soft}, {colors.accent-green-soft}, {colors.accent-red-soft}, {colors.accent-purple-soft}) break up doc article body with soft tinted side rails for tips/warnings/info
• Documentation pages add a sticky 240px {component.doc-sidebar} with rounded outline-icon section nav and an "Ask PostHog AI" CTA at the top

Known Gaps

• Mobile screenshots not captured — responsive behavior synthesizes PostHog's mobile pattern (hamburger drawer, single-column grid, doc sidebar accordion) from desktop evidence and the breakpoint stack.
• Hover states not documented by system policy.
• In-product app chrome (PostHog dashboard, charts, session replay player) not in the captured set — the marketing site is documented here, not the in-product analytics interface.
• Authenticated chrome (login modal, account dashboard, billing settings) not in the captured pages.
• Form validation states beyond the focused-state input not present in the captured surfaces.
• Marketing illustration set — the full library of hedgehog character poses is not enumerated here; specific poses (lab coat hedgehog, terminal hedgehog, hammock hedgehog) are noted as visible in screenshots but the full asset library is page-specific.