Diff

X vs HashiCorp

76 token-level differences between these two design systems.

Role tokens

Background

#000000 → #000000

Text

#e7e9ea → #ffffff

Brand

#c6f432 → #000000

Border

#2f3336 → #3b3d45

Display font

TwitterChirp → hashicorpSans

Body size

15px → 16px

colors 65 changed

~ surface #16181c → #15181e

~ surface-elevated #202327 → #1f232b

~ text #e7e9ea → #ffffff

~ text-body #e7e9ea → #b2b6bd

~ text-muted #71767b → #656a76

~ link #1d9bf0 → #2b89ff

~ border #2f3336 → #3b3d45

~ border-strong #536471 → #3b3d45

~ shadow-color rgba(255,255,255,0.04) → rgba(0,0,0,0.6)

~ success #00ba7c → #00ca8e

~ warning #fab421 → #ffcf25

~ danger #f4212e → #e62b1e

~ info #1d9bf0 → #2b89ff

+ surface-strong #3b3d45

+ surface-inverse #ffffff

+ text-inverse #000000

+ brand #000000

+ link-visited #a737ff

+ border-soft #252830

+ shadow-glow-purple rgba(123,66,188,0.2)

+ product-terraform #7b42bc

+ product-terraform-bright #911ced

+ product-vault #ffcf25

+ product-consul #e62b1e

+ product-waypoint #14c6cb

+ product-waypoint-deep #12b6bb

+ product-vagrant #1868f2

+ product-nomad #00ca8e

+ product-boundary #f24c53

+ amber-100 #fbeabf

+ amber-200 #bb5a00

+ blue-deep #101a59

− bg-light #ffffff

− bg-dim #15202b

− surface-hover #1c1f23

− surface-soft #0d0d0e

− text-strong #ffffff

− text-soft #536471

− text-faint #3e4a55

− text-on-brand #ffffff

− text-on-white #0f1419

− brand-blue #1d9bf0

− brand-blue-hover #1a8cd8

− brand-blue-deep #1573b8

− brand-blue-soft rgba(29,155,240,0.1)

− primary-action #ffffff

− primary-action-hover #d7dbdc

− secondary-action #000000

− link-hover #1a8cd8

− border-subtle #16181c

− on-bg #e7e9ea

− reply-icon #71767b

− reply-active #1d9bf0

− retweet-icon #71767b

− retweet-active #00ba7c

− like-icon #71767b

− like-active #f91880

− share-icon #71767b

− bookmark-icon #71767b

− bookmark-active #1d9bf0

− verified-blue #1d9bf0

− verified-gold #fab421

− verified-grey #829aab

− premium-gold #fab421

− views-meta #71767b

typography 5 changed

~ display {"family":"TwitterChirp","size":60} → {"family":"hashicorpSans","size":72}

~ h1 {"family":"TwitterChirp","size":40} → {"family":"hashicorpSans","size":40}

~ h2 {"family":"TwitterChirp","size":32} → {"family":"hashicorpSans","size":32}

~ body {"family":"TwitterChirp","size":15} → {"family":"hashicorpSans","size":16}

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

radius 2 changed

~ button 12px → 8px

~ card 16px → 12px

spacing 4 changed

~ xs 4px → 1px

~ sm 8px → 4px

~ md 16px → 12px

~ xl 48px → 64px

↻ Swap direction · HashiCorp → X