Diff

Neon vs lululemon

84 token-level differences between these two design systems.

Role tokens

Background

#0a0a0b → #fafafa

Text

#ffffff → #140f0f

Brand

#34d59a → #c8102e

Border

#303236 → #d6d6d6

Display font

Esbuild → Saans

Body size

16px → 17px

colors 72 changed

~ bg #0a0a0b → #fafafa

~ surface #111215 → #ffffff

~ brand #34d59a → #c8102e

~ brand-hover #37c38f → #a50d25

~ brand-pressed #2cb583 → #840a1d

~ brand-deep #1a8d65 → #5a0710

~ on-brand #0a0a0b → #ffffff

~ link #94b5f7 → #c8102e

~ link-hover #a9c4f9 → #a50d25

~ text #ffffff → #140f0f

~ text-muted #94979e → #757575

~ text-soft #a3a6b3 → #53565a

~ text-faint #c2c4cc → #919191

~ border #303236 → #d6d6d6

~ border-soft #ffffff14 → #d3d5d7

~ border-strong #4a4d52 → #140f0f

~ border-brand #34d59a66 → #c8102e

~ success #34d59a → #0f752f

~ success-bg #2c6d4c → #e7f1ea

~ warning #f5a623 → #b15115

~ warning-bg #3a2a10 → #f8efe8

~ danger #ff5c5c → #d20014

~ danger-bg #3a1818 → #fae5e7

~ info #94b5f7 → #2966b0

~ info-bg #1a2240 → #eaf0f7

+ bg-warm-bone #efeeec

+ bg-soft #f9f9f8

+ bg-disabled #f4f3f2

+ bg-image-placeholder #e5e6e7

+ surface-soft #f9f9f8

+ surface-inverse #140f0f

+ on-surface-inverse #fdfdf6

+ brand-tint #fae5e7

+ hot-heat #de212f

+ hot-heat-hover #c81a26

+ accent-lemonade #f4ff8e

+ accent-zest #f3fed7

+ accent-daydream #c0ddff

+ accent-wilderness #142a0e

+ accent-mossy #524a43

+ accent-espresso #2b1f1e

+ accent-sequoia #73273d

+ accent-rosewood #dc6d85

+ text-strong #140f0f

+ text-highlighted #c8c8c8

+ text-on-brand #ffffff

+ text-on-cta #fdfdf6

+ text-on-cta-marketing #f4ff8e

+ border-default #757575

+ focus-ring #005fcc

− 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-glow #34d59a33

− accent #94b5f7

− accent-hover #a9c4f9

− accent-soft #94b5f71f

− link-visited #7d9ce0

− selected #34d59a26

− disabled #3a3c40

− disabled-text #5b5e64

− text-heading #ffffff

− text-disabled #5b5e64

− 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":"Saans","size":100}

~ h1 {"family":"Esbuild","size":56} → {"family":"Saans","size":64}

~ h2 {"family":"Esbuild","size":40} → {"family":"Saans","size":56}

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

~ label {"family":"JetBrains Mono","size":12} → {"family":"SFMono-Regular","size":14}

radius 2 changed

~ card 20px → 14px

~ pill 9999px → 999px

spacing 5 changed

~ xs 2px → 0px

~ sm 4px → 2px

~ md 12px → 8px

~ lg 24px → 20px

~ xl 40px → 32px

↻ Swap direction · lululemon → Neon