Diff

Signal vs Jupiter

67 token-level differences between these two design systems.

Role tokens
Background
#ffffff #090d10
Text
#1c1f23 #ffffff
Brand
#3a76f0 #c7f284
Border
#e0e3e8 #1c2530
Display font
Inter Inter
Body size
16px 16px
colors 59 changed
~ bg #ffffff #090d10
~ surface #ffffff #19242e
~ surface-soft #f4f7ff #111922
~ surface-strong #e8eaee #212a36
~ text #1c1f23 #ffffff
~ text-strong #0a0d11 #ffffff
~ text-muted #5b6068 #cad5e2
~ text-soft #7a7f87 #90a1b9
~ brand #3a76f0 #c7f284
~ brand-hover #2e62d8 #d5f79c
~ brand-soft #e8efff rgba(199, 242, 132, 0.25)
~ brand-deep #234fb8 #9fd34f
~ border #e0e3e8 #1c2530
~ border-soft #eef0f2 #141c24
~ border-strong #bcc0c7 #2a3542
~ on-brand #ffffff #090d10
~ success #3eaa6c #4ade80
~ warning #e69138 #fbbf24
~ danger #d04a3c #f87171
~ info #3a76f0 #60a5fa
+ bg-deep #05080a
+ bg-section #0d1318
+ brand-pressed #b6e96a
+ brand-tint rgba(199, 242, 132, 0.10)
+ text-bright #e2e8f0
+ text-faint #62748e
+ link #c7f284
+ link-hover #d5f79c
+ selected-bg rgba(199, 242, 132, 0.12)
+ border-brand #c7f284
+ connect-bg #212a36
+ connect-text #cad5e2
bg-warm #f8f9fa
bg-muted #f1f3f5
bg-promo #e8efff
bg-cream #fef9e9
surface-elevated #ffffff
surface-hover #f8f9fa
text-disabled #a8acb3
text-on-brand #ffffff
text-link #2e62d8
text-link-hover #1f4ab2
brand-active #234fb8
donate-blue #2c6bed
accent-cyan #5fb3f9
accent-yellow #f1c40f
accent-orange #e69138
accent-red #d04a3c
accent-green #3eaa6c
border-focus #3a76f0
encryption-verified #3eaa6c
encryption-unverified #7a7f87
shadow-card rgba(28,31,35,0.06)
shadow-modal rgba(28,31,35,0.20)
shadow-popover rgba(28,31,35,0.12)
success-soft #e0f3e7
warning-soft #fdf3e8
danger-soft #fbeae6
info-soft #e8efff
typography 2 changed
~ display {"family":"Inter","size":56} {"family":"Inter","size":80}
~ label {"family":"Roboto Mono","size":11} {"family":"SFMono-Regular","size":13}
radius 2 changed
~ button 6px 8px
~ card 8px 12px
spacing 4 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
~ xl 48px 64px
↻ Swap direction · Jupiter → Signal