# PostHog: brand book and build spec

A warm off-white page, near-black text and Red links; a rounded house sans (RoundHog) with Squeak caps for loud moments; hand-drawn hedgehogs that carry all the color; a website built like an operating system with chunky press-down buttons; and a voice that's direct, honest and slightly weird.

From unfairly.ai/brand-guidelines/posthog, checked 2026-10-30. Unofficial study; not affiliated with PostHog.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Handmade on purpose. PostHog spends its color, humor and craft on things AI and stock can't fake (hand-drawn hogs, custom faces, a desktop-OS website, odd synthetic data) and keeps the layout plain and solid so the craft reads as taste, not polish. Based on: From the published rules: taste over polish; handcrafted beats generated; the remove-the-logo test; color lives in illustration; solid backgrounds; no AI art.

## Purpose

Why PostHog exists: Equip developers to build successful products. (published; https://posthog.com/handbook/brand/foundations#what-we-want-people-to-know)

Story: 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. (published)

## Fixed and flexible

Never changes:
- 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

The one thing that varies: 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.

## Positioning

- **Statement**: 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). (published)
- **Category**: Your product's context layer; a platform that makes your product self-driving (published)
- **Audience**: AI-pilled software teams: mostly engineers and technical founders, plus people who want to do technical work without code (paraphrase). (published)
- **Problem**: Builders patch separate services together and pay for each, while the context they and their agents need is scattered (paraphrase). (published)
- **Promise**: Make your product self-driving: ship, measure and iterate from your product's own context (paraphrase). (published)
- **Differentiators**: All products and their data in one platform, one usage-based bill.; Built for self-serve: every feature free to start, no enterprise-first features chased for big contracts.; Agent-ready: PostHog AI and the PostHog MCP query and act on the same data.; A technical team from engineering to support and sales.; Open source, transparent, and honest about limits.
- **Alternatives**: Separate point services patched together and billed separately.; Defensive, revenue-optimizing, boring B2B SaaS competitors.; Enterprise-first vendors selling with steak dinners.

## Messaging

Boilerplate (published): 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.

