---
title: "PostHog design system"
variant: extended
source: https://posthog.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/posthog-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# PostHog · Design System

> Warm, playful surfaces frame a working product interface.

**Theme:** light · **Industry:** saas · **Source:** https://posthog.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

PostHog’s homepage pairs a soft, illustrated product-world backdrop with a large, pale interface panel that makes the product itself the focal point. Compact navigation, direct copy, warm orange calls to action, and a vivid purple feature frame give the page an approachable but tool-focused character.

## North star

Let a warm, restrained interface frame the product clearly, and reserve the strongest colors for actions and active product states.

## Overview

The visual strategy places a calm, light interface over a playful illustrated environment. The screenshot’s green landscape belongs to the product-world artwork; the defining interface palette is warm off-white, muted gray-green, near-black, and orange. A large rounded pale panel anchors the viewport, while small icon-and-label navigation sits around its edges. RoundHog gives headings and interface copy a friendly, sturdy voice: heavy, tightly tracked display text contrasts with readable medium-weight body copy. Orange CTAs stand out against the muted canvas, and a saturated purple outline marks the active product showcase rather than acting as a universal page color. Layout is compact but not cramped, using strong left alignment and a clear split between narrative and setup card. Fine borders, restrained shadows, and small radii keep controls tactile without making the page feel glossy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Bronze Edge | `#b17816` | `--color-bronze-edge` | accent | Warm brown-gold button outline and occasional badge border; a supporting edge tone rather than a large fill. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Bright cards and inset interface areas, including the setup panel and navigation surfaces. |
| Hog Ink | `#111111` | `--color-hog-ink` | neutral | Primary headings and interface text; the dominant high-contrast text color. |
| Sage Canvas | `#e8e9e2` | `--color-sage-canvas` | surface | Muted green-gray interface canvas and pale product panel backdrop. |
| Moss Text | `#65675e` | `--color-moss-text` | semantic | Secondary copy, subdued labels, and supporting link text. |
| Soft Parchment | `#eeefe9` | `--color-soft-parchment` | surface | Main section and navigation background, providing a warm off-white base. |
| Electric Orchid | `#b62ad9` | `--color-electric-orchid` | accent | Strong outline and active tab treatment around the product showcase. |
| Quiet Border | `#bfc1b7` | `--color-quiet-border` | neutral | Fine card, badge, and control outlines that separate surfaces without heavy contrast. |
| Marigold | `#eb9d2a` | `--color-marigold` | accent | Prominent CTA fill and small highlighted controls. |
| Golden CTA | `#cd8407` | `--color-golden-cta` | accent | Primary action button fill, notably in the header and setup card. |
| Vanilla Glow | `#fdeecd` | `--color-vanilla-glow` | surface | Warm pale gradient stop used in a section treatment, not a core interface fill. |
| Mist Surface | `#f3f4ee` | `--color-mist-surface` | surface | Secondary pale card and inset surface tone. |
| Deep Slate | `#111827` | `--color-deep-slate` | semantic | Occasional product or navigation link text; secondary to the main ink color. |
| Slate Copy | `#374151` | `--color-slate-copy` | semantic | Supporting card text and muted interface copy. |
| Absolute Ink | `#000000` | `--color-absolute-ink` | neutral | Isolated black text and badge details; not the main text treatment. |
| Olive Charcoal | `#23251d` | `--color-olive-charcoal` | neutral | Dark text on warm accent buttons and selected navigation links. |

### Semantic aliases

