Diff

Obsidian vs Tailscale

55 token-level differences between these two design systems.

Role tokens
Background
#0f0f0f #f9f7f6
Text
#eeeeee #181717
Brand
#7c3aed #d04841
Border
#2a2a2a rgba(24, 23, 23, 0.12)
Display font
Inter Inter
Body size
16px 16px
colors 53 changed
~ bg #0f0f0f #f9f7f6
~ surface #161616 #ffffff
~ text #eeeeee #181717
~ text-secondary #b0b0b0 #4a4746
~ text-faint #737373 #a39e9b
~ brand #7c3aed #d04841
~ brand-hover #6d28d9 #b83d37
~ brand-soft #2a1a4a rgba(208, 72, 65, 0.10)
~ border #2a2a2a rgba(24, 23, 23, 0.12)
~ border-soft #1f1f1f rgba(24, 23, 23, 0.07)
~ border-strong #3a3a3a rgba(24, 23, 23, 0.22)
~ shadow-ambient rgba(0,0,0,0.40) rgba(24, 23, 23, 0.04)
~ shadow-card rgba(0,0,0,0.50) rgba(24, 23, 23, 0.06)
~ scrim rgba(0,0,0,0.65) rgba(24, 23, 23, 0.45)
~ success #4ade80 #2f7d52
~ success-soft #14321f rgba(47, 125, 82, 0.10)
~ warning #fbbf24 #c9821f
~ warning-soft #33270a rgba(201, 130, 31, 0.10)
~ danger #f87171 #d04841
~ danger-soft #3a1717 rgba(208, 72, 65, 0.10)
~ info #a78bfa #181717
+ bg-pure #ffffff
+ bg-elev #f3f0ee
+ bg-warm #efeae7
+ bg-ink #181717
+ bg-ink-soft #232222
+ surface-warm #f9f7f6
+ text-tertiary #736f6d
+ text-on-ink #f5f2f0
+ text-on-ink-soft #a39e9b
+ brand-deep #9e332e
+ brand-tint rgba(208, 72, 65, 0.06)
+ link #d04841
+ link-hover #b83d37
+ focus rgba(208, 72, 65, 0.40)
+ cta-bg #d04841
+ cta-text #ffffff
+ cta-bg-secondary #232222
+ cta-text-secondary #ffffff
+ border-ink #181717
+ shadow-elev rgba(24, 23, 23, 0.08)
+ shadow-deep rgba(24, 23, 23, 0.14)
+ info-soft rgba(24, 23, 23, 0.06)
bg-deep #0a0a0a
surface-elev #1f1f1f
surface-hover #262626
text-strong #ffffff
text-muted #a3a3a3
brand-active #5b21b6
brand-text #a78bfa
brand-text-hover #c4b5fd
border-brand #7c3aed
shadow-modal rgba(0,0,0,0.70)
typography 2 changed
~ display {"family":"Inter","size":60} {"family":"Inter","size":80}
~ h1 {"family":"Inter","size":40} {"family":"Inter","size":48}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Tailscale → Obsidian