Diff

Composio vs Vite

53 token-level differences between these two design systems.

Role tokens
Background
#0f0f0f #1b1b1f
Text
#ffffff #ffffffdd
Brand
#0007cd #646cff
Border
#222222 #3c3f44
Display font
abcDiatype Manrope
Body size
16px 16px
colors 48 changed
~ bg #0f0f0f #1b1b1f
~ surface #181818 #252529
~ text #ffffff #ffffffdd
~ text-muted #888888 #ebebf599
~ text-faint #666666 #ebebf538
~ brand #0007cd #646cff
~ brand-active #0005a3 #4b53e1
~ link #1a26ff #646cff
~ link-hover #0007cd #747bff
~ border #222222 #3c3f44
~ border-soft #1a1a1a #2e2e32
~ border-strong #333333 #5a5d62
~ border-brand rgba(0,7,205,0.4) #646cff
~ shadow-color rgba(0,0,0,0.6) rgba(0, 0, 0, 0.40)
~ accent-cyan #00d4ff #41d1ff
~ success #33d17a #22c55e
~ danger #ff4d4d #ef4444
~ info #1a26ff #41d1ff
+ bg-soft #161618
+ bg-elevated #202127
+ surface-hover #2c2c33
+ surface-active #32323a
+ surface-deep #101013
+ text-soft #ebebf580
+ text-on-brand #ffffff
+ brand-hover #535bf2
+ brand-light #747bff
+ brand-soft #1d1f3a
+ brand-deep #3c44d4
+ accent-purple-deep #bd34fe
+ shadow-color-md rgba(0, 0, 0, 0.50)
+ shadow-color-lg rgba(0, 0, 0, 0.60)
+ shadow-glow-purple rgba(100, 108, 255, 0.25)
+ gradient-bolt linear-gradient(120deg, #bd34fe 30%, #41d1ff)
+ gradient-text linear-gradient(120deg, #bd34fe 30%, #41d1ff)
+ code-bg #161618
+ code-keyword #c792ea
+ code-string #c3e88d
+ code-comment #697098
+ code-number #f78c6c
bg-deep #000000
surface-elevated #222222
surface-strong #2a2a2a
text-body #a8a8a8
brand-glow #1a26ff
on-dark #ffffff
shadow-glow-blue rgba(26,38,255,0.25)
accent-violet #7b3aed
typography 5 changed
~ display {"family":"abcDiatype","size":72} {"family":"Manrope","size":64}
~ h1 {"family":"abcDiatype","size":40} {"family":"Manrope","size":40}
~ h2 {"family":"abcDiatype","size":32} {"family":"Manrope","size":32}
~ body {"family":"abcDiatype","size":16} {"family":"Inter","size":16}
~ label {"family":"JetBrains Mono","size":11} {"family":"Fira Code","size":11}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Vite → Composio