Diff

Base vs Toyota

57 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #333333
Brand
#0000ff #eb0a1e
Border
#e0e0e0 #d8d8d8
Display font
coinbaseSans ToyotaType
Body size
16px 16px
colors 52 changed
~ bg-dark #000000 #252525
~ surface #f5f5f5 #ffffff
~ surface-soft #fafafa #f5f5f5
~ text #000000 #333333
~ text-strong #000000 #252525
~ text-muted #666666 #6e6e6e
~ text-faint #999999 #9c9c9c
~ brand #0000ff #eb0a1e
~ brand-hover #0000cc #c10a16
~ brand-deep #000033 #7a0510
~ border #e0e0e0 #d8d8d8
~ border-soft #ededed #e8e8e8
~ border-strong #999999 #a8a8a8
~ link #0000ff #0066b1
~ link-hover #0000cc #004f8c
~ ring #0000ff #eb0a1e
~ success #10b981 #1f8b46
~ warning #f59e0b #f0a020
~ danger #ef4444 #eb0a1e
~ info #0000ff #0066b1
+ bg-soft #f5f5f5
+ bg-card #ffffff
+ bg-strong #e8e8e8
+ bg-dark-elev #383838
+ bg-deep #101010
+ surface-card #ffffff
+ surface-table #fafafa
+ text-ink #252525
+ brand-disabled #d0d0d0
+ on-dark #ffffff
+ on-dark-soft #bcbcbc
+ accent-blue-hybrid #0066b1
+ accent-blue-hover #004f8c
+ accent-gr-orange #ff5a1f
+ border-on-dark rgba(255,255,255,0.18)
+ shadow-soft rgba(0,0,0,0.06)
+ shadow-elev rgba(0,0,0,0.12)
+ shadow-deep rgba(0,0,0,0.32)
bg-elevated #fafafa
bg-blue #0000ff
bg-cream #f5f5f0
surface-strong #e8e8e8
surface-on-blue #0000cc
text-body #1a1a1a
text-on-blue #ffffff
text-on-dark #ffffff
brand-active #000099
brand-soft #e6e6ff
accent-cream #f5f5f0
accent-yellow #ffd000
accent-pink #ff5599
border-on-blue #3333ff
typography 5 changed
~ display {"family":"coinbaseSans","size":72} {"family":"ToyotaType","size":72}
~ h1 {"family":"coinbaseSans","size":40} {"family":"ToyotaType","size":40}
~ h2 {"family":"coinbaseSans","size":32} {"family":"ToyotaType","size":32}
~ body {"family":"coinbaseDisplay","size":16} {"family":"ToyotaType","size":16}
~ label {"family":"coinbaseMono","size":11} {"family":"JetBrains Mono","size":11}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Toyota → Base