Diff

Loom vs SKIMS

64 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#292a2e #2d2a26
Brand
#1868db #2d2a26
Border
#e4e2e7 #e5e5eb
Display font
Charlie Display Tstar Pro Headline
Body size
16px 16px
colors 58 changed
~ bg-soft #f8f8f8 #f7f7f8
~ text #292a2e #2d2a26
~ text-strong #1e1f21 #1f1d1b
~ text-secondary #505258 #676986
~ text-faint #b7b9be #9a9db1
~ brand #1868db #2d2a26
~ brand-hover #1558bc #1f1d1b
~ link #1868db #2d2a26
~ link-hover #1558bc #1f1d1b
~ border #e4e2e7 #e5e5eb
~ border-strong #dddee1 #dbdde4
+ bg-deeper #f4f4f6
+ hero-dark #1f1d1b
+ surface-soft #f7f7f8
+ text-on-hero #f6f6f6
+ text-on-brand #ffffff
+ accent-teal #0e7a82
+ accent-teal-bright #00caaa
+ border-active #676986
+ success #e6fbf0
+ info #f0f7ff
+ warning #fffaeb
+ danger #fff0f0
+ star #2d2a26
+ star-empty #e5e5e5
bg-muted #f0f1f2
surface-blue #e9f2fe
surface-violet #f8eefe
text-heading #101214
text-tertiary #6c6f77
text-muted #8c8f97
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
selected-bg #e9f2fe
disabled #b7b9be
border-soft #f1f0f3
border-input #b7b9be
border-brand #1868db
success-bg #efffd6
success-text #4c6b1f
success-solid #94c748
warning-bg #fff5d4
warning-text #8a5700
warning-solid #ffc716
danger-bg #ff613d20
danger-text #c77b00
danger-solid #ff613d
info-bg #e9f2fe
info-text #1558bc
typography 4 changed
~ display {"family":"Charlie Display","size":80} {"family":"Tstar Pro Headline","size":80}
~ h1 {"family":"Charlie Display","size":44} {"family":"Tstar Pro Headline","size":48}
~ h2 {"family":"Charlie Display","size":32} {"family":"Tstar Pro Headline","size":32}
~ body {"family":"Charlie Text","size":16} {"family":"Inter","size":16}
radius 2 changed
~ button 8px 2px
~ card 12px 14px
spacing identical
No differences.
↻ Swap direction · SKIMS → Loom