Diff

Neon vs Excalidraw

85 token-level differences between these two design systems.

Role tokens

Background

#0a0a0b → #fffefd

Text

#ffffff → #1b1b1f

Brand

#34d59a → #6965db

Border

#303236 → #1b1b1f1a

Display font

Esbuild → Excalifont

Body size

16px → 16px

colors 73 changed

~ bg #0a0a0b → #fffefd

~ surface #111215 → #ffffff

~ brand #34d59a → #6965db

~ brand-hover #37c38f → #5651c5

~ on-brand #0a0a0b → #ffffff

~ link #94b5f7 → #6965db

~ text #ffffff → #1b1b1f

~ text-muted #94979e → #5b5b5b

~ text-soft #a3a6b3 → #8a8a8a

~ text-faint #c2c4cc → #bababa

~ border #303236 → #1b1b1f1a

~ border-soft #ffffff14 → #1b1b1f0d

~ border-strong #4a4d52 → #1b1b1f33

~ success #34d59a → #16a34a

~ success-bg #2c6d4c → #dcfce7

~ warning #f5a623 → #d97706

~ warning-bg #3a2a10 → #fef3c7

~ danger #ff5c5c → #dc2626

~ danger-bg #3a1818 → #fee2e2

~ info #94b5f7 → #6965db

~ info-bg #1a2240 → #e8e7fb

+ bg-canvas #ffffff

+ bg-warm #fdf6e3

+ bg-paper #fafafa

+ surface-soft #fafafa

+ surface-warm #f5f0e0

+ surface-hover #f5f5f5

+ surface-soft-warm #fdfaf2

+ text-strong #0f0f12

+ text-display #1b1b1f

+ text-on-brand #ffffff

+ text-on-pastel #1b1b1f

+ brand-active #443fa3

+ brand-soft #e8e7fb

+ brand-faint #f3f2fd

+ accent-yellow #ffe066

+ accent-yellow-deep #fad434

+ accent-pink #ffadad

+ accent-pink-deep #ff8888

+ accent-green #9be7c4

+ accent-green-deep #6fd29f

+ accent-blue #bde0fe

+ accent-blue-deep #92c8fa

+ accent-orange #ffb997

+ accent-orange-deep #ff9970

+ accent-purple #d4c5f9

+ border-hand #1b1b1f

− 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-pressed #2cb583

− brand-deep #1a8d65

− brand-glow #34d59a33

− accent #94b5f7

− accent-hover #a9c4f9

− accent-soft #94b5f71f

− link-hover #a9c4f9

− link-visited #7d9ce0

− selected #34d59a26

− disabled #3a3c40

− disabled-text #5b5e64

− text-heading #ffffff

− text-disabled #5b5e64

− border-brand #34d59a66

− shadow-ambient rgba(0,0,0,0.35)

− shadow-standard rgba(0,0,0,0.55)

− shadow-elevated rgba(0,0,0,0.7)

− shadow-glow rgba(52,213,154,0.25)

typography 5 changed

~ display {"family":"Esbuild","size":96} → {"family":"Excalifont","size":64}

~ h1 {"family":"Esbuild","size":56} → {"family":"Excalifont","size":40}

~ h2 {"family":"Esbuild","size":40} → {"family":"Excalifont","size":32}

~ body {"family":"Inter","size":16} → {"family":"Assistant","size":16}

~ label {"family":"JetBrains Mono","size":12} → {"family":"Cascadia Code","size":12}

radius 2 changed

~ button 8px → 6px

~ card 20px → 8px

spacing 5 changed

~ xs 2px → 1px

~ sm 4px → 2px

~ md 12px → 6px

~ lg 24px → 12px

~ xl 40px → 20px

↻ Swap direction · Excalidraw → Neon