PostHog

Overview

PostHog is a developer-first product analytics and feature management platform that transforms complex product data into actionable insights. The design system embraces a "Warm Technical Minimalism" aesthetic—a fusion of approachable, human-centered design with precise engineering clarity. The UI lives on a cream-beige canvas (rgb(238, 239, 233)) that evokes a physical workspace, while bold accent colors (golden-orange #cd8407 for primary CTAs, electric blue #2f80fa for secondary actions, and sage green #6aa84f for tertiary elements) inject energy and guide user attention. The emotional response is one of calm competence: users feel they're working with a tool built by engineers who understand their workflow, not a corporate platform imposing complexity.

The brand voice is direct, precise, and occasionally playful—never breathless or hyperbolic. PostHog speaks in the language of product teams: "Understand what users are doing," "Debug & fix issues," "Test & roll out changes." The vocabulary favors concrete nouns (data, features, events) over abstract marketing speak. Example sentence in brand voice: "PostHog is the only platform that acts like a co-pilot for you (and your AI agents) to do it all—autonomously."

Colors

The color system is built on a warm, neutral foundation that prioritizes legibility and technical clarity. The surface stack anchors the interface: surface (#eeefe9) serves as the primary canvas, with surface-container-low (#f3f4f0) used for subtle depth in cards and panels, and surface-container-highest (#dfe0da) for elevated, interactive surfaces. On-surface text is a near-black (#1e1f23) that maintains 15:1 contrast against the cream background, ensuring readability for extended reading of data and documentation.

Primary (#cd8407) is the golden-orange used exclusively for the most important CTAs ("Get started – free", "Install with AI") and interactive highlights. It commands attention without aggression, evoking warmth and approachability. Secondary (#2f80fa) is a vibrant blue reserve

Typography

The type system uses IBM Plex Sans Variable as the single typeface family, chosen for its technical neutrality, excellent readability at all sizes, and variable-weight support for nuanced hierarchy. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major section breaks; headline-lg (40px, 600 weight) anchors feature sections; headline-md (28px, 600 weight) introduces subsections; title-lg (20px, 600 weight) labels cards and modules. Body-lg (18px, 400 weight) is used for introductory paragraphs and feature descriptions, while body-md (16px, 400 weight) is the workhorse for body copy, UI labels, and data tables. Label-md (14px, 600 weight, 0.02em letter-spacing) is applied to button text and small UI labels; label-sm (12px, 500 weight, 0.03em letter-spaci

Layout

The layout system uses a 12-column grid with a max-width of 1280px, providing flexibility for both dense data displays and spacious marketing sections. The gutter is consistently 24px, creating rhythm and breathing room. Sections are separated using lg spacing (40px) to establish clear visual breaks between features and content blocks. Container padding follows the gutter (24px on desktop, 16px on tablet, 12px on mobile), ensuring content never touches the viewport edge. The cream background (#eeefe9) extends full-bleed, creating a cohesive, unified canvas. White or surface-container-lowest cards (rgba(0,0,0,0) or #f9f8f5) float on this canvas with 1px borders in outline-variant (#c9c8ca), creating subtle depth without heavy shadows. Whitespace is used generously—particularly around CTAs a

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle color shifts rather than dramatic layering. Level 1 (Base): the cream surface (#eeefe9) with no shadow, establishing the foundation. Level 2 (Cards & Containers): surface-container-lowest (#f9f8f5) with a 1px border in outline-variant (#c9c8ca) and an optional sm shadow (0 1px 2px rgba(0, 0, 0, 0.05)) on hover to indicate interactivity. Level 3 (Modals & Overlays): surface-container-low (#f3f4f0) with a 1px border and md shadow (0 4px 12px rgba(0, 0, 0, 0.08)) to create clear separation from the background. Level 4 (Floating UI, T

Shapes

The shape philosophy is "Approachable Precision"—rounded corners are used consistently to soften the technical nature of the interface while maintaining clarity. Buttons use md radius (0.75rem / 12px), creating a friendly, clickable appearance without excessive rounding. Cards and containers use lg radius (1rem / 16px) to establish them as distinct, interactive surfaces. Input fields use DEFAULT radius (0.5rem / 8px) for a compact, focused appearance. Badges and small UI elements use full radius (9999px) for a pill-like, approachable aesthetic. The rationale: sm and DEFAULT radii (4px, 8px) ar

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses primary (#cd8407) with white text, md radius (12px), and 12px 24px padding, resulting in a 44px height. On hover, the background shifts to #b87300 (a 15% darker shade) with a smooth 150ms transition, signaling interactivity without jarring color shifts. On active/pressed, it darkens further to #a06500. The button-secondary component uses a transparent background with a 2px solid border in primary and primary text color; on hover, it fills with primary-container (#fff1d5) and shifts text to on-primary-container (#3d2800), creating a clear visual feedback loop. Button-ghost is used for tertiary actions ("Watch a demo", "Talk to a human") with transparent background and on-surface text; on hov

Do's and Don'ts

**Do**

• Do use primary (#cd8407) exclusively for the most critical CTAs—limit to one per screen to maintain focus and hierarchy.
• Do apply the cream surface (#eeefe9) as the full-bleed background to create a cohesive, unified canvas that feels like a workspace.
• Do use IBM Plex Sans Variable at 16px body-md with 24px line-height for all body copy to ensure legibility and comfort during extended reading.
• Do combine subtle shadows (0 1px 2px rgba(0,0,0,0.05)) with 1px borders in outline-variant (#c9c8ca) on cards to create depth without heaviness.
• Do use secondary (#2f80fa) for tabs, links, and secondary navigation to create clear visual hierarchy without competing with primary.
• Do apply 150ms ease-out transitions on all interactive state changes (hover, focus, active) to provide smooth, predictable feedback.

**Don't**

• Don't use primary (#cd8407) for body text, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and key highlights.
• Don't apply shadows heavier than lg (0 16px 40px rgba(0,0,0,0.12)) on any component; the warm background requires soft, diffuse shadows to avoid harsh contrast.
• Don't mix typefaces; IBM Plex Sans Variable is the single family for all UI text, headings, and labels—consistency is critical for technical credibility.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary radii break the visual system and reduce recognizability.
• Don't apply more than 2px borders on any component; thin borders (1px) maintain the clean, minimal aesthetic and prevent visual clutter.
• Don't use pure black (#000000) or pure white (#ffffff) in the UI; stick to on-surface (#1e1f23) for text and surface-container-lowest (#f9f8f5) for light backgrounds to maintain warmth and reduce eye strain.