Taglines:
- Make your product self-driving (The guide's approved headline; the customer's product stays the subject)
- Your product's context layer (Homepage H1, with 'context layer' highlighted in blue)
- Ship, measure and iterate – all on one platform. (The guide's headline do-example)
- Built for engineers who ship fast (The guide's headline do-example)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Better products, faster | PostHog helps engineers build better products, faster. | Join 500,000+ teams already shipping with PostHog.; 97% of users pay us $0. | published |
| All the context in one place | Analytics, errors, replays, logs and business data already live in PostHog, so issues come with their context and feed the self-driving loop. | Products include AI observability, product analytics, session replay, feature flags, experiments, error tracking, logs, a data warehouse and a CDP.; No separate pricing per product: pay for usage across all of them. | published |
| Every product, one platform | No patching separate services together or paying for each; when builders and their agents need a capability, it's already there. | No separate pricing per product: pay for usage across all of them. | published |
| A technical team | Engineers talk to customers; support are former engineers; sales focus on implementation, not steak dinners. | Each product page lists reasons a user might not be a good fit. | published |
| Self-serve and free to start | Sign up and use every feature for free; usage-based pricing, no loss leaders, no sleazy tactics. | 97% of users pay us $0.; No credit card required to set up.; PostHog refunds customers who misconfigure tracking and get a shock bill.; Open source and transparent, with a public handbook. | published |

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "Your product's context layer" | Homepage H1 | https://posthog.com/ (2026-10-30) |
| "Join 500,000+ teams already shipping with PostHog." | Homepage hero | https://posthog.com/ (2026-10-30) |
| "AVERAGE DOCS ENJOYER" | Squeak art (guide example) | https://posthog.com/handbook/brand/assets#squeak |

## Voice

Tone words: Opinionated, Human, Direct, Honest, Slightly weird.

Traits:
- Opinionated, but not Diplomatic to the point of saying nothing (published)
- Human, but not Corporate robot (published)
- Slightly weird, but not Try-hard funny (published)
- Thoughtful, but not Random (published)
- Direct, but not Fluffy (published)
- Honest, but not Corporate fluff (published)
- Playful, but not Childish or unprofessional (published)
- Approachable, but not Arrogant (published)

- 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 a copy check enforces:
- Sentence case headlines
- American spelling
- Write as "we", to "you"
- Never: helps you to, empowers, enables you to unlock, leverage, leverages, utilize, streamline, robust, best-in-class, holistic, seamless, synergy. Say say what it does: uses, use, speed up, simplify, strong, or describe it instead
- Say "use", not "utilize" or "leverage"
- Say "enable", not "allow"
- No emojis: they read as try-hard. Use plain English
- Active voice: 'PostHog tracks your events', not 'Events are tracked by PostHog'
- Use the Oxford comma
- No comma after i.e. or e.g.
- Spaced en dash ( – ), never an em dash or a hyphen in its place
- Straight apostrophes and quote marks, not curly
- Capitalize a product's name (Session Replay), lowercase the category (session replay tools)
- open-source before a noun, open source otherwise
- Capitalize acronyms (URLs) and link or define the first use when unsure
- No 'it depends' or 'it's complicated': have an opinion, give an example
- Short paragraphs: ideally no more lines than fingers on a hand; one clear next action per page
- Lead with the specific; don't open a page with a mission statement or a feature-first 'Introducing...' headline
- Never: analytics platform, product improvement platform, dev tool platform, self-driving product, self-driving software, product analytics product. Say PostHog makes your product self-driving; it is your product's context layer instead
- Never: suite of products, collection of products, set of tools, bunch of tools, product and data tools. Say name the products, or say platform instead
- Error messages say what happened and what to do; 'An unexpected error occurred' is a cop-out

Their words: uses, use, speed up, simplify, products, apps.
Never: 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 <your product> (third parties).

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Background | #EEEFE9 | paper | Published light-mode background; PostHog primarily uses light mode. |
| Text | #151515 | ink | Published text color, at 90% opacity for paragraphs. |
| Accent | #E5E7E0 | surface | Published light-mode accent fill. |
| Text secondary | #65675E | ink_muted | Our reading: the site's --text-secondary (code). The guide prefers opacity and publishes no muted color. |
| Red | #F54E00 | accent | Brand red, same in both modes; links. Never a warning or error color. |
| Blue | #1D4AFF | accent_secondary | Brand blue, same in both modes. |
| Yellow | #DC9300 | highlight | Brand yellow (light mode); #F1A82C in dark mode. |
| Dashed divider | #D0D1C9 | border | Dashed divider lines in light mode; #4B4B4B in dark. |
| Background (dark) | #151515 | night | Published dark-mode background. |
| Text (dark) | #EEEFE9 | on_night | Published dark-mode text. |
| Gray | #BFBFBC | extra | Brand gray, same in both modes. |
| Accent (dark) | #2C2C2C | extra | Dark-mode accent fill. |
| Button orange | #EB9D2A | extra | Observed in code: the primary CTA face, on a #CD8407 plate with a #B17816 border. |
| tangerine (brand package) | #FF5C1C | extra | One of 12 colors brand.posthog.com publishes; differs from the handbook Red. |
| cobalt (brand package) | #0457FF | extra | brand.posthog.com color; differs from the handbook Blue. |
| yellow (brand package) | #FFA81C | extra | brand.posthog.com color; differs from the handbook Yellow. |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | RoundHog | Proprietary: PostHog's own face. The woff2 files are public at brand.posthog.com and in @posthog/brand, but under the PolyForm Strict License 1.0.0 (no use in other projects) | Figtree | "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif |
| body | RoundHog | Proprietary (PolyForm Strict 1.0.0) | Figtree | "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif |
| mono | Source Code Pro | Open (SIL OFL 1.1) | Source Code Pro | Menlo, Consolas, Monaco, monospace |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero H1 | --text-display-l-* | RoundHog | 36px | 30px | 40px (phone 36px) | -0.9px | 800 |
| Section H2 | --text-h2-* | RoundHog | 30px | 30px | 40px | -0.75px | 700 |
| Panel H2 (Ask PostHog anything) | --text-h2-panel-* | RoundHog | 24px | 24px | 32px | -0.6px | 700 |
| Lead / hero paragraph | --text-lead-* | RoundHog | 17px | 17px | 25.5px | 0px | 500 |
| Body / prose | --text-body-* | RoundHog | 18px | 18px | 27px | 0px | 500 |
| Secondary body (join line, panel paragraph) | --text-body-muted-* | RoundHog | 18px | 18px | 27px | 0px | 500 |
| Card title | --text-title-s-* | RoundHog | 18px | 18px | 28px | 0px | 700 |
| Small UI text (checks, tabs, ticker, card bullets) | --text-ui-14-* | RoundHog | 14px | 14px | 20px | 0px | 500 |
| Cookie title | --text-toast-title-* | RoundHog | 15px | 15px | 18.75px | 0px | 600 |
| Cookie body | --text-toast-body-* | RoundHog | 14px | 14px | 20px | 0px | 400 |
| Menu bar + desktop icon labels | --text-os-13-* | RoundHog | 13px | 13px | 13px menu / 16.25px icon labels | 0px | 500 |
| Button label (large / small) | --text-button-* | RoundHog | 15px | 15px | 26.67px (small 13px/19.5px) | 0px | 700 |
| Product link (panel) | --text-link-12-* | RoundHog | 12px | 12px | 16px | 0px | 600 |

## Layout

Measured on https://posthog.com/handbook/brand/overview: 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.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 8px | 0px |
| Container max width | 979px | full |
| Hero text width | max 474px | full |
| Grid columns | 2 | 1 |
| Gutter | 32px | 16px |

Breakpoints weren't measured. tokens.css switches to the phone values at 600px; that number is our default, not PostHog's.

Homepage bands, top to bottom (observed):
1. Desktop wallpaper (shell)
   - Desktop: full 1440x900, fixed, never scrolls
   - Phone: the wallpaper-phone slot image, hidden behind the window
   - hedge.png 777x631 bottom-right
2. Menu bar (shell)
   - 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
   - 13px 500 #23251D labels
3. Desktop icons (shell)
   - Desktop: 112px columns at x4 and x1324, 84px pitch from y66, 36px icons, 13px white labels
   - Phone: covered by the window
   - icons are frosted white pictograms
4. App window (shell)
   - Desktop: x150 y69 1139x802 radius 20px, maximize + close top-right at 40% opacity
   - Phone: x0 y40 390x804 radius 0, close only
   - content column 979px (80px side padding), 48px top padding
5. Hero (window y0-434)
   - Desktop: 2 columns 474 | 448 card, H1 36px 800
   - Phone: centred single column, H1 30px, card full width
   - yellow highlighter strokes
   - orange 3D buttons
6. Demo tab panel (window y394-900)
   - Desktop: 979x466 frame, mock 515x400 + text 368
   - Phone: stacked tabs, mock 310x240 above text
   - 8px purple frame
   - pause button
7. Built-in tools ticker (y948)
   - Desktop: one row, 32px
   - Phone: label above ticker
   - 24px edge fades
8. Social proof (y1036)
   - Desktop: board 979x361
   - Phone: board 358x712
   - #EEEFE9 header cells
9. All your data, working together (y1635)
   - Desktop: card 316x358 right
   - Phone: card full width
   - blue chip in H2
10. Usage-based pricing (y2146)
   - Desktop: table 650 wide
   - Phone: table scrolls
   - #FDFDF8 cells, #BFC1B7 lines
11. Why PostHog? (y2820)
   - Desktop: image 300x237 right
   - Phone: image above
   - bold lead-ins
12. Bedtime reading (y3226)
   - Desktop: image 360x268 right
   - Phone: image full width
   - underlined 600 links
13. Shameless CTA (y3636-4361)
   - Desktop: box 979x586, 2 columns
   - Phone: stacked
   - #2F80FA cart banner
   - #F1A82C starburst
14. Hit counter (y4409)
   - Desktop: x80, 16px tall
   - Phone: x16
   - #374151 seven-segment digits
15. Cookie toast (fixed)
   - Desktop: 390x181 at x1034 y703
   - Phone: 358x181 at x16 y647
   - portrait overhangs right edge 15px

## Page anatomy

How PostHog's own landing pages are built, part by part (observed; https://posthog.com/, 2026-10-30). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- 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

**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

**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

**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/<name> 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

**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

**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

**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

**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

**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

**On dark grounds**
- 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

## Components

- **button 3d primary** (observed): 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), padding x 20, font size 15, weight 700, face body
  - hover (observed): face translateY -6px
  - active (observed): face translateY -2px
- **button 3d secondary** (observed): 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), padding x 20, font size 15, weight 700, face body
  - hover (observed): transform translateY(-6px)
