Design language comparison

Realm vs Resend

Two references, one frame. Palette, typography and the curator verdict for Realm and Resend, read side by side.

Palette & spacing overlap

Palette

Shared (1)

#ffffff

Realm only

#0a0908#1a322e#eef6f5#535252#f4f0ec#004132

Resend only

#f0f0f0#a0a0a0#464a4d#6c6c6c#d6ebfd#000000#44ffa4#ffff92#ff9592#3b9eff#ffca16#baa7ff#70b8ff#22ff99#262a2d#0b0e14#8354fe#0077ff#fa8200

Spacing scale (px)

Shared (7)

4px8px10px12px16px20px24px

Realm only

32px40px48px64px80px

Resend only

2px6px14px28px30px

Realm

saas · productivity · Light

www.withrealm.com

Palette

#0a0908: color-scheme-6--background
#1a322e: color-scheme-2--text-tertiary
#eef6f5: color-scheme-5--accent
#535252: _primitives---colors--neutral-dark
#ffffff: _primitives---opacity--white-50

Typography

RoobertInter

Resend

developer tools · saas · Dark

resend.com

Palette

#f0f0f0: background
#a0a0a0: foreground
#ffffff: background
#464a4d: foreground
#6c6c6c: foreground

Typography

aBCFavoritinterClassical serif

Typography

Display / body / mono + weight ladder

Side A · Light

Realm

Display: Roobert
Body: Inter

Weight ladder

400500

Side B · Dark

Resend

Display: aBCFavorit
Body: inter
Mono: commitMono

Weight ladder

400500

Spacing scale

Base unit + container + first 8 steps

Side A · Light

Realm

Base unit: 4 px
Container: 1312 px

4px

8px

10px

12px

16px

20px

24px

32px

Side B · Dark

Resend

Base unit: 4 px
Container: 1280 px

2px

4px

6px

8px

10px

12px

14px

16px

Motion vocabulary

Level + libraries + durations + easings

Side A · Light

Realm

Level: moderate
Libraries: GSAP

Durations

300ms600ms900ms

Easings

cubic-bezier(0.22, 1, 0.3...cubic-bezier(0.16, 1, 0.3...

Side B · Dark

Resend

Level: expressive
Libraries: -

Durations

0.15s0.2s0.5s1s1.5s30s

Easings

cubic-bezier(0.4, 0, 0.2, 1)cubic-bezier(0.4, 0, 1, 1)cubic-bezier(0.36, 0.66, ...ease-in-out