Diff

Kraken vs ASUS

83 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #0a0a0a

Text

#101114 → #ffffff

Brand

#7132f5 → #c6f432

Border

#dedee5 → #2a2a2a

Display font

Kraken-Brand → Saira

Body size

16px → 16px

colors 75 changed

~ bg #ffffff → #0a0a0a

~ text #101114 → #ffffff

~ border #dedee5 → #2a2a2a

~ border-soft rgba(104,107,130,0.24) → #1a1a1a

+ bg-pure #000000

+ bg-deep #1a1a1a

+ bg-zenbook #ffffff

+ bg-zenbook-soft #f5f5f5

+ surface #141414

+ surface-soft #1f1f1f

+ surface-strong #2a2a2a

+ surface-elevated #1a1a1a

+ surface-product-band #000000

+ surface-input #1f1f1f

+ text-strong #ffffff

+ text-soft #a8a8a8

+ text-faint #6e6e6e

+ 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-strong #cd0000

+ 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

+ success #00b050

+ warning #ffd700

+ danger #cd0000

+ info #0073e6

− bg-soft #fafafa

− bg-card #ffffff

− bg-dark #101114

− surface-cool rgba(148,151,169,0.08)

− surface-purple-subtle rgba(133,91,251,0.16)

− text-body #33363f

− text-muted #9497a9

− text-mute-strong #686b82

− text-mute-soft #484b5e

− brand #7132f5

− brand-dark #5741d8

− brand-deep #5b1ecf

− brand-subtle rgba(133,91,251,0.16)

− semantic-success #149e61

− semantic-success-dark #026b3f

− semantic-success-bg rgba(20,158,97,0.16)

− semantic-error #e23b4a

− semantic-warning #df6500

− focus-ring rgba(113,50,245,0.30)

typography 5 changed

~ display {"family":"Kraken-Brand","size":48} → {"family":"Saira","size":80}

~ h1 {"family":"Kraken-Brand","size":40} → {"family":"Saira","size":40}

~ h2 {"family":"Kraken-Brand","size":32} → {"family":"Saira","size":32}

~ body {"family":"Kraken-Product","size":16} → {"family":"Saira","size":16}

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

radius 2 changed

~ button 8px → 4px

~ card 12px → 8px

spacing 1 changed

~ xl 64px → 48px

↻ Swap direction · ASUS → Kraken