Diff

Graza vs HeyGen

58 token-level differences between these two design systems.

Role tokens
Background
#f6e6d9 #ffffff
Text
#3c422e #171717
Brand
#d1e030 #00c3ff
Border
#3c422e #0000001a
Display font
GT Alpina Typewriter ABC Solar Display
Body size
16px 16px
colors 52 changed
~ bg #f6e6d9 #ffffff
~ bg-soft #fff4ec #fafafa
~ surface #fff4ec #ffffff
~ brand #d1e030 #00c3ff
~ on-brand #3c422e #000000
~ text #3c422e #171717
~ text-muted #6b6f5d #a1a1aa
~ text-faint #9a9b8a #71717a
~ link #3c422e #0094c2
~ link-hover #d1e030 #007ba3
~ border #3c422e #0000001a
+ bg-tertiary #f4f4f5
+ surface-tint #f0fbff
+ text-display #333333
+ text-secondary #3f3f46
+ text-soft #52525b
+ brand-hover #00abe0
+ brand-active #0094c2
+ brand-soft #cdf2ff
+ brand-tint #e6f9ff
+ accent-black #000000
+ on-accent-black #ffffff
+ accent-cyan-deep #0094c2
+ selected-bg #e6f9ff
+ disabled #a1a1aa
+ border-strong #00000026
+ border-subtle #00000010
+ border-brand rgba(0, 195, 255, 0.40)
+ success-bg #dcfce7
+ success-text #166534
+ warning-bg #fef3c7
+ warning-text #92400e
+ danger-bg #fee2e2
+ danger-text #b91c1c
+ info-bg #e6f9ff
+ info-text #0094c2
bg-deeper #e8d6c8
surface-soft #f6e6d9
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
border-soft #9fcd7a
border-faint #e8d6c8
success #5a8a3c
warning #fbd535
danger #b3472d
info #3c422e
typography 4 changed
~ display {"family":"GT Alpina Typewriter","size":80} {"family":"ABC Solar Display","size":80}
~ h1 {"family":"GT Alpina Typewriter","size":40} {"family":"ABC Solar Display","size":80}
~ h2 {"family":"GT Alpina Typewriter","size":32} {"family":"ABC Solar Display","size":56}
~ body {"family":"GT Alpina Typewriter","size":16} {"family":"TT Norms Pro","size":16}
radius 2 changed
~ button 12px 8px
~ card 20px 12px
spacing identical
No differences.
↻ Swap direction · HeyGen → Graza