Diff

Coinbase vs Capacities

62 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#0a0b0d #1a1a1f
Brand
#0052ff #c6f432
Border
#dee1e6 #0000001a
Display font
Coinbase Display Inter
Body size
16px 17px
colors 54 changed
~ text #0a0b0d #1a1a1f
~ text-muted #7c828a #6b6770
~ on-brand #ffffff #1a1a1f
~ border #dee1e6 #0000001a
~ border-soft #eef0f3 #00000010
~ focus-ring rgba(0,82,255,0.30) #1a1a1f
+ bg-cream #fff4d6
+ bg-cream-soft #fff9e8
+ bg-soft #fef9e8
+ bg-tinted #fdf6e3
+ surface #faf3df
+ surface-raised #f5edd0
+ surface-overlay #ffffff
+ text-strong #0e0f12
+ text-soft #9a969f
+ text-faint #c4c0c8
+ text-on-cta #ffffff
+ text-on-yellow #1a1a1f
+ brand-yellow #f5c842
+ brand-yellow-deep #e6b430
+ brand-yellow-soft #fce98c
+ brand-yellow-pale #fef4c2
+ cta-bg #1a1a1f
+ cta-text #ffffff
+ cta-hover #0e0f12
+ cta-active #000000
+ link #1a1a1f
+ link-hover #0e0f12
+ link-underline #f5c842
+ border-strong #00000033
+ border-cream #e8dfb8
+ selection-bg #fce98c
+ selection-text #1a1a1f
+ shadow rgba(0,0,0,0.06)
+ shadow-warm rgba(180,140,40,0.10)
+ success #5b9a4f
+ warning #e6b430
+ danger #c4554d
+ info #5a8eb5
bg-dark #0a0b0d
surface-soft #f7f7f7
surface-strong #eef0f3
surface-card #ffffff
surface-dark-elevated #16181c
text-body #5b616e
text-subtle #a8acb3
brand #0052ff
brand-active #003ecc
brand-disabled #a8b8cc
on-dark #ffffff
on-dark-soft #a8acb3
semantic-up #05b169
semantic-down #cf202f
accent-yellow #f4b000
typography 5 changed
~ display {"family":"Coinbase Display","size":72} {"family":"Inter","size":72}
~ h1 {"family":"Coinbase Display","size":40} {"family":"Inter","size":64}
~ h2 {"family":"Coinbase Display","size":32} {"family":"Inter","size":48}
~ body {"family":"Coinbase Sans","size":16} {"family":"Inter","size":17}
~ label {"family":"Coinbase Mono","size":11} {"family":"JetBrains Mono","size":13}
radius 3 changed
~ button 12px 8px
~ card 16px 24px
~ pill 100px 9999px
spacing identical
No differences.
↻ Swap direction · Capacities → Coinbase