Diff

Miro vs MiniMax

70 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#1c1c1e #0a0a0a
Brand
#1c1c1e #0a0a0a
Border
#e0e2e8 #e5e7eb
Display font
Roobert PRO DM Sans
Body size
16px 16px
colors 62 changed
~ surface #f7f8fa #ffffff
~ text #1c1c1e #0a0a0a
~ text-muted #a5a8b5 #8e8e93
~ brand #1c1c1e #0a0a0a
~ brand-pressed #2c2c34 #222222
~ brand-blue #4262ff #1456f0
~ brand-coral #ff9999 #ff5530
~ border #e0e2e8 #e5e7eb
~ border-soft #eef0f3 #eaecf0
~ semantic-error #c41c1c #d45656
+ bg-surface-soft #f2f3f5
+ bg-footer #0a0a0a
+ surface-card #ffffff
+ surface-feature #f7f8fa
+ text-strong #000000
+ text-body #222222
+ text-secondary #45515e
+ text-tertiary #5f5f5f
+ text-faint #a8aab2
+ brand-magenta #ea5ec1
+ brand-blue-deep #1d4ed8
+ brand-blue-mid #3b82f6
+ brand-blue-700 #17437d
+ brand-blue-200 #bfdbfe
+ brand-cyan #3daeff
+ brand-purple #a855f7
+ on-coral #ffffff
+ semantic-success-bg #e8ffea
+ semantic-success-text #1ba673
bg-soft #fafbfc
bg-yellow #fff8e0
bg-pricing-featured #f5f3ff
text-deep #050038
text-charcoal #2c2c34
text-slate #555a6a
text-steel #6b6f7e
text-stone #8e91a0
on-dark-muted #a5a8b5
brand-yellow #ffd02f
brand-yellow-deep #fcb900
yellow-light #fff4c4
yellow-dark #746019
blue-450 #5b76fe
blue-pressed #2a41b6
coral-light #ffc6c6
coral-dark #600000
brand-rose #ffd8f4
brand-pink #fde0f0
rose-light #fde0f0
brand-teal #0fbcb0
teal-light #c3faf5
moss-dark #187574
brand-orange-light #ffe6cd
brand-red #fbd4d4
success-accent #00b473
border-strong #c7cad5
footer-bg #1c1c1e
link #4262ff
link-hover #2a41b6
semantic-success #00b473
semantic-warning #fcb900
semantic-info #4262ff
typography 4 changed
~ display {"family":"Roobert PRO","size":72} {"family":"DM Sans","size":72}
~ h1 {"family":"Roobert PRO","size":40} {"family":"DM Sans","size":40}
~ h2 {"family":"Roobert PRO","size":32} {"family":"DM Sans","size":32}
~ body {"family":"Roobert PRO","size":16} {"family":"DM Sans","size":16}
radius identical
No differences.
spacing 4 changed
~ xs 4px 8px
~ sm 8px 12px
~ lg 32px 20px
~ xl 48px 24px
↻ Swap direction · MiniMax → Miro