Diff

Vuori vs Loom

63 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#212121 #292a2e
Brand
#333333 #1868db
Border
#e0e0e0 #e4e2e7
Display font
Aktiv Grotesk Charlie Display
Body size
14px 16px
colors 55 changed
~ text #212121 #292a2e
~ text-heading #333333 #101214
~ text-muted #666666 #8c8f97
~ text-faint #999999 #b7b9be
~ brand #333333 #1868db
~ brand-hover #1a1a1a #1558bc
~ border #e0e0e0 #e4e2e7
~ border-strong #333333 #dddee1
~ border-input #cccccc #b7b9be
~ success-bg #eef4ef #efffd6
~ warning-bg #f7f0e3 #fff5d4
~ danger-bg #f6eaea #ff613d20
+ bg-soft #f8f8f8
+ bg-muted #f0f1f2
+ surface-blue #e9f2fe
+ surface-violet #f8eefe
+ text-strong #1e1f21
+ text-secondary #505258
+ text-tertiary #6c6f77
+ brand-active #123263
+ brand-soft #e9f2fe
+ brand-tint #cfe1fd
+ brand-mid #4d8ced
+ brand-outline #a3c3f1
+ accent-violet #d8a0f7
+ accent-violet-soft #f8eefe
+ accent-violet-mid #bf63f3
+ accent-violet-deep #964ac0
+ accent-record #ff613d
+ accent-record-soft #ff613d20
+ link #1868db
+ link-hover #1558bc
+ selected-bg #e9f2fe
+ disabled #b7b9be
+ border-soft #f1f0f3
+ border-brand #1868db
+ success-text #4c6b1f
+ success-solid #94c748
+ warning-text #8a5700
+ warning-solid #ffc716
+ danger-text #c77b00
+ danger-solid #ff613d
+ info-bg #e9f2fe
+ info-text #1558bc
surface-soft #f7f7f7
surface-image-placeholder #f0efed
brand-pressed #000000
accent-sand #d8c3a5
accent-terracotta #c08457
accent-sage #9aa78c
accent-clay-deep #a8623a
focus-ring #333333
success #3f7d4e
warning #b07b2e
danger #b23b3b
typography 5 changed
~ display {"family":"Aktiv Grotesk","size":48} {"family":"Charlie Display","size":80}
~ h1 {"family":"Aktiv Grotesk","size":28} {"family":"Charlie Display","size":44}
~ h2 {"family":"Aktiv Grotesk","size":21} {"family":"Charlie Display","size":32}
~ body {"family":"Aktiv Grotesk","size":14} {"family":"Charlie Text","size":16}
~ label {"family":"SFMono-Regular","size":12} {"family":"SFMono-Regular","size":13}
radius 3 changed
~ button 0px 8px
~ card 0px 12px
~ pill 0px 9999px
spacing identical
No differences.
↻ Swap direction · Loom → Vuori