Diff

ClassPass vs Glean

46 token-level differences between these two design systems.

Role tokens

Background

#fffaf6 → #ffffff

Text

#1a1a1a → #333333

Brand

#ec5e8a → #343ced

Border

#e8d8c8 → #e6e6ea

Display font

GT America → PolySans Neutral

Body size

16px → 16px

colors 38 changed

~ bg #fffaf6 → #ffffff

~ surface #ffffff → #f5f5f7

~ surface-soft #fdf8f2 → #fafafa

~ brand #ec5e8a → #343ced

~ brand-hover #d44872 → #2a31cc

~ brand-deep #982a48 → #29246a

~ brand-soft #f8c4d1 → #ebecff

~ text #1a1a1a → #333333

~ text-muted #5a5a5a → #6b6b73

~ text-faint #bcbcbc → #9a9aa2

~ border #e8d8c8 → #e6e6ea

~ border-strong #c8b6a4 → #d2d2d8

~ success #3da568 → #058a5e

~ warning #cc8800 → #9a6b00

~ danger #c4313a → #b42318

~ info #ec5e8a → #343ced

+ text-heading #0a0227

+ brand-sampled #343bed

+ success-bg #e6f5ee

+ warning-bg #fbf2dc

+ danger-bg #fdeceb

+ info-bg #ebecff

− bg-soft #fef4eb

− bg-warm #fdebdb

− surface-cream #fbf2e7

− brand-pressed #b8385d

− brand-tint #fde0ea

− text-strong #000000

− text-soft #8a8a8a

− text-on-brand #ffffff

− link #ec5e8a

− link-hover #b8385d

− selected-bg #fde0ea

− border-soft #f0e6d8

− border-brand #ec5e8a

− yoga-purple #9b6dd4

− pilates-mint #5dd4b8

− hiit-orange #ff7e3f

typography 4 changed

~ display {"family":"GT America","size":72} → {"family":"PolySans Neutral","size":72}

~ h1 {"family":"GT America","size":36} → {"family":"PolySans Neutral","size":56}

~ h2 {"family":"GT America","size":28} → {"family":"PolySans Neutral","size":40}

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

radius 2 changed

~ button 12px → 8px

~ card 16px → 12px

spacing 2 changed

~ lg 24px → 32px

~ xl 40px → 64px

↻ Swap direction · Glean → ClassPass