Diff

Penpot vs Loom

62 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #292a2e
Brand
#31efb8 #1868db
Border
#d9d9d9 #e4e2e7
Display font
Work Sans Charlie Display
Body size
16px 16px
colors 58 changed
~ bg-soft #f5f8fb #f8f8f8
~ text #000000 #292a2e
~ text-muted #888888 #8c8f97
~ brand #31efb8 #1868db
~ brand-hover #2bd9a6 #1558bc
~ on-brand #151035 #ffffff
~ link #151035 #1868db
~ link-hover #14ceca #1558bc
~ border #d9d9d9 #e4e2e7
~ border-soft #f0f0f0 #f1f0f3
~ border-strong #dddddd #dddee1
+ 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-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-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
surface-soft #f8f8f8
surface-dark #151035
text-indigo #151035
text-on-dark #fafafa
text-on-dark-pure #ffffff
accent-cyan #14ceca
on-accent #151035
inverse-bg #151035
inverse-text #fafafa
semantic-success #52c41a
semantic-warning #faad14
semantic-error #ff4d4f
semantic-info #1677ff
typography 4 changed
~ display {"family":"Work Sans","size":72} {"family":"Charlie Display","size":80}
~ h1 {"family":"Work Sans","size":40} {"family":"Charlie Display","size":44}
~ h2 {"family":"Work Sans","size":32} {"family":"Charlie Display","size":32}
~ body {"family":"Work Sans","size":16} {"family":"Charlie Text","size":16}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Loom → Penpot