Diff

Warp vs BMW

66 token-level differences between these two design systems.

Role tokens
Background
#121212 #ffffff
Text
#ffffff #3c3c3c
Brand
#c2ff00 #1c69d4
Border
#2a2a2a #e6e6e6
Display font
Inter BMW Type Next Latin
Body size
16px 16px
colors 61 changed
~ bg #121212 #ffffff
~ surface-card #1a1a1a #fafafa
~ text #ffffff #3c3c3c
~ brand #c2ff00 #1c69d4
~ on-brand #121212 #ffffff
~ link #7eb8ff #1c69d4
~ link-hover #a3cdff #0653b6
~ border #2a2a2a #e6e6e6
~ border-soft rgba(255,255,255,0.06) #f0f0f0
~ border-strong rgba(255,255,255,0.12) #cccccc
+ bg-soft #f7f7f7
+ bg-card #fafafa
+ bg-strong #ebebeb
+ bg-dark #1a2129
+ bg-dark-elev #262e38
+ surface #ffffff
+ surface-soft #f7f7f7
+ text-strong #1a1a1a
+ text-ink #262626
+ text-muted #6b6b6b
+ text-faint #9a9a9a
+ brand-hover #0653b6
+ brand-disabled #d6d6d6
+ on-dark #ffffff
+ on-dark-soft #bbbbbb
+ m-blue-light #0066b1
+ m-blue-dark #1c69d4
+ m-red #e22718
+ ring #1c69d4
+ shadow-soft rgba(0,0,0,0.04)
+ shadow-elev rgba(0,0,0,0.08)
+ shadow-deep rgba(0,0,0,0.16)
+ success #22c55e
+ warning #f59e0b
+ danger #dc2626
+ info #1c69d4
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-soft #7a9e1f
brand-glow rgba(194,255,0,0.20)
cta-bg #ffffff
cta-text #000000
cta-bg-hover #f5f5f5
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":"BMW Type Next Latin","size":72}
~ h1 {"family":"Inter","size":56} {"family":"BMW Type Next Latin","size":40}
~ h2 {"family":"Inter","size":40} {"family":"BMW Type Next Latin","size":32}
~ body {"family":"Inter","size":16} {"family":"BMW Type Next Latin","size":16}
~ label {"family":"Hack","size":12} {"family":"JetBrains Mono","size":11}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · BMW → Warp