Diff

Graphite vs ASUS

90 token-level differences between these two design systems.

Role tokens

Background

#070707 → #0a0a0a

Text

#fafafa → #ffffff

Brand

#3b82f6 → #c6f432

Border

#1f1f1f → #2a2a2a

Display font

matterFont → Saira

Body size

16px → 16px

colors 79 changed

~ bg #070707 → #0a0a0a

~ surface #0f0f0f → #141414

~ surface-strong #171717 → #2a2a2a

~ text #fafafa → #ffffff

~ text-disabled #525252 → #4a4a4a

~ link-hover #93c5fd → #ffffff

~ border #1f1f1f → #2a2a2a

~ border-strong #2e2e2e → #cd0000

~ success #22c55e → #00b050

~ warning #f59e0b → #ffd700

~ danger #ef4444 → #cd0000

~ info #3b82f6 → #0073e6

+ bg-pure #000000

+ bg-deep #1a1a1a

+ bg-zenbook #ffffff

+ bg-zenbook-soft #f5f5f5

+ surface-soft #1f1f1f

+ surface-elevated #1a1a1a

+ surface-product-band #000000

+ surface-input #1f1f1f

+ text-soft #a8a8a8

+ text-faint #6e6e6e

+ 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

+ 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

− bg-level-1 #0f0f0f

− bg-level-2 #171717

− bg-level-3 #1f1f1f

− bg-overlay rgba(7,7,7,0.72)

− surface-tinted-brand rgba(59,130,246,0.08)

− text-secondary #d4d4d4

− text-tertiary #a3a3a3

− text-quaternary #737373

− brand #3b82f6

− brand-hover #60a5fa

− brand-press #2f6fed

− brand-soft rgba(59,130,246,0.16)

− accent #60a5fa

− link #60a5fa

− border-subtle rgba(255,255,255,0.06)

− border-brand #3b82f6

− cta-fill #262626

− cta-fill-hover #2e2e2e

− cta-fill-press #1f1f1f

− cta-text #fafafa

− success-bg rgba(34,197,94,0.12)

− warning-bg rgba(245,158,11,0.12)

− danger-bg rgba(239,68,68,0.12)

− info-bg rgba(59,130,246,0.12)

typography 5 changed

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

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

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

~ body {"family":"matterFont","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 → Graphite