Diff

v0 vs Kit

54 token-level differences between these two design systems.

Role tokens
Background
#fafafa #f9f7f4
Text
#262626 #1e1e1e
Brand
#000000 #44b1ff
Border
rgba(0, 0, 0, 0.078) #0000000f
Display font
GeistSans KitSansFont
Body size
14px 18px
colors 45 changed
~ bg #fafafa #f9f7f4
~ surface #f2f2f2 #ffffff
~ text #262626 #1e1e1e
~ text-strong #000000 #0f0f0f
~ text-medium #525252 #000000cc
~ text-muted #7c7c7c #0000004d
~ text-soft #bababa #00000099
~ text-faint #cfcfcf #00000066
~ brand #000000 #44b1ff
~ brand-deep #000000 #2c8fd6
~ brand-soft rgba(0, 0, 0, 0.08) #44b1ffd9
~ on-brand #ffffff #1e1e1e
~ link #000000 #44b1ff
~ link-hover #525252 #2c8fd6
~ selected-bg #f2f2f2 #f2efe9
~ disabled #bababa #0000004d
~ border rgba(0, 0, 0, 0.078) #0000000f
~ border-strong rgba(0, 0, 0, 0.14) #00000019
~ border-subtle rgba(0, 0, 0, 0.05) #00000008
~ success-bg #f0f7f1 #b9e9c5
~ success-text #1f6b3e #1f4d2c
~ warning-bg #fef6e4 #fce8b8
~ warning-text #7a5a14 #7a5a00
~ danger-bg #fbebec #f7c4cd
~ danger-text #9a2c34 #a8113a
~ info-bg #f2f2f2 #bce1fa
~ info-text #262626 #1a3a7a
+ bg-alt #f2efe9
+ bg-tertiary #ebe6dd
+ surface-elev #fffdf9
+ brand-tint #bce1fa
+ accent-sky #bce1fa
+ accent-sky-deep #a2d1f1
+ accent-peach #ffd0ad
+ accent-mint #b9e9c5
+ accent-lilac #e7c9f1
+ accent-gold #f2ba41
+ accent-gold-soft #fce8b8
+ accent-rose #f7c4cd
+ border-brand rgba(68, 177, 255, 0.30)
bg-pure #ffffff
surface-soft #f0f0f0
surface-strong #e6e6e6
text-deep #969696
border-focus #000000
typography 5 changed
~ display {"family":"GeistSans","size":48} {"family":"KitSansFont","size":96}
~ h1 {"family":"GeistSans","size":32} {"family":"KitSansFont","size":64}
~ h2 {"family":"GeistSans","size":24} {"family":"KitSansFont","size":48}
~ body {"family":"GeistSans","size":14} {"family":"Libre Franklin","size":18}
~ label {"family":"GeistMono","size":12} {"family":"JetBrains Mono","size":12}
radius 2 changed
~ button 6px 8px
~ card 12px 16px
spacing 2 changed
~ lg 12px 16px
~ xl 20px 24px
↻ Swap direction · Kit → v0