Diff

Glean vs ClassPass

46 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #fffaf6

Text

#333333 → #1a1a1a

Brand

#343ced → #ec5e8a

Border

#e6e6ea → #e8d8c8

Display font

PolySans Neutral → GT America

Body size

16px → 16px

colors 38 changed

~ bg #ffffff → #fffaf6

~ surface #f5f5f7 → #ffffff

~ surface-soft #fafafa → #fdf8f2

~ text #333333 → #1a1a1a

~ text-muted #6b6b73 → #5a5a5a

~ text-faint #9a9aa2 → #bcbcbc

~ brand #343ced → #ec5e8a

~ brand-hover #2a31cc → #d44872

~ brand-soft #ebecff → #f8c4d1

~ brand-deep #29246a → #982a48

~ border #e6e6ea → #e8d8c8

~ border-strong #d2d2d8 → #c8b6a4

~ success #058a5e → #3da568

~ warning #9a6b00 → #cc8800

~ danger #b42318 → #c4313a

~ info #343ced → #ec5e8a

+ 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

− text-heading #0a0227

− brand-sampled #343bed

− success-bg #e6f5ee

− warning-bg #fbf2dc

− danger-bg #fdeceb

− info-bg #ebecff

typography 4 changed

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

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

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

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

radius 2 changed

~ button 8px → 12px

~ card 12px → 16px

spacing 2 changed

~ lg 32px → 24px

~ xl 64px → 40px

↻ Swap direction · ClassPass → Glean