Diff

Hyperliquid vs Sierra

54 token-level differences between these two design systems.

Role tokens
Background
#04060c #ffffff
Text
rgba(255, 255, 255, 0.92) #302e2d
Brand
#97fce4 #006838
Border
rgba(255, 255, 255, 0.16) #e4e0dc
Display font
Inter GT America
Body size
16px 16px
colors 50 changed
~ bg #04060c #ffffff
~ surface #0a0d16 #f6f5f3
~ text rgba(255, 255, 255, 0.92) #302e2d
~ text-muted rgba(255, 255, 255, 0.60) #a39f99
~ brand #97fce4 #006838
~ brand-deep #2fa89a #05351d
~ on-brand #04060c #ffffff
~ border rgba(255, 255, 255, 0.16) #e4e0dc
~ border-strong rgba(255, 255, 255, 0.28) #d4cfc9
~ link #97fce4 #006838
~ link-hover #50d2c1 #05351d
+ bg-cream #f6f5f3
+ hero-bg #05351d
+ text-heading #222222
+ on-hero #ffffff
+ brand-bright #0a7d46
+ text-soft #55524f
+ text-faint #7c7873
+ glass-cta rgba(255, 255, 255, 0.10)
+ selected-bg #eef0ec
+ disabled #a39f99
+ border-subtle #efece8
+ border-hero rgba(255, 255, 255, 0.16)
+ success-bg #e3efe7
+ success-text #05351d
+ warning-bg #f6ecd9
+ warning-text #6b531c
+ danger-bg #f6e4e1
+ danger-text #8a3a2e
+ info-bg #e6edf2
+ info-text #2c4a5e
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-soft rgba(255, 255, 255, 0.08)
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":"GT America","size":80}
~ h1 {"family":"Inter","size":40} {"family":"GT America","size":48}
~ h2 {"family":"Inter","size":32} {"family":"GT America","size":32}
~ body {"family":"Inter","size":16} {"family":"GT America","size":16}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Sierra → Hyperliquid