Diff

Penpot vs Gitpod

55 token-level differences between these two design systems.

Role tokens
Background
#ffffff #f9f9f9
Text
#000000 #0a0e19
Brand
#31efb8 #ffae33
Border
#d9d9d9 rgba(10, 14, 25, 0.12)
Display font
Work Sans Martina Plantijn
Body size
16px 16px
colors 51 changed
~ bg #ffffff #f9f9f9
~ surface #ffffff rgba(255, 255, 255, 0.85)
~ text #000000 #0a0e19
~ text-on-dark #fafafa #f5f5f7
~ brand #31efb8 #ffae33
~ on-brand #151035 #0a0e19
~ link #151035 #0a0e19
~ link-hover #14ceca #ff8a00
~ border #d9d9d9 rgba(10, 14, 25, 0.12)
~ border-soft #f0f0f0 rgba(10, 14, 25, 0.06)
~ border-strong #dddddd rgba(10, 14, 25, 0.24)
+ bg-pure #ffffff
+ bg-elev #f2f2f3
+ bg-deeper #ebebed
+ bg-ink #0a0e19
+ text-secondary #3a3f4b
+ text-tertiary #5b606c
+ text-faint #9499a3
+ text-on-dark-soft #a7abb5
+ brand-deep #ff8a00
+ brand-soft rgba(255, 174, 51, 0.12)
+ brand-tint rgba(255, 174, 51, 0.06)
+ cta-bg #0a0e19
+ cta-text #ffffff
+ cta-bg-secondary rgba(255, 255, 255, 0.85)
+ cta-text-secondary #0a0e19
+ shadow-ambient rgba(10, 14, 25, 0.04)
+ shadow-card rgba(10, 14, 25, 0.06)
+ shadow-elev rgba(10, 14, 25, 0.10)
+ scrim rgba(10, 14, 25, 0.45)
+ success #1f9d55
+ success-soft rgba(31, 157, 85, 0.12)
+ warning #ffae33
+ warning-soft rgba(255, 174, 51, 0.12)
+ danger #e5484d
+ danger-soft rgba(229, 72, 77, 0.12)
bg-soft #f5f8fb
surface-soft #f8f8f8
surface-dark #151035
text-indigo #151035
text-muted #888888
text-on-dark-pure #ffffff
brand-hover #2bd9a6
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":"Martina Plantijn","size":80}
~ h1 {"family":"Work Sans","size":40} {"family":"Martina Plantijn","size":40}
~ h2 {"family":"Work Sans","size":32} {"family":"Martina Plantijn","size":32}
~ body {"family":"Work Sans","size":16} {"family":"ABC Diatype","size":16}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Gitpod → Penpot