Diff

Bluesky vs Corsair

77 token-level differences between these two design systems.

Role tokens
Background
#ffffff #000000
Text
#0c0c0c #ffffff
Brand
#0085ff #ffff00
Border
#dde1e7 #262626
Display font
Inter Inter
Body size
15px 16px
colors 74 changed
~ bg #ffffff #000000
~ surface #ffffff #111111
~ surface-elevated #ffffff #1f1f1f
~ surface-soft #eef7ff #1a1a1a
~ surface-strong #e8eaee #262626
~ text #0c0c0c #ffffff
~ text-strong #000000 #ffffff
~ text-soft #7a838e #b3b3b3
~ text-disabled #a8aebd #4a4a4a
~ text-link #0085ff #ffff00
~ brand #0085ff #ffff00
~ brand-deep #0057b3 #cccc00
~ border #dde1e7 #262626
~ border-soft #eef0f3 #1a1a1a
~ border-strong #bcc1c9 #ffff00
~ on-brand #ffffff #000000
~ shadow-card rgba(0,0,0,0.06) rgba(0,0,0,0.6)
~ success #2bb673 #00cc66
~ warning #f9a13e #ff8800
~ danger #e84545 #ff3030
~ info #0085ff #0066ff
+ bg-deep #0a0a0a
+ bg-darkest #000000
+ surface-product-band #0a0a0a
+ surface-input #1a1a1a
+ text-faint #7a7a7a
+ brand-bright #ffff66
+ brand-darkest #999900
+ brand-glow rgba(255,255,0,0.4)
+ brand-gradient linear-gradient(135deg, #ffff66 0%, #ffff00 50%, #cccc00 100%)
+ cta-primary #ffff00
+ cta-primary-hover #ffff66
+ link-default #ffff00
+ link-visited #ffff00
+ link-hover #ffffff
+ scrim rgba(0,0,0,0.85)
+ shadow-elev rgba(0,0,0,0.8)
+ shadow-corsair-glow rgba(255,255,0,0.4)
+ rgb-spectrum linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0066ff, #aa00ff, #ff0088)
+ badge-new #ffff00
+ badge-pre-order transparent
+ badge-icue #0066ff
+ badge-cl-hydro #00bfff
+ badge-out-of-stock #7a7a7a
+ price #ffffff
+ price-discount #ffff00
+ rating-star #ffff00
bg-warm #f8f9fa
bg-muted #f1f3f5
bg-promo #e8f4ff
surface-hover #f1f3f5
text-muted #5e6772
text-on-brand #ffffff
text-link-hover #006cd9
brand-hover #006cd9
brand-active #0057b3
brand-soft #e8f4ff
accent-pink #fb44a3
accent-purple #9a75e9
accent-yellow #f5c518
accent-orange #f9a13e
accent-red #e84545
accent-green #2bb673
border-focus #0085ff
reply-line #dde1e7
reaction-like #fb44a3
reaction-repost #9a75e9
reaction-reply #5e6772
shadow-modal rgba(0,0,0,0.20)
shadow-popover rgba(0,0,0,0.12)
success-soft #e0f6ec
warning-soft #fff3e0
danger-soft #fdebeb
info-soft #e8f4ff
typography 2 changed
~ display {"family":"Inter","size":56} {"family":"Inter","size":80}
~ body {"family":"Inter","size":15} {"family":"Inter","size":16}
radius 1 changed
~ button 6px 4px
spacing identical
No differences.
↻ Swap direction · Corsair → Bluesky