Diff

PlanetScale vs Render

60 token-level differences between these two design systems.

Role tokens

Background

#111111 → #ffffff

Text

#ffffff → #373145

Brand

#c11027 → #8a05ff

Border

#ffffff1a → #0000001a

Display font

PlanetScale Sans → Inter

Body size

15px → 16px

colors 53 changed

~ bg #111111 → #ffffff

~ bg-deep #000000 → #fafafa

~ bg-elev-1 #1a1a1a → #f5f3fb

~ bg-elev-2 #222222 → #ffffff

~ surface #1a1a1a → #fafafa

~ brand #c11027 → #8a05ff

~ brand-hover #e0142f → #6e04cc

~ brand-pressed #a00d22 → #5a039f

~ brand-deep #7d091a → #3d0270

~ brand-glow #c1102733 → #8a05ff1f

~ accent-soft #c1102714 → #e6daff

~ link #7ab2ff → #8a05ff

~ link-hover #a3c8ff → #6e04cc

~ link-visited #5d96e0 → #6a04b8

~ selected #c1102726 → #8a05ff14

~ disabled #3a3a3a → #e6e4ec

~ disabled-text #666666 → #a8a4b4

~ text #ffffff → #373145

~ text-heading #ffffff → #1f1a2e

~ text-muted #a0a0a0 → #5e5b6f

~ text-soft #6a6a6a → #9089a0

~ text-faint #4a4a4a → #bcb6c8

~ text-disabled #666666 → #a8a4b4

~ border #ffffff1a → #0000001a

~ border-soft #ffffff0d → #0000000d

~ border-strong #ffffff33 → #00000033

~ border-brand #c1102766 → #8a05ff66

~ shadow-ambient rgba(0,0,0,0.4) → rgba(55,49,69,0.06)

~ shadow-standard rgba(0,0,0,0.6) → rgba(55,49,69,0.1)

~ shadow-elevated rgba(0,0,0,0.75) → rgba(138,5,255,0.18)

~ shadow-glow rgba(193,16,39,0.35) → rgba(251,206,255,0.5)

~ success #22a652 → #0a8754

~ success-bg #0f3a1f → #dffaef

~ warning #f5a623 → #cc7400

~ warning-bg #3a2710 → #fff4e0

~ danger #ff4d4d → #d72638

~ danger-bg #3a1818 → #ffe5e8

~ info #7ab2ff → #8a05ff

~ info-bg #1a2030 → #e6daff

+ surface-soft #e6daff

+ surface-glow #fbceff

+ surface-deep #f3eefe

+ accent #9d66ff

+ accent-hover #b08aff

+ accent-glow #fbceff

− bg-elev-3 #2a2a2a

− surface-alt #222222

− surface-elevated #2a2a2a

− accent-green #22a652

− accent-green-hover #2bc060

− accent-green-deep #188440

− accent-amber #f5a623

− accent-amber-hover #ffba3d

typography 5 changed

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

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

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

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

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

radius 2 changed

~ button 6px → 8px

~ card 16px → 24px

spacing identical

No differences.

↻ Swap direction · Render → PlanetScale