Diff

Phantom vs AgentKit

47 token-level differences between these two design systems.

Role tokens
Background
#0c0c0e #0a0a0a
Text
#ffffff #ededed
Brand
#ab9ff2 #c6f432
Border
rgba(255, 255, 255, 0.08) rgba(255, 255, 255, 0.08)
Display font
Phantom Sans Inter Variable
Body size
15px 15px
colors 41 changed
~ bg #0c0c0e #0a0a0a
~ bg-elev #1f1f25 #0f0f0f
~ brand #ab9ff2 #c6f432
~ brand-hover #bdb3f6 #d2f854
~ brand-pressed #9b8ee8 #b6e426
~ brand-deep #534bb1 #9bcc1f
~ brand-tint rgba(171, 159, 242, 0.15) rgba(198, 244, 50, 0.10)
~ text #ffffff #ededed
~ text-faint #5a5a6c #525252
~ text-on-brand #0c0c0e #0a0a0a
~ link #ab9ff2 #c6f432
~ border-strong rgba(255, 255, 255, 0.16) rgba(255, 255, 255, 0.15)
~ border-brand #ab9ff2 rgba(198, 244, 50, 0.25)
~ success #5dd4a8 #22c55e
~ warning #f5c842 #f59e0b
~ danger #ff6b6b #ef4444
~ info #ab9ff2 #60a5fa
+ bg-card #141416
+ bg-card-hover #1a1a1c
+ bg-card-active #202024
+ surface-overlay rgba(10, 10, 10, 0.72)
+ text-dim #8a8a8a
+ text-disabled #3a3a3a
+ brand-tint-strong rgba(198, 244, 50, 0.25)
+ border-subtle rgba(255, 255, 255, 0.04)
+ border-brand-strong rgba(198, 244, 50, 0.45)
+ selection-bg rgba(198, 244, 50, 0.30)
+ focus-ring #c6f432
+ link-visited #9bcc1f
bg-deep #06060a
bg-section #15151a
surface #15151a
surface-strong #22222a
surface-translucent rgba(12, 12, 14, 0.85)
brand-deeper #3d3686
on-brand #0c0c0e
text-muted #a8a8b8
text-soft #7a7a8c
link-hover #ffffff
selected-bg rgba(171, 159, 242, 0.15)
ghost-glow #ab9ff2
typography 5 changed
~ display {"family":"Phantom Sans","size":88} {"family":"Inter Variable","size":72}
~ h1 {"family":"Phantom Sans","size":40} {"family":"Inter Variable","size":48}
~ h2 {"family":"Phantom Sans","size":32} {"family":"Inter Variable","size":40}
~ body {"family":"Phantom Sans","size":15} {"family":"Inter Variable","size":15}
~ label {"family":"JetBrains Mono","size":12} {"family":"JetBrains Mono Variable","size":11}
radius 1 changed
~ card 12px 16px
spacing identical
No differences.
↻ Swap direction · AgentKit → Phantom