PostHog

Overview

PostHog is a self-driving product platform that combines analytics, error tracking, and AI-powered code generation into a unified developer experience. The brand aesthetic is **Approachable Modernism**—a warm, optimistic design language that demystifies complex product intelligence through friendly typography, generous spacing, and a carefully curated warm-to-cool color palette. The UI evokes confidence and accessibility: users feel empowered to ship faster without friction. PostHog's voice is conversational yet precise, avoiding jargon while respecting developer intelligence. The tone is encouraging and direct, with a hint of personality. Example: "PostHog already has your analytics and errors. Now it ships code to help you build a better product."

Colors

PostHog's color system balances warmth and professionalism. **Primary (rgb(205, 132, 7) / #cd8407)** is a rich, earthy gold used exclusively for primary CTAs ("Get started", "Ship with PostHog") and key interactive states—it commands attention without aggression. **Secondary (rgb(245, 78, 0) / #f54e00)** is a vibrant orange-red reserved for high-impact section headers and accent elements ("Give agents product context" banner), creating visual rhythm and urgency. **Tertiary (rgb(47, 128, 250) / #2f80fa)** is a bright, technical blue used for links, badges, and supporting interactive elements, grounding the palette in developer familiarity. The surface stack is anchored in a warm, off-white base (rgb(238, 239, 233) / #eeefe9) that feels organic and less sterile than pure white, with carefull

Typography

PostHog uses **RoundHog** as its primary typeface—a custom, rounded sans-serif that communicates friendliness and modernity while maintaining technical credibility. The type hierarchy is aggressive: display (60px, 800 weight) for hero headlines, headline-lg (40px, 700 weight) for section titles, and body-md (16px, 400 weight) for standard copy. Letter-spacing is tight on headlines (-0.04em on display, -0.02em on headline-lg) to create visual impact and hierarchy, while body text uses default spacing for readability. Labels use 600 weight at 14px with 0.01em tracking to ensure UI elements feel intentional and scannable. Apply text-shadow 0 1px 2px rgba(0, 0, 0, 0.05) on small labels over busy backgrounds to maintain contrast without increasing font weight.

Layout

PostHog uses a **fluid 12-column grid** with a max-width of 1280px, allowing content to breathe on large screens while remaining readable on mobile. The page rhythm is driven by generous vertical spacing: lg spacing (40px) separates major sections (hero, feature cards, CTA blocks), while md spacing (24px) is used within card groups and between related elements. The gutter is consistently 24px, creating a 48px margin on desktop. Container max-widths vary by context (900px for narrow content, 1160px for feature showcases), but never exceed 1280px. White-space is treated as a design element—the hero section uses 66px top padding and 4px horizontal padding to center content naturally. The layout philosophy prioritizes clarity: each section has a single focal point (primary CTA, feature image,

Elevation & Depth

PostHog uses **subtle, flat-forward elevation** rather than dramatic shadows. Depth is conveyed through color layering and strategic use of borders. Level 1 (base surface) has no shadow; Level 2 (cards, inputs) uses box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) for barely-perceptible separation; Level 3 (modals, popovers) uses 0 4px 12px rgba(0, 0, 0, 0.08) for clear modal hierarchy. Interactive elements (buttons, inputs) use a 1px solid border at rgba(209, 213, 219, 1) to define edges without shadow. On hover, cards transition to box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) and background-color shi

Shapes

PostHog employs **Warm Geometric Precision**—a shape language that balances approachability with technical clarity. Buttons and primary CTAs use 1rem (16px) border-radius, creating distinctly rounded corners that feel friendly and modern without being overly organic. Cards and containers use 1rem as well, maintaining visual consistency. Input fields and smaller interactive elements use 0.5rem (8px) for a more restrained, technical feel. The full-radius (9999px) is reserved for badges and pill-shaped elements (e.g., "97% of users pay us $0"), signaling secondary or supplementary information. Th

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** (rgb(205, 132, 7) background, rgb(17, 17, 17) text, 18px RoundHog 500 weight, 48px height, 12px 24px padding, 1rem radius) is used for all primary CTAs. On hover, background darkens to #b8730a with a 200ms ease transition. **button-secondary** (rgb(251, 191, 36) background with 2px primary border, 18px RoundHog 500 weight, 48px height) is used for secondary actions like "Install with AI". **button-ghost** (transparent background, 1px outline-variant border, primary text color) is used for tertiary actions and navigation links.

Containers & Surfaces **card** uses surface-container-lowest (#f7f7f5) background, 1rem radius, 24px padding, and 0 1px 2px rgba(0, 0, 0, 0.05) shadow. On hover, background shift

Do's and Don'ts

**Do**

• Do use primary gold (#cd8407) exclusively for primary CTAs and critical interactive states—it's the brand's signature accent and must remain reserved.
• Do maintain 24px gutter spacing on desktop and 12px on mobile to ensure content remains scannable and breathing room is preserved.
• Do apply 1rem border-radius to buttons and major cards to signal approachability; use 0.5rem for inputs and smaller UI elements to maintain technical credibility.
• Do use RoundHog at 800 weight for display headlines and 700 weight for section titles to create clear visual hierarchy without relying on size alone.
• Do transition all interactive states (hover, focus, active) over 150ms using cubic-bezier(0.4, 0, 0.2, 1) for smooth, responsive feedback.

**Don't**

• Don't use secondary orange (#f54e00) or tertiary blue (#2f80fa) as primary CTA backgrounds—they are supporting accents and will dilute the gold's impact.
• Don't apply shadows deeper than 0 4px 12px rgba(0, 0, 0, 0.08) or use blur effects; PostHog's elevation is flat-forward and relies on color and borders for depth.
• Don't use border-radius smaller than 0.5rem on any interactive element; the brand's warmth depends on rounded corners, and sharp edges feel cold and technical.
• Don't mix typefaces; RoundHog is the only approved font family for all UI text, including headings, body, and labels.
• Don't exceed 1280px container max-width or use asymmetrical gutters; the grid must remain predictable and centered to support the layout's clarity.