Diff

Render vs Neon

55 token-level differences between these two design systems.

Role tokens
Background
#ffffff #0a0a0b
Text
#373145 #ffffff
Brand
#8a05ff #34d59a
Border
#0000001a #303236
Display font
Inter Esbuild
Body size
16px 16px
colors 51 changed
~ bg #ffffff #0a0a0b
~ bg-deep #fafafa #000000
~ bg-elev-1 #f5f3fb #0c0d0d
~ bg-elev-2 #ffffff #111215
~ surface #fafafa #111215
~ brand #8a05ff #34d59a
~ brand-hover #6e04cc #37c38f
~ brand-pressed #5a039f #2cb583
~ brand-deep #3d0270 #1a8d65
~ brand-glow #8a05ff1f #34d59a33
~ on-brand #ffffff #0a0a0b
~ accent #9d66ff #94b5f7
~ accent-hover #b08aff #a9c4f9
~ accent-soft #e6daff #94b5f71f
~ link #8a05ff #94b5f7
~ link-hover #6e04cc #a9c4f9
~ link-visited #6a04b8 #7d9ce0
~ selected #8a05ff14 #34d59a26
~ disabled #e6e4ec #3a3c40
~ disabled-text #a8a4b4 #5b5e64
~ text #373145 #ffffff
~ text-heading #1f1a2e #ffffff
~ text-muted #5e5b6f #94979e
~ text-soft #9089a0 #a3a6b3
~ text-faint #bcb6c8 #c2c4cc
~ text-disabled #a8a4b4 #5b5e64
~ border #0000001a #303236
~ border-soft #0000000d #ffffff14
~ border-strong #00000033 #4a4d52
~ border-brand #8a05ff66 #34d59a66
~ shadow-ambient rgba(55,49,69,0.06) rgba(0,0,0,0.35)
~ shadow-standard rgba(55,49,69,0.1) rgba(0,0,0,0.55)
~ shadow-elevated rgba(138,5,255,0.18) rgba(0,0,0,0.7)
~ shadow-glow rgba(251,206,255,0.5) rgba(52,213,154,0.25)
~ success #0a8754 #34d59a
~ success-bg #dffaef #2c6d4c
~ warning #cc7400 #f5a623
~ warning-bg #fff4e0 #3a2a10
~ danger #d72638 #ff5c5c
~ danger-bg #ffe5e8 #3a1818
~ info #8a05ff #94b5f7
~ info-bg #e6daff #1a2240
+ bg-elev-3 #151617
+ surface-alt #151617
+ surface-tinted #285d49
+ surface-tinted-2 #2c6d4c
+ surface-tinted-soft #cae6d9
surface-soft #e6daff
surface-glow #fbceff
surface-deep #f3eefe
accent-glow #fbceff
typography 3 changed
~ display {"family":"Inter","size":88} {"family":"Esbuild","size":96}
~ h1 {"family":"Inter","size":48} {"family":"Esbuild","size":56}
~ h2 {"family":"Inter","size":36} {"family":"Esbuild","size":40}
radius 1 changed
~ card 24px 20px
spacing identical
No differences.
↻ Swap direction · Neon → Render