Diff

SKIMS vs Tailscale

59 token-level differences between these two design systems.

Role tokens
Background
#ffffff #f9f7f6
Text
#2d2a26 #181717
Brand
#2d2a26 #d04841
Border
#e5e5eb rgba(24, 23, 23, 0.12)
Display font
Tstar Pro Headline Inter
Body size
16px 16px
colors 54 changed
~ bg #ffffff #f9f7f6
~ brand #2d2a26 #d04841
~ brand-hover #1f1d1b #b83d37
~ text #2d2a26 #181717
~ text-secondary #676986 #4a4746
~ text-faint #9a9db1 #a39e9b
~ link #2d2a26 #d04841
~ link-hover #1f1d1b #b83d37
~ border #e5e5eb rgba(24, 23, 23, 0.12)
~ border-strong #dbdde4 rgba(24, 23, 23, 0.22)
~ success #e6fbf0 #2f7d52
~ info #f0f7ff #181717
~ warning #fffaeb #c9821f
~ danger #fff0f0 #d04841
+ 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-soft rgba(208, 72, 65, 0.10)
+ 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-soft rgba(24, 23, 23, 0.07)
+ 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 #f7f7f8
bg-deeper #f4f4f6
hero-dark #1f1d1b
surface-soft #f7f7f8
text-strong #1f1d1b
text-on-hero #f6f6f6
text-on-brand #ffffff
accent-teal #0e7a82
accent-teal-bright #00caaa
border-active #676986
star #2d2a26
star-empty #e5e5e5
typography 3 changed
~ display {"family":"Tstar Pro Headline","size":80} {"family":"Inter","size":80}
~ h1 {"family":"Tstar Pro Headline","size":48} {"family":"Inter","size":48}
~ h2 {"family":"Tstar Pro Headline","size":32} {"family":"Inter","size":32}
radius 2 changed
~ button 2px 8px
~ card 14px 12px
spacing identical
No differences.
↻ Swap direction · Tailscale → SKIMS