Diff

Y Combinator vs Replicate

56 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #202020
Brand
#f26625 #202020
Border
#cccccc #e9e9e9
Display font
Verlag rb-freigeist-neue
Body size
16px 16px
colors 50 changed
~ surface #ffffff #fcfcfc
~ text #000000 #202020
~ text-soft #525252 #646464
~ text-faint #a0a0a0 #b3b3b3
~ text-muted #cccccc #8a8a8a
~ brand #f26625 #202020
~ brand-deep #cc4f00 #000000
~ on-brand #ffffff #fcfcfc
~ link #000099 #202020
~ link-hover #000066 #000000
~ selected-bg #fff6f0 #f5f5f5
~ disabled #cccccc #b3b3b3
~ border #cccccc #e9e9e9
~ border-strong #828282 #cccccc
~ border-subtle #e6e6e6 #f0f0f0
~ success-bg #e8f5e0 #e7f5ec
~ success-text #2d5016 #1f6b3e
~ warning-bg #fff4d6 #fef6e4
~ warning-text #7a5e00 #7a5a14
~ danger-bg #fde0d4 #fbebec
~ danger-text #8a2a0a #9a2c34
~ info-bg #e0e8f5 #eef2f7
~ info-text #000099 #1f4a7a
+ bg-alt #fdfdfd
+ surface-light #f5f5f5
bg-paste #f6f6ef
bg-warm-tint #fff6f0
bg-cool #fafafa
surface-elevated #ffffff
text-meta #828282
brand-classic #ff6600
brand-hover #e85d00
brand-soft rgba(242, 102, 37, 0.10)
accent-startup-school #ff8c42
accent-warm-cream #fff6f0
link-visited #828282
link-yc #000000
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)
typography 5 changed
~ display {"family":"Verlag","size":80} {"family":"rb-freigeist-neue","size":96}
~ h1 {"family":"Verlag","size":48} {"family":"rb-freigeist-neue","size":56}
~ h2 {"family":"Verlag","size":32} {"family":"rb-freigeist-neue","size":48}
~ body {"family":"Verdana","size":16} {"family":"basier-square","size":16}
~ label {"family":"Monaco","size":11} {"family":"jetbrains-mono","size":11}
radius 1 changed
~ pill 0px 9999px
spacing identical
No differences.
↻ Swap direction · Replicate → Y Combinator