diff --git a/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-device-desktop.png b/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-device-desktop.png
deleted file mode 100644
index ec5869bca72d..000000000000
Binary files a/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-device-desktop.png and /dev/null differ
diff --git a/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-device-mobile.png b/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-device-mobile.png
deleted file mode 100644
index ec5869bca72d..000000000000
Binary files a/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-device-mobile.png and /dev/null differ
diff --git a/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-device-tablet.png b/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-device-tablet.png
deleted file mode 100644
index ec5869bca72d..000000000000
Binary files a/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-device-tablet.png and /dev/null differ
diff --git a/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-variant-critical.png b/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-variant-critical.png
index 8d9e5b53c483..7d05b08fa5dd 100644
Binary files a/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-variant-critical.png and b/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-variant-critical.png differ
diff --git a/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-variant-informational.png b/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-variant-informational.png
index 46807be53e3e..52b9f2444d5c 100644
Binary files a/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-variant-informational.png and b/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-variant-informational.png differ
diff --git a/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-variant-successful.png b/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-variant-successful.png
index 2e2191cc98df..a2dc80ae6380 100644
Binary files a/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-variant-successful.png and b/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-variant-successful.png differ
diff --git a/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-variant-warning.png b/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-variant-warning.png
index 90c38245f8e9..43723ff9f407 100644
Binary files a/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-variant-warning.png and b/__snapshots__/alert/component/chromium/DBAlert-should-match-screenshot-for-variant-warning.png differ
diff --git a/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-device-desktop.png b/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-device-desktop.png
deleted file mode 100644
index ec5869bca72d..000000000000
Binary files a/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-device-desktop.png and /dev/null differ
diff --git a/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-device-mobile.png b/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-device-mobile.png
deleted file mode 100644
index ec5869bca72d..000000000000
Binary files a/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-device-mobile.png and /dev/null differ
diff --git a/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-device-tablet.png b/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-device-tablet.png
deleted file mode 100644
index ec5869bca72d..000000000000
Binary files a/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-device-tablet.png and /dev/null differ
diff --git a/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-variant-critical.png b/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-variant-critical.png
index 8d9e5b53c483..7d05b08fa5dd 100644
Binary files a/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-variant-critical.png and b/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-variant-critical.png differ
diff --git a/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-variant-informational.png b/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-variant-informational.png
index 46807be53e3e..52b9f2444d5c 100644
Binary files a/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-variant-informational.png and b/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-variant-informational.png differ
diff --git a/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-variant-successful.png b/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-variant-successful.png
index 2e2191cc98df..a2dc80ae6380 100644
Binary files a/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-variant-successful.png and b/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-variant-successful.png differ
diff --git a/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-variant-warning.png b/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-variant-warning.png
index 90c38245f8e9..43723ff9f407 100644
Binary files a/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-variant-warning.png and b/__snapshots__/alert/component/mobile-chrome/DBAlert-should-match-screenshot-for-variant-warning.png differ
diff --git a/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-device-desktop.png b/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-device-desktop.png
deleted file mode 100644
index c861f814596b..000000000000
Binary files a/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-device-desktop.png and /dev/null differ
diff --git a/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-device-mobile.png b/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-device-mobile.png
deleted file mode 100644
index c861f814596b..000000000000
Binary files a/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-device-mobile.png and /dev/null differ
diff --git a/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-device-tablet.png b/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-device-tablet.png
deleted file mode 100644
index c861f814596b..000000000000
Binary files a/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-device-tablet.png and /dev/null differ
diff --git a/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-variant-critical.png b/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-variant-critical.png
index f9f802db889f..a177d7f6bad6 100644
Binary files a/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-variant-critical.png and b/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-variant-critical.png differ
diff --git a/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-variant-informational.png b/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-variant-informational.png
index 75ee536e3900..ea092f85f536 100644
Binary files a/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-variant-informational.png and b/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-variant-informational.png differ
diff --git a/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-variant-successful.png b/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-variant-successful.png
index 04971ba87c91..b7f11b041a2a 100644
Binary files a/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-variant-successful.png and b/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-variant-successful.png differ
diff --git a/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-variant-warning.png b/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-variant-warning.png
index 99e76e442050..eeae9c619bc8 100644
Binary files a/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-variant-warning.png and b/__snapshots__/alert/component/mobile-safari/DBAlert-should-match-screenshot-for-variant-warning.png differ
diff --git a/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-device-desktop.png b/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-device-desktop.png
deleted file mode 100644
index c861f814596b..000000000000
Binary files a/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-device-desktop.png and /dev/null differ
diff --git a/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-device-mobile.png b/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-device-mobile.png
deleted file mode 100644
index c861f814596b..000000000000
Binary files a/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-device-mobile.png and /dev/null differ
diff --git a/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-device-tablet.png b/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-device-tablet.png
deleted file mode 100644
index c861f814596b..000000000000
Binary files a/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-device-tablet.png and /dev/null differ
diff --git a/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-variant-critical.png b/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-variant-critical.png
index f9f802db889f..a177d7f6bad6 100644
Binary files a/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-variant-critical.png and b/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-variant-critical.png differ
diff --git a/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-variant-informational.png b/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-variant-informational.png
index 75ee536e3900..ea092f85f536 100644
Binary files a/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-variant-informational.png and b/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-variant-informational.png differ
diff --git a/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-variant-successful.png b/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-variant-successful.png
index 04971ba87c91..b7f11b041a2a 100644
Binary files a/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-variant-successful.png and b/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-variant-successful.png differ
diff --git a/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-variant-warning.png b/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-variant-warning.png
index 99e76e442050..eeae9c619bc8 100644
Binary files a/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-variant-warning.png and b/__snapshots__/alert/component/webkit/DBAlert-should-match-screenshot-for-variant-warning.png differ
diff --git a/__snapshots__/alert/showcase/chromium/regular/neutral-0/DBAlert-should-match-screenshot.png b/__snapshots__/alert/showcase/chromium/regular/neutral-0/DBAlert-should-match-screenshot.png
deleted file mode 100644
index 97845902096c..000000000000
Binary files a/__snapshots__/alert/showcase/chromium/regular/neutral-0/DBAlert-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/alert/showcase/chromium/regular/neutral/DBAlert-should-match-screenshot.png b/__snapshots__/alert/showcase/chromium/regular/neutral/DBAlert-should-match-screenshot.png
new file mode 100644
index 000000000000..6dc82d9725e0
Binary files /dev/null and b/__snapshots__/alert/showcase/chromium/regular/neutral/DBAlert-should-match-screenshot.png differ
diff --git a/__snapshots__/alert/showcase/mobile-chrome/regular/neutral-0/DBAlert-should-match-screenshot.png b/__snapshots__/alert/showcase/mobile-chrome/regular/neutral-0/DBAlert-should-match-screenshot.png
deleted file mode 100644
index 1fd1dd874b53..000000000000
Binary files a/__snapshots__/alert/showcase/mobile-chrome/regular/neutral-0/DBAlert-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/alert/showcase/mobile-chrome/regular/neutral/DBAlert-should-match-screenshot.png b/__snapshots__/alert/showcase/mobile-chrome/regular/neutral/DBAlert-should-match-screenshot.png
new file mode 100644
index 000000000000..b949cb343ba9
Binary files /dev/null and b/__snapshots__/alert/showcase/mobile-chrome/regular/neutral/DBAlert-should-match-screenshot.png differ
diff --git a/__snapshots__/alert/showcase/mobile-safari/regular/neutral-0/DBAlert-should-match-screenshot.png b/__snapshots__/alert/showcase/mobile-safari/regular/neutral-0/DBAlert-should-match-screenshot.png
deleted file mode 100644
index 3d455bb8cc1b..000000000000
Binary files a/__snapshots__/alert/showcase/mobile-safari/regular/neutral-0/DBAlert-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/alert/showcase/mobile-safari/regular/neutral/DBAlert-should-match-screenshot.png b/__snapshots__/alert/showcase/mobile-safari/regular/neutral/DBAlert-should-match-screenshot.png
new file mode 100644
index 000000000000..d44299ba6930
Binary files /dev/null and b/__snapshots__/alert/showcase/mobile-safari/regular/neutral/DBAlert-should-match-screenshot.png differ
diff --git a/__snapshots__/alert/showcase/webkit/regular/neutral-0/DBAlert-should-match-screenshot.png b/__snapshots__/alert/showcase/webkit/regular/neutral-0/DBAlert-should-match-screenshot.png
deleted file mode 100644
index 81769c95c9b3..000000000000
Binary files a/__snapshots__/alert/showcase/webkit/regular/neutral-0/DBAlert-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/alert/showcase/webkit/regular/neutral/DBAlert-should-match-screenshot.png b/__snapshots__/alert/showcase/webkit/regular/neutral/DBAlert-should-match-screenshot.png
new file mode 100644
index 000000000000..fb9645bde184
Binary files /dev/null and b/__snapshots__/alert/showcase/webkit/regular/neutral/DBAlert-should-match-screenshot.png differ
diff --git a/__snapshots__/badge/component/chromium/DBBadge-should-match-screenshot.png b/__snapshots__/badge/component/chromium/DBBadge-should-match-screenshot.png
index 6ad8345f9927..6d3f0c034799 100644
Binary files a/__snapshots__/badge/component/chromium/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/component/chromium/DBBadge-should-match-screenshot.png differ
diff --git a/__snapshots__/badge/component/mobile-chrome/DBBadge-should-match-screenshot.png b/__snapshots__/badge/component/mobile-chrome/DBBadge-should-match-screenshot.png
index 6ad8345f9927..6d3f0c034799 100644
Binary files a/__snapshots__/badge/component/mobile-chrome/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/component/mobile-chrome/DBBadge-should-match-screenshot.png differ
diff --git a/__snapshots__/badge/component/mobile-safari/DBBadge-should-match-screenshot.png b/__snapshots__/badge/component/mobile-safari/DBBadge-should-match-screenshot.png
index da7cfb4a314e..f25413894520 100644
Binary files a/__snapshots__/badge/component/mobile-safari/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/component/mobile-safari/DBBadge-should-match-screenshot.png differ
diff --git a/__snapshots__/badge/component/webkit/DBBadge-should-match-screenshot.png b/__snapshots__/badge/component/webkit/DBBadge-should-match-screenshot.png
index da7cfb4a314e..f25413894520 100644
Binary files a/__snapshots__/badge/component/webkit/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/component/webkit/DBBadge-should-match-screenshot.png differ
diff --git a/__snapshots__/badge/showcase/chromium/regular/neutral-0/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/chromium/regular/neutral-0/DBBadge-should-match-screenshot.png
deleted file mode 100644
index 7e36d7be740d..000000000000
Binary files a/__snapshots__/badge/showcase/chromium/regular/neutral-0/DBBadge-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/badge/showcase/chromium/regular/neutral/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/chromium/regular/neutral/DBBadge-should-match-screenshot.png
new file mode 100644
index 000000000000..266117f8280b
Binary files /dev/null and b/__snapshots__/badge/showcase/chromium/regular/neutral/DBBadge-should-match-screenshot.png differ
diff --git a/__snapshots__/badge/showcase/mobile-chrome/regular/neutral-0/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/mobile-chrome/regular/neutral-0/DBBadge-should-match-screenshot.png
deleted file mode 100644
index 41a4a81fb546..000000000000
Binary files a/__snapshots__/badge/showcase/mobile-chrome/regular/neutral-0/DBBadge-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/badge/showcase/mobile-chrome/regular/neutral/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/mobile-chrome/regular/neutral/DBBadge-should-match-screenshot.png
new file mode 100644
index 000000000000..141cb158e9ee
Binary files /dev/null and b/__snapshots__/badge/showcase/mobile-chrome/regular/neutral/DBBadge-should-match-screenshot.png differ
diff --git a/__snapshots__/badge/showcase/mobile-safari/regular/neutral-0/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/mobile-safari/regular/neutral-0/DBBadge-should-match-screenshot.png
deleted file mode 100644
index bc3799424c06..000000000000
Binary files a/__snapshots__/badge/showcase/mobile-safari/regular/neutral-0/DBBadge-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/badge/showcase/mobile-safari/regular/neutral/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/mobile-safari/regular/neutral/DBBadge-should-match-screenshot.png
new file mode 100644
index 000000000000..7e8a7f4d6eb8
Binary files /dev/null and b/__snapshots__/badge/showcase/mobile-safari/regular/neutral/DBBadge-should-match-screenshot.png differ
diff --git a/__snapshots__/badge/showcase/webkit/regular/neutral-0/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/webkit/regular/neutral-0/DBBadge-should-match-screenshot.png
deleted file mode 100644
index 5266a194834a..000000000000
Binary files a/__snapshots__/badge/showcase/webkit/regular/neutral-0/DBBadge-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/badge/showcase/webkit/regular/neutral/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/webkit/regular/neutral/DBBadge-should-match-screenshot.png
new file mode 100644
index 000000000000..49bfd629f6c9
Binary files /dev/null and b/__snapshots__/badge/showcase/webkit/regular/neutral/DBBadge-should-match-screenshot.png differ
diff --git a/__snapshots__/brand/component/chromium/DBBrand-should-match-screenshot-for-device-desktop.png b/__snapshots__/brand/component/chromium/DBBrand-should-match-screenshot-for-device-desktop.png
deleted file mode 100644
index 74068f817168..000000000000
Binary files a/__snapshots__/brand/component/chromium/DBBrand-should-match-screenshot-for-device-desktop.png and /dev/null differ
diff --git a/__snapshots__/brand/component/chromium/DBBrand-should-match-screenshot-for-device-mobile.png b/__snapshots__/brand/component/chromium/DBBrand-should-match-screenshot-for-device-mobile.png
deleted file mode 100644
index 74068f817168..000000000000
Binary files a/__snapshots__/brand/component/chromium/DBBrand-should-match-screenshot-for-device-mobile.png and /dev/null differ
diff --git a/__snapshots__/brand/component/chromium/DBBrand-should-match-screenshot-for-device-tablet.png b/__snapshots__/brand/component/chromium/DBBrand-should-match-screenshot-for-device-tablet.png
deleted file mode 100644
index 74068f817168..000000000000
Binary files a/__snapshots__/brand/component/chromium/DBBrand-should-match-screenshot-for-device-tablet.png and /dev/null differ
diff --git a/__snapshots__/brand/component/mobile-chrome/DBBrand-should-match-screenshot-for-device-desktop.png b/__snapshots__/brand/component/mobile-chrome/DBBrand-should-match-screenshot-for-device-desktop.png
deleted file mode 100644
index 74068f817168..000000000000
Binary files a/__snapshots__/brand/component/mobile-chrome/DBBrand-should-match-screenshot-for-device-desktop.png and /dev/null differ
diff --git a/__snapshots__/brand/component/mobile-chrome/DBBrand-should-match-screenshot-for-device-mobile.png b/__snapshots__/brand/component/mobile-chrome/DBBrand-should-match-screenshot-for-device-mobile.png
deleted file mode 100644
index 74068f817168..000000000000
Binary files a/__snapshots__/brand/component/mobile-chrome/DBBrand-should-match-screenshot-for-device-mobile.png and /dev/null differ
diff --git a/__snapshots__/brand/component/mobile-chrome/DBBrand-should-match-screenshot-for-device-tablet.png b/__snapshots__/brand/component/mobile-chrome/DBBrand-should-match-screenshot-for-device-tablet.png
deleted file mode 100644
index 74068f817168..000000000000
Binary files a/__snapshots__/brand/component/mobile-chrome/DBBrand-should-match-screenshot-for-device-tablet.png and /dev/null differ
diff --git a/__snapshots__/brand/component/mobile-safari/DBBrand-should-match-screenshot-for-device-desktop.png b/__snapshots__/brand/component/mobile-safari/DBBrand-should-match-screenshot-for-device-desktop.png
deleted file mode 100644
index c2293578e32a..000000000000
Binary files a/__snapshots__/brand/component/mobile-safari/DBBrand-should-match-screenshot-for-device-desktop.png and /dev/null differ
diff --git a/__snapshots__/brand/component/mobile-safari/DBBrand-should-match-screenshot-for-device-mobile.png b/__snapshots__/brand/component/mobile-safari/DBBrand-should-match-screenshot-for-device-mobile.png
deleted file mode 100644
index c2293578e32a..000000000000
Binary files a/__snapshots__/brand/component/mobile-safari/DBBrand-should-match-screenshot-for-device-mobile.png and /dev/null differ
diff --git a/__snapshots__/brand/component/mobile-safari/DBBrand-should-match-screenshot-for-device-tablet.png b/__snapshots__/brand/component/mobile-safari/DBBrand-should-match-screenshot-for-device-tablet.png
deleted file mode 100644
index c2293578e32a..000000000000
Binary files a/__snapshots__/brand/component/mobile-safari/DBBrand-should-match-screenshot-for-device-tablet.png and /dev/null differ
diff --git a/__snapshots__/brand/component/webkit/DBBrand-should-match-screenshot-for-device-desktop.png b/__snapshots__/brand/component/webkit/DBBrand-should-match-screenshot-for-device-desktop.png
deleted file mode 100644
index c2293578e32a..000000000000
Binary files a/__snapshots__/brand/component/webkit/DBBrand-should-match-screenshot-for-device-desktop.png and /dev/null differ
diff --git a/__snapshots__/brand/component/webkit/DBBrand-should-match-screenshot-for-device-mobile.png b/__snapshots__/brand/component/webkit/DBBrand-should-match-screenshot-for-device-mobile.png
deleted file mode 100644
index c2293578e32a..000000000000
Binary files a/__snapshots__/brand/component/webkit/DBBrand-should-match-screenshot-for-device-mobile.png and /dev/null differ
diff --git a/__snapshots__/brand/component/webkit/DBBrand-should-match-screenshot-for-device-tablet.png b/__snapshots__/brand/component/webkit/DBBrand-should-match-screenshot-for-device-tablet.png
deleted file mode 100644
index c2293578e32a..000000000000
Binary files a/__snapshots__/brand/component/webkit/DBBrand-should-match-screenshot-for-device-tablet.png and /dev/null differ
diff --git a/__snapshots__/button/component/mobile-safari/DBButton-should-match-screenshot-for-variant-solid.png b/__snapshots__/button/component/mobile-safari/DBButton-should-match-screenshot-for-variant-solid.png
index 72953d42fcd6..47a2875be401 100644
Binary files a/__snapshots__/button/component/mobile-safari/DBButton-should-match-screenshot-for-variant-solid.png and b/__snapshots__/button/component/mobile-safari/DBButton-should-match-screenshot-for-variant-solid.png differ
diff --git a/__snapshots__/button/component/mobile-safari/DBButton-should-only-have-icon-for-variant-solid.png b/__snapshots__/button/component/mobile-safari/DBButton-should-only-have-icon-for-variant-solid.png
index 577576c1b1bc..10aa4a6be46f 100644
Binary files a/__snapshots__/button/component/mobile-safari/DBButton-should-only-have-icon-for-variant-solid.png and b/__snapshots__/button/component/mobile-safari/DBButton-should-only-have-icon-for-variant-solid.png differ
diff --git a/__snapshots__/button/component/webkit/DBButton-should-match-screenshot-for-variant-solid.png b/__snapshots__/button/component/webkit/DBButton-should-match-screenshot-for-variant-solid.png
index 72953d42fcd6..47a2875be401 100644
Binary files a/__snapshots__/button/component/webkit/DBButton-should-match-screenshot-for-variant-solid.png and b/__snapshots__/button/component/webkit/DBButton-should-match-screenshot-for-variant-solid.png differ
diff --git a/__snapshots__/button/component/webkit/DBButton-should-only-have-icon-for-variant-solid.png b/__snapshots__/button/component/webkit/DBButton-should-only-have-icon-for-variant-solid.png
index 577576c1b1bc..10aa4a6be46f 100644
Binary files a/__snapshots__/button/component/webkit/DBButton-should-only-have-icon-for-variant-solid.png and b/__snapshots__/button/component/webkit/DBButton-should-only-have-icon-for-variant-solid.png differ
diff --git a/__snapshots__/button/showcase/chromium/regular/neutral-0/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/chromium/regular/neutral-0/DBButton-should-match-screenshot.png
deleted file mode 100644
index 56cc622e69e5..000000000000
Binary files a/__snapshots__/button/showcase/chromium/regular/neutral-0/DBButton-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/button/showcase/chromium/regular/neutral/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/chromium/regular/neutral/DBButton-should-match-screenshot.png
new file mode 100644
index 000000000000..d98260fcc20f
Binary files /dev/null and b/__snapshots__/button/showcase/chromium/regular/neutral/DBButton-should-match-screenshot.png differ
diff --git a/__snapshots__/button/showcase/mobile-chrome/regular/neutral-0/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/mobile-chrome/regular/neutral-0/DBButton-should-match-screenshot.png
deleted file mode 100644
index 205274c2c6b1..000000000000
Binary files a/__snapshots__/button/showcase/mobile-chrome/regular/neutral-0/DBButton-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/button/showcase/mobile-chrome/regular/neutral/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/mobile-chrome/regular/neutral/DBButton-should-match-screenshot.png
new file mode 100644
index 000000000000..376dbbc1d006
Binary files /dev/null and b/__snapshots__/button/showcase/mobile-chrome/regular/neutral/DBButton-should-match-screenshot.png differ
diff --git a/__snapshots__/button/showcase/mobile-safari/regular/neutral-0/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/mobile-safari/regular/neutral-0/DBButton-should-match-screenshot.png
deleted file mode 100644
index 8afaf9f8239e..000000000000
Binary files a/__snapshots__/button/showcase/mobile-safari/regular/neutral-0/DBButton-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/button/showcase/mobile-safari/regular/neutral/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/mobile-safari/regular/neutral/DBButton-should-match-screenshot.png
new file mode 100644
index 000000000000..35b3c8f2df84
Binary files /dev/null and b/__snapshots__/button/showcase/mobile-safari/regular/neutral/DBButton-should-match-screenshot.png differ
diff --git a/__snapshots__/button/showcase/webkit/regular/neutral-0/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/webkit/regular/neutral-0/DBButton-should-match-screenshot.png
deleted file mode 100644
index d0818a2137d4..000000000000
Binary files a/__snapshots__/button/showcase/webkit/regular/neutral-0/DBButton-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/button/showcase/webkit/regular/neutral/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/webkit/regular/neutral/DBButton-should-match-screenshot.png
new file mode 100644
index 000000000000..4220836792c7
Binary files /dev/null and b/__snapshots__/button/showcase/webkit/regular/neutral/DBButton-should-match-screenshot.png differ
diff --git a/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-critical.png b/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-critical.png
index f7669aa1ab99..236a925d2ea4 100644
Binary files a/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-critical.png and b/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-critical.png differ
diff --git a/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-neutral-1.png b/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-neutral-1.png
deleted file mode 100644
index ab9b4f1d694b..000000000000
Binary files a/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-neutral-1.png and /dev/null differ
diff --git a/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-neutral-3.png b/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-neutral-3.png
deleted file mode 100644
index 7028ee836054..000000000000
Binary files a/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-neutral-3.png and /dev/null differ
diff --git a/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-neutral-4.png b/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-neutral-4.png
deleted file mode 100644
index 64e10c18dccc..000000000000
Binary files a/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-neutral-4.png and /dev/null differ
diff --git a/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-neutral-strong.png b/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-neutral-strong.png
new file mode 100644
index 000000000000..db53beb5b94b
Binary files /dev/null and b/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-neutral-strong.png differ
diff --git a/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-neutral-0.png b/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-neutral.png
similarity index 100%
rename from __snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-neutral-0.png
rename to __snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-neutral.png
diff --git a/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-primary.png b/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-primary.png
index f7669aa1ab99..236a925d2ea4 100644
Binary files a/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-primary.png and b/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-primary.png differ
diff --git a/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-secondary.png b/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-secondary.png
deleted file mode 100644
index 6858d14fe247..000000000000
Binary files a/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-secondary.png and /dev/null differ
diff --git a/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-successful.png b/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-successful.png
index 6c71fbc4fbfa..3fad27e98194 100644
Binary files a/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-successful.png and b/__snapshots__/card/component/chromium/DBCard-should-match-screenshot-for-color-variant-successful.png differ
diff --git a/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-critical.png b/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-critical.png
index f7669aa1ab99..236a925d2ea4 100644
Binary files a/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-critical.png and b/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-critical.png differ
diff --git a/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-neutral-1.png b/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-neutral-1.png
deleted file mode 100644
index ab9b4f1d694b..000000000000
Binary files a/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-neutral-1.png and /dev/null differ
diff --git a/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-neutral-3.png b/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-neutral-3.png
deleted file mode 100644
index 7028ee836054..000000000000
Binary files a/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-neutral-3.png and /dev/null differ
diff --git a/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-neutral-4.png b/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-neutral-4.png
deleted file mode 100644
index 64e10c18dccc..000000000000
Binary files a/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-neutral-4.png and /dev/null differ
diff --git a/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-neutral-strong.png b/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-neutral-strong.png
new file mode 100644
index 000000000000..db53beb5b94b
Binary files /dev/null and b/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-neutral-strong.png differ
diff --git a/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-neutral-0.png b/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-neutral.png
similarity index 100%
rename from __snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-neutral-0.png
rename to __snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-neutral.png
diff --git a/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-primary.png b/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-primary.png
index f7669aa1ab99..236a925d2ea4 100644
Binary files a/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-primary.png and b/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-primary.png differ
diff --git a/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-secondary.png b/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-secondary.png
deleted file mode 100644
index 6858d14fe247..000000000000
Binary files a/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-secondary.png and /dev/null differ
diff --git a/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-successful.png b/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-successful.png
index 6c71fbc4fbfa..3fad27e98194 100644
Binary files a/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-successful.png and b/__snapshots__/card/component/mobile-chrome/DBCard-should-match-screenshot-for-color-variant-successful.png differ
diff --git a/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-critical.png b/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-critical.png
index 005e18755e3d..89e67af717bd 100644
Binary files a/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-critical.png and b/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-critical.png differ
diff --git a/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-neutral-1.png b/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-neutral-1.png
deleted file mode 100644
index c1165286b4fd..000000000000
Binary files a/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-neutral-1.png and /dev/null differ
diff --git a/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-neutral-3.png b/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-neutral-3.png
deleted file mode 100644
index 234837b128d6..000000000000
Binary files a/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-neutral-3.png and /dev/null differ
diff --git a/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-neutral-4.png b/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-neutral-4.png
deleted file mode 100644
index e8518bfc1b1e..000000000000
Binary files a/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-neutral-4.png and /dev/null differ
diff --git a/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-neutral-strong.png b/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-neutral-strong.png
new file mode 100644
index 000000000000..4c7bb7805b00
Binary files /dev/null and b/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-neutral-strong.png differ
diff --git a/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-neutral-0.png b/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-neutral.png
similarity index 100%
rename from __snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-neutral-0.png
rename to __snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-neutral.png
diff --git a/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-primary.png b/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-primary.png
index 005e18755e3d..89e67af717bd 100644
Binary files a/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-primary.png and b/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-primary.png differ
diff --git a/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-secondary.png b/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-secondary.png
deleted file mode 100644
index 6500a2fd5e25..000000000000
Binary files a/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-secondary.png and /dev/null differ
diff --git a/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-successful.png b/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-successful.png
index 2c8ac4369fb7..04f7ce1c6e0c 100644
Binary files a/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-successful.png and b/__snapshots__/card/component/mobile-safari/DBCard-should-match-screenshot-for-color-variant-successful.png differ
diff --git a/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-critical.png b/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-critical.png
index 005e18755e3d..89e67af717bd 100644
Binary files a/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-critical.png and b/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-critical.png differ
diff --git a/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-neutral-1.png b/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-neutral-1.png
deleted file mode 100644
index c1165286b4fd..000000000000
Binary files a/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-neutral-1.png and /dev/null differ
diff --git a/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-neutral-3.png b/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-neutral-3.png
deleted file mode 100644
index 234837b128d6..000000000000
Binary files a/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-neutral-3.png and /dev/null differ
diff --git a/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-neutral-4.png b/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-neutral-4.png
deleted file mode 100644
index e8518bfc1b1e..000000000000
Binary files a/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-neutral-4.png and /dev/null differ
diff --git a/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-neutral-strong.png b/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-neutral-strong.png
new file mode 100644
index 000000000000..4c7bb7805b00
Binary files /dev/null and b/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-neutral-strong.png differ
diff --git a/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-neutral-0.png b/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-neutral.png
similarity index 100%
rename from __snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-neutral-0.png
rename to __snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-neutral.png
diff --git a/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-primary.png b/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-primary.png
index 005e18755e3d..89e67af717bd 100644
Binary files a/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-primary.png and b/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-primary.png differ
diff --git a/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-secondary.png b/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-secondary.png
deleted file mode 100644
index 6500a2fd5e25..000000000000
Binary files a/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-secondary.png and /dev/null differ
diff --git a/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-successful.png b/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-successful.png
index 2c8ac4369fb7..04f7ce1c6e0c 100644
Binary files a/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-successful.png and b/__snapshots__/card/component/webkit/DBCard-should-match-screenshot-for-color-variant-successful.png differ
diff --git a/__snapshots__/code-docs/component/chromium/DBCodeDocs-should-match-screenshot.png b/__snapshots__/code-docs/component/chromium/DBCodeDocs-should-match-screenshot.png
index 4888de74c300..3451f16b4365 100644
Binary files a/__snapshots__/code-docs/component/chromium/DBCodeDocs-should-match-screenshot.png and b/__snapshots__/code-docs/component/chromium/DBCodeDocs-should-match-screenshot.png differ
diff --git a/__snapshots__/code-docs/component/mobile-chrome/DBCodeDocs-should-match-screenshot.png b/__snapshots__/code-docs/component/mobile-chrome/DBCodeDocs-should-match-screenshot.png
index 4888de74c300..3451f16b4365 100644
Binary files a/__snapshots__/code-docs/component/mobile-chrome/DBCodeDocs-should-match-screenshot.png and b/__snapshots__/code-docs/component/mobile-chrome/DBCodeDocs-should-match-screenshot.png differ
diff --git a/__snapshots__/code-docs/component/mobile-safari/DBCodeDocs-should-match-screenshot.png b/__snapshots__/code-docs/component/mobile-safari/DBCodeDocs-should-match-screenshot.png
index 90fcbe798e9a..359d0ffcbe96 100644
Binary files a/__snapshots__/code-docs/component/mobile-safari/DBCodeDocs-should-match-screenshot.png and b/__snapshots__/code-docs/component/mobile-safari/DBCodeDocs-should-match-screenshot.png differ
diff --git a/__snapshots__/code-docs/component/webkit/DBCodeDocs-should-match-screenshot.png b/__snapshots__/code-docs/component/webkit/DBCodeDocs-should-match-screenshot.png
index f940e230464e..5d86d30736fa 100644
Binary files a/__snapshots__/code-docs/component/webkit/DBCodeDocs-should-match-screenshot.png and b/__snapshots__/code-docs/component/webkit/DBCodeDocs-should-match-screenshot.png differ
diff --git a/__snapshots__/home/showcase/chromium/regular/neutral-0/Home-should-match-screenshot.png b/__snapshots__/home/showcase/chromium/regular/neutral-0/Home-should-match-screenshot.png
deleted file mode 100644
index 6aefbefaa6d4..000000000000
Binary files a/__snapshots__/home/showcase/chromium/regular/neutral-0/Home-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/home/showcase/mobile-chrome/regular/neutral-0/Home-should-match-screenshot.png b/__snapshots__/home/showcase/mobile-chrome/regular/neutral-0/Home-should-match-screenshot.png
deleted file mode 100644
index 1cce597dc790..000000000000
Binary files a/__snapshots__/home/showcase/mobile-chrome/regular/neutral-0/Home-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/home/showcase/mobile-safari/regular/neutral-0/Home-should-match-screenshot.png b/__snapshots__/home/showcase/mobile-safari/regular/neutral-0/Home-should-match-screenshot.png
deleted file mode 100644
index 382fb3528508..000000000000
Binary files a/__snapshots__/home/showcase/mobile-safari/regular/neutral-0/Home-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/home/showcase/webkit/regular/neutral-0/Home-should-match-screenshot.png b/__snapshots__/home/showcase/webkit/regular/neutral-0/Home-should-match-screenshot.png
deleted file mode 100644
index b2030a1e7568..000000000000
Binary files a/__snapshots__/home/showcase/webkit/regular/neutral-0/Home-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/infotext/showcase/chromium/regular/neutral-0/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/chromium/regular/neutral-0/DBInfotext-should-match-screenshot.png
deleted file mode 100644
index 9b5ca4b097c4..000000000000
Binary files a/__snapshots__/infotext/showcase/chromium/regular/neutral-0/DBInfotext-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/infotext/showcase/chromium/regular/neutral/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/chromium/regular/neutral/DBInfotext-should-match-screenshot.png
new file mode 100644
index 000000000000..22cbadcc3016
Binary files /dev/null and b/__snapshots__/infotext/showcase/chromium/regular/neutral/DBInfotext-should-match-screenshot.png differ
diff --git a/__snapshots__/infotext/showcase/mobile-chrome/regular/neutral-0/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/mobile-chrome/regular/neutral-0/DBInfotext-should-match-screenshot.png
deleted file mode 100644
index 2d7d0164124f..000000000000
Binary files a/__snapshots__/infotext/showcase/mobile-chrome/regular/neutral-0/DBInfotext-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/infotext/showcase/mobile-chrome/regular/neutral/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/mobile-chrome/regular/neutral/DBInfotext-should-match-screenshot.png
new file mode 100644
index 000000000000..6f256ac8b48e
Binary files /dev/null and b/__snapshots__/infotext/showcase/mobile-chrome/regular/neutral/DBInfotext-should-match-screenshot.png differ
diff --git a/__snapshots__/infotext/showcase/mobile-safari/regular/neutral-0/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/mobile-safari/regular/neutral-0/DBInfotext-should-match-screenshot.png
deleted file mode 100644
index 154edf8c7277..000000000000
Binary files a/__snapshots__/infotext/showcase/mobile-safari/regular/neutral-0/DBInfotext-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/infotext/showcase/mobile-safari/regular/neutral/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/mobile-safari/regular/neutral/DBInfotext-should-match-screenshot.png
new file mode 100644
index 000000000000..c9caffa7ddb9
Binary files /dev/null and b/__snapshots__/infotext/showcase/mobile-safari/regular/neutral/DBInfotext-should-match-screenshot.png differ
diff --git a/__snapshots__/infotext/showcase/webkit/regular/neutral-0/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/webkit/regular/neutral-0/DBInfotext-should-match-screenshot.png
deleted file mode 100644
index fff41fdb01b2..000000000000
Binary files a/__snapshots__/infotext/showcase/webkit/regular/neutral-0/DBInfotext-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/infotext/showcase/webkit/regular/neutral/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/webkit/regular/neutral/DBInfotext-should-match-screenshot.png
new file mode 100644
index 000000000000..be919272dcdc
Binary files /dev/null and b/__snapshots__/infotext/showcase/webkit/regular/neutral/DBInfotext-should-match-screenshot.png differ
diff --git a/__snapshots__/input/showcase/chromium/regular/neutral-0/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/chromium/regular/neutral-0/DBInput-should-match-screenshot.png
deleted file mode 100644
index a0706dd03757..000000000000
Binary files a/__snapshots__/input/showcase/chromium/regular/neutral-0/DBInput-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/input/showcase/chromium/regular/neutral/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/chromium/regular/neutral/DBInput-should-match-screenshot.png
new file mode 100644
index 000000000000..5b38659edcb1
Binary files /dev/null and b/__snapshots__/input/showcase/chromium/regular/neutral/DBInput-should-match-screenshot.png differ
diff --git a/__snapshots__/input/showcase/mobile-chrome/regular/neutral-0/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/mobile-chrome/regular/neutral-0/DBInput-should-match-screenshot.png
deleted file mode 100644
index ac368d2f0e6c..000000000000
Binary files a/__snapshots__/input/showcase/mobile-chrome/regular/neutral-0/DBInput-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/input/showcase/mobile-chrome/regular/neutral/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/mobile-chrome/regular/neutral/DBInput-should-match-screenshot.png
new file mode 100644
index 000000000000..84ae00f7a7cf
Binary files /dev/null and b/__snapshots__/input/showcase/mobile-chrome/regular/neutral/DBInput-should-match-screenshot.png differ
diff --git a/__snapshots__/input/showcase/mobile-safari/regular/neutral-0/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/mobile-safari/regular/neutral-0/DBInput-should-match-screenshot.png
deleted file mode 100644
index 20c149f2cd9b..000000000000
Binary files a/__snapshots__/input/showcase/mobile-safari/regular/neutral-0/DBInput-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/input/showcase/mobile-safari/regular/neutral/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/mobile-safari/regular/neutral/DBInput-should-match-screenshot.png
new file mode 100644
index 000000000000..d6887a5c259a
Binary files /dev/null and b/__snapshots__/input/showcase/mobile-safari/regular/neutral/DBInput-should-match-screenshot.png differ
diff --git a/__snapshots__/input/showcase/webkit/regular/neutral-0/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/webkit/regular/neutral-0/DBInput-should-match-screenshot.png
deleted file mode 100644
index 0ef1e8f7f152..000000000000
Binary files a/__snapshots__/input/showcase/webkit/regular/neutral-0/DBInput-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/input/showcase/webkit/regular/neutral/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/webkit/regular/neutral/DBInput-should-match-screenshot.png
new file mode 100644
index 000000000000..7b640d418750
Binary files /dev/null and b/__snapshots__/input/showcase/webkit/regular/neutral/DBInput-should-match-screenshot.png differ
diff --git a/__snapshots__/link/showcase/chromium/regular/neutral-0/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/chromium/regular/neutral-0/DBLink-should-match-screenshot.png
deleted file mode 100644
index de37b652f658..000000000000
Binary files a/__snapshots__/link/showcase/chromium/regular/neutral-0/DBLink-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/link/showcase/chromium/regular/neutral/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/chromium/regular/neutral/DBLink-should-match-screenshot.png
new file mode 100644
index 000000000000..05a07915d617
Binary files /dev/null and b/__snapshots__/link/showcase/chromium/regular/neutral/DBLink-should-match-screenshot.png differ
diff --git a/__snapshots__/link/showcase/mobile-chrome/regular/neutral-0/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/mobile-chrome/regular/neutral-0/DBLink-should-match-screenshot.png
deleted file mode 100644
index d2a06008ab48..000000000000
Binary files a/__snapshots__/link/showcase/mobile-chrome/regular/neutral-0/DBLink-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/link/showcase/mobile-chrome/regular/neutral/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/mobile-chrome/regular/neutral/DBLink-should-match-screenshot.png
new file mode 100644
index 000000000000..63b5b644f07f
Binary files /dev/null and b/__snapshots__/link/showcase/mobile-chrome/regular/neutral/DBLink-should-match-screenshot.png differ
diff --git a/__snapshots__/link/showcase/mobile-safari/regular/neutral-0/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/mobile-safari/regular/neutral-0/DBLink-should-match-screenshot.png
deleted file mode 100644
index e7698fc11958..000000000000
Binary files a/__snapshots__/link/showcase/mobile-safari/regular/neutral-0/DBLink-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/link/showcase/mobile-safari/regular/neutral/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/mobile-safari/regular/neutral/DBLink-should-match-screenshot.png
new file mode 100644
index 000000000000..d605702a42e1
Binary files /dev/null and b/__snapshots__/link/showcase/mobile-safari/regular/neutral/DBLink-should-match-screenshot.png differ
diff --git a/__snapshots__/link/showcase/webkit/regular/neutral-0/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/webkit/regular/neutral-0/DBLink-should-match-screenshot.png
deleted file mode 100644
index 13ebf98df703..000000000000
Binary files a/__snapshots__/link/showcase/webkit/regular/neutral-0/DBLink-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/link/showcase/webkit/regular/neutral/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/webkit/regular/neutral/DBLink-should-match-screenshot.png
new file mode 100644
index 000000000000..459ed6f8bc65
Binary files /dev/null and b/__snapshots__/link/showcase/webkit/regular/neutral/DBLink-should-match-screenshot.png differ
diff --git a/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-chromium-linux.png b/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-chromium-linux.png
deleted file mode 100644
index 01086111906e..000000000000
Binary files a/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-chromium-linux.png and /dev/null differ
diff --git a/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-mobile-chrome-linux.png b/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-mobile-chrome-linux.png
deleted file mode 100644
index 01086111906e..000000000000
Binary files a/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-mobile-chrome-linux.png and /dev/null differ
diff --git a/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-mobile-safari-linux.png b/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-mobile-safari-linux.png
deleted file mode 100644
index a13d1810fe46..000000000000
Binary files a/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-mobile-safari-linux.png and /dev/null differ
diff --git a/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-webkit-linux.png b/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-webkit-linux.png
deleted file mode 100644
index a13d1810fe46..000000000000
Binary files a/__snapshots__/navigation-item/navigation-item.spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-webkit-linux.png and /dev/null differ
diff --git a/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-chromium-linux.png b/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-chromium-linux.png
deleted file mode 100644
index c7dff9b33c23..000000000000
Binary files a/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-chromium-linux.png and /dev/null differ
diff --git a/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-mobile-chrome-linux.png b/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-mobile-chrome-linux.png
deleted file mode 100644
index c470d2b73c79..000000000000
Binary files a/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-mobile-chrome-linux.png and /dev/null differ
diff --git a/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-mobile-safari-linux.png b/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-mobile-safari-linux.png
deleted file mode 100644
index bf7cad8a3452..000000000000
Binary files a/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-mobile-safari-linux.png and /dev/null differ
diff --git a/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-webkit-linux.png b/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-webkit-linux.png
deleted file mode 100644
index 9044ee57e6ce..000000000000
Binary files a/__snapshots__/navigation-item/showcase-navigation-item.spec.ts-snapshots/DBNavigationItem-should-match-screenshot-for-tonality-regular-and-color-neutral-0-1-webkit-linux.png and /dev/null differ
diff --git a/__snapshots__/navigation-item/showcase/chromium/regular/neutral-0/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/chromium/regular/neutral-0/DBNavigationItem-should-match-screenshot.png
deleted file mode 100644
index df4575ed8228..000000000000
Binary files a/__snapshots__/navigation-item/showcase/chromium/regular/neutral-0/DBNavigationItem-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/navigation-item/showcase/chromium/regular/neutral/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/chromium/regular/neutral/DBNavigationItem-should-match-screenshot.png
new file mode 100644
index 000000000000..5e398a0e5600
Binary files /dev/null and b/__snapshots__/navigation-item/showcase/chromium/regular/neutral/DBNavigationItem-should-match-screenshot.png differ
diff --git a/__snapshots__/navigation-item/showcase/mobile-chrome/regular/neutral-0/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/mobile-chrome/regular/neutral-0/DBNavigationItem-should-match-screenshot.png
deleted file mode 100644
index d12f2eff6bcb..000000000000
Binary files a/__snapshots__/navigation-item/showcase/mobile-chrome/regular/neutral-0/DBNavigationItem-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/navigation-item/showcase/mobile-chrome/regular/neutral/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/mobile-chrome/regular/neutral/DBNavigationItem-should-match-screenshot.png
new file mode 100644
index 000000000000..683bb6503fdc
Binary files /dev/null and b/__snapshots__/navigation-item/showcase/mobile-chrome/regular/neutral/DBNavigationItem-should-match-screenshot.png differ
diff --git a/__snapshots__/navigation-item/showcase/mobile-safari/regular/neutral-0/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/mobile-safari/regular/neutral-0/DBNavigationItem-should-match-screenshot.png
deleted file mode 100644
index 7ac857b034ab..000000000000
Binary files a/__snapshots__/navigation-item/showcase/mobile-safari/regular/neutral-0/DBNavigationItem-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/navigation-item/showcase/mobile-safari/regular/neutral/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/mobile-safari/regular/neutral/DBNavigationItem-should-match-screenshot.png
new file mode 100644
index 000000000000..038ed0d78e8a
Binary files /dev/null and b/__snapshots__/navigation-item/showcase/mobile-safari/regular/neutral/DBNavigationItem-should-match-screenshot.png differ
diff --git a/__snapshots__/navigation-item/showcase/webkit/regular/neutral-0/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/webkit/regular/neutral-0/DBNavigationItem-should-match-screenshot.png
deleted file mode 100644
index 313cdebf684c..000000000000
Binary files a/__snapshots__/navigation-item/showcase/webkit/regular/neutral-0/DBNavigationItem-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/navigation-item/showcase/webkit/regular/neutral/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/webkit/regular/neutral/DBNavigationItem-should-match-screenshot.png
new file mode 100644
index 000000000000..c420eaab283f
Binary files /dev/null and b/__snapshots__/navigation-item/showcase/webkit/regular/neutral/DBNavigationItem-should-match-screenshot.png differ
diff --git a/__snapshots__/section/showcase/chromium/regular/neutral-0/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/chromium/regular/neutral-0/DBSection-should-match-screenshot.png
deleted file mode 100644
index c42eaef01655..000000000000
Binary files a/__snapshots__/section/showcase/chromium/regular/neutral-0/DBSection-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/section/showcase/chromium/regular/neutral/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/chromium/regular/neutral/DBSection-should-match-screenshot.png
new file mode 100644
index 000000000000..399acf72f57b
Binary files /dev/null and b/__snapshots__/section/showcase/chromium/regular/neutral/DBSection-should-match-screenshot.png differ
diff --git a/__snapshots__/section/showcase/mobile-chrome/regular/neutral-0/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/mobile-chrome/regular/neutral-0/DBSection-should-match-screenshot.png
deleted file mode 100644
index 4eeba80204ce..000000000000
Binary files a/__snapshots__/section/showcase/mobile-chrome/regular/neutral-0/DBSection-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/section/showcase/mobile-chrome/regular/neutral/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/mobile-chrome/regular/neutral/DBSection-should-match-screenshot.png
new file mode 100644
index 000000000000..1b48b904f317
Binary files /dev/null and b/__snapshots__/section/showcase/mobile-chrome/regular/neutral/DBSection-should-match-screenshot.png differ
diff --git a/__snapshots__/section/showcase/mobile-safari/regular/neutral-0/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/mobile-safari/regular/neutral-0/DBSection-should-match-screenshot.png
deleted file mode 100644
index 7a2147ee2d46..000000000000
Binary files a/__snapshots__/section/showcase/mobile-safari/regular/neutral-0/DBSection-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/section/showcase/mobile-safari/regular/neutral/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/mobile-safari/regular/neutral/DBSection-should-match-screenshot.png
new file mode 100644
index 000000000000..1ec693d300ee
Binary files /dev/null and b/__snapshots__/section/showcase/mobile-safari/regular/neutral/DBSection-should-match-screenshot.png differ
diff --git a/__snapshots__/section/showcase/webkit/regular/neutral-0/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/webkit/regular/neutral-0/DBSection-should-match-screenshot.png
deleted file mode 100644
index 0b0a2ac298f5..000000000000
Binary files a/__snapshots__/section/showcase/webkit/regular/neutral-0/DBSection-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/section/showcase/webkit/regular/neutral/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/webkit/regular/neutral/DBSection-should-match-screenshot.png
new file mode 100644
index 000000000000..d0944fa9fbeb
Binary files /dev/null and b/__snapshots__/section/showcase/webkit/regular/neutral/DBSection-should-match-screenshot.png differ
diff --git a/__snapshots__/select/component/mobile-safari/DBSelect-should-match-screenshot.png b/__snapshots__/select/component/mobile-safari/DBSelect-should-match-screenshot.png
index c645e7f92feb..7369dfae1a12 100644
Binary files a/__snapshots__/select/component/mobile-safari/DBSelect-should-match-screenshot.png and b/__snapshots__/select/component/mobile-safari/DBSelect-should-match-screenshot.png differ
diff --git a/__snapshots__/select/component/webkit/DBSelect-should-match-screenshot.png b/__snapshots__/select/component/webkit/DBSelect-should-match-screenshot.png
index c645e7f92feb..7369dfae1a12 100644
Binary files a/__snapshots__/select/component/webkit/DBSelect-should-match-screenshot.png and b/__snapshots__/select/component/webkit/DBSelect-should-match-screenshot.png differ
diff --git a/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-variant-critical.png b/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-variant-critical.png
index 713eff50edd2..05c57da0dc11 100644
Binary files a/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-variant-critical.png and b/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-variant-critical.png differ
diff --git a/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-variant-informational.png b/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-variant-informational.png
index 27432964b6fd..2042033f5edd 100644
Binary files a/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-variant-informational.png and b/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-variant-informational.png differ
diff --git a/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-variant-successful.png b/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-variant-successful.png
index aa149215ea52..b2a28a8dab4c 100644
Binary files a/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-variant-successful.png and b/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-variant-successful.png differ
diff --git a/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-variant-warning.png b/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-variant-warning.png
index 57bf407f8bcf..e534fc6f4f0a 100644
Binary files a/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-variant-warning.png and b/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot-for-variant-warning.png differ
diff --git a/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot.png b/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot.png
index 4668e28c4ea3..24e4a493b77f 100644
Binary files a/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot.png and b/__snapshots__/tag/component/chromium/DBTag-should-match-screenshot.png differ
diff --git a/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-variant-critical.png b/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-variant-critical.png
index 713eff50edd2..05c57da0dc11 100644
Binary files a/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-variant-critical.png and b/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-variant-critical.png differ
diff --git a/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-variant-informational.png b/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-variant-informational.png
index 27432964b6fd..2042033f5edd 100644
Binary files a/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-variant-informational.png and b/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-variant-informational.png differ
diff --git a/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-variant-successful.png b/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-variant-successful.png
index aa149215ea52..b2a28a8dab4c 100644
Binary files a/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-variant-successful.png and b/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-variant-successful.png differ
diff --git a/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-variant-warning.png b/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-variant-warning.png
index 57bf407f8bcf..e534fc6f4f0a 100644
Binary files a/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-variant-warning.png and b/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot-for-variant-warning.png differ
diff --git a/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot.png b/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot.png
index 4668e28c4ea3..24e4a493b77f 100644
Binary files a/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot.png and b/__snapshots__/tag/component/mobile-chrome/DBTag-should-match-screenshot.png differ
diff --git a/__snapshots__/tag/component/mobile-safari/DBTag-should-match-screenshot-for-variant-critical.png b/__snapshots__/tag/component/mobile-safari/DBTag-should-match-screenshot-for-variant-critical.png
index ef1eaa8acf46..3aa253f58285 100644
Binary files a/__snapshots__/tag/component/mobile-safari/DBTag-should-match-screenshot-for-variant-critical.png and b/__snapshots__/tag/component/mobile-safari/DBTag-should-match-screenshot-for-variant-critical.png differ
diff --git a/__snapshots__/tag/component/mobile-safari/DBTag-should-match-screenshot-for-variant-informational.png b/__snapshots__/tag/component/mobile-safari/DBTag-should-match-screenshot-for-variant-informational.png
index 9e284cf3e28a..941c45ac081f 100644
Binary files a/__snapshots__/tag/component/mobile-safari/DBTag-should-match-screenshot-for-variant-informational.png and b/__snapshots__/tag/component/mobile-safari/DBTag-should-match-screenshot-for-variant-informational.png differ
diff --git a/__snapshots__/tag/component/mobile-safari/DBTag-should-match-screenshot-for-variant-successful.png b/__snapshots__/tag/component/mobile-safari/DBTag-should-match-screenshot-for-variant-successful.png
index e5abc71c066f..cfa2a03ead80 100644
Binary files a/__snapshots__/tag/component/mobile-safari/DBTag-should-match-screenshot-for-variant-successful.png and b/__snapshots__/tag/component/mobile-safari/DBTag-should-match-screenshot-for-variant-successful.png differ
diff --git a/__snapshots__/tag/component/mobile-safari/DBTag-should-match-screenshot-for-variant-warning.png b/__snapshots__/tag/component/mobile-safari/DBTag-should-match-screenshot-for-variant-warning.png
index 82a9a06b8af3..42e8e01946db 100644
Binary files a/__snapshots__/tag/component/mobile-safari/DBTag-should-match-screenshot-for-variant-warning.png and b/__snapshots__/tag/component/mobile-safari/DBTag-should-match-screenshot-for-variant-warning.png differ
diff --git a/__snapshots__/tag/component/mobile-safari/DBTag-should-match-screenshot.png b/__snapshots__/tag/component/mobile-safari/DBTag-should-match-screenshot.png
index 863b5604e996..0b5a666a7e76 100644
Binary files a/__snapshots__/tag/component/mobile-safari/DBTag-should-match-screenshot.png and b/__snapshots__/tag/component/mobile-safari/DBTag-should-match-screenshot.png differ
diff --git a/__snapshots__/tag/component/webkit/DBTag-should-match-screenshot-for-variant-critical.png b/__snapshots__/tag/component/webkit/DBTag-should-match-screenshot-for-variant-critical.png
index ef1eaa8acf46..3aa253f58285 100644
Binary files a/__snapshots__/tag/component/webkit/DBTag-should-match-screenshot-for-variant-critical.png and b/__snapshots__/tag/component/webkit/DBTag-should-match-screenshot-for-variant-critical.png differ
diff --git a/__snapshots__/tag/component/webkit/DBTag-should-match-screenshot-for-variant-informational.png b/__snapshots__/tag/component/webkit/DBTag-should-match-screenshot-for-variant-informational.png
index 9e284cf3e28a..941c45ac081f 100644
Binary files a/__snapshots__/tag/component/webkit/DBTag-should-match-screenshot-for-variant-informational.png and b/__snapshots__/tag/component/webkit/DBTag-should-match-screenshot-for-variant-informational.png differ
diff --git a/__snapshots__/tag/component/webkit/DBTag-should-match-screenshot-for-variant-successful.png b/__snapshots__/tag/component/webkit/DBTag-should-match-screenshot-for-variant-successful.png
index e5abc71c066f..cfa2a03ead80 100644
Binary files a/__snapshots__/tag/component/webkit/DBTag-should-match-screenshot-for-variant-successful.png and b/__snapshots__/tag/component/webkit/DBTag-should-match-screenshot-for-variant-successful.png differ
diff --git a/__snapshots__/tag/component/webkit/DBTag-should-match-screenshot-for-variant-warning.png b/__snapshots__/tag/component/webkit/DBTag-should-match-screenshot-for-variant-warning.png
index 82a9a06b8af3..42e8e01946db 100644
Binary files a/__snapshots__/tag/component/webkit/DBTag-should-match-screenshot-for-variant-warning.png and b/__snapshots__/tag/component/webkit/DBTag-should-match-screenshot-for-variant-warning.png differ
diff --git a/__snapshots__/tag/component/webkit/DBTag-should-match-screenshot.png b/__snapshots__/tag/component/webkit/DBTag-should-match-screenshot.png
index 863b5604e996..0b5a666a7e76 100644
Binary files a/__snapshots__/tag/component/webkit/DBTag-should-match-screenshot.png and b/__snapshots__/tag/component/webkit/DBTag-should-match-screenshot.png differ
diff --git a/packages/components/src/components/alert/alert.scss b/packages/components/src/components/alert/alert.scss
index c802689a9233..5029fe9e8531 100644
--- a/packages/components/src/components/alert/alert.scss
+++ b/packages/components/src/components/alert/alert.scss
@@ -115,8 +115,6 @@
 				@extend %db-bg-successful;
 			}
 
