Diff

Hyperliquid vs Away

56 token-level differences between these two design systems.

Role tokens
Background
#04060c #ffffff
Text
rgba(255, 255, 255, 0.92) #111111
Brand
#97fce4 #a9c4d4
Border
rgba(255, 255, 255, 0.16) #e4e2dd
Display font
Inter Graphik
Body size
16px 16px
colors 51 changed
~ bg #04060c #ffffff
~ surface #0a0d16 #ffffff
~ text rgba(255, 255, 255, 0.92) #111111
~ text-muted rgba(255, 255, 255, 0.60) #6b6b6b
~ brand #97fce4 #a9c4d4
~ brand-deep #2fa89a #3b5566
~ on-brand #04060c #111111
~ border rgba(255, 255, 255, 0.16) #e4e2dd
~ border-soft rgba(255, 255, 255, 0.08) #efece8
~ border-strong rgba(255, 255, 255, 0.28) #111111
~ link #97fce4 #111111
~ link-hover #50d2c1 #6b6b6b
+ bg-soft #f7f6f4
+ bg-deeper #efece8
+ hero-plate #1a1a1a
+ surface-soft #f7f6f4
+ pastel-coast #a9c4d4
+ pastel-sand #e3d9c6
+ pastel-olive #9aa07c
+ pastel-navy #2b3a4a
+ pastel-blush #e8c9c5
+ pastel-cherry #9e2b2b
+ cta-bg #ffffff
+ cta-text #111111
+ cta-bg-hover #111111
+ on-cta-hover #ffffff
+ text-strong #000000
+ text-faint #9a9a9a
+ text-on-image #ffffff
+ success #2f7a4d
+ warning #c8861a
+ danger #9e2b2b
+ info #3b5566
bg-elev-1 #0a0d16
bg-elev-2 #121622
bg-elev-3 #1a1f2e
surface-row-hover #121622
text-body rgba(255, 255, 255, 0.78)
text-subtle rgba(255, 255, 255, 0.45)
brand-strong #50d2c1
brand-soft rgba(151, 252, 228, 0.12)
brand-glow rgba(151, 252, 228, 0.35)
border-brand #97fce4
semantic-up #3fd68b
semantic-up-soft rgba(63, 214, 139, 0.14)
semantic-down #ff5470
semantic-down-soft rgba(255, 84, 112, 0.14)
semantic-warning #ffd25f
semantic-info #97fce4
focus-ring rgba(151, 252, 228, 0.55)
scrim rgba(2, 3, 7, 0.78)
typography 4 changed
~ display {"family":"Inter","size":80} {"family":"Graphik","size":56}
~ h1 {"family":"Inter","size":40} {"family":"Graphik","size":40}
~ h2 {"family":"Inter","size":32} {"family":"Graphik","size":32}
~ body {"family":"Inter","size":16} {"family":"Graphik","size":16}
radius 1 changed
~ card 12px 14px
spacing identical
No differences.
↻ Swap direction · Away → Hyperliquid