Design language comparison

Realm vs xAI

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

Palette & spacing overlap

Palette

Shared (1)

#ffffff

Realm only

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

xAI only

#404040#595959#0051c3#000000#ebebeb

Spacing scale (px)

Shared (1)

40px

Realm only

4px8px10px12px16px20px24px32px48px64px80px

xAI only

3px5px15px23px30px60px

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

xAI

ai · Light

x.ai

Palette

#404040: foreground
#595959: foreground
#0051c3: brand
#000000: foreground
#ffffff: background

Typography

-apple-systemTimes New RomanGeometric sans

Typography

Display / body / mono + weight ladder

Side A · Light

Realm

Display: Roobert
Body: Inter

Weight ladder

400500

Side B · Light

xAI

Display: -apple-system
Body: Times New Roman

Weight ladder

300400600

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

xAI

Base unit: 4 px
Container: 1536 px

3px

5px

15px

23px

30px

40px

60px

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

xAI

Level: subtle
Libraries: -

Durations

0.15s

Easings

cubic-bezier(0.4, 0, 0.2, 1)ease-outease