taste-skill / Compare styles / Dub vs PostHog

Dub vs PostHog: design style comparison

Dub is Modern Link Attribution & Crisp Satoshi/Geist Minimalist; 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. 15 of 18 tracked tokens differ.

Side-by-side preview

Dub style · light

Ship the product, not the pixels.

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

Card on extracted card recipe

Accent link: #000000 · border #E5E5E5

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: #FAFAFA vs #EEEFE9.
Accent: #000000 (Dub) vs #EB9D2A (PostHog).
Headings: Satoshi vs RoundHog / Matter.
Display type: Dub H1 is 48px / 1.15 (w500); PostHog H1 is 36px / -0.025em (w800) — Dub sets 12px larger headlines.
Primary button radius: 8px vs 6px; height 32px vs 32px.
Depth: Dub uses rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 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.

Token table

Token	Dub	PostHog
Canvas	`#FAFAFA`	`#EEEFE9`
Surface	`#FFFFFF`	`#E5E7E0`
Text	`#171717`	`#23251D`
Muted text	`#737373`	`#5A5E52`
Accent	`#000000`	`#EB9D2A`
Border	`#E5E5E5`	`#B17816`
Heading font	`Satoshi`	`RoundHog / Matter`
Body font	`Inter / Satoshi`	`IBM Plex Sans`
Mono font	`GeistMono`	`Source Code Pro`
H1	`48px / 1.15 (w500)`	`36px / -0.025em (w800)`
Button radius	`8px`	`6px`
Button height same	`32px`	`32px`
Most-used radius	`12px`	`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.05) 0px 1px 2px 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 same	`cubic-bezier(0.4, 0, 0.2, 1)`	`cubic-bezier(0.4, 0, 0.2, 1)`
Duration	`0.15s`	`0.7s`
Container max-width	`1080px`	`1200px`
Mode same	`light`	`light`

Primary buttons

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Sign up	32px	`0px 16px`	`8px`	`#000000` `#FFFFFF`	`1px solid #000000`	`14px / 400`
Start for free	38px	`8px 20px`	`8px`	`#000000` `#FFFFFF`	`1px solid #000000`	`14px / 500`
Start for free	40px	`0px 20px`	`8px`	`#FFFFFF` `#171717`	`1px solid #E5E5E5`	`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 Dub if you want Airy #FAFAFA canvas with #FFFFFF analytics cards, #E5E5E5 1px borders, geometric Satoshi 48px display headings, GeistMono shortlinks, and high-contrast #000000 8px-radius primary buttons — signals: marketing, saas, dub, satoshi, geist-mono, minimalist, clean, bento.

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, devtools, posthog, amber, warm, playful.

Shared traits: light, analytics.

Rules that differ

Dub never:

NEVER substitute generic uncalibrated gray backgrounds for Dub’s exact #FAFAFA canvas and #FFFFFF surface pairing.
NEVER replace Satoshi display typography or ignore its signature scale (48px / 1.15 (w500)).
NEVER use thick opaque borders that clash with #E5E5E5 (1px solid #E5E5E5).

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

Dub style guide PostHog style guide Dub token spec PostHog token spec Linear vs Dub Cal.com vs Dub Dub vs Loops Mintlify vs PostHog

Values extracted from https://dub.co 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 →