Diff

Prisma vs Gitpod

42 token-level differences between these two design systems.

Role tokens
Background
#ffffff #f9f9f9
Text
#1d242f #0a0e19
Brand
#14b8a6 #ffae33
Border
#e2e8f0 rgba(10, 14, 25, 0.12)
Display font
Mona Sans VF Martina Plantijn
Body size
16px 16px
colors 36 changed
~ bg #ffffff #f9f9f9
~ surface #f9fafb rgba(255, 255, 255, 0.85)
~ text #1d242f #0a0e19
~ brand #14b8a6 #ffae33
~ on-brand #ffffff #0a0e19
~ border #e2e8f0 rgba(10, 14, 25, 0.12)
+ bg-pure #ffffff
+ bg-elev #f2f2f3
+ bg-deeper #ebebed
+ bg-ink #0a0e19
+ text-secondary #3a3f4b
+ text-tertiary #5b606c
+ text-faint #9499a3
+ text-on-dark #f5f5f7
+ text-on-dark-soft #a7abb5
+ brand-deep #ff8a00
+ brand-soft rgba(255, 174, 51, 0.12)
+ brand-tint rgba(255, 174, 51, 0.06)
+ link #0a0e19
+ link-hover #ff8a00
+ cta-bg #0a0e19
+ cta-text #ffffff
+ cta-bg-secondary rgba(255, 255, 255, 0.85)
+ cta-text-secondary #0a0e19
+ border-soft rgba(10, 14, 25, 0.06)
+ border-strong rgba(10, 14, 25, 0.24)
+ 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)
typography 4 changed
~ display {"family":"Mona Sans VF","size":80} {"family":"Martina Plantijn","size":80}
~ h1 {"family":"Mona Sans VF","size":64} {"family":"Martina Plantijn","size":40}
~ h2 {"family":"Mona Sans VF","size":36} {"family":"Martina Plantijn","size":32}
~ body {"family":"Inter","size":16} {"family":"ABC Diatype","size":16}
radius 2 changed
~ button 6px 8px
~ card 16px 12px
spacing identical
No differences.
↻ Swap direction · Gitpod → Prisma