Diff

Datadog vs MyFitnessPal

61 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #ffffff

Text

#212529 → #1a1a1a

Brand

#632ca6 → #0066ee

Border

#e5e7eb → #dcdfe4

Display font

NationalWeb → Inter

Body size

16px → 14px

colors 50 changed

~ bg-soft #f7f7f7 → #f4f6f8

~ surface #eef1f5 → #ffffff

~ surface-strong #dde1e7 → #f0f2f5

~ text #212529 → #1a1a1a

~ text-strong #0c0c0c → #000000

~ text-muted #555555 → #5a5a5a

~ text-soft #6b7280 → #8a8a8a

~ text-faint #9ca3af → #bcbcbc

~ brand #632ca6 → #0066ee

~ brand-hover #52248a → #0052cc

~ brand-deep #411a6e → #002966

~ brand-tint rgba(99, 44, 166, 0.10) → #e0eeff

~ link #632ca6 → #0066ee

~ link-hover #52248a → #0052cc

~ border #e5e7eb → #dcdfe4

~ border-soft #f0f0f0 → #eef0f4

~ border-strong #cbd5e0 → #bcc0c8

~ success #16a34a → #1a8757

~ warning #f59f3a → #cc8800

~ danger #dc2626 → #c4313a

~ info #3b6ec7 → #0066ee

+ bg-warm #fafbfc

+ surface-soft #fafbfc

+ brand-pressed #003d99

+ premium-teal #00aaaa

+ premium-teal-deep #008888

+ premium-teal-soft #cceaea

+ text-on-brand #ffffff

+ selected-bg #e0eeff

+ border-brand #0066ee

+ protein #ec5e8a

+ carbs #f0a020

+ fat #a05ec5

− bg-cool #f4f5f7

− surface-hover #e2e6eb

− bg-dark #262626

− bg-deep #1a1a1a

− bg-darker #0c0c0c

− text-on-dark #f3f4f6

− text-on-dark-muted #a1a1aa

− brand-soft #f0e8fa

− chart-purple #632ca6

− chart-blue #3b6ec7

− chart-teal #1aa1b6

− chart-green #3eb049

− chart-yellow #f1c40f

− chart-orange #f59f3a

− chart-red #e74c3c

− chart-pink #d65297

− border-dark rgba(255,255,255,0.10)

typography 5 changed

~ display {"family":"NationalWeb","size":68} → {"family":"Inter","size":56}

~ h1 {"family":"NationalWeb","size":48} → {"family":"Inter","size":32}

~ h2 {"family":"NationalWeb","size":36} → {"family":"Inter","size":24}

~ body {"family":"NationalWeb","size":16} → {"family":"Inter","size":14}

~ label {"family":"Monaco","size":13} → {"family":"JetBrains Mono","size":12}

radius 2 changed

~ button 6px → 8px

~ card 8px → 12px

spacing 4 changed

~ xs 2px → 0px

~ md 8px → 12px

~ lg 20px → 24px

~ xl 32px → 40px

↻ Swap direction · MyFitnessPal → Datadog