Diff

Render vs lululemon

81 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #fafafa

Text

#373145 → #140f0f

Brand

#8a05ff → #c8102e

Border

#0000001a → #d6d6d6

Display font

Inter → Saans

Body size

16px → 17px

colors 69 changed

~ bg #ffffff → #fafafa

~ surface #fafafa → #ffffff

~ surface-soft #e6daff → #f9f9f8

~ brand #8a05ff → #c8102e

~ brand-hover #6e04cc → #a50d25

~ brand-pressed #5a039f → #840a1d

~ brand-deep #3d0270 → #5a0710

~ link #8a05ff → #c8102e

~ link-hover #6e04cc → #a50d25

~ text #373145 → #140f0f

~ text-muted #5e5b6f → #757575

~ text-soft #9089a0 → #53565a

~ text-faint #bcb6c8 → #919191

~ border #0000001a → #d6d6d6

~ border-soft #0000000d → #d3d5d7

~ border-strong #00000033 → #140f0f

~ border-brand #8a05ff66 → #c8102e

~ success #0a8754 → #0f752f

~ success-bg #dffaef → #e7f1ea

~ warning #cc7400 → #b15115

~ warning-bg #fff4e0 → #f8efe8

~ danger #d72638 → #d20014

~ danger-bg #ffe5e8 → #fae5e7

~ info #8a05ff → #2966b0

~ info-bg #e6daff → #eaf0f7

+ bg-warm-bone #efeeec

+ bg-soft #f9f9f8

+ bg-disabled #f4f3f2

+ bg-image-placeholder #e5e6e7

+ 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 #fafafa

− bg-elev-1 #f5f3fb

− bg-elev-2 #ffffff

− surface-glow #fbceff

− surface-deep #f3eefe

− brand-glow #8a05ff1f

− accent #9d66ff

− accent-hover #b08aff

− accent-soft #e6daff

− accent-glow #fbceff

− link-visited #6a04b8

− selected #8a05ff14

− disabled #e6e4ec

− disabled-text #a8a4b4

− text-heading #1f1a2e

− text-disabled #a8a4b4

− shadow-ambient rgba(55,49,69,0.06)

− shadow-standard rgba(55,49,69,0.1)

− shadow-elevated rgba(138,5,255,0.18)

− shadow-glow rgba(251,206,255,0.5)

typography 5 changed

~ display {"family":"Inter","size":88} → {"family":"Saans","size":100}

~ h1 {"family":"Inter","size":48} → {"family":"Saans","size":64}

~ h2 {"family":"Inter","size":36} → {"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 24px → 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 → Render