taste-skill / Compare styles / Resend vs Loops

Resend vs Loops: design style comparison

Resend is Obsidian Developer Luxury & Editorial Serif-Meets-Mono; 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

Resend style · dark

Ship the product, not the pixels.

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

Get started Get started

Card on extracted card recipe

Accent link: #00A3FF · border rgba(212, 234, 255, 0.19)

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

Resend is a dark design (canvas #000000) while Loops is light (canvas #FDFDFC).
Accent: #00A3FF (Resend) vs #7D1B0C (Loops).
Headings: Domaine / ABC Favorit vs Newsreader.
Display type: Resend H1 is 96px / -0.01em (Domaine); Loops H1 is 44px / -0.02em (w500) — Resend sets 52px larger headlines.
Primary button radius: 16px vs 40px; height 40px vs 44px.
Depth: Resend uses rgb(0, 0, 0) 0px 0px 0px 8px 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	Resend	Loops
Canvas	`#000000`	`#FDFDFC`
Surface	`#141517`	`#F9F9F8`
Text	`#F0F0F0`	`#21201C`
Muted text	`#A1A4A5`	`#63625E`
Accent	`#00A3FF`	`#7D1B0C`
Border	`rgba(212, 234, 255, 0.19)`	`#E9E8E6`
Heading font	`Domaine / ABC Favorit`	`Newsreader`
Body font same	`Inter`	`Inter`
Mono font	`CommitMono`	`SF Mono`
H1	`96px / -0.01em (Domaine)`	`44px / -0.02em (w500)`
Button radius	`16px`	`40px`
Button height	`40px`	`44px`
Most-used radius	`8px`	`6px`
Most-used shadow	`rgb(0, 0, 0) 0px 0px 0px 8px`	`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.2s`	`0.42s, 0.42s`
Container max-width	`1280px`	`1296px`
Mode	`dark`	`light`

Primary buttons

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Get started	40px	`0px 16px`	`16px`	`transparent` `#FFFFFF`	`2px solid rgba(255, 255, 255, 0.05)`	`14px / 600`
Get started	48px	`0px 20px`	`16px`	`transparent` `#FFFFFF`	`2px solid rgba(255, 255, 255, 0.05)`	`16px / 600`
Get Started	41px	`12px 20px`	`4px`	`#00A3FF` `#FFFFFF`	`none`	`14px / 600`

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 Resend if you want True #000000 obsidian canvas with rgba(212,234,255,0.19) ice-tinted borders, 96px Domaine editorial serif H1, -0.05em ABC Favorit H2, CommitMono code, and blur(25px) glass CTAs — signals: dark, obsidian, pitch-black, devtools, developer, api, resend, mono, frosted-glass, ice-slate-border, luxury.

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: light, warm, newsreader, saas, loops, minimalist, ivory.

Shared traits: email, serif, editorial.

Rules that differ

Resend never:

NEVER use a single generic sans-serif font across the entire page—Resend’s signature tension comes from combining an editorial serif (Domaine for Hero H1), a tight neo-grotesque display sans (ABC Favorit with -0.05em tracking for H2), Inter for body copy, and CommitMono for code.
NEVER use warm or neutral gray borders on #000000—always use cool ice-tinted translucent borders (rgba(212, 234, 255, 0.19) / --slate-a6 or rgba(211, 237, 246, 0.11)).
NEVER use loose letter-spacing on H2 headings—Resend uses an aggressive -0.05em (-2.8px at 56px) tracking on section headings.

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

Resend style guide Loops style guide Resend token spec Loops token spec Resend vs Mintlify Resend vs Neon Resend vs Railway Linear vs Loops Mintlify vs Loops Cal.com vs Loops

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