-			--db-current-border-color: #{map.get($colors, "border")};
-
 			&::before {
 				color: map.get($colors, "element");
 			}
diff --git a/packages/components/src/components/badge/badge.scss b/packages/components/src/components/badge/badge.scss
index 0a856bdb0c55..1ba9dea9273b 100644
--- a/packages/components/src/components/badge/badge.scss
+++ b/packages/components/src/components/badge/badge.scss
@@ -5,49 +5,8 @@
 @use "@db-ui/foundations/build/scss/color/color-variants" as *;
 @use "@db-ui/foundations/build/scss/helpers/component" as *;
 @use "@db-ui/foundations/build/scss/helpers/font" as *;
-@use "../../styles/button-components";
-
-@mixin get-tag-colors() {
-	@extend %db-bg-neutral-4;
-
-	&[data-emphasis="strong"] {
-		@extend %db-neutral-component;
-	}
-
-	@each $name, $colors in $component-variants {
-		&[data-variant="#{$name}"] {
-			@if ($name == "critical") {
-				@extend %db-bg-critical;
-
-				&[data-emphasis="strong"] {
-					@extend %db-critical-component;
-				}
-			} @else if ($name == "informational") {
-				@extend %db-bg-informational;
-
-				&[data-emphasis="strong"] {
-					@extend %db-informational-component;
-				}
-			} @else if ($name == "warning") {
-				@extend %db-bg-warning;
-
-				&[data-emphasis="strong"] {
-					@extend %db-warning-component;
-				}
-			} @else if ($name == "successful") {
-				@extend %db-bg-successful;
-
-				&[data-emphasis="strong"] {
-					@extend %db-successful-component;
-				}
-			}
-
-			&:not(&[data-emphasis="strong"]) {
-				--db-current-border-color: #{map.get($colors, "border")};
-			}
-		}
-	}
-}
+@use "../../styles/button-components" as *;
+@use "../../styles/tag-components" as *;
 
 %absolute-badge {
 	position: absolute;
diff --git a/packages/components/src/components/button/button.scss b/packages/components/src/components/button/button.scss
index fbf20fef51fe..e911ac4a1e94 100644
--- a/packages/components/src/components/button/button.scss
+++ b/packages/components/src/components/button/button.scss
@@ -9,14 +9,12 @@
 @use "../../styles/button-components";
 
 .db-button {
-	// Including a loading indicator
-	--loadingIndicator---color: currentColor;
-
 	@extend %default-interactive-component;
-	@extend %default-background-transition;
 	@extend %bg-transparent-interactive;
 	@extend %default-button;
 
+	color: $db-colors-neutral-on-bg;
+
 	block-size: $db-sizing-md;
 	padding: $db-spacing-fixed-xs $db-spacing-fixed-md;
 
diff --git a/packages/components/src/components/card/card.spec.tsx b/packages/components/src/components/card/card.spec.tsx
index ab04aa695639..d214adc5c617 100644
--- a/packages/components/src/components/card/card.spec.tsx
+++ b/packages/components/src/components/card/card.spec.tsx
@@ -9,12 +9,9 @@ const defaultComp = <DBCard>Test</DBCard>;
 
 // TODO: Get variants from https://github.com/db-ui/mono/blob/feat-unify-showcases/packages/components/src/shared/constants.ts when feat-unify branch is merged
 const colorVariants = [
-	'neutral-0',
-	'neutral-1',
-	'neutral-3',
-	'neutral-4',
+	'neutral',
+	'neutral-strong',
 	'primary',
-	'secondary',
 	'critical',
 	'successful',
 	'warning',
diff --git a/packages/components/src/components/checkbox/checkbox.scss b/packages/components/src/components/checkbox/checkbox.scss
index fd743efd2c66..fc4b5178c4f5 100644
--- a/packages/components/src/components/checkbox/checkbox.scss
+++ b/packages/components/src/components/checkbox/checkbox.scss
@@ -18,7 +18,8 @@ $font-size-height: calc(var(--db-base-font-size) * var(--db-base-line-height));
 
 	aspect-ratio: 1;
 
-	border: max(calc(#{$font-size-height} / 16 + 0.5px), 2px) solid currentColor;
+	border: max(calc(#{$font-size-height} / 16 + 0.5px), 2px) solid
+		$db-colors-neutral-on-bg;
 	border-radius: $default-border-radius;
 
 	display: inline-flex;
diff --git a/packages/components/src/components/code-docs/code-docs.scss b/packages/components/src/components/code-docs/code-docs.scss
index 2b4178bb2b6e..f3f61bacf829 100644
--- a/packages/components/src/components/code-docs/code-docs.scss
+++ b/packages/components/src/components/code-docs/code-docs.scss
@@ -4,11 +4,12 @@
 @use "@db-ui/foundations/build/scss/variables.global" as *;
 @use "@db-ui/foundations/build/scss/color-placeholder" as *;
 @use "@db-ui/foundations/build/scss/tonality" as *;
+@use "@db-ui/foundations/build/scss/color/color-variants" as *;
 
 /* TODO: Adapt this colors as well */
 
 %code-docs {
-	@extend %db-bg-neutral-1;
+	@extend %db-bg-neutral-transparent-semi;
 	min-block-size: $db-sizing-3xl;
 	align-items: center;
 	justify-content: center;
@@ -40,7 +41,7 @@
 		}
 
 		.code {
-			@extend %db-bg-neutral-4;
+			@extend %db-bg-inverted;
 			overflow: auto;
 			position: absolute;
 			inset-inline-end: 0;
diff --git a/packages/components/src/components/header/header.scss b/packages/components/src/components/header/header.scss
index 526aa7dfe8e5..1130e8e6c1e2 100644
--- a/packages/components/src/components/header/header.scss
+++ b/packages/components/src/components/header/header.scss
@@ -45,13 +45,13 @@
 }
 
 .db-header-meta-navigation {
+	@extend %db-bg-neutral-transparent-semi;
 	@extend %db-ui-functional;
 	@include divider("top");
 	display: flex;
 	flex-direction: column;
 	gap: $db-spacing-fixed-sm;
 	justify-content: end;
-	background-color: $db-colors-neutral-bg-2-enabled;
 
 	padding: $db-spacing-fixed-md;
 
diff --git a/packages/components/src/components/input/input.scss b/packages/components/src/components/input/input.scss
index 3bc6616c86c4..d201c8900170 100644
--- a/packages/components/src/components/input/input.scss
+++ b/packages/components/src/components/input/input.scss
@@ -77,6 +77,11 @@
 			}
 		}
 
+		&[data-variant="#{$name}"] {
+			--db-current-color: #{map.get($colors, "on-bg")};
+			color: map.get($colors, "on-bg");
+		}
+
 		&[data-variant="#{$name}"] input {
 			--db-current-border-color: #{map.get($colors, "border")};
 			@if ($name == "critical") {
@@ -94,13 +99,14 @@
 			}
 
 			& ~ .db-icon {
-				color: map.get($colors, "on-bg");
+				--db-current-color: #{map.get($colors, "on-bg")};
 			}
 
 			& ~ .description,
 			& ~ .icon-state,
 			& ~ .icon-state .db-icon {
-				color: map.get($colors, "element");
+				--db-current-color: #{map.get($colors, "element")};
+				color: var(--db-current-color);
 			}
 		}
 	}
@@ -260,6 +266,8 @@
 		@extend %component-border;
 		@include get-variant-bg-color(0.08);
 
+		color: $db-colors-neutral-on-bg;
+
 		block-size: $db-sizing-md;
 		max-inline-size: 100%;
 		inline-size: 100%;
diff --git a/packages/components/src/components/link/link.scss b/packages/components/src/components/link/link.scss
index df77ae28650b..94c04f794288 100644
--- a/packages/components/src/components/link/link.scss
+++ b/packages/components/src/components/link/link.scss
@@ -24,11 +24,6 @@
 	text-underline-position: from-font;
 	text-decoration-thickness: to-rem($pxValue: 1);
 
-	// Changing color on hover should be animated by a transition
-	transition:
-		outline 0.06s,
-		color $db-transition-color;
-
 	&:hover {
 		color: color-mix(in srgb, transparent 25%, $db-colors-neutral-on-bg);
 	}
@@ -76,15 +71,17 @@
 		}
 	}
 
+	// We couldn't extend any existing SCSS placeholders, as this is a special construct
 	&[data-variant="primary"] {
-		color: $db-colors-primary;
+		--db-current-color: #{$db-colors-primary-text};
+		color: var(--db-current-color);
 
 		&:hover {
-			color: $db-colors-primary-hover;
+			--db-current-color: #{$db-colors-primary-text-hover};
 		}
 
 		&:active {
-			color: $db-colors-primary-pressed;
+			--db-current-color: #{$db-colors-primary-text-pressed};
 		}
 	}
 
diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss
index 3d0c013fdf9b..3a3a7f6e2f3b 100644
--- a/packages/components/src/components/navigation-item/navigation-item.scss
+++ b/packages/components/src/components/navigation-item/navigation-item.scss
@@ -74,7 +74,6 @@
 
 %navigation-item {
 	@extend %default-interactive-component;
-	@extend %default-background-transition;
 	@extend %transparent-border;
 
 	@include get-variant-bg-color(0);
@@ -177,7 +176,7 @@
 	flex-direction: column;
 	z-index: 70;
 	inset-inline-start: 0;
-	background-color: $db-colors-neutral-bg-0-enabled;
+	background-color: $db-colors-neutral-bg;
 
 	visibility: hidden;
 
diff --git a/packages/components/src/components/select/select.scss b/packages/components/src/components/select/select.scss
index 970feda7198c..0fadd9f1578d 100644
--- a/packages/components/src/components/select/select.scss
+++ b/packages/components/src/components/select/select.scss
@@ -150,6 +150,11 @@
 		margin-block: $db-spacing-fixed-2xs 0;
 	}
 
+	// Most likely this wouldn't work on MacOS, but we're still progressively enhancing Windows by this
+	option {
+		background-color: var(--db-current-bg-color);
+	}
+
 	@each $name, $colors in $component-variants {
 		&[data-variant="#{$name}"] {
 			--db-current-border-color: #{map.get($colors, "border")};
@@ -168,7 +173,8 @@
 			& ~ .description,
 			.icon-state,
 			.icon-state .db-icon {
-				color: map.get($colors, "element");
+				--db-current-color: #{map.get($colors, "element")};
+				color: var(--db-current-color);
 			}
 		}
 	}
diff --git a/packages/components/src/components/tag/model.ts b/packages/components/src/components/tag/model.ts
index 55200f2ca930..472fa511d6b1 100644
--- a/packages/components/src/components/tag/model.ts
+++ b/packages/components/src/components/tag/model.ts
@@ -10,7 +10,8 @@ import {
 	IconProps,
 	IconState,
 	FormCheckProps,
-	InitializedState
+	InitializedState,
+	EmphasisProps
 } from '../../shared/model';
 
 export interface DBTagDefaultProps {
@@ -39,10 +40,6 @@ export interface DBTagDefaultProps {
 	 * The removeButton attribute shows the cancel button.
 	 */
 	removeButton?: string;
-	/**
-	 * The type attribute divides in between a weak or strong importance.
-	 */
-	type?: 'weak' | 'strong';
 	/**
 	 * If "interactive" is set to true, you can pass a value to the underlying checkbox or radio input.
 	 */
@@ -55,7 +52,8 @@ export type DBTagProps = DBTagDefaultProps &
 	FormProps &
 	FormCheckProps &
 	IconProps &
-	DefaultVariantProps;
+	DefaultVariantProps &
+	EmphasisProps;
 
 export interface DBTagDefaultState {
 	getRemoveButtonText?: () => string;
diff --git a/packages/components/src/components/tag/tag.lite.tsx b/packages/components/src/components/tag/tag.lite.tsx
index 26dca4c77b3c..1961d7473201 100644
--- a/packages/components/src/components/tag/tag.lite.tsx
+++ b/packages/components/src/components/tag/tag.lite.tsx
@@ -123,7 +123,7 @@ export default function DBTag(props: DBTagProps) {
 			data-interactive={state.isInteractive()}
 			data-disabled={props.disabled}
 			data-variant={props.variant}
-			data-type={props.type}>
+			data-emphasis={props.emphasis}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>
diff --git a/packages/components/src/components/tag/tag.scss b/packages/components/src/components/tag/tag.scss
index c4a5a38e1e09..880468cdc664 100644
--- a/packages/components/src/components/tag/tag.scss
+++ b/packages/components/src/components/tag/tag.scss
@@ -6,108 +6,10 @@
 @use "@db-ui/foundations/build/scss/helpers/component" as *;
 @use "@db-ui/foundations/build/scss/color/color-variants" as *;
 @use "@db-ui/foundations/build/scss/helpers/font" as *;
-@use "../../styles/button-components";
+@use "../../styles/button-components" as *;
+@use "../../styles/tag-components" as *;
 @use "@db-ui/foundations/build/scss/helpers/functions" as *;
 
-@mixin get-border-and-icon($colors) {
-	&:not(&[data-type="strong"]) {
-		--db-current-border-color: #{map.get($colors, "border")};
-		/*
-		.tag-label {
-			::before {
-				color: map.get($colors, "element");
-			}
-		}
-*/
-	}
-}
-
-%tag-colors {
-	@extend %db-bg-neutral-4;
-
-	&[data-type="strong"] {
-		@extend %db-neutral-component;
-	}
-
-	@each $name, $colors in $component-variants {
-		&[data-variant="#{$name}"] {
-			@if ($name == "critical") {
-				@extend %db-bg-critical;
-
-				&[data-type="strong"] {
-					@extend %db-critical-component;
-				}
-			} @else if ($name == "informational") {
-				@extend %db-bg-informational;
-
-				&[data-type="strong"] {
-					@extend %db-informational-component;
-				}
-			} @else if ($name == "warning") {
-				@extend %db-bg-warning;
-
-				&[data-type="strong"] {
-					@extend %db-warning-component;
-				}
-			} @else if ($name == "successful") {
-				@extend %db-bg-successful;
-
-				&[data-type="strong"] {
-					@extend %db-successful-component;
-				}
-			}
-
-			@include get-border-and-icon($colors);
-		}
-	}
-}
-
-%interactive-colors {
-	&:has(input:not(:checked)) {
-		@extend %db-bg-neutral-0-ia;
-	}
-
-	&:has(input:checked) {
-		@extend %db-bg-neutral-4-ia;
-
-		&[data-type="strong"] {
-			@extend %db-neutral-component-ia;
-		}
-
-		@each $name, $colors in $component-variants {
-			&[data-variant="#{$name}"] {
-				@if ($name == "critical") {
-					@extend %db-bg-critical-ia;
-
-					&[data-type="strong"] {
-						@extend %db-critical-component-ia;
-					}
-				} @else if ($name == "informational") {
-					@extend %db-bg-informational-ia;
-
-					&[data-type="strong"] {
-						@extend %db-informational-component-ia;
-					}
-				} @else if ($name == "warning") {
-					@extend %db-bg-warning-ia;
-
-					&[data-type="strong"] {
-						@extend %db-warning-component-ia;
-					}
-				} @else if ($name == "successful") {
-					@extend %db-bg-successful-ia;
-
-					&[data-type="strong"] {
-						@extend %db-successful-component-ia;
-					}
-				}
-
-				@include get-border-and-icon($colors);
-			}
-		}
-	}
-}
-
 .db-tag {
 	@extend %focus-placeholder;
 	@extend %default-interactive-component;
@@ -118,16 +20,13 @@
 	block-size: $db-sizing-sm;
 	min-inline-size: $db-sizing-sm;
 	inline-size: fit-content;
-	transition:
-		background-color $db-transition-color,
-		color $db-transition-color;
 
 	&:not(&[data-interactive="true"]) {
-		@extend %tag-colors;
+		@include get-tag-colors();
 	}
 
 	&[data-interactive="true"] {
-		@extend %interactive-colors;
+		@include get-tag-colors-interactive();
 	}
 
 	input {
diff --git a/packages/components/src/shared/constants.ts b/packages/components/src/shared/constants.ts
index b0c1d6c30500..69ea64da1249 100644
--- a/packages/components/src/shared/constants.ts
+++ b/packages/components/src/shared/constants.ts
@@ -21,19 +21,13 @@ export enum COLOR_SIMPLE {
 }
 
 export enum COLOR {
-	'NEUTRAL_0' = 'neutral-0',
-	'NEUTRAL_1' = 'neutral-1',
-	'NEUTRAL_2' = 'neutral-2',
-	'NEUTRAL_3' = 'neutral-3',
-	'NEUTRAL_4' = 'neutral-4',
+	'NEUTRAL' = 'neutral',
+	'NEUTRAL_STRONG' = 'neutral-strong',
 	'NEUTRAL_TRANSPARENT_FULL' = 'neutral-transparent-full',
 	'NEUTRAL_TRANSPARENT_SEMI' = 'neutral-transparent-semi',
 	'PRIMARY' = 'primary',
 	'PRIMARY_TRANSPARENT_FULL' = 'primary-transparent-full',
 	'PRIMARY_TRANSPARENT_SEMI' = 'primary-transparent-semi',
-	'SECONDARY' = 'secondary',
-	'SECONDARY_TRANSPARENT_FULL' = 'secondary-transparent-full',
-	'SECONDARY_TRANSPARENT_SEMI' = 'secondary-transparent-semi',
 	'SUCCESSFUL' = 'successful',
 	'SUCCESSFUL_TRANSPARENT_FULL' = 'successful-transparent-full',
 	'SUCCESSFUL_TRANSPARENT_SEMI' = 'successful-transparent-semi',
diff --git a/packages/components/src/styles/db-puls.scss b/packages/components/src/styles/db-puls.scss
index ff3cf7558d75..ece5c0793634 100644
--- a/packages/components/src/styles/db-puls.scss
+++ b/packages/components/src/styles/db-puls.scss
@@ -6,8 +6,7 @@
 	@include screen("m") {
 		&::after {
 			border-inline-start: none;
-			border-block-end: $default-border-radius solid
-				$db-colors-primary-enabled;
+			border-block-end: $default-border-radius solid $db-colors-primary;
 			inset-block-end: calc(-1 * #{$db-spacing-fixed-xs});
 			inline-size: 0;
 			block-size: auto;
@@ -28,8 +27,7 @@
 		transform: translate(0, -50%);
 		inset-block-start: 50%;
 		inset-inline-start: calc(-1 * #{$db-spacing-fixed-xs});
-		border-inline-start: $default-border-radius solid
-			$db-colors-primary-enabled;
+		border-inline-start: $default-border-radius solid $db-colors-primary;
 	}
 }
 
diff --git a/packages/components/src/styles/tag-components.scss b/packages/components/src/styles/tag-components.scss
new file mode 100644
index 000000000000..6563f737f752
--- /dev/null
+++ b/packages/components/src/styles/tag-components.scss
@@ -0,0 +1,93 @@
+@use "sass:map";
+@use "@db-ui/foundations/build/scss/color/color-variants" as *;
+@use "@db-ui/foundations/build/scss/helpers/component" as *;
+
+@mixin get-tag-colors() {
+	@include get-variant-bg-color(0.08);
+
+	&[data-emphasis="strong"] {
+		@extend %db-neutral-component;
+	}
+
+	@each $name, $colors in $component-variants {
+		&[data-variant="#{$name}"] {
+			@if ($name == "critical") {
+				@extend %db-bg-critical;
+
+				&[data-emphasis="strong"] {
+					@extend %db-critical-component;
+				}
+			} @else if ($name == "informational") {
+				@extend %db-bg-informational;
+
+				&[data-emphasis="strong"] {
+					@extend %db-informational-component;
+				}
+			} @else if ($name == "warning") {
+				@extend %db-bg-warning;
+
+				&[data-emphasis="strong"] {
+					@extend %db-warning-component;
+				}
+			} @else if ($name == "successful") {
+				@extend %db-bg-successful;
+
+				&[data-emphasis="strong"] {
+					@extend %db-successful-component;
+				}
+			}
+
+			&:not(&[data-emphasis="strong"]) {
+				--db-current-border-color: #{map.get($colors, "border")};
+			}
+		}
+	}
+}
+
+@mixin get-tag-colors-interactive() {
+	&:has(input:not(:checked)) {
+		@extend %bg-transparent-interactive;
+	}
+
+	&:has(input:checked) {
+		@include get-variant-bg-color(0.08);
+
+		&[data-emphasis="strong"] {
+			@extend %db-neutral-component-ia;
+		}
+
+		@each $name, $colors in $component-variants {
+			&[data-variant="#{$name}"] {
+				@if ($name == "critical") {
+					@extend %db-bg-critical-ia;
+
+					&[data-emphasis="strong"] {
+						@extend %db-critical-component-ia;
+					}
+				} @else if ($name == "informational") {
+					@extend %db-bg-informational-ia;
+
+					&[data-emphasis="strong"] {
+						@extend %db-informational-component-ia;
+					}
+				} @else if ($name == "warning") {
+					@extend %db-bg-warning-ia;
+
+					&[data-emphasis="strong"] {
+						@extend %db-warning-component-ia;
+					}
+				} @else if ($name == "successful") {
+					@extend %db-bg-successful-ia;
+
+					&[data-emphasis="strong"] {
+						@extend %db-successful-component-ia;
+					}
+				}
+
+				&:not(&[data-emphasis="strong"]) {
+					--db-current-border-color: #{map.get($colors, "border")};
+				}
+			}
+		}
+	}
+}
diff --git a/packages/foundations/scripts/color-classes-generator.js b/packages/foundations/scripts/color-classes-generator.js
index b936f6f9e8aa..3efc78be4baf 100644
--- a/packages/foundations/scripts/color-classes-generator.js
+++ b/packages/foundations/scripts/color-classes-generator.js
@@ -11,7 +11,8 @@ const prefix = 'db';
  */
 
 const generateBGVariants = (value, variant) => {
-	const nameEnding = variant ? `-${variant}` : '';
+	// TODO: This will be replaced with 0===bg-neutral and 0=bg-neutral-strong
+	const nameEnding = variant === '4' ? `-strong` : '';
 	return `
 .${prefix}-bg-${value}${nameEnding} {
     @extend %${prefix}-bg-${value}${nameEnding};
@@ -50,15 +51,18 @@ exports.generateColorUtilitityClasses = (colorToken) => {
 	`;
 
 	for (const [, value] of Object.keys(colorToken).entries()) {
-		if (value === 'neutral') {
-			// Neutral has multiple default tones
-			const neutralTones = ['0', '1', '2', '3', '4'];
-			for (const neutralTone of neutralTones) {
-				output += generateBGVariants(value, neutralTone);
+		// TODO: remove this if secondary becomes obsolete
+		if (value !== 'secondary') {
+			if (value === 'neutral') {
+				// Neutral has multiple default tones
+				const neutralTones = ['0', '4'];
+				for (const neutralTone of neutralTones) {
+					output += generateBGVariants(value, neutralTone);
+				}
+			} else {
+				// Default text and background colors (former 'light' tone)
+				output += generateBGVariants(value);
 			}
-		} else {
-			// Default text and background colors (former 'light' tone)
-			output += generateBGVariants(value);
 		}
 	}
 
diff --git a/packages/foundations/scripts/color-placeholders-generator.js b/packages/foundations/scripts/color-placeholders-generator.js
index 285fe6e5a06f..ee1410d44593 100644
--- a/packages/foundations/scripts/color-placeholders-generator.js
+++ b/packages/foundations/scripts/color-placeholders-generator.js
@@ -25,7 +25,8 @@ const generateBGVariants = (
 	baseColor
 ) => {
 	const placeholderName = `${prefix}-bg-${value}${
-		variant ? `-${variant}` : ''
+		// TODO: This will be replaced with 0===bg-neutral and 0=bg-neutral-strong
+		variant === '4' ? `-strong` : ''
 	}`;
 	try {
 		const bgColor = `${prefix}-${currentColorObject.enabled.name}`;
@@ -57,7 +58,10 @@ const generateBGVariants = (
 	--db-current-bg-color: color-mix(
 		in srgb,
 		transparent	var(--${prefix}-bg-transparent, 0%),
-		var(--${prefix}-${value}-bg-enabled, #{$${bgColor}})
+		var(--${prefix}-${value}-bg${
+			// TODO: This will be replaced with 0===bg-neutral and 0=bg-neutral-strong
+			variant === '4' ? `-strong` : ''
+		}-enabled, #{$${bgColor}})
 	);
     ${
 		elementColor
@@ -89,7 +93,7 @@ const generateBGVariants = (
 
 	&-transparent {
 		&-full, &-semi{
-    		color: var(--${prefix}-${value}-bg-on-enabled, #{$${fgColor}});
+    		color: var(--${prefix}-${value}-on-bg-enabled, #{$${fgColor}});
 			@extend %${placeholderName}-variables;
     		background-color: color-mix(
 				in srgb,
@@ -149,51 +153,66 @@ exports.generateColorUtilitityPlaceholder = (colorToken) => {
 	let output = fileHeader;
 
 	for (const [, value] of Object.keys(colorToken).entries()) {
-		// Text colors with interactive variant, e.g. primary
-		if (colorToken[value].enabled) {
-			// Text & elements & border
-			output += `
+		// TODO: remove this if secondary becomes obsolete
+		if (value !== 'secondary') {
+			// Text colors with interactive variant, e.g. primary
+			if (colorToken[value].enabled) {
+				// Text & elements & border
+				output += `
 %${prefix}-${value}-component-ia {
-	color: var(--${prefix}-${value}-on-enabled, #{$${prefix}-${colorToken[value].on.enabled.name}});
-	background-color: var(--${prefix}-${value}-enabled, #{$${prefix}-${colorToken[value].enabled.name}});
+	--db-current-color: var(--${prefix}-${value}-on-enabled,
+	#{$${prefix}-${colorToken[value].on.enabled.name}});
+    color: var(--${prefix}-current-color);
+	background-color: var(--${prefix}-${value}-enabled,
+	#{$${prefix}-${colorToken[value].enabled.name}});
 	&:enabled {
 		&:hover{
-			background-color: var(--${prefix}-${value}-hover, #{$${prefix}-${colorToken[value].hover.name}});
+			background-color: var(--${prefix}-${value}-hover,
+			#{$${prefix}-${colorToken[value].hover.name}});
 		}
 		&:active{
-			background-color: var(--${prefix}-${value}-pressed, #{$${prefix}-${colorToken[value].pressed.name}});
+			background-color: var(--${prefix}-${value}-pressed,
+			#{$${prefix}-${colorToken[value].pressed.name}});
 		}
 	}
 }
 
 %${prefix}-${value}-component {
-	background-color: var(--${prefix}-${value}-enabled, #{$${prefix}-${colorToken[value].enabled.name}});
-	color: var(--${prefix}-${value}-on-enabled, #{$${prefix}-${colorToken[value].on.enabled.name}});
+	--db-current-color: var(${
+		value === 'primary'
+			? `--${prefix}-primary-on-enabled`
+			: `--${prefix}-neutral-on-bg-enabled`
+	}, #{$${prefix}-${colorToken[value].on.enabled.name}});
+	background-color: var(--${prefix}-${value}-enabled,
+	#{$${prefix}-${colorToken[value].enabled.name}});
+    color: var(--${prefix}-current-color);
 }
 `;
-		}
+			}
 
-		if (value === 'neutral') {
-			// Neutral has multiple default tones
-			const neutralTones = ['0', '1', '2', '3', '4'];
-			for (const neutralTone of neutralTones) {
+			if (value === 'neutral') {
+				// Neutral has multiple default tones
+				// TODO: This will be replaced with 0===bg-neutral and 0=bg-neutral-strong
+				const neutralTones = ['0', '4'];
+				for (const neutralTone of neutralTones) {
+					output += generateBGVariants(
+						value,
+						neutralTone,
+						colorToken[value].bg[neutralTone],
+						colorToken[value].on.bg,
+						colorToken[value]
+					);
+				}
+			} else {
+				// Default text and background colors (former 'light' tone)
 				output += generateBGVariants(
 					value,
-					neutralTone,
-					colorToken[value].bg[neutralTone],
+					undefined,
+					colorToken[value].bg,
 					colorToken[value].on.bg,
 					colorToken[value]
 				);
 			}
-		} else {
-			// Default text and background colors (former 'light' tone)
-			output += generateBGVariants(
-				value,
-				undefined,
-				colorToken[value].bg,
-				colorToken[value].on.bg,
-				colorToken[value]
-			);
 		}
 	}
 
diff --git a/packages/foundations/scss/_init.scss b/packages/foundations/scss/_init.scss
index 3cd271e49108..0e8dca02e2e5 100644
--- a/packages/foundations/scss/_init.scss
+++ b/packages/foundations/scss/_init.scss
@@ -8,7 +8,6 @@
 	// TODO: probably move these to the tokens as well
 	--db-focus-outline-offset: 1px;
 	--db-focus-outline-color: #{$db-colors-informational};
-	--db-focus-outline-transition-duration: #{$db-transition-duration-ultra-fast};
 	--db-focus-outline-size: max(2px, 0.08em);
 	--db-disabled-text-opacity: 0.5;
 }
@@ -32,16 +31,14 @@ html {
 }
 
 // Make sure every elements has the current color from container above
-body {
-	color: $db-colors-neutral-on-bg;
-}
-
+body,
+button,
+input,
+textarea,
+summary,
+select,
 a {
 	color: inherit;
-
-	strong {
-		color: currentColor;
-	}
 }
 
 button,
@@ -71,8 +68,6 @@ iframe {
 // Focus styles
 %focus-placeholder,
 :is(a, button, input, textarea, summary, select) {
-	transition: outline var(--db-focus-outline-transition-duration);
-
 	&:focus-visible {
 		outline: var(--db-focus-outline-size)
 			var(--db-focus-outline-style, solid)
diff --git a/packages/foundations/scss/_variables.global.scss b/packages/foundations/scss/_variables.global.scss
index 1a7999dda20e..5bad5d365d96 100644
--- a/packages/foundations/scss/_variables.global.scss
+++ b/packages/foundations/scss/_variables.global.scss
@@ -36,18 +36,33 @@ $db-colors-neutral-bg: var(
 
 $db-colors-neutral-on-bg: var(
 	--db-current-color,
-	--db-neutral-on-bg-enabled,
-	$db-colors-neutral-on-bg-enabled
+	var(--db-neutral-on-bg-enabled, $db-colors-neutral-on-bg-enabled)
+);
+
+$db-colors-neutral-border-weak: var(
+	--db-current-border-weak-color,
+	var(
+		--db-neutral-border-weak-enabled,
+		$db-colors-neutral-border-weak-enabled
+	)
 );
 
 // primary
 
 $db-colors-primary: var(--db-primary-enabled, $db-colors-primary-enabled);
 
-$db-colors-primary-hover: var(--db-primary-hover, $db-colors-primary-hover);
+$db-colors-primary-text: var(
+	--db-primary-text-enabled,
+	$db-colors-primary-enabled
+);
+
+$db-colors-primary-text-hover: var(
+	--db-primary-text-hover,
+	$db-colors-primary-hover
+);
 
-$db-colors-primary-pressed: var(
-	--db-primary-pressed,
+$db-colors-primary-text-pressed: var(
+	--db-primary-text-pressed,
 	$db-colors-primary-pressed
 );
 
diff --git a/packages/foundations/scss/color/_color-variants.scss b/packages/foundations/scss/color/_color-variants.scss
index 565eb36b07cd..3c73a80a3925 100644
--- a/packages/foundations/scss/color/_color-variants.scss
+++ b/packages/foundations/scss/color/_color-variants.scss
@@ -3,8 +3,8 @@
 @use "../variables" as *;
 @use "../variables.global" as *;
 
-$color-variants: "neutral-0", "neutral-1", "neutral-3", "neutral-4", "primary",
-	"secondary", "critical", "successful", "warning", "informational";
+$color-variants: "neutral", "neutral-strong", "primary", "critical",
+	"successful", "warning", "informational";
 
 @mixin color-variants($ia) {
 	@each $variant in $color-variants {
@@ -62,9 +62,17 @@ $color-variants: "neutral-0", "neutral-1", "neutral-3", "neutral-4", "primary",
 	}
 }
 
-%db-bg-inverted-ia {
+%db-bg-inverted {
 	color: var(--db-current-bg-color);
 	background-color: var(--db-current-color);
+}
+
+%db-bg-inverted-ia {
+	@extend %db-bg-inverted;
+
+	&::before {
+		color: var(--db-current-bg-color);
+	}
 
 	&:enabled {
 		&:hover {
diff --git a/packages/foundations/scss/db-ui-foundations.scss b/packages/foundations/scss/db-ui-foundations.scss
index 3dbe9d96a934..2670fdb9b8f7 100644
--- a/packages/foundations/scss/db-ui-foundations.scss
+++ b/packages/foundations/scss/db-ui-foundations.scss
@@ -5,8 +5,18 @@
 @use "color-placeholder" as *;
 @use "tonality" as *;
 @use "init" as *;
+@use "helpers/component" as *;
 
 :root {
 	@extend %db-ui-regular;
-	@extend %db-bg-neutral-0;
+	@extend %db-bg-neutral;
+}
+
+[class^="db-"] {
+	@extend %default-color-transition;
+
+	::before,
+	::after {
+		@extend %default-color-transition;
+	}
 }
diff --git a/packages/foundations/scss/helpers/_component.scss b/packages/foundations/scss/helpers/_component.scss
index 90304ee009a0..a16b9100b7b0 100644
--- a/packages/foundations/scss/helpers/_component.scss
+++ b/packages/foundations/scss/helpers/_component.scss
@@ -1,4 +1,5 @@
 @use "../variables" as *;
+@use "../variables.global" as *;
 @use "../color-placeholder" as *;
 @use "../helpers/functions" as *;
 @use "../icon/icons.helpers" as *;
@@ -11,7 +12,7 @@ $default-opacity: 0.25;
 $default-mobile-header-height: to-rem(56);
 
 %default-adaptive-border {
-	border: solid 1px var(--db-current-color, $db-colors-neutral-on-bg-enabled);
+	border: solid 1px $db-colors-neutral-on-bg;
 }
 
 %transparent-border {
@@ -19,11 +20,7 @@ $default-mobile-header-height: to-rem(56);
 }
 
 %component-border {
-	border: solid 1px
-		var(
-			--db-current-border-weak-enabled,
-			$db-colors-neutral-border-weak-enabled
-		);
+	border: solid 1px $db-colors-neutral-border-weak;
 }
 
 %default-border-radius {
@@ -36,10 +33,15 @@ $default-mobile-header-height: to-rem(56);
 	@extend %default-border-radius;
 }
 
-%default-background-transition {
-	// TODO Changing background-color on hover should be animated by a transition
-	transition: background-color
-		var(--db-transition-color, #{$db-transition-color});
+%default-color-transition {
+	transition:
+		outline
+			var(
+				--db-transition-duration-ultra-fast,
+				#{$db-transition-duration-ultra-fast}
+			),
+		background-color var(--db-transition-color, #{$db-transition-color}),
+		color var(--db-transition-color, #{$db-transition-color});
 }
 
 $default-card-border-radius: var(--default-card-border-radius, 8px);
diff --git a/packages/foundations/scss/icon/_icons.placeholder.scss b/packages/foundations/scss/icon/_icons.placeholder.scss
index 34d36dc6c78d..a864d40bc0cf 100644
--- a/packages/foundations/scss/icon/_icons.placeholder.scss
+++ b/packages/foundations/scss/icon/_icons.placeholder.scss
@@ -7,6 +7,7 @@
 	alt: "";
 
 	content: var(--icon-glyph);
+	color: inherit;
 
 	display: inline-block;
 	/*** icon - placeholder ***/
diff --git a/showcases/angular-showcase/src/app/app.component.ts b/showcases/angular-showcase/src/app/app.component.ts
index 0dff9e12d4ea..1d1e1cfdb785 100644
--- a/showcases/angular-showcase/src/app/app.component.ts
+++ b/showcases/angular-showcase/src/app/app.component.ts
@@ -26,7 +26,7 @@ export class AppComponent implements OnInit {
 	colors = COLORS;
 
 	tonality = TONALITY.REGULAR;
-	color = COLOR.NEUTRAL_0;
+	color = COLOR.NEUTRAL;
 
 	page: string;
 	fullscreen: boolean;
diff --git a/showcases/angular-showcase/src/app/components/default.component.ts b/showcases/angular-showcase/src/app/components/default.component.ts
index 5b876d1f4708..55fa365e0409 100644
--- a/showcases/angular-showcase/src/app/components/default.component.ts
+++ b/showcases/angular-showcase/src/app/components/default.component.ts
@@ -22,7 +22,7 @@ export class DefaultComponent implements OnInit {
 	@Input() exampleTemplate: TemplateRef<any>;
 
 	tonality = TONALITY.REGULAR;
-	color = COLOR.NEUTRAL_0;
+	color = COLOR.NEUTRAL;
 	page: string;
 
 	variantRef: DefaultComponentVariants | undefined;
@@ -62,7 +62,7 @@ export class DefaultComponent implements OnInit {
 		}
 
 		if (!currentUrl.includes('color=')) {
-			currentUrl += `&color=${this.color || COLOR.NEUTRAL_0}`;
+			currentUrl += `&color=${this.color || COLOR.NEUTRAL}`;
 		}
 
 		if (!currentUrl.includes('tonality=')) {
diff --git a/showcases/angular-showcase/src/app/components/form/form.component.html b/showcases/angular-showcase/src/app/components/form/form.component.html
index 07e0446aaf7f..b8e1eb415ba0 100644
--- a/showcases/angular-showcase/src/app/components/form/form.component.html
+++ b/showcases/angular-showcase/src/app/components/form/form.component.html
@@ -61,7 +61,7 @@ <h6>Reactive Forms Example:</h6>
 						<db-tag
 							[variant]="i === 0 ? undefined : 'successful'"
 							(onChange)="changeTags(tag)"
-							[type]="i === 2 ? 'strong' : 'weak'"
+							[emphasis]="i === 2 ? 'strong' : 'weak'"
 							behaviour="interactive"
 							>{{ getTagName(tag) }}</db-tag
 						>
diff --git a/showcases/angular-showcase/src/app/components/tag/tag.component.html b/showcases/angular-showcase/src/app/components/tag/tag.component.html
index 472457b35bd1..35dee6b8fd0f 100644
--- a/showcases/angular-showcase/src/app/components/tag/tag.component.html
+++ b/showcases/angular-showcase/src/app/components/tag/tag.component.html
@@ -14,7 +14,7 @@
 			[icon]="exampleProps.icon"
 			[noText]="exampleProps.noText"
 			[behaviour]="exampleProps.behaviour"
-			[type]="exampleProps.type"
+			[emphasis]="exampleProps.emphasis"
 			[checked]="exampleProps.checked"
 			[label]="exampleProps.label"
 			[name]="exampleProps.name"
diff --git a/showcases/e2e/fixtures/variants.ts b/showcases/e2e/fixtures/variants.ts
index c07e5f91fa5d..dce2d8624b74 100644
--- a/showcases/e2e/fixtures/variants.ts
+++ b/showcases/e2e/fixtures/variants.ts
@@ -5,5 +5,5 @@
 // 	TONALITIES
 // } from '../../../packages/components/src/shared/constants.ts';
 
-export const COLORS = ['neutral-0'];
+export const COLORS = ['neutral'];
 export const TONALITIES = ['regular'];
diff --git a/showcases/patternhub/pages/base64/index.tsx b/showcases/patternhub/pages/base64/index.tsx
index dbce995c426e..d3f93f0fdcf3 100644
--- a/showcases/patternhub/pages/base64/index.tsx
+++ b/showcases/patternhub/pages/base64/index.tsx
@@ -14,7 +14,7 @@ const Base64 = () => {
 	const [url, setUrl] = useState<string>('');
 
 	const [tonality, setTonality] = useState<string>(TONALITY.REGULAR);
-	const [color, setColor] = useState<string>(COLOR.NEUTRAL_0);
+	const [color, setColor] = useState<string>(COLOR.NEUTRAL);
 
 	useEffect(() => {
 		setUrl(
diff --git a/showcases/patternhub/scripts/utils.js b/showcases/patternhub/scripts/utils.js
index 4937489b958f..85b91bf1b546 100644
--- a/showcases/patternhub/scripts/utils.js
+++ b/showcases/patternhub/scripts/utils.js
@@ -78,19 +78,13 @@ export const getCodeByFramework = (componentName, framework, example) => {
 };
 
 export const getColorVariants = () => [
-	'neutral-0',
-	'neutral-1',
-	'neutral-2',
-	'neutral-3',
-	'neutral-4',
+	'neutral',
+	'neutral-strong',
 	'neutral-transparent-full',
 	'neutral-transparent-semi',
 	'primary',
 	'primary-transparent-full',
 	'primary-transparent-semi',
-	'secondary',
-	'secondary-transparent-full',
-	'secondary-transparent-semi',
 	'successful',
 	'successful-transparent-full',
 	'successful-transparent-semi',
diff --git a/showcases/patternhub/styles/globals.scss b/showcases/patternhub/styles/globals.scss
index f4188e4073e0..36bad01e6a85 100644
--- a/showcases/patternhub/styles/globals.scss
+++ b/showcases/patternhub/styles/globals.scss
@@ -3,6 +3,7 @@
 @use "@db-ui/foundations/build/scss/variables.global" as *;
 @use "@db-ui/foundations/build/scss/variables" as *;
 @use "@db-ui/foundations/build/scss/tonality" as *;
+@use "@db-ui/foundations/build/scss/color-placeholder" as *;
 
 #__next {
 	height: inherit;
@@ -84,18 +85,18 @@ table {
 
 table td,
 table th {
-	border: 1px solid $db-colors-neutral-bg-2-enabled;
+	border: 1px solid $db-colors-neutral-border-weak;
 	padding: $db-spacing-fixed-md;
 	max-width: 33vw;
 }
 
 table tr:nth-child(even) {
-	background-color: $db-colors-neutral-bg-1-enabled;
+	@extend %db-bg-neutral-transparent-semi;
 }
 
 table th {
+	@extend %db-bg-neutral-transparent-semi;
 	padding-inline: $db-spacing-fixed-md;
-	background-color: $db-colors-neutral-bg-2-enabled;
 }
 
 /* Workaround for current db-page from db-ui-elements */
@@ -103,7 +104,7 @@ div[class^="ch-"] {
 	div,
 	span {
 		@extend %db-overwrite-font-size-sm;
-		color: $db-colors-secondary-on-enabled;
+		color: $db-colors-neutral-bg;
 	}
 }
 
diff --git a/showcases/react-showcase/src/components/form/index.tsx b/showcases/react-showcase/src/components/form/index.tsx
index 2c41cee7c8a1..2f4b90f3e12b 100644
--- a/showcases/react-showcase/src/components/form/index.tsx
+++ b/showcases/react-showcase/src/components/form/index.tsx
@@ -63,7 +63,7 @@ const FormComponent = () => {
 												? undefined
 												: 'successful'
 										}
-										type={
+										emphasis={
 											index === 2 ? 'strong' : undefined
 										}
 										behaviour="interactive"
diff --git a/showcases/react-showcase/src/components/tag/index.tsx b/showcases/react-showcase/src/components/tag/index.tsx
index b220dad923f0..2b404335155d 100644
--- a/showcases/react-showcase/src/components/tag/index.tsx
+++ b/showcases/react-showcase/src/components/tag/index.tsx
@@ -13,7 +13,7 @@ const getTag = ({
 	checked,
 	noText,
 	behaviour,
-	type,
+	emphasis,
 	label,
 	removeButton,
 	name
@@ -24,7 +24,7 @@ const getTag = ({
 		icon={icon}
 		noText={noText}
 		behaviour={behaviour}
-		type={type}
+		emphasis={emphasis}
 		checked={checked}
 		label={label}
 		overflow={overflow}
diff --git a/showcases/react-showcase/src/hooks/use-query.tsx b/showcases/react-showcase/src/hooks/use-query.tsx
index ffc6c61aad57..78fd5a6248c7 100644
--- a/showcases/react-showcase/src/hooks/use-query.tsx
+++ b/showcases/react-showcase/src/hooks/use-query.tsx
@@ -13,7 +13,7 @@ const useQuery = (): any => {
 		searchParameters.get(TONALITY_CONST) ?? TONALITY.REGULAR
 	);
 	const [color, setColor] = useState<string>(
-		searchParameters.get(COLOR_CONST) ?? COLOR.NEUTRAL_0
+		searchParameters.get(COLOR_CONST) ?? COLOR.NEUTRAL
 	);
 	const [page, setPage] = useState<string | undefined>(undefined);
 	const [fullscreen, setFullscreen] = useState<boolean>(false);
diff --git a/showcases/react-showcase/src/main.tsx b/showcases/react-showcase/src/main.tsx
index 8fbdf2e6cdd1..d5e29ae37c95 100644
--- a/showcases/react-showcase/src/main.tsx
+++ b/showcases/react-showcase/src/main.tsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client';
 import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
 import './index.scss';
 import App from './app';
-import { NAVIGATION_ITEMS, NavigationItem } from './utils/navigation-item';
+import { NAVIGATION_ITEMS } from './utils/navigation-item';
 
 ReactDOM.createRoot(document.querySelector('#root')!).render(
 	<React.StrictMode>
diff --git a/showcases/react-showcase/src/meta-navigation/index.tsx b/showcases/react-showcase/src/meta-navigation/index.tsx
index 7e099bcb1bfd..1bbeee4106fc 100644
--- a/showcases/react-showcase/src/meta-navigation/index.tsx
+++ b/showcases/react-showcase/src/meta-navigation/index.tsx
@@ -24,7 +24,7 @@ const MetaNavigation = ({
 		searchParameters.get(TONALITY_CONST) ?? TONALITY.REGULAR
 	);
 	const [color, setColor] = useState<string>(
-		searchParameters.get(COLOR_CONST) ?? COLOR.NEUTRAL_0
+		searchParameters.get(COLOR_CONST) ?? COLOR.NEUTRAL
 	);
 
 	useEffect(() => {
diff --git a/showcases/shared/card.json b/showcases/shared/card.json
index 3203c3ccb91e..e1c139648686 100644
--- a/showcases/shared/card.json
+++ b/showcases/shared/card.json
@@ -29,41 +29,17 @@
 		"name": "ColorVariant",
 		"examples": [
 			{
-				"name": "(Default) neutral-0",
+				"name": "(Default) neutral",
 				"props": {
-					"colorVariant": "neutral-0",
+					"colorVariant": "neutral",
 					"variant": "interactive",
 					"spacing": "small"
 				}
 			},
 			{
-				"name": "neutral-1",
+				"name": "neutral-strong",
 				"props": {
-					"colorVariant": "neutral-1",
-					"variant": "interactive",
-					"spacing": "small"
-				}
-			},
-			{
-				"name": "neutral-2",
-				"props": {
-					"colorVariant": "neutral-2",
-					"variant": "interactive",
-					"spacing": "small"
-				}
-			},
-			{
-				"name": "neutral-3",
-				"props": {
-					"colorVariant": "neutral-3",
-					"variant": "interactive",
-					"spacing": "small"
-				}
-			},
-			{
-				"name": "neutral-4",
-				"props": {
-					"colorVariant": "neutral-4",
+					"colorVariant": "neutral-strong",
 					"variant": "interactive",
 					"spacing": "small"
 				}
@@ -76,14 +52,6 @@
 					"spacing": "small"
 				}
 			},
-			{
-				"name": "secondary",
-				"props": {
-					"colorVariant": "secondary",
-					"variant": "interactive",
-					"spacing": "small"
-				}
-			},
 			{
 				"name": "critical",
 				"props": {
diff --git a/showcases/shared/tag.json b/showcases/shared/tag.json
index 9ff408b9b875..e5ed89c567e4 100644
--- a/showcases/shared/tag.json
+++ b/showcases/shared/tag.json
@@ -20,7 +20,7 @@
 		]
 	},
 	{
-		"name": "Type",
+		"name": "Emphasis",
 		"examples": [
 			{
 				"name": "Weak (Default)",
@@ -29,7 +29,7 @@
 			{
 				"name": "Strong",
 				"props": {
-					"type": "strong"
+					"emphasis": "strong"
 				}
 			}
 		]
@@ -68,35 +68,35 @@
 			{
 				"name": "Neutral Strong",
 				"props": {
-					"type": "strong"
+					"emphasis": "strong"
 				}
 			},
 			{
 				"name": "Critical Strong",
 				"props": {
 					"variant": "critical",
-					"type": "strong"
+					"emphasis": "strong"
 				}
 			},
 			{
 				"name": "Informational Strong",
 				"props": {
 					"variant": "informational",
-					"type": "strong"
+					"emphasis": "strong"
 				}
 			},
 			{
 				"name": "Successful Strong",
 				"props": {
 					"variant": "successful",
-					"type": "strong"
+					"emphasis": "strong"
 				}
 			},
 			{
 				"name": "Warning Strong",
 				"props": {
 					"variant": "warning",
-					"type": "strong"
+					"emphasis": "strong"
 				}
 			}
 		]
diff --git a/showcases/showcase-styles.css b/showcases/showcase-styles.css
index d21126bdfa98..b5ce0d54aa7d 100644
--- a/showcases/showcase-styles.css
+++ b/showcases/showcase-styles.css
@@ -85,7 +85,6 @@
 	display: flex;
 	gap: var(--db-spacing-fixed-sm);
 	padding: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-sm);
-	background-color: #fff;
 }
 
 .badge-inline-container .db-badge {
diff --git a/showcases/vue-showcase/src/App.vue b/showcases/vue-showcase/src/App.vue
index 04a551131f2c..da2069699419 100644
--- a/showcases/vue-showcase/src/App.vue
+++ b/showcases/vue-showcase/src/App.vue
@@ -28,7 +28,7 @@ const router = useRouter();
 const route = useRoute();
 
 const tonality = ref(TONALITY.REGULAR);
-const color = ref(COLOR.NEUTRAL_0);
+const color = ref(COLOR.NEUTRAL);
 const page = ref();
 const fullscreen = ref();
 
diff --git a/showcases/vue-showcase/src/components/DefaultComponent.vue b/showcases/vue-showcase/src/components/DefaultComponent.vue
index 2449c02a5a09..5817691b1606 100644
--- a/showcases/vue-showcase/src/components/DefaultComponent.vue
+++ b/showcases/vue-showcase/src/components/DefaultComponent.vue
@@ -61,7 +61,7 @@ const getLink = (variantName: string) => {
 		currentUrl += "?";
 	}
 	if (!currentUrl.includes("color=")) {
-		currentUrl += `&color=${route.query[COLOR_CONST] || COLOR.NEUTRAL_0}`;
+		currentUrl += `&color=${route.query[COLOR_CONST] || COLOR.NEUTRAL}`;
 	}
 	if (!currentUrl.includes("tonality=")) {
 		currentUrl += `&tonality=${
diff --git a/showcases/vue-showcase/src/components/form/Form.vue b/showcases/vue-showcase/src/components/form/Form.vue
index eb3fdd2e3a82..8b6858c9dca6 100644
--- a/showcases/vue-showcase/src/components/form/Form.vue
+++ b/showcases/vue-showcase/src/components/form/Form.vue
@@ -81,7 +81,7 @@ const reset = () => {
 									index === 0 ? undefined : 'successful'
 								"
 								@Change="changeTags(tag)"
-								:strong="index === 2"
+								:emphasis="index === 2 ? 'strong' : 'weak'"
 								behaviour="interactive"
 								>Tag {{ tag }}</DBTag
 							>
diff --git a/showcases/vue-showcase/src/components/tag/Tag.vue b/showcases/vue-showcase/src/components/tag/Tag.vue
index 8d06b1dd9df1..daa313aecd94 100644
--- a/showcases/vue-showcase/src/components/tag/Tag.vue
+++ b/showcases/vue-showcase/src/components/tag/Tag.vue
@@ -21,7 +21,7 @@ const showAlert = (exampleName: string) => {
 				:icon="exampleProps.icon"
 				:noText="exampleProps.noText"
 				:behaviour="exampleProps.behaviour"
-				:type="exampleProps.type"
+				:emphasis="exampleProps.emphasis"
 				:checked="exampleProps.checked"
 				:label="exampleProps.label"
 				:overflow="exampleProps.overflow"