Design language comparison

Anthropic vs Railway

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

Palette & spacing overlap

Palette

Shared (1)

#000000

Anthropic only

#141413#b0aea5#faf9f5#87867f#eda100

Railway only

#33323e#f7f7f8#868593#296852#a1a0ab#509ee3#a41e11#bf92ec#3d2259#c4c4ca#1d4596#dcdce0#336791#72c09c#37c2fd#f0db4f#323330#eebbbb

Spacing scale (px)

Shared (6)

4px8px12px16px24px32px

Anthropic only

2px22px28px48px53px59px

Railway only

6px40px64px92px96px108px

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

Railway

developer tools · saas · Dark

railway.app

Palette

#33323e: osano-button-manage-border-color
#f7f7f8: background
#000000: osano-info-dialog-overlay-color
#868593: background
#296852: accent

Typography

IBM Plex SerifInter

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

Railway

Display: IBM Plex Serif
Body: Inter
Mono: JetBrains Mono

Weight ladder

400

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

Railway

Base unit: 4 px
Container: 1696 px

4px

6px

8px

12px

16px

24px

32px

40px

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

Railway

Level: moderate
Libraries: Framer Motion

Durations

0.05s0.15s0.2s0.4s3s

Easings

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