# PostHog design system: colors, fonts and tokens

> PostHog's website (posthog.com) uses a light interface with #e1d7c2 as its primary color and IBM Plex Sans Variable as the main typeface, with Open Runde alongside it. designlang measured 11 font sizes from 12px to 36px, 8 spacing values, 4 corner radii.

Source: https://posthog.com, captured 25 June 2026. Page: https://designlang.app/design-system/posthog

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#e1d7c2` | 17 |
| Secondary | `#eb9d2a` | 7 |
| Accent | `#eeefe9` | 18 |

Neutrals: `#000000`, `#4d4f46`, `#374151`, `#23251d`, `#9ea096`, `#65675e`, `#bfc1b7`, `#ffffff`, `#b6b7af`, `#131316`

Backgrounds: `#e5e7e0`, `#e1d7c2`, `#ffffff`, `#eeefe9`, `#fdfdf8`, `#2f80fa`, `#f3f4f0`

## Fonts

- IBM Plex Sans Variable (sans), 3801 elements
- Open Runde (sans), 1192 elements
- Source Code Pro (mono), 1 elements

## Type scale

| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 36px | 700 | 54px | normal | p |
| 24px | 800 | 32px | -0.6px | h1, div, svg, path |
| 21.4286px | 700 | 30px | -0.535714px | h2 |
| 20px | 700 | 28px | normal | s, span |
| 19.2857px | 600 | 30px | -0.482143px | h3 |
| 18px | 700 | 27px | normal | p, br, strong |
| 16px | 400 | 24px | normal | html, head, meta, link |
| 15px | 400 | 25.7143px | normal | article, div, p, img |
| 14px | 600 | 20px | normal | button, svg, path, span |
| 13px | 500 | 13px | normal | button, div, svg, path |
| 12px | 400 | 16px | normal | button, svg, path, span |

## Spacing

1px, 20px, 32px, 48px, 64px, 120px, 144px, 220px

## Radii

2px, 5px, 8px, pill

## Motion

Feel: mixed. Durations: 150ms, 300ms.

## Audit

Overall 87/100 (grade B).

- Color Discipline: 80/100
- Typography Consistency: 80/100
- Spacing System: 100/100
- Shadow Consistency: 100/100
- Border Radius Consistency: 100/100
- Accessibility: 96/100
- CSS Tokenization: 100/100

## CSS variables

```css
:root {
  --color-primary: #e1d7c2;
  --color-secondary: #eb9d2a;
  --color-accent: #eeefe9;
  --color-background: #e5e7e0;
  --color-text: #000000;
  --color-neutral-1: #000000;
  --color-neutral-2: #4d4f46;
  --color-neutral-3: #374151;
  --color-neutral-4: #23251d;
  --font-primary: "IBM Plex Sans Variable", sans-serif;
  --font-secondary: "Open Runde", sans-serif;
  --radius-sm: 2px;
  --radius-md: 5px;
  --radius-lg: 8px;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/posthog-com/posthog-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/posthog-com/posthog-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/posthog-com/posthog-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/posthog-com/posthog-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/posthog-com/posthog-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/posthog-com/posthog-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/posthog-com/posthog-com-DESIGN.md)

Regenerate: `npx designlang posthog.com`