Diff

Composio vs Capacities

59 token-level differences between these two design systems.

Role tokens
Background
#0f0f0f #ffffff
Text
#ffffff #1a1a1f
Brand
#0007cd #c6f432
Border
#222222 #0000001a
Display font
abcDiatype Inter
Body size
16px 17px
colors 53 changed
~ bg #0f0f0f #ffffff
~ surface #181818 #faf3df
~ text #ffffff #1a1a1f
~ text-strong #ffffff #0e0f12
~ text-muted #888888 #6b6770
~ text-faint #666666 #c4c0c8
~ on-brand #ffffff #1a1a1f
~ link #1a26ff #1a1a1f
~ link-hover #0007cd #0e0f12
~ border #222222 #0000001a
~ border-soft #1a1a1a #00000010
~ border-strong #333333 #00000033
~ success #33d17a #5b9a4f
~ warning #f59e0b #e6b430
~ danger #ff4d4d #c4554d
~ info #1a26ff #5a8eb5
+ bg-cream #fff4d6
+ bg-cream-soft #fff9e8
+ bg-soft #fef9e8
+ bg-tinted #fdf6e3
+ surface-raised #f5edd0
+ surface-overlay #ffffff
+ text-soft #9a969f
+ text-on-cta #ffffff
+ text-on-yellow #1a1a1f
+ brand-yellow #f5c842
+ brand-yellow-deep #e6b430
+ brand-yellow-soft #fce98c
+ brand-yellow-pale #fef4c2
+ cta-bg #1a1a1f
+ cta-text #ffffff
+ cta-hover #0e0f12
+ cta-active #000000
+ link-underline #f5c842
+ border-cream #e8dfb8
+ focus-ring #1a1a1f
+ selection-bg #fce98c
+ selection-text #1a1a1f
+ shadow rgba(0,0,0,0.06)
+ shadow-warm rgba(180,140,40,0.10)
bg-deep #000000
surface-elevated #222222
surface-strong #2a2a2a
text-body #a8a8a8
brand #0007cd
brand-active #0005a3
brand-glow #1a26ff
on-dark #ffffff
border-brand rgba(0,7,205,0.4)
shadow-color rgba(0,0,0,0.6)
shadow-glow-blue rgba(26,38,255,0.25)
accent-cyan #00d4ff
accent-violet #7b3aed
typography 5 changed
~ display {"family":"abcDiatype","size":72} {"family":"Inter","size":72}
~ h1 {"family":"abcDiatype","size":40} {"family":"Inter","size":64}
~ h2 {"family":"abcDiatype","size":32} {"family":"Inter","size":48}
~ body {"family":"abcDiatype","size":16} {"family":"Inter","size":17}
~ label {"family":"JetBrains Mono","size":11} {"family":"JetBrains Mono","size":13}
radius 1 changed
~ card 12px 24px
spacing identical
No differences.
↻ Swap direction · Capacities → Composio