- **button 3d small** (observed): 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), padding x 10, font size 13, weight 700, face body
- **menu item** (observed): text #23251D, text style 13px/13px RoundHog 500, padding 2px 8px, height 28, radius 4
  - hover (our reading): background-color rgba(0,0,0,0.05)
- **icon button ghost** (observed): size 30x26, icon 20px #23251D, border 1px solid transparent, radius 4, padding 2px 4px
  - hover (observed (class hover:border-primary)): border-color #BFC1B7
- **desktop icon** (observed): size 112px cell, 36x36 icon, label 13px/16.25px 500 #FFFFFF centred 8px below
  - hover (observed): transform scale(1.03)
- **window** (observed): 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)
- **setup card** (observed): 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)
- **highlight chip** (observed): fill #2F80FA at 10% opacity, text #2F80FA, radius 6, padding 0 4px, renders #C2D1CB on #D3DAC6
- **highlighter stroke** (observed): 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. rough-notation highlight; draw as two slightly wavy overlapping strokes per text line
- **tab strip** (observed): 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
- **pill chip** (observed): 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
- **toast** (observed): 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)
- **data table** (observed): border 1px solid #BFC1B7, radius 6, header #EEEFE9, 14px/20px 700 #111111, padding 4px 8px, cell #FDFDF8, 15px 500 #111111, 44px rows
- **text link** (observed): text #111827, weight 600, decoration underline solid

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| hover-enter | none (instant) |  | No animation when hovering onto a button: it should feel snappy | published |
| hover-leave |  |  | Animating when the pointer leaves a button is allowed. Easing and duration not published | published |
| hover-lift |  |  | A slight zoom on hover. On the site the primary CTA face rises from -2px to -3/-4px (md) or -4 to -6px (lg) | published |
| press-down |  |  | A pressing-down feel on click: the CTA face drops to -1px (-2px on lg) over its darker plate | published |
| animate-in | ease-out to a still final frame |  | Team crests and blog art animate in, then stop; no constant loops | published |
| character-rig |  |  | Max and other hogs animate with puppet rigging; shadows move with the character | published |
| slide-up-fade-in |  |  | Site keyframe: opacity 0 to 1 while rising 10px (slideUpFadeIn). Duration set per use | observed |
| logo-still |  |  | Never spin, bounce or glitch the logo without explicit approval | published |

