taste-skill / Compare styles / Dub vs Loops

Dub vs Loops: design style comparison

Dub is Modern Link Attribution & Crisp Satoshi/Geist Minimalist; Loops is Warm Editorial SaaS & Newsreader Serif Craft. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 17 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

Loops style · light

Ship the product, not the pixels.

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

Start for free Start for free

Card on extracted card recipe

Accent link: #7D1B0C · border #E9E8E6

Key differences

Both are light-mode designs, but the canvases differ: #FAFAFA vs #FDFDFC.
Accent: #000000 (Dub) vs #7D1B0C (Loops).
Headings: Satoshi vs Newsreader.
Display type: Dub H1 is 48px / 1.15 (w500); Loops H1 is 44px / -0.02em (w500) — Dub sets 4px larger headlines.
Primary button radius: 8px vs 40px; height 32px vs 44px.
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; Loops uses rgba(33, 32, 28, 0.04) 0px 1px 2px 0px most.
Motion: cubic-bezier(0.4, 0, 0.2, 1) vs cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.16, 1, 0.3, 1).

Token table

Token	Dub	Loops
Canvas	`#FAFAFA`	`#FDFDFC`
Surface	`#FFFFFF`	`#F9F9F8`
Text	`#171717`	`#21201C`
Muted text	`#737373`	`#63625E`
Accent	`#000000`	`#7D1B0C`
Border	`#E5E5E5`	`#E9E8E6`
Heading font	`Satoshi`	`Newsreader`
Body font	`Inter / Satoshi`	`Inter`
Mono font	`GeistMono`	`SF Mono`
H1	`48px / 1.15 (w500)`	`44px / -0.02em (w500)`
Button radius	`8px`	`40px`
Button height	`32px`	`44px`
Most-used radius	`12px`	`6px`
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(33, 32, 28, 0.04) 0px 1px 2px 0px`
Easing	`cubic-bezier(0.4, 0, 0.2, 1)`	`cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.16, 1, 0.3, 1)`
Duration	`0.15s`	`0.42s, 0.42s`
Container max-width	`1080px`	`1296px`
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
Start for free	44px	`10px 20px`	`40px`	`#21201C` `#0000EE`	`none`	`12px / 400`
Start for free	52px	`14px 18px`	`999px`	`#FFF4EC` `#FDFDFC`	`none`	`12px / 400`
Start for free	40px	`8px 14px`	`999px`	`transparent` `#FDFDFC`	`none`	`12px / 400`

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

Pick Loops if you want Warm ivory #FDFDFC / #F9F9F8 canvas with #E9E8E6 stone borders, #21201C espresso ink, refined 44px Newsreader serif display headlines (-0.02em), and #7D1B0C oxblood / #21201C pill CTAs — signals: warm, editorial, serif, newsreader, email, loops, ivory.

Shared traits: light, saas, minimalist.

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

Loops never:

NEVER substitute generic uncalibrated gray backgrounds for Loops’s exact #FDFDFC canvas and #F9F9F8 surface pairing.
NEVER replace Newsreader display typography or ignore its signature scale (44px / -0.02em (w500)).
NEVER use thick opaque borders that clash with #E9E8E6 (1px solid #E9E8E6).

Go deeper

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

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