Diff

Dell vs Bluesky

80 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #ffffff

Text

#0a0a0a → #0c0c0c

Brand

#007db8 → #0085ff

Border

#dde4eb → #dde1e7

Display font

Inter → Inter

Body size

16px → 15px

colors 77 changed

~ surface-soft #f9f9f9 → #eef7ff

~ surface-strong #dde4eb → #e8eaee

~ text #0a0a0a → #0c0c0c

~ text-soft #444444 → #7a838e

~ text-disabled #a8b0b8 → #a8aebd

~ text-link #007db8 → #0085ff

~ brand #007db8 → #0085ff

~ brand-deep #005a8a → #0057b3

~ brand-hover #005a8a → #006cd9

~ brand-active #003654 → #0057b3

~ border #dde4eb → #dde1e7

~ border-soft #f0f3f5 → #eef0f3

~ border-strong #007db8 → #bcc1c9

~ shadow-card rgba(0,80,120,0.1) → rgba(0,0,0,0.06)

~ shadow-modal rgba(0,0,0,0.3) → rgba(0,0,0,0.20)

~ success #0a8849 → #2bb673

~ warning #ff9900 → #f9a13e

~ danger #cc0000 → #e84545

~ info #007db8 → #0085ff

+ bg-warm #f8f9fa

+ bg-muted #f1f3f5

+ bg-promo #e8f4ff

+ surface-elevated #ffffff

+ surface-hover #f1f3f5

+ text-muted #5e6772

+ text-on-brand #ffffff

+ text-link-hover #006cd9

+ 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-popover rgba(0,0,0,0.12)

+ success-soft #e0f6ec

+ warning-soft #fff3e0

+ danger-soft #fdebeb

+ info-soft #e8f4ff

− bg-soft #f9f9f9

− bg-cool #f0f3f5

− bg-deep #0a0a0a

− bg-alienware #000000

− surface-cool #f0f3f5

− surface-input #ffffff

− text-faint #767676

− text-on-dark #ffffff

− brand-light #1399d6

− brand-darkest #003654

− brand-gradient linear-gradient(135deg, #007db8 0%, #005a8a 100%)

− brand-emc-purple #5d3fd3

− alienware-blue #00d6ff

− alienware-glow rgba(0,214,255,0.5)

− cta-primary #007db8

− cta-primary-hover #005a8a

− cta-customize #007db8

− link-default #007db8

− link-visited #007db8

− link-hover #005a8a

− scrim rgba(0,0,0,0.5)

− shadow-soft rgba(0,80,120,0.06)

− shadow-elev rgba(0,80,120,0.15)

− badge-new #007db8

− badge-sale #cc0000

− badge-deal #cc0000

− badge-rebate #0a8849

− badge-trade-in #5d3fd3

− badge-energy-star #1d4f9e

− price #0a0a0a

− price-strikethrough #767676

− price-discount #cc0000

− rating-star #ffaa00

typography 1 changed

~ body {"family":"Inter","size":16} → {"family":"Inter","size":15}

radius 2 changed

~ button 8px → 6px

~ card 12px → 8px

spacing identical

No differences.

↻ Swap direction · Bluesky → Dell