Diff

BMW vs Bear

64 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#3c3c3c #444444
Brand
#1c69d4 #c6f432
Border
#e6e6e6 #0000001a
Display font
BMW Type Next Latin bearsansheadline
Body size
16px 17px
colors 57 changed
~ bg-soft #f7f7f7 #fafaf8
~ surface #ffffff #f4f1ec
~ text #3c3c3c #444444
~ text-strong #1a1a1a #222222
~ text-muted #6b6b6b #7a7a7a
~ border #e6e6e6 #0000001a
~ border-strong #cccccc #00000028
~ border-soft #f0f0f0 #00000010
~ shadow-elev rgba(0,0,0,0.08) rgba(34,30,15,0.08)
~ success #22c55e #3a7b3a
~ warning #f59e0b #a35e0a
~ danger #dc2626 #dd4c4f
~ info #1c69d4 #456aa3
+ 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)
+ scrim rgba(20,18,15,0.50)
+ success-soft #eaf3ea
+ warning-soft #fbf1de
+ danger-soft #fce5e5
+ info-soft #cbdaee
bg-card #fafafa
bg-strong #ebebeb
bg-dark #1a2129
bg-dark-elev #262e38
surface-soft #f7f7f7
surface-card #fafafa
text-ink #262626
text-faint #9a9a9a
brand #1c69d4
brand-hover #0653b6
brand-disabled #d6d6d6
on-brand #ffffff
on-dark #ffffff
on-dark-soft #bbbbbb
m-blue-light #0066b1
m-blue-dark #1c69d4
m-red #e22718
link #1c69d4
link-hover #0653b6
ring #1c69d4
shadow-soft rgba(0,0,0,0.04)
shadow-deep rgba(0,0,0,0.16)
typography 5 changed
~ display {"family":"BMW Type Next Latin","size":72} {"family":"bearsansheadline","size":51}
~ h1 {"family":"BMW Type Next Latin","size":40} {"family":"bearsansheadline","size":40}
~ h2 {"family":"BMW Type Next Latin","size":32} {"family":"bearsansheadline","size":32}
~ body {"family":"BMW Type Next Latin","size":16} {"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 → BMW