Diff

Excalidraw vs Are.na

57 token-level differences between these two design systems.

Role tokens
Background
#fffefd #fafafa
Text
#1b1b1f #000000
Brand
#6965db #ff6600
Border
#1b1b1f1a #dddddd
Display font
Excalifont Inter
Body size
16px 14px
colors 49 changed
~ bg #fffefd #fafafa
~ bg-warm #fdf6e3 #f6f5f3
~ surface #ffffff #f1f1f1
~ surface-hover #f5f5f5 #e8e8e8
~ text #1b1b1f #000000
~ text-strong #0f0f12 #000000
~ text-display #1b1b1f #000000
~ text-muted #5b5b5b #666666
~ text-soft #8a8a8a #999999
~ text-faint #bababa #bbbbbb
~ brand #6965db #ff6600
~ brand-hover #5651c5 #e85a00
~ brand-active #443fa3 #cc4f00
~ brand-soft #e8e7fb #fff1e6
~ brand-faint #f3f2fd #fff8f1
~ link #6965db #ff6600
~ border #1b1b1f1a #dddddd
~ border-strong #1b1b1f33 #999999
~ border-soft #1b1b1f0d #eeeeee
~ success #16a34a #2d6a4f
~ success-bg #dcfce7 #e8f0eb
~ warning #d97706 #7a5300
~ warning-bg #fef3c7 #f5ebd6
~ danger #dc2626 #8b1a1a
~ danger-bg #fee2e2 #f3e0e0
~ info #6965db #666666
~ info-bg #e8e7fb #f1f1f1
+ bg-alt #ffffff
+ surface-deep #e0e0e0
+ surface-block #ffffff
+ link-visited #cc4f00
bg-canvas #ffffff
bg-paper #fafafa
surface-soft #fafafa
surface-warm #f5f0e0
surface-soft-warm #fdfaf2
text-on-pastel #1b1b1f
accent-yellow #ffe066
accent-yellow-deep #fad434
accent-pink #ffadad
accent-pink-deep #ff8888
accent-green #9be7c4
accent-green-deep #6fd29f
accent-blue #bde0fe
accent-blue-deep #92c8fa
accent-orange #ffb997
accent-orange-deep #ff9970
accent-purple #d4c5f9
border-hand #1b1b1f
typography 5 changed
~ display {"family":"Excalifont","size":64} {"family":"Inter","size":40}
~ h1 {"family":"Excalifont","size":40} {"family":"Inter","size":32}
~ h2 {"family":"Excalifont","size":32} {"family":"Inter","size":24}
~ body {"family":"Assistant","size":16} {"family":"Inter","size":14}
~ label {"family":"Cascadia Code","size":12} {"family":"JetBrains Mono","size":12}
radius 3 changed
~ button 6px 0px
~ card 8px 0px
~ pill 9999px 0px
spacing identical
No differences.
↻ Swap direction · Are.na → Excalidraw