Diff

Y Combinator vs Notion

75 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #000000e6
Brand
#f26625 #0075de
Border
#cccccc #0000001a
Display font
Verlag NotionInter
Body size
16px 16px
colors 67 changed
~ surface #ffffff #f6f5f4
~ text #000000 #000000e6
~ text-strong #000000 #000000f2
~ text-soft #525252 #00000096
~ text-faint #a0a0a0 #00000061
~ text-muted #cccccc #0000008a
~ brand #f26625 #0075de
~ brand-hover #e85d00 #005bab
~ brand-soft rgba(242, 102, 37, 0.10) #e6f3fe
~ border #cccccc #0000001a
~ border-strong #828282 #00000033
~ success-bg #e8f5e0 #e8f5ee
~ warning-bg #fff4d6 #fdf3e0
~ danger-bg #fde0d4 #fbeae8
~ info-bg #e0e8f5 #e6f3fe
+ bg-campaign #191918
+ bg-soft #fbfaf9
+ surface-hover #dfdcd9
+ surface-soft #f9f9f8
+ surface-strong #eeede8
+ surface-dark #28272a
+ text-display #000000
+ text-on-dark #ffffff
+ text-on-dark-muted #ffffffb3
+ brand-active #00396b
+ campaign-launch #455dd3
+ accent #62aef0
+ accent-strong #097fe8
+ border-soft #00000014
+ success #0a8754
+ warning #a06b00
+ danger #a02b1d
+ info #0075de
bg-paste #f6f6ef
bg-warm-tint #fff6f0
bg-cool #fafafa
surface-elevated #ffffff
text-medium #404040
text-meta #828282
brand-classic #ff6600
brand-deep #cc4f00
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-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-text #2d5016
warning-text #7a5e00
danger-text #8a2a0a
info-text #000099
typography 5 changed
~ display {"family":"Verlag","size":80} {"family":"NotionInter","size":80}
~ h1 {"family":"Verlag","size":48} {"family":"NotionInter","size":48}
~ h2 {"family":"Verlag","size":32} {"family":"NotionInter","size":40}
~ body {"family":"Verdana","size":16} {"family":"NotionInter","size":16}
~ label {"family":"Monaco","size":11} {"family":"iA Writer Mono","size":11}
radius 3 changed
~ button 0px 6px
~ card 0px 12px
~ pill 0px 9999px
spacing identical
No differences.
↻ Swap direction · Notion → Y Combinator