Diff

Udio vs Hugging Face

46 token-level differences between these two design systems.

Role tokens

Background

#000000 → #0b0f19

Text

#f9f9f9 → #e5e7eb

Brand

#e30b5d → #ffd21e

Border

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

Display font

InnovatorFont → Source Sans Pro

Body size

16px → 16px

colors 34 changed

~ bg #000000 → #0b0f19

~ bg-alt #08080a → #0d1424

~ surface #0a0a0a → #191919

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

~ text #f9f9f9 → #e5e7eb

~ text-muted #c2c2c2 → #6b7280

~ text-soft #8a8a8a → #9ca3af

~ text-faint #737373 → #4b5563

~ brand #e30b5d → #ffd21e

~ brand-deep #c2094f → #fbbf24

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

~ on-brand #ffffff → #0b0f19

~ link #f9f9f9 → #3b82f6

~ link-hover #e30b5d → #60a5fa

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

~ disabled #737373 → #4b5563

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

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

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

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

~ info-text #c2c2c2 → #93c5fd

+ 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)

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

typography 5 changed

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

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

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

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

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

radius 2 changed

~ button 8px → 6px

~ card 12px → 8px

spacing 5 changed

~ xs 0px → 1px

~ sm 4px → 2px

~ md 12px → 6px

~ lg 32px → 12px

~ xl 64px → 20px

↻ Swap direction · Hugging Face → Udio