Diff

Dell vs HP

60 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #ffffff

Text

#0a0a0a → #1c1c1c

Brand

#007db8 → #0096d6

Border

#dde4eb → #e0e6ed

Display font

Inter → Forma DJR Display

Body size

16px → 16px

colors 54 changed

~ bg-soft #f9f9f9 → #f7f7f7

~ bg-cool #f0f3f5 → #f0f4f8

~ bg-deep #0a0a0a → #1c1c1c

~ surface-soft #f9f9f9 → #f7f7f7

~ surface-cool #f0f3f5 → #f0f4f8

~ surface-strong #dde4eb → #e0e6ed

~ text #0a0a0a → #1c1c1c

~ text-soft #444444 → #5d6770

~ text-faint #767676 → #8a939d

~ text-disabled #a8b0b8 → #b8c0c8

~ text-link #007db8 → #0096d6

~ brand #007db8 → #0096d6

~ brand-light #1399d6 → #33acdd

~ brand-deep #005a8a → #005d83

~ brand-darkest #003654 → #002d4c

~ brand-hover #005a8a → #0080b8

~ brand-active #003654 → #005d83

~ brand-gradient linear-gradient(135deg, #007db8 0%, #005a8a 100%) → linear-gradient(135deg, #0096d6 0%, #005d83 100%)

~ cta-primary #007db8 → #0096d6

~ cta-primary-hover #005a8a → #0080b8

~ link-default #007db8 → #0096d6

~ link-visited #007db8 → #0096d6

~ link-hover #005a8a → #0080b8

~ border #dde4eb → #e0e6ed

~ border-soft #f0f3f5 → #f0f4f8

~ border-strong #007db8 → #0096d6

~ shadow-soft rgba(0,80,120,0.06) → rgba(0,90,150,0.06)

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

~ shadow-elev rgba(0,80,120,0.15) → rgba(0,90,150,0.15)

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

~ badge-new #007db8 → #0096d6

~ badge-deal #cc0000 → #e60000

~ price #0a0a0a → #1c1c1c

~ price-strikethrough #767676 → #8a939d

~ price-discount #cc0000 → #e60000

~ rating-star #ffaa00 → #ff9500

~ success #0a8849 → #2d8659

~ warning #ff9900 → #ff9500

~ danger #cc0000 → #e60000

~ info #007db8 → #0096d6

+ bg-omen #000000

+ omen-red #e60000

+ omen-red-hover #c40000

+ omen-deep #1c1c1c

+ z-charcoal #3c4148

+ badge-eco #2d8659

− bg-alienware #000000

− brand-emc-purple #5d3fd3

− alienware-blue #00d6ff

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

− cta-customize #007db8

− badge-sale #cc0000

− badge-rebate #0a8849

− badge-trade-in #5d3fd3

typography 5 changed

~ display {"family":"Inter","size":56} → {"family":"Forma DJR Display","size":64}

~ h1 {"family":"Inter","size":40} → {"family":"Forma DJR Display","size":40}

~ h2 {"family":"Inter","size":32} → {"family":"Forma DJR Display","size":32}

~ body {"family":"Inter","size":16} → {"family":"Forma DJR Text","size":16}

~ label {"family":"Roboto Mono","size":11} → {"family":"JetBrains Mono","size":11}

radius 1 changed

~ button 8px → 6px

spacing identical

No differences.

↻ Swap direction · HP → Dell