Diff

Neon vs Turso

50 token-level differences between these two design systems.

Role tokens

Background

#0a0a0b → #0f1419

Text

#ffffff → #ffffff

Brand

#34d59a → #00face

Border

#303236 → #1f2a33

Display font

Esbuild → Inter

Body size

16px → 15px

colors 45 changed

~ bg #0a0a0b → #0f1419

~ bg-deep #000000 → #0a0e12

~ bg-elev-1 #0c0d0d → #121b1f

~ bg-elev-2 #111215 → #182228

~ bg-elev-3 #151617 → #1c2b34

~ surface #111215 → #182228

~ surface-alt #151617 → #18222b

~ surface-tinted #285d49 → #183134

~ surface-tinted-2 #2c6d4c → #1c2b34

~ brand #34d59a → #00face

~ brand-hover #37c38f → #00fbcf

~ brand-pressed #2cb583 → #00d8b0

~ brand-deep #1a8d65 → #00a890

~ brand-glow #34d59a33 → #00face33

~ on-brand #0a0a0b → #0f1419

~ link #94b5f7 → #00face

~ link-hover #a9c4f9 → #00fbcf

~ link-visited #7d9ce0 → #00d8b0

~ selected #34d59a26 → #00face26

~ disabled #3a3c40 → #283945

~ disabled-text #5b5e64 → #586876

~ text-muted #94979e → #9ba3a8

~ text-soft #a3a6b3 → #6b7882

~ text-faint #c2c4cc → #4a5560

~ text-disabled #5b5e64 → #586876

~ border #303236 → #1f2a33

~ border-soft #ffffff14 → #283945

~ border-strong #4a4d52 → #3a4a55

~ border-brand #34d59a66 → #00face66

~ shadow-glow rgba(52,213,154,0.25) → rgba(0,250,206,0.35)

~ success #34d59a → #1ebca1

~ success-bg #2c6d4c → #0f3a2e

~ warning-bg #3a2a10 → #3a2710

~ info #94b5f7 → #00face

~ info-bg #1a2240 → #0a3539

+ surface-tinted-3 #1e3338

+ accent-emerald #1ebca1

+ accent-emerald-deep #23765f

+ accent-emerald-mid #1e6952

+ accent-emerald-mute #29886e

+ accent-emerald-soft #1ebca11f

− surface-tinted-soft #cae6d9

− accent #94b5f7

− accent-hover #a9c4f9

− accent-soft #94b5f71f

typography 5 changed

~ display {"family":"Esbuild","size":96} → {"family":"Inter","size":88}

~ h1 {"family":"Esbuild","size":56} → {"family":"Inter","size":48}

~ h2 {"family":"Esbuild","size":40} → {"family":"Inter","size":36}

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

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

radius identical

No differences.

spacing identical

No differences.

↻ Swap direction · Turso → Neon