Diff

Render vs Raindrop.io

78 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #ffffff

Text

#373145 → #000000

Brand

#8a05ff → #0b7ed0

Border

#0000001a → #0000001a

Display font

Inter → Inter

Body size

16px → 17px

colors 67 changed

~ surface #fafafa → #f4f6f8

~ brand #8a05ff → #0b7ed0

~ brand-hover #6e04cc → #0964a8

~ link #8a05ff → #0b7ed0

~ link-hover #6e04cc → #0964a8

~ text #373145 → #000000

~ text-muted #5e5b6f → #7a7a82

~ text-soft #9089a0 → #a8a8b0

~ text-faint #bcb6c8 → #c8c8d0

~ border-soft #0000000d → #00000010

~ success #0a8754 → #34c759

~ warning #cc7400 → #ffcc00

~ danger #d72638 → #ff3b30

~ info #8a05ff → #5ac8fa

+ bg-soft #fafbfc

+ bg-tinted #f7f9fb

+ surface-raised #eef1f4

+ surface-overlay #ffffff

+ text-strong #0a0a0a

+ text-secondary #333333

+ text-on-brand #ffffff

+ brand-active #0a548d

+ brand-soft #e6f1f9

+ brand-cyan #5ec5d8

+ brand-blue-deep #1e7bd9

+ accent-mint #cce8d4

+ accent-mint-deep #9ed4ad

+ accent-pink #ffd7d7

+ accent-pink-deep #f5b8b8

+ accent-lilac #e8d4f0

+ accent-lilac-deep #c8a8d8

+ accent-teal #b8d8d4

+ accent-teal-deep #88b8b0

+ accent-yellow #fde68a

+ focus-ring #0b7ed0

+ selection-bg #0b7ed0

+ selection-text #ffffff

+ shadow rgba(0,0,0,0.08)

+ shadow-tinted rgba(11,126,208,0.12)

− bg-deep #fafafa

− bg-elev-1 #f5f3fb

− bg-elev-2 #ffffff

− surface-soft #e6daff

− surface-glow #fbceff

− surface-deep #f3eefe

− brand-pressed #5a039f

− brand-deep #3d0270

− 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

− border-brand #8a05ff66

− 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)

− success-bg #dffaef

− warning-bg #fff4e0

− danger-bg #ffe5e8

− info-bg #e6daff

typography 4 changed

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

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

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

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

radius 2 changed

~ button 8px → 12px

~ card 24px → 32px

spacing 5 changed

~ xs 2px → 4px

~ sm 4px → 8px

~ md 12px → 16px

~ lg 24px → 32px

~ xl 40px → 64px

↻ Swap direction · Raindrop.io → Render