Diff

Quizlet vs JetBlue

36 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #ffffff

Text

#282d49 → #1a1a1a

Brand

#4257b2 → #0033a0

Border

#e1e3ee → #dee2e8

Display font

Hurmes Geometric → JetBlue Sans

Body size

16px → 16px

colors 32 changed

~ bg-soft #f6f7fb → #f5f7fa

~ bg-warm #fff8f0 → #fffaf6

~ surface-strong #f0f2f9 → #f0f4f9

~ brand #4257b2 → #0033a0

~ brand-hover #374a99 → #002a82

~ brand-pressed #2a3a78 → #001f63

~ brand-deep #0a3370 → #001548

~ brand-tint #e8ebf7 → #e6ecf5

~ brand-soft #cdd4ed → #cbd6ea

~ text #282d49 → #1a1a1a

~ text-strong #0a3370 → #0033a0

~ text-muted #5a6075 → #5a5a5a

~ text-soft #8b8fa3 → #8a8a8a

~ text-faint #bcbfc9 → #bcbcbc

~ link #4257b2 → #0033a0

~ link-hover #2a3a78 → #ff6633

~ selected-bg #e8ebf7 → #e6ecf5

~ border #e1e3ee → #dee2e8

~ border-strong #c4c8d9 → #bcc2cc

~ border-soft #eef0f5 → #eaedf2

~ border-brand #4257b2 → #0033a0

~ success #3da568 → #1a8757

~ warning #f0a020 → #cc8800

~ danger #e0394f → #c4313a

~ info #4257b2 → #0033a0

+ mint-orange #ff6633

+ mint-orange-deep #d8501f

+ mint-orange-soft #ffe9df

+ trueblue-mosaic #0033a0

+ trueblue-mint #ff6633

− yellow #ffcc00

− yellow-soft #fff7d6

typography 4 changed

~ display {"family":"Hurmes Geometric","size":64} → {"family":"JetBlue Sans","size":64}

~ h1 {"family":"Hurmes Geometric","size":36} → {"family":"JetBlue Sans","size":36}

~ h2 {"family":"Hurmes Geometric","size":28} → {"family":"JetBlue Sans","size":28}

~ body {"family":"Hurmes Geometric","size":16} → {"family":"JetBlue Sans","size":16}

radius identical

No differences.

spacing identical

No differences.

↻ Swap direction · JetBlue → Quizlet