Diff

Tinybird vs Picoko

58 token-level differences between these two design systems.

Role tokens
Background
#0a0a0a #fbfaf8
Text
#ffffff #121110
Brand
#27f795 #fe1c71
Border
#262626 rgba(18, 17, 16, 0.08)
Display font
Inter Outfit
Body size
16px 16px
colors 52 changed
~ bg #0a0a0a #fbfaf8
~ surface #151515 #ffffff
~ surface-soft #101010 #f9f8f6
~ surface-elevated #1e1e1e #ffffff
~ text #ffffff #121110
~ text-strong #e6e6e6 #0a0909
~ text-muted #888888 #6b6663
~ text-faint #5a5a5a #c3bfbb
~ brand #27f795 #fe1c71
~ on-brand #0a0a0a #ffffff
~ link #27f795 #121110
~ link-hover #1fd87f #fe1c71
~ border #262626 rgba(18, 17, 16, 0.08)
~ border-strong #383838 rgba(18, 17, 16, 0.16)
+ bg-alt #f5f3f0
+ text-soft #9c9793
+ brand-deep #e5005c
+ brand-soft rgba(254, 28, 113, 0.10)
+ selected-bg rgba(254, 28, 113, 0.08)
+ disabled #c3bfbb
+ border-subtle rgba(18, 17, 16, 0.04)
+ border-brand rgba(254, 28, 113, 0.30)
+ success-bg rgba(34, 197, 94, 0.10)
+ success-text #15803d
+ warning-bg rgba(234, 179, 8, 0.12)
+ warning-text #a16207
+ danger-bg rgba(239, 68, 68, 0.10)
+ danger-text #b91c1c
+ info-bg rgba(254, 28, 113, 0.08)
+ info-text #c0004e
bg-deep #000000
surface-mint-tint rgba(255,255,255,0.05)
text-body #b0b0b0
brand-dark #008060
brand-active #1fd87f
brand-disabled #16402e
on-brand-dark #ffffff
on-dark #ffffff
border-mint #27f795
shadow-color rgba(0,0,0,0.6)
shadow-glow-mint rgba(39,247,149,0.18)
code-text #ffffff
code-invocation #27f795
code-success #27f795
code-error #ff8389
code-identifier #00c1ff
code-value #fc9f5b
code-diff-added #008060
success #27f795
warning #fc9f5b
danger #ff8389
info #00c1ff
typography 4 changed
~ display {"family":"Inter","size":80} {"family":"Outfit","size":72}
~ h1 {"family":"Inter","size":64} {"family":"Outfit","size":48}
~ h2 {"family":"Inter","size":44} {"family":"Outfit","size":36}
~ body {"family":"Inter","size":16} {"family":"Outfit","size":16}
radius 2 changed
~ card 12px 16px
~ pill 9999px 32px
spacing identical
No differences.
↻ Swap direction · Picoko → Tinybird