Diff

Bear vs Deloitte

64 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#444444 #000000
Brand
#c6f432 #86bc25
Border
#0000001a #e3e3e3
Display font
bearsansheadline Open Sans
Body size
17px 16px
colors 53 changed
~ surface #f4f1ec #ffffff
~ text #444444 #000000
~ text-strong #222222 #000000
~ text-body #5a5a5a #000000
~ text-muted #7a7a7a #666666
~ text-soft #999999 #767676
~ border #0000001a #e3e3e3
~ border-strong #00000028 #666666
~ scrim rgba(20,18,15,0.50) rgba(0,0,0,0.55)
~ success #3a7b3a #86bc25
~ success-soft #eaf3ea #eef7e0
~ warning #a35e0a #ed8b00
~ warning-soft #fbf1de #fdf0dc
~ danger #dd4c4f #da291c
~ danger-soft #fce5e5 #fbe9e7
~ info #456aa3 #1076a8
~ info-soft #cbdaee #e7f1f6
+ surface-soft #f5f5f5
+ surface-strong #e3e3e3
+ surface-dark #333333
+ surface-dark-elev #4a4a4a
+ text-on-dark #ffffff
+ text-on-dark-mute #cccccc
+ brand #86bc25
+ brand-deep #5c8a1a
+ brand-soft #eef7e0
+ on-brand #000000
+ accent #1076a8
+ accent-hover #0c5d85
+ accent-soft #e7f1f6
+ on-accent #ffffff
+ border-on-dark #5e5e5e
+ link #1076a8
+ link-hover #0c5d85
+ focus #1076a8
bg-soft #fafaf8
surface-elev #ebe5dc
surface-paper #fdfbf5
text-deepest #111111
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
border-soft #00000010
shadow-card rgba(34,30,15,0.04)
shadow-screenshot rgba(0,0,0,0.10)
shadow-elev rgba(34,30,15,0.08)
typography 4 changed
~ display {"family":"bearsansheadline","size":51} {"family":"Open Sans","size":64}
~ h1 {"family":"bearsansheadline","size":40} {"family":"Open Sans","size":40}
~ h2 {"family":"bearsansheadline","size":32} {"family":"Open Sans","size":32}
~ body {"family":"bearsans","size":17} {"family":"Open Sans","size":16}
radius 2 changed
~ button 12px 8px
~ card 16px 12px
spacing 5 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
~ lg 48px 32px
~ xl 96px 64px
↻ Swap direction · Deloitte → Bear