Design language comparison

Anthropic vs Hex

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

Palette & spacing overlap

Palette

Shared (1)

#000000

Anthropic only

#141413#b0aea5#faf9f5#87867f#eda100

Hex only

#01011b#31263b#717a94#22863a#472d7b#ecedf2#5ec962#addc30#fde725#2458b3#ffffff#005cc5#dbd7da#9e91d6#cd5973#f5c0c0#fffcfc#e46f2e#5ba67c

Spacing scale (px)

Shared (4)

4px8px12px16px

Anthropic only

2px22px24px28px32px48px53px59px

Hex only

1px6px10px14px18px20px33px40px

Anthropic

ai · Light

anthropic.com

Palette

#141413: _color-theme---button-tertiary--text-hover
#b0aea5: swatch--cloud-medium
#faf9f5: _color-theme---button-secondary--text-hover
#000000: foreground
#87867f: swatch--cloud-dark

Typography

Anthropic SansAnthropic Serif

Hex

developer tools · ai · Dark

hex.tech

Palette

#01011b: black
#31263b: eggplant
#717a94: cement
#000000: foreground
#22863a: accent

Typography

IBM Plex SansCinetype

Typography

Display / body / mono + weight ladder

Side A · Light

Anthropic

Display: Anthropic Sans
Body: Anthropic Serif
Mono: Anthropic Mono

Weight ladder

400500600700

Side B · Dark

Hex

Display: IBM Plex Sans
Body: Cinetype
Mono: IBM Plex Mono

Weight ladder

400500600700

Spacing scale

Base unit + container + first 8 steps

Side A · Light

Anthropic

Base unit: 4 px
Container: 1272 px

2px

4px

8px

12px

16px

22px

24px

28px

Side B · Dark

Hex

Base unit: 4 px
Container: 1000 px

1px

4px

6px

8px

10px

12px

14px

16px

Motion vocabulary

Level + libraries + durations + easings

Side A · Light

Anthropic

Level: moderate
Libraries: GSAP

Durations

0.1s0.2s0.3s0.4s0.8s

Easings

easecubic-bezier(0.16, 1, 0.3...cubic-bezier(0.77, 0, 0.1...ease-in

Side B · Dark

Hex

Level: subtle
Libraries: Framer Motion

Durations

100ms150ms250ms

Easings

cubic-bezier(0.25, 0.1, 0...easelinear