Diff

Leonardo.Ai vs Sierra

59 token-level differences between these two design systems.

Role tokens
Background
#000000 #ffffff
Text
#ffffff #302e2d
Brand
#ffffff #006838
Border
#1f1f1f #e4e0dc
Display font
ufficioDisplay GT America
Body size
16px 16px
colors 55 changed
~ bg #000000 #ffffff
~ surface #111111 #f6f5f3
~ text #ffffff #302e2d
~ text-muted #a1a1a1 #a39f99
~ text-soft #cfcfcf #55524f
~ text-faint #6b6b6b #7c7873
~ brand #ffffff #006838
~ brand-deep #e5e5e5 #05351d
~ on-brand #000000 #ffffff
~ link #ffffff #006838
~ link-hover #cfcfcf #05351d
~ disabled #2a2a2a #a39f99
~ border #1f1f1f #e4e0dc
~ border-strong #2e2e2e #d4cfc9
~ border-subtle #141414 #efece8
~ success-bg #0b1f12 #e3efe7
~ success-text #86efac #05351d
~ warning-bg #231803 #f6ecd9
~ warning-text #fcd34d #6b531c
~ danger-bg #230b0b #f6e4e1
~ danger-text #fca5a5 #8a3a2e
~ info-bg #04222a #e6edf2
~ info-text #a5f3fc #2c4a5e
+ bg-cream #f6f5f3
+ hero-bg #05351d
+ text-heading #222222
+ on-hero #ffffff
+ brand-bright #0a7d46
+ glass-cta rgba(255, 255, 255, 0.10)
+ selected-bg #eef0ec
+ border-hero rgba(255, 255, 255, 0.16)
bg-alt #0a0a0a
surface-deep #080808
surface-raised #1a1a1a
text-strong #ffffff
text-body #ededed
brand-soft #1a1a1a
accent-violet #8b5cf6
accent-violet-soft #1e1633
accent-cyan #22d3ee
link-visited #a1a1a1
selected #1a1a1a
neutral-50 #fafafa
neutral-100 #ededed
neutral-300 #a1a1a1
neutral-500 #6b6b6b
neutral-700 #2a2a2a
neutral-900 #111111
shadow-ambient rgba(0,0,0,0.5)
shadow-deep rgba(0,0,0,0.75)
shadow-glow rgba(255,255,255,0.06)
success #22c55e
warning #f59e0b
danger #ef4444
info #22d3ee
typography 4 changed
~ display {"family":"ufficioDisplay","size":80} {"family":"GT America","size":80}
~ h1 {"family":"ufficioDisplay","size":40} {"family":"GT America","size":48}
~ h2 {"family":"ufficioDisplay","size":32} {"family":"GT America","size":32}
~ body {"family":"canvaSans","size":16} {"family":"GT America","size":16}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Sierra → Leonardo.Ai