dYdX vs Blur
43 token-level differences between these two design systems.
Background
#000000 → #000000 Text
#fafafd → #ffffff Brand
#7774ff → #ff8700 Border
#1f1f24 → #262626 Display font
Satoshi → JetBrains Mono Body size
16px → 13px colors 32 changed
~
bg-elev-1 #0a0a0a → #0d0d0d ~
bg-elev-2 #131316 → #1a1a1a ~
bg-elev-3 #1c1c20 → #252525 ~
text #fafafd → #ffffff ~
text-body #c8c8d2 → #cccccc ~
text-muted #8a8a96 → #878787 ~
text-subtle #5a5a64 → #5a5a5a ~
brand #7774ff → #ff8700 ~
brand-hover #8e8bff → #cc6c00 ~
brand-active #605df0 → #a35700 ~
brand-soft #7774ff1a → #ff87001a ~
brand-glow rgba(119,116,255,0.40) → rgba(255,135,0,0.40) ~
on-brand #ffffff → #000000 ~
border #1f1f24 → #262626 ~
border-soft #131316 → #1a1a1a ~
border-strong #33333c → #3d3d3d ~
border-brand #7774ff → #ff8700 ~
semantic-up #26c486 → #22c55e ~
semantic-up-soft #26c4861a → #22c55e1a ~
semantic-down #ff5a5a → #ef4444 ~
semantic-down-soft #ff5a5a1a → #ef44441a ~
semantic-warning #f5b945 → #fbbf24 ~
semantic-info #7774ff → #3b82f6 ~
focus-ring rgba(119,116,255,0.55) → rgba(255,135,0,0.50) ~
link #7774ff → #ff8700 ~
link-hover #8e8bff → #ffa84d +
surface-card #0d0d0d +
surface-row-hover #1a1a1a +
bid-pool-orange #ff8700 +
rare-trait #ff8700 −
surface #0a0a0a −
surface-strong #131316 typography 5 changed
~
display {"family":"Satoshi","size":60} → {"family":"JetBrains Mono","size":72} ~
h1 {"family":"Satoshi","size":40} → {"family":"JetBrains Mono","size":40} ~
h2 {"family":"Satoshi","size":32} → {"family":"JetBrains Mono","size":32} ~
body {"family":"Satoshi","size":16} → {"family":"JetBrains Mono","size":13} ~
label {"family":"SFMono-Regular","size":13} → {"family":"JetBrains Mono","size":11} radius 3 changed
~
button 8px → 0px ~
card 12px → 0px ~
pill 9999px → 0px spacing 3 changed
~
xs 0px → 4px ~
sm 4px → 8px ~
md 12px → 16px