№ posthog-com--docs

Posthog — Docs

Cool, geometric clarity—crisp sans-serifs on a muted, tech-inspired teal and grey landscape.

Feature Stackminimalism swiss brutalism developer tools saaslight

The layout prioritizes clarity and functionality with a clean, grid-based structure. The use of whitespace and straightforward typography creates a sense of precision and efficiency, typical of developer tools. · developer tools, saas landing page, product analytics, technical website, minimalist design, data platform, posthog, analytics platform, product development

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: muted · cool · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#2ed3b6
OKLCHoklch(78.0% 0.135 177)
RoleDominant
find sites →
Hex#21a18a
OKLCHoklch(63.7% 0.111 177)
RoleSurface
find sites →
Hex#fccc5e
OKLCHoklch(86.7% 0.138 85)
RoleInk
find sites →
Hex#94ac54
OKLCHoklch(70.7% 0.118 122)
RoleAccent
find sites →
Hex#dad1bc
OKLCHoklch(86.2% 0.030 88)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	RoundHog	24px	800	1.33	-0.6px	Aa Bb Cc
h2	RoundHog	24px	700	1.33	-0.6px	Aa Bb Cc
h3	RoundHog	16px	700	1.5	0	Aa Bb Cc
body	RoundHog	16px	400	1.5	0	Aa Bb Cc
caption	RoundHog	14px	400	1.43	0	Aa Bb Cc
button	RoundHog	13px	500	1	0	Aa Bb Cc

Spacing scale

8px

16px

24px

48px

66px

Radius scale

0px

2px

4px

6px

8px

20px

40px

Container

Max content width 1200px

Export

:root {
  --color-dominant: #2ed3b6;
  --color-surface: #21a18a;
  --color-ink: #fccc5e;
  --color-accent: #94ac54;
  --color-detail: #dad1bc;
}

/* CSS variables exposed by source */
:root {
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --squeak-button-color: 245,78,0;
  --tw-skew-x: 0;
  --tw-shadow: 0 0 #0000;
  --tw-translate-x: 0;
  --tw-ring-offset-width: 0px;
  --swiper-pagination-bullet-inactive-color: #000;
  --tw-scroll-snap-strictness: proximity;
  --squeak-default-avatar-fill: 255,255,255;
  --tw-border-spacing-x: 0;
  --tw-scale-x: 1;
  --tw-shadow-colored: 0 0 #0000;
  --tw-border-spacing-y: 0;
  --tw-scale-y: 1;
  --squeak-primary-color: 0,0,0;
  --tw-skew-y: 0;
  --tw-ring-color: rgba(59,130,246,.5);
  --viewport-padding: 25px;
  --tw-translate-y: 0;
  --swiper-theme-color: #007aff;
  --swiper-pagination-color: #f54e00;
  --tw-rotate: 0;
  --tw-ring-offset-color: #fff;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Posthog — Docs.
Reference design system (extracted from the live site):
- Palette: #2ed3b6, #21a18a, #fccc5e, #94ac54, #dad1bc
- Typefaces: RoundHog
- Macrostructure: Feature Stack
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/posthog-com--docs

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

RoundHog

24px

800

1.33

-0.6px

Aa Bb Cc

RoundHog

24px

700

1.33

-0.6px

Aa Bb Cc

RoundHog

16px

700

1.5

Aa Bb Cc

body

RoundHog

16px

400

1.5

Aa Bb Cc

caption

RoundHog

14px

400

1.43

Aa Bb Cc

button

RoundHog

13px

500

Aa Bb Cc

:root { --color-dominant: #2ed3b6; --color-surface: #21a18a; --color-ink: #fccc5e; --color-accent: #94ac54; --color-detail: #dad1bc; } /* CSS variables exposed by source */ :root { --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --squeak-button-color: 245,78,0; --tw-skew-x: 0; --tw-shadow: 0 0 #0000; --tw-translate-x: 0; --tw-ring-offset-width: 0px; --swiper-pagination-bullet-inactive-color: #000; --tw-scroll-snap-strictness: proximity; --squeak-default-avatar-fill: 255,255,255; --tw-border-spacing-x: 0; --tw-scale-x: 1; --tw-shadow-colored: 0 0 #0000; --tw-border-spacing-y: 0; --tw-scale-y: 1; --squeak-primary-color: 0,0,0; --tw-skew-y: 0; --tw-ring-color: rgba(59,130,246,.5); --viewport-padding: 25px; --tw-translate-y: 0; --swiper-theme-color: #007aff; --swiper-pagination-color: #f54e00; --tw-rotate: 0; --tw-ring-offset-color: #fff; }

Build a landing page in the visual style of Posthog — Docs. Reference design system (extracted from the live site): - Palette: #2ed3b6, #21a18a, #fccc5e, #94ac54, #dad1bc - Typefaces: RoundHog - Macrostructure: Feature Stack Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/posthog-com--docs