What is PostHog's primary brand color?

PostHog's primary is a saturated yellow-orange — #f7a501 — used exclusively on the primary CTA pill ('Get started — free' in the sticky nav, hero buttons, pricing subscribes). It pairs with #dd9001 pressed and #b17816 deep-pressed states. Crucially, it is the only saturated color in the system: every other surface is cream #eeefe9, white, olive ink #23251d, or a soft pastel callout band. There is no second accent CTA — the yellow is the entire chromatic voltage.

Why does PostHog use a cream canvas instead of white?

The cream canvas #eeefe9 runs edge-to-edge on every page — home, pricing, docs, workflows — and it is the brand's most distinctive surface choice. Pure white only appears inside cards (#ffffff product cards, #fcfcfa warm-white doc cards). The cream is what makes the hedgehog illustrations and pastel callout bands feel like marginalia in a textbook rather than UI chrome. Substituting white as the canvas breaks the whole 'friendly engineering blog' feeling the system depends on.

What typography does PostHog use, and what's the substitute?

PostHog runs IBM Plex Sans Variable across every text role at weights 400, 500, 600, 700, and 800 — no second typeface for display, no italics, no decorative variant. Code uses ui-monospace for inline chips and Source Code Pro for display code blocks at 14px. Plex is open-source and Google-Fonts-hosted, so there's rarely a need to substitute. If you must, Inter is the closest geometric match — pair it with -0.5 to -0.6px letter-spacing on display sizes to approximate Plex's display tracking.

Does PostHog's design system have a dark mode?

No — the marketing site is light-only with a cream canvas. The only inverted surface in the entire system is the code block, which uses #23251d (the same olive-charcoal as ink) as a dark fill with white text inside white doc cards. That creates the brand's most cinematic moment: a dark code island floating inside a white card on a cream page. The in-product analytics dashboard has its own chrome that isn't captured in this DESIGN.md.

What are the four colored callout banners for?

PostHog uses four pastel banner variants — blue #dceaf6 (Tip/Info), green #d9eddf (Success), red #f7d6d3 (Warning), and purple #e7d8ee (Note/Reference) — each prefixed with an inline emoji (💡 ✅ ⚠️ 📘). They appear exclusively inside documentation article body, never as marketing card backgrounds. The four-color family is the brand's information-architecture vocabulary for long-form docs, which is why a 'don't' in the spec explicitly forbids using these pastels in marketing chrome.

Can I use this DESIGN.md to build my own React analytics tool?

Yes — the file is designed to feed Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce PostHog's specific voice (cream canvas, weight-driven type, hedgehog margins, dark code on white doc cards) instead of a generic dashboard theme. You can also reference the tokens directly: every color, type token, radius, and spacing value is a quoted value you can paste into Tailwind config or CSS variables. Just remember to source your own mascot illustrations — the hedgehog character system is PostHog-specific brand IP.

PostHog Design System

PostHog's design system as a DESIGN.md file.

About PostHog DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source posthog.com

Analytics & Data
Developer Tools & IDEs

PostHog's design system pulls off an unusual feat: it makes a serious open-source product analytics platform feel like a friendly engineering sketchbook. The base canvas is a warm cream #eeefe9 — not white, not dark — and every page is dotted with hand-drawn hedgehog mascots in lab coats, hammocks, terminals, and reading glasses. Type runs IBM Plex Sans Variable at olive-gray #4d4f46 for body and deep olive-charcoal #23251d for headlines. Hierarchy is built from weight contrast (400, 500, 600, 700, 800) more than size, which gives the layout its textbook-chapter rhythm. The single saturated chromatic moment is the yellow-orange #f7a501 pill that anchors every primary CTA — "Get started — free" in the sticky nav, the hero call to action, and pricing-tier subscribes.

This page packages the full marketing surface into one DESIGN.md file built on the Google Labs spec. Inside: 30 color tokens covering cream surfaces, olive ink, four pastel callout pairs, and link blue/teal; 21 typography tokens at five weights across IBM Plex Sans Variable plus Source Code Pro for code; 6 radius steps (0, 2, 4, 6, 8, 9999px); 8 spacing values including an 80px section rhythm; and 32 components covering buttons, pill chips, doc cards, hedgehog mascot cards, four colored callout banners, code blocks, sticky doc sidebar, and a six-column footer.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces PostHog's specific dialect — cream canvas, weight-driven type, dark code islands on white doc cards, hedgehog mascot in the margin — instead of defaulting to a generic dashboard theme. Or reference the tokens directly in Tailwind config or CSS variables. The system is worth studying because it solves a problem most analytics tools dodge: how to make a data-dense product feel approachable without infantilizing the engineers who actually use it.

What makes it distinct

Cream canvas anchor#eeefe9 runs edge-to-edge on every page; pure white never carries the background
Single saturated CTA#f7a501 yellow-orange pill is the only loud color in the entire 32-component system
Hedgehog mascots as the decoration layerhand-drawn characters replace gradients, mesh, and atmospheric depth entirely
Weight-driven hierarchyIBM Plex Sans Variable stepped across 400/500/600/700/800 instead of leaning on size or color
Four-pastel doc calloutssoft blue/green/red/purple tinted bands restricted to inline documentation, never marketing

Live at posthog.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

posthog.com

Explore PostHog

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

PostHog design system FAQ

Common questions about PostHog's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use PostHog in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→