Diff

Leonardo.Ai vs Y Combinator

85 token-level differences between these two design systems.

Role tokens

Background

#000000 → #ffffff

Text

#ffffff → #000000

Brand

#ffffff → #f26625

Border

#1f1f1f → #cccccc

Display font

ufficioDisplay → Verlag

Body size

16px → 16px

colors 72 changed

~ bg #000000 → #ffffff

~ surface #111111 → #ffffff

~ text #ffffff → #000000

~ text-strong #ffffff → #000000

~ text-muted #a1a1a1 → #cccccc

~ text-soft #cfcfcf → #525252

~ text-faint #6b6b6b → #a0a0a0

~ brand #ffffff → #f26625

~ brand-deep #e5e5e5 → #cc4f00

~ brand-soft #1a1a1a → rgba(242, 102, 37, 0.10)

~ on-brand #000000 → #ffffff

~ link #ffffff → #000099

~ link-hover #cfcfcf → #000066

~ link-visited #a1a1a1 → #828282

~ disabled #2a2a2a → #cccccc

~ border #1f1f1f → #cccccc

~ border-strong #2e2e2e → #828282

~ border-subtle #141414 → #e6e6e6

~ success-bg #0b1f12 → #e8f5e0

~ success-text #86efac → #2d5016

~ warning-bg #231803 → #fff4d6

~ warning-text #fcd34d → #7a5e00

~ danger-bg #230b0b → #fde0d4

~ danger-text #fca5a5 → #8a2a0a

~ info-bg #04222a → #e0e8f5

~ info-text #a5f3fc → #000099

+ bg-paste #f6f6ef

+ bg-warm-tint #fff6f0

+ bg-cool #fafafa

+ surface-elevated #ffffff

+ text-medium #404040

+ text-meta #828282

+ brand-classic #ff6600

+ brand-hover #e85d00

+ accent-startup-school #ff8c42

+ accent-warm-cream #fff6f0

+ link-yc #000000

+ selected-bg #fff6f0

+ cta-bg #f26625

+ cta-text #ffffff

+ ink-100 #000000

+ ink-200 #404040

+ ink-300 #525252

+ ink-400 #828282

+ ink-500 #a0a0a0

+ ink-600 #cccccc

+ ink-700 #e6e6e6

+ ink-800 #f6f6ef

+ border-orange rgba(242, 102, 37, 0.40)

+ shadow-color rgba(0, 0, 0, 0.06)

+ shadow-warm rgba(242, 102, 37, 0.15)

− bg-alt #0a0a0a

− surface-deep #080808

− surface-raised #1a1a1a

− text-body #ededed

− accent-violet #8b5cf6

− accent-violet-soft #1e1633

− accent-cyan #22d3ee

− selected #1a1a1a

− neutral-50 #fafafa

− neutral-100 #ededed

− neutral-300 #a1a1a1

− neutral-500 #6b6b6b

− neutral-700 #2a2a2a

− neutral-900 #111111

− shadow-ambient rgba(0,0,0,0.5)

− shadow-deep rgba(0,0,0,0.75)

− shadow-glow rgba(255,255,255,0.06)

− success #22c55e

− warning #f59e0b

− danger #ef4444

− info #22d3ee

typography 5 changed

~ display {"family":"ufficioDisplay","size":80} → {"family":"Verlag","size":80}

~ h1 {"family":"ufficioDisplay","size":40} → {"family":"Verlag","size":48}

~ h2 {"family":"ufficioDisplay","size":32} → {"family":"Verlag","size":32}

~ body {"family":"canvaSans","size":16} → {"family":"Verdana","size":16}

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

radius 3 changed

~ button 8px → 0px

~ card 12px → 0px

~ pill 9999px → 0px

spacing 5 changed

~ xs 0px → 1px

~ sm 4px → 2px

~ md 12px → 6px

~ lg 32px → 12px

~ xl 64px → 20px

↻ Swap direction · Y Combinator → Leonardo.Ai