# PostHog — Design System
> An all-in-one platform for product engineers to build, test, measure, and ship products.
- **Canonical:** https://uiuxskills.com/library/posthog
- **Source:** https://posthog.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:13:48.603Z

---

---
version: alpha
name: PostHog
description: An all-in-one platform for product engineers to build, test, measure, and ship products.
tone: >-
  Direct, transparent, technical, and self-aware. The brand uses humor to cut through corporate
  jargon, often leaning into 'anti-marketing' tropes.
color-scheme: light
colors:
  primary: "#FF5B26"
  secondary: "#1D1D1D"
  surface: "#FFFFFF"
  surface-container: "#F5F5F5"
  on-primary: "#FFFFFF"
  on-surface: "#1D1D1D"
  error: "#E11D48"
  success: "#16A34A"
  outline: "#E5E7EB"
  focus-ring: "#FF5B26"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 2px
  md: 6px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#FFFFFF"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#E64A19"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.secondary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#E64A19"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-on-primary:
    backgroundColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.05)
  md: 0 4px 6px -1px rgba(0,0,0,0.1)
  lg: 0 20px 25px -5px rgba(0,0,0,0.1)
---

## Overview

PostHog maintains a highly technical, transparent, and slightly irreverent brand identity. It targets product engineers who value autonomy, speed, and data-driven decision-making, using a playful yet functional visual language that cuts through corporate jargon.

## Colors

The color strategy is built on a high-contrast foundation, using a signature orange to draw attention to primary actions while keeping the overall interface clean and readable.

