Diff

Mistral vs Ideogram

57 token-level differences between these two design systems.

Role tokens
Background
#fffaeb #ffffff
Text
#1f1f1f #0e0e10
Brand
#1f1f1f #8864e4
Border
rgba(31, 31, 31, 0.18) rgba(15, 15, 15, 0.05)
Display font
Inter Inter
Body size
16px 16px
colors 52 changed
~ bg #fffaeb #ffffff
~ surface #ffffff #f7f7f8
~ text #1f1f1f #0e0e10
~ text-strong #0a0a0a #000000
~ text-medium #3a3a3a #2b2b2f
~ text-soft #5a5a5a #585964
~ text-faint #8a8a8a #9b9ba0
~ text-muted #b5b5b0 #606066
~ brand #1f1f1f #8864e4
~ brand-deep #000000 #7e4dda
~ link #1f1f1f #7e4dda
~ link-hover #000000 #8864e4
~ selected-bg #fff0c2 #f6f4fe
~ disabled #b5b5b0 #cfcfd4
~ border rgba(31, 31, 31, 0.18) rgba(15, 15, 15, 0.05)
~ border-strong rgba(31, 31, 31, 0.30) rgba(15, 15, 15, 0.12)
~ border-subtle rgba(31, 31, 31, 0.08) rgba(15, 15, 15, 0.03)
~ success-bg #e8f0d4 #e7f5ec
~ success-text #3d5a1f #1f6b3e
~ warning-bg #ffe4a8 #fef6e4
~ warning-text #7a4f00 #7a5a14
~ danger-bg #fde0d4 #fbebec
~ danger-text #8a2a0a #9a2c34
~ info-bg #e0e8f0 #f6f4fe
~ info-text #1f3a5a #5b3eb8
+ bg-alt #fafafc
+ surface-soft #ececee
+ surface-violet #f6f4fe
+ surface-violet-deep #ede7fc
+ brand-tint #f6f4fe
+ brand-tint-strong #ede7fc
+ border-violet rgba(136, 100, 228, 0.30)
bg-secondary #fff0c2
bg-tertiary #fff5d6
surface-elevated #ffffff
brand-soft rgba(31, 31, 31, 0.10)
accent-flame #ff6b00
accent-flame-deep #cc5500
accent-warm #fff0c2
link-visited #5a5a5a
cta-bg #1f1f1f
cta-text #ffffff
ink-100 #0a0a0a
ink-200 #1f1f1f
ink-300 #3a3a3a
ink-400 #5a5a5a
ink-500 #8a8a8a
ink-600 #b5b5b0
ink-700 #dcdcd5
border-flame rgba(255, 107, 0, 0.40)
shadow-color rgba(31, 31, 31, 0.08)
shadow-warm rgba(255, 107, 0, 0.12)
typography 2 changed
~ display {"family":"Inter","size":82} {"family":"Inter","size":72}
~ label {"family":"JetBrains Mono","size":12} {"family":"SFMono-Regular","size":12}
radius 3 changed
~ button 0px 6px
~ card 0px 12px
~ pill 0px 9999px
spacing identical
No differences.
↻ Swap direction · Ideogram → Mistral