Diff

Hugging Face vs Udio

46 token-level differences between these two design systems.

Role tokens

Background

#0b0f19 → #000000

Text

#e5e7eb → #f9f9f9

Brand

#ffd21e → #e30b5d

Border

rgba(255, 255, 255, 0.10) → rgba(255, 255, 255, 0.10)

Display font

Source Sans Pro → InnovatorFont

Body size

16px → 16px

colors 34 changed

~ bg #0b0f19 → #000000

~ bg-alt #0d1424 → #08080a

~ surface #191919 → #0a0a0a

~ surface-soft rgba(255, 255, 255, 0.04) → rgba(255, 255, 255, 0.05)

~ text #e5e7eb → #f9f9f9

~ text-soft #9ca3af → #8a8a8a

~ text-muted #6b7280 → #c2c2c2

~ text-faint #4b5563 → #737373

~ brand #ffd21e → #e30b5d

~ brand-deep #fbbf24 → #c2094f

~ brand-soft rgba(255, 210, 30, 0.15) → rgba(227, 11, 93, 0.15)

~ on-brand #0b0f19 → #ffffff

~ link #3b82f6 → #f9f9f9

~ link-hover #60a5fa → #e30b5d

~ selected-bg rgba(255, 210, 30, 0.12) → rgba(227, 11, 93, 0.15)

~ disabled #4b5563 → #737373

~ success-bg rgba(26, 137, 23, 0.15) → rgba(34, 197, 94, 0.12)

~ warning-bg rgba(255, 157, 11, 0.15) → rgba(245, 166, 35, 0.12)

~ danger-bg rgba(239, 68, 68, 0.15) → rgba(239, 68, 68, 0.12)

~ info-bg rgba(59, 130, 246, 0.15) → rgba(255, 255, 255, 0.08)

~ info-text #93c5fd → #c2c2c2

+ border-pink rgba(227, 11, 93, 0.40)

− surface-paper #ffffff

− surface-cream #f7f8f8

− text-medium #d1d5db

− text-paper #0b0f19

− text-paper-soft #4b5563

− brand-warm #ff9d0b

− accent-green #1a8917

− accent-pink #ff8fbd

− accent-blue #3b82f6

− link-paper #1a56db

− border-paper #e5e7eb

− border-yellow rgba(255, 210, 30, 0.40)

typography 5 changed

~ display {"family":"Source Sans Pro","size":72} → {"family":"InnovatorFont","size":80}

~ h1 {"family":"Source Sans Pro","size":48} → {"family":"InnovatorFont","size":60}

~ h2 {"family":"Source Sans Pro","size":36} → {"family":"InnovatorFont","size":40}

~ body {"family":"Source Sans Pro","size":16} → {"family":"InnovatorFont","size":16}

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

radius 2 changed

~ button 6px → 8px

~ card 8px → 12px

spacing 5 changed

~ xs 1px → 0px

~ sm 2px → 4px

~ md 6px → 12px

~ lg 12px → 32px

~ xl 20px → 64px

↻ Swap direction · Udio → Hugging Face