From 7dee17855dfd6196affd4fb824d85b1f2f1a7ad6 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Thu, 21 Nov 2024 13:54:05 +0000
Subject: [PATCH] chore: revise Storybook category names and order

---
 .storybook/application.css                    |   3 +-
 .storybook/preview.tsx                        |   6 +-
 src/core/Accordion/Accordion.stories.tsx      |   2 +-
 src/core/Code/Code.stories.tsx                |   2 +-
 .../Code/__snapshots__/Code.stories.tsx.snap  |  10 +-
 .../ContactFooter/ContactFooter.stories.tsx   |   2 +-
 .../ContactFooter.stories.tsx.snap            |   2 +-
 .../CookieMessage/CookieMessage.stories.tsx   |   2 +-
 .../CookieMessage.stories.tsx.snap            |   2 +-
 .../CustomerLogos/CustomerLogos.stories.tsx   |   2 +-
 .../CustomerLogos.stories.tsx.snap            |   2 +-
 .../DropdownMenu/DropdownMenu.stories.tsx     |   2 +-
 .../DropdownMenu.stories.tsx.snap             |   2 +-
 src/core/Expander/Expander.stories.tsx        |   2 +-
 .../__snapshots__/Expander.stories.tsx.snap   |  10 +-
 .../FeaturedLink/FeaturedLink.stories.tsx     |   2 +-
 .../FeaturedLink.stories.tsx.snap             |  12 +-
 src/core/Flash/Flash.stories.tsx              |   2 +-
 .../__snapshots__/Flash.stories.tsx.snap      |   2 +-
 src/core/Footer/Footer.stories.tsx            |   2 +-
 .../__snapshots__/Footer.stories.tsx.snap     |   2 +-
 src/core/Icon/Icon.stories.tsx                |   2 +-
 .../Icon/__snapshots__/Icon.stories.tsx.snap  |  16 +-
 src/core/Loader/Loader.stories.tsx            |   2 +-
 .../__snapshots__/Loader.stories.tsx.snap     |   6 +-
 src/core/Logo/Logo.stories.tsx                |   2 +-
 .../Logo/__snapshots__/Logo.stories.tsx.snap  |   2 +-
 src/core/Meganav/Meganav.stories.tsx          |   2 +-
 src/core/ProductTile/ProductTile.stories.tsx  |   2 +-
 .../ProductTile.stories.tsx.snap              |   6 +-
 src/core/Slider/Slider.stories.tsx            |   2 +-
 .../__snapshots__/Slider.stories.tsx.snap     |   6 +-
 src/core/Status/Status.stories.tsx            |   2 +-
 src/core/Table/Table.stories.tsx              |   2 +-
 .../__snapshots__/Table.stories.tsx.snap      |   2 +-
 src/core/Tooltip/Tooltip.stories.tsx          |   2 +-
 .../__snapshots__/Tooltip.stories.tsx.snap    |   6 +-
 src/core/styles/Forms.stories.tsx             |   2 +-
 src/core/styles/Layout.stories.tsx            |   2 +-
 src/core/styles/LegacyButton.stories.tsx      |   2 +-
 src/core/styles/Shadows.stories.tsx           |   2 +-
 src/core/styles/Typography.stories.tsx        |   2 +-
 .../__snapshots__/Forms.stories.tsx.snap      |  10 +-
 .../__snapshots__/Layout.stories.tsx.snap     |  12 +-
 .../LegacyButton.stories.tsx.snap             | 250 ++++++++++++++++++
 .../__snapshots__/Shadows.stories.tsx.snap    |   6 +-
 .../__snapshots__/Typography.stories.tsx.snap |  90 +++----
 src/core/styles/colors/Colors.stories.tsx     |   2 +-
 .../__snapshots__/Colors.stories.tsx.snap     | 174 ++++++------
 49 files changed, 470 insertions(+), 219 deletions(-)
 create mode 100644 src/core/styles/__snapshots__/LegacyButton.stories.tsx.snap

diff --git a/.storybook/application.css b/.storybook/application.css
index 7bb271778..5c255b7df 100644
--- a/.storybook/application.css
+++ b/.storybook/application.css
@@ -46,13 +46,14 @@
 .ui-theme-dark .sbdocs-content > *,
 .ui-theme-dark .sb-anchor > h3,
 .ui-theme-dark .sb-anchor > p,
