Diff

Zed vs Runway

84 token-level differences between these two design systems.

Role tokens

Background

#f5f5f3 → #0c0c0c

Text

#393d45 → #ffffff

Brand

#004edb → #0c0c0c

Border

#e2e2de → #ffffff0d

Display font

IBM Plex Serif → abcNormal

Body size

16px → 16px

colors 73 changed

~ bg #f5f5f3 → #0c0c0c

~ text #393d45 → #ffffff

~ text-strong #16181d → #ffffff

~ brand #004edb → #0c0c0c

~ link #004edb → #ffffff

~ link-hover #003fb5 → #dddddd

~ border #e2e2de → #ffffff0d

~ border-strong #d4d4ce → #ffffff1f

+ bg-alt #1a1a1a

+ text-paper #404040

+ text-muted #666e7a

+ text-soft #999999

+ text-faint #4a4a4a

+ brand-paper #efeee6

+ accent-iced #eef1f5

+ accent-cream #efeee6

+ accent-bone #e8e6dc

+ accent-graphite #262626

+ accent-charcoal #1a1a1a

+ link-underline #666e7a

+ link-visited #999999

+ selected #262626

+ disabled #404040

+ neutral-50 #fafafa

+ neutral-100 #efeee6

+ neutral-200 #eef1f5

+ neutral-300 #cccccc

+ neutral-500 #999999

+ neutral-600 #666e7a

+ neutral-700 #404040

+ neutral-800 #262626

+ neutral-900 #1a1a1a

+ neutral-950 #0c0c0c

+ surface #262626

+ surface-paper #efeee6

+ surface-iced #eef1f5

+ surface-bone #e8e6dc

+ border-subtle #f7f7f70d

+ border-paper #404040

+ shadow-ambient rgba(0,0,0,0.4)

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

+ shadow-deep rgba(0,0,0,0.6)

+ success #7cb342

+ success-bg #1a2410

+ success-text #a8d978

+ warning #e6a23c

+ warning-bg #2a1f10

+ warning-text #f5c878

+ danger #e74c3c

+ danger-bg #2a1010

+ danger-text #f08a80

+ info #5a9ed3

+ info-bg #0e1a26

+ info-text #90c4ec

− bg-100 #ffffff

− bg-200 #eeede9

− bg-300 #e7e6e1

− surface-card #ffffff

− surface-code #1a1b1e

− text-200 #5a5e66

− text-300 #6b6f78

− text-400 #86888f

− brand-hover #003fb5

− brand-soft rgba(0,78,219,0.08)

− cta-secondary-bg #ffffff

− cta-secondary-text #16181d

− border-focus #004edb

− code-bg #1a1b1e

− code-text #e6e6e3

− semantic-success #2e7d32

− semantic-warning #b54708

− semantic-danger #c01919

− semantic-info #004edb

typography 5 changed

~ display {"family":"IBM Plex Serif","size":72} → {"family":"abcNormal","size":80}

~ h1 {"family":"IBM Plex Serif","size":48} → {"family":"abcNormal","size":56}

~ h2 {"family":"IBM Plex Serif","size":36} → {"family":"abcNormal","size":40}

~ body {"family":"writer","size":16} → {"family":"abcNormal","size":16}

~ label {"family":"writer-mono","size":13} → {"family":"SFMono-Regular","size":12}

radius 2 changed

~ button 6px → 8px

~ card 8px → 12px

spacing 4 changed

~ xs 0px → 2px

~ md 12px → 8px

~ lg 32px → 20px

~ xl 64px → 32px

↻ Swap direction · Runway → Zed