---
name: Posthog
description: "This site is worth including as a prime example of a playful, developer-focused SaaS brand that successfully balances professional utility with a fun, irreverent personality."
version: alpha

colors:
  background: "#E1D7C2"
  primary: "#111827"
  secondary: "#4D4F46"
  tertiary: "#F44E00"
  neutral: "#374151"
  bg-soft: "#EEF0E9"
  bg-quiet: "#E5E7E0"
  muted-soft: "#65675E"
  line: "rgba(77, 79, 70, 0.2)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.6px"
  body:
    fontFamily: humanist-sans
    fontSize: 15px
    lineHeight: 1.7
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 6px
  lg: 8px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

The new way to build products.

*A developer-friendly, slightly irreverent toolkit that feels like a friendly co-pilot.*

## Colors

Warm, muted earthy backgrounds with high-contrast dark ink and vibrant orange accents.

- **Background (`#E1D7C2`)** — uses `bg` token
- **Primary text (`#111827`)** — uses `ink` token
- **Secondary text (`#4D4F46`)** — uses `ink-soft` token
- **Accent (`#F44E00`)** — uses `accent` token
- **Muted (`#374151`)** — uses `muted` token
- **Borders (`rgba(77, 79, 70, 0.2)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Display headlines are set in bold humanist-sans.
- Body text uses a clean humanist-sans for readability.
- Code blocks utilize a standard monospace stack.

## Layout

A playful, multi-column layout that mimics a complex application interface with sidebars and main content areas.

*Rhythm:* Consistent 4px base grid with standard spacing scale.

## Elevation & Depth

- 0 25px 50px -12px rgba(0, 0, 0, 0.25)
- 0 10px 38px -10px rgba(14, 18, 22, 0.35)
- Borders: 1px solid #4D4F46

## Shapes

- `sm`: 4px
- `md`: 6px
- `lg`: 8px
- `pill`: 9999px

## Components

- **button:** Rounded, high-contrast primary buttons with bold text; secondary buttons with subtle borders.
- **card:** Subtle background cards with minimal shadows or borders, integrated into the playful UI theme.
- **chip:** Small, rounded pill-shaped elements for tags or categories.
- **input:** Clean, bordered input fields with standard padding.
- **hero:** A large, multi-column hero section featuring playful illustrations and bold typography.

## Do's and Don'ts

**Don't:**
- don't use a stark white background — screenshot shows a warm, textured beige background instead
- don't use a cold, corporate blue accent — screenshot shows a vibrant orange accent instead
- don't use overly complex or chaotic layouts — screenshot shows a structured, albeit playful, grid-based layout instead
- don't use sharp, square corners everywhere — screenshot shows a mix of subtle rounding and pill shapes instead
- don't use dark mode as the default — screenshot shows a light mode with warm tones instead
- don't use generic stock photography — screenshot shows custom, playful illustrations instead

---

## System Prompt (paste into AI agent)

```
PostHog is a developer-focused product OS positioned as a playful yet powerful co-pilot for building products. The design DNA is built on a warm, earthy palette (#E1D7C2 background, #111827 ink, #F44E00 orange accent) paired with a clean humanist-sans typography (IBM Plex Sans Variable) and a monospace for code. Critical design rules include: 1) Never use a stark white background; embrace the textured beige. 2) Avoid cold, corporate blue accents; use the signature vibrant orange. 3) Prioritize custom, playful illustrations over generic photography. The overall feel is irreverent, direct, and deeply developer-friendly.
```