Diff

Tesla vs Bear

57 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#393c41 #444444
Brand
#3e6ae1 #c6f432
Border
#eeeeee #0000001a
Display font
Universal Sans Display bearsansheadline
Body size
14px 17px
colors 50 changed
~ surface #ffffff #f4f1ec
~ text #393c41 #444444
~ text-strong #171a20 #222222
~ text-muted #5c5e62 #7a7a7a
~ border #eeeeee #0000001a
~ border-strong #d0d1d2 #00000028
~ border-soft #f4f4f4 #00000010
~ success #3e6ae1 #3a7b3a
~ warning #cc8800 #a35e0a
~ danger #cc0033 #dd4c4f
~ info #3e6ae1 #456aa3
+ bg-soft #fafaf8
+ surface-elev #ebe5dc
+ surface-paper #fdfbf5
+ text-deepest #111111
+ text-body #5a5a5a
+ text-soft #999999
+ accent-red #dd4c4f
+ accent-red-hover #c43a3d
+ accent-red-soft #fce5e5
+ accent-teal #456aa3
+ accent-teal-soft #cbdaee
+ accent-teal-hover #34588f
+ accent-teal-deep #2c466f
+ cta-bg #1a1a1f
+ cta-bg-hover #2a2a2f
+ cta-text #ffffff
+ shadow-card rgba(34,30,15,0.04)
+ shadow-screenshot rgba(0,0,0,0.10)
+ shadow-elev rgba(34,30,15,0.08)
+ scrim rgba(20,18,15,0.50)
+ success-soft #eaf3ea
+ warning-soft #fbf1de
+ danger-soft #fce5e5
+ info-soft #cbdaee
bg-alt #f4f4f4
bg-dark #171a20
surface-frost rgba(255,255,255,0.75)
surface-overlay rgba(128,128,128,0.65)
text-placeholder #8e8e8e
brand #3e6ae1
brand-hover #345dc4
brand-active #2b50ad
on-brand #ffffff
ring #3e6ae1
link #3e6ae1
link-hover #2b50ad
promo-blue #3e6ae1
carbon-deep #000000
category-card-overlay rgba(0,0,0,0)
typography 5 changed
~ display {"family":"Universal Sans Display","size":40} {"family":"bearsansheadline","size":51}
~ h1 {"family":"Universal Sans Display","size":40} {"family":"bearsansheadline","size":40}
~ h2 {"family":"Universal Sans Display","size":32} {"family":"bearsansheadline","size":32}
~ body {"family":"Universal Sans Text","size":14} {"family":"bearsans","size":17}
~ label {"family":"JetBrains Mono","size":11} {"family":"SFMono-Regular","size":13}
radius 2 changed
~ button 8px 12px
~ card 12px 16px
spacing identical
No differences.
↻ Swap direction · Bear → Tesla