Diff

SKIMS vs Temporal

45 token-level differences between these two design systems.

Role tokens
Background
#ffffff #141414
Text
#2d2a26 #f8fafc
Brand
#2d2a26 #444ce7
Border
#e5e5eb #2a2a2a
Display font
Tstar Pro Headline Aeonik
Body size
16px 16px
colors 39 changed
~ bg #ffffff #141414
~ surface #ffffff #1a1a1a
~ brand #2d2a26 #444ce7
~ text #2d2a26 #f8fafc
~ link #2d2a26 #444ce7
~ border #e5e5eb #2a2a2a
~ border-strong #dbdde4 #3a3a3a
~ success #e6fbf0 #34d399
~ info #f0f7ff #444ce7
~ warning #fffaeb #fed553
~ danger #fff0f0 #f43f5e
+ surface-elevated #222222
+ surface-code #243349
+ surface-pre #1f2937
+ text-body #cbd5e1
+ text-muted #94a3b8
+ text-inverse #141414
+ brand-bright #5b63f0
+ border-soft #222222
+ ring rgba(68,76,231,0.5)
+ shadow-color rgba(0,0,0,0.6)
+ code-text #f8fafc
+ code-keyword #fed553
bg-soft #f7f7f8
bg-deeper #f4f4f6
hero-dark #1f1d1b
surface-soft #f7f7f8
brand-hover #1f1d1b
text-strong #1f1d1b
text-secondary #676986
text-faint #9a9db1
text-on-hero #f6f6f6
text-on-brand #ffffff
link-hover #1f1d1b
accent-teal #0e7a82
accent-teal-bright #00caaa
border-active #676986
star #2d2a26
star-empty #e5e5e5
typography 4 changed
~ display {"family":"Tstar Pro Headline","size":80} {"family":"Aeonik","size":68}
~ h1 {"family":"Tstar Pro Headline","size":48} {"family":"Aeonik","size":40}
~ h2 {"family":"Tstar Pro Headline","size":32} {"family":"Aeonik","size":32}
~ body {"family":"Inter","size":16} {"family":"Aeonik","size":16}
radius 2 changed
~ button 2px 8px
~ card 14px 12px
spacing identical
No differences.
↻ Swap direction · Temporal → SKIMS