Diff

ASUS vs Udemy

96 token-level differences between these two design systems.

Role tokens

Background

#0a0a0a → #ffffff

Text

#ffffff → #1c1d1f

Brand

#c6f432 → #a435f0

Border

#2a2a2a → #d1d7dc

Display font

Saira → Udemy Sans

Body size

16px → 16px

colors 91 changed

~ bg #0a0a0a → #ffffff

~ bg-deep #1a1a1a → #1c1d1f

~ surface #141414 → #ffffff

~ surface-soft #1f1f1f → #faf9fc

~ surface-strong #2a2a2a → #e7e9eb

~ surface-elevated #1a1a1a → #ffffff

~ text #ffffff → #1c1d1f

~ text-strong #ffffff → #000000

~ text-soft #a8a8a8 → #8b8d92

~ text-disabled #4a4a4a → #a8aaae

~ text-link #cd0000 → #5624d0

~ border #2a2a2a → #d1d7dc

~ border-soft #1a1a1a → #e9ebee

~ border-strong #cd0000 → #9b9fa3

~ shadow-card rgba(0,0,0,0.6) → rgba(0,0,0,0.10)

~ rating-star #ffd700 → #f69c08

~ success #00b050 → #1c8c2e

~ warning #ffd700 → #f4951f

~ danger #cd0000 → #cc0c39

~ info #0073e6 → #5624d0

+ bg-warm #f7f9fa

+ bg-muted #f3f4f6

+ bg-promo #f3eaff

+ bg-sale #fef2cd

+ surface-hover #f7f9fa

+ surface-dark #2d2f31

+ text-muted #6a6f73

+ text-on-brand #ffffff

+ text-on-dark #ffffff

+ text-link-hover #401b9c

+ brand #a435f0

+ brand-hover #8710d8

+ brand-active #6d28d9

+ brand-soft #f3eaff

+ brand-deep #5624d0

+ accent-yellow #f69c08

+ accent-yellow-bg #eceb98

+ accent-orange #f3ca8c

+ accent-red #cc0c39

+ accent-green #1c8c2e

+ accent-blue #3268bd

+ border-focus #5624d0

+ rating-star-empty #d1d7dc

+ badge-bestseller #eceb98

+ badge-bestseller-text #3d3c0a

+ badge-hot #f3ca8c

+ badge-hot-text #3d2305

+ price-current #1c1d1f

+ price-original #6a6f73

+ shadow-modal rgba(0,0,0,0.24)

+ shadow-popover rgba(0,0,0,0.16)

+ success-soft #e6f2e8

+ warning-soft #fff5db

+ danger-soft #fbeaea

+ info-soft #f3eaff

− bg-pure #000000

− bg-zenbook #ffffff

− bg-zenbook-soft #f5f5f5

− surface-product-band #000000

− surface-input #1f1f1f

− text-faint #6e6e6e

− text-on-light #0a0a0a

− brand-rog #cd0000

− brand-rog-bright #ff1a1a

− brand-rog-deep #8b0000

− brand-rog-glow rgba(205,0,0,0.5)

− brand-rog-gradient linear-gradient(135deg, #ff1a1a 0%, #cd0000 50%, #8b0000 100%)

− brand-tuf-yellow #ffd700

− brand-tuf-deep #b8860b

− brand-asus-blue #003a78

− brand-asus-blue-bright #0073e6

− brand-zenbook #3b3a36

− brand-proart #1a1a1a

− brand-rog-strix #ff1a1a

− cta-primary #cd0000

− cta-primary-hover #ff1a1a

− cta-zenbook #0a0a0a

− link-default #cd0000

− link-visited #cd0000

− link-hover #ffffff

− border-zenbook #e0e0e0

− scrim rgba(0,0,0,0.85)

− shadow-elev rgba(0,0,0,0.8)

− shadow-rog-glow rgba(205,0,0,0.4)

− badge-new #cd0000

− badge-rog #cd0000

− badge-tuf #ffd700

− badge-pre-order #ff1a1a

− badge-out-of-stock #6e6e6e

− price #ffffff

− price-discount #cd0000

typography 4 changed

~ display {"family":"Saira","size":80} → {"family":"Udemy Sans","size":56}

~ h1 {"family":"Saira","size":40} → {"family":"Udemy Sans","size":40}

~ h2 {"family":"Saira","size":32} → {"family":"Udemy Sans","size":32}

~ body {"family":"Saira","size":16} → {"family":"Udemy Sans","size":16}

radius 1 changed

~ button 4px → 6px

spacing identical

No differences.

↻ Swap direction · Udemy → ASUS