Diff

Adobe vs Omnivore

83 token-level differences between these two design systems.

Role tokens
Background
#ffffff #fdfdfb
Text
#000000 #1f2937
Brand
#fa0f00 #10b981
Border
#eaeaea #e5e7eb
Display font
Adobe Clean Inter
Body size
16px 17px
colors 76 changed
~ bg #ffffff #fdfdfb
~ surface #fafafa #ffffff
~ text #000000 #1f2937
~ text-strong #000000 #0f1419
~ text-muted #53575b #6b7280
~ text-faint #6e6e6e #9ca3af
~ brand #fa0f00 #10b981
~ brand-hover #d40b00 #059669
~ brand-deep #b30b00 #047857
~ accent #1473e6 #fbbf24
~ accent-soft #e1f0ff #fef3c7
~ link #1473e6 #10b981
~ link-hover #0265dc #059669
~ border #eaeaea #e5e7eb
~ border-strong #cacaca #d1d5db
~ border-subtle #f0f0f0 #f3f4f6
~ success-bg #e8f5ee #d1fae5
~ warning-bg #fff3e0 #fef3c7
~ danger-bg #fce9ea #fee2e2
~ info-bg #e1f0ff #dbeafe
+ 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
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%)
typography 5 changed
~ display {"family":"Adobe Clean","size":84} {"family":"Inter","size":64}
~ h1 {"family":"Adobe Clean","size":42} {"family":"Inter","size":48}
~ h2 {"family":"Adobe Clean","size":32} {"family":"Inter","size":38}
~ body {"family":"Adobe Clean","size":16} {"family":"Inter","size":17}
~ label {"family":"Source Code Pro","size":13} {"family":"JetBrains Mono","size":12}
radius 2 changed
~ button 6px 8px
~ card 8px 12px
spacing identical
No differences.
↻ Swap direction · Omnivore → Adobe