Diff

ASUS vs Semafor

100 token-level differences between these two design systems.

Role tokens

Background

#0a0a0a → #f8f5d7

Text

#ffffff → #1f1d1a

Brand

#c6f432 → #3a6d78

Border

#2a2a2a → #d8d0a8

Display font

Saira → FeatureFlatHeadline

Body size

16px → 18px

colors 89 changed

~ bg #0a0a0a → #f8f5d7

~ surface #141414 → #f8f5d7

~ surface-soft #1f1f1f → #f5f1c9

~ surface-strong #2a2a2a → #e8e3b5

~ text #ffffff → #1f1d1a

~ text-strong #ffffff → #000000

~ text-soft #a8a8a8 → #7a756f

~ text-faint #6e6e6e → #a39e96

~ link-visited #cd0000 → #7a756f

~ link-hover #ffffff → #2d5a64

~ border #2a2a2a → #d8d0a8

~ border-soft #1a1a1a → #e8e2c2

~ border-strong #cd0000 → #7a756f

~ scrim rgba(0,0,0,0.85) → rgba(31,29,26,0.6)

~ shadow-card rgba(0,0,0,0.6) → rgba(31,29,26,0.06)

~ shadow-elev rgba(0,0,0,0.8) → rgba(31,29,26,0.1)

~ success #00b050 → #2a8a4f

~ warning #ffd700 → #cc7a00

~ danger #cd0000 → #a62d2d

~ info #0073e6 → #3a6d78

+ bg-section #f8f5d7

+ bg-section-flagship #f8f5d7

+ bg-section-africa #f8f5d7

+ bg-dark #1f1d1a

+ bg-darkest #0d0c0a

+ surface-paper #ffffff

+ surface-quote #fefbe8

+ surface-card-elevated #fcfae0

+ text-muted #5a5651

+ text-on-teal #ffffff

+ text-on-dark #f8f5d7

+ brand #3a6d78

+ brand-hover #2d5a64

+ brand-active #1f4750

+ brand-soft #cce0e4

+ brand-deep #1a3a44

+ link #3a6d78

+ on-dark #f8f5d7

+ border-rule #1f1d1a

+ border-teal #3a6d78

+ shadow-modal rgba(31,29,26,0.3)

+ success-soft #dff0e7

+ warning-soft #fde9cc

+ danger-soft #f0d4d4

+ info-soft #cce0e4

+ flag-flagship #3a6d78

+ flag-africa #c46b3a

+ flag-principals #3a6d78

+ flag-net-zero #2a8a4f

+ flag-tech #5a4a8a

+ flag-business #3a6d78

+ flag-media #a62d2d

+ flag-gulf #c46b3a

− bg-pure #000000

− bg-deep #1a1a1a

− bg-zenbook #ffffff

− bg-zenbook-soft #f5f5f5

− 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

− border-zenbook #e0e0e0

− 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":"FeatureFlatHeadline","size":72}

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

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

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

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

radius 1 changed

~ card 8px → 6px

spacing 5 changed

~ xs 4px → 2px

~ sm 8px → 4px

~ md 16px → 12px

~ lg 32px → 24px

~ xl 48px → 40px

↻ Swap direction · Semafor → ASUS