Diff

ElevenLabs vs ASUS

87 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #0a0a0a

Text

#0a0a0a → #ffffff

Brand

#9fe870 → #c6f432

Border

#0000001a → #2a2a2a

Display font

InterDisplay → Saira

Body size

16px → 16px

colors 75 changed

~ bg #ffffff → #0a0a0a

~ surface #ffffff → #141414

~ surface-soft #fafafa → #1f1f1f

~ text #0a0a0a → #ffffff

~ text-strong #000000 → #ffffff

~ text-soft #737373 → #a8a8a8

~ text-faint #a3a3a3 → #6e6e6e

~ border #0000001a → #2a2a2a

~ border-soft #0000000d → #1a1a1a

~ border-strong #00000033 → #cd0000

~ on-brand #0a0a0a → #ffffff

~ success #16a34a → #00b050

~ warning #d97706 → #ffd700

~ danger #dc2626 → #cd0000

~ info #0a0a0a → #0073e6

+ bg-pure #000000

+ bg-deep #1a1a1a

+ bg-zenbook #ffffff

+ bg-zenbook-soft #f5f5f5

+ surface-strong #2a2a2a

+ surface-elevated #1a1a1a

+ surface-product-band #000000

+ surface-input #1f1f1f

+ text-disabled #4a4a4a

+ text-on-light #0a0a0a

+ text-link #cd0000

+ 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-card rgba(0,0,0,0.6)

+ 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

+ rating-star #ffd700

− bg-soft #fafafa

− bg-band #f5f5f4

− surface-hover #f5f5f4

− text-display #0a0a0a

− text-muted #525252

− text-on-brand #0a0a0a

− brand #9fe870

− brand-hover #8ad65e

− brand-active #76c349

− brand-soft #d4f0c2

− brand-faint #e2f6d5

− link #0a0a0a

− accent #0e0f0c

− accent-warm #f5f5f4

− success-bg #dcfce7

− warning-bg #fef3c7

− danger-bg #fee2e2

− info-bg #f5f5f4

typography 5 changed

~ display {"family":"InterDisplay","size":128} → {"family":"Saira","size":80}

~ h1 {"family":"InterDisplay","size":64} → {"family":"Saira","size":40}

~ h2 {"family":"InterDisplay","size":48} → {"family":"Saira","size":32}

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

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

radius 2 changed

~ button 8px → 4px

~ card 16px → 8px

spacing 5 changed

~ xs 1px → 4px

~ sm 2px → 8px

~ md 6px → 16px

~ lg 16px → 32px

~ xl 24px → 48px

↻ Swap direction · ASUS → ElevenLabs