Diff

Replicate vs tldraw

64 token-level differences between these two design systems.

Role tokens
Background
#ffffff #f8f9fa
Text
#202020 #1d1d1d
Brand
#202020 #3182ed
Border
#e9e9e9 #0000001a
Display font
rb-freigeist-neue Inter
Body size
16px 16px
colors 57 changed
~ bg #ffffff #f8f9fa
~ surface #fcfcfc #ffffff
~ text #202020 #1d1d1d
~ text-strong #000000 #101010
~ text-soft #646464 #8b8b8b
~ text-muted #8a8a8a #5c5c5c
~ text-faint #b3b3b3 #bababa
~ brand #202020 #3182ed
~ on-brand #fcfcfc #ffffff
~ link #202020 #3182ed
~ border #e9e9e9 #0000001a
~ border-strong #cccccc #00000033
~ success-bg #e7f5ec #dcfce7
~ warning-bg #fef6e4 #fef3c7
~ danger-bg #fbebec #fee2e2
~ info-bg #eef2f7 #dbeafe
+ bg-canvas #fdfdfd
+ bg-soft #ffffff
+ surface-soft #f1f3f5
+ surface-hover #e9ecef
+ surface-selected #dee2e6
+ text-display #1d1d1d
+ text-on-brand #ffffff
+ text-on-pastel #1d1d1d
+ brand-hover #2870d6
+ brand-active #1f5db8
+ brand-soft #dbeafe
+ brand-faint #eff6ff
+ 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
+ border-soft #0000000d
+ grid-dot #0000001a
+ grid-dot-soft #0000000d
+ success #16a34a
+ warning #d97706
+ danger #dc2626
+ info #3182ed
bg-alt #fdfdfd
surface-light #f5f5f5
text-medium #404040
brand-deep #000000
link-hover #000000
selected-bg #f5f5f5
disabled #b3b3b3
border-subtle #f0f0f0
success-text #1f6b3e
warning-text #7a5a14
danger-text #9a2c34
info-text #1f4a7a
typography 5 changed
~ display {"family":"rb-freigeist-neue","size":96} {"family":"Inter","size":80}
~ h1 {"family":"rb-freigeist-neue","size":56} {"family":"Inter","size":48}
~ h2 {"family":"rb-freigeist-neue","size":48} {"family":"Inter","size":36}
~ body {"family":"basier-square","size":16} {"family":"Inter","size":16}
~ label {"family":"jetbrains-mono","size":11} {"family":"Berkeley Mono","size":12}
radius 2 changed
~ button 0px 10px
~ card 0px 16px
spacing identical
No differences.
↻ Swap direction · tldraw → Replicate