Diff

v0 vs Mistral

57 token-level differences between these two design systems.

Role tokens
Background
#fafafa #fffaeb
Text
#262626 #1f1f1f
Brand
#000000 #1f1f1f
Border
rgba(0, 0, 0, 0.078) rgba(31, 31, 31, 0.18)
Display font
GeistSans Inter
Body size
14px 16px
colors 49 changed
~ bg #fafafa #fffaeb
~ surface #f2f2f2 #ffffff
~ text #262626 #1f1f1f
~ text-strong #000000 #0a0a0a
~ text-medium #525252 #3a3a3a
~ text-muted #7c7c7c #b5b5b0
~ text-soft #bababa #5a5a5a
~ text-faint #cfcfcf #8a8a8a
~ brand #000000 #1f1f1f
~ brand-soft rgba(0, 0, 0, 0.08) rgba(31, 31, 31, 0.10)
~ link #000000 #1f1f1f
~ link-hover #525252 #000000
~ selected-bg #f2f2f2 #fff0c2
~ disabled #bababa #b5b5b0
~ border rgba(0, 0, 0, 0.078) rgba(31, 31, 31, 0.18)
~ border-strong rgba(0, 0, 0, 0.14) rgba(31, 31, 31, 0.30)
~ border-subtle rgba(0, 0, 0, 0.05) rgba(31, 31, 31, 0.08)
~ success-bg #f0f7f1 #e8f0d4
~ success-text #1f6b3e #3d5a1f
~ warning-bg #fef6e4 #ffe4a8
~ warning-text #7a5a14 #7a4f00
~ danger-bg #fbebec #fde0d4
~ danger-text #9a2c34 #8a2a0a
~ info-bg #f2f2f2 #e0e8f0
~ info-text #262626 #1f3a5a
+ bg-secondary #fff0c2
+ bg-tertiary #fff5d6
+ surface-elevated #ffffff
+ 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)
bg-pure #ffffff
surface-soft #f0f0f0
surface-strong #e6e6e6
text-deep #969696
border-focus #000000
typography 5 changed
~ display {"family":"GeistSans","size":48} {"family":"Inter","size":82}
~ h1 {"family":"GeistSans","size":32} {"family":"Inter","size":48}
~ h2 {"family":"GeistSans","size":24} {"family":"Inter","size":36}
~ body {"family":"GeistSans","size":14} {"family":"Inter","size":16}
~ label {"family":"GeistMono","size":12} {"family":"JetBrains Mono","size":12}
radius 3 changed
~ button 6px 0px
~ card 12px 0px
~ pill 9999px 0px
spacing identical
No differences.
↻ Swap direction · Mistral → v0