Diff

Warp vs Things

63 token-level differences between these two design systems.

Role tokens
Background
#121212 #f2f5f7
Text
#ffffff #303336
Brand
#c2ff00 #5c9cf5
Border
#2a2a2a #26344a1a
Display font
Inter Inter
Body size
16px 17px
colors 58 changed
~ bg #121212 #f2f5f7
~ surface-card #1a1a1a #ffffff
~ text #ffffff #303336
~ brand #c2ff00 #5c9cf5
~ brand-soft #7a9e1f #dceaff
~ on-brand #121212 #ffffff
~ cta-bg #ffffff #1a1a1f
~ cta-text #000000 #ffffff
~ border #2a2a2a #26344a1a
~ border-soft rgba(255,255,255,0.06) #26344a10
~ border-strong rgba(255,255,255,0.12) #26344a2e
+ bg-soft #ffffff
+ surface #e8ecef
+ surface-elev #dde2e6
+ text-strong #0a1320
+ text-body #3f454d
+ text-muted #26344a80
+ text-soft #000f24a3
+ text-faint #26344a40
+ brand-hover #4385e0
+ brand-softer #eaf2ff
+ brand-deep #2c6dbf
+ shadow-icon rgba(20,30,50,0.08)
+ shadow-card rgba(20,30,50,0.04)
+ shadow-elev rgba(20,30,50,0.10)
+ scrim rgba(10,19,32,0.50)
+ success #34a853
+ success-soft #e6f4ea
+ warning #f59e0b
+ warning-soft #fff8e1
+ danger #dc3545
+ danger-soft #fde7ea
+ info #5c9cf5
+ info-soft #dceaff
bg-100 #1a1a1a
bg-200 #222222
bg-300 #2c2c2c
bg-400 #363636
surface-terminal #0e0e0e
surface-banner #f5f5f5
text-200 #cccccc
text-300 #999999
text-400 #666666
text-500 #444444
text-banner #0a0a0a
brand-glow rgba(194,255,0,0.20)
cta-bg-hover #f5f5f5
link #7eb8ff
link-hover #a3cdff
terminal-cursor #c2ff00
terminal-prompt #a78bfa
terminal-success #86efac
terminal-error #fca5a5
terminal-warning #fde047
semantic-success #86efac
semantic-warning #fde047
semantic-danger #fca5a5
semantic-info #7eb8ff
typography 5 changed
~ display {"family":"Inter","size":96} {"family":"Inter","size":56}
~ h1 {"family":"Inter","size":56} {"family":"Inter","size":40}
~ h2 {"family":"Inter","size":40} {"family":"Inter","size":32}
~ body {"family":"Inter","size":16} {"family":"Inter","size":17}
~ label {"family":"Hack","size":12} {"family":"SFMono-Regular","size":12}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Things → Warp