Diff

Delta Air Lines vs Descript

63 token-level differences between these two design systems.

Role tokens
Background
#fafafa #fff7fa
Text
#1a1a1a #1a1a1a
Brand
#003366 #651a39
Border
#d8dce0 #0000001a
Display font
Whitney Brett
Body size
16px 17px
colors 52 changed
~ bg #fafafa #fff7fa
~ bg-soft #f4f5f7 #fffafc
~ brand #003366 #651a39
~ brand-hover #002952 #4a1129
~ brand-deep #001428 #3a0d20
~ brand-tint #e6ebf2 #f5cdda
~ brand-soft #cbd5e0 #fde2eb
~ text-strong #003366 #26171d
~ text-muted #5a5a5a #c9b9bf
~ text-soft #8a8a8a #7a6770
~ text-faint #bcbcbc #a8949c
~ link #003366 #651a39
~ link-hover #e01933 #4a1129
~ selected-bg #e6ebf2 #fde2eb
~ border #d8dce0 #0000001a
~ border-strong #b8bdc4 #00000026
~ border-brand #003366 rgba(101, 26, 57, 0.30)
+ bg-tertiary #fef0f4
+ surface-rose #f7e8ed
+ text-medium #4a3540
+ accent-red #f73b3b
+ accent-orange #ff5340
+ accent-orange-soft #ffd6cc
+ accent-coral #ff7a5c
+ accent-rose #ff4d7c
+ disabled #c9b9bf
+ border-subtle #00000010
+ success-bg #d9eedb
+ success-text #1f4d2c
+ warning-bg #fff0d6
+ warning-text #7a4a00
+ danger-bg #fde2eb
+ danger-text #651a39
+ info-bg #e6e8f5
+ info-text #2a2a4a
bg-warm #faf9f6
surface-soft #fafbfc
surface-strong #f0f2f5
brand-pressed #001f3d
red #e01933
red-deep #b8132a
red-soft #ffe5e8
text-on-brand #ffffff
border-soft #eaecf0
diamond-tier #3b3540
platinum-tier #737a82
gold-tier #b08a4a
silver-tier #a0a4a8
success #1d8049
warning #cc8800
danger #e01933
info #003366
typography 5 changed
~ display {"family":"Whitney","size":64} {"family":"Brett","size":96}
~ h1 {"family":"Whitney","size":36} {"family":"Brett","size":72}
~ h2 {"family":"Whitney","size":28} {"family":"Brett","size":48}
~ body {"family":"Whitney","size":16} {"family":"Booton","size":17}
~ label {"family":"SFMono-Regular","size":13} {"family":"JetBrains Mono","size":12}
radius 2 changed
~ button 6px 12px
~ card 8px 16px
spacing 4 changed
~ xs 0px 1px
~ sm 4px 2px
~ md 12px 8px
~ xl 40px 48px
↻ Swap direction · Descript → Delta Air Lines