Diff

Graza vs Deloitte

55 token-level differences between these two design systems.

Role tokens
Background
#f6e6d9 #ffffff
Text
#3c422e #000000
Brand
#d1e030 #86bc25
Border
#3c422e #e3e3e3
Display font
GT Alpina Typewriter Open Sans
Body size
16px 16px
colors 49 changed
~ bg #f6e6d9 #ffffff
~ surface #fff4ec #ffffff
~ surface-soft #f6e6d9 #f5f5f5
~ brand #d1e030 #86bc25
~ on-brand #3c422e #000000
~ text #3c422e #000000
~ text-muted #6b6f5d #666666
~ link #3c422e #1076a8
~ link-hover #d1e030 #0c5d85
~ border #3c422e #e3e3e3
~ success #5a8a3c #86bc25
~ warning #fbd535 #ed8b00
~ danger #b3472d #da291c
~ info #3c422e #1076a8
+ surface-strong #e3e3e3
+ surface-dark #333333
+ surface-dark-elev #4a4a4a
+ text-strong #000000
+ text-body #000000
+ text-soft #767676
+ text-on-dark #ffffff
+ text-on-dark-mute #cccccc
+ brand-deep #5c8a1a
+ brand-soft #eef7e0
+ accent #1076a8
+ accent-hover #0c5d85
+ accent-soft #e7f1f6
+ on-accent #ffffff
+ border-strong #666666
+ border-on-dark #5e5e5e
+ focus #1076a8
+ scrim rgba(0,0,0,0.55)
+ success-soft #eef7e0
+ warning-soft #fdf0dc
+ danger-soft #fbe9e7
+ info-soft #e7f1f6
bg-soft #fff4ec
bg-deeper #e8d6c8
brand-ink #3c422e
accent-mint #9eef80
accent-yellow #fbd535
accent-stroke #9fcd7a
cta-bg #d1e030
cta-text #3c422e
cta-cart-bg #fff4ec
cta-cart-text #3c422e
text-faint #9a9b8a
border-soft #9fcd7a
border-faint #e8d6c8
typography 4 changed
~ display {"family":"GT Alpina Typewriter","size":80} {"family":"Open Sans","size":64}
~ h1 {"family":"GT Alpina Typewriter","size":40} {"family":"Open Sans","size":40}
~ h2 {"family":"GT Alpina Typewriter","size":32} {"family":"Open Sans","size":32}
~ body {"family":"GT Alpina Typewriter","size":16} {"family":"Open Sans","size":16}
radius 2 changed
~ button 12px 8px
~ card 20px 12px
spacing identical
No differences.
↻ Swap direction · Deloitte → Graza