Diff

Liquid Death vs Bear

67 token-level differences between these two design systems.

Role tokens
Background
#000000 #ffffff
Text
#ffffff #444444
Brand
#ffffff #c6f432
Border
#ffffff #0000001a
Display font
Acumin Pro bearsansheadline
Body size
16px 17px
colors 55 changed
~ bg #000000 #ffffff
~ surface #000000 #f4f1ec
~ text #ffffff #444444
~ text-strong #ffffff #222222
~ text-muted #9ca3af #7a7a7a
~ text-soft #6b7280 #999999
~ border #ffffff #0000001a
~ border-soft #262626 #00000010
~ border-strong #ffffff #00000028
~ scrim rgba(0,0,0,0.85) rgba(20,18,15,0.50)
~ shadow-card transparent rgba(34,30,15,0.04)
~ success #22c55e #3a7b3a
~ warning #f59e0b #a35e0a
~ danger #ff0000 #dd4c4f
~ info #007aff #456aa3
+ bg-soft #fafaf8
+ surface-elev #ebe5dc
+ surface-paper #fdfbf5
+ text-deepest #111111
+ text-body #5a5a5a
+ 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-screenshot rgba(0,0,0,0.10)
+ shadow-elev rgba(34,30,15,0.08)
+ success-soft #eaf3ea
+ warning-soft #fbf1de
+ danger-soft #fce5e5
+ info-soft #cbdaee
bg-page #000000
surface-raised #0a0a0a
surface-inverse #ffffff
brand #ffffff
brand-hover #e5e5e5
brand-active #cccccc
text-on-white #000000
text-on-brand #000000
link #ffffff
link-hover #9ca3af
border-input #ffffff
outline-focus #ffffff
shadow-modal transparent
accent-electric #007aff
accent-blood #ff0000
cta-hell-yes-bg #000000
cta-hell-yes-text #ffffff
cta-contest-bg #ffffff
cta-contest-text #000000
typography 4 changed
~ display {"family":"Acumin Pro","size":96} {"family":"bearsansheadline","size":51}
~ h1 {"family":"Acumin Pro","size":60} {"family":"bearsansheadline","size":40}
~ h2 {"family":"Acumin Pro","size":48} {"family":"bearsansheadline","size":32}
~ body {"family":"Acumin Pro","size":16} {"family":"bearsans","size":17}
radius 3 changed
~ button 0px 12px
~ card 0px 16px
~ pill 0px 9999px
spacing 5 changed
~ xs 0px 4px
~ sm 4px 8px
~ md 12px 16px
~ lg 32px 48px
~ xl 64px 96px
↻ Swap direction · Bear → Liquid Death