{ "schema": "brand-kit@2", "palette": { "paper": "#EEEFE9", "surface": "#E5E7E0", "ink": "#151515", "ink_muted": "#65675E", "accent": "#F54E00", "on_accent": "#FFFFFF", "accent_secondary": "#1D4AFF", "highlight": "#DC9300", "border": "#D0D1C9", "night": "#151515", "on_night": "#EEEFE9", "accent_on_night": "#F54E00", "role_notes": { "paper": "Published light-mode background (Logos & hedgehogs, Colors table).", "surface": "Published light-mode Accent.", "ink": "Published text color; paragraphs at 90% opacity, links 95%, hover 100%.", "ink_muted": "Our reading: the guide prefers opacity to new colors and names no muted color; #65675E is the site's --text-secondary (observed in code).", "accent": "Red: published, and links use Red.", "on_accent": "Our reading from the guide's own Squeak example (white type on a red field); not published as a pairing.", "accent_secondary": "Blue: published.", "highlight": "Yellow (light mode): published.", "border": "Dashed divider line (light): published.", "night": "Dark-mode background: published.", "on_night": "Dark-mode text: published.", "accent_on_night": "Red is the same in both modes: published." }, "extras": [ { "name": "Background (light)", "hex": "#EEEFE9", "role": "Light-mode page background; also the dark-mode text color. PostHog primarily uses light mode", "prov": "published", "source": "https://posthog.com/handbook/brand/assets#colors", "site_use": "Root page ground on posthog.com (tailwind tan / light-2) (observed https://posthog.com/ (2026-10-30))" }, { "name": "Text (light)", "hex": "#151515", "role": "Light-mode text, set at 90% opacity for paragraphs; also the dark-mode background", "prov": "published", "source": "https://posthog.com/handbook/brand/assets#colors" }, { "name": "Accent (light)", "hex": "#E5E7E0", "role": "Light-mode accent fill (secondary surfaces, cards, inputs)", "prov": "published", "source": "https://posthog.com/handbook/brand/assets#colors", "site_use": "tailwind accent-light / light-3 (observed in code)" }, { "name": "Accent (dark)", "hex": "#2C2C2C", "role": "Dark-mode accent fill", "prov": "published", "source": "https://posthog.com/handbook/brand/assets#colors" }, { "name": "Dashed divider (light)", "hex": "#D0D1C9", "role": "Dashed divider lines in light mode", "prov": "published", "source": "https://posthog.com/handbook/brand/assets#colors", "site_use": "tailwind light-8 (observed in code)" }, { "name": "Dashed divider (dark)", "hex": "#4B4B4B", "role": "Dashed divider lines in dark mode", "prov": "published", "source": "https://posthog.com/handbook/brand/assets#colors" }, { "name": "Red", "hex": "#F54E00", "role": "Brand red, same in both modes. Links use Red. Never a warning or error color", "prov": "published", "source": "https://posthog.com/handbook/brand/assets#colors", "also": [ "https://posthog.com/handbook/brand/visual-identity#color-system" ], "site_use": "tailwind red; swiper pagination and highlights in global.css (observed in code)" }, { "name": "Yellow (light)", "hex": "#DC9300", "role": "Brand yellow in light mode", "prov": "published", "source": "https://posthog.com/handbook/brand/assets#colors" }, { "name": "Yellow (dark)", "hex": "#F1A82C", "role": "Brand yellow in dark mode", "prov": "published", "source": "https://posthog.com/handbook/brand/assets#colors" }, { "name": "Blue", "hex": "#1D4AFF", "role": "Brand blue, same in both modes", "prov": "published", "source": "https://posthog.com/handbook/brand/assets#colors" }, { "name": "Gray", "hex": "#BFBFBC", "role": "Brand gray, same in both modes", "prov": "published", "source": "https://posthog.com/handbook/brand/assets#colors" }, { "name": "blue (brand package)", "hex": "#1490E8", "role": "@posthog/brand core color; lighter #A1D3F7, darker #106FB2", "prov": "published", "source": "https://brand.posthog.com/colors" }, { "name": "cobalt (brand package)", "hex": "#0457FF", "role": "@posthog/brand core color; lighter #99BBFF, darker #0045D1", "prov": "published", "source": "https://brand.posthog.com/colors" }, { "name": "coral (brand package)", "hex": "#FF474D", "role": "@posthog/brand core color; lighter #FFB8BA, darker #F00008", "prov": "published", "source": "https://brand.posthog.com/colors" }, { "name": "corn blue (brand package)", "hex": "#2BB3DF", "role": "@posthog/brand core color; lighter #ABE1F2, darker #1A89AD", "prov": "published", "source": "https://brand.posthog.com/colors" }, { "name": "green (brand package)", "hex": "#47C861", "role": "@posthog/brand core color; lighter #B8EAC2, darker #35B14E", "prov": "published", "source": "https://brand.posthog.com/colors" }, { "name": "lemon (brand package)", "hex": "#FFCE1C", "role": "@posthog/brand core color; lighter #FFEBA3, darker #F0BC00", "prov": "published", "source": "https://brand.posthog.com/colors" }, { "name": "lime (brand package)", "hex": "#A0CA21", "role": "@posthog/brand core color; lighter #D8EE96, darker #8BAF1D", "prov": "published", "source": "https://brand.posthog.com/colors" }, { "name": "purple (brand package)", "hex": "#A737D2", "role": "@posthog/brand core color; lighter #DCB0ED, darker #8927AF", "prov": "published", "source": "https://brand.posthog.com/colors" }, { "name": "tangerine (brand package)", "hex": "#FF5C1C", "role": "@posthog/brand core color; lighter #FFBDA3, darker #FF4800", "prov": "published", "source": "https://brand.posthog.com/colors" }, { "name": "teal (brand package)", "hex": "#43DAB3", "role": "@posthog/brand core color; lighter #B2F0E0, darker #25BC95", "prov": "published", "source": "https://brand.posthog.com/colors" }, { "name": "violet (brand package)", "hex": "#6D4FFF", "role": "@posthog/brand core color; lighter #C4B8FF, darker #512EFF", "prov": "published", "source": "https://brand.posthog.com/colors" }, { "name": "yellow (brand package)", "hex": "#FFA81C", "role": "@posthog/brand core color; lighter #FFDCA3, darker #E58E00", "prov": "published", "source": "https://brand.posthog.com/colors" }, { "name": "Logo print blue", "hex": "#0054FF", "role": "Blue bar of the 4-color (print) logo", "prov": "observed", "source": "https://brand.posthog.com/logo/posthog-logo-print.svg (official file, 2026-10-30)" }, { "name": "Logo print orange", "hex": "#FF5506", "role": "Orange bar of the 4-color (print) logo", "prov": "observed", "source": "https://brand.posthog.com/logo/posthog-logo-print.svg (official file, 2026-10-30)" }, { "name": "Logo print yellow", "hex": "#FFB70F", "role": "Yellow bar of the 4-color (print) logo", "prov": "observed", "source": "https://brand.posthog.com/logo/posthog-logo-print.svg (official file, 2026-10-30)" }, { "name": "Wordmark ink", "hex": "#111111", "role": "The wordmark and hedgehog-face fill in the standard (gradient) logo", "prov": "observed", "source": "https://brand.posthog.com/logo/posthog-logo.svg (official file, 2026-10-30)" }, { "name": "Window white", "hex": "#FDFDF8", "role": "Lightest site surface (tailwind light-1; --bg of the primary scheme)", "prov": "observed", "source": "https://github.com/PostHog/posthog.com/blob/master/tailwind.config.js (observed in code, 2026-10-30)" }, { "name": "Text secondary", "hex": "#65675E", "role": "Secondary text in the site's primary light scheme (--text-secondary 101 103 94)", "prov": "observed", "source": "https://github.com/PostHog/posthog.com/blob/master/src/styles/global.css (observed in code, 2026-10-30)" }, { "name": "Text muted", "hex": "#9EA096", "role": "Muted text (tailwind light-10; --text-muted 158 160 150)", "prov": "observed", "source": "https://github.com/PostHog/posthog.com/blob/master/src/styles/global.css (observed in code, 2026-10-30)" }, { "name": "Ink deep", "hex": "#23251D", "role": "Darkest warm neutral (tailwind light-12; --text-primary of secondary schemes)", "prov": "observed", "source": "https://github.com/PostHog/posthog.com/blob/master/tailwind.config.js (observed in code, 2026-10-30)" }, { "name": "Button orange", "hex": "#EB9D2A", "role": "Primary CTA face fill (tailwind orange, bg-orange in CallToAction)", "prov": "observed", "source": "https://github.com/PostHog/posthog.com/blob/master/src/components/CallToAction/index.tsx (observed in code, 2026-10-30)" }, { "name": "Button shadow", "hex": "#CD8407", "role": "The darker plate under the lifted primary CTA face (tailwind button-shadow)", "prov": "observed", "source": "https://github.com/PostHog/posthog.com/blob/master/src/components/CallToAction/index.tsx (observed in code, 2026-10-30)" }, { "name": "Button border", "hex": "#B17816", "role": "Primary CTA face border (tailwind button-border)", "prov": "observed", "source": "https://github.com/PostHog/posthog.com/blob/master/src/components/CallToAction/index.tsx (observed in code, 2026-10-30)" }, { "name": "Site yellow", "hex": "#F7A501", "role": "tailwind yellow: outline-button border and focus outlines", "prov": "observed", "source": "https://github.com/PostHog/posthog.com/blob/master/tailwind.config.js (observed in code, 2026-10-30)" }, { "name": "Window top shade", "hex": "#C6CCBA", "role": "menu-bar shadow falling on the phone window at y48", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Window top shade 2", "hex": "#CDD4C1", "role": "menu-bar shadow on the phone window at y78", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Menu bar", "hex": "#CBD5B9", "role": "OS menu bar fill", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Window ground", "hex": "#D3DAC6", "role": "app window fill = homepage ground (renders #D1D7C4 over wallpaper)", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Window ground rendered", "hex": "#D1D7C4", "role": "rendered pixel of the window ground in the reference", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "OS muted", "hex": "#73756B", "role": "phone menu chevron", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Wallpaper base top", "hex": "#FDEECD", "role": "gradient under the wallpaper image (top)", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Wallpaper base bottom", "hex": "#FFFEF4", "role": "gradient under the wallpaper image (bottom)", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Wallpaper sample", "hex": "#95AC70", "role": "rendered wallpaper green behind the menu bar (y55)", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Wallpaper sample dark", "hex": "#80995B", "role": "rendered wallpaper green bottom-left", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Border", "hex": "#BFC1B7", "role": "1px borders of cards, toast, tables, pills; dashed underline in toast", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Border soft", "hex": "#D2D3CC", "role": "pill bottom shadow, pause button border", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Heading", "hex": "#111827", "role": "H1/H2, links, bold lead-ins", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Body", "hex": "#374151", "role": "prose text, hit counter, Shameless CTA title", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Blue", "hex": "#2F80FA", "role": "'context layer' / 'working together' chip text and 10% fill; cart banner; Product Analytics icon", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Blue chip rendered", "hex": "#C2D1CB", "role": "rendered chip fill (#2F80FA 10% on #D3DAC6)", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Purple", "hex": "#B62AD9", "role": "active tab + demo panel frame; Experiments/Warehouse/AI Observability icons", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Highlight rendered", "hex": "#DDCC90", "role": "rendered highlighter on the window ground", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Highlight rendered on card", "hex": "#FBE8BD", "role": "rendered 'for free' highlighter on #FDFDF8", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Input focus", "hex": "#F6A503", "role": "demo composer border", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Green", "hex": "#6AA84F", "role": "check icons, Auto shield, Eco-friendly badge, Heatmaps icon", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Demo frame", "hex": "#F3F4EE", "role": "chat mock frame fill", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Toast shadow", "hex": "#0E1216", "role": "toast shadow colour (hsl 206 22% 7%) at 35% / 20%", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Icon green", "hex": "#36C46F", "role": "Web Analytics icon", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Icon teal", "hex": "#30ABC6", "role": "Feature Flags icon", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Icon coral", "hex": "#F35454", "role": "Surveys icon", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Icon cyan", "hex": "#2EA2D3", "role": "CDP icon", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Icon mint", "hex": "#29DBBB", "role": "Workflows / Endpoints icons", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "White", "hex": "#FFFFFF", "role": "icon labels, toast, demo card, active tab text", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "name": "Black", "hex": "#000000", "role": "3D button text, US (Virginia) selected border", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" } ] }, "typography": { "display": { "family": "Figtree", "steal_family": "Figtree", "stand_in_for": "RoundHog", "weight": 800, "case": "sentence", "fallback_stack": "\"Avenir Next\", Avenir, \"Segoe UI\", Helvetica, Arial, sans-serif", "real": "RoundHog (PostHog's own face; files public at brand.posthog.com but licensed PolyForm Strict 1.0.0, not for use in other projects)", "stand_in": true, "calibration": "Calibrated: Figtree 800 renders the H1 'Your product's context layer' at 99.6% of RoundHog's width, ink 101%", "weights_published": "Regular 400, Medium 500, SemiBold 700, Bold 800 (the weight numbers are PostHog's own scale)", "prov": "published", "source": "https://posthog.com/handbook/brand/visual-identity#typography", "also": [ "https://brand.posthog.com/fonts", "https://github.com/PostHog/posthog.com/blob/master/src/components/Layout/Fonts.css (observed in code, 2026-10-30)" ], "site": { "family_served": "RoundHog (woff2 from /static/, all eight faces; 'PlaygroundRoundHog' alias too)", "h1": "36px, weight 800, tracking -0.9px, on the homepage window", "prov": "observed", "source": "https://posthog.com/ (2026-10-30)" } }, "body": { "family": "Figtree", "steal_family": "Figtree", "stand_in_for": "RoundHog", "weight": 560, "case": "sentence", "fallback_stack": "\"Avenir Next\", Avenir, \"Segoe UI\", Helvetica, Arial, sans-serif", "real": "RoundHog Regular and Regular Italic for body; SemiBold for paragraphs under large headers and for links", "stand_in": true, "prov": "published", "source": "https://posthog.com/handbook/brand/visual-identity#roundhog", "note": "In product UI the body is the system font and RoundHog is for titles and buttons (Brand in practice).", "calibration": "Calibrated 2026-10-30 against RoundHog served on posthog.com: see typography.calibration" }, "mono": { "family": "Source Code Pro", "weight": 400, "fallback_stack": "Menlo, Consolas, Monaco, monospace", "real": "Source Code Pro (open, SIL OFL): the site's code family. The guide names no monospace face", "stand_in": false, "prov": "observed", "source": "https://github.com/PostHog/posthog.com/blob/master/tailwind.config.js (observed in code, 2026-10-30)" }, "squeak": { "family": "Rubik", "stand_in_for": "Squeak", "weight": 800, "case": "upper", "tracking": -0.02, "line_height": 1, "real": "Squeak (PostHog's own display face; internal file, not public)", "stand_in": true, "use": "Marketing headlines and informal moments with hedgehog art only: always uppercase, Bold", "prov": "published", "source": "https://posthog.com/handbook/brand/assets#squeak", "also": [ "https://posthog.com/handbook/brand/visual-identity#squeak", "https://github.com/PostHog/posthog.com/blob/master/src/components/Layout/Fonts.css (observed in code, 2026-10-30)" ] }, "loud_noises": { "family": "Permanent Marker", "stand_in_for": "Loud Noises", "case": "upper", "real": "Loud Noises (PostHog's own hand-lettered face; internal file, not public)", "stand_in": true, "use": "Only for words hedgehogs hold or say (signs, speech bubbles) in hedgehog art", "prov": "published", "source": "https://posthog.com/handbook/brand/assets#loud-noises" }, "calibration": { "real_face": "RoundHog (PostHog's own face) is what posthog.com serves; computed font-family 'RoundHog, sans-serif' on every element. It is publicly served as woff2 from posthog.com/static/ and is NOT a Google font.", "faces_served": { "400": "RoundHog-Regular", "500": "RoundHog-Medium", "700": "RoundHog-SemiBold (also used for CSS weight 600)", "800": "RoundHog-Bold", "400i": "RoundHog-Italic", "500i": "RoundHog-Medium-Italic", "700i": "RoundHog-SemiBold-Italic" }, "weights_used": "500 body, 600/700 (same SemiBold file) for titles, tabs, buttons, links, 800 for the H1", "files_note": "RoundHog files are served publicly but licensed PolyForm Strict 1.0.0 (noncommercial only), so neither the kit nor the blind build uses them; the build uses the calibrated open stand-in.", "other_faces_loaded": "Source Code Pro 400 (mono: terminal command, code), Squeak 700 (loaded, not visible in the home fold)", "stand_in": { "chosen": "Figtree (Google Fonts, variable 300-900): H1 800, titles/tabs/buttons 700, body 560", "method": "Rendered the same strings in RoundHog (served files) and 15 Google candidates in Chromium; compared rendered line width, ink (summed darkness) and x-height. Lines: H1 'Your product's context layer' 36px 800 -0.9px; body 'PostHog ingests and stores your analytics, errors, replays,' 17px 500; 'Ask PostHog anything' 24px 700 -0.6px; 'Get started – free' 13px 700.", "results": { "RoundHog": "H1 452.6px | body 454.0px | H2 235.5px | button 119.7px; x-height 20px at 36px (0.556em)", "Albert Sans": "99.1% | 99.6% | 99.9% | 102.3% width; ink 95% | 85% | 96% | 96%; x-height 18px at 36px", "Nunito Sans": "100.5% | 97.7% | 100.9% | 100.4%; ink 93% | 78% | 90% | 92%", "Figtree": "99.6% | 97.1% | 99.2% | 100.4%; ink 101% | 85% | 100% | 99%", "Instrument Sans": "100.3% | 99.2% | 102.6% | 103.7%; ink 100% | 90% | 111% | 109%", "Inter": "106.1% | 104.4% | 105.4% | 105.6%; ink 113% | 101% | 112% | 112% (too wide, too dark)" }, "verdict": "Figtree: line width within 1-3% of RoundHog at every measured line and the closest ink at bold weights (99-101%). Albert Sans is 0.5% closer on width but 4-5% lighter at bold. At body weight both stand-ins render ~15% lighter than RoundHog 500, so the body is set at 560 (inferred: raises ink toward RoundHog Medium; not separately measured). x-height runs ~10% smaller than RoundHog in both.", "prov": "observed 2026-10-30 (calibration rendered locally in Chromium)" }, "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" } }, "style": { "button_shape": "rounded", "button_note": "Guide: no animation on hover-in, a slight zoom on hover and a pressing-down feel on click. Site code: the primary CTA is an orange face (radius 4-8px by size, 1.5px border) lifted 2-4px off a darker plate, rising on hover and pressing to 1px on click", "corners": "Rounded, not sharp: the 2021 logo update rounded the edges and the font. No corner radius published", "shadows": "Smooth drop shadows on web cards and contained elements; hard drop shadows on graphic elements for merch, stickers and thumbnails", "dividers": "Dashed divider lines (#D0D1C9 light / #4B4B4B dark)", "gradients": "No gradient backgrounds by default; the logomark is the gradient", "opacity": "Paragraph text 90%, links 95%, link hover 100%", "motion": "Understated; animate in and ease out to a still frame; no hover-in animation", "prov": "published", "source": "https://posthog.com/handbook/brand/visual-identity#interaction", "also": [ "https://posthog.com/handbook/brand/in-practice#design-principles-for-web", "https://posthog.com/handbook/brand/assets#use-opacity-over-more-colors", "https://github.com/PostHog/posthog.com/blob/master/src/components/CallToAction/index.tsx (observed in code, 2026-10-30)" ] }, "voice": { "tone": [ "Opinionated", "Human", "Direct", "Honest", "Slightly weird" ], "notes": [ "Write the way you'd explain something to a smart friend, not a prospect you're trying to close.", "Audience: AI-pilled software teams, mostly engineers, who distrust marketing and can tell authentic from corporate in seconds.", "Specific beats benefits: 'It does X' beats 'It empowers you to unlock X'.", "Humor only when it's specific and unexpected; clear beats clever. Rogue, sarcastic, meme-y and weird are encouraged; try-hard is not.", "Honest about limitations: product pages say who shouldn't use the product.", "The Hacker News test: if it would get roasted there, change it.", "PostHog makes YOUR product self-driving: keep the customer's product as the subject.", "Products (Product Analytics, Session Replay) are products; Web, Slack, MCP are apps." ], "rules": [ { "id": "headline-case", "kind": "headline_case", "value": "sentence", "prov": "published", "source": "https://posthog.com/handbook/content/posthog-style-guide#use-sentence-case-for-titles", "also": [ "https://posthog.com/handbook/brand/visual-identity#general-typography-rules" ] }, { "id": "spelling", "kind": "spelling", "value": "en-US", "prov": "published", "source": "https://posthog.com/handbook/content/posthog-style-guide#use-american-english" }, { "id": "person", "kind": "person", "value": "we_you", "prov": "published", "source": "https://posthog.com/handbook/brand/in-practice#documentation", "text": "Docs use second person (you)" }, { "id": "weasel-words", "kind": "avoid", "terms": [ "helps you to", "empowers", "enables you to unlock", "leverage", "leverages", "utilize", "streamline", "robust", "best-in-class", "holistic", "seamless", "synergy" ], "instead": "say what it does: uses, use, speed up, simplify, strong, or describe it", "why": "Hedge words make copy weak and corporate", "prov": "published", "source": "https://posthog.com/handbook/brand/tone#hedge-words-and-weasel-phrases" }, { "id": "use-not-utilize", "kind": "prefer", "term": "use", "over": [ "utilize", "leverage" ], "prov": "published", "source": "https://posthog.com/handbook/brand/tone#hedge-words-and-weasel-phrases" }, { "id": "enable-not-allow", "kind": "prefer", "term": "enable", "over": [ "allow" ], "prov": "published", "source": "https://posthog.com/handbook/content/posthog-style-guide#use-enable-not-allow" }, { "id": "no-emojis", "kind": "guidance", "text": "No emojis: they read as try-hard. Use plain English", "prov": "published", "source": "https://posthog.com/handbook/brand/tone#the-core-principle" }, { "id": "active-voice", "kind": "guidance", "text": "Active voice: 'PostHog tracks your events', not 'Events are tracked by PostHog'", "prov": "published", "source": "https://posthog.com/handbook/brand/tone#passive-voice" }, { "id": "oxford-comma", "kind": "guidance", "text": "Use the Oxford comma", "prov": "published", "source": "https://posthog.com/handbook/content/posthog-style-guide#use-the-oxford-comma" }, { "id": "ie-eg", "kind": "guidance", "text": "No comma after i.e. or e.g.", "prov": "published", "source": "https://posthog.com/handbook/content/posthog-style-guide#dont-put-a-comma-after-ie-or-eg" }, { "id": "en-dash", "kind": "guidance", "text": "Spaced en dash ( – ), never an em dash or a hyphen in its place", "prov": "published", "source": "https://posthog.com/handbook/content/posthog-style-guide#use-british-style-en-dashes" }, { "id": "straight-quotes", "kind": "guidance", "text": "Straight apostrophes and quote marks, not curly", "prov": "published", "source": "https://posthog.com/handbook/content/posthog-style-guide#use-straight-apostrophes-and-quote-marks" }, { "id": "product-caps", "kind": "guidance", "text": "Capitalize a product's name (Session Replay), lowercase the category (session replay tools)", "prov": "published", "source": "https://posthog.com/handbook/content/posthog-style-guide#capitalize-product-names-not-categories" }, { "id": "open-source-hyphen", "kind": "guidance", "text": "open-source before a noun, open source otherwise", "prov": "published", "source": "https://posthog.com/handbook/content/posthog-style-guide#open-source-vs-open-source" }, { "id": "acronyms", "kind": "guidance", "text": "Capitalize acronyms (URLs) and link or define the first use when unsure", "prov": "published", "source": "https://posthog.com/handbook/content/posthog-style-guide#capitalize-acronyms-and-define-where-needed" }, { "id": "no-hedging", "kind": "guidance", "text": "No 'it depends' or 'it's complicated': have an opinion, give an example", "prov": "published", "source": "https://posthog.com/handbook/content/posthog-style-guide#avoid-hedging" }, { "id": "short-paragraphs", "kind": "guidance", "text": "Short paragraphs: ideally no more lines than fingers on a hand; one clear next action per page", "prov": "published", "source": "https://posthog.com/handbook/brand/in-practice#copy-principles-for-web" }, { "id": "no-mission-openers", "kind": "guidance", "text": "Lead with the specific; don't open a page with a mission statement or a feature-first 'Introducing...' headline", "prov": "published", "source": "https://posthog.com/handbook/brand/in-practice#copy-principles-for-web", "also": [ "https://posthog.com/handbook/brand/tone#feature-first-headlines" ] }, { "id": "not-analytics-platform", "kind": "avoid", "terms": [ "analytics platform", "product improvement platform", "dev tool platform", "self-driving product", "self-driving software", "product analytics product" ], "instead": "PostHog makes your product self-driving; it is your product's context layer", "why": "Vague, buzzwordy or wrong about what PostHog is", "prov": "published", "source": "https://posthog.com/handbook/brand/foundations#what-we-are-not" }, { "id": "no-collective-nouns", "kind": "avoid", "terms": [ "suite of products", "collection of products", "set of tools", "bunch of tools", "product and data tools" ], "instead": "name the products, or say platform", "why": "PostHog is not a collection of products", "prov": "published", "source": "https://posthog.com/handbook/brand/foundations#what-we-are-not" }, { "id": "error-messages", "kind": "guidance", "text": "Error messages say what happened and what to do; 'An unexpected error occurred' is a cop-out", "prov": "published", "source": "https://posthog.com/handbook/brand/ambassador#for-engineers", "also": [ "https://posthog.com/handbook/brand/tone#error-messages" ] } ], "approved": { "phrases": [ "context layer", "Make your product self-driving", "Ship, measure and iterate – all on one platform.", "works with PostHog", "built with PostHog", "built for PostHog" ], "words": [ "uses", "use", "speed up", "simplify", "products", "apps" ] }, "banned": [ "helps you to", "empowers", "enables you to unlock", "leverages", "utilize", "streamline", "robust", "best-in-class", "holistic", "seamless", "synergy", "analytics platform", "product improvement platform", "dev tool platform", "self-driving product", "emojis", "em dash (—)", "Official PostHog (third parties)" ], "is_not": [ [ "Opinionated", "Diplomatic to the point of saying nothing" ], [ "Human", "Corporate robot" ], [ "Slightly weird", "Trying to be funny in a try-hard way" ], [ "Thoughtful", "Random" ], [ "Direct", "Fluffy" ], [ "Honest", "Corporate fluff" ], [ "Playful", "Childish or unprofessional" ], [ "Approachable", "Arrogant" ] ], "prov": "published", "source": "https://posthog.com/handbook/brand/tone", "also": [ "https://posthog.com/handbook/brand/foundations#brand-personality", "https://posthog.com/handbook/content/posthog-style-guide" ] }, "spec": { "source": "https://posthog.com/handbook/brand/overview", "how": "PostHog's public handbook brand pages (read from their Markdown source in PostHog/posthog.com, branch master, contents/handbook) and embedded images, plus brand.posthog.com and the PostHog/brand package (logos, colors, RoundHog), and posthog.com's tailwind.config.js, Fonts.css, global.css and CallToAction for code tokens; fetched 2026-10-30", "provenance": "published", "motion": [ { "name": "hover-enter", "easing": "none (instant)", "duration_ms": 0, "use": "No animation when hovering onto a button: it should feel snappy", "prov": "published", "source": "https://posthog.com/handbook/brand/visual-identity#interaction" }, { "name": "hover-leave", "use": "Animating when the pointer leaves a button is allowed. Easing and duration not published", "prov": "published", "source": "https://posthog.com/handbook/brand/visual-identity#interaction" }, { "name": "hover-lift", "use": "A slight zoom on hover. On the site the primary CTA face rises from -2px to -3/-4px (md) or -4 to -6px (lg)", "prov": "published", "source": "https://posthog.com/handbook/brand/visual-identity#interaction", "also": [ "https://github.com/PostHog/posthog.com/blob/master/src/components/CallToAction/index.tsx (observed in code, 2026-10-30)" ] }, { "name": "press-down", "use": "A pressing-down feel on click: the CTA face drops to -1px (-2px on lg) over its darker plate", "prov": "published", "source": "https://posthog.com/handbook/brand/visual-identity#interaction", "also": [ "https://github.com/PostHog/posthog.com/blob/master/src/components/CallToAction/index.tsx (observed in code, 2026-10-30)" ] }, { "name": "animate-in", "easing": "ease-out to a still final frame", "use": "Team crests and blog art animate in, then stop; no constant loops", "prov": "published", "source": "https://posthog.com/handbook/brand/visual-identity#animation" }, { "name": "character-rig", "use": "Max and other hogs animate with puppet rigging; shadows move with the character", "prov": "published", "source": "https://posthog.com/handbook/brand/visual-identity#animation" }, { "name": "slide-up-fade-in", "use": "Site keyframe: opacity 0 to 1 while rising 10px (slideUpFadeIn). Duration set per use", "prov": "observed", "source": "https://github.com/PostHog/posthog.com/blob/master/tailwind.config.js (observed in code, 2026-10-30)" }, { "name": "logo-still", "use": "Never spin, bounce or glitch the logo without explicit approval", "prov": "published", "source": "https://posthog.com/handbook/brand/visual-identity#what-not-to-do" } ], "icons": { "grid": "not published", "stroke": "1.5px outline (Central Icon System, product UI)", "styles": [ { "name": "Central Icon System", "use": "Interface and product UI: outlined vector icons, 1.5px border" }, { "name": "icons8 sticker pack", "use": "Stickers and casual contexts" }, { "name": "OS-style icons", "use": "The posthog.com desktop" } ], "rule": "Icons are intentional: complementary when labelled, self-explanatory alone; ask #design rather than sourcing your own", "prov": "published", "source": "https://posthog.com/handbook/brand/visual-identity#icons", "also": [ "https://posthog.com/handbook/brand/in-practice#principles" ] }, "signature": [ { "id": "hog-with-squeak", "name": "A hedgehog with a Squeak headline", "where": "marketing headlines, ads, social, event signage, stickers, thumbnails", "spec": "a hand-drawn hog (thick black monoline, beige body, brown spines and limbs, eyebrows for emotion, two-tone shadow, no highlights) beside or under a Squeak Bold headline in uppercase, tracking -2%, line height 100%; words the hog holds or says are in Loud Noises caps", "once": "one hog moment per piece; art accentuates content, it doesn't distract", "example": { "ground": "paper", "text": "AVERAGE DOCS ENJOYER", "font": "squeak", "weight": 800, "ink": "#F54E00" }, "dont_example": { "ground": "paper", "text": "Average docs enjoyer", "font": "body", "weight": 400 }, "dont": "use Squeak without hog art or an informal context, set it in lowercase, or use AI-generated or stock hedgehogs", "prov": "published", "source": "https://posthog.com/handbook/brand/assets#squeak", "also": [ "https://posthog.com/handbook/brand/visual-identity#illustration--hedgehogs", "https://posthog.com/handbook/brand/assets#illustration-guide" ] }, { "id": "lifted-button", "name": "The lifted, pressable button", "where": "every CTA on posthog.com", "spec": "an orange face (#EB9D2A, 1.5px #B17816 border, RoundHog bold, black text) sits 2-4px above a darker #CD8407 plate; it rises a pixel or two on hover with no hover-in animation and presses down to 1px on click", "once": "one primary CTA per view; one clear next action per page", "example": { "ground": "paper", "text": "Get started – free", "button": true, "button_fill": "#EB9D2A" }, "dont_example": { "ground": "paper", "text": "Get started – free", "button": true, "button_fill": "#1D4AFF" }, "dont": "fade or ease the button in on hover, or flatten it into a generic SaaS pill", "prov": "observed", "source": "https://github.com/PostHog/posthog.com/blob/master/src/components/CallToAction/index.tsx (observed in code, 2026-10-30)", "also": [ "https://posthog.com/handbook/brand/visual-identity#interaction" ] }, { "id": "hard-shadow-sticker", "name": "White border and hard drop shadow", "where": "stickers, merch graphics, team crests, YouTube thumbnails", "spec": "die-cut shapes with a white border and a hard (unblurred) drop shadow; a limited palette (three colors rather than eight)", "once": "on graphic elements, not on web cards (web cards get smooth shadows)", "example": { "ground": "#F54E00", "text": "SHIP IT", "font": "squeak", "weight": 800, "ink": "#FFFFFF" }, "dont_example": { "ground": "#F54E00", "text": "SHIP IT", "font": "squeak", "weight": 800, "ink": "#1D4AFF" }, "dont": "use square stickers or soft blurred shadows on merch graphics", "prov": "published", "source": "https://posthog.com/handbook/brand/visual-identity#stickers", "also": [ "https://posthog.com/handbook/brand/in-practice#design-principles-for-merch", "https://posthog.com/handbook/brand/in-practice#youtube--video" ] }, { "id": "website-as-os", "name": "The website as an operating system", "where": "posthog.com", "spec": "a macOS-style menu bar, desktop icons on a wallpaper, and every page opened as a resizable app window (reader, editor, explorer, inbox, presentation)", "once": "the site's frame; product pages are slide-deck windows", "example": { "ground": "paper", "text": "Your product's context layer", "font": "display", "weight": 800 }, "dont": "rebuild it as a generic hero-plus-feature-grid SaaS page", "prov": "published", "source": "https://posthog.com/handbook/engineering/posthog-com/how-posthog-website-works" }, { "id": "opacity-not-colors", "name": "Opacity instead of more colors", "where": "text, links, charts", "spec": "paragraph text at 90% opacity, links at 95% and semibold, hover 100%; in charts use opacity or pattern before adding a hue", "once": "always", "example": { "ground": "paper", "text": "Read the docs", "ink": "#F54E00", "weight": 700 }, "dont_example": { "ground": "paper", "text": "Read the docs", "ink": "#2BB3DF", "weight": 700 }, "dont": "add a new hue for a state, a link or a chart series", "prov": "published", "source": "https://posthog.com/handbook/brand/assets#use-opacity-over-more-colors", "also": [ "https://posthog.com/handbook/brand/visual-identity#data-visualization" ] } ], "page": { "source": "https://posthog.com/", "date": "2026-10-30", "prov": "observed", "voices": "Two voices, both PostHog's own. The homepage window speaks in a plain, joking, first-person product voice: sentence-case H2s that are labels or jokes (\"Social proof\", \"Why PostHog?\", \"Bedtime reading\", \"Shameless CTA\"), short declarative paragraphs, numbers as proof (\"97% of users pay us $0\", \"Join 500,000+ teams\"), self-aware asides in brackets and footnotes. The handbook brand guide governs campaigns and brand pieces. A landing page built from this spec follows the homepage voice and this anatomy. Where the guide and site disagree (guide text #151515 and blue #1D4AFF; site uses #111111/#111827/#374151 text and #2F80FA blue), the guide is brand law and the site values are how it is applied on posthog.com: build the homepage with the site values.", "shell": { "summary": "PostHog OS: the page is a desktop, not a scrolling page. body is exactly 100vh (h-dvh) with NO document scroll (document height = viewport: 900 at 1440x900, 844 at 390x844). Layers back to front: illustrated landscape wallpaper (full bleed) -> hedge/rock illustration bottom-right -> desktop icon columns (left 7, right 6) -> one app window (centred, 80% x 95% of the desktop area) whose CONTENT scrolls inside it (.app-scroll-viewport, overflow-y auto) -> top menu bar (z 50) -> cookie toast (fixed bottom-right, z 50).", "body": "html/body ground #EEEFE9 (never visible: wallpaper covers it); body overflow none in practice: total height = 100vh; wrapper div relative h-dvh flex column, padding 8px on desktop (md:p-2), 0 on phone", "window_scroll": "Only the window content scrolls. Desktop scroll viewport 1139x802 at x150 y69, scrollHeight 4451. Phone scroll viewport 390x804 at x0 y40, scrollHeight about 7718 (varies +-40px as the demo animates). Custom scrollbar: 10px track inset at the window's right edge (window-relative x1127 y32, 764 tall), 6px thumb rgba(17,17,17,0.28) radius 9999px; not visible at rest in the reference (appears while scrolling, animation only).", "desktop_at_rest": "1440x900 shows: menu bar y8-48; wallpaper everywhere; left icons x4-116 from y66; right icons x1324-1436 from y66; hedge illustration bottom-right (x663-1440, y269-900) visible only right of the window (x>1289) and below it; window x150-1289 y69-871 showing window-content y0-802 (hero + top of the purple demo panel, cut at the chip row); cookie toast x1034-1424 y703-884 overlapping the window's bottom-right and the right icon column area.", "phone_at_rest": "390x844 shows: menu bar y0-40 full width; the window fills everything below (x0-390, y40-844, radius 0), so wallpaper and desktop icons are hidden behind it; window content y0-804: logo, 2-line centred headline, paragraph, join line, the Set up card (top 263px), and the stacked tab labels; cookie toast x16-374 y647-828 covers the card's buttons. Ship with PostHog tab label shows just below the toast (text centre y~840).", "layers": [ "z0 wallpaper base: linear-gradient(#FDEECD, #FFFEF4) full viewport (only shows if the JPG is missing)", "z0 wallpaper image: desktop the wallpaper-desktop slot image (1777x985) background-size cover, background-position 100% 100% (right/bottom anchored), no-repeat; at 1440x900 it scales to 1624x900 and crops 184px off the left. Phone (<640px): the wallpaper-phone slot image (786x1704) cover, 100% 100%.", "z0 hedge: the hedge slot image (1555x1262) drawn at 777x631, absolute right 0 bottom 0 on desktop (x663 y269); phone width 100% (406x329 at x0 y419, hidden behind the window).", "desktop icons nav: absolute inset 0 over the desktop, pointer-events on the lists only (hidden behind the window on phone)", "app window (see window)", "menu bar z-index 50 (see nav)", "cookie toast fixed bottom 16px right 16px z-index 50 (see cookie_banner)" ], "desktop_icons": { "left_column": [ "Home", "Self-driving product", "Context warehouse", "Pricing", "Docs", "Demo", "Talk to a human" ], "left_hrefs": [ "/", "/self-driving", "/context-warehouse", "/pricing", "/docs", "/demo", "/talk-to-a-human" ], "right_column": [ "About us", "Changelog", "Company handbook", "Store", "Careers", "Trash" ], "right_hrefs": [ "/about", "/changelog", "/handbook", "/merch", "/careers", "/trash" ], "geometry": "columns are 112px wide flex-column lists: left x4-116, right x1324-1436 (right list wraps reverse); every cell starts 84px below the previous: icon tops y66, 150, 234, 318, 402, 486, 570. Icon 36x36 centred in the 112px column (x42 left, x1362 right). Label starts 8px below the icon (y icon+44), 13px/16.25px RoundHog 500 #FFFFFF, centred, padding 0 2px, radius 2px, no text shadow; two-word labels wrap to 2 lines inside ~72px (Self-driving / product, Context / warehouse, Company / handbook).", "demo_icon": "Demo uses a raster thumbnail (the icon-demo slot image, 124x86 drawn 62x43 at x29 y483, a 'DEMO' video still) instead of a 36px svg; its label sits at y534.", "icon_style": "white/very light grey frosted pictograms with dark grey line details and a soft drop shadow (self-contained SVGs, one per icon). Hover: scale 1.03 (200ms ease-out)." }, "window": { "desktop": "x150 y69 w1139 h802 (80% of the 1424 desktop width, 95% of the 844px area below the menu bar, centred in x8-1432 y48-892); ground #D3DAC6 (renders #D1D7C4); border-radius 20px; box-shadow 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); no title bar.", "phone": "x0 y40 w390 h804 (full width, from under the menu bar to the bottom); radius 0; same ground and shadow. The menu bar's shadow (0 25px 50px -12px rgba(0,0,0,0.25)) darkens the top ~40px of the window: #C6CCBA at y48, #CDD4C1 at y78, #D3DAC6 by y100.", "controls": "Desktop: a 64x31 group at the window's top-right (right 4px top 4px: x1222 y73), opacity 0.4 (hover 0.75): two 26x27 ghost buttons, 16px icons #23251D: maximize (rounded square outline, scaled 1.1) then close (X). Renders as faint grey glyphs at x1241 and x1271, y88. Phone: only the close X (34x31 group at x352 y44, glyph centre ~x370 y58).", "content_container": "article.reader-view-content-container (prose) > div padding 48px top, 80px sides on desktop (content column x80-1059 window-relative = 979px), 16px sides on phone (x16-374 = 358px). Children stacked with space-y-12 (48px). Base text 18px/27px RoundHog 500 #374151." } }, "nav": { "summary": "A Mac-style menu bar across the top of the desktop: PostHog logomark, five text menus plus More on the left; orange 3D 'Get started – free' button, search, help and account icons on the right.", "ground": "#CBD5B9 solid, radius 4px, box-shadow 0 25px 50px -12px rgba(0,0,0,0.25) (shadow-2xl), padding 0 8px", "height": "40px (desktop x8 y8 w1424; phone x0 y0 w390, radius 4px 4px 0 0)", "border": "none", "logo": { "variant": "PostHog logomark only (the hog-arrow mark), single colour #23251D", "px": "24x24 (viewBox 52x28) desktop at x22 y16 inside a 36x28 link; phone 32x32 at x16 y4 followed by a 24px chevron-down #73756B (the pair is one 72x36 menu button)", "position": "far left", "file": "the logomark-menubar slot image" }, "links": { "count": 6, "labels": "Products, Pricing, Docs, Community, Company, More", "dropdowns": "Products, Docs, Community, Company and More are menu buttons (no chevron shown); Pricing is a link to /pricing", "size": "13px/13px", "weight": 500, "color": "#23251D", "alignment": "left group, items 28px tall at y14 with 1px gaps, padding 2px 6-8px, radius 4px: x53 Products (70w), x124 Pricing (54w), x178 Docs (47w), x226 Community (85w), x312 Company (74w), x387 More (47w)", "hover": "button fill appears (radius 4px); outline 2px transparent" }, "actions": [ "Get started – free: orange 3D button 125x32 at x1189 y12 (phone x147 y4), href https://app.posthog.com/signup; face #EB9D2A, 1px #B17816 border, radius 6px, 13px/19.5px RoundHog 700 #000000, padding 4px 10px, sitting 1px above a #CD8407 base (the darker band shows along the bottom edge)", "Search: 30x26 ghost button, 20px magnifier #23251D (x1320; phone x278)", "Help: 30x26 ghost button, 20px question-mark-in-speech-bubble #23251D (x1352; phone x310)", "Account: 40x28 menu button, 24px person-in-circle #23251D (x1384; phone x342)" ], "sticky": "always on top (z 50); the page never scrolls so it never moves", "phone": { "shows": "logomark 32px + chevron, Get started – free, search, help, account; the five text menus are hidden (folded into the logomark menu)", "menu": "tapping the logomark+chevron opens the menu list (not captured at rest)", "cta": "Get started – free always visible at x147" } }, "hero": { "summary": "Top of the window content: full-colour PostHog wordmark, then a two-column block (desktop): left a 36px 800 headline with a blue 'context layer' chip, a 17px paragraph with yellow hand-drawn highlighter strokes, and a grey join line; right a white 'Set up [logomark] for free' card with three green checks and two orange 3D buttons. Below: a three-tab strip and a purple-framed demo panel ('Ask PostHog anything').", "desktop": { "frame": "all y values are window-content-relative (add 69 for viewport y); x relative to the window (add 150)", "logo": "the logo-hero slot image, 157x27 at x80 y56 (full colour gradient mark + #111111 wordmark)", "column_split": "grid 2 columns, gap-x 32px across 979px: left x80-554 (474px), right x586-1059; card max-width 448px centred in the right column (x599-1047)", "vertical_anchors": "logo y56-83; H1 y132-172 (1 line); paragraph y194-271 (3 lines); join line y295-322; card y132-341; tabs y394-434; purple panel y434-900; viewport bottom at window y802 cuts through the demo chip rows", "text_max_width": "474px left column; H1 fits one line (text-wrap balance on the paragraph)", "media": "no photo; the Set up card and the demo panel are the media", "cta_size": "Get started 203x47 and Install with AI 203x47 side by side at y279 (x616 and x827), 8px apart" }, "phone": { "order": "logo, H1, paragraph, join line, Set up card, tab labels (stacked), purple demo panel", "alignment": "centred text (H1, paragraph, join line) in the 358px column x16-374; the card is left-aligned inside", "sizes": "logo 157x27 at x117 y56 (window-relative; viewport y96); H1 30px/36px 800 -0.75px in 2 lines y131-203 ('Your product's [context' / 'layer]', the chip breaks across the lines); paragraph 17px/25.5px 3 lines y226-303; join line 18px/27px 2 lines y327-381; card x16 y429 358x263 (padding 16px, buttons stacked full width 324x47 at y576 and y630, 7px apart); tabs stacked 358x40: 'Give agents product context' y740, 'Ship with PostHog' y780, active 'Ask PostHog anything' y820 attached to the panel (y860-1601)", "hidden": "desktop icons, wallpaper and hedge are all behind the full-bleed window; the window has no radius and only a close control" }, "at_rest": { "highlights": "Hand-drawn highlighter (rough-notation) behind 'analytics, errors, replays,' (line 1) and 'and business data' (line 2): two overlapping wobbly strokes per line, stroke rgba(247,165,1,0.15) (#F7A501 at 15%), 19px wide, centred on the text; renders #DDCC90 on the #D3DAC6 window. Same highlight behind 'for free' in the card, 26.6px stroke, renders #FBE8BD on #FDFDF8. The strokes draw in over ~0.8s on load (animation only); build the finished state.", "underline": "'agents' is #65675E with a hand-drawn 1px wavy underline in currentColor (rough-notation), not a CSS underline", "chip": "'context layer' inside the H1: text #2F80FA, background #2F80FA at 10% (renders #C2D1CB), radius 6px, padding 0 4px, 216x44 at x325 y130 (desktop)", "terminal_row": "The card hides a collapsed row (grid-template-rows 0fr, height 0) with 'Happier in the terminal? Skip the browser:' and the command 'npx -y @posthog/wizard@latest' (13px mono on #E5E7E0); it opens on interaction only. Do NOT show it at rest.", "tab_progress": "white 3px progress bar under the active tab (left 8px, right 8px inset, radius 9999px, glow 0 0 6px 2px rgba(255,255,255,0.4)) fills 0->100% over 5s then rotates tabs (animation only). In the desktop reference it spans x238-307 viewport (about 70px); at 3.2s after load it measures 93/310px.", "demo_typing": "The demo prompt types itself. At rest (reference): the input shows 'Why are signups growing, but paid' in #111111 with the caret; the send button is white with a 1px #F7A501 border and black arrow. (Later frames move the question into a bubble and fill the send button #F7A501: animation only.)", "cookie_toast": "present at rest in both references (first visit); see cookie_banner" }, "media": "Wordmark the logo-hero slot image; logomark in the card title the logomark-card slot image (30x16); logomark in the demo welcome the logomark-demo slot image (53x29 desktop, 32x17 phone).", "type": "H1 RoundHog 36px/40px 800 -0.9px #111827 (phone 30px/36px -0.75px, centred). Paragraph 17px/25.5px 500 #374151. Join line 18px/27px 500 #65675E. Card title 18px/28px 700 #111111; checks 14px/20px 500 #111111 with 16px #6AA84F check icons (gap 6px, rows 26px apart).", "cta": "Primary 'Get started' (orange 3D) and secondary 'Install with AI' (white face on the same orange base) in the card; tiny 'Get started - free' in the demo panel", "proof": "'Join 500,000+ teams already shipping with PostHog.' as the join line; '97% of users pay us $0' as the first check", "copy": [ "H1: Your product's context layer (chip on 'context layer')", "P: PostHog ingests and stores your analytics, errors, replays, and business data so you and your agents can query and act on it.", "Join: Join 500,000+ teams already shipping with PostHog.", "Card: Set up [logomark] for free / 97% of users pay us $0 / No credit card required / Setup wizard installs PostHog for you / [Get started] [Install with AI]", "Tabs: Ask PostHog anything | Give agents product context | Ship with PostHog" ], "copy_prov": "observed 2026-10-30" }, "sections": [ { "name": "Hero demo panel (tab 1: Ask PostHog anything)", "summary": "Purple-framed tab panel directly under the hero: three equal tabs, the active one filled purple, opening into an 8px purple frame around a white card holding an AI-chat mock (left) and a product pitch (right).", "ground": "panel frame #B62AD9; inner card #FFFFFF; mock frame #F3F4EE", "desktop": { "tabs": "flex row x80-1059 y394, three 326x40 tabs (x80, 407, 733), padding 10px 12px, 14px/20px 600 centred, radius 6px 6px 0 0; active #B62AD9 fill with #FFFFFF text; inactive transparent with #65675E text", "panel": "x80 y434 979x466, #B62AD9, padding 8px, radius 0 6px 6px 6px (square top-left under the active tab)", "card": "x88 y442 963x450 #FFFFFF radius 4px shadow 0 25px 50px -12px rgba(0,0,0,0.25), padding 24px; two columns: mock 515px (x112-627) | 33px gap | text 368px (x660-1028)", "pause": "32x32 button top-right of the card (x1012 y450): fill rgba(255,255,255,0.25), 1px #D2D3CC, radius 4px, 14px pause glyph #65675E", "mock": "x112 y466 515x400, fill #F3F4EE, 1px #BFC1B7, radius 4px, shadow 0 25px 50px -12px rgba(0,0,0,0.25). Everything inside scales with the mock width (container-query units): logomark 53x29 centred at y514; title 'What can I help you with?' 20.53px/25.66px 700 #111111 centred y558; input box x127 y599 487x148 #FFFFFF, 1px #F6A503, radius 10.26px, padding 9.24px, containing an 'Add context' pill (118x23, 12.83px 600 #65675E, 1px #BFC1B7, radius 5.65px, @ icon + chevron), the prompt text 15.4px/21.55px 500 #111111, and a bottom row: 'Auto' pill 73x25 (green #6AA84F shield icon + chevron) and 'Default · Claude Sonnet 5 High' pill 209x25 (both #FDFDF8, 1px #BFC1B7, radius 3.6px, 12.83px 600 #111111) with the send button 39x31 at the far right (radius 6.67px). Chip rows centred below the input: y762 Coding, Product analytics, SQL, Session replay, SDK setup; y794 Feature flags, Experiments, Surveys, Docs (each 24px tall, #FDFDF8, 1px #BFC1B7, radius 5.65px, bottom shadow 0 2.3px 0 #D2D3CC, 13px #65675E icon + 12.83px 600 #111111 label, 6px gaps)", "text": "H2 'Ask PostHog anything' 24px/32px 700 -0.6px #111827 at y466; paragraph 18px/27px 500 #65675E y510 (5 lines); second paragraph 'Pipe in third party data from 900 + sources for a more complete picture.' y657 with '900 + sources' 600 #111827 underlined; small 3D button 'Get started - free' 124x35 at y723; product links in 2 columns (x660, x850) rows y782/806/830, 16px coloured icon + 12px/16px 600 #111827 underlined label: Product Analytics (#2F80FA), Session Replay (#F7A501), Error Tracking (#EB9D2A), Web Analytics (#36C46F), Feature Flags (#30ABC6), and more (#65675E)" }, "phone": { "tabs": "stacked full width 358x40: inactive tabs first (#65675E text, transparent), active purple tab last, attached to the panel", "panel": "x16 358x741 #B62AD9 padding 8px; inner white card 342 wide, padding 16px; mock on top 310x240, then the text column below (H2 24px, paragraph 18px/27px #65675E, CTA, product links in 2 columns)", "mock_scale": "mock contents shrink with its width: title 12.32px, pills and chips 7.7px, logomark 32x17; chips wrap into 2 rows (Coding, Product analytics, SQL, Session replay / SDK setup, Feature flags, Experiments, Surveys, Docs)" }, "anatomy": [ "Tabs are 3 equal flex children with no gaps; only the active one has a fill", "The purple frame is a solid 8px band all round the white card", "The mock is a light-grey app frame floating on the white card with a big soft shadow", "Service logos (Google Ads, Stripe, GitHub, Postgres, Zendesk, Meta Ads) appear inside chat steps later in the animation (animation only)" ], "components": [ "tab strip", "purple tab panel", "chat composer mock", "pill chips", "3D orange button (small)", "coloured-icon product link" ], "copy": [ "Ask PostHog anything", "PostHog is the single place to ingest, store, and query your product and company data. Analytics, replays, errors, and logs, stitched together on-the-fly to answer any question you have.", "Pipe in third party data from 900 + sources for a more complete picture.", "Get started - free" ], "copy_prov": "observed 2026-10-30" }, { "name": "Built-in tools ticker", "summary": "One line: a grey label then an endless right-to-left ticker of PostHog product links with coloured icons, edges faded.", "ground": "window ground #D3DAC6", "desktop": { "band": "y948-980 window-relative", "label": "'Built-in tools for your agents:' 14px/20px 500 #65675E at x80", "ticker": "x277-1059, mask linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); items 16px icon + 6px + 14px/20px 600 #374151, 24px apart; animation tools-ticker-marquee 45s linear infinite (animation only)" }, "phone": { "band": "flex column: label on its own line, ticker below it full width" }, "anatomy": [ "Items in order: Product Analytics, Session Replay, Error Tracking, Web Analytics, Feature Flags, Experiments, Surveys, Warehouse, CDP, Workflows, Logs, AI Observability, Endpoints, Inbox, Tracing, Heatmaps, Replay Vision, No-code A/B Testing (then repeats)", "Icon colours: #2F80FA, #F7A501, #EB9D2A, #36C46F, #30ABC6, #B62AD9, #F35454, #B62AD9, #2EA2D3, #29DBBB, #F54E00, #B62AD9, #29DBBB, #2F80FA, #2F80FA, #6AA84F, #F7A501, #2F80FA" ], "components": [ "coloured-icon product link", "marquee" ] }, { "name": "Social proof", "summary": "H2 + one-line joke subhead, then a two-panel logo board ('Colorful logos' | '\"Sleek\" logos') and an 'Open Customers' button.", "ground": "window ground; board white", "desktop": { "band": "H2 y1036; sub y1108; board x80 y1159 979x361; button y1543", "h2": "30px/40px 700 -0.75px #111827", "board": "#FFFFFF, radius 6px, 1px #BFC1B7 lines; 2 columns 490px; header cells 29px #EEEFE9 with 14px/20px 700 #111111 centred labels; body cells #FDFDF8 padding 16px holding monochrome-or-colour customer wordmarks 20-48px tall in centred wrapping rows (~50px row pitch); a round 30px swap button with a refresh glyph sits on the centre divider at the header line", "button": "'Open Customers' 124x35 white-face 3D button (13px 700 #111111, 1px #B17816, radius 6px, on the #CD8407 base)" }, "phone": { "band": "H2 y1761 (window-relative); sub 3 lines; board 358 wide, columns stacked/halved (header cells 179px each), board 712px tall" }, "anatomy": [ "Colorful logos column: Y Combinator, convex, trust, supabase, start engine, Mistral AI, Fireworks, Raycast, HeyGen, PostHog (posthog-logo.svg 160x28)", "\"Sleek\" logos column (all #111111): Airbus, GOV.UK, National Design Studio, Railway, ResearchGate, LEGORA, ElevenLabs, exa, Hasura, clerk, Resend, Flow and more", "Some logos carry a small orange-red dot (top-right) and link to /customers/ case studies (ycombinator, supabase, researchgate, elevenlabs, exa, hasura)" ], "components": [ "logo board", "3D white button" ], "copy": [ "Social proof", "Yes they actually use us, no it's not just some random engineer who tried us out 2+ years ago.", "Colorful logos", "\"Sleek\" logos", "Open Customers" ], "copy_prov": "observed 2026-10-30" }, { "name": "All your data, working together", "summary": "Prose section with a right-floated accent card (bulleted list + sailor hog illustration).", "ground": "window ground; card #E5E7E0", "desktop": { "band": "H2 y1635 (chip on 'working together', same blue chip style as the hero); text y1707-2084", "card": "float right x743 y1707 316x358, #E5E7E0, radius 4px, padding 16px, overflow hidden; title 14px/21px 600 #111827 with a blue chip on 'ships'; 5 bullets 14px/21px 500 #374151 (markers #111111 at 50%); sailor hog SVG 220x220 at x827 y1902 clipped by the card bottom", "text": "paragraphs 18px/27px 500 #374151, 24px apart; bullets indent 28px; closing link 'Connect your first data source' 18px 600 #111827 underlined at y2063" }, "phone": { "band": "H2 y2765 in 2 lines (80px); card full width above/among the text", "card": "358 wide" }, "anatomy": [ "Card bullets: A data warehouse (with info icon), 120+ sources/destinations, SQL editor + BI + data viz, User activity feed (CDP-lite), API, webhooks" ], "components": [ "blue highlight chip", "accent aside card", "underlined text link" ], "copy": [ "All your data, working together", "Built-in, the context warehouse ships with:", "Connect your first data source" ], "copy_prov": "observed 2026-10-30" }, { "name": "Usage-based pricing", "summary": "Prose + right-floated hog-millionaire illustration, then a 4-row pricing table and an 'Explore pricing' link.", "ground": "window ground; table cells #FDFDF8, header #EEEFE9", "desktop": { "band": "H2 y2146; image 280x256 float right at x779 y2202; paragraphs y2218-2452", "table": "x80 y2476 650 wide (numbers column 50px + 3 columns 200px), 1px #BFC1B7 grid, radius 6px outer; header row 57px #EEEFE9 14px/20px 700 #111111 (Product | Free tier | Pricing (decreases with volume)); rows 44px #FDFDF8 15px/26.7px 500 #111111, product names 600 #111827 underlined with 16px coloured icons", "link": "'Explore pricing' y2737" }, "phone": { "band": "H2 y3861; image 120x110 floated right at x254; table scrolls horizontally inside the 358 column" }, "anatomy": [ "Rows: 1 Product Analytics | 1 million events/mo | $0.00005/event; 2 Session Replay | 5,000 recordings/mo | $0.005/recording; 3 Feature Flags | 1 million requests/mo | $0.0001/request; 4 Warehouse | 1 million rows/mo | $0.000015/row" ], "components": [ "data table", "floated illustration" ], "copy": [ "Usage-based pricing", "Our whole philosophy is that you shouldn't have to worry about pricing.", "Here are some examples of how we charge for most popular products:", "Explore pricing" ], "copy_prov": "observed 2026-10-30" }, { "name": "Why PostHog?", "summary": "Short list of reasons with bold lead-ins and underlined links, illustration (hog at a whiteboard) floated right.", "ground": "window ground", "desktop": { "band": "H2 y2820; image 300x237 at x759 y2892; list y2943-3114; link 'Read more about us' y3143", "list": "18px/27px 500 #374151, bold lead-ins 600 #111827 ('Transparency.', 'We ship fast.', 'Actually-technical support.' with 'Actually' italic), links 600 #111827 underlined" }, "phone": { "band": "H2 y4928; image 300x237 block above the list" }, "anatomy": [ "Bullets: Transparency. You can read our company handbook, our sales manual, and company strategy. / We ship fast. See our changelog. / Actually-technical support. Our support folks all have engineering backgrounds." ], "components": [ "bulleted prose", "underlined text link" ], "copy": [ "Why PostHog?", "We're different from most companies for a bunch of reasons:", "Read more about us" ], "copy_prov": "observed 2026-10-30" }, { "name": "Bedtime reading", "summary": "Link list with a night-time hog illustration floated right.", "ground": "window ground", "desktop": { "band": "H2 y3226; image 360x268 at x709 y3284; intro y3298; links y3352-3529 (39px pitch) 18px 600 #111827 underlined, bulleted" }, "phone": { "band": "H2 y5694; image 360x268 full width" }, "anatomy": [ "Links: demo.mov, Technical docs, API, Ask a question, Small teams at PostHog" ], "components": [ "link list" ], "copy": [ "Bedtime reading", "Still here? We've got some links that may be mildly interesting to you:" ], "copy_prov": "observed 2026-10-30" }, { "name": "Shameless CTA", "summary": "A mock e-commerce product box: boxed software CD image with a 'NOT ENDORSED BY KIM K' starburst and a G2 badge on the left; product title, cloud selector, $0 FREE price and a big orange Get started button on the right.", "ground": "box #E5E7E0 with 1px #BFC1B7 border, radius 6px", "desktop": { "band": "H2 y3636; intro y3700 (734 wide); haha_bizzniss hog 184x207 at x827 y3645 overlapping the box top by 77px; box x80 y3775 979x586", "left": "blue banner #2F80FA x97 y3768 353x55 (pokes 7px above the box): '3 people (would have) added PostHog to their cart*' 14px 700 #FFFFFF ('(would have)' 12px), '*if this were a real cart' 12px 500; product image 425x416 at x113 y3816; starburst #F1A82C with 'NOT ENDORSED BY KIM K' 18px 700 #000000; G2 badge 90x117 at x105 y4179; footnote 12px/18px 500 #374151 right-aligned", "right": "column x602: 'Eco-friendly' badge (#6AA84F, 12px 600 #FFFFFF uppercase with leaf icon); 'PostHog Web' 36px/54px 700 #374151; 'Digital download*' 14px; 'Select your cloud' 18px/28px 600 #111827; segmented choice US (Virginia) (1px #000000 border, selected) | EU (Frankfurt) 18px 700 #374151, 45px tall; 'Starts at:' then '$0' 20px 700 #374151 struck through + 'Free' 20px 700 #F54E00 + '>1 left at this price!!' 14px; big 3D 'Get started' 260x53 (24px/32px 700 #000000); trend icon + 'Hurry: 2613 companies signed up today. Act now and get $0 off your first order.' 14px/21px #65675E with 'today' 700 #F54E00" }, "phone": { "band": "H2 y6412; hog 120x135 right; box stacks: image 308x302, then the product column" }, "anatomy": [ "The 2613 count and 'today' are live-looking but static at rest" ], "components": [ "3D orange button (large)", "segmented toggle", "badge", "starburst sticker" ], "copy": [ "Shameless CTA", "If nothing else has sold you on PostHog, hopefully these classic marketing tactics will.", "PostHog Web", "Digital download*", "Select your cloud", "US (Virginia)", "EU (Frankfurt)", "Starts at:", "Get started" ], "copy_prov": "observed 2026-10-30" } ], "footer": { "summary": "There is no footer band. The window content ends with a hit counter: 8 seven-segment-style digit SVGs (16px tall, #374151) at window x80 y4409 (phone x16 y7676), 16px above the content end (desktop scrollHeight 4451). The desktop shell (menu bar + icons) is the site's permanent wayfinding instead of a footer.", "ground": "window ground #D3DAC6", "anatomy": [ "Counter: 99x16, digits drawn as svg glyphs with 2px gap, value changes per visit (reference showed 15695396)", "No copyright, address or legal links on the homepage window; legal lives in the menus" ], "phone": "Same counter at the bottom of the window content, left-aligned at x16" }, "cookie_banner": { "summary": "Toast card fixed at the bottom-right of the viewport on first visit, with an illustrated portrait of Ursula von der Leyen giving two thumbs up at its bottom-right corner.", "desktop": "x1034 y703 390x181 (fixed bottom 16px right 16px, width 390px)", "phone": "x16 y647 358x181 (max-width calc(100vw - 32px))", "box": "#FFFFFF, 1px #BFC1B7, radius 6px, padding 16px, box-shadow 0 10px 38px -10px rgba(14,18,22,0.35), 0 10px 20px -15px rgba(14,18,22,0.2); grid columns [auto 26px] gap 15px", "text": "Title 'Legally-required cookie banner' 15px/18.75px 600 #111111. Body 14px/20px 400 #65675E: p1 'PostHog.com doesn't use third-party cookies, only a single in-house cookie.' (4px top margin); p2 (12px below, padding-right 112px) 'No data is sent to a third party. (Ursula von der Leyen would be so proud.)' with 'Ursula von der Leyen' under a 1px dashed #BFC1B7 bottom border", "close": "26x22 ghost button top-right (x1381 y720), 16px X #111111", "portrait": "the cookie-ursula slot image drawn 180x81, absolute bottom 0 right -16px (so it overhangs the card's right edge by 15px): desktop x1259 y802, phone x209 y746", "copy_prov": "observed 2026-10-30" }, "dark_ground": { "secondary_button": "n/a on the homepage (no dark bands; dark mode swaps wallpaper to 9000_bg_dark and is not the reference)", "link": "n/a", "muted_text": "n/a", "hairline": "n/a", "logo_variant": "light mode only at rest: full-colour mark + #111111 wordmark; posthog-logo-white.svg exists for dark mode" } }, "bands": [ { "label": "Desktop wallpaper (shell)", "ground": "#CBD5B9", "content": "landscape illustration + hedge bottom-right", "desktop": "full 1440x900, fixed, never scrolls", "phone": "the wallpaper-phone slot image, hidden behind the window", "anatomy": [ "hedge.png 777x631 bottom-right" ], "ground_note": "the wallpaper-desktop slot image cover 100% 100% over linear-gradient(#FDEECD,#FFFEF4) (ground value: the observed menu-bar tint over the wallpaper, as the closest flat stand-in for the illustrated landscape)" }, { "label": "Menu bar (shell)", "ground": "#CBD5B9", "content": "logomark, Products, Pricing, Docs, Community, Company, More | Get started – free, search, help, account", "desktop": "x8 y8 1424x40 radius 4px shadow 0 25px 50px -12px rgba(0,0,0,0.25)", "phone": "x0 y0 390x40, logomark + chevron, CTA, 3 icons", "anatomy": [ "13px 500 #23251D labels" ] }, { "label": "Desktop icons (shell)", "ground": "#CBD5B9", "content": "left: Home, Self-driving product, Context warehouse, Pricing, Docs, Demo, Talk to a human; right: About us, Changelog, Company handbook, Store, Careers, Trash", "desktop": "112px columns at x4 and x1324, 84px pitch from y66, 36px icons, 13px white labels", "phone": "covered by the window", "anatomy": [ "icons are frosted white pictograms" ], "ground_note": "transparent over wallpaper (ground value: the observed menu-bar tint over the wallpaper, as the closest flat stand-in for the illustrated landscape)" }, { "label": "App window (shell)", "ground": "#D3DAC6", "content": "the homepage, scrolling internally", "desktop": "x150 y69 1139x802 radius 20px, maximize + close top-right at 40% opacity", "phone": "x0 y40 390x804 radius 0, close only", "anatomy": [ "content column 979px (80px side padding), 48px top padding" ] }, { "label": "Hero (window y0-434)", "ground": "#D3DAC6", "content": "wordmark, H1 with blue chip, highlighted paragraph, join line | Set up card, then tabs", "desktop": "2 columns 474 | 448 card, H1 36px 800", "phone": "centred single column, H1 30px, card full width", "anatomy": [ "yellow highlighter strokes", "orange 3D buttons" ] }, { "label": "Demo tab panel (window y394-900)", "ground": "#B62AD9", "content": "3 tabs; chat mock + Ask PostHog anything pitch", "desktop": "979x466 frame, mock 515x400 + text 368", "phone": "stacked tabs, mock 310x240 above text", "anatomy": [ "8px purple frame", "pause button" ], "ground_note": "#B62AD9 frame, #FFFFFF card" }, { "label": "Built-in tools ticker (y948)", "ground": "#D3DAC6", "content": "label + product marquee", "desktop": "one row, 32px", "phone": "label above ticker", "anatomy": [ "24px edge fades" ] }, { "label": "Social proof (y1036)", "ground": "#D3DAC6", "content": "H2, sub, 2-column logo board, Open Customers", "desktop": "board 979x361", "phone": "board 358x712", "anatomy": [ "#EEEFE9 header cells" ], "ground_note": "#D3DAC6 + white board" }, { "label": "All your data, working together (y1635)", "ground": "#D3DAC6", "content": "prose + floated card with sailor hog", "desktop": "card 316x358 right", "phone": "card full width", "anatomy": [ "blue chip in H2" ], "ground_note": "#D3DAC6 + #E5E7E0 card" }, { "label": "Usage-based pricing (y2146)", "ground": "#D3DAC6", "content": "prose, hog millionaire, 4-row table, Explore pricing", "desktop": "table 650 wide", "phone": "table scrolls", "anatomy": [ "#FDFDF8 cells, #BFC1B7 lines" ] }, { "label": "Why PostHog? (y2820)", "ground": "#D3DAC6", "content": "3 bullets, illustration", "desktop": "image 300x237 right", "phone": "image above", "anatomy": [ "bold lead-ins" ] }, { "label": "Bedtime reading (y3226)", "ground": "#D3DAC6", "content": "5 links, night hog", "desktop": "image 360x268 right", "phone": "image full width", "anatomy": [ "underlined 600 links" ] }, { "label": "Shameless CTA (y3636-4361)", "ground": "#E5E7E0", "content": "mock product page with big Get started", "desktop": "box 979x586, 2 columns", "phone": "stacked", "anatomy": [ "#2F80FA cart banner", "#F1A82C starburst" ], "ground_note": "#E5E7E0 box" }, { "label": "Hit counter (y4409)", "ground": "#D3DAC6", "content": "8 digit counter", "desktop": "x80, 16px tall", "phone": "x16", "anatomy": [ "#374151 seven-segment digits" ] }, { "label": "Cookie toast (fixed)", "ground": "#FFFFFF", "content": "Legally-required cookie banner + Ursula portrait", "desktop": "390x181 at x1034 y703", "phone": "358x181 at x16 y647", "anatomy": [ "portrait overhangs right edge 15px" ] } ], "layout": { "page_margin": { "desktop": 8, "phone": 0 }, "window": { "desktop": "x150 y69 1139x802 (80% x 95% of the 1424x844 desktop area)", "phone": "x0 y40 390x804" }, "content_padding": { "desktop": "48px top, 80px sides (column 979px)", "phone": "48px top, 16px sides (column 358px)" }, "section_gap": 48, "section_rhythm": "space-y-12: 48px between blocks; H2 to first paragraph 32px (H2 40px tall, paragraph starts 72px below H2 top); paragraphs 24px apart", "container_max": 979, "hero_text_max": 474, "columns": 2, "columns_phone": 1, "gutter": 32, "gutter_phone": 16, "menu_bar_height": 40, "icon_column": { "width": 112, "pitch": 84, "first_top": 66, "icon": 36 }, "body_scroll": "none: body is 100vh; only .app-scroll-viewport scrolls", "note": "Measured on https://posthog.com/ at 1440x900 and 390x844 with a fresh context (cookie toast showing). All section y values in kit.spec.page are window-content-relative.", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, "type": [ { "role": "Hero H1", "id": "display-l", "face": "RoundHog", "size": { "desktop": 36, "phone": 30 }, "line_height": "40px (phone 36px)", "tracking_px": -0.9, "weight": 800, "color": "#111827", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)", "note": "phone tracking -0.75px, centred; 'context layer' chip #2F80FA" }, { "role": "Section H2", "id": "h2", "face": "RoundHog", "size": { "desktop": 30, "phone": 30 }, "line_height": "40px", "tracking_px": -0.75, "weight": 700, "color": "#111827", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "role": "Panel H2 (Ask PostHog anything)", "id": "h2-panel", "face": "RoundHog", "size": { "desktop": 24, "phone": 24 }, "line_height": "32px", "tracking_px": -0.6, "weight": 700, "color": "#111827", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "role": "Lead / hero paragraph", "id": "lead", "face": "RoundHog", "size": { "desktop": 17, "phone": 17 }, "line_height": "25.5px", "tracking_px": 0, "weight": 500, "color": "#374151", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "role": "Body / prose", "id": "body", "face": "RoundHog", "size": { "desktop": 18, "phone": 18 }, "line_height": "27px", "tracking_px": 0, "weight": 500, "color": "#374151", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)", "note": "links and bold lead-ins 600 #111827, links underlined" }, { "role": "Secondary body (join line, panel paragraph)", "id": "body-muted", "face": "RoundHog", "size": { "desktop": 18, "phone": 18 }, "line_height": "27px", "tracking_px": 0, "weight": 500, "color": "#65675E", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "role": "Card title", "id": "title-s", "face": "RoundHog", "size": { "desktop": 18, "phone": 18 }, "line_height": "28px", "tracking_px": 0, "weight": 700, "color": "#111111", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "role": "Small UI text (checks, tabs, ticker, card bullets)", "id": "ui-14", "face": "RoundHog", "size": { "desktop": 14, "phone": 14 }, "line_height": "20px", "tracking_px": 0, "weight": 500, "color": "#111111", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)", "note": "tabs 600; ticker links 600 #374151" }, { "role": "Cookie title", "id": "toast-title", "face": "RoundHog", "size": { "desktop": 15, "phone": 15 }, "line_height": "18.75px", "tracking_px": 0, "weight": 600, "color": "#111111", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "role": "Cookie body", "id": "toast-body", "face": "RoundHog", "size": { "desktop": 14, "phone": 14 }, "line_height": "20px", "tracking_px": 0, "weight": 400, "color": "#65675E", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, { "role": "Menu bar + desktop icon labels", "id": "os-13", "face": "RoundHog", "size": { "desktop": 13, "phone": 13 }, "line_height": "13px menu / 16.25px icon labels", "tracking_px": 0, "weight": 500, "color": "#23251D", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)", "note": "icon labels #FFFFFF" }, { "role": "Button label (large / small)", "id": "button", "face": "RoundHog", "size": { "desktop": 15, "phone": 15 }, "line_height": "26.67px (small 13px/19.5px)", "tracking_px": 0, "weight": 700, "color": "#000000", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)", "note": "Install with AI and white-face buttons #111111; Shameless CTA 24px/32px" }, { "role": "Product link (panel)", "id": "link-12", "face": "RoundHog", "size": { "desktop": 12, "phone": 12 }, "line_height": "16px", "tracking_px": 0, "weight": 600, "color": "#111827", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" } ], "components": { "button_3d_primary": { "anatomy": "Two stacked layers: an outer link/button = the base (fill #CD8407, 1px #B17816 border, radius 8px, relative top 2px) and an inner span = the face (fill #EB9D2A, 1px #B17816 border, same radius, margin 0 -1.5px) lifted with translateY(-4px) so ~3-4px of the darker base shows along the bottom edge.", "fill": "#EB9D2A", "base": "#CD8407", "border": "1px solid #B17816", "text": "#000000", "radius": 8, "padding": "8px 20px", "height": 47, "text_style": "15px/26.67px RoundHog 700, centred, nowrap", "example": "Get started (hero card, 203x47); Get started (Shameless CTA, 260x53, 24px/32px)", "states": { "hover": { "measured": { "face_translateY": "-6px" }, "css": { "transform": "translateY(-6px)" }, "prov": "observed" }, "active": { "measured": { "face_translateY": "-2px" }, "css": { "transform": "translateY(-2px)" }, "prov": "observed" } }, "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)", "padding_x": 20, "font_size": 15, "weight": 700, "face": "body" }, "button_3d_secondary": { "anatomy": "Same 3D construction; face #FFFFFF on the #EB9D2A base (secondary sits on an orange base, not #CD8407), 1px #B17816 borders", "fill": "#FFFFFF", "base": "#EB9D2A", "text": "#111111", "border": "1px solid #B17816", "radius": 8, "padding": "8px 20px", "height": 47, "text_style": "15px/26.67px RoundHog 700", "example": "Install with AI (203x47)", "states": { "hover": { "css": { "transform": "translateY(-6px)" }, "prov": "observed" } }, "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)", "padding_x": 20, "font_size": 15, "weight": 700, "face": "body" }, "button_3d_small": { "anatomy": "3D construction at small size: base #CD8407 (white-face variant: base #FFFFFF face for 'Open Customers'), radius 6px, face padding 4px 10px, lifted 1px at rest", "fill": "#EB9D2A", "base": "#CD8407", "text": "#000000", "border": "1px solid #B17816", "radius": 6, "padding": "4px 10px", "height": 32, "text_style": "13px/19.5px RoundHog 700", "example": "Get started – free (menu bar, 125x32); Get started - free (panel, 124x35); Open Customers (white face, 124x35)", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)", "padding_x": 10, "font_size": 13, "weight": 700, "face": "body" }, "menu_item": { "text": "#23251D", "text_style": "13px/13px RoundHog 500", "padding": "2px 8px", "height": 28, "radius": 4, "states": { "hover": { "css": { "background-color": "rgba(0,0,0,0.05)" }, "prov": "inferred" } }, "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, "icon_button_ghost": { "size": "30x26", "icon": "20px #23251D", "border": "1px solid transparent", "radius": 4, "padding": "2px 4px", "states": { "hover": { "css": { "border-color": "#BFC1B7" }, "prov": "observed (class hover:border-primary)" } }, "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, "desktop_icon": { "size": "112px cell, 36x36 icon, label 13px/16.25px 500 #FFFFFF centred 8px below", "states": { "hover": { "css": { "transform": "scale(1.03)" }, "prov": "observed" } }, "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, "window": { "fill": "#D3DAC6", "radius": 20, "shadow": "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)", "controls": "maximize + close, 26x27 each, 16px #23251D glyphs, group opacity 0.4 (hover 0.75)", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, "setup_card": { "fill": "#FDFDF8", "border": "1px solid #BFC1B7", "radius": 6, "shadow": "0 25px 50px -12px rgba(0,0,0,0.25)", "padding": "16px", "size": "448x209 desktop, 358x263 phone", "title": "18px/28px 700 #111111 'Set up' + 30x16 logomark + highlighted 'for free', gap 8px", "checks": "3 rows 14px/20px 500 #111111, 16px check #6AA84F, row pitch 26px, list starts 12px under the title", "buttons": "row of two 203x47 3D buttons, 8px gap, 18px under the list (phone: stacked full width)", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, "highlight_chip": { "fill": "#2F80FA at 10% opacity", "text": "#2F80FA", "radius": 6, "padding": "0 4px", "renders": "#C2D1CB on #D3DAC6", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, "highlighter_stroke": { "stroke": "rgba(247,165,1,0.15)", "width": "19px (26.6px on the card's 18px title)", "passes": 2, "renders": "#DDCC90 on #D3DAC6, #FBE8BD on #FDFDF8", "note": "rough-notation highlight; draw as two slightly wavy overlapping strokes per text line", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, "tab_strip": { "active": "#B62AD9 fill, #FFFFFF 14px/20px 600 text, radius 6px 6px 0 0, 3px white progress bar 8px inset from each side at the bottom", "inactive": "transparent, #65675E", "height": 40, "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, "pill_chip": { "fill": "#FDFDF8", "border": "1px solid #BFC1B7", "radius": 5.65, "shadow": "0 2.3px 0 #D2D3CC", "text_style": "12.83px 600 #111111 + 13px #65675E icon, padding 4.4px", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, "toast": { "fill": "#FFFFFF", "border": "1px solid #BFC1B7", "radius": 6, "padding": "16px", "shadow": "0 10px 38px -10px rgba(14,18,22,0.35), 0 10px 20px -15px rgba(14,18,22,0.2)", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, "data_table": { "border": "1px solid #BFC1B7", "radius": 6, "header": "#EEEFE9, 14px/20px 700 #111111, padding 4px 8px", "cell": "#FDFDF8, 15px 500 #111111, 44px rows", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" }, "text_link": { "text": "#111827", "weight": 600, "decoration": "underline solid", "prov": "observed", "source": "https://posthog.com/ (observed 2026-10-30)" } } }, "system": { "fixed": [ "The gradient logo, never recolored, white on dark", "RoundHog for words; Squeak only in caps beside hogs", "Hand-drawn hedgehogs, never AI or stock", "Warm off-white ground, near-black text, Red links, solid backgrounds", "Direct, honest, slightly weird copy with no emojis" ], "flex": "How loud a piece gets: from a plain RoundHog page with Red links to a full Squeak headline, saturated hog art and hard-shadow stickers. The guide ties the volume to context (product UI quiet, merch and thumbnails loud), not to a numbered level.", "traits": [ { "is": "Opinionated", "not": "Diplomatic to the point of saying nothing", "text": "Have an opinion and an example; no 'it depends' (paraphrase).", "source": "https://posthog.com/handbook/brand/foundations#brand-personality", "prov": "published" }, { "is": "Human", "not": "Corporate robot", "text": "Write like a person to a smart friend (paraphrase).", "source": "https://posthog.com/handbook/brand/foundations#brand-personality", "prov": "published" }, { "is": "Slightly weird", "not": "Try-hard funny", "text": "Rogue, sarcastic, meme-y and weird are encouraged; forced humor isn't (paraphrase).", "source": "https://posthog.com/handbook/brand/foundations#brand-personality", "prov": "published" }, { "is": "Thoughtful", "not": "Random", "text": "Every element has a reason to be there (paraphrase).", "source": "https://posthog.com/handbook/brand/foundations#brand-personality", "prov": "published" }, { "is": "Direct", "not": "Fluffy", "text": "State what the thing is; no filler (paraphrase).", "source": "https://posthog.com/handbook/brand/foundations#brand-personality", "prov": "published" }, { "is": "Honest", "not": "Corporate fluff", "text": "Including about limitations and tradeoffs (paraphrase).", "source": "https://posthog.com/handbook/brand/foundations#brand-personality", "prov": "published" }, { "is": "Playful", "not": "Childish or unprofessional", "text": "Hogs and jokes, with taste (paraphrase).", "source": "https://posthog.com/handbook/brand/foundations#brand-personality", "prov": "published" }, { "is": "Approachable", "not": "Arrogant", "text": "Helpful and close to users (paraphrase).", "source": "https://posthog.com/handbook/brand/foundations#brand-personality", "prov": "published" } ] }, "formats": [ { "format": "Landing page", "level": 2, "must": "Warm off-white #EEEFE9 ground, RoundHog sentence-case headlines left-aligned, #151515 text at 90%, Red links, one orange lifted press-down CTA as the single next action, gradient logo top left, short specific paragraphs; build the structure from kit.spec.page once the homepage anatomy is merged", "flex": "one hog illustration beside the hero; the OS window frame; a dark-mode version with #151515 ground and white logo" }, { "format": "Deck", "level": 3, "must": "One idea per slide, few words, PostHog palette, RoundHog text", "flex": "Squeak for punchy moments, hogs from the library" }, { "format": "Social post", "level": 4, "must": "Short, specific, reactive; no emojis; no corporate congratulations", "flex": "Squeak headline with hog art" }, { "format": "YouTube thumbnail", "level": 5, "must": "Bold and readable small, PostHog palette, illustrated elements, hard drop shadow", "flex": "Squeak text overlay" }, { "format": "Merch and stickers", "level": 5, "must": "Something people outside PostHog would want; limited palette; hard drop shadow; die-cut white border; logomark for embroidery", "flex": "full hog illustrations for all-over print" }, { "format": "Poster", "level": 4, "must": "One message, one big visual; 300 DPI, CMYK confirmed with design, 3mm bleed, 5mm safe zone; review in #design-review", "flex": "Squeak headline with a hog" }, { "format": "Email", "level": 1, "must": "Website voice, slightly more casual; RoundHog-like sans, Red links", "flex": "a small hog" }, { "format": "Product UI and errors", "level": 0, "must": "Clarity over cleverness; RoundHog titles and buttons, system body font, Central 1.5px icons; errors say what happened and what to do", "flex": "a tasteful nod in empty states" } ], "checks": [ { "name": "Logo hidden", "text": "Remove the logo. Does it still feel like PostHog? (the guide's own test): RoundHog, warm off-white, a hog, a press-down button, honest copy." }, { "name": "Hacker News test", "text": "How would this be received on Hacker News? If it would get roasted as spin, vague or try-hard, change it." }, { "name": "Swap test", "text": "Put another SaaS logo on it. If it still fits, it's generic: blobs, stock art and template layouts go back." }, { "name": "Would they want it", "text": "For merch: would someone who doesn't work at PostHog actually want this?" } ], "examples": [ { "chapter": "voice", "do": { "ground": "paper", "text": "Feature flags that don't slow you down" }, "do_caption": "Specific capability, plain words (the guide's own do).", "dont": { "ground": "paper", "text": "Supercharge your feature delivery workflow" }, "dont_caption": "Buzzword headline (the guide's own don't)." }, { "chapter": "voice", "do": { "ground": "paper", "text": "Can't connect. Check your API key and try again." }, "do_caption": "Says what happened and what to do.", "dont": { "ground": "paper", "text": "An error has occurred. Please contact support." }, "dont_caption": "Robotic error message." }, { "chapter": "positioning", "do": { "ground": "paper", "text": "Make your product self-driving" }, "do_caption": "The customer's product is the subject.", "dont": { "ground": "paper", "text": "PostHog is self-driving software" }, "dont_caption": "PostHog isn't the self-driving thing; the customer's product is." }, { "chapter": "type", "do": { "ground": "paper", "text": "Documentation style guide", "font": "display", "weight": 800 }, "do_caption": "Sentence case heading in RoundHog Bold.", "dont": { "ground": "paper", "text": "Documentation Style Guide", "font": "display", "weight": 800 }, "dont_caption": "Title case: the style guide's don't." }, { "chapter": "color", "do": { "ground": "paper", "text": "Read the docs", "ink": "#F54E00", "weight": 700 }, "do_caption": "Links in Red, semibold.", "dont": { "ground": "paper", "text": "Payment failed", "ink": "#F54E00" }, "dont_caption": "Red is a brand color, not an error state." }, { "chapter": "logo", "do": { "ground": "night", "text": "PostHog", "ink": "on_night", "weight": 800 }, "do_caption": "White logo on dark.", "dont": { "ground": "night", "text": "PostHog", "ink": "#F54E00", "weight": 800 }, "dont_caption": "Never recolor the logo or put the gradient logo on dark." } ], "make_it_yours": { "note": "Everything above transfers. These are PostHog's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.", "replace": [ "identity", "purpose", "positioning", "messaging.pillars", "messaging.proof_points", "messaging.taglines", "messaging.boilerplate" ], "reference": { "purpose": { "mission": { "label": "Why PostHog exists", "text": "Equip developers to build successful products.", "prov": "published", "source": "https://posthog.com/handbook/brand/foundations#what-we-want-people-to-know" }, "story": { "text": "PostHog treats brand as a growth engine: its users recommend it. It competes for attention with cat videos rather than B2B rivals, so it chose to be weird, honest and handmade. The logo was rounded in 2021 and given its gradient in 2026; posthog.com is built to look like an operating system, and every hedgehog is drawn by its in-house graphics team rather than generated.", "prov": "published", "paraphrase": true, "source": "https://posthog.com/handbook/brand/overview", "also": [ "https://posthog.com/handbook/brand/visual-identity#rules", "https://posthog.com/handbook/engineering/posthog-com/how-posthog-website-works", "https://posthog.com/handbook/brand/art-requests" ] }, "beliefs": [ { "name": "Taste over polish", "means": "Decisions that show a real point of view; things that look made on purpose (paraphrase).", "prov": "published", "source": "https://posthog.com/handbook/brand/foundations#taste" }, { "name": "Brand first", "means": "Don't annoy users, even when it costs revenue (paraphrase).", "prov": "published", "source": "https://posthog.com/handbook/brand/overview#brand-first" }, { "name": "Handcrafted beats generated", "means": "No AI art or AI hedgehogs; humans draw the brand (paraphrase).", "prov": "published", "source": "https://posthog.com/handbook/brand/visual-identity#overview" }, { "name": "Karma", "means": "Be helpful to other companies, especially early ones (paraphrase).", "prov": "published", "source": "https://posthog.com/handbook/brand/overview#karma" } ] }, "positioning": { "statement": { "text": "PostHog is the context layer for your product: it ingests and stores your analytics, errors, replays and business data so you and your agents can query it and make changes (paraphrase of the frame).", "prov": "published", "source": "https://posthog.com/handbook/brand/foundations#how-we-describe-posthog" }, "category": { "text": "Your product's context layer; a platform that makes your product self-driving", "prov": "published", "source": "https://posthog.com/handbook/brand/foundations#how-we-describe-posthog", "also": [ "https://posthog.com/handbook/brand/foundations#what-we-are-not" ] }, "audience": { "text": "AI-pilled software teams: mostly engineers and technical founders, plus people who want to do technical work without code (paraphrase).", "prov": "published", "source": "https://posthog.com/handbook/brand/foundations#who-were-talking-to" }, "problem": { "text": "Builders patch separate services together and pay for each, while the context they and their agents need is scattered (paraphrase).", "prov": "published", "source": "https://posthog.com/handbook/brand/foundations#why-people-pick-posthog" }, "promise": { "text": "Make your product self-driving: ship, measure and iterate from your product's own context (paraphrase).", "prov": "published", "source": "https://posthog.com/handbook/brand/tone#headlines" }, "differentiators": [ { "text": "All products and their data in one platform, one usage-based bill.", "prov": "published", "source": "https://posthog.com/handbook/brand/foundations#why-people-pick-posthog" }, { "text": "Built for self-serve: every feature free to start, no enterprise-first features chased for big contracts.", "prov": "published", "source": "https://posthog.com/handbook/brand/foundations#what-we-are-not" }, { "text": "Agent-ready: PostHog AI and the PostHog MCP query and act on the same data.", "prov": "published", "source": "https://posthog.com/handbook/brand/foundations#how-we-describe-posthog" }, { "text": "A technical team from engineering to support and sales.", "prov": "published", "source": "https://posthog.com/handbook/brand/foundations#why-people-pick-posthog" }, { "text": "Open source, transparent, and honest about limits.", "prov": "published", "source": "https://posthog.com/handbook/brand/foundations#what-we-want-people-to-know" } ], "alternatives": [ { "text": "Separate point services patched together and billed separately.", "prov": "published", "source": "https://posthog.com/handbook/brand/foundations#why-people-pick-posthog" }, { "text": "Defensive, revenue-optimizing, boring B2B SaaS competitors.", "prov": "published", "source": "https://posthog.com/handbook/brand/overview#the-harsh-truth-of-cat-videos" }, { "text": "Enterprise-first vendors selling with steak dinners.", "prov": "published", "source": "https://posthog.com/handbook/brand/foundations#why-people-pick-posthog" } ], "enemy": { "text": "Not a rival vendor but attention itself: cat videos and TikTok, and corporate try-hard marketing (paraphrase).", "prov": "published", "source": "https://posthog.com/handbook/brand/overview#the-harsh-truth-of-cat-videos" } }, "messaging": { "essence": "PostHog is the context layer for your product.", "essence_prov": "published", "essence_source": "https://posthog.com/handbook/brand/foundations#how-we-describe-posthog", "taglines": [ { "text": "Make your product self-driving", "prov": "published", "source": "https://posthog.com/handbook/brand/tone#headlines", "where": "The guide's approved headline; the customer's product stays the subject" }, { "text": "Your product's context layer", "prov": "observed", "source": "https://posthog.com/ (2026-10-30)", "where": "Homepage H1, with 'context layer' highlighted in blue" }, { "text": "Ship, measure and iterate – all on one platform.", "prov": "published", "source": "https://posthog.com/handbook/brand/tone#headlines", "where": "The guide's headline do-example" }, { "text": "Built for engineers who ship fast", "prov": "published", "source": "https://posthog.com/handbook/brand/tone#headlines", "where": "The guide's headline do-example" } ], "attributes": [ "opinionated", "human", "slightly weird", "thoughtful", "direct", "honest", "playful", "approachable" ], "key_messages": [ { "area": "Get data in", "headline": "PostHog ingests and stores your data", "body": "From PostHog's own products or third-party sources (paraphrase). Step 1 of 4." }, { "area": "Query with your agent", "headline": "Ask PostHog AI or use the PostHog MCP", "body": "Run queries on the data with your agent (paraphrase). Step 2 of 4." }, { "area": "Agents act on it", "headline": "The same data, for your agents to act on", "body": "Via the PostHog MCP agents find issues and propose or take action (paraphrase). Step 3 of 4." }, { "area": "Self-driving", "headline": "Let PostHog self-drive", "body": "Ship changes, measure their effect, repeat. Aspirational, but the parts are composable (paraphrase). Step 4 of 4." } ], "key_messages_source": "https://posthog.com/handbook/brand/foundations#how-we-describe-posthog", "boilerplate": { "text": "PostHog is your product's context layer: developer tools (AI observability, product analytics, session replay, feature flags, experiments, error tracking, logs and more) that ingest and store the data agents need to diagnose problems and ship fixes, tied together by a data warehouse and CDP, and steered from Slack, the web app, PostHog Desktop or the MCP.", "paraphrase": true, "prov": "published", "source": "https://posthog.com/handbook/brand/foundations#the-standard-description", "source_note": "Paraphrase of the standard description the foundations page embeds (src/components/AboutPostHog, 2026-10-30); use PostHog's own wording from that page" }, "pillars": [ { "id": "build-faster", "name": "Better products, faster", "claim": "PostHog helps engineers build better products, faster.", "prov": "published", "source": "https://posthog.com/handbook/brand/foundations#why-people-pick-posthog", "proof": [ "p-teams", "p-free" ] }, { "id": "context-in-one", "name": "All the context in one place", "claim": "Analytics, errors, replays, logs and business data already live in PostHog, so issues come with their context and feed the self-driving loop.", "prov": "published", "source": "https://posthog.com/handbook/brand/foundations#why-people-pick-posthog", "proof": [ "p-description", "p-one-price" ] }, { "id": "one-platform", "name": "Every product, one platform", "claim": "No patching separate services together or paying for each; when builders and their agents need a capability, it's already there.", "prov": "published", "source": "https://posthog.com/handbook/brand/foundations#why-people-pick-posthog", "proof": [ "p-one-price" ] }, { "id": "technical-team", "name": "A technical team", "claim": "Engineers talk to customers; support are former engineers; sales focus on implementation, not steak dinners.", "prov": "published", "source": "https://posthog.com/handbook/brand/foundations#why-people-pick-posthog", "proof": [ "p-honest" ] }, { "id": "self-serve", "name": "Self-serve and free to start", "claim": "Sign up and use every feature for free; usage-based pricing, no loss leaders, no sleazy tactics.", "prov": "published", "source": "https://posthog.com/handbook/brand/foundations#why-people-pick-posthog", "proof": [ "p-free", "p-no-card", "p-refunds", "p-open-source" ] } ], "proof_points": [ { "id": "p-teams", "kind": "stat", "text": "Join 500,000+ teams already shipping with PostHog.", "source": "https://posthog.com/", "prov": "observed", "source_note": "2026-10-30" }, { "id": "p-free", "kind": "stat", "text": "97% of users pay us $0.", "source": "https://posthog.com/", "prov": "observed", "source_note": "2026-10-30" }, { "id": "p-no-card", "kind": "other", "text": "No credit card required to set up.", "source": "https://posthog.com/", "prov": "observed", "source_note": "2026-10-30" }, { "id": "p-one-price", "kind": "other", "text": "No separate pricing per product: pay for usage across all of them.", "source": "https://posthog.com/handbook/brand/tone#body-copy", "prov": "published" }, { "id": "p-description", "kind": "other", "text": "Products include AI observability, product analytics, session replay, feature flags, experiments, error tracking, logs, a data warehouse and a CDP.", "source": "https://posthog.com/handbook/brand/foundations#the-standard-description", "prov": "published" }, { "id": "p-refunds", "kind": "other", "text": "PostHog refunds customers who misconfigure tracking and get a shock bill.", "source": "https://posthog.com/handbook/brand/overview#brand-first", "prov": "published" }, { "id": "p-open-source", "kind": "other", "text": "Open source and transparent, with a public handbook.", "source": "https://posthog.com/handbook/brand/foundations#what-we-want-people-to-know", "prov": "published" }, { "id": "p-honest", "kind": "other", "text": "Each product page lists reasons a user might not be a good fit.", "source": "https://posthog.com/handbook/brand/in-practice#documentation", "prov": "published" } ] } } } }