Diff

Captions vs Magic

65 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#1d1f20 #1c2024
Brand
#6c4df7 #0090ff
Border
#dfe5e7 #e8e8ec
Display font
Exposure Aeonik
Body size
16px 16px
colors 59 changed
~ surface #eef4f6 #ffffff
~ text #1d1f20 #1c2024
~ text-strong #141515 #1c2024
~ text-muted #595e5e #60646c
~ text-faint #9fa5a7 #80838d
~ text-disabled #bec3c6 #8b8d98
~ brand #6c4df7 #0090ff
~ link #6c4df7 #0d74ce
~ link-hover #160f31 #0090ff
~ border #dfe5e7 #e8e8ec
~ border-strong #d0d6d7 #d9d9e0
+ surface-soft #fcfcfd
+ surface-muted #f9f9fb
+ text-body #2c2d2f
+ brand-hover #0586f0
+ brand-strong #0d74ce
+ brand-ink #113264
+ border-soft #f0f0f3
+ border-translucent rgba(0, 8, 48, 0.094)
+ diff-insert-bg #ecfdee
+ diff-delete-bg #feeced
+ diff-delete-surface #fcf7f8
+ success #2c8849
+ warning #bb6a00
+ danger #c62a44
+ info #0090ff
+ shadow-tint rgba(0, 5, 9, 0.06)
bg-cool #f5f9fa
surface-100 #e8eff2
surface-150 #dfe5e7
text-h1 #2a2c2d
text-soft #7e8486
brand-purple #ab88fb
brand-dark #160f31
accent-sea #00d0ff
accent-sky #a6ecff
accent-air #effbff
accent-sunset #f99f3f
accent-peach #ffca9f
accent-cloud #ffcfcf
accent-barbie-pink #ff1476
accent-pink #ff9bb2
accent-meadow #5bf6bb
accent-green #46e7b4
accent-lime #aaff4e
accent-yellow #fcff41
accent-mustard #ffdd33
cta-chrome-bg #eef4f6
cta-tile-bg #f5f9fa
border-subtle #e8eff2
border-brand rgba(108, 77, 247, 0.32)
success-bg #ebfdf2
success-text #0e663b
info-bg #eff7ff
info-text #00b7e4
warning-bg #fffcef
warning-text #e07300
danger-bg #fff0f0
danger-text #d00000
typography 4 changed
~ display {"family":"Exposure","size":80} {"family":"Aeonik","size":64}
~ h1 {"family":"Exposure","size":48} {"family":"Aeonik","size":46}
~ h2 {"family":"Exposure","size":32} {"family":"Aeonik","size":34}
~ body {"family":"DenimINK","size":16} {"family":"Suisse Intl","size":16}
radius 2 changed
~ button 8px 6px
~ card 12px 8px
spacing identical
No differences.
↻ Swap direction · Magic → Captions