PostHog design system

What font does PostHog use?

PostHog’s website uses Round Hog for headings and body text. Round Hog is not on Google Fonts; the closest free match is Figtree.

PostHog colour palette

PostHog’s home page is light (#FFFFFF background, #111111 text) and uses #CD8407 for its main actions. Its palette: #E5E7E0, #EEEFE9, #FDFDF8, #FFFFFF, #000000, #374151.

• #E5E7E0
  30% · backgrounds
• #EEEFE9
  24.7% · backgrounds
• #FDFDF8
  10.7% · backgrounds
• #FFFFFF
  9.8% · backgrounds
• #000000
  6.7% · backgrounds
• #374151
  5.4% · text
• #F3F4EE
  3.7% · backgrounds
• #111827
  2.4% · text
• #111111
  2% · text
• #65675E
  1.6% · text

Type scale

Each size the page sets text in, with its weight and line height. PostHog’s largest type is 36px at weight 800.

Spacing and shape

Spacing sits on a 4px grid: 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 48px, 56px, 64px, 72px.

Corner radii: 2px, 3.59231px, 4px, 5.64506px, 6px, 6.67144px, 7.69781px, pill. 6 shadow levels measured.

What makes PostHog look like PostHog

Almost entirely neutral: 97% of the page is painted in #E5E7E0 and #EEEFE9.

#320601 is an accent: 0.8% of the page, used for drawings only. Don't fill large areas with it.

#B62AD9 is an accent: 0.7% of the page, as small fills such as buttons and badges. Keep it to small areas.

The largest type (36px RoundHog) is bold (800), tracked to -0.025em.

PostHog DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things PostHog’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not PostHog’s product, so use your own name, words and images.

Download PostHog DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; PostHog’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&display=swap");

:root {
  --color-background: #FFFFFF; /* Background */
  --color-surface: #E5E7E0; /* Surface */
  --color-text: #111111; /* Text */
  --color-text-muted: #374151; /* Text muted */
  --color-border: #BFC1B7; /* Border */
  --color-action: #CD8407; /* Action */
  --color-on-action: #23251D; /* On action */
  --color-positive: #30ABC6; /* Positive */
  --color-negative: #F35454; /* Negative */
  --color-warning: #B17816; /* Warning */
  --color-eeefe9: #EEEFE9; /* 24.7% of the page, as fills */
  --color-fdfdf8: #FDFDF8; /* 10.7% of the page, as fills */
  --color-000000: #000000; /* 6.7% of the page, as fills */
  --color-f3f4ee: #F3F4EE; /* 3.7% of the page, as fills */
  --color-320601: #320601; /* 0.8% of the page, as drawings */
  --color-b62ad9: #B62AD9; /* 0.7% of the page, as fills */
  --color-eb9d2a: #EB9D2A; /* 0.6% of the page, as fills */
  --font-body: "RoundHog", "Figtree", sans-serif; /* RoundHog on the site; Figtree renders */
  --font-code: "Source Code Pro", monospace; /* Source Code Pro */
  --type-display: 36px; /* Display, weight 800 */
  --type-display-leading: 40px;
  --type-display-tracking: -0.025em;
  --type-headline-large: 30px; /* Headline Large, weight 700 */
  --type-headline-large-leading: 40px;
  --type-headline-large-tracking: -0.025em;
  --type-headline-small: 24px; /* Headline Small, weight 700 */
  --type-headline-small-leading: 32px;
  --type-headline-small-tracking: -0.025em;
  --type-title-large: 20px; /* Title Large, weight 700 */
  --type-title-large-leading: 28px;
  --type-title-small: 18px; /* Title Small, weight 500 */
  --type-title-small-leading: 27px;
  --type-body-large: 17px; /* Body Large, weight 500 */
  --type-body-large-leading: 25.5px;
  --type-body-medium: 15px; /* Body Medium, weight 500 */
  --type-body-medium-leading: 26.6667px;
  --type-body-small: 14px; /* Body Small, weight 600 */
  --type-body-small-leading: 20px;
  --type-label-1: 13.86px; /* Label 1, weight 600 */
  --type-label-1-leading: 19.3985px;
  --type-label-2: 13.34px; /* Label 2, weight 500 */
  --type-label-2-leading: 18.68px;
  --type-label-3: 13px; /* Label 3, weight 500 */
  --type-label-3-leading: 16.25px;
  --type-label-4: 12px; /* Label 4, weight 500 */
  --type-label-4-leading: 18px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;

How this was measured

PikSpec’s scanner read the posthog.com home page in Chrome at 1440px wide on 14 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

PostHog is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by PostHog.

Similar light designs: Airbnb · Airtable · Allbirds · Anthropic · Apple · Arc

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.