Diff

Omnivore vs Adobe

83 token-level differences between these two design systems.

Role tokens
Background
#fdfdfb #ffffff
Text
#1f2937 #000000
Brand
#10b981 #fa0f00
Border
#e5e7eb #eaeaea
Display font
Inter Adobe Clean
Body size
17px 16px
colors 76 changed
~ bg #fdfdfb #ffffff
~ surface #ffffff #fafafa
~ text #1f2937 #000000
~ text-strong #0f1419 #000000
~ text-muted #6b7280 #53575b
~ text-faint #9ca3af #6e6e6e
~ brand #10b981 #fa0f00
~ brand-hover #059669 #d40b00
~ brand-deep #047857 #b30b00
~ accent #fbbf24 #1473e6
~ accent-soft #fef3c7 #e1f0ff
~ link #10b981 #1473e6
~ link-hover #059669 #0265dc
~ border #e5e7eb #eaeaea
~ border-strong #d1d5db #cacaca
~ border-subtle #f3f4f6 #f0f0f0
~ success-bg #d1fae5 #e8f5ee
~ warning-bg #fef3c7 #fff3e0
~ danger-bg #fee2e2 #fce9ea
~ info-bg #dbeafe #e1f0ff
+ bg-soft #f5f5f5
+ bg-deep #1d1d1d
+ bg-creative #000000
+ surface-raised #ffffff
+ surface-hover #f0f1f2
+ text-body #2c2c2c
+ text-on-deep #ffffff
+ brand-magenta #ff0f5b
+ brand-orange #ff7a00
+ accent-strong #0265dc
+ product-photoshop #31a8ff
+ product-illustrator #ff9a00
+ product-premiere #9999ff
+ product-acrobat #b30b00
+ ring-focus #1473e6
+ shadow-tile rgba(0,0,0,0.08)
+ shadow-elevated rgba(0,0,0,0.16)
+ on-accent #ffffff
+ success #268e6c
+ warning #e68619
+ danger #d7373f
+ info #1473e6
+ gradient-wordmark linear-gradient(135deg, #ff0f5b 0%, #fa0f00 50%, #ff7a00 100%)
bg-pure-white #ffffff
bg-warm #faf9f5
bg-cool #f9fafb
surface-2 #f3f4f6
text-medium #374151
text-soft #4b5563
text-disabled #d1d5db
brand-soft #d1fae5
brand-tint rgba(16, 185, 129, 0.10)
accent-deep #d97706
link-visited #6b7280
selected-bg #d1fae5
disabled #d1d5db
cta-bg #10b981
cta-text #ffffff
ink-50 #f9fafb
ink-100 #f3f4f6
ink-200 #e5e7eb
ink-300 #d1d5db
ink-400 #9ca3af
ink-500 #6b7280
ink-600 #4b5563
ink-700 #374151
ink-800 #1f2937
ink-900 #0f1419
border-emerald rgba(16, 185, 129, 0.30)
shadow-color rgba(15, 20, 25, 0.06)
shadow-color-strong rgba(15, 20, 25, 0.12)
shadow-color-emerald rgba(16, 185, 129, 0.18)
success-text #047857
warning-text #92400e
danger-text #991b1b
info-text #1e40af
typography 5 changed
~ display {"family":"Inter","size":64} {"family":"Adobe Clean","size":84}
~ h1 {"family":"Inter","size":48} {"family":"Adobe Clean","size":42}
~ h2 {"family":"Inter","size":38} {"family":"Adobe Clean","size":32}
~ body {"family":"Inter","size":17} {"family":"Adobe Clean","size":16}
~ label {"family":"JetBrains Mono","size":12} {"family":"Source Code Pro","size":13}
radius 2 changed
~ button 8px 6px
~ card 12px 8px
spacing identical
No differences.
↻ Swap direction · Adobe → Omnivore