## Icon tokens

Grid not published, stroke 1.5px outline (Central Icon System, product UI) (published).

## Signature moves

### A hedgehog with a Squeak headline

Where: marketing headlines, ads, social, event signage, stickers, thumbnails.
Do: 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. One hog moment per piece; art accentuates content, it doesn't distract.
Don't: use Squeak without hog art or an informal context, set it in lowercase, or use AI-generated or stock hedgehogs.
Example: "AVERAGE DOCS ENJOYER".

### The lifted, pressable button

Where: every CTA on posthog.com.
Do: 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. One primary CTA per view; one clear next action per page.
Don't: fade or ease the button in on hover, or flatten it into a generic SaaS pill.
Example: "Get started – free".

### White border and hard drop shadow

Where: stickers, merch graphics, team crests, YouTube thumbnails.
Do: die-cut shapes with a white border and a hard (unblurred) drop shadow; a limited palette (three colors rather than eight). On graphic elements, not on web cards (web cards get smooth shadows).
Don't: use square stickers or soft blurred shadows on merch graphics.
Example: "SHIP IT".

### The website as an operating system

Where: posthog.com.
Do: a macOS-style menu bar, desktop icons on a wallpaper, and every page opened as a resizable app window (reader, editor, explorer, inbox, presentation). The site's frame; product pages are slide-deck windows.
Don't: rebuild it as a generic hero-plus-feature-grid SaaS page.
Example: "Your product's context layer".

### Opacity instead of more colors

Where: text, links, charts.
Do: paragraph text at 90% opacity, links at 95% and semibold, hover 100%; in charts use opacity or pattern before adding a hue. Always.
Don't: add a new hue for a state, a link or a chart series.
Example: "Read the docs".

## Positioning: rules

PostHog frames itself as 'the context layer for your product' and insists the customer's product is what becomes self-driving. A four-step ladder (get data in, query with your agent, give it to your agent to act on, let PostHog self-drive) organizes the products, and a 'What we are not' list bans analytics platform, collection-of-tools and enterprise-first framing.

Why it works: Engineers distrust marketing; a precise frame plus an explicit don't-say list stops copy drifting into generic SaaS language.

|  |  |
|---|---|
| Frame | the context layer for your product |
| Audience | AI-pilled software teams |
| Ladder | data in, query, agents act, self-drive |

- Use the context-layer frame everywhere
- Keep the customer's product as the subject: PostHog makes your product self-driving
- Start with the step on the ladder that matches the customer's need
- Products are products; Web, Slack and MCP are apps
- Don't call PostHog an analytics platform, a dev tool platform or a product improvement platform
- Don't describe it as a collection, set or bunch of products
- Don't drift into enterprise-speak

Do and don't:
- Do: "Make your product self-driving". The customer's product is the subject.
- Don't: "PostHog is self-driving software". PostHog isn't the self-driving thing; the customer's product is.

Real examples, to look at on PostHog's own pages (not for reuse):
- The four-step ladder from data in to self-driving: https://posthog.com/handbook/brand/foundations#how-we-describe-posthog

Sources: https://posthog.com/handbook/brand/foundations, https://posthog.com/handbook/brand/overview

## Messaging: rules

The handbook gives one frame (context layer), a standard 'About PostHog' paragraph embedded in every blog post, five reasons people pick PostHog, and paired headline examples. The homepage leads with 'Your product's context layer' and proof like 500,000+ teams and 97% of users paying nothing.

Why it works: Specific capability lines ('It does X') and honest proof land with readers who can smell overpromising.

- Lead with the specific capability or benefit, never 'Introducing...'
- Use the standard description for press and newsletters
- Name products with capitals (Session Replay), categories in lowercase
- Proof is concrete: users, price, refunds, open source
- Don't open a page with a mission statement
- Don't say 'product analytics product'

Sources: https://posthog.com/handbook/brand/foundations, https://posthog.com/handbook/brand/tone, https://posthog.com/

## Voice: rules

Eight is/is-not pairs (opinionated, not diplomatic-to-nothing; slightly weird, not try-hard; playful, not childish). The tone page says write for a smart friend, lists weasel words with replacements, bans emojis and passive voice, and gives do/don't tables for headlines, body, errors, emails and social. The style guide adds sentence case, American English, Oxford comma and spaced en dashes.

Why it works: Engineers reward honesty and wit and punish corporate fluff; the rules make 'human' checkable.

|  |  |
|---|---|
| Traits | Opinionated, Human, Slightly weird, Thoughtful, Direct, Honest, Playful, Approachable |
| Case | sentence case |
| Spelling | American English |
| Dash | spaced en dash |
| Comma | Oxford |
| Emojis | none |

