Diff

Stability AI vs Picoko

53 token-level differences between these two design systems.

Role tokens
Background
#1e1e1e #fbfaf8
Text
#ffffff #121110
Brand
#a381ff #fe1c71
Border
#000000 rgba(18, 17, 16, 0.08)
Display font
Archivo Outfit
Body size
16px 16px
colors 47 changed
~ bg #1e1e1e #fbfaf8
~ bg-alt #191919 #f5f3f0
~ surface #252525 #ffffff
~ text #ffffff #121110
~ text-strong #ffffff #0a0909
~ text-muted #b2b2b2 #6b6663
~ text-faint #7a7a7a #c3bfbb
~ brand #a381ff #fe1c71
~ brand-deep #330066 #e5005c
~ brand-soft #2a2140 rgba(254, 28, 113, 0.10)
~ link #a381ff #121110
~ link-hover #bba6ff #fe1c71
~ disabled #4a4a4a #c3bfbb
~ border #000000 rgba(18, 17, 16, 0.08)
~ border-strong #3a3a3a rgba(18, 17, 16, 0.16)
~ border-subtle #2a2a2a rgba(18, 17, 16, 0.04)
~ success-bg #16281c rgba(34, 197, 94, 0.10)
~ success-text #86efac #15803d
~ warning-bg #2a210d rgba(234, 179, 8, 0.12)
~ warning-text #fcd34d #a16207
~ danger-bg #2a1414 rgba(239, 68, 68, 0.10)
~ danger-text #fca5a5 #b91c1c
~ info-bg #211b33 rgba(254, 28, 113, 0.08)
~ info-text #bba6ff #c0004e
+ surface-soft #f9f8f6
+ surface-elevated #ffffff
+ text-soft #9c9793
+ selected-bg rgba(254, 28, 113, 0.08)
+ border-brand rgba(254, 28, 113, 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":"Outfit","size":72}
~ h1 {"family":"Archivo","size":42} {"family":"Outfit","size":48}
~ h2 {"family":"Archivo","size":32} {"family":"Outfit","size":36}
~ body {"family":"Archivo","size":16} {"family":"Outfit","size":16}
radius 2 changed
~ card 12px 16px
~ pill 9999px 32px
spacing identical
No differences.
↻ Swap direction · Picoko → Stability AI