taste-skill / Compare styles / Cal.com vs Dub

Cal.com vs Dub: design style comparison

Cal.com is Neo-Brutalist Swiss Scheduling & Geometric Cal Sans; Dub is Modern Link Attribution & Crisp Satoshi/Geist Minimalist. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 14 of 18 tracked tokens differ.

Side-by-side preview

Cal.com style · light

Ship the product, not the pixels.

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

Get started

Card on extracted card recipe

Accent link: #242424 · border #E5E5E5

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

Key differences

Both are light-mode designs, but the canvases differ: #F4F4F4 vs #FAFAFA.
Accent: #242424 (Cal.com) vs #000000 (Dub).
Headings: Cal Sans vs Satoshi.
Display type: Cal.com H1 is 64px / 1.1 (w600); Dub H1 is 48px / 1.15 (w500) — Cal.com sets 16px larger headlines.
Primary button radius: 12px vs 8px; height 36px vs 32px.
Depth: Cal.com uses rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset most; 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.

Token table

Token	Cal.com	Dub
Canvas	`#F4F4F4`	`#FAFAFA`
Surface same	`#FFFFFF`	`#FFFFFF`
Text	`#242424`	`#171717`
Muted text	`#898989`	`#737373`
Accent	`#242424`	`#000000`
Border same	`#E5E5E5`	`#E5E5E5`
Heading font	`Cal Sans`	`Satoshi`
Body font	`Inter`	`Inter / Satoshi`
Mono font	`Roboto Mono`	`GeistMono`
H1	`64px / 1.1 (w600)`	`48px / 1.15 (w500)`
Button radius	`12px`	`8px`
Button height	`36px`	`32px`
Most-used radius same	`12px`	`12px`
Most-used shadow	`rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset`	`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`
Easing	`—`	`cubic-bezier(0.4, 0, 0.2, 1)`
Duration	`—`	`0.15s`
Container max-width	`1224px`	`1080px`
Mode same	`light`	`light`

Primary buttons

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Get started	36px	`8px 12px`	`12px`	`transparent` `#0000EE`	`none`	`12px / 400`

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`

Which style should you pick?

Pick Cal.com if you want Tactile #F4F4F4 industrial stone canvas with crisp #FFFFFF widget cards, bold 64px geometric Cal Sans display headings, high-contrast #242424 ink, and #AA61F1 violet scheduling accents — signals: scheduling, calendar, open-source, cal, calsans, geometric, stone.

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: analytics, marketing, dub, satoshi, geist-mono, minimalist, clean.

Shared traits: light, bento, saas.

Rules that differ

Cal.com never:

NEVER substitute generic uncalibrated gray backgrounds for Cal.com’s exact #F4F4F4 canvas and #FFFFFF surface pairing.
NEVER replace Cal Sans display typography or ignore its signature scale (64px / 1.1 (w600)).
NEVER use thick opaque borders that clash with #E5E5E5 (1px solid #E5E5E5).

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).

Go deeper

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

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