Diff

Ideogram vs DeepSeek

60 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#0e0e10 #1a1a1a
Brand
#8864e4 #4d6bfe
Border
rgba(15, 15, 15, 0.05) #e5e7eb
Display font
Inter Inter
Body size
16px 16px
colors 52 changed
~ surface #f7f7f8 #f5f7fb
~ text #0e0e10 #1a1a1a
~ text-strong #000000 #0a0a0a
~ text-medium #2b2b2f #2a2a2e
~ text-soft #585964 #8b90a0
~ text-muted #606066 #6b7280
~ text-faint #9b9ba0 #a8acb8
~ brand #8864e4 #4d6bfe
~ brand-deep #7e4dda #2a3eb1
~ link #7e4dda #4d6bfe
~ link-hover #8864e4 #3a55e5
~ selected-bg #f6f4fe #eaeefe
~ border rgba(15, 15, 15, 0.05) #e5e7eb
~ border-strong rgba(15, 15, 15, 0.12) #d1d5db
~ success-bg #e7f5ec #dcfce7
~ success-text #1f6b3e #15803d
~ warning-bg #fef6e4 #fef3c7
~ warning-text #7a5a14 #854d0e
~ danger-bg #fbebec #fee2e2
~ danger-text #9a2c34 #b91c1c
~ info-bg #f6f4fe #eaeefe
~ info-text #5b3eb8 #2a3eb1
+ bg-soft #fafbfd
+ bg-deep #0a0a23
+ bg-deep-strong #050518
+ surface-hover #eef1f8
+ surface-strong #e2e7f1
+ text-on-dark #e6e8ef
+ text-on-dark-muted #a8b0c4
+ on-cta #ffffff
+ brand-hover #3a55e5
+ brand-active #2a44cc
+ brand-soft #eaeefe
+ brand-faint #f3f5fe
+ brand-glow rgba(77, 107, 254, 0.24)
+ accent-cyan #5eaaff
+ disabled-bg #f5f7fb
+ disabled-text #a8acb8
+ border-soft #eef0f4
+ border-focus #4d6bfe
+ border-on-dark rgba(255, 255, 255, 0.12)
+ shadow-rgb 10, 10, 35
+ shadow-blue 77, 107, 254
bg-alt #fafafc
surface-soft #ececee
surface-violet #f6f4fe
surface-violet-deep #ede7fc
brand-tint #f6f4fe
brand-tint-strong #ede7fc
disabled #cfcfd4
border-subtle rgba(15, 15, 15, 0.03)
border-violet rgba(136, 100, 228, 0.30)
typography 4 changed
~ display {"family":"Inter","size":72} {"family":"Inter","size":80}
~ h1 {"family":"Inter","size":48} {"family":"Inter","size":64}
~ h2 {"family":"Inter","size":36} {"family":"Inter","size":40}
~ label {"family":"SFMono-Regular","size":12} {"family":"JetBrains Mono","size":13}
radius 2 changed
~ button 6px 8px
~ card 12px 16px
spacing 2 changed
~ lg 12px 16px
~ xl 20px 24px
↻ Swap direction · DeepSeek → Ideogram