Diff

Calm vs Peloton

52 token-level differences between these two design systems.

Role tokens
Background
#0a1f3a #0d0d0d
Text
#fafafa #ffffff
Brand
#0066ff #cb1e4e
Border
#243d65 #333333
Display font
Aktiv Grotesk Inter
Body size
16px 16px
colors 45 changed
~ bg #0a1f3a #0d0d0d
~ bg-strong #040c1a #000000
~ bg-elev #13294a #1a1a1a
~ bg-elev-strong #1c3458 #262626
~ surface #13294a #1a1a1a
~ surface-soft #1c3458 #262626
~ surface-strong #243d65 #333333
~ surface-light #fafafa #f5f5f5
~ brand #0066ff #cb1e4e
~ brand-hover #0052d6 #a51840
~ brand-active #003fa3 #841234
~ brand-pale #a8c8ff #f8d9e2
~ brand-deep #001f5c #5e0a23
~ brand-soft #0d2456 #1f0a10
~ text #fafafa #ffffff
~ text-muted #a8b3c5 #b3b3b3
~ text-soft #7d8a9e #8a8a8a
~ text-faint #5a6678 #666666
~ link #fafafa #ffffff
~ link-hover #0066ff #cb1e4e
~ border #243d65 #333333
~ border-soft #1c3458 #262626
~ border-strong #365182 #4d4d4d
~ border-input #4a648a #666666
~ scrim rgba(4,12,26,0.8) rgba(0,0,0,0.7)
~ shadow-card rgba(0,0,0,0.5) rgba(0,0,0,0.4)
~ shadow-elev rgba(0,0,0,0.7) rgba(0,0,0,0.6)
~ success #42d68a #1cb350
~ warning #ffba43 #ffa726
~ danger #ff6b6b #ff4d4f
~ info #0066ff #3b82f6
+ live-red #cb1e4e
+ leaderboard-gold #ffc300
+ leaderboard-silver #c0c0c0
+ leaderboard-bronze #cd7f32
+ pr-record #ffc300
bg-twilight #1a2c52
bg-dawn #2a3d6e
brand-glow #3380ff
text-on-light #0a1f3a
star-white #ffffff
star-blue #a8c8ff
twilight-purple #7c5fb8
dusk-pink #e88fa8
shadow-blue-glow rgba(0,102,255,0.25)
typography 5 changed
~ display {"family":"Aktiv Grotesk","size":72} {"family":"Inter","size":72}
~ h1 {"family":"Aktiv Grotesk","size":40} {"family":"Inter","size":40}
~ h2 {"family":"Aktiv Grotesk","size":32} {"family":"Inter","size":32}
~ body {"family":"Aktiv Grotesk","size":16} {"family":"Inter","size":16}
~ label {"family":"Aktiv Grotesk","size":11} {"family":"Inter","size":11}
radius 2 changed
~ button 12px 8px
~ card 16px 12px
spacing identical
No differences.
↻ Swap direction · Peloton → Calm