Diff

ClickHouse vs Picoko

58 token-level differences between these two design systems.

Role tokens
Background
#0a0a0a #fbfaf8
Text
#ffffff #121110
Brand
#faff69 #fe1c71
Border
#2a2a2a rgba(18, 17, 16, 0.08)
Display font
Inter Outfit
Body size
16px 16px
colors 46 changed
~ bg #0a0a0a #fbfaf8
~ surface-soft #121212 #f9f8f6
~ surface #1a1a1a #ffffff
~ surface-elevated #242424 #ffffff
~ text #ffffff #121110
~ text-strong #e6e6e6 #0a0909
~ text-muted #888888 #6b6663
~ text-faint #5a5a5a #c3bfbb
~ brand #faff69 #fe1c71
~ on-brand #0a0a0a #ffffff
~ link #faff69 #121110
~ link-hover #e6eb52 #fe1c71
~ border #2a2a2a rgba(18, 17, 16, 0.08)
~ border-strong #3a3a3a 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-yellow-band #faff69
text-body #cccccc
brand-active #e6eb52
brand-disabled #3a3a1f
on-dark #ffffff
border-yellow #faff69
shadow-color rgba(0,0,0,0)
shadow-glow-yellow rgba(250,255,105,0.15)
accent-emerald #22c55e
accent-rose #ef4444
accent-blue #3b82f6
success #22c55e
warning #f59e0b
danger #ef4444
info #3b82f6
typography 5 changed
~ display {"family":"Inter","size":72} {"family":"Outfit","size":72}
~ h1 {"family":"Inter","size":40} {"family":"Outfit","size":48}
~ h2 {"family":"Inter","size":32} {"family":"Outfit","size":36}
~ body {"family":"Inter","size":16} {"family":"Outfit","size":16}
~ label {"family":"JetBrains Mono","size":11} {"family":"SFMono-Regular","size":13}
radius 2 changed
~ card 12px 16px
~ pill 9999px 32px
spacing 5 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
~ lg 48px 32px
~ xl 96px 64px
↻ Swap direction · Picoko → ClickHouse