Diff

CircleCI vs Salesforce

86 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#343434 #080707
Brand
#00db75 #0176d3
Border
#e3e4e8 #dddbda
Display font
Inter ITC Avant Garde
Body size
16px 16px
colors 75 changed
~ surface #f7f7f7 #ffffff
~ text #343434 #080707
~ text-faint #9a9a9a #555555
~ brand #00db75 #0176d3
~ on-brand #005700 #ffffff
~ link #1a73c7 #0176d3
~ link-hover #155a9e #005ca6
~ border #e3e4e8 #dddbda
~ border-strong #cdcfd6 #c9c7c5
~ shadow-card rgba(20, 24, 33, 0.08) rgba(0,0,0,0.10) 0 2px 4px
~ success #00b85f #04844b
~ warning #e0a000 #fe9339
~ danger #d93838 #ba0517
~ info #1a73c7 #0176d3
+ bg-cloud #ebf6fe
+ bg-soft #f3f3f3
+ bg-deep #032d60
+ bg-deeper #001639
+ bg-creative #021f4b
+ surface-tinted #f3fbff
+ surface-hover #f3f3f3
+ text-strong #080707
+ text-body #181818
+ text-muted #3e3e3c
+ text-on-deep #ffffff
+ text-on-deep-muted rgba(255,255,255,0.85)
+ brand-hover #005ca6
+ brand-active #0b5cab
+ brand-cyan #0d9dda
+ brand-deep-blue #0b5cab
+ brand-navy #032d60
+ accent #0d9dda
+ accent-soft #ebf6fe
+ accent-strong #3860be
+ trailhead-orange #ff9a3c
+ astro-yellow #fec934
+ ohana-green #04844b
+ semantic-success #04844b
+ selected rgba(1,118,211,0.10)
+ border-subtle #ecebea
+ ring-focus #1589ee
+ shadow-elevated rgba(0,0,0,0.16) 0 4px 12px
+ on-cyan #ffffff
+ success-bg #cdefc4
+ warning-bg #feedca
+ danger-bg #feded8
+ info-bg #aacbff
+ gradient-hero linear-gradient(135deg, #032d60 0%, #0b5cab 50%, #0d9dda 100%)
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-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)
typography 5 changed
~ display {"family":"Inter","size":71} {"family":"ITC Avant Garde","size":80}
~ h1 {"family":"Inter","size":40} {"family":"ITC Avant Garde","size":40}
~ h2 {"family":"Inter","size":32} {"family":"ITC Avant Garde","size":32}
~ body {"family":"Inter","size":16} {"family":"Salesforce Sans","size":16}
~ label {"family":"SFMono-Regular","size":13} {"family":"Salesforce Mono","size":13}
radius 1 changed
~ button 8px 6px
spacing 5 changed
~ xs 0px 1px
~ sm 4px 2px
~ md 12px 8px
~ lg 32px 20px
~ xl 64px 32px
↻ Swap direction · Salesforce → CircleCI