Diff

Upstash vs PlanetScale

65 token-level differences between these two design systems.

Role tokens

Background

#f5f5f5 → #111111

Text

#022c22 → #ffffff

Brand

#00bc7d → #c11027

Border

#e5e7eb → #ffffff1a

Display font

Inter Tight → PlanetScale Sans

Body size

16px → 15px

colors 53 changed

~ bg #f5f5f5 → #111111

~ bg-deep #ffffff → #000000

~ surface #ffffff → #1a1a1a

~ surface-alt #fafafa → #222222

~ brand #00bc7d → #c11027

~ brand-hover #00a86f → #e0142f

~ brand-pressed #009963 → #a00d22

~ accent-soft #065f4633 → #c1102714

~ link #007a55 → #7ab2ff

~ link-hover #006647 → #a3c8ff

~ selected #00bc7d26 → #c1102726

~ disabled #d4d4d8 → #3a3a3a

~ disabled-text #a1a1aa → #666666

~ text #022c22 → #ffffff

~ text-heading #022c22 → #ffffff

~ text-muted #71717b → #a0a0a0

~ text-soft #52525b → #6a6a6a

~ text-faint #a1a1aa → #4a4a4a

~ text-disabled #a1a1aa → #666666

~ border #e5e7eb → #ffffff1a

~ border-soft #0000000f → #ffffff0d

~ border-strong #d4d4d8 → #ffffff33

~ border-brand #00bc7d66 → #c1102766

~ shadow-ambient rgba(2,44,34,0.06) → rgba(0,0,0,0.4)

~ shadow-standard rgba(2,44,34,0.10) → rgba(0,0,0,0.6)

~ shadow-elevated rgba(2,44,34,0.14) → rgba(0,0,0,0.75)

~ shadow-glow rgba(0,188,125,0.22) → rgba(193,16,39,0.35)

~ success #00bc7d → #22a652

~ success-bg #eef4f1 → #0f3a1f

~ warning #d97706 → #f5a623

~ warning-bg #fef3c7 → #3a2710

~ danger #dc2626 → #ff4d4d

~ danger-bg #fee2e2 → #3a1818

~ info #007a55 → #7ab2ff

~ info-bg #eef4f1 → #1a2030

+ bg-elev-1 #1a1a1a

+ bg-elev-2 #222222

+ bg-elev-3 #2a2a2a

+ surface-elevated #2a2a2a

+ brand-deep #7d091a

+ brand-glow #c1102733

+ accent-green #22a652

+ accent-green-hover #2bc060

+ accent-green-deep #188440

+ accent-amber #f5a623

+ accent-amber-hover #ffba3d

+ link-visited #5d96e0

− bg-mute #eef4f1

− surface-code #09090b

− brand-soft #00bc7d1f

− on-brand-ink #022c22

− accent #007a55

− accent-hover #006647

typography 5 changed

~ display {"family":"Inter Tight","size":128} → {"family":"PlanetScale Sans","size":88}

~ h1 {"family":"Inter Tight","size":56} → {"family":"PlanetScale Sans","size":56}

~ h2 {"family":"Inter Tight","size":40} → {"family":"PlanetScale Sans","size":40}

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

~ label {"family":"SFMono-Regular","size":13} → {"family":"PlanetScale Mono","size":12}

radius 2 changed

~ button 8px → 6px

~ card 20px → 16px

spacing 5 changed

~ xs 4px → 2px

~ sm 8px → 4px

~ md 16px → 12px

~ lg 48px → 24px

~ xl 96px → 40px

↻ Swap direction · PlanetScale → Upstash