+.ui-theme-dark .sb-anchor > div > p,
 .ui-theme-dark .sb-anchor > p > code {
   @apply text-neutral-000;
 }
 
 .ui-theme-dark .sbdocs td,
 .ui-theme-dark .sbdocs th {
-  @apply text-neutral-200;
+  @apply !text-neutral-200;
 }
 
 .ui-theme-dark .sbdocs td {
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 96a24aa1c..c0dd1612f 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -37,7 +37,7 @@ const preview = {
     options: {
       storySort: {
         method: "alphabetical",
-        order: ["CSS", "Features", "JS Components", "Brand"],
+        order: ["Features", "Components", "Styles"],
       },
     },
     darkMode: {
@@ -52,8 +52,8 @@ const preview = {
         brandImage: brandImage,
       },
       stylePreview: true,
-      darkClass: ["ui-theme-dark"],
-      lightClass: ["ui-theme-light"],
+      darkClass: "ui-theme-dark",
+      lightClass: "ui-theme-light",
     },
   },
   loaders: [mswLoader],
diff --git a/src/core/Accordion/Accordion.stories.tsx b/src/core/Accordion/Accordion.stories.tsx
index 2060c8ecb..b95ef54e4 100644
--- a/src/core/Accordion/Accordion.stories.tsx
+++ b/src/core/Accordion/Accordion.stories.tsx
@@ -74,7 +74,7 @@ const AccordionPresentation = ({ data, options }: AccordionProps) => (
 );
 
 export default {
-  title: "JS Components/Accordion",
+  title: "Components/Accordion",
   component: Accordion,
 };
 
diff --git a/src/core/Code/Code.stories.tsx b/src/core/Code/Code.stories.tsx
index f7c210abf..bbf4d5c3f 100644
--- a/src/core/Code/Code.stories.tsx
+++ b/src/core/Code/Code.stories.tsx
@@ -1,7 +1,7 @@
 import Code from "../Code";
 
 export default {
-  title: "JS Components/Code",
+  title: "Components/Code",
   component: Code,
   tags: ["autodocs"],
 };
diff --git a/src/core/Code/__snapshots__/Code.stories.tsx.snap b/src/core/Code/__snapshots__/Code.stories.tsx.snap
index 4cef5e33b..afb08987a 100644
--- a/src/core/Code/__snapshots__/Code.stories.tsx.snap
+++ b/src/core/Code/__snapshots__/Code.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Code CodeWithLines smoke-test 1`] = `
+exports[`Components/Code CodeWithLines smoke-test 1`] = `
 <div class="hljs overflow-auto flex p-32 "
      data-id="code"
 >
@@ -98,7 +98,7 @@ exports[`JS Components/Code CodeWithLines smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Code Java smoke-test 1`] = `
+exports[`Components/Code Java smoke-test 1`] = `
 <div class="hljs overflow-auto flex p-32 "
      data-id="code"
 >
@@ -179,7 +179,7 @@ channel.subscribe(
 </div>
 `;
 
-exports[`JS Components/Code Javascript smoke-test 1`] = `
+exports[`Components/Code Javascript smoke-test 1`] = `
 <div class="hljs overflow-auto flex p-32 "
      data-id="code"
 >
@@ -254,7 +254,7 @@ exports[`JS Components/Code Javascript smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Code Kotlin smoke-test 1`] = `
+exports[`Components/Code Kotlin smoke-test 1`] = `
 <div class="hljs overflow-auto flex p-32 "
      data-id="code"
 >
@@ -309,7 +309,7 @@ exports[`JS Components/Code Kotlin smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Code Swift smoke-test 1`] = `
+exports[`Components/Code Swift smoke-test 1`] = `
 <div class="hljs overflow-auto flex p-32 "
      data-id="code"
 >
diff --git a/src/core/ContactFooter/ContactFooter.stories.tsx b/src/core/ContactFooter/ContactFooter.stories.tsx
index 60042c472..eb7a2f6ff 100644
--- a/src/core/ContactFooter/ContactFooter.stories.tsx
+++ b/src/core/ContactFooter/ContactFooter.stories.tsx
@@ -1,7 +1,7 @@
 import ContactFooter from "../ContactFooter";
 
 export default {
-  title: "JS Components/Contact Footer",
+  title: "Components/Contact Footer",
   component: ContactFooter,
   parameters: {
     layout: "fullscreen",
diff --git a/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap b/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap
index 82458df10..9fa2fdb17 100644
--- a/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap
+++ b/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Contact Footer Default smoke-test 1`] = `
+exports[`Components/Contact Footer Default smoke-test 1`] = `
 <div class="ui-contact-footer font-sans antialiased"
      data-id="contact-footer"
 >
diff --git a/src/core/CookieMessage/CookieMessage.stories.tsx b/src/core/CookieMessage/CookieMessage.stories.tsx
index e89172098..fd64859a2 100644
--- a/src/core/CookieMessage/CookieMessage.stories.tsx
+++ b/src/core/CookieMessage/CookieMessage.stories.tsx
@@ -1,7 +1,7 @@
 import CookieMessage from "../CookieMessage";
 
 export default {
-  title: "JS Components/Cookie Message",
+  title: "Components/Cookie Message",
   component: CookieMessage,
   args: {
     cookieId: "cookie-namespace",
diff --git a/src/core/CookieMessage/__snapshots__/CookieMessage.stories.tsx.snap b/src/core/CookieMessage/__snapshots__/CookieMessage.stories.tsx.snap
index a89b0ff98..d43d5e63d 100644
--- a/src/core/CookieMessage/__snapshots__/CookieMessage.stories.tsx.snap
+++ b/src/core/CookieMessage/__snapshots__/CookieMessage.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Cookie Message Default smoke-test 1`] = `
+exports[`Components/Cookie Message Default smoke-test 1`] = `
 <div class="ui-cookie-message">
   <p class="ui-text-p2 pr-32">
     <a href="/privacy"
diff --git a/src/core/CustomerLogos/CustomerLogos.stories.tsx b/src/core/CustomerLogos/CustomerLogos.stories.tsx
index a5b44183d..bf6c13046 100644
--- a/src/core/CustomerLogos/CustomerLogos.stories.tsx
+++ b/src/core/CustomerLogos/CustomerLogos.stories.tsx
@@ -8,7 +8,7 @@ import split from "../images/cust-logo-split-mono-pos.svg";
 import australian from "../images/cust-logo-ausopen-mono-pos.svg";
 
 export default {
-  title: "JS Components/Customer Logos",
+  title: "Components/Customer Logos",
   component: CustomerLogos,
   args: {
     companies: [
diff --git a/src/core/CustomerLogos/__snapshots__/CustomerLogos.stories.tsx.snap b/src/core/CustomerLogos/__snapshots__/CustomerLogos.stories.tsx.snap
index f83116d4e..46d3c68e9 100644
--- a/src/core/CustomerLogos/__snapshots__/CustomerLogos.stories.tsx.snap
+++ b/src/core/CustomerLogos/__snapshots__/CustomerLogos.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Customer Logos Default smoke-test 1`] = `
+exports[`Components/Customer Logos Default smoke-test 1`] = `
 <section class="w-full bg-white">
   <ul class="py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center ">
     <li class="flex-auto text-center sm:w-1/3 w-1/2">
diff --git a/src/core/DropdownMenu/DropdownMenu.stories.tsx b/src/core/DropdownMenu/DropdownMenu.stories.tsx
index 6f6fe832f..1c9169723 100644
--- a/src/core/DropdownMenu/DropdownMenu.stories.tsx
+++ b/src/core/DropdownMenu/DropdownMenu.stories.tsx
@@ -3,7 +3,7 @@ import Icon from "../Icon";
 import DropdownMenu from "../DropdownMenu";
 
 export default {
-  title: "JS Components/Dropdown Menu",
+  title: "Components/Dropdown Menu",
   component: DropdownMenu,
 };
 
diff --git a/src/core/DropdownMenu/__snapshots__/DropdownMenu.stories.tsx.snap b/src/core/DropdownMenu/__snapshots__/DropdownMenu.stories.tsx.snap
index 9ed02649d..7dab304f2 100644
--- a/src/core/DropdownMenu/__snapshots__/DropdownMenu.stories.tsx.snap
+++ b/src/core/DropdownMenu/__snapshots__/DropdownMenu.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Dropdown Menu Default smoke-test 1`] = `
+exports[`Components/Dropdown Menu Default smoke-test 1`] = `
 <div id="dropdown-menu"
      class="relative"
 >
diff --git a/src/core/Expander/Expander.stories.tsx b/src/core/Expander/Expander.stories.tsx
index 155c50955..52ff0dae4 100644
--- a/src/core/Expander/Expander.stories.tsx
+++ b/src/core/Expander/Expander.stories.tsx
@@ -4,7 +4,7 @@ import Expander from "../Expander";
 import Icon from "../Icon";
 
 export default {
-  title: "JS Components/Expander",
+  title: "Components/Expander",
   component: Expander,
   tags: ["autodocs"],
   args: {
diff --git a/src/core/Expander/__snapshots__/Expander.stories.tsx.snap b/src/core/Expander/__snapshots__/Expander.stories.tsx.snap
index 673fc874d..da2d542e3 100644
--- a/src/core/Expander/__snapshots__/Expander.stories.tsx.snap
+++ b/src/core/Expander/__snapshots__/Expander.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Expander LongContent smoke-test 1`] = `
+exports[`Components/Expander LongContent smoke-test 1`] = `
 <div data-testid="expander-container"
      class="overflow-hidden transition-all relative "
      style="height: 200px;"
@@ -105,7 +105,7 @@ exports[`JS Components/Expander LongContent smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Expander OverriddenContentStyles smoke-test 1`] = `
+exports[`Components/Expander OverriddenContentStyles smoke-test 1`] = `
 <div data-testid="expander-container"
      class="overflow-hidden transition-all relative bg-neutral-400 p-16 rounded-lg"
      style="height: 200px;"
@@ -210,7 +210,7 @@ exports[`JS Components/Expander OverriddenContentStyles smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Expander OverriddenControls play-test 1`] = `
+exports[`Components/Expander OverriddenControls play-test 1`] = `
 <div data-testid="expander-container"
      class="overflow-hidden transition-all relative "
      style="height: 664px;"
@@ -321,7 +321,7 @@ exports[`JS Components/Expander OverriddenControls play-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Expander ShortContent smoke-test 1`] = `
+exports[`Components/Expander ShortContent smoke-test 1`] = `
 <div data-testid="expander-container"
      class="overflow-hidden transition-all relative "
      style="height: auto;"
@@ -356,7 +356,7 @@ exports[`JS Components/Expander ShortContent smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Expander ZeroHeightContent smoke-test 1`] = `
+exports[`Components/Expander ZeroHeightContent smoke-test 1`] = `
 <div data-testid="expander-container"
      class="overflow-hidden transition-all relative "
      style="height: 0px;"
diff --git a/src/core/FeaturedLink/FeaturedLink.stories.tsx b/src/core/FeaturedLink/FeaturedLink.stories.tsx
index f0d6dcc03..b23fcebba 100644
--- a/src/core/FeaturedLink/FeaturedLink.stories.tsx
+++ b/src/core/FeaturedLink/FeaturedLink.stories.tsx
@@ -1,7 +1,7 @@
 import FeaturedLink from "../FeaturedLink";
 
 export default {
-  title: "JS Components/Featured Link",
+  title: "Components/Featured Link",
   component: FeaturedLink,
   parameters: {
     layout: "centered",
diff --git a/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap b/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap
index aae203bdb..a2588ef3c 100644
--- a/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap
+++ b/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Featured Link Default smoke-test 1`] = `
+exports[`Components/Featured Link Default smoke-test 1`] = `
 <a href="#"
    class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p2 py-8 "
    style="--featured-link-icon-size: var(--fs-p2);"
@@ -15,7 +15,7 @@ exports[`JS Components/Featured Link Default smoke-test 1`] = `
 </a>
 `;
 
-exports[`JS Components/Featured Link Disabled smoke-test 1`] = `
+exports[`Components/Featured Link Disabled smoke-test 1`] = `
 <a href="#"
    class="font-sans font-bold block text-gui-unavailable pointer-events-none group/featured-link ui-text-p2 py-8 "
    style="--featured-link-icon-size: var(--fs-p2);"
@@ -30,7 +30,7 @@ exports[`JS Components/Featured Link Disabled smoke-test 1`] = `
 </a>
 `;
 
-exports[`JS Components/Featured Link Large smoke-test 1`] = `
+exports[`Components/Featured Link Large smoke-test 1`] = `
 <a href="#"
    class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p1 py-8 "
    style="--featured-link-icon-size: var(--fs-p1);"
@@ -45,7 +45,7 @@ exports[`JS Components/Featured Link Large smoke-test 1`] = `
 </a>
 `;
 
-exports[`JS Components/Featured Link Pink smoke-test 1`] = `
+exports[`Components/Featured Link Pink smoke-test 1`] = `
 <a href="#"
    class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p2 py-8 text-pink-800"
    style="--featured-link-icon-size: var(--fs-p2);"
@@ -60,7 +60,7 @@ exports[`JS Components/Featured Link Pink smoke-test 1`] = `
 </a>
 `;
 
-exports[`JS Components/Featured Link Reverse smoke-test 1`] = `
+exports[`Components/Featured Link Reverse smoke-test 1`] = `
 <a href="#"
    class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p2 py-8 "
    style="--featured-link-icon-size: var(--fs-p2);"
@@ -75,7 +75,7 @@ exports[`JS Components/Featured Link Reverse smoke-test 1`] = `
 </a>
 `;
 
-exports[`JS Components/Featured Link Small smoke-test 1`] = `
+exports[`Components/Featured Link Small smoke-test 1`] = `
 <a href="#"
    class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p3 py-8 "
    style="--featured-link-icon-size: var(--fs-p3);"
diff --git a/src/core/Flash/Flash.stories.tsx b/src/core/Flash/Flash.stories.tsx
index 2f8100add..c48130db7 100644
--- a/src/core/Flash/Flash.stories.tsx
+++ b/src/core/Flash/Flash.stories.tsx
@@ -9,7 +9,7 @@ import { reducerBlogPosts } from "../remote-blogs-posts.js";
 import { reducerSessionData } from "../remote-session-data.js";
 
 export default {
-  title: "JS Components/Flash",
+  title: "Components/Flash",
   component: Flash,
   args: {
     flashes: [
diff --git a/src/core/Flash/__snapshots__/Flash.stories.tsx.snap b/src/core/Flash/__snapshots__/Flash.stories.tsx.snap
index ab67493c0..75d6b1b9d 100644
--- a/src/core/Flash/__snapshots__/Flash.stories.tsx.snap
+++ b/src/core/Flash/__snapshots__/Flash.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Flash Default smoke-test 1`] = `
+exports[`Components/Flash Default smoke-test 1`] = `
 <div class="ui-flash"
      data-id="ui-flashes"
 >
diff --git a/src/core/Footer/Footer.stories.tsx b/src/core/Footer/Footer.stories.tsx
index d416355a7..c2e112627 100644
--- a/src/core/Footer/Footer.stories.tsx
+++ b/src/core/Footer/Footer.stories.tsx
@@ -11,7 +11,7 @@ import highestUserAdoption from "../images/highest-user-adoption-2023.svg";
 const statusUrl = "https://ntqy1wz94gjv.statuspage.io/api/v2/status.json";
 
 export default {
-  title: "JS Components/Footer",
+  title: "Components/Footer",
   component: Footer,
   parameters: {
     layout: "fullscreen",
diff --git a/src/core/Footer/__snapshots__/Footer.stories.tsx.snap b/src/core/Footer/__snapshots__/Footer.stories.tsx.snap
index 91fcadf5f..82fb910c2 100644
--- a/src/core/Footer/__snapshots__/Footer.stories.tsx.snap
+++ b/src/core/Footer/__snapshots__/Footer.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Footer Default smoke-test 1`] = `
+exports[`Components/Footer Default smoke-test 1`] = `
 <footer class="bg-light-grey font-sans antialiased leading-normal"
         data-id="footer"
 >
diff --git a/src/core/Icon/Icon.stories.tsx b/src/core/Icon/Icon.stories.tsx
index a7daad380..c352646f4 100644
--- a/src/core/Icon/Icon.stories.tsx
+++ b/src/core/Icon/Icon.stories.tsx
@@ -5,7 +5,7 @@ import loadIcons from "../icons";
 import { IconName, iconNames } from "./types";
 
 export default {
-  title: "JS Components/Icon",
+  title: "Components/Icon",
   component: Icon,
   parameters: {
     layout: "fullscreen",
diff --git a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
index ca85aea62..a88e99b89 100644
--- a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
+++ b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
+exports[`Components/Icon DisplayIcons smoke-test 1`] = `
 <div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
     <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
@@ -1340,7 +1340,7 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Icon EncapsulatedIcons smoke-test 1`] = `
+exports[`Components/Icon EncapsulatedIcons smoke-test 1`] = `
 <div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
     <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
@@ -1621,7 +1621,7 @@ exports[`JS Components/Icon EncapsulatedIcons smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
+exports[`Components/Icon GUIIcons smoke-test 1`] = `
 <div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
     <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
@@ -2271,7 +2271,7 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Icon IconWithSecondaryColor smoke-test 1`] = `
+exports[`Components/Icon IconWithSecondaryColor smoke-test 1`] = `
 <div class="flex items-center justify-center p-16 gap-24">
   <div class="flex gap-24">
     <h4 class="ui-text-h4 text-neutral-1300 dark:text-neutral-000">
@@ -2316,7 +2316,7 @@ exports[`JS Components/Icon IconWithSecondaryColor smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Icon OtherIcons smoke-test 1`] = `
+exports[`Components/Icon OtherIcons smoke-test 1`] = `
 <div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
     <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
@@ -2336,7 +2336,7 @@ exports[`JS Components/Icon OtherIcons smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
+exports[`Components/Icon ProductIcons smoke-test 1`] = `
 <div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
     <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
@@ -2521,7 +2521,7 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
+exports[`Components/Icon SocialIcons smoke-test 1`] = `
 <div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
     <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
@@ -2676,7 +2676,7 @@ exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Icon TechIcons smoke-test 1`] = `
+exports[`Components/Icon TechIcons smoke-test 1`] = `
 <div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
     <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
diff --git a/src/core/Loader/Loader.stories.tsx b/src/core/Loader/Loader.stories.tsx
index fd7b1cde5..f34190d9f 100644
--- a/src/core/Loader/Loader.stories.tsx
+++ b/src/core/Loader/Loader.stories.tsx
@@ -1,7 +1,7 @@
 import Loader from "../Loader";
 
 export default {
-  title: "JS Components/Loader",
+  title: "Components/Loader",
   component: Loader,
   tags: ["autodocs"],
 };
diff --git a/src/core/Loader/__snapshots__/Loader.stories.tsx.snap b/src/core/Loader/__snapshots__/Loader.stories.tsx.snap
index a9d5b2de9..8088090ab 100644
--- a/src/core/Loader/__snapshots__/Loader.stories.tsx.snap
+++ b/src/core/Loader/__snapshots__/Loader.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Loader ChangedRingColor smoke-test 1`] = `
+exports[`Components/Loader ChangedRingColor smoke-test 1`] = `
 <svg class="text-light-grey "
      height="24"
      viewbox="0 0 24 24"
@@ -34,7 +34,7 @@ exports[`JS Components/Loader ChangedRingColor smoke-test 1`] = `
 </svg>
 `;
 
-exports[`JS Components/Loader Default smoke-test 1`] = `
+exports[`Components/Loader Default smoke-test 1`] = `
 <svg class="text-dark-grey "
      height="24"
      viewbox="0 0 24 24"
@@ -68,7 +68,7 @@ exports[`JS Components/Loader Default smoke-test 1`] = `
 </svg>
 `;
 
-exports[`JS Components/Loader HalfSize smoke-test 1`] = `
+exports[`Components/Loader HalfSize smoke-test 1`] = `
 <svg class="text-dark-grey "
      height="24"
      viewbox="0 0 24 24"
diff --git a/src/core/Logo/Logo.stories.tsx b/src/core/Logo/Logo.stories.tsx
index 04bf7c79d..b50998d7e 100644
--- a/src/core/Logo/Logo.stories.tsx
+++ b/src/core/Logo/Logo.stories.tsx
@@ -2,7 +2,7 @@ import Logo from "../Logo";
 import logoUrl from "../images/ably-logo.png";
 
 export default {
-  title: "JS Components/Logo",
+  title: "Components/Logo",
   component: Logo,
   args: {
     logoUrl,
diff --git a/src/core/Logo/__snapshots__/Logo.stories.tsx.snap b/src/core/Logo/__snapshots__/Logo.stories.tsx.snap
index 6d1fb55aa..b074eefbb 100644
--- a/src/core/Logo/__snapshots__/Logo.stories.tsx.snap
+++ b/src/core/Logo/__snapshots__/Logo.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Logo Default smoke-test 1`] = `
+exports[`Components/Logo Default smoke-test 1`] = `
 <a href="/"
    class="block"
    style="height: 2.125rem;"
diff --git a/src/core/Meganav/Meganav.stories.tsx b/src/core/Meganav/Meganav.stories.tsx
index f53aecac7..d535d4048 100644
--- a/src/core/Meganav/Meganav.stories.tsx
+++ b/src/core/Meganav/Meganav.stories.tsx
@@ -17,7 +17,7 @@ import {
 const statusUrl = "https://ntqy1wz94gjv.statuspage.io/api/v2/status.json";
 
 export default {
-  title: "JS Components/Meganav",
+  title: "Components/Meganav",
   component: Meganav,
   parameters: {
     layout: "fullscreen",
diff --git a/src/core/ProductTile/ProductTile.stories.tsx b/src/core/ProductTile/ProductTile.stories.tsx
index 60a70eea9..b1f71109e 100644
--- a/src/core/ProductTile/ProductTile.stories.tsx
+++ b/src/core/ProductTile/ProductTile.stories.tsx
@@ -3,7 +3,7 @@ import ProductTile from "../ProductTile";
 import { ProductName, products } from "../ProductTile/data";
 
 export default {
-  title: "JS Components/Product Tile",
+  title: "Components/Product Tile",
   component: ProductTile,
   tags: ["autodocs"],
 };
diff --git a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
index 6b38004dc..6f25664cc 100644
--- a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
+++ b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Product Tile ProductTileWithOverriddenStylesAndClick smoke-test 1`] = `
+exports[`Components/Product Tile ProductTileWithOverriddenStylesAndClick smoke-test 1`] = `
 <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 bg-pink-200 dark:bg-pink-800 hover:bg-pink-600 dark:hover:bg-pink-400 cursor-pointer">
   <div class="flex gap-12 items-center">
     <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
@@ -32,7 +32,7 @@ exports[`JS Components/Product Tile ProductTileWithOverriddenStylesAndClick smok
 </div>
 `;
 
-exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
+exports[`Components/Product Tile ProductTiles smoke-test 1`] = `
 <div class="grid sm:grid-cols-3 gap-32">
   <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100">
     <div class="flex gap-12 items-center">
@@ -202,7 +202,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
+exports[`Components/Product Tile SelectedProductTiles smoke-test 1`] = `
 <div class="grid grid-cols-3 gap-32">
   <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 dark:bg-neutral-100">
     <div class="flex gap-12 items-center">
diff --git a/src/core/Slider/Slider.stories.tsx b/src/core/Slider/Slider.stories.tsx
index 6e2d759c1..79f16b2f8 100644
--- a/src/core/Slider/Slider.stories.tsx
+++ b/src/core/Slider/Slider.stories.tsx
@@ -54,7 +54,7 @@ const slides = [
 ];
 
 export default {
-  title: "JS Components/Slider",
+  title: "Components/Slider",
   component: Slider,
   args: {
     children: slides,
diff --git a/src/core/Slider/__snapshots__/Slider.stories.tsx.snap b/src/core/Slider/__snapshots__/Slider.stories.tsx.snap
index f313ec89a..6b3beb42a 100644
--- a/src/core/Slider/__snapshots__/Slider.stories.tsx.snap
+++ b/src/core/Slider/__snapshots__/Slider.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Slider FloatingControlPosition smoke-test 1`] = `
+exports[`Components/Slider FloatingControlPosition smoke-test 1`] = `
 <div class="relative">
   <div class="overflow-y-visible overflow-x-clip w-full py-40">
     <div class="flex items-center  "
@@ -226,7 +226,7 @@ exports[`JS Components/Slider FloatingControlPosition smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Slider InlineControlPosition smoke-test 1`] = `
+exports[`Components/Slider InlineControlPosition smoke-test 1`] = `
 <div class="relative">
   <div class="overflow-y-visible overflow-x-clip w-full py-40">
     <div class="flex items-center  "
@@ -452,7 +452,7 @@ exports[`JS Components/Slider InlineControlPosition smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Slider WithoutIntervalIndicator smoke-test 1`] = `
+exports[`Components/Slider WithoutIntervalIndicator smoke-test 1`] = `
 <div class="relative">
   <div class="overflow-y-visible overflow-x-clip w-full py-40">
     <div class="flex items-center  "
diff --git a/src/core/Status/Status.stories.tsx b/src/core/Status/Status.stories.tsx
index 4f5eb213a..91c7b2423 100644
--- a/src/core/Status/Status.stories.tsx
+++ b/src/core/Status/Status.stories.tsx
@@ -5,7 +5,7 @@ import Status from "../Status";
 const statusUrl = "https://ntqy1wz94gjv.statuspage.io/api/v2/status.json";
 
 export default {
-  title: "JS Components/Status",
+  title: "Components/Status",
   component: Status,
   args: {
     statusUrl,
diff --git a/src/core/Table/Table.stories.tsx b/src/core/Table/Table.stories.tsx
index 821ced780..8e0a3fb93 100644
--- a/src/core/Table/Table.stories.tsx
+++ b/src/core/Table/Table.stories.tsx
@@ -1,7 +1,7 @@
 import { PricingPageTable } from "./data";
 
 export default {
-  title: "JS Components/Table",
+  title: "Components/Table",
   component: PricingPageTable,
   tags: ["autodocs"],
   parameters: {
diff --git a/src/core/Table/__snapshots__/Table.stories.tsx.snap b/src/core/Table/__snapshots__/Table.stories.tsx.snap
index 55b1b6366..15ac49b96 100644
--- a/src/core/Table/__snapshots__/Table.stories.tsx.snap
+++ b/src/core/Table/__snapshots__/Table.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Table PricingPage smoke-test 1`] = `
+exports[`Components/Table PricingPage smoke-test 1`] = `
 <div class="ui-standard-container">
   <h2 class="ui-text-h2 text-center m-32">
     Pricing Page Table
diff --git a/src/core/Tooltip/Tooltip.stories.tsx b/src/core/Tooltip/Tooltip.stories.tsx
index 86a64d8dd..7c175b198 100644
--- a/src/core/Tooltip/Tooltip.stories.tsx
+++ b/src/core/Tooltip/Tooltip.stories.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import Tooltip from "../Tooltip";
 
 export default {
-  title: "JS Components/Tooltip",
+  title: "Components/Tooltip",
   component: Tooltip,
   tags: ["autodocs"],
   args: {
diff --git a/src/core/Tooltip/__snapshots__/Tooltip.stories.tsx.snap b/src/core/Tooltip/__snapshots__/Tooltip.stories.tsx.snap
index 6c15e7f08..5107c2434 100644
--- a/src/core/Tooltip/__snapshots__/Tooltip.stories.tsx.snap
+++ b/src/core/Tooltip/__snapshots__/Tooltip.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Tooltip Central smoke-test 1`] = `
+exports[`Components/Tooltip Central smoke-test 1`] = `
 <div class="grid grid-cols-2 gap-16 w-[600px]">
   <div class="font-mono text-center">
     dark
@@ -43,7 +43,7 @@ exports[`JS Components/Tooltip Central smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Tooltip Interactive smoke-test 1`] = `
+exports[`Components/Tooltip Interactive smoke-test 1`] = `
 <div class="grid grid-cols-2 gap-16 w-[600px]">
   <div class="font-mono text-center">
     dark
@@ -86,7 +86,7 @@ exports[`JS Components/Tooltip Interactive smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Tooltip LeftBound smoke-test 1`] = `
+exports[`Components/Tooltip LeftBound smoke-test 1`] = `
 <div class="grid grid-cols-2 gap-16 w-[600px]">
   <div class="font-mono text-center">
     dark
diff --git a/src/core/styles/Forms.stories.tsx b/src/core/styles/Forms.stories.tsx
index 7c9628e39..990e38df7 100644
--- a/src/core/styles/Forms.stories.tsx
+++ b/src/core/styles/Forms.stories.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import Icon from "../Icon";
 
 export default {
-  title: "CSS/Forms",
+  title: "Styles/Forms",
 };
 
 const exampleOptionFields = (
diff --git a/src/core/styles/Layout.stories.tsx b/src/core/styles/Layout.stories.tsx
index 09c0423d2..ab8b6be93 100644
--- a/src/core/styles/Layout.stories.tsx
+++ b/src/core/styles/Layout.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 export default {
-  title: "CSS/Layout",
+  title: "Styles/Layout",
 };
 
 export const StandardContainer = {
diff --git a/src/core/styles/LegacyButton.stories.tsx b/src/core/styles/LegacyButton.stories.tsx
index 8c77415e5..1f3b18d74 100644
--- a/src/core/styles/LegacyButton.stories.tsx
+++ b/src/core/styles/LegacyButton.stories.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import Icon from "../Icon";
 
 export default {
-  title: "CSS/Button (legacy)",
+  title: "Styles/Button (legacy)",
 };
 
 export const Standard = {
diff --git a/src/core/styles/Shadows.stories.tsx b/src/core/styles/Shadows.stories.tsx
index 01ff28044..52391e7ef 100644
--- a/src/core/styles/Shadows.stories.tsx
+++ b/src/core/styles/Shadows.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 export default {
-  title: "CSS/Shadows",
+  title: "Styles/Shadows",
 };
 
 const shadowClasses = {
diff --git a/src/core/styles/Typography.stories.tsx b/src/core/styles/Typography.stories.tsx
index f32a1ed25..281da70c8 100644
--- a/src/core/styles/Typography.stories.tsx
+++ b/src/core/styles/Typography.stories.tsx
@@ -2,7 +2,7 @@ import clsx from "clsx";
 import React from "react";
 
 export default {
-  title: "CSS/Typography",
+  title: "Styles/Typography",
 };
 
 const styles = {
diff --git a/src/core/styles/__snapshots__/Forms.stories.tsx.snap b/src/core/styles/__snapshots__/Forms.stories.tsx.snap
index 6413ac64f..192031d39 100644
--- a/src/core/styles/__snapshots__/Forms.stories.tsx.snap
+++ b/src/core/styles/__snapshots__/Forms.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CSS/Forms Checkboxes smoke-test 1`] = `
+exports[`Styles/Forms Checkboxes smoke-test 1`] = `
 <div class="grid sm:grid-cols-2 gap-16">
   <div>
     <p class="mb-16 text-neutral-800">
@@ -64,7 +64,7 @@ exports[`CSS/Forms Checkboxes smoke-test 1`] = `
 </div>
 `;
 
-exports[`CSS/Forms Dropdowns smoke-test 1`] = `
+exports[`Styles/Forms Dropdowns smoke-test 1`] = `
 <div class="grid sm:grid-cols-2 gap-16">
   <div>
     <p class="mb-16 text-neutral-800">
@@ -183,7 +183,7 @@ exports[`CSS/Forms Dropdowns smoke-test 1`] = `
 </div>
 `;
 
-exports[`CSS/Forms Inputs smoke-test 1`] = `
+exports[`Styles/Forms Inputs smoke-test 1`] = `
 <div class="grid sm:grid-cols-2 gap-16">
   <div>
     <p class="mb-16 text-neutral-800">
@@ -273,7 +273,7 @@ exports[`CSS/Forms Inputs smoke-test 1`] = `
 </div>
 `;
 
-exports[`CSS/Forms Textareas smoke-test 1`] = `
+exports[`Styles/Forms Textareas smoke-test 1`] = `
 <div class="mb-40">
   <label class="ui-text-p1 block"
          for="example-text-area"
@@ -291,7 +291,7 @@ exports[`CSS/Forms Textareas smoke-test 1`] = `
 </div>
 `;
 
-exports[`CSS/Forms Toggles smoke-test 1`] = `
+exports[`Styles/Forms Toggles smoke-test 1`] = `
 <div class="grid sm:grid-cols-2 gap-16">
   <div class="flex gap-16 items-center">
     <label class="ui-toggle">
diff --git a/src/core/styles/__snapshots__/Layout.stories.tsx.snap b/src/core/styles/__snapshots__/Layout.stories.tsx.snap
index 95b5e2e11..2515af767 100644
--- a/src/core/styles/__snapshots__/Layout.stories.tsx.snap
+++ b/src/core/styles/__snapshots__/Layout.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CSS/Layout FullBorderlessContainerOverride smoke-test 1`] = `
+exports[`Styles/Layout FullBorderlessContainerOverride smoke-test 1`] = `
 <div class="overflow-x-hidden">
   <div class="ui-standard-container mb-32">
     <div class="bg-[linear-gradient(to_right,cyan_49.9%,blue_50%,cyan_50.1%)] align-center p-32 ui-full-borderless-container-override text-white">
@@ -71,7 +71,7 @@ exports[`CSS/Layout FullBorderlessContainerOverride smoke-test 1`] = `
 </div>
 `;
 
-exports[`CSS/Layout FullContainerOverride smoke-test 1`] = `
+exports[`Styles/Layout FullContainerOverride smoke-test 1`] = `
 <div class="overflow-x-hidden">
   <div class="ui-standard-container mb-32">
     <div class="bg-[linear-gradient(to_right,cyan_49.9%,blue_50%,cyan_50.1%)] align-center p-32 ui-full-container-override text-white">
@@ -142,7 +142,7 @@ exports[`CSS/Layout FullContainerOverride smoke-test 1`] = `
 </div>
 `;
 
-exports[`CSS/Layout GridGap smoke-test 1`] = `
+exports[`Styles/Layout GridGap smoke-test 1`] = `
 <div class="ui-standard-container mb-32">
   <div class="bg-mid-grey align-center p-32">
     <div class="grid grid-cols-4 ui-grid-gap">
@@ -163,7 +163,7 @@ exports[`CSS/Layout GridGap smoke-test 1`] = `
 </div>
 `;
 
-exports[`CSS/Layout GridMX smoke-test 1`] = `
+exports[`Styles/Layout GridMX smoke-test 1`] = `
 <div class="ui-standard-container mb-32">
   <div class="bg-mid-grey align-center p-32">
     <div class="ui-grid-mx">
@@ -175,7 +175,7 @@ exports[`CSS/Layout GridMX smoke-test 1`] = `
 </div>
 `;
 
-exports[`CSS/Layout GridPX smoke-test 1`] = `
+exports[`Styles/Layout GridPX smoke-test 1`] = `
 <div class="ui-standard-container mb-32">
   <div class="bg-mid-grey align-center p-32">
     <div class="ui-grid-px">
@@ -187,7 +187,7 @@ exports[`CSS/Layout GridPX smoke-test 1`] = `
 </div>
 `;
 
-exports[`CSS/Layout StandardContainer smoke-test 1`] = `
+exports[`Styles/Layout StandardContainer smoke-test 1`] = `
 <div class="ui-standard-container mb-32">
   <div class="bg-mid-grey align-center p-32">
     <p class="ui-text-h3 text-center">
diff --git a/src/core/styles/__snapshots__/LegacyButton.stories.tsx.snap b/src/core/styles/__snapshots__/LegacyButton.stories.tsx.snap
new file mode 100644
index 000000000..b32190370
--- /dev/null
+++ b/src/core/styles/__snapshots__/LegacyButton.stories.tsx.snap
@@ -0,0 +1,250 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Styles/Button (legacy) ExtraSmall smoke-test 1`] = `
+<div class="flex flex-col gap-16 max-w-[300px]">
+  <button type="button"
+          class="ui-btn p-btn-xsmall text-btn4"
+  >
+    Primary button
+  </button>
+  <button type="button"
+          class="ui-btn p-btn-xsmall text-btn4"
+  >
+    <svg class="ui-btn-icon-xsmall"
+         style="width: 1rem; height: 1rem;"
+    >
+      <use xlink:href="#sprite-icon-gui-search">
+      </use>
+    </svg>
+    Primary button with icon
+  </button>
+  <button type="button"
+          class="ui-btn-alt p-btn-xsmall text-btn4"
+  >
+    Primary button alternative
+  </button>
+  <button type="button"
+          class="ui-btn-secondary p-btn-xsmall text-btn4"
+  >
+    Secondary button
+  </button>
+</div>
+`;
+
+exports[`Styles/Button (legacy) Inverted smoke-test 1`] = `
+<div class="flex flex-col gap-16 max-w-[300px]">
+  <button type="button"
+          class="ui-btn-invert"
+  >
+    Primary button
+  </button>
+  <button type="button"
+          class="ui-btn-secondary-invert"
+  >
+    Secondary button
+  </button>
+  <button type="button"
+          class="ui-btn-invert"
+          disabled
+  >
+    Unavailable primary button
+  </button>
+  <button type="button"
+          class="ui-btn-secondary-invert"
+          disabled
+  >
+    Unavailable secondary button
+  </button>
+</div>
+`;
+
+exports[`Styles/Button (legacy) Large smoke-test 1`] = `
+<div class="flex flex-col gap-16 max-w-[300px]">
+  <button type="button"
+          class="ui-btn p-btn-large text-btn1"
+  >
+    Primary button
+  </button>
+  <button type="button"
+          class="ui-btn p-btn-large text-btn1"
+  >
+    <svg class="ui-btn-icon"
+         style="width: 1rem; height: 1rem;"
+    >
+      <use xlink:href="#sprite-icon-gui-search">
+      </use>
+    </svg>
+    Primary button with icon
+  </button>
+  <button type="button"
+          class="ui-btn-alt p-btn-large text-btn1"
+  >
+    Primary button alternative
+  </button>
+  <button type="button"
+          class="ui-btn-secondary p-btn-large text-btn1"
+  >
+    Secondary button
+  </button>
+</div>
+`;
+
+exports[`Styles/Button (legacy) LinkStyledAsButton smoke-test 1`] = `
+<div class="flex flex-col gap-16 max-w-[300px]">
+  <a href="#"
+     role="button"
+     class="ui-btn"
+  >
+    Link
+  </a>
+  <a href="#"
+     role="button"
+     class="ui-btn ui-btn-disabled"
+  >
+    Disabled link
+  </a>
+</div>
+`;
+
+exports[`Styles/Button (legacy) Small smoke-test 1`] = `
+<div class="flex flex-col gap-16 max-w-[300px]">
+  <button type="button"
+          class="ui-btn p-btn-small text-btn3"
+  >
+    Primary button
+  </button>
+  <button type="button"
+          class="ui-btn p-btn-small text-btn3"
+  >
+    <svg class="ui-btn-icon-small"
+         style="width: 1rem; height: 1rem;"
+    >
+      <use xlink:href="#sprite-icon-gui-search">
+      </use>
+    </svg>
+    Primary button with icon
+  </button>
+  <button type="button"
+          class="ui-btn-alt p-btn-small text-btn3"
+  >
+    Primary button alternative
+  </button>
+  <button type="button"
+          class="ui-btn-secondary p-btn-small text-btn3"
+  >
+    Secondary button
+  </button>
+</div>
+`;
+
+exports[`Styles/Button (legacy) Standard smoke-test 1`] = `
+<div class="flex flex-col gap-16 max-w-[300px]">
+  <button type="button"
+          class="ui-btn"
+  >
+    Primary button
+  </button>
+  <button type="button"
+          class="ui-btn-alt"
+  >
+    Primary button alternative
+  </button>
+  <button type="button"
+          class="ui-btn-secondary"
+  >
+    Secondary button
+  </button>
+  <button type="button"
+          class="ui-btn"
+          disabled
+  >
+    Unavailable primary button
+  </button>
+  <button type="button"
+          class="ui-btn-alt"
+          disabled
+  >
+    Unavailable primary button alternative
+  </button>
+  <button type="button"
+          class="ui-btn-secondary"
+          disabled
+  >
+    Unavailable secondary button
+  </button>
+</div>
+`;
+
+exports[`Styles/Button (legacy) WithIcons smoke-test 1`] = `
+<div class="flex flex-col gap-16 max-w-[300px]">
+  <button type="button"
+          class="ui-btn"
+  >
+    <svg class="ui-btn-icon"
+         style="width: 1rem; height: 1rem;"
+    >
+      <use xlink:href="#sprite-icon-gui-search">
+      </use>
+    </svg>
+    Primary button with icon
+  </button>
+  <button type="button"
+          class="ui-btn-alt"
+  >
+    <svg class="ui-btn-icon"
+         style="width: 1rem; height: 1rem;"
+    >
+      <use xlink:href="#sprite-icon-gui-search">
+      </use>
+    </svg>
+    Primary button alternative with icon
+  </button>
+  <button type="button"
+          class="ui-btn-secondary"
+  >
+    <svg class="ui-btn-icon"
+         style="width: 1rem; height: 1rem;"
+    >
+      <use xlink:href="#sprite-icon-gui-search">
+      </use>
+    </svg>
+    Secondary button with icon
+  </button>
+  <button type="button"
+          class="ui-btn"
+          disabled
+  >
+    <svg class="ui-btn-icon"
+         style="width: 1rem; height: 1rem;"
+    >
+      <use xlink:href="#sprite-icon-gui-search">
+      </use>
+    </svg>
+    Unavailable primary button with icon
+  </button>
+  <button type="button"
+          class="ui-btn-alt"
+          disabled
+  >
+    <svg class="ui-btn-icon"
+         style="width: 1rem; height: 1rem;"
+    >
+      <use xlink:href="#sprite-icon-gui-search">
+      </use>
+    </svg>
+    Unavailable primary button alternative with icon
+  </button>
+  <button type="button"
+          class="ui-btn-secondary"
+          disabled
+  >
+    <svg class="ui-btn-icon"
+         style="width: 1rem; height: 1rem;"
+    >
+      <use xlink:href="#sprite-icon-gui-search">
+      </use>
+    </svg>
+    Unavailable secondary button with icon
+  </button>
+</div>
+`;
diff --git a/src/core/styles/__snapshots__/Shadows.stories.tsx.snap b/src/core/styles/__snapshots__/Shadows.stories.tsx.snap
index 842da1fc8..6aa337a15 100644
--- a/src/core/styles/__snapshots__/Shadows.stories.tsx.snap
+++ b/src/core/styles/__snapshots__/Shadows.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CSS/Shadows Medium smoke-test 1`] = `
+exports[`Styles/Shadows Medium smoke-test 1`] = `
 <div class="flex gap-32">
   <div class="bg-white rounded-lg w-64 h-64 ui-shadow-xs-medium flex items-center justify-center ui-text-p1">
     xs
@@ -20,7 +20,7 @@ exports[`CSS/Shadows Medium smoke-test 1`] = `
 </div>
 `;
 
-exports[`CSS/Shadows Soft smoke-test 1`] = `
+exports[`Styles/Shadows Soft smoke-test 1`] = `
 <div class="flex gap-32">
   <div class="bg-white rounded-lg w-64 h-64 ui-shadow-xs-soft flex items-center justify-center ui-text-p1">
     xs
@@ -40,7 +40,7 @@ exports[`CSS/Shadows Soft smoke-test 1`] = `
 </div>
 `;
 
-exports[`CSS/Shadows Strong smoke-test 1`] = `
+exports[`Styles/Shadows Strong smoke-test 1`] = `
 <div class="flex gap-32">
   <div class="bg-neutral-1100 text-white rounded-lg w-64 h-64 ui-shadow-xs-strong flex items-center justify-center ui-text-p1">
     xs
diff --git a/src/core/styles/__snapshots__/Typography.stories.tsx.snap b/src/core/styles/__snapshots__/Typography.stories.tsx.snap
index d521f88e0..60dde2d7f 100644
--- a/src/core/styles/__snapshots__/Typography.stories.tsx.snap
+++ b/src/core/styles/__snapshots__/Typography.stories.tsx.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CSS/Typography Code smoke-test 1`] = `
+exports[`Styles/Typography Code smoke-test 1`] = `
 <div class="grid grid-cols-2 gap-16">
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-code">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-code">
     <div>
       Code 1
     </div>
@@ -10,7 +10,7 @@ exports[`CSS/Typography Code smoke-test 1`] = `
       .ui-text-code
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-code2">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-code2">
     <div>
       Code 2
     </div>
@@ -21,9 +21,9 @@ exports[`CSS/Typography Code smoke-test 1`] = `
 </div>
 `;
 
-exports[`CSS/Typography Decorative smoke-test 1`] = `
+exports[`Styles/Typography Decorative smoke-test 1`] = `
 <div class="grid sm:grid-cols-3 gap-16">
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-sub-header">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-sub-header">
     <div>
       Sub-header
     </div>
@@ -31,7 +31,7 @@ exports[`CSS/Typography Decorative smoke-test 1`] = `
       .ui-text-sub-header
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-sub-header text-sub-header-xs">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-sub-header text-sub-header-xs">
     <div>
       Sub-header XS
     </div>
@@ -39,7 +39,7 @@ exports[`CSS/Typography Decorative smoke-test 1`] = `
       .ui-text-sub-header.text-sub-header-xs
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-overline1">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-overline1">
     <div>
       Overline 1
     </div>
@@ -47,7 +47,7 @@ exports[`CSS/Typography Decorative smoke-test 1`] = `
       .ui-text-overline1
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-overline2">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-overline2">
     <div>
       Overline 2
     </div>
@@ -58,73 +58,73 @@ exports[`CSS/Typography Decorative smoke-test 1`] = `
 </div>
 `;
 
-exports[`CSS/Typography GUI smoke-test 1`] = `
+exports[`Styles/Typography GUI smoke-test 1`] = `
 <div class="grid sm:grid-cols-3 gap-16">
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-button1">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-button1">
     <div>
       Button label 1
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-text-button1
+      .ui-gui-button1
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-button2">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-button2">
     <div>
       Button label 2
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-text-button2
+      .ui-gui-button2
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-button3">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-button3">
     <div>
       Button label 3
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-text-button3
+      .ui-gui-button3
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-button4">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-button4">
     <div>
       Button label 4
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-text-button4
+      .ui-gui-button4
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-menu1">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-menu1">
     <div>
       Menu label 1
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-text-menu1
+      .ui-gui-menu1
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-menu2">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-menu2">
     <div>
       Menu label 2
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-text-menu2
+      .ui-gui-menu2
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-menu3">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-menu3">
     <div>
       Menu label 3
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-text-menu3
+      .ui-gui-menu3
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-menu4">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-menu4">
     <div>
       Menu label 4
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-text-menu4
+      .ui-gui-menu4
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text">
     <div>
       Link
     </div>
@@ -135,7 +135,7 @@ exports[`CSS/Typography GUI smoke-test 1`] = `
 </div>
 `;
 
-exports[`CSS/Typography Links smoke-test 1`] = `
+exports[`Styles/Typography Links smoke-test 1`] = `
 <h3 class="ui-text-h2 mb-24">
   Links
 </h3>
@@ -179,7 +179,7 @@ exports[`CSS/Typography Links smoke-test 1`] = `
 </div>
 `;
 
-exports[`CSS/Typography Lists smoke-test 1`] = `
+exports[`Styles/Typography Lists smoke-test 1`] = `
 <h3 class="ui-text-h2 mb-24">
   Lists
 </h3>
@@ -252,9 +252,9 @@ exports[`CSS/Typography Lists smoke-test 1`] = `
 </div>
 `;
 
-exports[`CSS/Typography Primary smoke-test 1`] = `
+exports[`Styles/Typography Primary smoke-test 1`] = `
 <div class="grid sm:grid-cols-3 gap-16">
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-title text-title-xl">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-title text-title-xl">
     <div>
       Title XL
     </div>
@@ -262,7 +262,7 @@ exports[`CSS/Typography Primary smoke-test 1`] = `
       .ui-text-title.text-title-xl
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-title">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-title">
     <div>
       Title
     </div>
@@ -270,7 +270,7 @@ exports[`CSS/Typography Primary smoke-test 1`] = `
       .ui-text-title
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-title text-title-xs">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-title text-title-xs">
     <div>
       Title XS
     </div>
@@ -278,7 +278,7 @@ exports[`CSS/Typography Primary smoke-test 1`] = `
       .ui-text-title.text-title-xs
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-h1 text-h1-xl">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-h1 text-h1-xl">
     <div>
       h1 XL
     </div>
@@ -286,7 +286,7 @@ exports[`CSS/Typography Primary smoke-test 1`] = `
       .ui-text-h1.text-h1-xl
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-h1">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-h1">
     <div>
       h1
     </div>
@@ -294,7 +294,7 @@ exports[`CSS/Typography Primary smoke-test 1`] = `
       .ui-text-h1
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-h1 text-h1-xs">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-h1 text-h1-xs">
     <div>
       h1 XS
     </div>
@@ -302,7 +302,7 @@ exports[`CSS/Typography Primary smoke-test 1`] = `
       .ui-text-h1.text-h1-xs
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-h2 text-h2-xl">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-h2 text-h2-xl">
     <div>
       h2 XL
     </div>
@@ -310,7 +310,7 @@ exports[`CSS/Typography Primary smoke-test 1`] = `
       .ui-text-h2.text-h2-xl
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-h2">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-h2">
     <div>
       h2
     </div>
@@ -318,7 +318,7 @@ exports[`CSS/Typography Primary smoke-test 1`] = `
       .ui-text-h2
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-h2 text-h2-xs">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-h2 text-h2-xs">
     <div>
       h2 XS
     </div>
@@ -326,7 +326,7 @@ exports[`CSS/Typography Primary smoke-test 1`] = `
       .ui-text-h2.text-h2-xs
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-h3">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-h3">
     <div>
       h3
     </div>
@@ -334,7 +334,7 @@ exports[`CSS/Typography Primary smoke-test 1`] = `
       .ui-text-h3
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-h4">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-h4">
     <div>
       h4
     </div>
@@ -342,7 +342,7 @@ exports[`CSS/Typography Primary smoke-test 1`] = `
       .ui-text-h4
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-h5">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-h5">
     <div>
       h5
     </div>
@@ -350,7 +350,7 @@ exports[`CSS/Typography Primary smoke-test 1`] = `
       .ui-text-h5
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-p1">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-p1">
     <div>
       p1
     </div>
@@ -358,7 +358,7 @@ exports[`CSS/Typography Primary smoke-test 1`] = `
       .ui-text-p1
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-p2">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-p2">
     <div>
       p2
     </div>
@@ -366,7 +366,7 @@ exports[`CSS/Typography Primary smoke-test 1`] = `
       .ui-text-p2
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-p3">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-p3">
     <div>
       p3
     </div>
@@ -374,7 +374,7 @@ exports[`CSS/Typography Primary smoke-test 1`] = `
       .ui-text-p3
     </code>
   </div>
-  <div class="rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-p4">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-p4">
     <div>
       p4
     </div>
diff --git a/src/core/styles/colors/Colors.stories.tsx b/src/core/styles/colors/Colors.stories.tsx
index a2db1829e..242301881 100644
--- a/src/core/styles/colors/Colors.stories.tsx
+++ b/src/core/styles/colors/Colors.stories.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { colorRoles } from "./types";
 
 export default {
-  title: "CSS/Colors",
+  title: "Styles/Colors",
 };
 
 const colorSet = (colors, useClass = "") =>
diff --git a/src/core/styles/colors/__snapshots__/Colors.stories.tsx.snap b/src/core/styles/colors/__snapshots__/Colors.stories.tsx.snap
index 98adf862e..9a03fa744 100644
--- a/src/core/styles/colors/__snapshots__/Colors.stories.tsx.snap
+++ b/src/core/styles/colors/__snapshots__/Colors.stories.tsx.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CSS/Colors GUIColors smoke-test 1`] = `
+exports[`Styles/Colors GUIColors smoke-test 1`] = `
 <div class="flex flex-wrap gap-24">
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-blue-default-light);"
     >
@@ -19,7 +19,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-blue-hover-light);"
     >
@@ -36,7 +36,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-blue-active-light);"
     >
@@ -53,7 +53,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-blue-default-dark);"
     >
@@ -70,7 +70,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-blue-hover-dark);"
     >
@@ -87,7 +87,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-blue-active-dark);"
     >
@@ -104,7 +104,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-blue-focus);"
     >
@@ -121,7 +121,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-unavailable);"
     >
@@ -138,7 +138,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-success-green);"
     >
