Diff

Base vs Pinecone

57 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #030712
Brand
#0000ff #1cb0d0
Border
#e0e0e0 #e5e7eb
Display font
coinbaseSans Inter
Body size
16px 16px
colors 52 changed
~ surface #f5f5f5 #ffffff
~ surface-soft #fafafa #f3f4f6
~ text #000000 #030712
~ text-strong #000000 #111827
~ text-body #1a1a1a #374151
~ text-muted #666666 #6b7280
~ text-faint #999999 #9ca3af
~ brand #0000ff #1cb0d0
~ brand-hover #0000cc #0e8fae
~ brand-active #000099 #0c7691
~ brand-soft #e6e6ff #e0f7fc
~ brand-deep #000033 #0a3a4a
~ border #e0e0e0 #e5e7eb
~ border-soft #ededed #f3f4f6
~ border-strong #999999 #d1d5db
~ link #0000ff #1cb0d0
~ link-hover #0000cc #0e8fae
~ info #0000ff #1cb0d0
+ bg-soft #f9fafb
+ bg-deep #030712
+ surface-elevated #ffffff
+ surface-cyan #e0f7fc
+ surface-dark #030712
+ surface-dark-card #111827
+ text-on-dark-muted #d1d5db
+ on-light #030712
+ border-cyan #1cb0d0
+ shadow-color rgba(15, 23, 42, 0.04)
+ shadow-color-md rgba(15, 23, 42, 0.08)
+ shadow-color-lg rgba(15, 23, 42, 0.12)
+ accent-emerald #10b981
+ accent-rose #ef4444
+ accent-violet #8b5cf6
+ accent-amber #f59e0b
+ code-keyword #0c7691
+ code-string #10b981
+ code-comment #9ca3af
+ code-number #f59e0b
+ vector-grid #e5e7eb
+ vector-point #1cb0d0
bg-elevated #fafafa
bg-blue #0000ff
bg-cream #f5f5f0
bg-dark #000000
surface-strong #e8e8e8
surface-on-blue #0000cc
text-on-blue #ffffff
accent-cream #f5f5f0
accent-yellow #ffd000
accent-pink #ff5599
border-on-blue #3333ff
ring #0000ff
typography 5 changed
~ display {"family":"coinbaseSans","size":72} {"family":"Inter","size":72}
~ h1 {"family":"coinbaseSans","size":40} {"family":"Inter","size":40}
~ h2 {"family":"coinbaseSans","size":32} {"family":"Inter","size":32}
~ body {"family":"coinbaseDisplay","size":16} {"family":"Inter","size":16}
~ label {"family":"coinbaseMono","size":11} {"family":"JetBrains Mono","size":11}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Pinecone → Base