Diff

Ethereum vs Coinbase

51 token-level differences between these two design systems.

Role tokens
Background
#fafafa #ffffff
Text
#1a1a1a #0a0b0d
Brand
#1c64f2 #0052ff
Border
#e5e5e5 #dee1e6
Display font
Inter Coinbase Display
Body size
16px 16px
colors 43 changed
~ bg #fafafa #ffffff
~ bg-dark #212121 #0a0b0d
~ text #1a1a1a #0a0b0d
~ text-body #404040 #5b616e
~ text-muted #666666 #7c828a
~ text-subtle #999999 #a8acb3
~ brand #1c64f2 #0052ff
~ brand-active #0e3d8e #003ecc
~ border #e5e5e5 #dee1e6
~ border-soft #f0f0f0 #eef0f3
~ semantic-up #10b981 #05b169
~ semantic-down #ef4444 #cf202f
~ focus-ring rgba(28,100,242,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 #f5f5f5
bg-strong #ececec
bg-warm #fff8e7
bg-dark-elev #2c2c2c
surface-card-hover #f5f5f5
text-on-dark #fafafa
text-on-dark-soft #a8a8a8
brand-hover #1450c0
brand-light #3b82f6
brand-soft #1c64f21a
brand-glow rgba(28,100,242,0.40)
accent-purple #7c3aed
accent-cream #fff8e7
accent-mint #10b981
accent-coral #fb7185
border-strong #cccccc
semantic-warning #f59e0b
semantic-info #1c64f2
ethereum-glyph-blue #3c3c3d
ethereum-glyph-light #8a92b2
scrim rgba(33,33,33,0.55)
link #1c64f2
link-hover #1450c0
typography 5 changed
~ display {"family":"Inter","size":72} {"family":"Coinbase Display","size":72}
~ h1 {"family":"Inter","size":40} {"family":"Coinbase Display","size":40}
~ h2 {"family":"Inter","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 3 changed
~ button 8px 12px
~ card 8px 16px
~ pill 999px 100px
spacing identical
No differences.
↻ Swap direction · Coinbase → Ethereum