Diff

Pitch vs StackBlitz

55 token-level differences between these two design systems.

Role tokens
Background
#ffffff #1c1f25
Text
#000000 #ffffff
Brand
#5318eb #1574ef
Border
#e4e2ee rgba(255,255,255,0.08)
Display font
Mark Pro Bold Manrope
Body size
16px 16px
colors 47 changed
~ bg #ffffff #1c1f25
~ surface #0a0a0a #24272e
~ text #000000 #ffffff
~ text-muted #5b5b66 #9ba3b4
~ brand #5318eb #1574ef
~ brand-hover #4512c9 #2b80f0
~ brand-tint #ebe3fe rgba(21,116,239,0.08)
~ link #0000ee #1574ef
~ link-hover #3a0fab #2b80f0
~ border #e4e2ee rgba(255,255,255,0.08)
~ border-strong #cbc8da rgba(255,255,255,0.14)
~ success #16a34a #34d399
~ warning #d97706 #fbbf24
~ danger #dc2626 #f87171
~ info #5318eb #1574ef
+ bg-deep #15181d
+ bg-darker #101216
+ surface-high #2c3038
+ surface-low #1f2127
+ surface-elev #363b45
+ text-strong #ffffff
+ text-body #e4e7ec
+ text-soft #7d8694
+ text-faint #565d6b
+ text-on-brand #ffffff
+ brand-deep #0f5fcc
+ brand-soft rgba(21,116,239,0.16)
+ accent-bolt #1574ef
+ accent-purple #8b5cf6
+ accent-purple-soft rgba(139,92,246,0.16)
+ accent-cyan #22d3ee
+ border-soft rgba(255,255,255,0.04)
+ border-brand rgba(21,116,239,0.45)
+ signin-bg rgba(49,61,94,0.24)
+ signin-text rgba(255,255,255,0.8)
+ success-bg rgba(52,211,153,0.15)
+ warning-bg rgba(251,191,36,0.15)
+ danger-bg rgba(248,113,113,0.15)
+ shadow-deep rgba(0,0,0,0.45)
+ shadow-soft rgba(0,0,0,0.25)
+ shadow-glow rgba(21,116,239,0.28)
bg-hero #000000
surface-light #f6f5fb
text-on-hero #ffffff
text-muted-on-hero #a8a8b3
brand-active #3a0fab
border-on-hero #26262e
typography 5 changed
~ display {"family":"Mark Pro Bold","size":180} {"family":"Manrope","size":94}
~ h1 {"family":"Mark Pro Bold","size":56} {"family":"Manrope","size":48}
~ h2 {"family":"Mark Pro Bold","size":40} {"family":"Manrope","size":36}
~ body {"family":"Mark Pro","size":16} {"family":"Inter","size":16}
~ label {"family":"SFMono-Regular","size":14} {"family":"SFMono-Regular","size":12}
radius 1 changed
~ card 12px 10px
spacing 2 changed
~ lg 32px 24px
~ xl 64px 40px
↻ Swap direction · StackBlitz → Pitch