Diff

Capacities vs Tana

56 token-level differences between these two design systems.

Role tokens
Background
#ffffff #000000
Text
#1a1a1f #f0eded
Brand
#c6f432 #e1f0bd
Border
#0000001a #1f1f1f
Display font
Inter tanaClassic
Body size
17px 17px
colors 51 changed
~ bg #ffffff #000000
~ bg-soft #fef9e8 #0a0a0a
~ surface #faf3df #141414
~ surface-raised #f5edd0 #1a1a1a
~ surface-overlay #ffffff #1f1f1f
~ text #1a1a1f #f0eded
~ text-strong #0e0f12 #ffffff
~ text-muted #6b6770 #a8a5a3
~ text-soft #9a969f #7a7775
~ text-faint #c4c0c8 #555250
~ link #1a1a1f #e1f0bd
~ link-hover #0e0f12 #ffffff
~ border #0000001a #1f1f1f
~ border-soft #00000010 #161616
~ border-strong #00000033 #2a2a2a
~ focus-ring #1a1a1f #e1f0bd
~ selection-bg #fce98c #e1f0bd
~ selection-text #1a1a1f #000000
~ shadow rgba(0,0,0,0.06) rgba(0,0,0,0.6)
~ success #5b9a4f #a8d896
~ warning #e6b430 #e6c07a
~ danger #c4554d #e89a8d
~ info #5a8eb5 #9bb8d4
~ on-brand #1a1a1f #000000
+ bg-deep #050505
+ surface-inverted #f0eded
+ text-on-brand #000000
+ text-on-inverted #0a0a0a
+ brand #e1f0bd
+ brand-hover #cde0a3
+ brand-active #b8cc88
+ brand-soft #1f2516
+ accent-italic #d4caa8
+ accent-italic-soft #a8a08a
+ border-inverted #d8d5d3
bg-cream #fff4d6
bg-cream-soft #fff9e8
bg-tinted #fdf6e3
text-on-cta #ffffff
text-on-yellow #1a1a1f
brand-yellow #f5c842
brand-yellow-deep #e6b430
brand-yellow-soft #fce98c
brand-yellow-pale #fef4c2
cta-bg #1a1a1f
cta-text #ffffff
cta-hover #0e0f12
cta-active #000000
link-underline #f5c842
border-cream #e8dfb8
shadow-warm rgba(180,140,40,0.10)
typography 5 changed
~ display {"family":"Inter","size":72} {"family":"tanaClassic","size":83}
~ h1 {"family":"Inter","size":64} {"family":"tanaClassic","size":42}
~ h2 {"family":"Inter","size":48} {"family":"tanaClassic","size":32}
~ body {"family":"Inter","size":17} {"family":"SF Pro","size":17}
~ label {"family":"JetBrains Mono","size":13} {"family":"JetBrains Mono","size":12}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Tana → Capacities