Diff

Polygon vs Coinbase

48 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#0e0820 #0a0b0d
Brand
#8247e5 #0052ff
Border
#e0d8ed #dee1e6
Display font
Polygon Display Coinbase Display
Body size
16px 16px
colors 42 changed
~ bg-dark #1a1233 #0a0b0d
~ text #0e0820 #0a0b0d
~ text-body #3a2f5a #5b616e
~ text-muted #6b5d8a #7c828a
~ text-subtle #9c92b5 #a8acb3
~ brand #8247e5 #0052ff
~ brand-active #522aa3 #003ecc
~ border #e0d8ed #dee1e6
~ border-soft #ebe6f4 #eef0f3
~ semantic-up #22c55e #05b169
~ semantic-down #ef4444 #cf202f
~ focus-ring rgba(130,71,229,0.40) rgba(0,82,255,0.30)
+ surface-soft #f7f7f7
+ surface-strong #eef0f3
+ surface-dark-elevated #16181c
+ brand-disabled #a8b8cc
+ on-dark #ffffff
+ on-dark-soft #a8acb3
+ accent-yellow #f4b000
bg-soft #f5f3fa
bg-strong #ebe6f4
bg-dark-elev #241844
bg-dark-deep #0e0820
surface-card-soft #f5f3fa
text-on-dark #ffffff
text-on-dark-soft #a89cc7
brand-hover #6a35c4
brand-light #a875ee
brand-soft #8247e51a
brand-glow rgba(130,71,229,0.40)
accent-violet #5a3eff
accent-cyan #16c4d6
accent-pink #e74694
border-strong #c9bcdd
semantic-up-soft #22c55e1a
semantic-warning #f59e0b
semantic-info #8247e5
gradient-hero linear-gradient(135deg, #1a1233 0%, #2d1c5c 50%, #8247e5 100%)
gradient-card linear-gradient(135deg, rgba(130,71,229,0.10) 0%, rgba(130,71,229,0.02) 100%)
scrim rgba(14,8,32,0.60)
link #8247e5
link-hover #6a35c4
typography 5 changed
~ display {"family":"Polygon Display","size":72} {"family":"Coinbase Display","size":72}
~ h1 {"family":"Polygon Display","size":40} {"family":"Coinbase Display","size":40}
~ h2 {"family":"Polygon Display","size":32} {"family":"Coinbase Display","size":32}
~ body {"family":"Inter","size":16} {"family":"Coinbase Sans","size":16}
~ label {"family":"JetBrains Mono","size":11} {"family":"Coinbase Mono","size":11}
radius 1 changed
~ pill 999px 100px
spacing identical
No differences.
↻ Swap direction · Coinbase → Polygon