Diff

Stability AI vs Inngest

63 token-level differences between these two design systems.

Role tokens
Background
#1e1e1e #0c0a09
Text
#ffffff #f6f6f6
Brand
#a381ff #cbb26a
Border
#000000 #27241f
Display font
Archivo Whyte
Body size
16px 16px
colors 54 changed
~ bg #1e1e1e #0c0a09
~ surface #252525 #16130f
~ text #ffffff #f6f6f6
~ text-muted #b2b2b2 #a8a39b
~ text-faint #7a7a7a #57534e
~ brand #a381ff #cbb26a
~ brand-soft #2a2140 #cbb26a1f
~ on-brand #ffffff #1a161c
~ link #a381ff #4078f2
~ selected #2a2140 #cbb26a26
~ disabled #4a4a4a #211c16
~ border #000000 #27241f
~ border-strong #3a3a3a #ffffff1f
~ success #4ade80 #3ecf8e
~ success-bg #16281c #0f2a1d
~ warning #fbbf24 #cbb26a
~ warning-bg #2a210d #2a2310
~ danger #f87171 #ef4444
~ info #a381ff #4078f2
~ info-bg #211b33 #101a2e
+ bg-deep #070605
+ surface-alt #1a161c
+ surface-muted #211c16
+ brand-hover #d8c285
+ brand-pressed #b89a55
+ accent #cbb26a
+ disabled-text #6b665f
+ text-heading #fafaf9
+ text-soft #7c7770
+ border-soft #ffffff0f
+ border-brand #cbb26a66
+ shadow-standard rgba(0,0,0,0.55)
+ shadow-elevated rgba(0,0,0,0.7)
bg-alt #191919
surface-raised #2c2c2c
text-strong #ffffff
text-body #e5e7e6
brand-deep #330066
on-brand-dark #1e1e1e
link-hover #bba6ff
link-visited #8e6cff
neutral-50 #f5f5f5
neutral-100 #e5e7e6
neutral-300 #b2b2b2
neutral-500 #7a7a7a
neutral-700 #3a3a3a
neutral-900 #191919
border-subtle #2a2a2a
shadow-deep rgba(0,0,0,0.7)
shadow-violet rgba(163,129,255,0.25)
success-text #86efac
warning-text #fcd34d
danger-text #fca5a5
info-text #bba6ff
typography 4 changed
~ display {"family":"Archivo","size":72} {"family":"Whyte","size":84}
~ h1 {"family":"Archivo","size":42} {"family":"Whyte","size":72}
~ h2 {"family":"Archivo","size":32} {"family":"Whyte","size":40}
~ body {"family":"Archivo","size":16} {"family":"Circular XX","size":16}
radius 3 changed
~ button 8px 0px
~ card 12px 0px
~ pill 9999px 0px
spacing 2 changed
~ lg 32px 24px
~ xl 64px 40px
↻ Swap direction · Inngest → Stability AI