- Clear, specific, direct, honest, conversational; contractions are fine
- Sentence case for titles; American English; Oxford comma
- Spaced en dash ( – ), straight quotes, no comma after i.e./e.g.
- Cut hedge words: leverages, utilize, streamline, seamless, robust
- No emojis
- Run the Hacker News test before shipping
- Don't force a joke that needs explaining
- Don't use passive voice
- Don't hedge with 'it depends'
- Don't write robotic error messages

Do and don't:
- Do: "Feature flags that don't slow you down". Specific capability, plain words (the guide's own do).
- Don't: "Supercharge your feature delivery workflow". Buzzword headline (the guide's own don't).
- Do: "Can't connect. Check your API key and try again.". Says what happened and what to do.
- Don't: "An error has occurred. Please contact support.". Robotic error message.

Real examples, to look at on PostHog's own pages (not for reuse):
- Voice & tone page: the core principle: https://posthog.com/handbook/brand/tone

Sources: https://posthog.com/handbook/brand/tone, https://posthog.com/handbook/brand/foundations, https://posthog.com/handbook/content/posthog-style-guide, https://posthog.com/handbook/brand/ambassador, https://posthog.com/handbook/brand/in-practice

## Logo: rules

Six variants: standard (gradient, landscape, the default), dark (black), light (white, for dark grounds), logomark alone (small sizes), stacked, and 4-color print. brand.posthog.com ships 22 files including square and circle avatar canvases. The mark was rounded in 2021 and given gradients with no gaps between the hedgehog's body bars in 2026.

Why it works: A single default plus strict substitutions (white on dark, print without gradients) keeps the gradient mark intact everywhere.

|  |  |
|---|---|
| Clear space | height of the P |
| Minimum | 80px wide (full logo) |
| Badge minimum | 100×50px |
| Default | standard gradient, landscape |
| Embroidery | logomark only |

- Standard gradient logo by default; never on dark backgrounds
- Light (white) logo on dark or colored grounds; dark (black) logo only when one color is required
- Logomark alone only where the full logo won't fit (favicons, app icons, avatars)
- Clear space: the height of the 'P' in PostHog on all sides
- Minimum size: full logo 80px wide; below that use the logomark
- 4-color logo only for print or limited palettes
- Square or circle logomark files for avatars; SVG always preferred
- Don't recolor the logomark (no white hedgehog face on dark)
- Don't stretch, skew, rotate or add effects
- Don't use the old logos (square font, sharp edges)
- Don't use the logo as a reduced-opacity watermark
- Don't place it on busy photos without a container
- Don't crowd it with same-size logos
- Don't animate it without approval
- Don't set 'PostHog' in plain text next to the logomark

Do and don't:
- Do: "PostHog". White logo on dark.
- Don't: "PostHog". Never recolor the logo or put the gradient logo on dark.

Real examples, to look at on PostHog's own pages (not for reuse):
- Standard logo (gradient), the default: https://brand.posthog.com/logo
- Light logo, for dark backgrounds: https://brand.posthog.com/logo
- 4-color print logo: https://brand.posthog.com/logo
- Stacked logo: https://brand.posthog.com/logo
- Logomark, for small sizes only: https://brand.posthog.com/logo
- Built with PostHog badge for third parties: https://brand.posthog.com/badges

Sources: https://posthog.com/handbook/brand/visual-identity#logo, https://posthog.com/handbook/brand/assets#logo, https://brand.posthog.com/logo, https://brand.posthog.com/badges

## Color: rules

A deliberately small palette with light and dark schemes: warm off-white #EEEFE9 ground, near-black #151515 text, #E5E7E0 accent, dashed dividers, and Red #F54E00, Yellow #DC9300 and Blue #1D4AFF. Links use Red. Color lives in illustration; backgrounds are solid. brand.posthog.com separately publishes 12 package colors (blue, cobalt, coral, tangerine...) with lighter/darker tones.

Why it works: Fewer colors used consistently make a stronger identity, and opacity steps keep two color schemes manageable.

|  |  |
|---|---|
| Ground (light) | #EEEFE9 |
| Text (light) | #151515 at 90% |
| Links | Red #F54E00, 95%, semibold |
| Dividers | dashed #D0D1C9 / #4B4B4B |

- Light mode first; swap only a couple of hues for dark mode
- Backgrounds solid, not gradients
- Illustrations more saturated than the layout around them
- Modify with opacity: paragraphs 90%, links 95% semibold, hover 100%
- Links in Red
- Charts use the palette; add opacity or patterns before new hues; HSL to adjust lightness
- Every chart and screenshot works in light and dark mode
- Don't use Red #F54E00 for warnings or errors (use separate status colors in product UI)
- Don't use rainbow palettes or many accents at once
- Don't pair dark on dark with weak contrast
- Don't use gradient backgrounds

Not published: color proportions; CMYK/Pantone equivalents (confirm with the design team); status colors; contrast ratios.

Do and don't:
- Do: "Read the docs". Links in Red, semibold.
- Don't: "Payment failed". Red is a brand color, not an error state.

Real examples, to look at on PostHog's own pages (not for reuse):
- The Colors table on Logos & hedgehogs: https://posthog.com/handbook/brand/assets#colors
- Visual identity page: https://posthog.com/handbook/brand/visual-identity#color-system

Sources: https://posthog.com/handbook/brand/assets#colors, https://posthog.com/handbook/brand/visual-identity#color-system, https://brand.posthog.com/colors, https://github.com/PostHog/posthog.com/blob/master/tailwind.config.js (observed in code, 2026-10-30)

## Typography: rules

Three faces, each with one job. RoundHog (rounded sans) sets everything on posthog.com: Bold for titles, SemiBold for links and paragraphs under large headers, Regular for body. Squeak is the uppercase Bold display face for marketing headlines with hedgehog art. Loud Noises is only for what hogs hold or say. RoundHog's files are public at brand.posthog.com but under PolyForm Strict.

Why it works: Strict roles let the playful faces stay special while RoundHog keeps everything else readable.

|  |  |
|---|---|
| RoundHog weights | 400 / 500 / 700 (SemiBold) / 800 (Bold), plus italics |
| Squeak | Bold, uppercase, -2% tracking, 100% leading |
| Loud Noises | uppercase |
| Code | Source Code Pro (site, observed) |
| Stand-ins | Figtree (calibrated against RoundHog), Rubik and Permanent Marker (inferred) |

- RoundHog for all text on posthog.com and most contexts
- Sentence case headings; left-align body; center only short marketing lines
- Squeak: always uppercase, Bold, tracking -2%, line height 100%, only with hog art or informal contexts
- Loud Noises: uppercase, only inside hedgehog art
- Product UI: RoundHog for titles and buttons, system font for body; never Squeak
- Every size step must mean something; dial in line height where text wraps
- No decorative fonts beyond the three
- Don't use Squeak for body, subtitles or descriptions
- Don't use Squeak in product UI
- Don't use Loud Noises outside hog art
- Don't title-case headings

Do and don't:
- Do: "Documentation style guide". Sentence case heading in RoundHog Bold.
- Don't: "Documentation Style Guide". Title case: the style guide's don't.

Real examples, to look at on PostHog's own pages (not for reuse):
- Squeak headlines with hedgehog art: https://posthog.com/handbook/brand/assets#squeak
- Squeak example: https://posthog.com/handbook/brand/assets#squeak
- Squeak example: https://posthog.com/handbook/brand/assets#squeak
- Loud Noises on the sign a hog holds: https://posthog.com/handbook/brand/assets#loud-noises

Sources: https://posthog.com/handbook/brand/visual-identity#typography, https://posthog.com/handbook/brand/assets#squeak, https://posthog.com/handbook/brand/assets#loud-noises, https://brand.posthog.com/fonts, https://github.com/PostHog/posthog.com/blob/master/src/components/Layout/Fonts.css (observed in code, 2026-10-30), https://posthog.com/handbook/brand/in-practice#principles

## Graphic elements: rules

What makes it PostHog without the logo: hand-drawn hogs, Squeak caps, dashed divider lines, smooth shadows on web cards, hard drop shadows and white die-cut borders on stickers and merch, lifted 3D buttons that press down, team crests, and a website built as an operating system with windows and desktop icons.

Why it works: Each element is handmade and slightly odd, which the guide's 'remove the logo' test asks for.

|  |  |
|---|---|
| Divider | dashed |
| Web shadow | smooth (values not published) |
| Merch shadow | hard |
| Button | face lifted 2-4px over a darker plate (code) |

- Remove the logo: it should still feel like PostHog
- Smooth drop shadows on web cards; hard drop shadows on merch, stickers and thumbnails
- Stickers die-cut with a white border
- Team crests: bold, punchy badges in the brand palette
- Dashed dividers in the published divider colors
- Art accentuates content; content comes first
- Don't use floating shapes, abstract blobs or isometric 3D
- Don't use generic SaaS templates
- Don't use gradient backgrounds

Real examples, to look at on PostHog's own pages (not for reuse):
- A team crest (Marketing): https://brand.posthog.com/crests

Sources: https://posthog.com/handbook/brand/visual-identity#overview, https://posthog.com/handbook/brand/visual-identity#stickers, https://posthog.com/handbook/brand/visual-identity#team-crests, https://posthog.com/handbook/brand/in-practice#design-principles-for-web, https://posthog.com/handbook/engineering/posthog-com/how-posthog-website-works, https://github.com/PostHog/posthog.com/blob/master/src/components/CallToAction/index.tsx (observed in code, 2026-10-30)

## Iconography: rules

Three icon families: Central Icon System outlined vector icons (1.5px) for product UI, an icons8 sticker pack for casual contexts, and OS-style icons for the website desktop.

|  |  |
|---|---|
| Product UI | Central Icon System, outlined, 1.5px |
| Casual | icons8 sticker pack |
| Website desktop | OS-style icons |
| Grid | not published |

- Outlined Central icons, 1.5px border, in product UI
- With a label, the icon complements it; alone, it must stand on its own
- Use restraint; ask #design instead of sourcing new icons
- OS-style icons on the posthog.com desktop
- Don't mix icon families within one surface
- Don't source your own icons
- Don't add icons without design review

Sources: https://posthog.com/handbook/brand/visual-identity#icons, https://posthog.com/handbook/brand/in-practice#principles

## Illustration: rules

Max the hedgehog and his friends: thick black monoline with consistent weight, beige body, brown spines, arms and legs, two-tone shadow, no highlights, expression from the eyebrows. Faces left, right or front, never profile or back. 160+ approved hogs and 59 team crests live at brand.posthog.com. Portraits of people are hand-drawn too.

Why it works: Hand-drawn hogs are the most recognizable thing PostHog has and can't be faked by AI, which keeps the trust signal.

|  |  |
|---|---|
| Line | consistent thick black monoline |
| Shading | two-tone shadow, no highlights |
| Library | 160 hoggies, 59 crests (brand.posthog.com) |
| Format | vector (SVG) |

- Use an approved hog from the library or request one; two weeks' notice
- Beige body, brown spines, arms and legs when in color
- Arms bend once; no fingers unless pointing or swearing; stubby feet; snout lines visible
- Strong black monoline of consistent thickness; two-tone shadow; no highlights
- Front, left or right facing only
- Custom, simple, bold and graphic; illustrations more saturated than the layout
- Re-draw outside references in the PostHog style
- Don't use AI-generated hedgehogs or illustrations
- Don't modify approved hogs without approval
- Don't draw Max in side profile or from behind
- Don't use stock or trendy SaaS illustration
- Don't use PostHog art for non-PostHog projects

Real examples, to look at on PostHog's own pages (not for reuse):
- How to draw a hedgehog: template plus shapes: https://posthog.com/handbook/brand/assets#illustration-guide
- Finished hog: monoline, two-tone shadow, eyebrows: https://posthog.com/handbook/brand/assets#illustration-guide
- Approved hog: Chart: https://brand.posthog.com/hoggies
- Approved hog: Director: https://brand.posthog.com/hoggies
- Approved hog: Desk Wizard: https://brand.posthog.com/hoggies

Sources: https://posthog.com/handbook/brand/visual-identity#illustration--hedgehogs, https://posthog.com/handbook/brand/assets#illustration-guide, https://posthog.com/handbook/brand/assets#hedgehog-library, https://brand.posthog.com/hoggies, https://posthog.com/handbook/brand/art-requests

## Photography: rules

Photography is secondary to illustration. When used, it's candid and real (real team, real situations). Product screenshots carry the 'show, don't tell' load: synthetic data with easter eggs, captured in light and dark mode at @2x, in landscape and portrait for heavy-traffic placements.

|  |  |
|---|---|
| Export | @2x |
| Modes | light + dark, paired |
| Variants | up to 4 (landscape/portrait × light/dark) |

- Candid over staged; real team members over stock people
- Honest mockups: no faked impressive data
- Screenshots in light and dark, same data, exported @2x
- Replace customer data with specific, smile-worthy synthetic data
- Landscape and portrait variants for high-traffic placements
- Portraits of people as hand-drawn realism
- Don't use stock photography
- Don't show real customer data
- Don't ship a screenshot in only one color mode

Sources: https://posthog.com/handbook/brand/visual-identity#photography, https://posthog.com/handbook/brand/visual-identity#product-screenshots, https://posthog.com/handbook/brand/visual-identity#portraits

## Motion: rules

Understated by rule: better no animation than one slightly off. Buttons don't animate on hover-in, lift slightly on hover and press down on click. Characters use puppet rigging with shadows that move with them, and art animates in then eases out to a still frame.

|  |  |
|---|---|
| Hover-in | instant |
| Click | press down |
| Characters | puppet rig, end on a still |
| Durations | not published |

- No animation on hover-in; animation on leave is fine
- Slight zoom or lift on hover, a pressing-down feel on click
- Animate in, ease out to a still final frame; don't loop constantly
- Puppet rigging for hogs; shadows animate with the character
- Easing gets extreme attention, or skip the animation
- Don't animate the logo without approval
- Don't use flashy, attention-grabbing motion
- Don't upload animated GIFs (use MP4)

Sources: https://posthog.com/handbook/brand/visual-identity#interaction, https://posthog.com/handbook/brand/visual-identity#animation, https://posthog.com/handbook/content/posthog-style-guide#best-practices-for-images-and-videos, https://github.com/PostHog/posthog.com/blob/master/src/components/CallToAction/index.tsx (observed in code, 2026-10-30)

## Interface and layout: rules

The guide sets principles, not a grid: content first, art supports it, deliberate type hierarchy readable at every viewport, short paragraphs, one next action per page. posthog.com is an OS metaphor: a menu bar, desktop icons and app windows; product pages run as slide-deck windows.

- Content first; art accentuates
- Typography hierarchy deliberate and readable at every viewport
- Short paragraphs, subheads, illustrations and white space break up text
- One clear next action per page

Not published: grid, margins and spacing scale; corner radii; shadow values.

Real examples, to look at on PostHog's own pages (not for reuse):
- Balsamiq hi-fi wireframe: how pages start before code: https://posthog.com/handbook/brand/designing-posthog-website

Sources: https://posthog.com/handbook/brand/in-practice#website-posthogcom, https://posthog.com/handbook/brand/designing-posthog-website, https://posthog.com/handbook/engineering/posthog-com/how-posthog-website-works

## Rules: rules

- Remove the logo: it should still feel like PostHog
- Run the Hacker News test before shipping anything
- Standard gradient logo on light, white logo on dark
- RoundHog for text, Squeak caps only with hogs, Loud Noises only inside hog art
- Solid backgrounds; color lives in illustration; opacity before new colors
- Sentence case, en dashes, no emojis, no weasel words
- Handcrafted beats generated
- Don't use AI-generated art or hedgehogs
- Don't use Red for errors or warnings
- Don't use gradient backgrounds
- Don't recolor or animate the logo
- Don't write corporate try-hard copy
- Don't make merch nobody outside PostHog would want

Sources: https://posthog.com/handbook/brand/visual-identity, https://posthog.com/handbook/brand/foundations, https://posthog.com/handbook/brand/tone, https://posthog.com/handbook/brand/assets, https://posthog.com/handbook/brand/in-practice

## By format

How our engine applies PostHog's system to each format. This is our recipe built from their rules, not something PostHog publishes. Level = how much hog art, Squeak and color the format carries (0 plain, 5 full). Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 2 | 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 | one hog illustration beside the hero; the OS window frame; a dark-mode version with #151515 ground and white logo |
| Deck | 3 | One idea per slide, few words, PostHog palette, RoundHog text | Squeak for punchy moments, hogs from the library |
| Social post | 4 | Short, specific, reactive; no emojis; no corporate congratulations | Squeak headline with hog art |
| YouTube thumbnail | 5 | Bold and readable small, PostHog palette, illustrated elements, hard drop shadow | Squeak text overlay |
| Merch and stickers | 5 | Something people outside PostHog would want; limited palette; hard drop shadow; die-cut white border; logomark for embroidery | full hog illustrations for all-over print |
| Poster | 4 | One message, one big visual; 300 DPI, CMYK confirmed with design, 3mm bleed, 5mm safe zone; review in #design-review | Squeak headline with a hog |
| Email | 1 | Website voice, slightly more casual; RoundHog-like sans, Red links | a small hog |
| Product UI and errors | 0 | Clarity over cleverness; RoundHog titles and buttons, system body font, Central 1.5px icons; errors say what happened and what to do | a tasteful nod in empty states |

## Checks before anything ships

- **Logo hidden**: 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.
- **Hacker News test**: How would this be received on Hacker News? If it would get roasted as spin, vague or try-hard, change it.
- **Swap test**: Put another SaaS logo on it. If it still fits, it's generic: blobs, stock art and template layouts go back.
- **Would they want it**: For merch: would someone who doesn't work at PostHog actually want this?

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is PostHog's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Two published palettes disagree: the handbook (Logos & hedgehogs) gives Red #F54E00, Blue #1D4AFF, Yellow #DC9300; brand.posthog.com (named the source of truth) publishes 12 different package colors (tangerine #FF5C1C, cobalt #0457FF, yellow #FFA81C...). The site code uses #F54E00 and its own yellows (#F7A501, #EB9D2A). Roles here follow the handbook; package colors are extras.
- The visual-identity page says Squeak is always uppercase and Bold with no exceptions; the Logos & hedgehogs page allows the Normal variant in regular casing for small description text.
- Color proportions, contrast ratios and status colors: not published.
- CMYK/Pantone equivalents: not published (the guide says confirm with the design team).
- A muted text color: not published (the guide uses 90% opacity; #65675E is the site's code token).
- On-accent text color: not published (white on Red is our reading of the Squeak example).
- Grid, margins, spacing scale, corner radii and shadow values: not published.
- A type size scale: not published; only weights and roles.
- Motion durations and easing curves: not published.
- Icon grid and sizes: not published beyond the 1.5px Central stroke.
- Squeak and Loud Noises files are internal (not public); RoundHog's files are public but licensed PolyForm Strict, so all three need open stand-ins. Figtree is calibrated against the served RoundHog; Rubik and Permanent Marker are inferred, uncalibrated.
- A monospace face: not published (Source Code Pro is observed in site code).
- Values, positioning statement length variants and taglines beyond the tone examples: not published as such.

Logos and reference images belong to PostHog. Look at them on PostHog's own pages; don't reuse them.