Diff

Paddle vs Y Combinator

90 token-level differences between these two design systems.

Role tokens
Background
#0e1414 #ffffff
Text
#0e1414 #000000
Brand
#e4e1d1 #f26625
Border
#d9d3c9 #cccccc
Display font
serrifCondensed Verlag
Body size
16px 16px
colors 77 changed
~ bg #0e1414 #ffffff
~ surface #fcfcfc #ffffff
~ text #0e1414 #000000
~ brand #e4e1d1 #f26625
~ on-brand #1c1a15 #ffffff
~ border #d9d3c9 #cccccc
+ bg-paste #f6f6ef
+ bg-warm-tint #fff6f0
+ bg-cool #fafafa
+ surface-elevated #ffffff
+ text-strong #000000
+ text-medium #404040
+ text-soft #525252
+ text-meta #828282
+ text-faint #a0a0a0
+ text-muted #cccccc
+ brand-classic #ff6600
+ brand-hover #e85d00
+ brand-deep #cc4f00
+ brand-soft rgba(242, 102, 37, 0.10)
+ accent-startup-school #ff8c42
+ accent-warm-cream #fff6f0
+ link #000099
+ link-hover #000066
+ link-visited #828282
+ link-yc #000000
+ selected-bg #fff6f0
+ disabled #cccccc
+ 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-strong #828282
+ border-subtle #e6e6e6
+ border-orange rgba(242, 102, 37, 0.40)
+ shadow-color rgba(0, 0, 0, 0.06)
+ shadow-warm rgba(242, 102, 37, 0.15)
+ success-bg #e8f5e0
+ success-text #2d5016
+ warning-bg #fff4d6
+ warning-text #7a5e00
+ danger-bg #fde0d4
+ danger-text #8a2a0a
+ info-bg #e0e8f5
+ info-text #000099
bg-canvas #0e1414
surface-warm #f9f8f7
surface-sand #ebe7df
surface-sand-deep #e8e6e2
surface-cream #e4e1d1
surface-clay #d6cbb6
surface-ink #1c1a15
text-ink #1c1a15
text-slate #2b3033
text-on-dark #fcfcfc
text-on-dark-soft rgba(252,252,252,0.8)
text-on-dark-muted rgba(252,252,252,0.6)
brand-cream #e4e1d1
brand-ink #1c1a15
on-brand-ink #fcfcfc
accent #ffd400
accent-yellow #ffd400
border-sand #ebe7df
border-ink #0e1414
border-on-dark rgba(252,252,252,0.1)
border-faint rgba(252,252,252,0.02)
link-on-dark rgba(252,252,252,0.6)
link-on-light #1c1a15
success #108c3d
warning #9b6829
danger #b42318
typography 5 changed
~ display {"family":"serrifCondensed","size":72} {"family":"Verlag","size":80}
~ h1 {"family":"serrifCondensed","size":48} {"family":"Verlag","size":48}
~ h2 {"family":"serrifCondensed","size":40} {"family":"Verlag","size":32}
~ body {"family":"Inter","size":16} {"family":"Verdana","size":16}
~ label {"family":"SFMono-Regular","size":13} {"family":"Monaco","size":11}
radius 3 changed
~ button 10px 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 → Paddle