---
site: PostHog – We make dev tools for product engineers
url: "https://posthog.com"
generated_at: "2026-06-25T08:30:20.024Z"
generator: "designlang@13.0.0"
intent: landing
material: material-you
library: shadcn/ui
tokens:
  colors:
    primary: "#e1d7c2"
    secondary: "#eb9d2a"
    accent: "#eeefe9"
    background: "#e5e7e0"
    foreground: "#000000"
  typography:
    sans: IBM Plex Sans Variable
    base: 15
  spacing:
    base: 4
    scale: "[1, 20, 32, 48, 64, 120, 144, 220]"
  radii:
    xs: 2
    sm: 5
    md: 8
    full: 9999
  shadows:
    sm: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.2) 0px 0px 6px 2px"
---

# Overview

A **landing** page (heuristic confidence 0.31), dressed in **material-you** material (0.45).

Component library appears to be **shadcn/ui** (0.65).

> "The new way to build products"

The author writes in a **neutral** voice; headings tend to be **Sentence case** case and **balanced**.

Reading order detected on the source: `cta → footer → nav → nav → cta → feature-grid → pricing-table`.

Source: <https://posthog.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#e1d7c2` | 17 |
| secondary | `#eb9d2a` | 7 |
| accent | `#eeefe9` | 18 |
| background | `#e5e7e0` | — |
| foreground | `#000000` | — |

**Neutrals:** `#000000` · `#4d4f46` · `#374151` · `#23251d` · `#9ea096`

**Total unique colors detected:** 29.

# Typography

**Families**
- `IBM Plex Sans Variable` · 3801 uses
- `Open Runde` · 1192 uses
- `Source Code Pro` · 1 uses

**Body size:** `15px` / line-height `25.7143px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `24px` | `800` | `32px` |
| h2 | `21.4286px` | `700` | `30px` |
| h3 | `19.2857px` | `600` | `30px` |

# Layout

**Spacing base:** `4px` increments.
**Scale:** `1px` · `20px` · `32px` · `48px` · `64px` · `120px` · `144px` · `220px`

**Layout primitives:** 6 grid containers · 246 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `sm` — `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`
- `sm` — `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.2) 0px 0px 6px 2px`

**Z-index layers:** 6 · ⚠ 1 issue(s)

# Shapes

**Radius scale**
- `xs` — `2px`
- `sm` — `5px`
- `md` — `8px`
- `full` — `9999px`

# Components

**Detected patterns:** `buttons` · `cards` · `links` · `navigation` · `footer` · `tabs`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | primary, secondary | md, medium, sm, xs | 58 |

# Do's and Don'ts

**Do's**
- Use `get`, `product`, `install` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **balanced** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **material-you** material — match shadow and radius habits.

**Don'ts**
- Don't ship copy on the colors flagged in accessibility — 1 contrast pair(s) fail WCAG AA on the source itself.
- Don't 1 wcag contrast failures.
- Don't 541 !important rules — prefer specificity over overrides.
- Don't 94% of css is unused — consider purging.
- Don't 7683 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v13.0.0 from <https://posthog.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._