Diff

Anytype vs Paddle

62 token-level differences between these two design systems.

Role tokens
Background
#000000 #0e1414
Text
#ffffff #0e1414
Brand
#3cd9b3 #e4e1d1
Border
#262626 #d9d3c9
Display font
Riccione serrifCondensed
Body size
16px 16px
colors 58 changed
~ bg #000000 #0e1414
~ surface #0d0d0d #fcfcfc
~ text #ffffff #0e1414
~ brand #3cd9b3 #e4e1d1
~ on-brand #000000 #1c1a15
~ border #262626 #d9d3c9
~ success #4cad00 #108c3d
~ warning #ffb522 #9b6829
~ danger #ff6a7b #b42318
+ bg-canvas #0e1414
+ surface-warm #f9f8f7
+ surface-sand #ebe7df
+ surface-sand-deep #e8e6e2
+ surface-cream #e4e1d1
+ surface-clay #d6cbb6
+ surface-ink #1c1a15
+ text-ink #1c1a15
+ text-slate #2b3033
+ text-on-dark #fcfcfc
+ text-on-dark-soft rgba(252,252,252,0.8)
+ text-on-dark-muted rgba(252,252,252,0.6)
+ brand-cream #e4e1d1
+ brand-ink #1c1a15
+ on-brand-ink #fcfcfc
+ accent #ffd400
+ accent-yellow #ffd400
+ border-sand #ebe7df
+ border-ink #0e1414
+ border-on-dark rgba(252,252,252,0.1)
+ border-faint rgba(252,252,252,0.02)
+ link-on-dark rgba(252,252,252,0.6)
+ link-on-light #1c1a15
bg-deep #000000
surface-elev #1a1a1a
surface-hover #242424
text-strong #ffffff
text-secondary #b8b8b8
text-muted #8a8a8a
text-faint #5c5c5c
brand-hover #2fc4a0
brand-active #27a98a
brand-text #3cd9b3
brand-soft #0e2b25
any-teal #3cd9b3
any-blue #18a3f1
any-green #4cad00
any-amber #ffb522
border-soft #1a1a1a
border-strong #3a3a3a
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)
scrim rgba(0,0,0,0.70)
success-soft #0f2200
warning-soft #2a1d00
danger-soft #2e1115
info #18a3f1
typography 3 changed
~ display {"family":"Riccione","size":88} {"family":"serrifCondensed","size":72}
~ h1 {"family":"Riccione","size":48} {"family":"serrifCondensed","size":48}
~ h2 {"family":"Riccione","size":36} {"family":"serrifCondensed","size":40}
radius 1 changed
~ button 8px 10px
spacing identical
No differences.
↻ Swap direction · Paddle → Anytype