Diff

Character.AI vs Hume AI

64 token-level differences between these two design systems.

Role tokens

Background

#f4f4f5 → #fff9f3

Text

#26272b → #222222

Brand

#9b6cff → #222222

Border

rgba(38, 39, 43, 0.12) → #e7dccd

Display font

atHauss → Fellix

Body size

16px → 16px

colors 51 changed

~ bg #f4f4f5 → #fff9f3

~ bg-soft #fafafa → #fdf4ec

~ surface #ffffff → #f7ede1

~ surface-hover #f8f8f9 → #f4e8da

~ surface-strong #e4e4e7 → #efe2d2

~ text #26272b → #222222

~ text-strong #0f0f12 → #000000

~ text-medium #3f3f46 → #3a3633

~ text-muted #6b6c70 → #5c554e

~ text-soft #8a8b8f → #7a7269

~ text-faint #a1a1a6 → #a89e92

~ on-brand #fafafa → #fff9f3

~ on-cta #fafafa → #fff9f3

~ brand #9b6cff → #222222

~ brand-soft #ede4ff → #3a3633

~ link #202024 → #222222

~ link-hover #9b6cff → #000000

~ selected-bg #ede4ff → #f3e7da

~ disabled-bg #e4e4e7 → #f4e8da

~ disabled-text #a1a1a6 → #a89e92

~ border rgba(38, 39, 43, 0.12) → #e7dccd

~ border-strong rgba(38, 39, 43, 0.20) → #d9cdbb

~ border-soft rgba(38, 39, 43, 0.06) → #f0e6d9

~ border-focus #9b6cff → #222222

~ success-bg #dcfce7 → #e3efe0

~ success-text #15803d → #3f6b3a

~ warning-bg #fef3c7 → #fbeecf

~ warning-text #854d0e → #8a6420

~ danger-bg #fee2e2 → #f7e0db

~ danger-text #b91c1c → #a4362a

~ info-bg #ede4ff → #e8e6e3

~ info-text #5a2ee0 → #3a3633

~ shadow-rgb 38, 39, 43 → 34, 28, 22

+ brand-hover #000000

+ accent #e8d5c4

+ accent-deep #d9bfa6

+ accent-faint #f3e7da

+ shadow-warm 160, 120, 80

− bg-elevated #ffffff

− brand-strong #7e4cff

− brand-deep #5a2ee0

− brand-faint #f7f2ff

− brand-glow rgba(155, 108, 255, 0.32)

− cta-bg #202024

− cta-bg-strong #0f0f12

− cta-text #fafafa

− social-bg #131316

− social-bg-hover #202024

− social-text #fafafa

− border-focus-cta #202024

− shadow-glow 155, 108, 255

typography 5 changed

~ display {"family":"atHauss","size":64} → {"family":"Fellix","size":80}

~ h1 {"family":"atHauss","size":36} → {"family":"Fellix","size":48}

~ h2 {"family":"atHauss","size":28} → {"family":"Fellix","size":36}

~ body {"family":"atHauss","size":16} → {"family":"Fellix","size":16}

~ label {"family":"JetBrains Mono","size":12} → {"family":"SFMono-Regular","size":13}

radius 3 changed

~ button 12px → 10px

~ card 16px → 18px

~ pill 30px → 9999px

spacing 5 changed

~ xs 1px → 0px

~ sm 2px → 4px

~ md 6px → 12px

~ lg 16px → 32px

~ xl 24px → 64px

↻ Swap direction · Hume AI → Character.AI