PostHog

version alpha

name PostHog

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.

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

Colors

Source pages: / (