Diff

SKIMS vs Casper

44 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#2d2a26 #1e306e
Brand
#2d2a26 #1e306e
Border
#e5e5eb #dde0e9
Display font
Tstar Pro Headline New Kansas
Body size
16px 16px
colors 38 changed
~ bg-soft #f7f7f8 #f6f7fa
~ brand #2d2a26 #1e306e
~ brand-hover #1f1d1b #011a54
~ text #2d2a26 #1e306e
~ text-strong #1f1d1b #012169
~ text-faint #9a9db1 #8b93ac
~ link #2d2a26 #1e306e
~ link-hover #1f1d1b #012169
~ border #e5e5eb #dde0e9
~ border-strong #dbdde4 #1e306e
~ success #e6fbf0 #1f7a4d
~ info #f0f7ff #1e306e
~ warning #fffaeb #9a6212
~ danger #fff0f0 #b3261e
+ bg-subtle #edeef3
+ surface-tint #f6f7fa
+ surface-inverse #1e306e
+ on-surface-inverse #ffffff
+ brand-deep #012169
+ accent-tint #e8eaf0
+ accent-tint-strong #dde0e9
+ text-muted #5a6488
+ border-soft #edeef3
+ focus-ring #012169
+ success-bg #e8f3ed
+ warning-bg #f7efe1
+ danger-bg #f8e8e6
+ info-bg #edeef3
bg-deeper #f4f4f6
hero-dark #1f1d1b
surface-soft #f7f7f8
text-secondary #676986
text-on-hero #f6f6f6
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":"New Kansas","size":80}
~ h1 {"family":"Tstar Pro Headline","size":48} {"family":"New Kansas","size":40}
~ h2 {"family":"Tstar Pro Headline","size":32} {"family":"New Kansas","size":32}
~ body {"family":"Inter","size":16} {"family":"Calibre","size":16}
radius 2 changed
~ button 2px 8px
~ card 14px 12px
spacing identical
No differences.
↻ Swap direction · Casper → SKIMS