Skip to content

Now in the official shadcn registry directory.

Start free
ai2v0.7
Design language comparison

Realm vs Superlist

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

Palette & spacing overlap

Palette

Shared (1)

#ffffff

Realm only

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

Superlist only

#000000#0000ee#8e8da0#f7f7ff#181824#f866db#ff4a36#fbe74e#22c55e#7577e0

Spacing scale (px)

Shared (6)

4px8px10px12px16px20px

Realm only

24px32px40px48px64px80px

Superlist only

2px6px14px18px23px25px

Typography

Display / body / mono + weight ladder

Side A · Light

Realm

Display
Roobert
Body
Inter

Weight ladder

400500

Side B · Light + Dark

Superlist

Display
Jersey 10
Body
sans-serif

Weight ladder

400

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 · Light + Dark

Superlist

Base unit
4 px
Container
1500 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 · Light + Dark

Superlist

Level
moderate
Libraries
Framer Motion

Durations

0.2s

Easings

cubic-bezier(0.44, 0, 0.5...