--- version: alpha name: PostHog website: "https://posthog.com" description: | A playful developer-tools system rendered on a warm cream canvas with hand-drawn hedgehog mascots dotted across every page like marginalia in a sketchbook. The chrome reads like a friendly engineering blog: olive-gray ink (#4d4f46) for body, deep olive-charcoal (#23251d) for headlines, IBM Plex Sans Variable typography in tight 1.43-line-height paragraphs, and a single saturated yellow-orange CTA pill (#f7a501) carrying every primary action. The system actively rejects the genre's typical somber dark-tech aesthetic in favor of a creamy, textbook-illustration sensibility — bordered cards stack on the cream canvas with 4–6px radii, doc sidebars use rounded outline-icon mini-illustrations, and the home page leans on cartoon characters (hedgehogs in lab coats, hedgehogs at terminals, hedgehogs in lounge chairs) as its signature decoration. Code samples and product analytics charts live inside white-on-cream cards with thin olive borders; the contrast between the playful illustration and the data-dense product imagery is the brand's signature voice. seo: title: "PostHog Design System for React — #f7a501, IBM Plex Sans, 32 components" metaDescription: "PostHog's design system as a DESIGN.md file. Cream canvas #eeefe9, yellow #f7a501, IBM Plex Sans, 32 components. For React, Next.js, and AI tools." highlights: - "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 layer — hand-drawn characters replace gradients, mesh, and atmospheric depth entirely" - "Weight-driven hierarchy — IBM Plex Sans Variable stepped across 400/500/600/700/800 instead of leaning on size or color" - "Four-pastel doc callouts — soft blue/green/red/purple tinted bands restricted to inline documentation, never marketing" tags: - "Analytics & Data" - "Developer Tools & IDEs" lastUpdated: "2026-05-12" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "/blocks" title: "React blocks for shadcn/ui" description: "Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives." questions: - id: "primary-color" title: "What is PostHog's primary brand color?" answer: "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." - id: "canvas" title: "Why does PostHog use a cream canvas instead of white?" answer: "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." - id: "typography" title: "What typography does PostHog use, and what's the substitute?" answer: "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." - id: "dark-mode" title: "Does PostHog's design system have a dark mode?" answer: "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." - id: "callouts" title: "What are the four colored callout banners for?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own React analytics tool?" answer: "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." colors: 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" focus-ring: "rgba(59,130,246,0.5)" typography: display-xl: fontFamily: IBM Plex Sans Variable fontSize: 36px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0 display-lg: fontFamily: IBM Plex Sans Variable fontSize: 24px fontWeight: 800 lineHeight: 1.33 letterSpacing: -0.6px heading-lg: fontFamily: IBM Plex Sans Variable fontSize: 21px fontWeight: 700 lineHeight: 1.4 letterSpacing: -0.5px heading-md: fontFamily: IBM Plex Sans Variable fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0 heading-sm: fontFamily: IBM Plex Sans Variable fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0 textTransform: uppercase heading-sm-mixed: fontFamily: IBM Plex Sans Variable fontSize: 18px fontWeight: 600 lineHeight: 1.56 letterSpacing: 0 body-md: fontFamily: IBM Plex Sans Variable fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-strong: fontFamily: IBM Plex Sans Variable fontSize: 16px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: IBM Plex Sans Variable fontSize: 15px fontWeight: 400 lineHeight: 1.71 letterSpacing: 0 body-sm-strong: fontFamily: IBM Plex Sans Variable fontSize: 15px fontWeight: 600 lineHeight: 1.71 letterSpacing: 0 body-xs: fontFamily: IBM Plex Sans Variable fontSize: 14px fontWeight: 500 lineHeight: 1.43 letterSpacing: 0 caption-md: fontFamily: IBM Plex Sans Variable fontSize: 14px fontWeight: 700 lineHeight: 1.71 letterSpacing: 0 caption-sm: fontFamily: IBM Plex Sans Variable fontSize: 13px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0 caption-xs: fontFamily: IBM Plex Sans Variable fontSize: 12px fontWeight: 600 lineHeight: 1.33 letterSpacing: 0 textTransform: uppercase utility-xs: fontFamily: IBM Plex Sans Variable fontSize: 12px fontWeight: 700 lineHeight: 1.33 letterSpacing: 0 textTransform: uppercase link-md: fontFamily: IBM Plex Sans Variable fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 button-md: fontFamily: IBM Plex Sans Variable fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0 button-sm: fontFamily: IBM Plex Sans Variable fontSize: 13px fontWeight: 500 lineHeight: 1 letterSpacing: 0 code-sm: fontFamily: ui-monospace fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0 code-xs: fontFamily: Source Code Pro fontSize: 14px fontWeight: 500 lineHeight: 1.43 letterSpacing: 0 rounded: none: 0px xs: 2px sm: 4px md: 6px lg: 8px full: 9999px spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px section: 80px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 8px 16px height: 40px button-primary-pressed: backgroundColor: "{colors.primary-pressed}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" button-secondary: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 8px 16px height: 40px button-tertiary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 8px 12px button-disabled: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ash}" rounded: "{rounded.md}" text-input: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 8px 12px height: 36px text-input-focused: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" rounded: "{rounded.md}" search-input: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 8px 12px height: 36px product-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 24px doc-card: backgroundColor: "{colors.surface-doc}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 24px feature-tile: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.heading-sm-mixed}" rounded: "{rounded.md}" padding: 20px pricing-tier-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 32px hedgehog-mascot-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 24px product-tab: backgroundColor: "transparent" textColor: "{colors.body}" typography: "{typography.body-strong}" rounded: "{rounded.md}" padding: 8px 12px product-tab-active: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-strong}" rounded: "{rounded.md}" pill-tab: backgroundColor: "transparent" textColor: "{colors.body}" typography: "{typography.button-sm}" rounded: "{rounded.full}" padding: 6px 14px pill-tab-active: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.button-sm}" rounded: "{rounded.full}" badge-uppercase: backgroundColor: "transparent" textColor: "{colors.body}" typography: "{typography.utility-xs}" rounded: "{rounded.none}" badge-promo: backgroundColor: "{colors.accent-blue-soft}" textColor: "{colors.link-blue}" typography: "{typography.caption-xs}" rounded: "{rounded.full}" padding: 2px 8px banner-tip-blue: backgroundColor: "{colors.accent-blue-soft}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 16px 20px banner-tip-green: backgroundColor: "{colors.accent-green-soft}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 16px 20px banner-tip-red: backgroundColor: "{colors.accent-red-soft}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 16px 20px banner-tip-purple: backgroundColor: "{colors.accent-purple-soft}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 16px 20px code-block: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.code-sm}" rounded: "{rounded.md}" padding: 16px 20px inline-code: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.code-xs}" rounded: "{rounded.xs}" padding: 2px 6px primary-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-strong}" rounded: "{rounded.none}" height: 56px sub-nav-strip: backgroundColor: "{colors.surface-soft}" textColor: "{colors.body}" typography: "{typography.body-xs}" rounded: "{rounded.none}" height: 40px doc-sidebar: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-xs}" rounded: "{rounded.none}" width: 240px footer-section: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-xs}" rounded: "{rounded.none}" padding: 32px 24px link-inline: textColor: "{colors.link-teal}" typography: "{typography.link-md}" --- ## 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.