@@ -155,7 +155,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-error-red);"
     >
@@ -172,7 +172,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-focus);"
     >
@@ -189,7 +189,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-focus-outline);"
     >
@@ -206,7 +206,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-visited);"
     >
@@ -226,9 +226,9 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
 </div>
 `;
 
-exports[`CSS/Colors NeutralColors smoke-test 1`] = `
+exports[`Styles/Colors NeutralColors smoke-test 1`] = `
 <div class="flex flex-wrap gap-24">
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-000);"
     >
@@ -245,7 +245,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-100);"
     >
@@ -262,7 +262,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-200);"
     >
@@ -279,7 +279,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-300);"
     >
@@ -296,7 +296,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-400);"
     >
@@ -313,7 +313,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-500);"
     >
@@ -330,7 +330,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-600);"
     >
@@ -347,7 +347,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-700);"
     >
@@ -364,7 +364,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-800);"
     >
@@ -381,7 +381,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-900);"
     >
@@ -398,7 +398,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-1000);"
     >
@@ -415,7 +415,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-1100);"
     >
@@ -432,7 +432,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-1200);"
     >
@@ -449,7 +449,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-1300);"
     >
@@ -469,9 +469,9 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
 </div>
 `;
 
-exports[`CSS/Colors OrangeColors smoke-test 1`] = `
+exports[`Styles/Colors OrangeColors smoke-test 1`] = `
 <div class="flex flex-wrap gap-24">
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-orange-100);"
     >
