Diff

Axiom vs Warp

80 token-level differences between these two design systems.

Role tokens
Background
#0a0e1a #121212
Text
#ffffff #ffffff
Brand
#1aaaff #c2ff00
Border
#ffffff14 #2a2a2a
Display font
Inter Inter
Body size
16px 16px
colors 76 changed
~ bg #0a0e1a #121212
~ brand #1aaaff #c2ff00
~ brand-soft #0a3050 #7a9e1f
~ on-brand #ffffff #121212
~ link #1aaaff #7eb8ff
~ link-hover #5cc4ff #a3cdff
~ border #ffffff14 #2a2a2a
~ border-strong #ffffff28 rgba(255,255,255,0.12)
~ border-soft #ffffff0a rgba(255,255,255,0.06)
+ bg-100 #1a1a1a
+ bg-200 #222222
+ bg-300 #2c2c2c
+ bg-400 #363636
+ surface-terminal #0e0e0e
+ surface-card #1a1a1a
+ 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 #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
bg-soft #06080f
bg-elevated #111729
bg-deep #03050a
surface #161d33
surface-hover #1d2540
surface-active #243057
surface-elevated #1a2240
text-strong #ffffff
text-muted #b8c0d4
text-soft #7a86a3
text-faint #4a5575
text-on-brand #ffffff
text-on-light #0a0e1a
brand-hover #0e8ed8
brand-active #0c7ec0
brand-deep #063052
brand-light #5cc4ff
accent-cyan #1aaaff
accent-violet #9c5cff
accent-green #22c55e
accent-amber #f59e0b
accent-red #ef4444
accent-pink #ec4899
border-brand #1aaaff
shadow-color rgba(3, 5, 10, 0.50)
shadow-color-md rgba(3, 5, 10, 0.65)
shadow-color-lg rgba(3, 5, 10, 0.80)
shadow-glow-cyan rgba(26, 170, 255, 0.20)
log-info #1aaaff
log-warn #f59e0b
log-error #ef4444
log-success #22c55e
success #22c55e
warning #f59e0b
danger #ef4444
info #1aaaff
code-bg #06080f
code-keyword #9c5cff
code-string #22c55e
code-comment #7a86a3
code-number #f59e0b
code-operator #1aaaff
typography 4 changed
~ display {"family":"Inter","size":72} {"family":"Inter","size":96}
~ h1 {"family":"Inter","size":40} {"family":"Inter","size":56}
~ h2 {"family":"Inter","size":32} {"family":"Inter","size":40}
~ label {"family":"JetBrains Mono","size":11} {"family":"Hack","size":12}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Warp → Axiom