Design System Inspiration of PostHog

1. Visual Theme & Atmosphere

PostHog's website feels like a startup's internal wiki that escaped into the wild — warm, irreverent, and deliberately anti-corporate. The background isn't the expected crisp white or dark void of developer tools; it's a warm, sage-tinted cream (#fdfdf8) that gives every surface a handmade, paper-like quality. Colors lean into earthy olive greens and muted sage rather than the conventional blues and purples of the SaaS world. It's as if someone designed a developer analytics platform inside a cozy garden shed.

The personality is the star: hand-drawn hedgehog illustrations, quirky action figures, and playful imagery replace the stock photography and abstract gradients typical of B2B SaaS. IBM Plex Sans Variable serves as the typographic foundation — a font with genuine technical credibility (created by IBM, widely used in developer contexts) deployed here with bold weights (700, 800) on headings and generous line-heights on body text. The typography says "we're serious engineers" while everything around it says "but we don't take ourselves too seriously."

The interaction design carries the same spirit: hover states flash PostHog Orange (#F54E00) text — a hidden brand color that doesn't appear at rest but surprises on interaction. Dark near-black buttons (#1e1f23) use opacity reduction on hover rather than color shifts, and active states scale slightly. The border system uses sage-tinted grays (#bfc1b7) that harmonize with the olive text palette. Built on Tailwind CSS with Radix UI and shadcn/ui primitives, the technical foundation is modern and component-driven, but the visual output is stubbornly unique.

Key Characteristics:

• Warm sage/olive color palette instead of conventional blues — earthy and approachable
• IBM Plex Sans Variable font at bold weights (700/800) for headings with generous 1.50+ line-heights
• Hidden brand orange (#F54E00) that only appears on hover interactions — a delightful surprise
• Hand-drawn hedgehog illustrations and playful imagery — deliberately anti-corporate
• Sage-tinted borders (#bfc1b7) and backgrounds (#eeefe9) creating a unified warm-green system
• Dark near-black CTAs (#1e1f23) with opacity-based hover states
• Content-heavy editorial layout — the site reads like a magazine, not a typical landing page
• Tailwind CSS + Radix UI + shadcn/ui component architecture

2. Color Palette & Roles

Primary

• Olive Ink (#4d4f46): Primary text color — a distinctive olive-gray that gives all text a warm, earthy tone
• Deep Olive (#23251d): Link text and high-emphasis headings — near-black with green undertone
• PostHog Orange (#F54E00): Hidden brand accent — appears only on hover states, a vibrant orange that surprises

Secondary & Accent

• Amber Gold (#F7A501): Secondary hover accent on dark buttons — warm gold that pairs with the orange
• Gold Border (#b17816): Special button borders — an amber-gold for featured CTAs
• Focus Blue (#3b82f6): Focus ring color (Tailwind default) — the only blue in the system, reserved for accessibility

Surface & Background

• Warm Parchment (#fdfdf8): Primary page background — warm near-white with yellow-green undertone
• Sage Cream (#eeefe9): Input backgrounds, secondary surfaces — light sage tint
• Light Sage (#e5e7e0): Button backgrounds, tertiary surfaces — muted sage-green
• Warm Tan (#d4c9b8): Featured button backgrounds — warm tan/khaki for emphasis
• Hover White (#f4f4f4): Universal hover background state

Neutrals & Text

• Olive Ink (#4d4f46): Primary body and UI text
• Muted Olive (#65675e): Secondary text, button labels on light backgrounds
• Sage Placeholder (#9ea096): Placeholder text, disabled states — warm sage-green
• Sage Border (#bfc1b7): Primary border color — olive-tinted gray for all borders
• Light Border (#b6b7af): Secondary border, toolbar borders — slightly darker sage

Semantic & Accent

• PostHog Orange (#F54E00): Hover text accent — signals interactivity and brand personality
• Amber Gold (#F7A501): Dark button hover accent — warmth signal
• Focus Blue (#3b82f6 at 50% opacity): Keyboard focus rings — accessibility-only color
• Dark Text (#111827): High-contrast link text — near-black for important links

Gradient System

• No gradients on the marketing site — PostHog's visual language is deliberately flat and warm
• Depth is achieved through layered surfaces and border containment, not color transitions

3. Typography Rules

Font Family

• Display & Body: IBM Plex Sans Variable — variable font (100–700+ weight range). Fallbacks: IBM Plex Sans, -apple-system, system-ui, Avenir Next, Avenir, Segoe UI, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Arial
• Monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New — system monospace stack
• Code Display: Source Code Pro — with fallbacks: Menlo, Consolas, Monaco

Hierarchy

Principles

• Bold heading dominance: Headings use 700–800 weight — PostHog's typography is confident and assertive, not whispery
• Generous body line-heights: Body text at 1.50–1.71 line-height creates extremely comfortable reading — the site is content-heavy and optimized for long sessions
• Fractional sizes: Several sizes (21.4px, 19.3px, 13.7px) suggest a fluid/scaled type system rather than fixed stops — likely computed from Tailwind's rem scale at non-standard base
• Uppercase as category signal: Bold uppercase labels (18px–20px weight 700) are used for product category headings — a magazine-editorial convention
• Selective negative tracking: Letter-spacing tightens on display text (-0.75px at 30px) but relaxes to 0px on body — headlines compress, body breathes

4. Component Stylings

Buttons

Dark Primary

• Background: #1e1f23
• Text: #ffffff
• Radius: 6px
• Padding: 10px 12px
• Font: 15px / 600 / IBM Plex Sans
• Hover: opacity 0.7, text shifts to Amber Gold #F7A501
• Active: opacity 0.8, slight scale transform
• Use: Main CTA — dark and confident

Sage Light

• Background: #e5e7e0
• Text: #4d4f46 (Olive Ink)
• Radius: 4px
• Padding: 4px
• Font: 14px / 500 / IBM Plex Sans
• Hover: bg #f4f4f4, text shifts to PostHog Orange #F54E00
• Use: Compact utility button

Warm Tan Featured

• Background: #d4c9b8
• Text: #000000
• Radius: 0px
• Padding: 10px 12px
• Hover: text flash to PostHog Orange #F54E00
• Use: Featured/premium actions

Near-white Ghost

• Background: #fdfdf8
• Text: #4d4f46 (Olive Ink)
• Border: 1px solid transparent
• Radius: 4px
• Padding: 8px 12px
• Hover: text flash to PostHog Orange #F54E00
• Use: Minimal-presence ghost button

Inputs

Default

• Background: #eeefe9
• Text: #374151
• Border: 1px solid #b6b7af
• Radius: 4px
• Padding: 2px 0px 2px 8px
• Placeholder: #9ea096 (Sage Placeholder)
• Focus: #3b82f6 ring at 50% opacity (Tailwind blue focus ring)
• Use: Standard form input — multiple border patterns; some inputs use compound borders (top/left/bottom-only)

Search / Filter

• Background: #eeefe9
• Text: #374151
• Border: 1px solid #b6b7af
• Radius: 4px
• Padding: 6px 8px
• Placeholder: #9ea096
• Use: Search/filter control

Cards

Bordered Card

• Background: #fdfdf8 (Warm Parchment) or #ffffff
• Border: 1px solid #bfc1b7
• Radius: 6px
• Padding: 16px
• Use: Clean and minimal default card

Sage Surface Card

• Background: #eeefe9
• Border: 1px solid #bfc1b7
• Radius: 4px
• Padding: 16px
• Use: Secondary content container

Shadow Card

• Background: #fdfdf8
• Radius: 6px
• Padding: 16px
• Shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25)
• Hover: Orange text flash on interactive cards
• Use: Elevated content (modals, dropdowns)

Badges

Default

• Background: #e5e7e0
• Text: #4d4f46
• Radius: 4px
• Padding: 2px 8px
• Font: 12px / 500 / IBM Plex Sans
• Use: Inferred from §1-§2 baseline (no explicit DS variant in source).

Featured

• Background: #d4c9b8
• Text: #000000
• Radius: 4px
• Padding: 2px 8px
• Font: 12px / 600 / IBM Plex Sans
• Use: Inferred from §1-§2 baseline (no explicit DS variant in source) — warm tan featured tag.

Navigation

• Top nav: Warm background, IBM Plex Sans at 15px weight 600
• Dropdown menus: Rich mega-menu structure with product categories
• Link color: Deep Olive (#23251d) for nav links, underline on hover
• CTA: Dark Primary button (#1e1f23) in the nav — "Get started - free"
• Mobile: Collapses to hamburger with simplified menu

Image Treatment

• Hand-drawn illustrations: Hedgehog mascot and quirky illustrations — the signature visual element
• Product screenshots: UI screenshots embedded in device frames or clean containers
• Action figures: Playful product photography of hedgehog figurines — anti-corporate
• Trust logos: Enterprise logos (Airbus, GOV.UK) displayed in a muted trust bar
• Aspect ratios: Mixed — illustrations are irregular, screenshots are 16:9 or widescreen

AI Chat Widget

• Floating PostHog AI assistant with speech bubble — an interactive product demo embedded in the marketing site

5. Layout Principles

Spacing System

• Base unit: 8px
• Scale: 2px, 4px, 6px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 34px
• Section padding: 32px–48px vertical between sections (compact for a content-heavy site)
• Card padding: 4px–12px internal (notably compact)
• Component gaps: 4px–8px between related elements

Grid & Container

• Max width: 1536px (largest breakpoint), with content containers likely 1200px–1280px
• Column patterns: Varied — single column for text content, 2-3 column grids for feature cards, asymmetric layouts for product demos
• Breakpoints: 13 defined — 1px, 425px, 482px, 640px, 768px, 767px, 800px, 900px, 1024px, 1076px, 1160px, 1280px, 1536px

Whitespace Philosophy

• Content-dense by design: PostHog's site is information-rich — whitespace is measured, not lavish
• Editorial pacing: Content sections flow like a magazine with varied layouts keeping the eye moving
• Illustrations as breathing room: Hand-drawn hedgehog art breaks up dense content sections naturally

Border Radius Scale

• 2px: Small inline elements, tags (span)
• 4px: Primary UI components — buttons, inputs, dropdowns, menu items (button, div, combobox)
• 6px: Secondary containers — larger buttons, list items, card variants (button, div, li)
• 9999px: Pill shape — badges, status indicators, rounded tags (span, div)

6. Depth & Elevation

Shadow Philosophy

PostHog's elevation system is remarkably minimal — only one shadow definition exists in the entire system. Depth is communicated through:

• Border containment: Sage-tinted borders (#bfc1b7) at 1px create gentle warm separation
• Surface color shifts: Moving from #fdfdf8 to #eeefe9 to #e5e7e0 creates layered depth without shadows
• The single shadow: The one defined shadow (0 25px 50px -12px) is reserved for floating elements — modals, dropdowns, popovers. It's a deep, dramatic shadow that creates clear separation when needed

Decorative Depth

• Illustration layering: Hand-drawn hedgehog art creates visual depth naturally
• No gradients or glow: The flat, warm surface system relies entirely on border and surface-color differentiation
• No glassmorphism: Fully opaque surfaces throughout

7. Do's and Don'ts

Do

• Use the olive/sage color family (#4d4f46, #23251d, #bfc1b7) for text and borders — the warm green undertone is essential to the brand
• Flash PostHog Orange (#F54E00) on hover states — it's the hidden brand signature
• Use IBM Plex Sans at bold weights (700/800) for headings — the font carries technical credibility
• Keep body text at generous line-heights (1.50–1.71) — the content-heavy site demands readability
• Maintain the warm parchment background (#fdfdf8) — not pure white, never cold
• Use 4px border-radius for most UI elements — keep corners subtle and functional
• Include playful, hand-drawn illustration elements — the personality is the differentiator
• Apply opacity-based hover states (0.7 opacity) on dark buttons rather than color shifts

Don't

• Use blue, purple, or typical tech-SaaS colors — PostHog's palette is deliberately olive/sage
• Add heavy shadows — the system uses one shadow for floating elements only; everything else uses borders
• Make the design look "polished" or "premium" in a conventional sense — PostHog's charm is its irreverent, scrappy energy
• Use tight line-heights on body text — the generous 1.50+ spacing is essential for the content-heavy layout
• Apply large border-radius (12px+) on cards — PostHog uses 4px–6px, keeping things tight and functional
• Remove the orange hover flash — it's a core interaction pattern, not decoration
• Replace illustrations with stock photography — the hand-drawn hedgehog art is the brand
• Use pure white (#ffffff) as page background — the warm sage-cream (#fdfdf8) tint is foundational

8. Responsive Behavior

Breakpoints

Touch Targets

• Buttons: 4px–6px radius with 4px–12px padding — compact but usable
• Nav links: 15px text at weight 600 with adequate padding
• Mobile: Hamburger menu with simplified navigation
• Inputs: Generous vertical padding for thumb-friendly forms

Collapsing Strategy

• Navigation: Full mega-menu with dropdowns → hamburger menu on mobile
• Feature grids: 3-column → 2-column → single column stacked
• Typography: Display sizes reduce across breakpoints (30px → smaller)
• Illustrations: Scale within containers, some may hide on mobile for space
• Section spacing: Reduces proportionally while maintaining readability

Image Behavior

• Illustrations scale responsively within containers
• Product screenshots maintain aspect ratios
• Trust logos reflow into multi-row grids on mobile
• AI chat widget may reposition or simplify on small screens

9. Agent Prompt Guide

Quick Color Reference

• Primary Text: Olive Ink (#4d4f46)
• Dark Text: Deep Olive (#23251d)
• Hover Accent: PostHog Orange (#F54E00)
• Dark CTA: Near-Black (#1e1f23)
• Button Surface: Light Sage (#e5e7e0)
• Page Background: Warm Parchment (#fdfdf8)
• Border: Sage Border (#bfc1b7)
• Placeholder: Sage Placeholder (#9ea096)

Example Component Prompts

• "Create a hero section on warm parchment background (#fdfdf8) with 30px IBM Plex Sans heading at weight 800, line-height 1.20, letter-spacing -0.75px, olive ink text (#4d4f46), and a dark CTA button (#1e1f23, 6px radius, white text, opacity 0.7 on hover)"
• "Design a feature card with #fdfdf8 background, 1px #bfc1b7 border, 4px radius, IBM Plex Sans heading at 20px weight 700, and 16px body text at weight 400 with 1.50 line-height in olive ink (#4d4f46)"
• "Build a navigation bar with warm background, IBM Plex Sans links at 15px weight 600 in deep olive (#23251d), underline on hover, and a dark CTA button (#1e1f23) at the right"
• "Create a button group: primary dark (#1e1f23, white text, 6px radius), secondary sage (#e5e7e0, #4d4f46 text, 4px radius), and ghost/text button — all flash #F54E00 orange text on hover"
• "Design an input field with #eeefe9 background, 1px #b6b7af border, 4px radius, #9ea096 placeholder text, focus ring in #3b82f6 at 50% opacity"

Iteration Guide

When refining existing screens generated with this design system:

1. Verify the background is warm parchment (#fdfdf8) not pure white — the sage-cream warmth is essential
2. Check that all text uses the olive family (#4d4f46, #23251d) not pure black or neutral gray
3. Ensure hover states flash PostHog Orange (#F54E00) — if hovering feels bland, you're missing this
4. Confirm borders use sage-tinted gray (#bfc1b7) not neutral gray — warmth runs through every element
5. The overall tone should feel like a fun, scrappy startup wiki — never corporate-polished or sterile

10. Voice & Tone

PostHog's voice is scrappy-startup-wiki and engineer-honest. "We make dev tools for product engineers" — terse, capability-driven, slightly irreverent. Sage-tinted gray (#bfc1b7) borders + warm canvas signal "small but serious team that ships." Famous for company handbook being entirely public (posthog.com/handbook).

Voice samples

• Marketing tagline: "We make dev tools for product engineers"

Forbidden phrases. "Revolutionary product analytics". Aggressive Amplitude-comparison framing.

11. Brand Narrative

PostHog was founded 2020 by James Hawkins (Co-CEO) and Tim Glaser (CTO/Co-CEO) as an open-source alternative to Amplitude/Mixpanel (PostHog — About, Y Combinator — PostHog). The company hatched in Y Combinator's W20 batch and launched on Hacker News with their MVP just 4 weeks after writing first code. Hawkins: previously VP Sales & Channels at Arachnys; founded c2o Media before PostHog. Glaser: leads technical strategy, built PostHog on ClickHouse + open-source frameworks. Famous for radical transparency — public handbook, public salaries, public roadmap, public board materials. From-pivot-hell-to-$1.4B-unicorn YC library case study documents the journey (YC Library — Pivot Hell to $1.4B Unicorn). Total funding ~$182M from Stripe, GV, Y Combinator + angels including Jason Warner (CTO GitHub) and Solomon Hykes (Founder Docker) (PostHog — Reflecting on YC 2 years on, Tracxn — PostHog). Used by 190,254+ teams including 65% of YC batch companies. The brand voice tracks this culture: scrappy, honest, occasionally meme-aware. The "Product OS" pivot in 2024-2025 expanded PostHog from analytics to feature flags, session replay, surveys, A/B tests as a single integrated product platform.

12. Principles

1. Open source is the default. UI implication: self-hosting first-class option, never deprioritized.
2. Radical transparency. UI implication: handbook + roadmap publicly linked.
3. Sage-tinted warm gray. Borders #bfc1b7. UI implication: never neutral pure gray; warmth carries.
4. Hedgehog mascot. UI implication: mascot appears in product (404 pages, empty states) as personality moments.
5. Wiki feel over corporate polish. UI implication: documentation can be playful; chrome can have texture.

13. Personas

Personas are fictional archetypes informed by PostHog user segments (product engineers, indie devs, growth teams), not individual people.

Sarah Lin, 31, San Francisco. Founding engineer at Series A. PostHog for analytics + feature flags + session replay in one stack.

Henrik Sondergaard, 38, Copenhagen. Indie SaaS founder. Self-hosts PostHog to keep customer data on his infra.

Priya Krishnan, 27, Bengaluru. Growth engineer at fintech. A/B tests + funnel analysis daily.

14. States

15. Motion & Easing

Standard cubic-bezier. Hedgehog mascot moments are personality, not chrome. prefers-reduced-motion: reduce makes mascot static.

---

Verified: 2026-05-08 (omd:migrate run 46 — Apple-tier) Tier 1 sources: posthog.com home + /pricing (live DOM via playwright — Primary #cd8407 PostHog Amber-Gold 6-8px / 32-46px / 15-16px·400 with Sage-Black #23251d text; Light Amber #eb9d2a Secondary; nav 4px / 13px·500; Region badge Amber-tint 4px / 14px·700; warm three-color (Amber/Sage/Cool Gray) canvas). Tier 2 sources: styles.refero.design / getdesign.md — no record. Tier 2 (Philosophy/founders/funding): PostHog About + handbook + blog (YC 2-years-on), Y Combinator (PostHog W20 + Pivot Hell to $1.4B Library), Tracxn, GV.com. Style ref: notion. Conflicts unresolved: none. Earlier mistake reverted (significant): prior footer captured nav-only — canonical Primary is #cd8407 Amber-Gold (the brand-defining color), missed entirely.