Diff

Convex vs MiniMax

67 token-level differences between these two design systems.

Role tokens
Background
#f6eedb #ffffff
Text
#141414 #0a0a0a
Brand
#1a1a1a #0a0a0a
Border
rgba(20,20,20,0.12) #e5e7eb
Display font
gtAmerica DM Sans
Body size
16px 16px
colors 57 changed
~ bg #f6eedb #ffffff
~ surface #1a1a1a #ffffff
~ text #141414 #0a0a0a
~ text-muted #555555 #8e8e93
~ text-faint #6b6b6b #a8aab2
~ brand #1a1a1a #0a0a0a
~ border rgba(20,20,20,0.12) #e5e7eb
~ on-brand #fdf4cc #ffffff
+ bg-surface #f7f8fa
+ bg-surface-soft #f2f3f5
+ bg-footer #0a0a0a
+ surface-card #ffffff
+ surface-feature #f7f8fa
+ text-body #222222
+ text-secondary #45515e
+ text-tertiary #5f5f5f
+ brand-pressed #222222
+ brand-coral #ff5530
+ brand-magenta #ea5ec1
+ brand-blue #1456f0
+ brand-blue-deep #1d4ed8
+ brand-blue-mid #3b82f6
+ brand-blue-700 #17437d
+ brand-blue-200 #bfdbfe
+ brand-cyan #3daeff
+ brand-purple #a855f7
+ border-soft #eaecf0
+ on-dark #ffffff
+ on-coral #ffffff
+ semantic-success-bg #e8ffea
+ semantic-success-text #1ba673
+ semantic-error #d45656
bg-alt #fbf7ec
bg-warm #efe5cd
surface-deep #141414
text-on-dark #ffffff
text-on-brand #fdf4cc
brand-hover #292929
accent #fdf4cc
accent-soft #faecae
on-white #292929
pill-white #ffffff
fill-subtle rgba(0,0,0,0.05)
fill-subtle-inv rgba(255,255,255,0.05)
border-strong rgba(20,20,20,0.22)
border-on-dark rgba(255,255,255,0.12)
focus-ring #1a1a1a
focus-ring-dark #fdf4cc
selection-bg #1a1a1a
selection-text #fdf4cc
shadow rgba(20,20,20,0.08)
link #141414
link-hover #1a1a1a
success #3f7d4e
warning #b8860b
danger #9b3232
info #3a5a8c
typography 5 changed
~ display {"family":"gtAmerica","size":72} {"family":"DM Sans","size":72}
~ h1 {"family":"gtAmerica","size":42} {"family":"DM Sans","size":40}
~ h2 {"family":"gtAmerica","size":32} {"family":"DM Sans","size":32}
~ body {"family":"gtAmerica","size":16} {"family":"DM Sans","size":16}
~ label {"family":"GT America Mono","size":13} {"family":"JetBrains Mono","size":11}
radius 1 changed
~ card 24px 12px
spacing 4 changed
~ xs 4px 8px
~ sm 8px 12px
~ lg 32px 20px
~ xl 64px 24px
↻ Swap direction · MiniMax → Convex