Diff

DeepSeek vs Our Place

64 token-level differences between these two design systems.

Role tokens
Background
#ffffff #fcfaf6
Text
#1a1a1a #35312e
Brand
#4d6bfe #af5a3c
Border
#e5e7eb #e4dccb
Display font
Inter Chelt
Body size
16px 16px
colors 53 changed
~ bg #ffffff #fcfaf6
~ bg-soft #fafbfd #f6f1e8
~ surface #f5f7fb #ffffff
~ text #1a1a1a #35312e
~ text-strong #0a0a0a #2a2724
~ text-muted #6b7280 #6b645c
~ text-faint #a8acb8 #9a9189
~ brand #4d6bfe #af5a3c
~ brand-deep #2a3eb1 #8f4730
~ brand-soft #eaeefe #d8a087
~ link #4d6bfe #af5a3c
~ link-hover #3a55e5 #8f4730
~ border #e5e7eb #e4dccb
~ border-strong #d1d5db #35312e
~ border-soft #eef0f4 #efe7d8
+ bg-deeper #efe7d8
+ surface-soft #f6f1e8
+ cta-secondary-bg #ebe5d4
+ cta-secondary-text #35312e
+ text-on-image #ffffff
+ success #5a7a4d
+ warning #c8861a
+ danger #a73b2b
+ info #5c707e
bg-deep #0a0a23
bg-deep-strong #050518
surface-hover #eef1f8
surface-strong #e2e7f1
text-medium #2a2a2e
text-soft #8b90a0
text-on-dark #e6e8ef
text-on-dark-muted #a8b0c4
on-cta #ffffff
brand-hover #3a55e5
brand-active #2a44cc
brand-faint #f3f5fe
brand-glow rgba(77, 107, 254, 0.24)
accent-cyan #5eaaff
selected-bg #eaeefe
disabled-bg #f5f7fb
disabled-text #a8acb8
border-focus #4d6bfe
border-on-dark rgba(255, 255, 255, 0.12)
success-bg #dcfce7
success-text #15803d
warning-bg #fef3c7
warning-text #854d0e
danger-bg #fee2e2
danger-text #b91c1c
info-bg #eaeefe
info-text #2a3eb1
shadow-rgb 10, 10, 35
shadow-blue 77, 107, 254
typography 5 changed
~ display {"family":"Inter","size":80} {"family":"Chelt","size":80}
~ h1 {"family":"Inter","size":64} {"family":"Chelt","size":60}
~ h2 {"family":"Inter","size":40} {"family":"Chelt","size":40}
~ body {"family":"Inter","size":16} {"family":"Plaid-XS-Web","size":16}
~ label {"family":"JetBrains Mono","size":13} {"family":"SFMono-Regular","size":13}
radius 1 changed
~ card 16px 12px
spacing 5 changed
~ xs 1px 0px
~ sm 2px 4px
~ md 6px 12px
~ lg 16px 32px
~ xl 24px 64px
↻ Swap direction · Our Place → DeepSeek