Diff

Replit vs Miro

90 token-level differences between these two design systems.

Role tokens

Background

#0e1525 → #ffffff

Text

#f5f9fc → #1c1c1e

Brand

#1fe0ea → #1c1c1e

Border

#ffffff14 → #e0e2e8

Display font

Replit Sans → Roobert PRO

Body size

17px → 16px

colors 78 changed

~ bg #0e1525 → #ffffff

~ surface #1c2333 → #f7f8fa

~ text #f5f9fc → #1c1c1e

~ text-muted #9aa6b8 → #a5a8b5

~ brand #1fe0ea → #1c1c1e

~ on-brand #0e1525 → #ffffff

~ border #ffffff14 → #e0e2e8

~ border-strong #ffffff24 → #c7cad5

~ border-soft #ffffff0a → #eef0f3

~ link #1fe0ea → #4262ff

~ link-hover #3deef7 → #2a41b6

+ bg-surface #f7f8fa

+ bg-soft #fafbfc

+ bg-yellow #fff8e0

+ bg-pricing-featured #f5f3ff

+ text-deep #050038

+ text-charcoal #2c2c34

+ text-slate #555a6a

+ text-steel #6b6f7e

+ text-stone #8e91a0

+ brand-pressed #2c2c34

+ on-dark #ffffff

+ on-dark-muted #a5a8b5

+ brand-yellow #ffd02f

+ brand-yellow-deep #fcb900

+ yellow-light #fff4c4

+ yellow-dark #746019

+ brand-blue #4262ff

+ blue-450 #5b76fe

+ blue-pressed #2a41b6

+ brand-coral #ff9999

+ coral-light #ffc6c6

+ coral-dark #600000

+ brand-rose #ffd8f4

+ brand-pink #fde0f0

+ rose-light #fde0f0

+ brand-teal #0fbcb0

+ teal-light #c3faf5

+ moss-dark #187574

+ brand-orange-light #ffe6cd

+ brand-red #fbd4d4

+ success-accent #00b473

+ footer-bg #1c1c1e

+ semantic-success #00b473

+ semantic-warning #fcb900

+ semantic-error #c41c1c

+ semantic-info #4262ff

− bg-deep #0b1120

− bg-darker #080d18

− surface-high #2b3245

− surface-low #161e2e

− surface-elev #36405a

− text-strong #ffffff

− text-soft #6c7891

− text-faint #4a5366

− text-on-brand #0e1525

− brand-hover #3deef7

− brand-deep #0fb6c0

− brand-soft rgba(31,224,234,0.15)

− brand-tint rgba(31,224,234,0.08)

− accent-orange #ff8a3d

− accent-orange-soft rgba(255,138,61,0.15)

− accent-pink #f26d9f

− accent-pink-soft rgba(242,109,159,0.15)

− accent-purple #9b6bff

− accent-purple-soft rgba(155,107,255,0.15)

− accent-yellow #ffd84a

− border-brand rgba(31,224,234,0.4)

− success #22c55e

− success-bg rgba(34,197,94,0.15)

− warning #ff8a3d

− warning-bg rgba(255,138,61,0.15)

− danger #ef4444

− danger-bg rgba(239,68,68,0.15)

− info #1fe0ea

− shadow-deep rgba(0,0,0,0.4)

− shadow-soft rgba(0,0,0,0.25)

− shadow-glow rgba(31,224,234,0.2)

typography 5 changed

~ display {"family":"Replit Sans","size":96} → {"family":"Roobert PRO","size":72}

~ h1 {"family":"Replit Sans","size":72} → {"family":"Roobert PRO","size":40}

~ h2 {"family":"Replit Sans","size":48} → {"family":"Roobert PRO","size":32}

~ body {"family":"Replit Sans","size":17} → {"family":"Roobert PRO","size":16}

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

radius 2 changed

~ button 6px → 8px

~ card 8px → 12px

spacing 5 changed

~ xs 2px → 4px

~ sm 4px → 8px

~ md 12px → 16px

~ lg 24px → 32px

~ xl 40px → 48px

↻ Swap direction · Miro → Replit