Diff

IBM vs Medium

53 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#161616 #242424
Brand
#0f62fe #1a8917
Border
#e0e0e0 rgba(36, 36, 36, 0.1)
Display font
IBM Plex Sans GT Super
Body size
16px 16px
colors 46 changed
~ surface-soft #f4f4f4 #fafafa
~ text #161616 #242424
~ text-strong #161616 #000000
~ text-muted #525252 #8e8e8e
~ text-soft #8c8c8c #6b6b6b
~ brand #0f62fe #1a8917
~ brand-hover #0050e6 #0f730c
~ brand-active #002d9c #0a5d09
~ brand-deep #0043ce #0a5d09
~ border #e0e0e0 rgba(36, 36, 36, 0.1)
~ border-strong #161616 rgba(36, 36, 36, 0.25)
~ link #0f62fe #242424
~ link-hover #0043ce #1a8917
~ success #24a148 #1a8917
~ warning #f1c21b #c89a16
~ danger #da1e28 #c94a4a
~ info #0f62fe #386dba
+ bg-soft #fafafa
+ surface-elev #ffffff
+ text-faint #a8a8a8
+ text-on-brand #ffffff
+ brand-soft rgba(26, 137, 23, 0.08)
+ link-underline rgba(36, 36, 36, 0.4)
+ border-soft rgba(36, 36, 36, 0.06)
+ border-focus #1a8917
+ shadow-color rgba(36, 36, 36, 0.06)
+ shadow-color-md rgba(36, 36, 36, 0.12)
+ shadow-color-lg rgba(36, 36, 36, 0.18)
+ selection-bg rgba(26, 137, 23, 0.15)
+ highlight-yellow #fff8c5
+ member-only #c89a16
surface-strong #e0e0e0
surface-dark #161616
surface-dark-elev #262626
text-body #161616
text-on-dark #ffffff
text-on-dark-mute #c6c6c6
border-on-dark #5e5e5e
focus #0f62fe
scrim rgba(0,0,0,0.5)
success-soft #defbe6
warning-soft #fcf4d6
danger-soft #fff1f1
info-soft #edf5ff
cool-gray-bg #f2f4f8
hero-blue-tint #e8eaff
typography 5 changed
~ display {"family":"IBM Plex Sans","size":72} {"family":"GT Super","size":56}
~ h1 {"family":"IBM Plex Sans","size":40} {"family":"GT Super","size":40}
~ h2 {"family":"IBM Plex Sans","size":32} {"family":"GT Super","size":32}
~ body {"family":"IBM Plex Sans","size":16} {"family":"sohne","size":16}
~ label {"family":"IBM Plex Mono","size":11} {"family":"source-code-pro","size":13}
radius 2 changed
~ button 6px 8px
~ card 8px 12px
spacing identical
No differences.
↻ Swap direction · Medium → IBM