Diff

Neon vs Inngest

56 token-level differences between these two design systems.

Role tokens
Background
#0a0a0b #0c0a09
Text
#ffffff #f6f6f6
Brand
#34d59a #cbb26a
Border
#303236 #27241f
Display font
Esbuild Whyte
Body size
16px 16px
colors 47 changed
~ bg #0a0a0b #0c0a09
~ bg-deep #000000 #070605
~ surface #111215 #16130f
~ surface-alt #151617 #1a161c
~ brand #34d59a #cbb26a
~ brand-hover #37c38f #d8c285
~ brand-pressed #2cb583 #b89a55
~ on-brand #0a0a0b #1a161c
~ accent #94b5f7 #cbb26a
~ link #94b5f7 #4078f2
~ selected #34d59a26 #cbb26a26
~ disabled #3a3c40 #211c16
~ disabled-text #5b5e64 #6b665f
~ text #ffffff #f6f6f6
~ text-heading #ffffff #fafaf9
~ text-muted #94979e #a8a39b
~ text-soft #a3a6b3 #7c7770
~ text-faint #c2c4cc #57534e
~ border #303236 #27241f
~ border-soft #ffffff14 #ffffff0f
~ border-strong #4a4d52 #ffffff1f
~ border-brand #34d59a66 #cbb26a66
~ shadow-ambient rgba(0,0,0,0.35) rgba(0,0,0,0.4)
~ success #34d59a #3ecf8e
~ success-bg #2c6d4c #0f2a1d
~ warning #f5a623 #cbb26a
~ warning-bg #3a2a10 #2a2310
~ danger #ff5c5c #ef4444
~ danger-bg #3a1818 #2a1414
~ info #94b5f7 #4078f2
~ info-bg #1a2240 #101a2e
+ surface-muted #211c16
+ brand-soft #cbb26a1f
bg-elev-1 #0c0d0d
bg-elev-2 #111215
bg-elev-3 #151617
surface-tinted #285d49
surface-tinted-2 #2c6d4c
surface-tinted-soft #cae6d9
brand-deep #1a8d65
brand-glow #34d59a33
accent-hover #a9c4f9
accent-soft #94b5f71f
link-hover #a9c4f9
link-visited #7d9ce0
text-disabled #5b5e64
shadow-glow rgba(52,213,154,0.25)
typography 5 changed
~ display {"family":"Esbuild","size":96} {"family":"Whyte","size":84}
~ h1 {"family":"Esbuild","size":56} {"family":"Whyte","size":72}
~ h2 {"family":"Esbuild","size":40} {"family":"Whyte","size":40}
~ body {"family":"Inter","size":16} {"family":"Circular XX","size":16}
~ label {"family":"JetBrains Mono","size":12} {"family":"SFMono-Regular","size":13}
radius 3 changed
~ button 8px 0px
~ card 20px 0px
~ pill 9999px 0px
spacing 1 changed
~ xs 2px 0px
↻ Swap direction · Inngest → Neon