Diff

Glean vs ASUS

78 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #0a0a0a

Text

#333333 → #ffffff

Brand

#343ced → #c6f432

Border

#e6e6ea → #2a2a2a

Display font

PolySans Neutral → Saira

Body size

16px → 16px

colors 67 changed

~ bg #ffffff → #0a0a0a

~ surface #f5f5f7 → #141414

~ surface-soft #fafafa → #1f1f1f

~ text #333333 → #ffffff

~ text-faint #9a9aa2 → #6e6e6e

~ border #e6e6ea → #2a2a2a

~ border-strong #d2d2d8 → #cd0000

~ success #058a5e → #00b050

~ warning #9a6b00 → #ffd700

~ danger #b42318 → #cd0000

~ info #343ced → #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-strong #ffffff

+ text-soft #a8a8a8

+ 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-soft #1a1a1a

+ 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

− text-heading #0a0227

− text-muted #6b6b73

− brand #343ced

− brand-sampled #343bed

− brand-hover #2a31cc

− brand-soft #ebecff

− brand-deep #29246a

− success-bg #e6f5ee

− warning-bg #fbf2dc

− danger-bg #fdeceb

− info-bg #ebecff

typography 5 changed

~ display {"family":"PolySans Neutral","size":72} → {"family":"Saira","size":80}

~ h1 {"family":"PolySans Neutral","size":56} → {"family":"Saira","size":40}

~ h2 {"family":"PolySans Neutral","size":40} → {"family":"Saira","size":32}

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

~ label {"family":"SFMono-Regular","size":13} → {"family":"Roboto Mono","size":11}

radius 2 changed

~ button 8px → 4px

~ card 12px → 8px

spacing 4 changed

~ xs 0px → 4px

~ sm 4px → 8px

~ md 12px → 16px

~ xl 64px → 48px

↻ Swap direction · ASUS → Glean