Diff

Temporal vs Tailscale

58 token-level differences between these two design systems.

Role tokens
Background
#141414 #f9f7f6
Text
#f8fafc #181717
Brand
#444ce7 #d04841
Border
#2a2a2a rgba(24, 23, 23, 0.12)
Display font
Aeonik Inter
Body size
16px 16px
colors 54 changed
~ bg #141414 #f9f7f6
~ surface #1a1a1a #ffffff
~ text #f8fafc #181717
~ brand #444ce7 #d04841
~ link #444ce7 #d04841
~ border #2a2a2a rgba(24, 23, 23, 0.12)
~ border-soft #222222 rgba(24, 23, 23, 0.07)
~ border-strong #3a3a3a rgba(24, 23, 23, 0.22)
~ success #34d399 #2f7d52
~ warning #fed553 #c9821f
~ danger #f43f5e #d04841
~ info #444ce7 #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-faint #a39e9b
+ text-on-ink #f5f2f0
+ text-on-ink-soft #a39e9b
+ brand-hover #b83d37
+ brand-deep #9e332e
+ brand-soft rgba(208, 72, 65, 0.10)
+ brand-tint rgba(208, 72, 65, 0.06)
+ 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-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)
surface-elevated #222222
surface-code #243349
surface-pre #1f2937
text-body #cbd5e1
text-muted #94a3b8
text-inverse #141414
brand-bright #5b63f0
ring rgba(68,76,231,0.5)
shadow-color rgba(0,0,0,0.6)
code-text #f8fafc
code-keyword #fed553
typography 4 changed
~ display {"family":"Aeonik","size":68} {"family":"Inter","size":80}
~ h1 {"family":"Aeonik","size":40} {"family":"Inter","size":48}
~ h2 {"family":"Aeonik","size":32} {"family":"Inter","size":32}
~ body {"family":"Aeonik","size":16} {"family":"Inter","size":16}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Tailscale → Temporal