Diff

Ghost vs tldraw

65 token-level differences between these two design systems.

Role tokens
Background
#fff8ed #f8f9fa
Text
#15171a #1d1d1d
Brand
#30cf43 #3182ed
Border
#e5e1d6 #0000001a
Display font
Inter Inter
Body size
17px 16px
colors 55 changed
~ bg #fff8ed #f8f9fa
~ surface #f4f3ef #ffffff
~ surface-soft #faf8f3 #f1f3f5
~ text #15171a #1d1d1d
~ text-strong #0b0c0e #101010
~ text-muted #54595f #5c5c5c
~ text-soft #7c8087 #8b8b8b
~ text-faint #a4a8af #bababa
~ brand #30cf43 #3182ed
~ brand-hover #26b337 #2870d6
~ brand-active #1f9b2f #1f5db8
~ brand-soft #e5fae8 #dbeafe
~ accent-blue #3b73ff #bfdbfe
~ border #e5e1d6 #0000001a
~ border-strong #d6d0bf #00000033
~ border-soft #f0ece1 #0000000d
~ success #30cf43 #16a34a
~ success-bg #e5fae8 #dcfce7
~ warning #f59e0b #d97706
~ danger #e63946 #dc2626
~ danger-bg #fde2e4 #fee2e2
~ info #3b73ff #3182ed
~ info-bg #e3ecff #dbeafe
+ bg-canvas #fdfdfd
+ bg-soft #ffffff
+ surface-hover #e9ecef
+ surface-selected #dee2e6
+ text-display #1d1d1d
+ text-on-pastel #1d1d1d
+ brand-faint #eff6ff
+ link #3182ed
+ accent-yellow #fde68a
+ accent-yellow-deep #fcd34d
+ accent-pink #fbcfe8
+ accent-pink-deep #f9a8d4
+ accent-green #bbf7d0
+ accent-green-deep #86efac
+ accent-blue-deep #93c5fd
+ accent-purple #ddd6fe
+ accent-orange #fed7aa
+ grid-dot #0000001a
+ grid-dot-soft #0000000d
bg-alt #ffffff
bg-cream-deep #fef0d9
surface-2 #ebe9e0
surface-3 #e0ddd1
surface-warm #fff5e1
text-on-dark #fff8ed
accent #ff1a75
accent-soft #ffe7f0
accent-deep #cc1561
accent-blue-soft #e3ecff
border-focus #30cf43
bg-dark #15171a
surface-dark #1d1f23
typography 3 changed
~ h1 {"family":"Inter","size":44} {"family":"Inter","size":48}
~ body {"family":"Inter","size":17} {"family":"Inter","size":16}
~ label {"family":"JetBrains Mono","size":14} {"family":"Berkeley Mono","size":12}
radius 2 changed
~ button 6px 10px
~ card 24px 16px
spacing 5 changed
~ xs 0px 1px
~ sm 4px 2px
~ md 12px 6px
~ lg 24px 12px
~ xl 40px 20px
↻ Swap direction · tldraw → Ghost