Diff

Kit vs Plain

51 token-level differences between these two design systems.

Role tokens

Background

#f9f7f4 → #ffffff

Text

#1e1e1e → #000000

Brand

#44b1ff → #1ad379

Border

#0000000f → rgba(0, 0, 0, 0.08)

Display font

KitSansFont → ABC Favorit

Body size

18px → 16px

colors 43 changed

~ bg #f9f7f4 → #ffffff

~ bg-tertiary #ebe6dd → #fafafa

~ surface-elev #fffdf9 → #fafafa

~ text #1e1e1e → #000000

~ text-strong #0f0f0f → #000000

~ text-medium #000000cc → #1a1a1a

~ text-soft #00000099 → #5b5b5b

~ text-faint #00000066 → #8a8a8a

~ text-muted #0000004d → #b8b8b8

~ brand #44b1ff → #1ad379

~ brand-soft #44b1ffd9 → #e8faf0

~ brand-deep #2c8fd6 → #0a8f4f

~ brand-tint #bce1fa → #b8f0d2

~ on-brand #1e1e1e → #000000

~ link #44b1ff → #000000

~ link-hover #2c8fd6 → #1ad379

~ selected-bg #f2efe9 → #f5f5f5

~ disabled #0000004d → #b8b8b8

~ border #0000000f → rgba(0, 0, 0, 0.08)

~ border-strong #00000019 → rgba(0, 0, 0, 0.16)

~ border-subtle #00000008 → rgba(0, 0, 0, 0.04)

~ border-brand rgba(68, 177, 255, 0.30) → rgba(26, 211, 121, 0.30)

~ success-bg #b9e9c5 → #e8faf0

~ success-text #1f4d2c → #0a8f4f

~ warning-bg #fce8b8 → #fff4e0

~ warning-text #7a5a00 → #7a4a00

~ danger-bg #f7c4cd → #fde6e6

~ danger-text #a8113a → #a82020

~ info-bg #bce1fa → #eef2f7

~ info-text #1a3a7a → #1a1a1a

+ bg-secondary #f5f5f5

+ brand-hover #0fb866

+ cta-bg #1ad379

+ cta-text #000000

− bg-alt #f2efe9

− 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

typography 5 changed

~ display {"family":"KitSansFont","size":96} → {"family":"ABC Favorit","size":96}

~ h1 {"family":"KitSansFont","size":64} → {"family":"ABC Favorit","size":64}

~ h2 {"family":"KitSansFont","size":48} → {"family":"ABC Favorit","size":48}

~ body {"family":"Libre Franklin","size":18} → {"family":"ABC Favorit","size":16}

~ label {"family":"JetBrains Mono","size":12} → {"family":"ABC Favorit Mono","size":11}

radius 2 changed

~ button 8px → 6px

~ card 16px → 8px

spacing 1 changed

~ xl 24px → 32px

↻ Swap direction · Plain → Kit