Diff

Plain vs Kit

51 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #f9f7f4

Text

#000000 → #1e1e1e

Brand

#1ad379 → #44b1ff

Border

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

Display font

ABC Favorit → KitSansFont

Body size

16px → 18px

colors 43 changed

~ bg #ffffff → #f9f7f4

~ bg-tertiary #fafafa → #ebe6dd

~ surface-elev #fafafa → #fffdf9

~ text #000000 → #1e1e1e

~ text-strong #000000 → #0f0f0f

~ text-medium #1a1a1a → #000000cc

~ text-soft #5b5b5b → #00000099

~ text-faint #8a8a8a → #00000066

~ text-muted #b8b8b8 → #0000004d

~ brand #1ad379 → #44b1ff

~ brand-deep #0a8f4f → #2c8fd6

~ brand-soft #e8faf0 → #44b1ffd9

~ brand-tint #b8f0d2 → #bce1fa

~ on-brand #000000 → #1e1e1e

~ link #000000 → #44b1ff

~ link-hover #1ad379 → #2c8fd6

~ selected-bg #f5f5f5 → #f2efe9

~ disabled #b8b8b8 → #0000004d

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

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

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

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

~ success-bg #e8faf0 → #b9e9c5

~ success-text #0a8f4f → #1f4d2c

~ warning-bg #fff4e0 → #fce8b8

~ warning-text #7a4a00 → #7a5a00

~ danger-bg #fde6e6 → #f7c4cd

~ danger-text #a82020 → #a8113a

~ info-bg #eef2f7 → #bce1fa

~ info-text #1a1a1a → #1a3a7a

+ 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

− bg-secondary #f5f5f5

− brand-hover #0fb866

− cta-bg #1ad379

− cta-text #000000

typography 5 changed

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

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

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

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

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

radius 2 changed

~ button 6px → 8px

~ card 8px → 16px

spacing 1 changed

~ xl 32px → 24px

↻ Swap direction · Kit → Plain