Diff

Supreme vs Zed

67 token-level differences between these two design systems.

Role tokens
Background
#ffffff #f5f5f3
Text
#000000 #393d45
Brand
#cc0000 #004edb
Border
#000000 #e2e2de
Display font
Courier New IBM Plex Serif
Body size
13px 16px
colors 55 changed
~ bg #ffffff #f5f5f3
~ brand #cc0000 #004edb
~ brand-hover #a30000 #003fb5
~ text #000000 #393d45
~ text-strong #000000 #16181d
~ link #0000cc #004edb
~ link-hover #0000cc #003fb5
~ border #000000 #e2e2de
~ border-strong #000000 #d4d4ce
+ bg-100 #ffffff
+ bg-200 #eeede9
+ bg-300 #e7e6e1
+ surface-card #ffffff
+ surface-code #1a1b1e
+ text-200 #5a5e66
+ text-300 #6b6f78
+ text-400 #86888f
+ brand-soft rgba(0,78,219,0.08)
+ on-brand #ffffff
+ cta-secondary-bg #ffffff
+ cta-secondary-text #16181d
+ border-focus #004edb
+ code-bg #1a1b1e
+ code-text #e6e6e3
+ semantic-success #2e7d32
+ semantic-warning #b54708
+ semantic-danger #c01919
+ semantic-info #004edb
bg-page #ffffff
surface #ffffff
surface-soft #ffffff
surface-strong #f5f5f5
brand-active #820000
brand-pale #ffe5e5
text-muted #666666
text-soft #999999
text-on-red #ffffff
text-on-black #ffffff
link-visited #551a8b
border-soft #cccccc
border-input #000000
outline-focus #000000
scrim rgba(0,0,0,0.7)
shadow-card transparent
shadow-modal transparent
success #008000
warning #cc6600
warning-soft #fff4e5
danger #cc0000
info #0000cc
rating-fill #000000
drop-red #cc0000
sold-out-text #666666
weekly-rotate-bg #000000
weekly-rotate-text #ffffff
typography 5 changed
~ display {"family":"Courier New","size":72} {"family":"IBM Plex Serif","size":72}
~ h1 {"family":"Courier New","size":40} {"family":"IBM Plex Serif","size":48}
~ h2 {"family":"Courier New","size":32} {"family":"IBM Plex Serif","size":36}
~ body {"family":"Courier New","size":13} {"family":"writer","size":16}
~ label {"family":"Courier New","size":11} {"family":"writer-mono","size":13}
radius 3 changed
~ button 0px 6px
~ card 0px 8px
~ pill 0px 9999px
spacing 4 changed
~ xs 4px 0px
~ sm 8px 4px
~ lg 24px 32px
~ xl 40px 64px
↻ Swap direction · Zed → Supreme