Diff

SKIMS vs Our Place

39 token-level differences between these two design systems.

Role tokens
Background
#ffffff #fcfaf6
Text
#2d2a26 #35312e
Brand
#2d2a26 #af5a3c
Border
#e5e5eb #e4dccb
Display font
Tstar Pro Headline Chelt
Body size
16px 16px
colors 33 changed
~ bg #ffffff #fcfaf6
~ bg-soft #f7f7f8 #f6f1e8
~ bg-deeper #f4f4f6 #efe7d8
~ surface-soft #f7f7f8 #f6f1e8
~ brand #2d2a26 #af5a3c
~ text #2d2a26 #35312e
~ text-strong #1f1d1b #2a2724
~ text-faint #9a9db1 #9a9189
~ link #2d2a26 #af5a3c
~ link-hover #1f1d1b #8f4730
~ border #e5e5eb #e4dccb
~ border-strong #dbdde4 #35312e
~ success #e6fbf0 #5a7a4d
~ info #f0f7ff #5c707e
~ warning #fffaeb #c8861a
~ danger #fff0f0 #a73b2b
+ brand-deep #8f4730
+ brand-soft #d8a087
+ cta-secondary-bg #ebe5d4
+ cta-secondary-text #35312e
+ text-muted #6b645c
+ text-on-image #ffffff
+ border-soft #efe7d8
hero-dark #1f1d1b
brand-hover #1f1d1b
text-secondary #676986
text-on-hero #f6f6f6
text-on-brand #ffffff
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":"Chelt","size":80}
~ h1 {"family":"Tstar Pro Headline","size":48} {"family":"Chelt","size":60}
~ h2 {"family":"Tstar Pro Headline","size":32} {"family":"Chelt","size":40}
~ body {"family":"Inter","size":16} {"family":"Plaid-XS-Web","size":16}
radius 2 changed
~ button 2px 8px
~ card 14px 12px
spacing identical
No differences.
↻ Swap direction · Our Place → SKIMS