Diff

Render vs PlanetScale

60 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #111111

Text

#373145 → #ffffff

Brand

#8a05ff → #c11027

Border

#0000001a → #ffffff1a

Display font

Inter → PlanetScale Sans

Body size

16px → 15px

colors 53 changed

~ bg #ffffff → #111111

~ bg-deep #fafafa → #000000

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

~ bg-elev-2 #ffffff → #222222

~ surface #fafafa → #1a1a1a

~ brand #8a05ff → #c11027

~ brand-hover #6e04cc → #e0142f

~ brand-pressed #5a039f → #a00d22

~ brand-deep #3d0270 → #7d091a

~ brand-glow #8a05ff1f → #c1102733

~ accent-soft #e6daff → #c1102714

~ link #8a05ff → #7ab2ff

~ link-hover #6e04cc → #a3c8ff

~ link-visited #6a04b8 → #5d96e0

~ selected #8a05ff14 → #c1102726

~ disabled #e6e4ec → #3a3a3a

~ disabled-text #a8a4b4 → #666666

~ text #373145 → #ffffff

~ text-heading #1f1a2e → #ffffff

~ text-muted #5e5b6f → #a0a0a0

~ text-soft #9089a0 → #6a6a6a

~ text-faint #bcb6c8 → #4a4a4a

~ text-disabled #a8a4b4 → #666666

~ border #0000001a → #ffffff1a

~ border-soft #0000000d → #ffffff0d

~ border-strong #00000033 → #ffffff33

~ border-brand #8a05ff66 → #c1102766

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

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

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

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

~ success #0a8754 → #22a652

~ success-bg #dffaef → #0f3a1f

~ warning #cc7400 → #f5a623

~ warning-bg #fff4e0 → #3a2710

~ danger #d72638 → #ff4d4d

~ danger-bg #ffe5e8 → #3a1818

~ info #8a05ff → #7ab2ff

~ info-bg #e6daff → #1a2030

+ 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

− surface-soft #e6daff

− surface-glow #fbceff

− surface-deep #f3eefe

− accent #9d66ff

− accent-hover #b08aff

− accent-glow #fbceff

typography 5 changed

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

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

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

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

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

radius 2 changed

~ button 8px → 6px

~ card 24px → 16px

spacing identical

No differences.

↻ Swap direction · PlanetScale → Render