*   Primary (#FF5B26): The signature PostHog orange used for primary CTAs and brand highlights.
*   Secondary (#1D1D1D): Deep charcoal used for primary text and high-contrast UI elements.
*   Surface (#FFFFFF): Clean white background for primary content areas.
*   Surface-container (inferred) (#F5F5F5): Light gray for secondary containers and section backgrounds.
*   On-primary (inferred) (#FFFFFF): White text for high contrast against the primary orange.
*   On-surface (#1D1D1D): Dark text for readability on white surfaces.
*   Error (inferred) (#E11D48): Standard red for error states and destructive actions.
*   Success (inferred) (#16A34A): Green for positive status indicators.
*   Outline (inferred) (#E5E7EB): Light gray for borders and dividers.
*   Focus-ring (inferred) (#FF5B26): Primary orange used for focus states.

## Typography

PostHog uses a clean, system-based sans-serif stack to maintain technical clarity and scannability across all documentation and product interfaces.

*   Display-lg (inferred): Used for hero headlines.
*   Display-md (inferred): Used for section headers.
*   Headline-lg (inferred): Used for major sub-headers.
*   Headline-md (inferred): Used for standard sub-headers.
*   Headline-sm (inferred): Used for card titles.
*   Body-md (inferred): Standard body text.
*   Label-sm: Used for small UI labels and metadata.

## Layout

PostHog utilizes a responsive grid system with a max-width container, favoring a mobile-first approach where navigation collapses into a menu on smaller viewports. Spacing is tight and functional, relying on the defined scale (xs: 4px to 2xl: 48px) to maintain consistent margins and padding. The page structure follows a logical flow: nav, hero, features, customers, pricing, ai, and footer. The hero pattern is consistently composed of a centered headline and subhead, a primary CTA, and a secondary visual element.

## Elevation & Depth

Elevation is used sparingly to distinguish interactive elements from the background using subtle shadows.
*   elevation.sm: Subtle lift for small UI elements.
*   elevation.md: Standard lift for cards.
*   elevation.lg: Pronounced lift for modals or overlay components.

## Shapes

The brand employs a balanced radius strategy: sharp corners (rounded.sm) are used for technical UI elements like input fields, while more generous radii (rounded.md/lg) are applied to cards and containers to provide a sense of approachability without sacrificing precision.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
These are the primary drivers of user action, featuring a {colors.primary} background and {typography.label-sm} text. Use these for main conversion points; they transition to a darker orange on hover.

### Card
The standard container for grouped content, utilizing {colors.surface} with a {colors.outline} border and {rounded.md} corners. Use these to isolate features or pricing tiers.

### Input Field
A functional, minimal component using {rounded.sm} and a {colors.outline} border. The border must transition to {colors.primary} when the {input-field-focus} state is active.

### Badge
Used for status or category labeling, these use {colors.surface-container} and {typography.label-sm}. For specific states, use {badge-error} or {badge-success} to provide immediate visual feedback.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary call-to-actions. | Do not use {colors.primary} for background surfaces. |
| Apply {rounded.md} to all interactive cards. | Avoid using excessive shadows; stick to the {elevation} scale. |
| Maintain consistent {spacing.md} between sections. | Do not mix font families; stick to system sans-serif. |
| Use {typography.label-sm} for secondary UI labels. | Never use {colors.outline} for primary text. |
| Ensure inputs use {colors.primary} for {input-field-focus}. | Avoid overly rounded corners on data-dense tables. |
| Use {colors.secondary} for primary body text. | Do not use {typography.display-lg} for body copy. |
| Apply {rounded.sm} to input fields for a sharp look. | Use {colors.primary} as a text color for long paragraphs. |
| Use {badge-error} for critical status indicators. | Use {colors.surface-container} for primary buttons. |

## Content Style

CTA labels should be imperative, direct, and action-oriented (e.g., "Get started"). Avoid passive or overly wordy phrasing.

Headings should be benefit-led, punchy, and occasionally provocative to maintain the brand's self-aware, "anti-marketing" tone.

Copy density should be kept low. Use short, scannable paragraphs and frequent bullet points to explain technical concepts efficiently.

## Imagery & Icons

The imagery style is mixed, combining custom illustrations (such as the Hogzilla mascot) with clean, high-contrast product screenshots and iconography. Illustrations should feel playful yet purposeful, while icons should remain minimal to match the technical, utility-first UI. Avoid overly decorative imagery that does not serve a functional or narrative purpose.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for PostHog, a minimal yet bold product analytics platform with a direct, technically self-aware tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{spacing.md}`, `{rounded.sm}` — never hardcode a hex, pixel value, or font size.
2. Use only the component variants defined under `components:`. Do not invent new button styles, badge variants, or card treatments beyond what is listed.
3. Apply the Shapes narrative literally: `{rounded.sm}` for inputs and data-dense UI; `{rounded.md}` or `{rounded.lg}` for cards and containers.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., using `{colors.primary}` as a background surface), surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source exists (theme file, Storybook, component metadata), those values override the spec.

## Output contract

**Must:**
- Use all token names as written, including for states: `button-primary-hover`, `input-field-focus`, `link-hover`.
- Render hover, focus, and disabled states for every interactive component when the spec defines them.
- Use `{spacing.xs}` through `{spacing.2xl}` for all padding, margin, and gap values.
- Apply `{elevation.md}` to cards; reserve `{elevation.lg}` for modals and overlays.
- Write CTAs in the imperative, action-first style from the Content Style section.

**Must NOT:**
- Invent colors, radii, or font sizes absent from the spec.
- Use generic system defaults when a brand token exists.
- Add emoji, decorative copy, or filler text.
- Reference any specific framework or toolchain.
- Rewrite existing page copy, button labels, headings, or navigation items.
- Alter page structure or information architecture as a side effect of applying tokens.

## When in doubt
- Ask the user before introducing any token not present in the spec.
- Prefer composing existing components over creating new ones.
- For ambiguous backgrounds, default to `{colors.surface}`; for secondary containers, use `{colors.surface-container}`.
- Follow mobile-first layout; if breakpoints are unspecified, use a single breakpoint at 768px.
- When torn between two valid options, favor the higher-contrast, more functional choice — PostHog's tone values precision over decoration.