@@ -488,7 +488,7 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-orange-200);"
     >
@@ -505,7 +505,7 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-orange-300);"
     >
@@ -522,7 +522,7 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-orange-400);"
     >
@@ -539,7 +539,7 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-orange-500);"
     >
@@ -556,7 +556,7 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-orange-600);"
     >
@@ -573,7 +573,7 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-orange-700);"
     >
@@ -590,7 +590,7 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-orange-800);"
     >
@@ -607,7 +607,7 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-orange-900);"
     >
@@ -624,7 +624,7 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-orange-1000);"
     >
@@ -641,7 +641,7 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-orange-1100);"
     >
@@ -661,9 +661,9 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
 </div>
 `;
 
-exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
+exports[`Styles/Colors SecondaryColors smoke-test 1`] = `
 <div class="flex flex-wrap gap-24">
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-yellow-100);"
     >
@@ -680,7 +680,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-yellow-200);"
     >
@@ -697,7 +697,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-yellow-300);"
     >
@@ -714,7 +714,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-yellow-400);"
     >
@@ -731,7 +731,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-yellow-500);"
     >
@@ -748,7 +748,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-yellow-600);"
     >
@@ -765,7 +765,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-yellow-700);"
     >
@@ -782,7 +782,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-yellow-800);"
     >
