Diff

Sierra vs Leonardo.Ai

59 token-level differences between these two design systems.

Role tokens
Background
#ffffff #000000
Text
#302e2d #ffffff
Brand
#006838 #ffffff
Border
#e4e0dc #1f1f1f
Display font
GT America ufficioDisplay
Body size
16px 16px
colors 55 changed
~ bg #ffffff #000000
~ surface #f6f5f3 #111111
~ text #302e2d #ffffff
~ on-brand #ffffff #000000
~ brand #006838 #ffffff
~ brand-deep #05351d #e5e5e5
~ text-soft #55524f #cfcfcf
~ text-faint #7c7873 #6b6b6b
~ text-muted #a39f99 #a1a1a1
~ link #006838 #ffffff
~ link-hover #05351d #cfcfcf
~ disabled #a39f99 #2a2a2a
~ border #e4e0dc #1f1f1f
~ border-strong #d4cfc9 #2e2e2e
~ border-subtle #efece8 #141414
~ success-bg #e3efe7 #0b1f12
~ success-text #05351d #86efac
~ warning-bg #f6ecd9 #231803
~ warning-text #6b531c #fcd34d
~ danger-bg #f6e4e1 #230b0b
~ danger-text #8a3a2e #fca5a5
~ info-bg #e6edf2 #04222a
~ info-text #2c4a5e #a5f3fc
+ 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
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)
typography 4 changed
~ display {"family":"GT America","size":80} {"family":"ufficioDisplay","size":80}
~ h1 {"family":"GT America","size":48} {"family":"ufficioDisplay","size":40}
~ h2 {"family":"GT America","size":32} {"family":"ufficioDisplay","size":32}
~ body {"family":"GT America","size":16} {"family":"canvaSans","size":16}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Leonardo.Ai → Sierra