Diff

Our Place vs Tailscale

54 token-level differences between these two design systems.

Role tokens
Background
#fcfaf6 #f9f7f6
Text
#35312e #181717
Brand
#af5a3c #d04841
Border
#e4dccb rgba(24, 23, 23, 0.12)
Display font
Chelt Inter
Body size
16px 16px
colors 50 changed
~ bg #fcfaf6 #f9f7f6
~ brand #af5a3c #d04841
~ brand-deep #8f4730 #9e332e
~ brand-soft #d8a087 rgba(208, 72, 65, 0.10)
~ text #35312e #181717
~ text-faint #9a9189 #a39e9b
~ link #af5a3c #d04841
~ link-hover #8f4730 #b83d37
~ border #e4dccb rgba(24, 23, 23, 0.12)
~ border-strong #35312e rgba(24, 23, 23, 0.22)
~ border-soft #efe7d8 rgba(24, 23, 23, 0.07)
~ success #5a7a4d #2f7d52
~ warning #c8861a #c9821f
~ danger #a73b2b #d04841
~ info #5c707e #181717
+ bg-pure #ffffff
+ bg-elev #f3f0ee
+ bg-warm #efeae7
+ bg-ink #181717
+ bg-ink-soft #232222
+ surface-warm #f9f7f6
+ text-secondary #4a4746
+ text-tertiary #736f6d
+ text-on-ink #f5f2f0
+ text-on-ink-soft #a39e9b
+ brand-hover #b83d37
+ brand-tint rgba(208, 72, 65, 0.06)
+ 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-ambient rgba(24, 23, 23, 0.04)
+ shadow-card rgba(24, 23, 23, 0.06)
+ shadow-elev rgba(24, 23, 23, 0.08)
+ shadow-deep rgba(24, 23, 23, 0.14)
+ scrim rgba(24, 23, 23, 0.45)
+ success-soft rgba(47, 125, 82, 0.10)
+ warning-soft rgba(201, 130, 31, 0.10)
+ danger-soft rgba(208, 72, 65, 0.10)
+ info-soft rgba(24, 23, 23, 0.06)
bg-soft #f6f1e8
bg-deeper #efe7d8
surface-soft #f6f1e8
cta-secondary-bg #ebe5d4
cta-secondary-text #35312e
text-strong #2a2724
text-muted #6b645c
text-on-image #ffffff
typography 4 changed
~ display {"family":"Chelt","size":80} {"family":"Inter","size":80}
~ h1 {"family":"Chelt","size":60} {"family":"Inter","size":48}
~ h2 {"family":"Chelt","size":40} {"family":"Inter","size":32}
~ body {"family":"Plaid-XS-Web","size":16} {"family":"Inter","size":16}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Tailscale → Our Place