Diff

ClickHouse vs CircleCI

65 token-level differences between these two design systems.

Role tokens
Background
#0a0a0a #ffffff
Text
#ffffff #343434
Brand
#faff69 #00db75
Border
#2a2a2a #e3e4e8
Display font
Inter Inter
Body size
16px 16px
colors 58 changed
~ bg #0a0a0a #ffffff
~ surface #1a1a1a #f7f7f7
~ text #ffffff #343434
~ text-faint #5a5a5a #9a9a9a
~ brand #faff69 #00db75
~ on-brand #0a0a0a #005700
~ link #faff69 #1a73c7
~ link-hover #e6eb52 #155a9e
~ border #2a2a2a #e3e4e8
~ border-strong #3a3a3a #cdcfd6
~ success #22c55e #00b85f
~ warning #f59e0b #e0a000
~ danger #ef4444 #d93838
~ info #3b82f6 #1a73c7
+ surface-elev #f0f1f3
+ hero-ink #161618
+ hero-ink-soft #1f2024
+ text-secondary #5a5a5a
+ text-tertiary #767676
+ text-on-dark #ffffff
+ text-on-dark-soft #c5c8cf
+ brand-deep #00b85f
+ brand-ink #005700
+ brand-soft rgba(0, 219, 117, 0.12)
+ brand-tint rgba(0, 219, 117, 0.06)
+ navy #2e3c52
+ navy-deep #243044
+ navy-soft rgba(46, 60, 82, 0.08)
+ on-navy #ffffff
+ cta-bg #161618
+ cta-text #ffffff
+ cta-secondary-bg #2e3c52
+ cta-secondary-text #ffffff
+ border-soft #eeeff1
+ shadow-ambient rgba(20, 24, 33, 0.04)
+ shadow-card rgba(20, 24, 33, 0.08)
+ shadow-elev rgba(20, 24, 33, 0.12)
+ scrim rgba(22, 22, 24, 0.55)
+ success-soft rgba(0, 184, 95, 0.12)
+ warning-soft rgba(224, 160, 0, 0.12)
+ danger-soft rgba(217, 56, 56, 0.12)
+ info-soft rgba(26, 115, 199, 0.10)
bg-deep #000000
surface-soft #121212
surface-elevated #242424
surface-yellow-band #faff69
text-body #cccccc
text-strong #e6e6e6
text-muted #888888
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
typography 2 changed
~ display {"family":"Inter","size":72} {"family":"Inter","size":71}
~ label {"family":"JetBrains Mono","size":11} {"family":"SFMono-Regular","size":13}
radius identical
No differences.
spacing 5 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
~ lg 48px 32px
~ xl 96px 64px
↻ Swap direction · CircleCI → ClickHouse