Diff

Base vs Weaviate

59 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #0f0a3a
Brand
#0000ff #1cdb46
Border
#e0e0e0 #e0e2eb
Display font
coinbaseSans Inter
Body size
16px 16px
colors 54 changed
~ surface #f5f5f5 #ffffff
~ surface-soft #fafafa #f1f3f7
~ text #000000 #0f0a3a
~ text-strong #000000 #1a1547
~ text-body #1a1a1a #3d3a6b
~ text-muted #666666 #6e6b8c
~ text-faint #999999 #9a98b1
~ brand #0000ff #1cdb46
~ brand-hover #0000cc #15b939
~ brand-active #000099 #0f9e2f
~ brand-soft #e6e6ff #e6fae9
~ brand-deep #000033 #0a6b1f
~ on-brand #ffffff #0f0a3a
~ border #e0e0e0 #e0e2eb
~ border-soft #ededed #f1f3f7
~ border-strong #999999 #c5c8d4
~ link #0000ff #1cdb46
~ link-hover #0000cc #0f9e2f
~ success #10b981 #1cdb46
~ info #0000ff #06b6d4
+ bg-soft #f8f9fb
+ bg-deep #130c49
+ surface-elevated #ffffff
+ surface-green #e6fae9
+ surface-indigo #eaeaf5
+ surface-dark #130c49
+ surface-dark-card #1f1860
+ text-on-dark-muted #c4c2d6
+ brand-indigo #130c49
+ on-light #0f0a3a
+ border-green #1cdb46
+ shadow-color rgba(19, 12, 73, 0.04)
+ shadow-color-md rgba(19, 12, 73, 0.08)
+ shadow-color-lg rgba(19, 12, 73, 0.12)
+ accent-amber #f59e0b
+ accent-rose #ef4444
+ accent-cyan #06b6d4
+ accent-violet #8b5cf6
+ code-keyword #0f9e2f
+ code-string #0a6b1f
+ code-comment #9a98b1
+ code-number #f59e0b
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 · Weaviate → Base