Diff

DeepSeek vs Baseten

79 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#1a1a1a #1a1830
Brand
#4d6bfe #6c5ce7
Border
#e5e7eb #e4e4ec
Display font
Inter Inter
Body size
16px 16px
colors 69 changed
~ bg-soft #fafbfd #fafaff
~ bg-deep #0a0a23 #1a1830
~ surface #f5f7fb #ffffff
~ text #1a1a1a #1a1830
~ text-strong #0a0a0a #28254a
~ text-muted #6b7280 #6b6889
~ text-faint #a8acb8 #9c98b6
~ text-on-dark #e6e8ef #ffffff
~ text-on-dark-muted #a8b0c4 #c8c5dd
~ brand #4d6bfe #6c5ce7
~ brand-hover #3a55e5 #5a48d3
~ brand-active #2a44cc #4938b3
~ brand-deep #2a3eb1 #352a8a
~ brand-soft #eaeefe #ede9fe
~ accent-cyan #5eaaff #06b6d4
~ link #4d6bfe #6c5ce7
~ link-hover #3a55e5 #5a48d3
~ border #e5e7eb #e4e4ec
~ border-strong #d1d5db #c8c5d8
~ border-soft #eef0f4 #f0eff7
+ surface-soft #f5f5fa
+ surface-elevated #ffffff
+ surface-purple #ede9fe
+ surface-dark #1a1830
+ surface-dark-card #28254a
+ text-body #3d3a5c
+ on-light #1a1830
+ border-purple #6c5ce7
+ shadow-color rgba(26, 24, 48, 0.04)
+ shadow-color-md rgba(26, 24, 48, 0.08)
+ shadow-color-lg rgba(26, 24, 48, 0.12)
+ shadow-glow-purple rgba(108, 92, 231, 0.15)
+ accent-emerald #10b981
+ accent-rose #ef4444
+ accent-amber #f59e0b
+ accent-pink #ec4899
+ success #10b981
+ warning #f59e0b
+ danger #ef4444
+ info #06b6d4
+ code-keyword #6c5ce7
+ code-string #10b981
+ code-comment #9c98b6
+ code-number #f59e0b
+ truss-yaml-key #6c5ce7
+ truss-yaml-string #10b981
bg-deep-strong #050518
surface-hover #eef1f8
surface-strong #e2e7f1
text-medium #2a2a2e
text-soft #8b90a0
on-cta #ffffff
brand-faint #f3f5fe
brand-glow rgba(77, 107, 254, 0.24)
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 4 changed
~ display {"family":"Inter","size":80} {"family":"Inter","size":72}
~ h1 {"family":"Inter","size":64} {"family":"Inter","size":40}
~ h2 {"family":"Inter","size":40} {"family":"Inter","size":32}
~ label {"family":"JetBrains Mono","size":13} {"family":"JetBrains Mono","size":11}
radius 1 changed
~ card 16px 12px
spacing 5 changed
~ xs 1px 4px
~ sm 2px 8px
~ md 6px 16px
~ lg 16px 48px
~ xl 24px 96px
↻ Swap direction · Baseten → DeepSeek