Diff

JetBlue vs Klarna

63 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#1a1a1a #0b051d
Brand
#0033a0 #ffa8cd
Border
#dee2e8 #e4e2e8
Display font
JetBlue Sans Klarna Title
Body size
16px 16px
colors 52 changed
~ bg-soft #f5f7fa #f7f7f8
~ surface #ffffff #0b051d
~ brand #0033a0 #ffa8cd
~ brand-deep #001548 #eb6f9e
~ brand-soft #cbd6ea #ffe2ee
~ on-brand #ffffff #0b051d
~ text #1a1a1a #0b051d
~ text-muted #5a5a5a #4a4458
~ link #0033a0 #0b051d
~ link-hover #ff6633 #eb6f9e
~ border #dee2e8 #e4e2e8
~ border-strong #bcc2cc #0b051d
+ bg-pink-wash #fff0f6
+ surface-card #0b051d
+ surface-light #ffffff
+ text-on-dark #ffffff
+ text-subtle #76707f
+ brand-strong #ffb3c7
+ cta-dark #0b051d
+ cta-dark-hover #1c1430
+ on-cta-dark #ffffff
+ border-pink #ffa8cd
+ semantic-success #1f8a4c
+ semantic-warning #b8740f
+ semantic-danger #d23c3c
+ semantic-info #0b051d
+ focus-ring #0b051d
+ shadow-ambient rgba(11, 5, 29, 0.06)
+ shadow-soft rgba(11, 5, 29, 0.10)
+ shadow-strong rgba(11, 5, 29, 0.16)
bg-warm #fffaf6
surface-soft #fafbfd
surface-strong #f0f4f9
brand-hover #002a82
brand-pressed #001f63
brand-tint #e6ecf5
mint-orange #ff6633
mint-orange-deep #d8501f
mint-orange-soft #ffe9df
text-strong #0033a0
text-soft #8a8a8a
text-faint #bcbcbc
text-on-brand #ffffff
selected-bg #e6ecf5
border-soft #eaedf2
border-brand #0033a0
trueblue-mosaic #0033a0
trueblue-mint #ff6633
success #1a8757
warning #cc8800
danger #c4313a
info #0033a0
typography 4 changed
~ display {"family":"JetBlue Sans","size":64} {"family":"Klarna Title","size":96}
~ h1 {"family":"JetBlue Sans","size":36} {"family":"Klarna Title","size":56}
~ h2 {"family":"JetBlue Sans","size":28} {"family":"Klarna Title","size":40}
~ body {"family":"JetBlue Sans","size":16} {"family":"Klarna Title","size":16}
radius 2 changed
~ button 12px 8px
~ card 16px 24px
spacing 5 changed
~ xs 0px 4px
~ sm 4px 8px
~ md 12px 16px
~ lg 24px 32px
~ xl 40px 64px
↻ Swap direction · Klarna → JetBlue