Diff

Notion vs tldraw

57 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #f8f9fa

Text

#000000e6 → #1d1d1d

Brand

#0075de → #3182ed

Border

#0000001a → #0000001a

Display font

NotionInter → Inter

Body size

16px → 16px

colors 50 changed

~ bg #ffffff → #f8f9fa

~ bg-soft #fbfaf9 → #ffffff

~ surface #f6f5f4 → #ffffff

~ surface-hover #dfdcd9 → #e9ecef

~ surface-soft #f9f9f8 → #f1f3f5

~ text #000000e6 → #1d1d1d

~ text-strong #000000f2 → #101010

~ text-display #000000 → #1d1d1d

~ text-muted #0000008a → #5c5c5c

~ text-soft #00000096 → #8b8b8b

~ text-faint #00000061 → #bababa

~ brand #0075de → #3182ed

~ brand-hover #005bab → #2870d6

~ brand-active #00396b → #1f5db8

~ brand-soft #e6f3fe → #dbeafe

~ border-soft #00000014 → #0000000d

~ success #0a8754 → #16a34a

~ success-bg #e8f5ee → #dcfce7

~ warning #a06b00 → #d97706

~ warning-bg #fdf3e0 → #fef3c7

~ danger #a02b1d → #dc2626

~ danger-bg #fbeae8 → #fee2e2

~ info #0075de → #3182ed

~ info-bg #e6f3fe → #dbeafe

+ bg-canvas #fdfdfd

+ surface-selected #dee2e6

+ text-on-brand #ffffff

+ 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 #bfdbfe

+ accent-blue-deep #93c5fd

+ accent-purple #ddd6fe

+ accent-orange #fed7aa

+ grid-dot #0000001a

+ grid-dot-soft #0000000d

− bg-campaign #191918

− surface-strong #eeede8

− surface-dark #28272a

− text-on-dark #ffffff

− text-on-dark-muted #ffffffb3

− campaign-launch #455dd3

− accent #62aef0

− accent-strong #097fe8

typography 5 changed

~ display {"family":"NotionInter","size":80} → {"family":"Inter","size":80}

~ h1 {"family":"NotionInter","size":48} → {"family":"Inter","size":48}

~ h2 {"family":"NotionInter","size":40} → {"family":"Inter","size":36}

~ body {"family":"NotionInter","size":16} → {"family":"Inter","size":16}

~ label {"family":"iA Writer Mono","size":11} → {"family":"Berkeley Mono","size":12}

radius 2 changed

~ button 6px → 10px

~ card 12px → 16px

spacing identical

No differences.

↻ Swap direction · tldraw → Notion