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
deleted file mode 100644
index 562860825e5..00000000000
Binary files a/__snapshots__/alert/showcase/chromium/regular/neutral/DBAlert-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/alert/showcase/firefox/regular/neutral/DBAlert-should-match-screenshot.png b/__snapshots__/alert/showcase/firefox/regular/neutral/DBAlert-should-match-screenshot.png
deleted file mode 100644
index 6ef638bca83..00000000000
Binary files a/__snapshots__/alert/showcase/firefox/regular/neutral/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
deleted file mode 100644
index 371dc8d512d..00000000000
Binary files a/__snapshots__/alert/showcase/mobile-chrome/regular/neutral/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
deleted file mode 100644
index 0f40f882d65..00000000000
Binary files a/__snapshots__/alert/showcase/mobile-safari/regular/neutral/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
deleted file mode 100644
index c83e3c37529..00000000000
Binary files a/__snapshots__/alert/showcase/webkit/regular/neutral/DBAlert-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/badge/component/chromium/DBBadge-should-match-screenshot.png b/__snapshots__/badge/component/chromium/DBBadge-should-match-screenshot.png
index 4259d4be399..c1ba25a5cbe 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/firefox/DBBadge-should-match-screenshot.png b/__snapshots__/badge/component/firefox/DBBadge-should-match-screenshot.png
index 8559c3fb781..f1995d2d5b2 100644
Binary files a/__snapshots__/badge/component/firefox/DBBadge-should-match-screenshot.png and b/__snapshots__/badge/component/firefox/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 4259d4be399..c1ba25a5cbe 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__/button/component/chromium/DBButton-should-match-screenshot-for-variant-brand.png b/__snapshots__/button/component/chromium/DBButton-should-match-screenshot-for-variant-brand.png
new file mode 100644
index 00000000000..24b3c2deb86
Binary files /dev/null and b/__snapshots__/button/component/chromium/DBButton-should-match-screenshot-for-variant-brand.png differ
diff --git a/__snapshots__/button/component/chromium/DBButton-should-match-screenshot-for-variant-filled.png b/__snapshots__/button/component/chromium/DBButton-should-match-screenshot-for-variant-filled.png
new file mode 100644
index 00000000000..4c5e3b056bb
Binary files /dev/null and b/__snapshots__/button/component/chromium/DBButton-should-match-screenshot-for-variant-filled.png differ
diff --git a/__snapshots__/button/component/chromium/DBButton-should-match-screenshot-for-variant-ghost.png b/__snapshots__/button/component/chromium/DBButton-should-match-screenshot-for-variant-ghost.png
new file mode 100644
index 00000000000..4169d215b36
Binary files /dev/null and b/__snapshots__/button/component/chromium/DBButton-should-match-screenshot-for-variant-ghost.png differ
diff --git a/__snapshots__/button/component/chromium/DBButton-should-match-screenshot-for-variant-primary.png b/__snapshots__/button/component/chromium/DBButton-should-match-screenshot-for-variant-primary.png
deleted file mode 100644
index 76bf559a844..00000000000
Binary files a/__snapshots__/button/component/chromium/DBButton-should-match-screenshot-for-variant-primary.png and /dev/null differ
diff --git a/__snapshots__/button/component/chromium/DBButton-should-match-screenshot-for-variant-solid.png b/__snapshots__/button/component/chromium/DBButton-should-match-screenshot-for-variant-solid.png
deleted file mode 100644
index 76bf559a844..00000000000
Binary files a/__snapshots__/button/component/chromium/DBButton-should-match-screenshot-for-variant-solid.png and /dev/null differ
diff --git a/__snapshots__/button/component/chromium/DBButton-should-match-screenshot-for-variant-text.png b/__snapshots__/button/component/chromium/DBButton-should-match-screenshot-for-variant-text.png
deleted file mode 100644
index 76bf559a844..00000000000
Binary files a/__snapshots__/button/component/chromium/DBButton-should-match-screenshot-for-variant-text.png and /dev/null differ
diff --git a/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-brand.png b/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-brand.png
new file mode 100644
index 00000000000..cf40bab11e0
Binary files /dev/null and b/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-brand.png differ
diff --git a/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-filled.png b/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-filled.png
new file mode 100644
index 00000000000..6623ad43ab4
Binary files /dev/null and b/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-filled.png differ
diff --git a/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-ghost.png b/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-ghost.png
new file mode 100644
index 00000000000..9cb8a870609
Binary files /dev/null and b/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-ghost.png differ
diff --git a/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-primary.png b/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-primary.png
deleted file mode 100644
index d9dc9b8867e..00000000000
Binary files a/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-primary.png and /dev/null differ
diff --git a/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-solid.png b/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-solid.png
deleted file mode 100644
index d9dc9b8867e..00000000000
Binary files a/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-solid.png and /dev/null differ
diff --git a/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-text.png b/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-text.png
deleted file mode 100644
index d9dc9b8867e..00000000000
Binary files a/__snapshots__/button/component/chromium/DBButton-should-only-have-icon-for-variant-text.png and /dev/null differ
diff --git a/__snapshots__/button/component/firefox/DBButton-should-match-screenshot-for-variant-brand.png b/__snapshots__/button/component/firefox/DBButton-should-match-screenshot-for-variant-brand.png
new file mode 100644
index 00000000000..8de6b5c6606
Binary files /dev/null and b/__snapshots__/button/component/firefox/DBButton-should-match-screenshot-for-variant-brand.png differ
diff --git a/__snapshots__/button/component/firefox/DBButton-should-match-screenshot-for-variant-filled.png b/__snapshots__/button/component/firefox/DBButton-should-match-screenshot-for-variant-filled.png
new file mode 100644
index 00000000000..0cded05d031
Binary files /dev/null and b/__snapshots__/button/component/firefox/DBButton-should-match-screenshot-for-variant-filled.png differ
diff --git a/__snapshots__/button/component/firefox/DBButton-should-match-screenshot-for-variant-ghost.png b/__snapshots__/button/component/firefox/DBButton-should-match-screenshot-for-variant-ghost.png
new file mode 100644
index 00000000000..45a2ef4d416
Binary files /dev/null and b/__snapshots__/button/component/firefox/DBButton-should-match-screenshot-for-variant-ghost.png differ
diff --git a/__snapshots__/button/component/firefox/DBButton-should-match-screenshot-for-variant-primary.png b/__snapshots__/button/component/firefox/DBButton-should-match-screenshot-for-variant-primary.png
deleted file mode 100644
index 7d7321fb19f..00000000000
Binary files a/__snapshots__/button/component/firefox/DBButton-should-match-screenshot-for-variant-primary.png and /dev/null differ
diff --git a/__snapshots__/button/component/firefox/DBButton-should-match-screenshot-for-variant-solid.png b/__snapshots__/button/component/firefox/DBButton-should-match-screenshot-for-variant-solid.png
deleted file mode 100644
index 7d7321fb19f..00000000000
Binary files a/__snapshots__/button/component/firefox/DBButton-should-match-screenshot-for-variant-solid.png and /dev/null differ
diff --git a/__snapshots__/button/component/firefox/DBButton-should-match-screenshot-for-variant-text.png b/__snapshots__/button/component/firefox/DBButton-should-match-screenshot-for-variant-text.png
deleted file mode 100644
index 7d7321fb19f..00000000000
Binary files a/__snapshots__/button/component/firefox/DBButton-should-match-screenshot-for-variant-text.png and /dev/null differ
diff --git a/__snapshots__/button/component/firefox/DBButton-should-only-have-icon-for-variant-brand.png b/__snapshots__/button/component/firefox/DBButton-should-only-have-icon-for-variant-brand.png
new file mode 100644
index 00000000000..1e1cdc95bc3
Binary files /dev/null and b/__snapshots__/button/component/firefox/DBButton-should-only-have-icon-for-variant-brand.png differ
diff --git a/__snapshots__/button/component/firefox/DBButton-should-only-have-icon-for-variant-filled.png b/__snapshots__/button/component/firefox/DBButton-should-only-have-icon-for-variant-filled.png
new file mode 100644
index 00000000000..afb7c41dbb6
Binary files /dev/null and b/__snapshots__/button/component/firefox/DBButton-should-only-have-icon-for-variant-filled.png differ
diff --git a/__snapshots__/button/component/firefox/DBButton-should-only-have-icon-for-variant-ghost.png b/__snapshots__/button/component/firefox/DBButton-should-only-have-icon-for-variant-ghost.png
new file mode 100644
index 00000000000..15df5c9e4bf
Binary files /dev/null and b/__snapshots__/button/component/firefox/DBButton-should-only-have-icon-for-variant-ghost.png differ
diff --git a/__snapshots__/button/component/firefox/DBButton-should-only-have-icon-for-variant-primary.png b/__snapshots__/button/component/firefox/DBButton-should-only-have-icon-for-variant-primary.png
deleted file mode 100644
index c8e2bf0baa7..00000000000
Binary files a/__snapshots__/button/component/firefox/DBButton-should-only-have-icon-for-variant-primary.png and /dev/null differ
diff --git a/__snapshots__/button/component/firefox/DBButton-should-only-have-icon-for-variant-solid.png b/__snapshots__/button/component/firefox/DBButton-should-only-have-icon-for-variant-solid.png
deleted file mode 100644
index c8e2bf0baa7..00000000000
Binary files a/__snapshots__/button/component/firefox/DBButton-should-only-have-icon-for-variant-solid.png and /dev/null differ
diff --git a/__snapshots__/button/component/firefox/DBButton-should-only-have-icon-for-variant-text.png b/__snapshots__/button/component/firefox/DBButton-should-only-have-icon-for-variant-text.png
deleted file mode 100644
index c8e2bf0baa7..00000000000
Binary files a/__snapshots__/button/component/firefox/DBButton-should-only-have-icon-for-variant-text.png and /dev/null differ
diff --git a/__snapshots__/button/component/mobile-chrome/DBButton-should-match-screenshot-for-variant-brand.png b/__snapshots__/button/component/mobile-chrome/DBButton-should-match-screenshot-for-variant-brand.png
new file mode 100644
index 00000000000..24b3c2deb86
Binary files /dev/null and b/__snapshots__/button/component/mobile-chrome/DBButton-should-match-screenshot-for-variant-brand.png differ
diff --git a/__snapshots__/button/component/mobile-chrome/DBButton-should-match-screenshot-for-variant-filled.png b/__snapshots__/button/component/mobile-chrome/DBButton-should-match-screenshot-for-variant-filled.png
new file mode 100644
index 00000000000..4c5e3b056bb
Binary files /dev/null and b/__snapshots__/button/component/mobile-chrome/DBButton-should-match-screenshot-for-variant-filled.png differ
diff --git a/__snapshots__/button/component/mobile-chrome/DBButton-should-match-screenshot-for-variant-ghost.png b/__snapshots__/button/component/mobile-chrome/DBButton-should-match-screenshot-for-variant-ghost.png
new file mode 100644
index 00000000000..4169d215b36
Binary files /dev/null and b/__snapshots__/button/component/mobile-chrome/DBButton-should-match-screenshot-for-variant-ghost.png differ
diff --git a/__snapshots__/button/component/mobile-chrome/DBButton-should-match-screenshot-for-variant-primary.png b/__snapshots__/button/component/mobile-chrome/DBButton-should-match-screenshot-for-variant-primary.png
deleted file mode 100644
index 76bf559a844..00000000000
Binary files a/__snapshots__/button/component/mobile-chrome/DBButton-should-match-screenshot-for-variant-primary.png and /dev/null differ
diff --git a/__snapshots__/button/component/mobile-chrome/DBButton-should-match-screenshot-for-variant-solid.png b/__snapshots__/button/component/mobile-chrome/DBButton-should-match-screenshot-for-variant-solid.png
deleted file mode 100644
index 76bf559a844..00000000000
Binary files a/__snapshots__/button/component/mobile-chrome/DBButton-should-match-screenshot-for-variant-solid.png and /dev/null differ
diff --git a/__snapshots__/button/component/mobile-chrome/DBButton-should-match-screenshot-for-variant-text.png b/__snapshots__/button/component/mobile-chrome/DBButton-should-match-screenshot-for-variant-text.png
deleted file mode 100644
index 76bf559a844..00000000000
Binary files a/__snapshots__/button/component/mobile-chrome/DBButton-should-match-screenshot-for-variant-text.png and /dev/null differ
diff --git a/__snapshots__/button/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-brand.png b/__snapshots__/button/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-brand.png
new file mode 100644
index 00000000000..cf40bab11e0
Binary files /dev/null and b/__snapshots__/button/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-brand.png differ
diff --git a/__snapshots__/button/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-filled.png b/__snapshots__/button/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-filled.png
new file mode 100644
index 00000000000..6623ad43ab4
Binary files /dev/null and b/__snapshots__/button/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-filled.png differ
diff --git a/__snapshots__/button/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-ghost.png b/__snapshots__/button/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-ghost.png
new file mode 100644
index 00000000000..9cb8a870609
Binary files /dev/null and b/__snapshots__/button/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-ghost.png differ
diff --git a/__snapshots__/button/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-primary.png b/__snapshots__/button/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-primary.png
deleted file mode 100644
index d9dc9b8867e..00000000000
Binary files a/__snapshots__/button/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-primary.png and /dev/null differ
diff --git a/__snapshots__/button/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-solid.png b/__snapshots__/button/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-solid.png
deleted file mode 100644
index d9dc9b8867e..00000000000
Binary files a/__snapshots__/button/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-solid.png and /dev/null differ
diff --git a/__snapshots__/button/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-text.png b/__snapshots__/button/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-text.png
deleted file mode 100644
index d9dc9b8867e..00000000000
Binary files a/__snapshots__/button/component/mobile-chrome/DBButton-should-only-have-icon-for-variant-text.png and /dev/null 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
deleted file mode 100644
index c433ddd43f4..00000000000
Binary files a/__snapshots__/code-docs/component/chromium/DBCodeDocs-should-match-screenshot.png and /dev/null differ
diff --git a/__snapshots__/code-docs/component/firefox/DBCodeDocs-should-match-screenshot.png b/__snapshots__/code-docs/component/firefox/DBCodeDocs-should-match-screenshot.png
deleted file mode 100644
index 0ba33028c8a..00000000000
Binary files a/__snapshots__/code-docs/component/firefox/DBCodeDocs-should-match-screenshot.png and /dev/null 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
deleted file mode 100644
index c433ddd43f4..00000000000
Binary files a/__snapshots__/code-docs/component/mobile-chrome/DBCodeDocs-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
index 7bbbf8ee66e..b0176e5472e 100644
Binary files a/__snapshots__/input/showcase/chromium/regular/neutral/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/chromium/regular/neutral/DBInput-should-match-screenshot.png differ
diff --git a/__snapshots__/input/showcase/firefox/regular/neutral/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/firefox/regular/neutral/DBInput-should-match-screenshot.png
index a1be072f65f..d62e78d980d 100644
Binary files a/__snapshots__/input/showcase/firefox/regular/neutral/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/firefox/regular/neutral/DBInput-should-match-screenshot.png 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
index 4d6b238e3c5..a1e7984362d 100644
Binary files a/__snapshots__/input/showcase/mobile-chrome/regular/neutral/DBInput-should-match-screenshot.png 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/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/mobile-safari/regular/neutral/DBInput-should-match-screenshot.png
index 60f80acbb61..bd599ec0d49 100644
Binary files a/__snapshots__/input/showcase/mobile-safari/regular/neutral/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/mobile-safari/regular/neutral/DBInput-should-match-screenshot.png 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
index 5f5e33f96b3..1f1ca941b54 100644
Binary files a/__snapshots__/input/showcase/webkit/regular/neutral/DBInput-should-match-screenshot.png and b/__snapshots__/input/showcase/webkit/regular/neutral/DBInput-should-match-screenshot.png 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
index d4b434dabca..673bfc66a07 100644
Binary files a/__snapshots__/navigation-item/showcase/chromium/regular/neutral/DBNavigationItem-should-match-screenshot.png and b/__snapshots__/navigation-item/showcase/chromium/regular/neutral/DBNavigationItem-should-match-screenshot.png differ
diff --git a/__snapshots__/navigation-item/showcase/firefox/regular/neutral/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/firefox/regular/neutral/DBNavigationItem-should-match-screenshot.png
index c8e8236de84..9a53f636f0b 100644
Binary files a/__snapshots__/navigation-item/showcase/firefox/regular/neutral/DBNavigationItem-should-match-screenshot.png and b/__snapshots__/navigation-item/showcase/firefox/regular/neutral/DBNavigationItem-should-match-screenshot.png 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
index 8c87c8d7729..a08fb8d96f3 100644
Binary files a/__snapshots__/navigation-item/showcase/mobile-chrome/regular/neutral/DBNavigationItem-should-match-screenshot.png 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/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/mobile-safari/regular/neutral/DBNavigationItem-should-match-screenshot.png
index b00d55af559..dc2cf358543 100644
Binary files a/__snapshots__/navigation-item/showcase/mobile-safari/regular/neutral/DBNavigationItem-should-match-screenshot.png 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/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/webkit/regular/neutral/DBNavigationItem-should-match-screenshot.png
index 47a9c6ebceb..66dde5cded9 100644
Binary files a/__snapshots__/navigation-item/showcase/webkit/regular/neutral/DBNavigationItem-should-match-screenshot.png and b/__snapshots__/navigation-item/showcase/webkit/regular/neutral/DBNavigationItem-should-match-screenshot.png differ
diff --git a/__snapshots__/popover/component/chromium/DBPopover-after-open-should-match-screenshot.png b/__snapshots__/popover/component/chromium/DBPopover-after-open-should-match-screenshot.png
index 742a5bcb9b1..adae6813ab3 100644
Binary files a/__snapshots__/popover/component/chromium/DBPopover-after-open-should-match-screenshot.png and b/__snapshots__/popover/component/chromium/DBPopover-after-open-should-match-screenshot.png differ
diff --git a/__snapshots__/popover/component/firefox/DBPopover-after-open-should-match-screenshot.png b/__snapshots__/popover/component/firefox/DBPopover-after-open-should-match-screenshot.png
index 863219e983e..968cc1891cf 100644
Binary files a/__snapshots__/popover/component/firefox/DBPopover-after-open-should-match-screenshot.png and b/__snapshots__/popover/component/firefox/DBPopover-after-open-should-match-screenshot.png differ
diff --git a/__snapshots__/popover/component/mobile-chrome/DBPopover-after-open-should-match-screenshot.png b/__snapshots__/popover/component/mobile-chrome/DBPopover-after-open-should-match-screenshot.png
index 742a5bcb9b1..adae6813ab3 100644
Binary files a/__snapshots__/popover/component/mobile-chrome/DBPopover-after-open-should-match-screenshot.png and b/__snapshots__/popover/component/mobile-chrome/DBPopover-after-open-should-match-screenshot.png differ
diff --git a/__snapshots__/select/component/chromium/DBSelect-should-match-screenshot.png b/__snapshots__/select/component/chromium/DBSelect-should-match-screenshot.png
index 3775d02b9ec..2e44de3670c 100644
Binary files a/__snapshots__/select/component/chromium/DBSelect-should-match-screenshot.png and b/__snapshots__/select/component/chromium/DBSelect-should-match-screenshot.png differ
diff --git a/__snapshots__/select/component/firefox/DBSelect-should-match-screenshot.png b/__snapshots__/select/component/firefox/DBSelect-should-match-screenshot.png
index 67e65950e1b..c7ef56ad055 100644
Binary files a/__snapshots__/select/component/firefox/DBSelect-should-match-screenshot.png and b/__snapshots__/select/component/firefox/DBSelect-should-match-screenshot.png differ
diff --git a/__snapshots__/select/component/mobile-chrome/DBSelect-should-match-screenshot.png b/__snapshots__/select/component/mobile-chrome/DBSelect-should-match-screenshot.png
index 3775d02b9ec..2e44de3670c 100644
Binary files a/__snapshots__/select/component/mobile-chrome/DBSelect-should-match-screenshot.png and b/__snapshots__/select/component/mobile-chrome/DBSelect-should-match-screenshot.png differ
diff --git a/__snapshots__/textarea/component/chromium/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/component/chromium/DBTextarea-should-match-screenshot.png
index e42f480f993..be1d8fe83f9 100644
Binary files a/__snapshots__/textarea/component/chromium/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/component/chromium/DBTextarea-should-match-screenshot.png differ
diff --git a/__snapshots__/textarea/component/firefox/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/component/firefox/DBTextarea-should-match-screenshot.png
index cb22c254955..a1a9904ca51 100644
Binary files a/__snapshots__/textarea/component/firefox/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/component/firefox/DBTextarea-should-match-screenshot.png differ
diff --git a/__snapshots__/textarea/component/mobile-chrome/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/component/mobile-chrome/DBTextarea-should-match-screenshot.png
index ba6ac9365bd..4ef160e8d53 100644
Binary files a/__snapshots__/textarea/component/mobile-chrome/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/component/mobile-chrome/DBTextarea-should-match-screenshot.png differ
diff --git a/__snapshots__/textarea/showcase/chromium/regular/neutral/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/chromium/regular/neutral/DBTextarea-should-match-screenshot.png
index 864e517ea8d..c251568dbaf 100644
Binary files a/__snapshots__/textarea/showcase/chromium/regular/neutral/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/showcase/chromium/regular/neutral/DBTextarea-should-match-screenshot.png differ
diff --git a/__snapshots__/textarea/showcase/firefox/regular/neutral/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/firefox/regular/neutral/DBTextarea-should-match-screenshot.png
index b013fe159c0..2d0212425c1 100644
Binary files a/__snapshots__/textarea/showcase/firefox/regular/neutral/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/showcase/firefox/regular/neutral/DBTextarea-should-match-screenshot.png differ
diff --git a/__snapshots__/textarea/showcase/mobile-chrome/regular/neutral/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/mobile-chrome/regular/neutral/DBTextarea-should-match-screenshot.png
index 2af2f0681ba..5c3477cc821 100644
Binary files a/__snapshots__/textarea/showcase/mobile-chrome/regular/neutral/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/showcase/mobile-chrome/regular/neutral/DBTextarea-should-match-screenshot.png differ
diff --git a/__snapshots__/textarea/showcase/mobile-safari/regular/neutral/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/mobile-safari/regular/neutral/DBTextarea-should-match-screenshot.png
index b519ab19f59..896e51f8b28 100644
Binary files a/__snapshots__/textarea/showcase/mobile-safari/regular/neutral/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/showcase/mobile-safari/regular/neutral/DBTextarea-should-match-screenshot.png differ
diff --git a/__snapshots__/textarea/showcase/webkit/regular/neutral/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/webkit/regular/neutral/DBTextarea-should-match-screenshot.png
index 2e8cb4cafa6..391f42b98e7 100644
Binary files a/__snapshots__/textarea/showcase/webkit/regular/neutral/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/showcase/webkit/regular/neutral/DBTextarea-should-match-screenshot.png differ
diff --git a/packages/components/src/components/button/button.spec.tsx b/packages/components/src/components/button/button.spec.tsx
index 98fe1694c62..4dac9348f2e 100644
--- a/packages/components/src/components/button/button.spec.tsx
+++ b/packages/components/src/components/button/button.spec.tsx
@@ -6,7 +6,7 @@ import { DBButton } from './index';
 import { DEFAULT_VIEWPORT } from '../../shared/constants.ts';
 
 const testButton = () => {
-	for (const variant of ['outlined', 'primary', 'solid', 'text']) {
+	for (const variant of ['outlined', 'brand', 'filled', 'ghost']) {
 		test(`should contain text for variant ${variant}`, async ({
 			mount
 		}) => {
diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
index 4042d0223a0..bc49ab6fc85 100644
--- a/packages/components/src/components/checkbox/checkbox.lite.tsx
+++ b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -168,7 +168,9 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 				id={state._invalidMessageId}
 				size="small"
 				semantic="critical">
-				{props.invalidMessage || DEFAULT_INVALID_MESSAGE}
+				{props.invalidMessage ||
+					ref?.validationMessage ||
+					DEFAULT_INVALID_MESSAGE}
 			</DBInfotext>
 		</div>
 	);
diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
index cbe60fdcf36..37bf7e81543 100644
--- a/packages/components/src/components/input/input.lite.tsx
+++ b/packages/components/src/components/input/input.lite.tsx
@@ -180,7 +180,9 @@ export default function DBInput(props: DBInputProps) {
 				id={state._invalidMessageId}
 				size="small"
 				semantic="critical">
-				{props.invalidMessage || DEFAULT_INVALID_MESSAGE}
+				{props.invalidMessage ||
+					ref?.validationMessage ||
+					DEFAULT_INVALID_MESSAGE}
 			</DBInfotext>
 		</div>
 	);
diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx
index fbf909d9c1d..8172f911c82 100644
--- a/packages/components/src/components/select/select.lite.tsx
+++ b/packages/components/src/components/select/select.lite.tsx
@@ -195,7 +195,9 @@ export default function DBSelect(props: DBSelectProps) {
 				id={state._invalidMessageId}
 				size="small"
 				semantic="critical">
-				{props.invalidMessage || DEFAULT_INVALID_MESSAGE}
+				{props.invalidMessage ||
+					ref?.validationMessage ||
+					DEFAULT_INVALID_MESSAGE}
 			</DBInfotext>
 		</div>
 	);
diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
index 336171c89bc..1bc5e6464ca 100644
--- a/packages/components/src/components/textarea/textarea.lite.tsx
+++ b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -156,7 +156,9 @@ export default function DBTextarea(props: DBTextareaProps) {
 				id={state._invalidMessageId}
 				size="small"
 				semantic="critical">
-				{props.invalidMessage || DEFAULT_INVALID_MESSAGE}
+				{props.invalidMessage ||
+					ref?.validationMessage ||
+					DEFAULT_INVALID_MESSAGE}
 			</DBInfotext>
 		</div>
 	);
diff --git a/packages/components/src/styles/_form-components.scss b/packages/components/src/styles/_form-components.scss
index 2a5a56aa607..aa610695c61 100644
--- a/packages/components/src/styles/_form-components.scss
+++ b/packages/components/src/styles/_form-components.scss
@@ -60,6 +60,7 @@ $input-types: "button", "checkbox", "color", "date", "datetime-local", "email",
 	&[data-variant="floating"] {
 		label {
 			@extend %db-overwrite-font-size-md;
+			opacity: component.$default-disabled;
 			position: absolute;
 			z-index: 2;
 			inset-block-start: calc(
@@ -110,6 +111,7 @@ $input-types: "button", "checkbox", "color", "date", "datetime-local", "email",
 			label {
 				@extend %db-overwrite-font-size-2xs;
 				inset-block-start: variables.$db-spacing-fixed-2xs;
+				opacity: 1;
 			}
 
 			#{$selector} {
@@ -310,7 +312,6 @@ $input-valid-types: "color", "date", "datetime-local", "email", "file", "hidden"
 		padding-block-end: variables.$db-spacing-fixed-xs;
 		pointer-events: none;
 		cursor: text;
-		opacity: component.$default-disabled;
 
 		transition: font-size variables.$db-transition-straight-emotional;
 		max-inline-size: 25ch;
diff --git a/packages/foundations/src/colors.html b/packages/foundations/src/colors.html
index 4ad27a5bb5d..1e77fdbba87 100644
--- a/packages/foundations/src/colors.html
+++ b/packages/foundations/src/colors.html
@@ -38,68 +38,59 @@
 
 	<body style="padding: var(--db-spacing-fixed-md)">
 		<div>
-			<div class="db-bg-base">base</div>
-			<div class="db-bg-base-strong">base-strong</div>
-			<div class="db-bg-base" data-emphasis="weak">base-weak</div>
-			<div class="db-bg-base-transparent-semi">base-transparent-semi</div>
-			<div class="db-bg-base-transparent-full">base-transparent-full</div>
-			<div class="db-bg-neutral">neutral</div>
-			<div class="db-bg-neutral-strong">neutral-strong</div>
-			<div class="db-bg-neutral" data-emphasis="weak">neutral-weak</div>
-			<div class="db-bg-neutral-transparent-semi">
-				neutral-transparent-semi
+			<div class="db-neutral-bg-lvl-1">neutral-bg-lvl-1</div>
+			<div class="db-neutral-bg-lvl-2">neutral-bg-lvl-2</div>
+			<div class="db-neutral-bg-lvl-3">neutral-bg-lvl-3</div>
+			<div class="db-neutral-bg-transparent-semi">
+				neutral-bg-transparent-semi
 			</div>
-			<div class="db-bg-neutral-transparent-full">
-				neutral-transparent-full
+			<div class="db-neutral-bg-transparent-full">
+				neutral-bg-transparent-full
 			</div>
-			<div class="db-bg-brand">brand</div>
-			<div class="db-bg-brand-strong">brand-strong</div>
-			<div class="db-bg-brand" data-emphasis="weak">brand-weak</div>
-			<div class="db-bg-brand-transparent-semi">
-				brand-transparent-semi
+			<div class="db-brand-bg-lvl-1">brand-bg-lvl-1</div>
+			<div class="db-brand-bg-lvl-2">brand-bg-lvl-2</div>
+			<div class="db-brand-bg-lvl-3">brand-bg-lvl-3</div>
+			<div class="db-brand-bg-transparent-semi">
+				brand-bg-transparent-semi
 			</div>
-			<div class="db-bg-brand-transparent-full">
-				brand-transparent-full
+			<div class="db-brand-bg-transparent-full">
+				brand-bg-transparent-full
 			</div>
-			<div class="db-bg-successful">successful</div>
-			<div class="db-bg-successful-strong">successful-strong</div>
-			<div class="db-bg-successful" data-emphasis="weak">
-				successful-weak
+			<div class="db-critical-bg-lvl-1">critical-bg-lvl-1</div>
+			<div class="db-critical-bg-lvl-2">critical-bg-lvl-2</div>
+			<div class="db-critical-bg-lvl-3">critical-bg-lvl-3</div>
+			<div class="db-critical-bg-transparent-semi">
+				critical-bg-transparent-semi
 			</div>
-			<div class="db-bg-successful-transparent-semi">
-				successful-transparent-semi
+			<div class="db-critical-bg-transparent-full">
+				critical-bg-transparent-full
 			</div>
-			<div class="db-bg-successful-transparent-full">
-				successful-transparent-full
+			<div class="db-warning-bg-lvl-1">warning-bg-lvl-1</div>
+			<div class="db-warning-bg-lvl-2">warning-bg-lvl-2</div>
+			<div class="db-warning-bg-lvl-3">warning-bg-lvl-3</div>
+			<div class="db-warning-bg-transparent-semi">
+				warning-bg-transparent-semi
 			</div>
-			<div class="db-bg-critical">critical</div>
-			<div class="db-bg-critical-strong">critical-strong</div>
-			<div class="db-bg-critical" data-emphasis="weak">critical-weak</div>
-			<div class="db-bg-critical-transparent-semi">
-				critical-transparent-semi
+			<div class="db-warning-bg-transparent-full">
+				warning-bg-transparent-full
 			</div>
-			<div class="db-bg-critical-transparent-full">
-				critical-transparent-full
+			<div class="db-successful-bg-lvl-1">successful-bg-lvl-1</div>
+			<div class="db-successful-bg-lvl-2">successful-bg-lvl-2</div>
+			<div class="db-successful-bg-lvl-3">successful-bg-lvl-3</div>
+			<div class="db-successful-bg-transparent-semi">
+				successful-bg-transparent-semi
 			</div>
-			<div class="db-bg-warning">warning</div>
-			<div class="db-bg-warning-strong">warning-strong</div>
-			<div class="db-bg-warning" data-emphasis="weak">warning-weak</div>
-			<div class="db-bg-warning-transparent-semi">
-				warning-transparent-semi
+			<div class="db-successful-bg-transparent-full">
+				successful-bg-transparent-full
 			</div>
-			<div class="db-bg-warning-transparent-full">
-				warning-transparent-full
+			<div class="db-informational-bg-lvl-1">informational-bg-lvl-1</div>
+			<div class="db-informational-bg-lvl-2">informational-bg-lvl-2</div>
+			<div class="db-informational-bg-lvl-3">informational-bg-lvl-3</div>
+			<div class="db-informational-bg-transparent-semi">
+				informational-bg-transparent-semi
 			</div>
-			<div class="db-bg-informational">informational</div>
-			<div class="db-bg-informational-strong">informational-strong</div>
-			<div class="db-bg-informational" data-emphasis="weak">
-				informational-weak
-			</div>
-			<div class="db-bg-informational-transparent-semi">
-				informational-transparent-semi
-			</div>
-			<div class="db-bg-informational-transparent-full">
-				informational-transparent-full
+			<div class="db-informational-bg-transparent-full">
+				informational-bg-transparent-full
 			</div>
 		</div>
 	</body>
diff --git a/packages/foundations/src/fonts.html b/packages/foundations/src/fonts.html
index 8875c66166c..24165dc8771 100644
--- a/packages/foundations/src/fonts.html
+++ b/packages/foundations/src/fonts.html
@@ -8,7 +8,6 @@
 			href="/build/css/db-ui-foundations-absolute.css"
 		/>
 		<link rel="stylesheet" href="/build/css/default-theme.css" />
-		<link rel="stylesheet" href="/build/css/internals.css" />
 		<style>
 			body {
 				font-family: "DB Screen Sans";
@@ -25,8 +24,8 @@
 			}
 
 			small {
-				/* TODO: define "DB Screen Sans" as a fallback */
-				font-family: "DB Screen Sans Digital";
+				font-family: "DB Screen Sans";
+				font-weight: 300;
 			}
 
 			p strong {
diff --git a/showcases/angular-showcase/src/app/components/notification/notification.component.html b/showcases/angular-showcase/src/app/components/notification/notification.component.html
index 2f305db2c3a..85ad9776fa5 100644
--- a/showcases/angular-showcase/src/app/components/notification/notification.component.html
+++ b/showcases/angular-showcase/src/app/components/notification/notification.component.html
@@ -26,7 +26,7 @@
 			@if (exampleProps.img) {
 				<img
 					image
-					src="./assets/images/placeholder.png"
+					src="./assets/images/placeholder.jpg"
 					alt="Placeholder"
 				/>
 			}
diff --git a/showcases/angular-showcase/src/assets/images/placeholder.jpg b/showcases/angular-showcase/src/assets/images/placeholder.jpg
new file mode 100644
index 00000000000..7db984f5d42
Binary files /dev/null and b/showcases/angular-showcase/src/assets/images/placeholder.jpg differ
diff --git a/showcases/angular-showcase/src/assets/images/placeholder.png b/showcases/angular-showcase/src/assets/images/placeholder.png
deleted file mode 100644
index 8c3abb019d8..00000000000
Binary files a/showcases/angular-showcase/src/assets/images/placeholder.png and /dev/null differ
diff --git a/showcases/patternhub/public/assets/images/placeholder.jpg b/showcases/patternhub/public/assets/images/placeholder.jpg
new file mode 100644
index 00000000000..7db984f5d42
Binary files /dev/null and b/showcases/patternhub/public/assets/images/placeholder.jpg differ
diff --git a/showcases/patternhub/public/assets/images/placeholder.png b/showcases/patternhub/public/assets/images/placeholder.png
deleted file mode 100644
index 8c3abb019d8..00000000000
Binary files a/showcases/patternhub/public/assets/images/placeholder.png and /dev/null differ
diff --git a/showcases/react-showcase/public/assets/images/placeholder.jpg b/showcases/react-showcase/public/assets/images/placeholder.jpg
new file mode 100644
index 00000000000..7db984f5d42
Binary files /dev/null and b/showcases/react-showcase/public/assets/images/placeholder.jpg differ
diff --git a/showcases/react-showcase/public/assets/images/placeholder.png b/showcases/react-showcase/public/assets/images/placeholder.png
deleted file mode 100644
index 8c3abb019d8..00000000000
Binary files a/showcases/react-showcase/public/assets/images/placeholder.png and /dev/null differ
diff --git a/showcases/react-showcase/src/components/notification/index.tsx b/showcases/react-showcase/src/components/notification/index.tsx
index c8b2cf18665..844372b443a 100644
--- a/showcases/react-showcase/src/components/notification/index.tsx
+++ b/showcases/react-showcase/src/components/notification/index.tsx
@@ -26,7 +26,7 @@ const getNotification = ({
 				<img
 					src={`${
 						import.meta.env.BASE_URL
-					}/assets/images/placeholder.png`}
+					}/assets/images/placeholder.jpg`}
 					alt="Placeholder"
 				/>
 			) : undefined
diff --git a/showcases/shared/navigation-item.json b/showcases/shared/navigation-item.json
index c117f4cfdd5..91929ec9909 100644
--- a/showcases/shared/navigation-item.json
+++ b/showcases/shared/navigation-item.json
@@ -58,7 +58,8 @@
 			{
 				"name": "Text - Icons (Leading, Chevron)",
 				"props": {
-					"icon": "account"
+					"icon": "account",
+					"areaPopup": true
 				}
 			},
 			{
diff --git a/showcases/vue-showcase/public/assets/images/placeholder.jpg b/showcases/vue-showcase/public/assets/images/placeholder.jpg
new file mode 100644
index 00000000000..7db984f5d42
Binary files /dev/null and b/showcases/vue-showcase/public/assets/images/placeholder.jpg differ
diff --git a/showcases/vue-showcase/public/assets/images/placeholder.png b/showcases/vue-showcase/public/assets/images/placeholder.png
deleted file mode 100644
index 8c3abb019d8..00000000000
Binary files a/showcases/vue-showcase/public/assets/images/placeholder.png and /dev/null differ
diff --git a/showcases/vue-showcase/src/components/notification/Notification.vue b/showcases/vue-showcase/src/components/notification/Notification.vue
index 51d950c7298..8dbd795cfaa 100644
--- a/showcases/vue-showcase/src/components/notification/Notification.vue
+++ b/showcases/vue-showcase/src/components/notification/Notification.vue
@@ -32,7 +32,7 @@ const log = (exampleName: string) => {
 				</template>
 				<template v-if="exampleProps.img" v-slot:image>
 					<img
-						src="/assets/images/placeholder.png"
+						src="/assets/images/placeholder.jpg"
 						alt="Placeholder"
 					/>
 				</template>