Diff

Black Forest Labs vs Mercedes-Benz

69 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #000000

Text

#07130e → #ffffff

Brand

#07130e → #00adef

Border

#000000 → #2a2a2a

Display font

Instrument Sans → MBCorpo Title

Body size

16px → 14px

colors 58 changed

~ bg #ffffff → #000000

~ surface #ffffff → #1a1a1a

~ text #07130e → #ffffff

~ text-faint #a8ada9 → #5a5a5a

~ brand #07130e → #00adef

~ link #07130e → #ffffff

~ link-hover #000000 → #00adef

~ border #000000 → #2a2a2a

~ border-soft rgba(7, 19, 14, 0.12) → #1a1a1a

~ success #1f6f4a → #00a651

~ warning #9a6a1f → #ffa500

~ danger #9a2b2b → #cc0000

+ bg-elevated #0a0a0a

+ bg-light #ffffff

+ surface-strong #2a2a2a

+ surface-light #f5f5f5

+ surface-on-light #ffffff

+ text-strong #ffffff

+ text-body #a8a8a8

+ text-muted #7a7a7a

+ text-on-light #000000

+ text-body-on-light #3a3a3a

+ brand-hover #0095d0

+ brand-active #007fb3

+ brand-soft #d4f1fc

+ brand-deep #003d5b

+ accent-amg-red #cc0000

+ accent-amg-yellow #fdca00

+ accent-maybach-rose #ddc090

+ border-on-light #d8d8d8

+ ring #00adef

+ ring-on-light #000000

+ info #00adef

− bg-ink #07130e

− bg-pure-black #000000

− surface-ink #07130e

− surface-muted #f5f5f4

− text-on-ink #ffffff

− text-secondary #4a544f

− text-tertiary #7d847f

− text-on-ink-soft #b9b5d0

− accent #b9b5d0

− accent-soft rgba(185, 181, 208, 0.16)

− focus #07130e

− cta-bg #07130e

− cta-text #ffffff

− cta-bg-secondary #ffffff

− cta-text-secondary #07130e

− cta-bg-on-ink #ffffff

− cta-text-on-ink #07130e

− border-on-ink rgba(255, 255, 255, 0.16)

− shadow-ambient rgba(7, 19, 14, 0.04)

− shadow-card rgba(7, 19, 14, 0.06)

− shadow-deep rgba(7, 19, 14, 0.12)

− scrim rgba(7, 19, 14, 0.60)

− success-soft rgba(31, 111, 74, 0.10)

− warning-soft rgba(154, 106, 31, 0.10)

− danger-soft rgba(154, 43, 43, 0.10)

typography 5 changed

~ display {"family":"Instrument Sans","size":90} → {"family":"MBCorpo Title","size":72}

~ h1 {"family":"Instrument Sans","size":40} → {"family":"MBCorpo Title","size":40}

~ h2 {"family":"Instrument Sans","size":32} → {"family":"MBCorpo Title","size":32}

~ body {"family":"Instrument Sans","size":16} → {"family":"MBCorpo Text","size":14}

~ label {"family":"SFMono-Regular","size":13} → {"family":"JetBrains Mono","size":11}

radius 2 changed

~ button 0px → 6px

~ card 0px → 8px

spacing 4 changed

~ xs 0px → 4px

~ sm 4px → 8px

~ md 12px → 16px

~ lg 32px → 40px

↻ Swap direction · Mercedes-Benz → Black Forest Labs