Diff

v0 vs Ghost

63 token-level differences between these two design systems.

Role tokens
Background
#fafafa #fff8ed
Text
#262626 #15171a
Brand
#000000 #30cf43
Border
rgba(0, 0, 0, 0.078) #e5e1d6
Display font
GeistSans Inter
Body size
14px 17px
colors 52 changed
~ bg #fafafa #fff8ed
~ surface #f2f2f2 #f4f3ef
~ surface-soft #f0f0f0 #faf8f3
~ text #262626 #15171a
~ text-strong #000000 #0b0c0e
~ text-muted #7c7c7c #54595f
~ text-soft #bababa #7c8087
~ text-faint #cfcfcf #a4a8af
~ brand #000000 #30cf43
~ brand-soft rgba(0, 0, 0, 0.08) #e5fae8
~ border rgba(0, 0, 0, 0.078) #e5e1d6
~ border-strong rgba(0, 0, 0, 0.14) #d6d0bf
~ border-focus #000000 #30cf43
~ success-bg #f0f7f1 #e5fae8
~ warning-bg #fef6e4 #fef3c7
~ danger-bg #fbebec #fde2e4
~ info-bg #f2f2f2 #e3ecff
+ bg-alt #ffffff
+ bg-cream-deep #fef0d9
+ surface-2 #ebe9e0
+ surface-3 #e0ddd1
+ surface-warm #fff5e1
+ text-on-brand #ffffff
+ text-on-dark #fff8ed
+ brand-hover #26b337
+ brand-active #1f9b2f
+ accent #ff1a75
+ accent-soft #ffe7f0
+ accent-deep #cc1561
+ accent-blue #3b73ff
+ accent-blue-soft #e3ecff
+ border-soft #f0ece1
+ bg-dark #15171a
+ surface-dark #1d1f23
+ success #30cf43
+ warning #f59e0b
+ danger #e63946
+ info #3b73ff
bg-pure #ffffff
surface-strong #e6e6e6
text-medium #525252
text-deep #969696
brand-deep #000000
link #000000
link-hover #525252
selected-bg #f2f2f2
disabled #bababa
border-subtle rgba(0, 0, 0, 0.05)
success-text #1f6b3e
warning-text #7a5a14
danger-text #9a2c34
info-text #262626
typography 5 changed
~ display {"family":"GeistSans","size":48} {"family":"Inter","size":80}
~ h1 {"family":"GeistSans","size":32} {"family":"Inter","size":44}
~ h2 {"family":"GeistSans","size":24} {"family":"Inter","size":36}
~ body {"family":"GeistSans","size":14} {"family":"Inter","size":17}
~ label {"family":"GeistMono","size":12} {"family":"JetBrains Mono","size":14}
radius 1 changed
~ card 12px 24px
spacing 5 changed
~ xs 1px 0px
~ sm 2px 4px
~ md 6px 12px
~ lg 12px 24px
~ xl 20px 40px
↻ Swap direction · Ghost → v0