taste-skill / Compare styles / Mintlify vs Loops

Mintlify vs Loops: design style comparison

Mintlify is Warm Daylight Documentation & Editorial Arizona Flare Serif; Loops is Warm Editorial SaaS & Newsreader Serif 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

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

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: #FFFFFF vs #FDFDFC.
Accent: #0077A6 (Mintlify) vs #7D1B0C (Loops).
Headings: arizonaFlare vs Newsreader.
Display type: Mintlify H1 is 50px / -0.04em (w400); Loops H1 is 44px / -0.02em (w500) — Mintlify sets 6px larger headlines.
Primary button radius: 4px vs 40px; height 42px vs 44px.
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; Loops uses rgba(33, 32, 28, 0.04) 0px 1px 2px 0px most.
Motion: cubic-bezier(0.22, 1, 0.36, 1) vs cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.16, 1, 0.3, 1).

Token table

Token	Mintlify	Loops
Canvas	`#FFFFFF`	`#FDFDFC`
Surface	`#F9F6F3`	`#F9F9F8`
Text	`#121715`	`#21201C`
Muted text	`rgba(8, 9, 10, 0.8)`	`#63625E`
Accent	`#0077A6`	`#7D1B0C`
Border	`#F1F0EE`	`#E9E8E6`
Heading font	`arizonaFlare`	`Newsreader`
Body font same	`Inter`	`Inter`
Mono font	`JetBrains Mono`	`SF Mono`
H1	`50px / -0.04em (w400)`	`44px / -0.02em (w500)`
Button radius	`4px`	`40px`
Button height	`42px`	`44px`
Most-used radius same	`6px`	`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) 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(33, 32, 28, 0.04) 0px 1px 2px 0px`
Easing	`cubic-bezier(0.22, 1, 0.36, 1)`	`cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.16, 1, 0.3, 1)`
Duration	`0.7s`	`0.42s, 0.42s`
Container max-width	`1088px`	`1296px`
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
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 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, mintlify, ai, devtools, clean.

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

Shared traits: light, serif, warm, editorial.

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

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

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

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