Diff

Loom vs Sierra

58 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#292a2e #302e2d
Brand
#1868db #006838
Border
#e4e2e7 #e4e0dc
Display font
Charlie Display GT America
Body size
16px 16px
colors 54 changed
~ surface #ffffff #f6f5f3
~ text #292a2e #302e2d
~ text-heading #101214 #222222
~ text-muted #8c8f97 #a39f99
~ text-faint #b7b9be #7c7873
~ brand #1868db #006838
~ link #1868db #006838
~ link-hover #1558bc #05351d
~ selected-bg #e9f2fe #eef0ec
~ disabled #b7b9be #a39f99
~ border #e4e2e7 #e4e0dc
~ border-strong #dddee1 #d4cfc9
~ success-bg #efffd6 #e3efe7
~ success-text #4c6b1f #05351d
~ warning-bg #fff5d4 #f6ecd9
~ warning-text #8a5700 #6b531c
~ danger-bg #ff613d20 #f6e4e1
~ danger-text #c77b00 #8a3a2e
~ info-bg #e9f2fe #e6edf2
~ info-text #1558bc #2c4a5e
+ bg-cream #f6f5f3
+ hero-bg #05351d
+ on-hero #ffffff
+ brand-bright #0a7d46
+ brand-deep #05351d
+ text-soft #55524f
+ glass-cta rgba(255, 255, 255, 0.10)
+ border-subtle #efece8
+ border-hero rgba(255, 255, 255, 0.16)
bg-soft #f8f8f8
bg-muted #f0f1f2
surface-blue #e9f2fe
surface-violet #f8eefe
text-strong #1e1f21
text-secondary #505258
text-tertiary #6c6f77
brand-hover #1558bc
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
border-soft #f1f0f3
border-input #b7b9be
border-brand #1868db
success-solid #94c748
warning-solid #ffc716
danger-solid #ff613d
typography 4 changed
~ display {"family":"Charlie Display","size":80} {"family":"GT America","size":80}
~ h1 {"family":"Charlie Display","size":44} {"family":"GT America","size":48}
~ h2 {"family":"Charlie Display","size":32} {"family":"GT America","size":32}
~ body {"family":"Charlie Text","size":16} {"family":"GT America","size":16}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Sierra → Loom