`--color-canvas` → `#e8e9e2` (Sage Canvas) · `--color-surface` → `#eeefe9` (Soft Parchment) · `--color-surface-2` → `#ffffff` (Clean White) · `--color-surface-3` → `#f3f4ee` (Mist Surface) · `--color-text` → `#111111` (Hog Ink) · `--color-text-muted` → `#65675e` (Moss Text) · `--color-text-subtle` → `#ffffff` (Clean White) · `--color-border` → `#bfc1b7` (Quiet Border) · `--color-accent` → `#b62ad9` (Electric Orchid) · `--color-accent-2` → `#cd8407` (Golden CTA) · `--color-accent-3` → `#eb9d2a` (Marigold) · `--color-on-accent` → `#23251d` (Olive Charcoal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#111111` | `#e8e9e2` | 15.45:1 | AAA |
| `#111111` | `#eeefe9` | 16.33:1 | AAA |
| `#111111` | `#ffffff` | 18.88:1 | AAA |
| `#111111` | `#f3f4ee` | 17.07:1 | AAA |
| `#65675e` | `#e8e9e2` | 4.7:1 | AA |
| `#65675e` | `#eeefe9` | 4.97:1 | AA |
| `#65675e` | `#ffffff` | 5.75:1 | AA |
| `#65675e` | `#f3f4ee` | 5.19:1 | AA |
| `#ffffff` | `#e8e9e2` | 1.22:1 | fail |
| `#ffffff` | `#eeefe9` | 1.16:1 | fail |

### Gradients

- `linear-gradient(rgb(253, 238, 205), rgb(255, 254, 244))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| RoundHog | `--font-body` | webfont | 500, 600, 700, 800 | Headings, body copy, navigation, buttons, labels, and links | Nunito Sans |
| Source Code Pro | `--font-mono` | webfont | 500 | Code-like or technical snippets | Source Code Pro |

- **RoundHog:** Friendly rounded sans; heavy, tightly tracked headings, medium-weight body and controls, mostly sentence case.
- **Source Code Pro:** Monospaced technical accent at medium weight; keep usage limited to code-oriented content.

### Type scale — Augmented Fourth (ratio ≈ 1.414, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 36px | 800 | 1.11 | -0.025em | — | RoundHog | Hero headline introducing the product context-layer proposition. |
| h2 | 24px | 700 | 1.33 | -0.025em | — | RoundHog | Section and feature headings inside the product showcase. |
| body | 18px | 500 | 1.5 | 0 | — | RoundHog | Explanatory copy, setup details, and product descriptions. |
| caption | 13px | 600 | 1 | 0 | — | RoundHog | Compact badges and small supporting labels. |
| button | 13px | 500 | 1 | 0 | — | RoundHog | CTA labels and action controls. |
| nav | 13px | 500 | 1.25 | 0 | — | RoundHog | Top navigation and product-world side navigation labels. |
| link | 12px | 600 | 1.33 | 0 | — | RoundHog | Compact inline links and product navigation items. |
| code | 13px | 500 | 1.45 | 0 | — | Source Code Pro | Technical snippets or code-oriented interface details. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 5, 6, 8, 9, 10, 12, 16, 24 px.
- Section rhythm 48px · element gap 4px · card padding — · max content width 1424px.

The first viewport uses a two-part composition: a slim top navigation and an expansive product-world stage. A large central panel aligns its brand mark, headline, and explanatory copy on the left, with a setup card opposite; a broad product demo occupies the lower area. The measured page max width is 1424px, with a comfortable density and 48px section rhythm. Small edge navigation rails surround the central experience. Keep content left-aligned, preserve clear grouping, and avoid turning the hero into a conventional centered landing page.

## Shape & elevation

- Radius: button `4px` · card `4px` · badge `6px` · nav `2px` · link `4px` · xs `2px` · sm `4px` · md `6px` · lg `8px` · xl `20px`
- Shadow `hairline` (badge): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(210, 211, 204) 0px 2.30934px 0px 0px`
- Shadow `xl` (card, other): `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`
- Shadow `md` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.4) 0px 0px 6px 2px`
- Shadow `hairline-2` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(210, 211, 204) 0px 2.82253px 0px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page combines mostly flat pale surfaces with thin muted borders and restrained card shadows. A large central panel layers above the illustrated background, while the setup card and product showcase sit visibly above its surface. Keep edges defined with hairlines and modest shadows; avoid deep, glossy elevation that competes with the product UI.

## Imagery

The screenshot is dominated by a stylized green landscape surrounding the interface, with small illustrated product icons and a large embedded product-demo panel. Treat the landscape as branded scene-setting artwork, not the core color system. Keep imagery framed behind or within the interface, preserve the crisp dashboard-like content, and use the purple showcase border as a deliberate active-state accent rather than adding decorative imagery everywhere.

## Components

### Top navigation

A compact pale bar with the PostHog mark, short product and company links, and a gold CTA aligned at the right.

### Side product navigation

Small illustrated icons with concise labels sit around the central panel, making the surrounding product ecosystem feel navigable.

### Hero copy block

Left-aligned bold headline with a blue-highlighted phrase, concise explanatory copy, and a muted social-proof line.

### Setup card

Bright inset card pairs a short setup promise and checklist with two adjacent action buttons.

### Primary CTA

Warm gold or orange fill, dark text, brown-gold border, and compact rounded shape; use for clear next steps.

### Product showcase

A large white interface panel with tabs, a vivid purple active frame, and a split between sample product data and explanatory content.

### Measured component styles

- **Primary button** (“Get started – free”): background #cd8407 · text #23251d · border 1px solid #b17816 · radius 6px · padding 0px · 400 16px RoundHog
- **Secondary button** (“Install with AI”): background #eb9d2a · text #111111 · border 1px solid #b17816 · radius 8px · padding 0px · 500 18px RoundHog
- **Link** (“Product Analytics”): transparent background · text #111827 · radius 0px · padding 0px · 600 12px RoundHog
- **Card** (“Your product's context layer PostHog ing”): background #e8e9e2 · text #000000 · radius 20px · padding 0px · 400 16px RoundHog · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“Coding”): background #fdfdf8 · text #111111 · border 1px solid #bfc1b7 · radius 5.64506px · padding 4.4px · 600 12.8297px RoundHog · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(210, 211
- **Navigation item** (“Home Self-driving product Context wareho”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px RoundHog

## Do

- Use warm off-white and muted sage surfaces as the interface foundation.
- Set headings in a friendly, heavy rounded sans with tight tracking.
- Keep the hero copy left-aligned and pair it with a practical setup card.
- Use orange-gold fills for primary actions and dark readable button text.
- Reserve vivid purple for active product states or showcase framing.
- Separate cards with quiet borders and restrained shadows.

## Don't

- Do not use the illustrated landscape palette as the entire UI color system.
- Do not center every hero element into a generic SaaS layout.
- Do not spread bright purple across ordinary surfaces or buttons.
- Do not replace warm pale surfaces with stark, high-contrast white everywhere.
- Do not use heavy shadows on every card or control.
- Do not make navigation large enough to compete with the product panel.

## Agent prompt

Build a new PostHog-style SaaS page with a compact top bar and a clear product-focused hero. Use Soft Parchment (#eeefe9), Sage Canvas (#e8e9e2), and Clean White (#ffffff) for the interface surfaces, with Hog Ink (#111111) headings and Moss Text (#65675e) supporting copy. Set type in a friendly rounded sans, using bold, tightly tracked headings and medium-weight body text. Keep the main content left-aligned in a spacious central panel, with an adjacent setup or conversion card. Use Golden CTA (#cd8407) or Marigold (#eb9d2a) for key actions, and reserve Electric Orchid (#b62ad9) for a distinctive active product frame. Use fine Quiet Border (#bfc1b7) outlines and restrained shadows. If adding scenic artwork, keep it behind the interface and visually separate from the UI palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Top bar above a two-column hero, with side navigation rails and a wide product showcase below. | Prominent free-start CTA, Setup checklist, Tabbed product demo, Icon-led side navigation | Pale central panel, Warm orange buttons, Purple active frame, Illustrated landscape backdrop |

## Source CSS custom properties (selected)

```css
--bg: 253 253 248;
--accent: 229 231 224;
--border: 191 193 183;
--input-bg: 238 239 233;
--input-bg-hover: 238 239 233;
--input-border: 210 211 204;
--input-border-hover: 210 211 204;
--text-primary: 17 17 17;
--text-secondary: 101 103 94;
--text-muted: 158 160 150;
--tw-shadow-color: 77 79 70;
--tw-text-opacity: 1;
--tw-border-opacity: 1;
--squeak-primary-color: 0,0,0;
--squeak-button-color: 245,78,0;
--swiper-pagination-color: #f54e00;
--swiper-pagination-bullet-inactive-color: #000;
--tw-bg-opacity: 1;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-ring-color: rgba(59,130,246,.5);
--swiper-theme-color: #007aff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/posthog-com