Diff

Blur vs Tana

59 token-level differences between these two design systems.

Role tokens
Background
#000000 #000000
Text
#ffffff #f0eded
Brand
#ff8700 #e1f0bd
Border
#262626 #1f1f1f
Display font
JetBrains Mono tanaClassic
Body size
13px 17px
colors 51 changed
~ text #ffffff #f0eded
~ text-muted #878787 #a8a5a3
~ brand #ff8700 #e1f0bd
~ brand-hover #cc6c00 #cde0a3
~ brand-active #a35700 #b8cc88
~ brand-soft #ff87001a #1f2516
~ border #262626 #1f1f1f
~ border-soft #1a1a1a #161616
~ border-strong #3d3d3d #2a2a2a
~ focus-ring rgba(255,135,0,0.50) #e1f0bd
~ link #ff8700 #e1f0bd
~ link-hover #ffa84d #ffffff
+ bg-soft #0a0a0a
+ bg-deep #050505
+ surface #141414
+ surface-raised #1a1a1a
+ surface-overlay #1f1f1f
+ surface-inverted #f0eded
+ text-strong #ffffff
+ text-soft #7a7775
+ text-faint #555250
+ text-on-brand #000000
+ text-on-inverted #0a0a0a
+ accent-italic #d4caa8
+ accent-italic-soft #a8a08a
+ border-inverted #d8d5d3
+ selection-bg #e1f0bd
+ selection-text #000000
+ shadow rgba(0,0,0,0.6)
+ success #a8d896
+ warning #e6c07a
+ danger #e89a8d
+ info #9bb8d4
bg-elev-1 #0d0d0d
bg-elev-2 #1a1a1a
bg-elev-3 #252525
surface-card #0d0d0d
surface-row-hover #1a1a1a
text-body #cccccc
text-subtle #5a5a5a
brand-glow rgba(255,135,0,0.40)
border-brand #ff8700
semantic-up #22c55e
semantic-up-soft #22c55e1a
semantic-down #ef4444
semantic-down-soft #ef44441a
semantic-warning #fbbf24
semantic-info #3b82f6
bid-pool-orange #ff8700
rare-trait #ff8700
scrim rgba(0,0,0,0.80)
typography 5 changed
~ display {"family":"JetBrains Mono","size":72} {"family":"tanaClassic","size":83}
~ h1 {"family":"JetBrains Mono","size":40} {"family":"tanaClassic","size":42}
~ h2 {"family":"JetBrains Mono","size":32} {"family":"tanaClassic","size":32}
~ body {"family":"JetBrains Mono","size":13} {"family":"SF Pro","size":17}
~ label {"family":"JetBrains Mono","size":11} {"family":"JetBrains Mono","size":12}
radius 3 changed
~ button 0px 8px
~ card 0px 24px
~ pill 0px 9999px
spacing identical
No differences.
↻ Swap direction · Tana → Blur