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

Cal.com vs Loops: design style comparison

Cal.com is Neo-Brutalist Swiss Scheduling & Geometric Cal Sans; Loops is Warm Editorial SaaS & Newsreader Serif Craft. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 16 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

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: #F4F4F4 vs #FDFDFC.
Accent: #242424 (Cal.com) vs #7D1B0C (Loops).
Headings: Cal Sans vs Newsreader.
Display type: Cal.com H1 is 64px / 1.1 (w600); Loops H1 is 44px / -0.02em (w500) — Cal.com sets 20px larger headlines.
Primary button radius: 12px vs 40px; height 36px vs 44px.
Depth: Cal.com uses rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset most; Loops uses rgba(33, 32, 28, 0.04) 0px 1px 2px 0px most.

Token table

Token	Cal.com	Loops
Canvas	`#F4F4F4`	`#FDFDFC`
Surface	`#FFFFFF`	`#F9F9F8`
Text	`#242424`	`#21201C`
Muted text	`#898989`	`#63625E`
Accent	`#242424`	`#7D1B0C`
Border	`#E5E5E5`	`#E9E8E6`
Heading font	`Cal Sans`	`Newsreader`
Body font same	`Inter`	`Inter`
Mono font	`Roboto Mono`	`SF Mono`
H1	`64px / 1.1 (w600)`	`44px / -0.02em (w500)`
Button radius	`12px`	`40px`
Button height	`36px`	`44px`
Most-used radius	`12px`	`6px`
Most-used shadow	`rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset`	`rgba(33, 32, 28, 0.04) 0px 1px 2px 0px`
Easing	`—`	`cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.16, 1, 0.3, 1)`
Duration	`—`	`0.42s, 0.42s`
Container max-width	`1224px`	`1296px`
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
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 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, bento, stone.

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, minimalist, ivory.

Shared traits: light, 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).

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

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

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