Diff

Our Place vs Away

38 token-level differences between these two design systems.

Role tokens
Background
#fcfaf6 #ffffff
Text
#35312e #111111
Brand
#af5a3c #a9c4d4
Border
#e4dccb #e4e2dd
Display font
Chelt Graphik
Body size
16px 16px
colors 33 changed
~ bg #fcfaf6 #ffffff
~ bg-soft #f6f1e8 #f7f6f4
~ bg-deeper #efe7d8 #efece8
~ surface-soft #f6f1e8 #f7f6f4
~ brand #af5a3c #a9c4d4
~ brand-deep #8f4730 #3b5566
~ on-brand #ffffff #111111
~ text #35312e #111111
~ text-strong #2a2724 #000000
~ text-muted #6b645c #6b6b6b
~ text-faint #9a9189 #9a9a9a
~ link #af5a3c #111111
~ link-hover #8f4730 #6b6b6b
~ border #e4dccb #e4e2dd
~ border-strong #35312e #111111
~ border-soft #efe7d8 #efece8
~ success #5a7a4d #2f7a4d
~ danger #a73b2b #9e2b2b
~ info #5c707e #3b5566
+ hero-plate #1a1a1a
+ pastel-coast #a9c4d4
+ pastel-sand #e3d9c6
+ pastel-olive #9aa07c
+ pastel-navy #2b3a4a
+ pastel-blush #e8c9c5
+ pastel-cherry #9e2b2b
+ cta-bg #ffffff
+ cta-text #111111
+ cta-bg-hover #111111
+ on-cta-hover #ffffff
brand-soft #d8a087
cta-secondary-bg #ebe5d4
cta-secondary-text #35312e
typography 4 changed
~ display {"family":"Chelt","size":80} {"family":"Graphik","size":56}
~ h1 {"family":"Chelt","size":60} {"family":"Graphik","size":40}
~ h2 {"family":"Chelt","size":40} {"family":"Graphik","size":32}
~ body {"family":"Plaid-XS-Web","size":16} {"family":"Graphik","size":16}
radius 1 changed
~ card 12px 14px
spacing identical
No differences.
↻ Swap direction · Away → Our Place