taste-skill / Compare styles / Mintlify vs PostHog

Mintlify vs PostHog: design style comparison

Mintlify is Warm Daylight Documentation & Editorial Arizona Flare Serif; PostHog is Tactile Retro-OS Brutalist & Warm Sand / Amber Craft. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 16 of 18 tracked tokens differ.

Side-by-side preview

Mintlify style · light

Ship the product, not the pixels.

Preview text rendered with the extracted Mintlify canvas, text, muted and accent tokens.

Get started Contact sales

Card on extracted card recipe

Accent link: #0077A6 · border #F1F0EE

PostHog style · light

Ship the product, not the pixels.

Preview text rendered with the extracted PostHog canvas, text, muted and accent tokens.

Get started – free Get started

Card on surface + border tokens

Accent link: #EB9D2A · border #B17816

Key differences

Both are light-mode designs, but the canvases differ: #FFFFFF vs #EEEFE9.
Accent: #0077A6 (Mintlify) vs #EB9D2A (PostHog).
Headings: arizonaFlare vs RoundHog / Matter.
Display type: Mintlify H1 is 50px / -0.04em (w400); PostHog H1 is 36px / -0.025em (w800) — Mintlify sets 14px larger headlines.
Primary button radius: 4px vs 6px; height 42px vs 32px.
Depth: Mintlify uses rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.02) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px most; PostHog uses 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 most.
Motion: cubic-bezier(0.22, 1, 0.36, 1) vs cubic-bezier(0.4, 0, 0.2, 1).

Token table

Token	Mintlify	PostHog
Canvas	`#FFFFFF`	`#EEEFE9`
Surface	`#F9F6F3`	`#E5E7E0`
Text	`#121715`	`#23251D`
Muted text	`rgba(8, 9, 10, 0.8)`	`#5A5E52`
Accent	`#0077A6`	`#EB9D2A`
Border	`#F1F0EE`	`#B17816`
Heading font	`arizonaFlare`	`RoundHog / Matter`
Body font	`Inter`	`IBM Plex Sans`
Mono font	`JetBrains Mono`	`Source Code Pro`
H1	`50px / -0.04em (w400)`	`36px / -0.025em (w800)`
Button radius	`4px`	`6px`
Button height	`42px`	`32px`
Most-used radius	`6px`	`2px`
Most-used shadow	`rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.02) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`	`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`
Easing	`cubic-bezier(0.22, 1, 0.36, 1)`	`cubic-bezier(0.4, 0, 0.2, 1)`
Duration same	`0.7s`	`0.7s`
Container max-width	`1088px`	`1200px`
Mode same	`light`	`light`

Primary buttons

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Get started	42px	`12px 12px`	`4px`	`#08090A` `#FFFFFF`	`none`	`14px / 500`
Contact sales	34px	`8px 14px`	`4px`	`#08090A` `#FFFFFF`	`none`	`14px / 500`
Talk to sales	42px	`12px 20px`	`4px`	`#FEFDFB` `#121715`	`1px solid rgba(0, 0, 0, 0.05)`	`14px / 500`

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Get started – free	32px	`0px 0px`	`6px`	`#CD8407` `#23251D`	`1px solid #B17816`	`16px / 400`
Get started	47px	`0px 0px`	`8px`	`#CD8407` `#111111`	`1px solid #B17816`	`18px / 500`
Get started - free	35px	`0px 0px`	`6px`	`#CD8407` `#111111`	`1px solid #B17816`	`18px / 600`

Which style should you pick?

Pick Mintlify if you want Clean #FFFFFF & warm sand #F9F6F3 surfaces paired with deep forest ink #121715, 50px ArizonaFlare editorial display typography (-0.04em tracking), and crisp 4px #08090A / #0077A6 CTAs — signals: docs, documentation, serif, mintlify, ai, editorial, clean.

Pick PostHog if you want Playful tactile #EEEFE9 warm putty canvas with 3D raised bevel buttons (#CD8407 / #EB9D2A amber border #B17816), chunky 800-weight RoundHog headings, and Source Code Pro developer docs — signals: brutalist, retro, tactile, analytics, posthog, amber, playful.

Shared traits: light, warm, devtools.

Rules that differ

Mintlify never:

NEVER substitute generic uncalibrated gray backgrounds for Mintlify’s exact #FFFFFF canvas and #F9F6F3 surface pairing.
NEVER replace arizonaFlare display typography or ignore its signature scale (50px / -0.04em (w400)).
NEVER use thick opaque borders that clash with #F1F0EE (1px solid #F1F0EE).

PostHog never:

NEVER substitute generic uncalibrated gray backgrounds for PostHog’s exact #EEEFE9 canvas and #E5E7E0 surface pairing.
NEVER replace RoundHog / Matter display typography or ignore its signature scale (36px / -0.025em (w800)).
NEVER use thick opaque borders that clash with #B17816 (1px solid #B17816).

Go deeper

Mintlify style guide PostHog style guide Mintlify token spec PostHog token spec Resend vs Mintlify Mintlify vs Loops Dub vs PostHog

Values extracted from https://mintlify.com and https://posthog.com. Not affiliated with either company.

Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.

See taste-skill Pro →