Diff

Stability AI vs Pika

53 token-level differences between these two design systems.

Role tokens
Background
#1e1e1e #fcfaf7
Text
#ffffff #0d0d0d
Brand
#a381ff #ffd184
Border
#000000 rgba(13, 13, 13, 0.10)
Display font
Archivo telkaExtended
Body size
16px 16px
colors 49 changed
~ bg #1e1e1e #fcfaf7
~ bg-alt #191919 #f5f1ea
~ surface #252525 #ffffff
~ text #ffffff #0d0d0d
~ text-strong #ffffff #000000
~ text-muted #b2b2b2 #5c5c5c
~ text-faint #7a7a7a #b8b8b8
~ brand #a381ff #ffd184
~ brand-deep #330066 #f5be63
~ brand-soft #2a2140 rgba(255, 209, 132, 0.30)
~ on-brand #ffffff #222222
~ link #a381ff #0d0d0d
~ link-hover #bba6ff #000000
~ disabled #4a4a4a #b8b8b8
~ border #000000 rgba(13, 13, 13, 0.10)
~ border-strong #3a3a3a rgba(13, 13, 13, 0.18)
~ border-subtle #2a2a2a rgba(13, 13, 13, 0.05)
~ success-bg #16281c rgba(34, 197, 94, 0.12)
~ success-text #86efac #15803d
~ warning-bg #2a210d rgba(245, 190, 99, 0.20)
~ warning-text #fcd34d #92600c
~ danger-bg #2a1414 rgba(220, 38, 38, 0.10)
~ danger-text #fca5a5 #b91c1c
~ info-bg #211b33 rgba(13, 13, 13, 0.06)
~ info-text #bba6ff #0d0d0d
+ surface-soft #fbf7f0
+ text-soft #8a8a8a
+ ink-cta-bg #000000
+ ink-cta-text #ffffff
+ dark-cta-bg #222222
+ selected-bg rgba(255, 209, 132, 0.30)
surface-raised #2c2c2c
text-body #e5e7e6
on-brand-dark #1e1e1e
link-visited #8e6cff
selected #2a2140
neutral-50 #f5f5f5
neutral-100 #e5e7e6
neutral-300 #b2b2b2
neutral-500 #7a7a7a
neutral-700 #3a3a3a
neutral-900 #191919
shadow-ambient rgba(0,0,0,0.4)
shadow-deep rgba(0,0,0,0.7)
shadow-violet rgba(163,129,255,0.25)
success #4ade80
warning #fbbf24
danger #f87171
info #a381ff
typography 4 changed
~ display {"family":"Archivo","size":72} {"family":"telkaExtended","size":80}
~ h1 {"family":"Archivo","size":42} {"family":"telkaExtended","size":48}
~ h2 {"family":"Archivo","size":32} {"family":"telkaExtended","size":32}
~ body {"family":"Archivo","size":16} {"family":"telka","size":16}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Pika → Stability AI