Diff

Loom vs Pitch

59 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#292a2e #000000
Brand
#1868db #5318eb
Border
#e4e2e7 #e4e2ee
Display font
Charlie Display Mark Pro Bold
Body size
16px 16px
colors 54 changed
~ surface #ffffff #0a0a0a
~ text #292a2e #000000
~ text-muted #8c8f97 #5b5b66
~ brand #1868db #5318eb
~ brand-hover #1558bc #4512c9
~ brand-active #123263 #3a0fab
~ brand-tint #cfe1fd #ebe3fe
~ link #1868db #0000ee
~ link-hover #1558bc #3a0fab
~ border #e4e2e7 #e4e2ee
~ border-strong #dddee1 #cbc8da
+ bg-hero #000000
+ surface-light #f6f5fb
+ text-on-hero #ffffff
+ text-muted-on-hero #a8a8b3
+ border-on-hero #26262e
+ success #16a34a
+ warning #d97706
+ danger #dc2626
+ info #5318eb
bg-soft #f8f8f8
bg-muted #f0f1f2
surface-blue #e9f2fe
surface-violet #f8eefe
text-heading #101214
text-strong #1e1f21
text-secondary #505258
text-tertiary #6c6f77
text-faint #b7b9be
brand-soft #e9f2fe
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 5 changed
~ display {"family":"Charlie Display","size":80} {"family":"Mark Pro Bold","size":180}
~ h1 {"family":"Charlie Display","size":44} {"family":"Mark Pro Bold","size":56}
~ h2 {"family":"Charlie Display","size":32} {"family":"Mark Pro Bold","size":40}
~ body {"family":"Charlie Text","size":16} {"family":"Mark Pro","size":16}
~ label {"family":"SFMono-Regular","size":13} {"family":"SFMono-Regular","size":14}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Pitch → Loom