Diff

Anytype vs Todoist

60 token-level differences between these two design systems.

Role tokens
Background
#000000 #fefdfc
Text
#ffffff #25221e
Brand
#3cd9b3 #e44432
Border
#262626 #eae9e8
Display font
Riccione Graphik
Body size
16px 16px
colors 56 changed
~ bg #000000 #fefdfc
~ surface #0d0d0d #ffffff
~ text #ffffff #25221e
~ text-muted #8a8a8a #565656
~ text-faint #5c5c5c #c1c0c0
~ brand #3cd9b3 #e44432
~ brand-hover #2fc4a0 #ee5244
~ brand-active #27a98a #d1453b
~ on-brand #000000 #ffffff
~ border #262626 #eae9e8
~ border-soft #1a1a1a #f1f0ef
~ border-strong #3a3a3a #dadad9
~ scrim rgba(0,0,0,0.70) rgba(34, 40, 41, 0.80)
~ success #4cad00 #3a7400
~ success-soft #0f2200 #f6f9f7
~ warning #ffb522 #f7b84f
~ warning-soft #2a1d00 #fff9f0
~ danger #ff6a7b #de483a
~ danger-soft #2e1115 #fdf5f0
~ info #18a3f1 #316fea
+ bg-warm #fcf8f3
+ surface-card #fcfcfc
+ surface-cream #fff9f3
+ surface-cream-mid #fff5eb
+ surface-peach #fae8d6
+ text-soft #8c8b8b
+ brand-tint-100 #fef6ef
+ brand-tint-200 #fdf0e4
+ brand-tint-300 #fbe8d7
+ brand-deep #9a3b00
+ accent-yellow #ffc93e
+ accent-green #6b8767
+ accent-pink #ffada4
+ accent-blue #316fea
+ ghost-bg #25221e12
+ prio-1 #ffd6d3
+ prio-2 #fbe7ce
+ prio-3 #dde6f9
+ prio-4 #f2efed
+ shadow-color rgba(0, 0, 0, 0.24)
+ info-soft #f1f7fe
bg-deep #000000
surface-elev #1a1a1a
surface-hover #242424
text-strong #ffffff
text-secondary #b8b8b8
brand-text #3cd9b3
brand-soft #0e2b25
any-teal #3cd9b3
any-blue #18a3f1
any-green #4cad00
any-amber #ffb522
border-brand #3cd9b3
shadow-ambient rgba(0,0,0,0.50)
shadow-card rgba(0,0,0,0.65)
shadow-modal rgba(0,0,0,0.80)
typography 4 changed
~ display {"family":"Riccione","size":88} {"family":"Graphik","size":80}
~ h1 {"family":"Riccione","size":48} {"family":"Graphik","size":55}
~ h2 {"family":"Riccione","size":36} {"family":"Graphik","size":38}
~ body {"family":"Inter","size":16} {"family":"Graphik","size":16}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Todoist → Anytype