Diff

ASUS vs Together AI

99 token-level differences between these two design systems.

Role tokens

Background

#0a0a0a → #fafafa

Text

#ffffff → #0f1f3d

Brand

#c6f432 → #0f1f3d

Border

#2a2a2a → #e5e7eb

Display font

Saira → Inter

Body size

16px → 16px

colors 93 changed

~ bg #0a0a0a → #fafafa

~ bg-pure #000000 → #ffffff

~ surface #141414 → #ffffff

~ surface-soft #1f1f1f → #f9fafb

~ surface-strong #2a2a2a → #e5e7eb

~ surface-elevated #1a1a1a → #ffffff

~ text #ffffff → #0f1f3d

~ text-strong #ffffff → #06091a

~ text-soft #a8a8a8 → #7d839a

~ text-disabled #4a4a4a → #a8aebd

~ text-link #cd0000 → #0070f3

~ border #2a2a2a → #e5e7eb

~ border-soft #1a1a1a → #f0f1f3

~ border-strong #cd0000 → #cbd0d8

~ shadow-card rgba(0,0,0,0.6) → rgba(15,31,61,0.06)

~ success #00b050 → #10b981

~ warning #ffd700 → #f59e0b

~ danger #cd0000 → #ef4444

~ info #0073e6 → #0070f3

+ bg-surface #f4f5f7

+ bg-promo #e7f0ff

+ surface-hover #f4f5f7

+ text-muted #5a627a

+ text-on-brand #ffffff

+ text-link-hover #0058c2

+ brand #0f1f3d

+ brand-hover #1a2d52

+ brand-soft #27314e

+ brand-deep #080f1f

+ accent-blue #0070f3

+ accent-blue-hover #0058c2

+ accent-blue-active #003e8c

+ accent-blue-soft #e7f0ff

+ accent-cyan #00d4ff

+ accent-purple #7c3aed

+ accent-green #10b981

+ accent-orange #f59e0b

+ accent-red #ef4444

+ border-focus #0070f3

+ code-bg-light #f4f5f7

+ code-bg-dark #1a1d29

+ code-text #e5e7eb

+ code-comment #7d839a

+ code-keyword #c084fc

+ code-string #86efac

+ code-function #60a5fa

+ code-variable #fcd34d

+ code-punct #a4adc8

+ code-number #fb923c

+ shadow-modal rgba(15,31,61,0.2)

+ shadow-popover rgba(15,31,61,0.12)

+ shadow-elevated rgba(15,31,61,0.10)

+ success-soft #d1fae5

+ warning-soft #fef3c7

+ danger-soft #fee2e2

+ info-soft #e7f0ff

− bg-deep #1a1a1a

− 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

− rating-star #ffd700

typography 5 changed

~ display {"family":"Saira","size":80} → {"family":"Inter","size":64}

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

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

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

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

radius 1 changed

~ button 4px → 6px

spacing identical

No differences.

↻ Swap direction · Together AI → ASUS