Diff

Hume AI vs Character.AI

64 token-level differences between these two design systems.

Role tokens

Background

#fff9f3 → #f4f4f5

Text

#222222 → #26272b

Brand

#222222 → #9b6cff

Border

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

Display font

Fellix → atHauss

Body size

16px → 16px

colors 51 changed

~ bg #fff9f3 → #f4f4f5

~ bg-soft #fdf4ec → #fafafa

~ surface #f7ede1 → #ffffff

~ surface-strong #efe2d2 → #e4e4e7

~ surface-hover #f4e8da → #f8f8f9

~ text #222222 → #26272b

~ text-strong #000000 → #0f0f12

~ text-medium #3a3633 → #3f3f46

~ text-muted #5c554e → #6b6c70

~ text-soft #7a7269 → #8a8b8f

~ text-faint #a89e92 → #a1a1a6

~ on-brand #fff9f3 → #fafafa

~ on-cta #fff9f3 → #fafafa

~ brand #222222 → #9b6cff

~ brand-soft #3a3633 → #ede4ff

~ link #222222 → #202024

~ link-hover #000000 → #9b6cff

~ selected-bg #f3e7da → #ede4ff

~ disabled-bg #f4e8da → #e4e4e7

~ disabled-text #a89e92 → #a1a1a6

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

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

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

~ border-focus #222222 → #9b6cff

~ success-bg #e3efe0 → #dcfce7

~ success-text #3f6b3a → #15803d

~ warning-bg #fbeecf → #fef3c7

~ warning-text #8a6420 → #854d0e

~ danger-bg #f7e0db → #fee2e2

~ danger-text #a4362a → #b91c1c

~ info-bg #e8e6e3 → #ede4ff

~ info-text #3a3633 → #5a2ee0

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

+ 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

− brand-hover #000000

− accent #e8d5c4

− accent-deep #d9bfa6

− accent-faint #f3e7da

− shadow-warm 160, 120, 80

typography 5 changed

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

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

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

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

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

radius 3 changed

~ button 10px → 12px

~ card 18px → 16px

~ pill 9999px → 30px

spacing 5 changed

~ xs 0px → 1px

~ sm 4px → 2px

~ md 12px → 6px

~ lg 32px → 16px

~ xl 64px → 24px

↻ Swap direction · Character.AI → Hume AI