Diff

Neon vs Deno

82 token-level differences between these two design systems.

Role tokens
Background
#0a0a0b #ffffff
Text
#ffffff #000000
Brand
#34d59a #70ffaf
Border
#303236 #e1e3e7
Display font
Esbuild Inter Display
Body size
16px 17px
colors 75 changed
~ bg #0a0a0b #ffffff
~ surface #111215 #ffffff
~ brand #34d59a #70ffaf
~ brand-deep #1a8d65 #10b981
~ on-brand #0a0a0b #000000
~ accent #94b5f7 #000000
~ link #94b5f7 #0066cc
~ link-hover #a9c4f9 #004999
~ link-visited #7d9ce0 #553c9a
~ selected #34d59a26 #dcfce7
~ disabled-text #5b5e64 #b8babf
~ text #ffffff #000000
~ text-muted #94979e #5b5e64
~ text-faint #c2c4cc #8c8f95
~ text-disabled #5b5e64 #b8babf
~ border #303236 #e1e3e7
~ border-strong #4a4d52 #c3c6ca
~ shadow-standard rgba(0,0,0,0.55) rgba(0, 0, 0, 0.08)
~ success-bg #2c6d4c #dcfce7
~ warning-bg #3a2a10 #fef3c7
~ danger-bg #3a1818 #fee2e2
~ info-bg #1a2240 #dbeafe
+ bg-soft #f8f9fa
+ bg-strong #f4f5f7
+ surface-strong #f4f5f7
+ surface-muted #e8eaed
+ text-strong #000000
+ brand-strong #34d399
+ brand-soft #dcfce7
+ brand-faint #f0fdf4
+ accent-warm #f59e0b
+ accent-warm-soft #fef3c7
+ disabled-bg #f4f5f7
+ border-subtle #eef0f2
+ divider #e8eaed
+ inverse-bg #0d1117
+ inverse-text #e6e6e6
+ inverse-text-muted #8b949e
+ inverse-border #30363d
+ shadow-soft rgba(0, 0, 0, 0.04)
+ shadow-mint rgba(112, 255, 175, 0.32)
+ success-text #166534
+ success-border #86efac
+ warning-text #854d0e
+ warning-border #fbbf24
+ danger-text #991b1b
+ danger-border #fca5a5
+ info-text #1e3a8a
+ info-border #93c5fd
+ on-accent-warm #000000
bg-deep #000000
bg-elev-1 #0c0d0d
bg-elev-2 #111215
bg-elev-3 #151617
surface-alt #151617
surface-tinted #285d49
surface-tinted-2 #2c6d4c
surface-tinted-soft #cae6d9
brand-hover #37c38f
brand-pressed #2cb583
brand-glow #34d59a33
accent-hover #a9c4f9
accent-soft #94b5f71f
disabled #3a3c40
text-heading #ffffff
text-soft #a3a6b3
border-soft #ffffff14
border-brand #34d59a66
shadow-ambient rgba(0,0,0,0.35)
shadow-elevated rgba(0,0,0,0.7)
shadow-glow rgba(52,213,154,0.25)
success #34d59a
warning #f5a623
danger #ff5c5c
info #94b5f7
typography 5 changed
~ display {"family":"Esbuild","size":96} {"family":"Inter Display","size":88}
~ h1 {"family":"Esbuild","size":56} {"family":"Inter Display","size":48}
~ h2 {"family":"Esbuild","size":40} {"family":"Inter Display","size":36}
~ body {"family":"Inter","size":16} {"family":"Inter","size":17}
~ label {"family":"JetBrains Mono","size":12} {"family":"JetBrains Mono","size":11}
radius 2 changed
~ button 8px 6px
~ card 20px 12px
spacing identical
No differences.
↻ Swap direction · Deno → Neon