@@ -799,7 +799,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-yellow-900);"
     >
@@ -816,7 +816,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-green-100);"
     >
@@ -833,7 +833,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-green-200);"
     >
@@ -850,7 +850,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-green-300);"
     >
@@ -867,7 +867,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-green-400);"
     >
@@ -884,7 +884,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-green-500);"
     >
@@ -901,7 +901,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-green-600);"
     >
@@ -918,7 +918,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-green-700);"
     >
@@ -935,7 +935,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-green-800);"
     >
@@ -952,7 +952,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-green-900);"
     >
@@ -969,7 +969,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-blue-100);"
     >
@@ -986,7 +986,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-blue-200);"
     >
@@ -1003,7 +1003,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-blue-300);"
     >
@@ -1020,7 +1020,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-blue-400);"
     >
@@ -1037,7 +1037,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-blue-500);"
     >
@@ -1054,7 +1054,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-blue-600);"
     >
@@ -1071,7 +1071,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-blue-700);"
     >
@@ -1088,7 +1088,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-blue-800);"
     >
@@ -1105,7 +1105,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-blue-900);"
     >
@@ -1122,7 +1122,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-violet-100);"
     >
@@ -1139,7 +1139,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-violet-200);"
     >
@@ -1156,7 +1156,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-violet-300);"
     >
@@ -1173,7 +1173,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-violet-400);"
     >
@@ -1190,7 +1190,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-violet-500);"
     >
@@ -1207,7 +1207,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-violet-600);"
     >
@@ -1224,7 +1224,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-violet-700);"
     >
@@ -1241,7 +1241,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-violet-800);"
     >
@@ -1258,7 +1258,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-violet-900);"
     >
@@ -1275,7 +1275,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-pink-100);"
     >
@@ -1292,7 +1292,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-pink-200);"
     >
@@ -1309,7 +1309,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-pink-300);"
     >
@@ -1326,7 +1326,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-pink-400);"
     >
@@ -1343,7 +1343,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-pink-500);"
     >
@@ -1360,7 +1360,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-pink-600);"
     >
@@ -1377,7 +1377,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-pink-700);"
     >
@@ -1394,7 +1394,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-pink-800);"
     >
@@ -1411,7 +1411,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
       </p>
     </div>
   </div>
-  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+  <div class="rounded-lg w-128 bg-neutral-100 flex flex-col">
     <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-pink-900);"
     >