Diff

beehiiv vs Kit

62 token-level differences between these two design systems.

Role tokens
Background
#ffffff #f9f7f4
Text
#000000 #1e1e1e
Brand
#ffd60a #44b1ff
Border
#000000 #0000000f
Display font
PP Neue Machina KitSansFont
Body size
16px 18px
colors 57 changed
~ bg #ffffff #f9f7f4
~ surface #fafafa #ffffff
~ text #000000 #1e1e1e
~ text-strong #000000 #0f0f0f
~ text-muted #666666 #0000004d
~ text-soft #999999 #00000099
~ text-faint #cccccc #00000066
~ brand #ffd60a #44b1ff
~ brand-soft #fff7c2 #44b1ffd9
~ border #000000 #0000000f
~ on-brand #000000 #1e1e1e
~ success-bg #dcfce7 #b9e9c5
~ warning-bg #fef3c7 #fce8b8
~ danger-bg #fee2e2 #f7c4cd
~ info-bg #fafafa #bce1fa
+ bg-alt #f2efe9
+ bg-tertiary #ebe6dd
+ surface-elev #fffdf9
+ text-medium #000000cc
+ brand-deep #2c8fd6
+ 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
+ link #44b1ff
+ link-hover #2c8fd6
+ selected-bg #f2efe9
+ disabled #0000004d
+ border-strong #00000019
+ border-subtle #00000008
+ border-brand rgba(68, 177, 255, 0.30)
+ success-text #1f4d2c
+ warning-text #7a5a00
+ danger-text #a8113a
+ info-text #1a3a7a
bg-yellow #ffd60a
bg-yellow-soft #fff7c2
bg-yellow-deep #e6c000
surface-2 #f0f0f0
surface-3 #e5e5e5
text-display #000000
text-on-yellow #000000
text-on-yellow-muted #000000a8
brand-hover #e6c000
brand-active #cca800
accent #000000
accent-soft #1a1a1a
border-soft #e5e5e5
success #15803d
warning #a16207
danger #b91c1c
info #000000
typography 4 changed
~ display {"family":"PP Neue Machina","size":112} {"family":"KitSansFont","size":96}
~ h1 {"family":"PP Neue Machina","size":56} {"family":"KitSansFont","size":64}
~ h2 {"family":"PP Neue Machina","size":40} {"family":"KitSansFont","size":48}
~ body {"family":"Inter","size":16} {"family":"Libre Franklin","size":18}
radius 1 changed
~ card 12px 16px
spacing identical
No differences.
↻ Swap direction · Kit → beehiiv