Diff

CircleCI vs BMW

70 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #ffffff

Text

#343434 → #3c3c3c

Brand

#00db75 → #1c69d4

Border

#e3e4e8 → #e6e6e6

Display font

Inter → BMW Type Next Latin

Body size

16px → 16px

colors 60 changed

~ surface #f7f7f7 → #ffffff

~ text #343434 → #3c3c3c

~ brand #00db75 → #1c69d4

~ on-brand #005700 → #ffffff

~ link #1a73c7 → #1c69d4

~ link-hover #155a9e → #0653b6

~ border #e3e4e8 → #e6e6e6

~ border-soft #eeeff1 → #f0f0f0

~ border-strong #cdcfd6 → #cccccc

~ shadow-elev rgba(20, 24, 33, 0.12) → rgba(0,0,0,0.08)

~ success #00b85f → #22c55e

~ warning #e0a000 → #f59e0b

~ danger #d93838 → #dc2626

~ info #1a73c7 → #1c69d4

+ bg-soft #f7f7f7

+ bg-card #fafafa

+ bg-strong #ebebeb

+ bg-dark #1a2129

+ bg-dark-elev #262e38

+ surface-soft #f7f7f7

+ surface-card #fafafa

+ text-strong #1a1a1a

+ text-ink #262626

+ text-muted #6b6b6b

+ brand-hover #0653b6

+ brand-disabled #d6d6d6

+ on-dark #ffffff

+ on-dark-soft #bbbbbb

+ m-blue-light #0066b1

+ m-blue-dark #1c69d4

+ m-red #e22718

+ ring #1c69d4

+ shadow-soft rgba(0,0,0,0.04)

+ shadow-deep rgba(0,0,0,0.16)

− 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

− shadow-ambient rgba(20, 24, 33, 0.04)

− shadow-card rgba(20, 24, 33, 0.08)

− 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":"BMW Type Next Latin","size":72}

~ h1 {"family":"Inter","size":40} → {"family":"BMW Type Next Latin","size":40}

~ h2 {"family":"Inter","size":32} → {"family":"BMW Type Next Latin","size":32}

~ body {"family":"Inter","size":16} → {"family":"BMW Type Next Latin","size":16}

~ label {"family":"SFMono-Regular","size":13} → {"family":"JetBrains Mono","size":11}

radius identical

No differences.

spacing 5 changed

~ xs 0px → 4px

~ sm 4px → 8px

~ md 12px → 16px

~ lg 32px → 48px

~ xl 64px → 96px

↻ Swap direction · BMW → CircleCI