diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 40c359bfd..e40889146 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -8,16 +8,6 @@ import theme, { brandImage, brandImageDark } from "./theme";
 import loadIcons from "../src/core/icons";
 import { Preview } from "@storybook/react";
 
-const docsContainer = ({ children, context, ...props }) => {
-  loadIcons();
-
-  return (
-    <DocsContainer context={context} {...props}>
-      {children}
-    </DocsContainer>
-  );
-};
-
 initialize({
   onUnhandledRequest: "bypass",
   serviceWorker: {
@@ -29,6 +19,12 @@ initialize({
 });
 
 const preview: Preview = {
+  decorators: [
+    (Story) => {
+      loadIcons();
+      return <Story />;
+    },
+  ],
   parameters: {
     controls: {
       matchers: {
@@ -38,12 +34,11 @@ const preview: Preview = {
     },
     docs: {
       theme,
-      container: docsContainer,
     },
     options: {
       storySort: {
         method: "alphabetical",
-        order: ["CSS", "JS Components", "Brand"],
+        order: ["CSS", "Features", "JS Components", "Brand"],
       },
     },
     darkMode: {
diff --git a/package.json b/package.json
index 482d21428..466542078 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.6.0",
+  "version": "14.6.0-dev.fd4036a",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -27,6 +27,7 @@
     "@storybook/test-runner": "^0.19.1",
     "@swc/cli": "^0.4.0",
     "@swc/core": "^1.4.11",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@types/dompurify": "^3.0.5",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash.throttle": "^4.1.9",
diff --git a/src/core/FeaturedLink.tsx b/src/core/FeaturedLink.tsx
index d6664617d..26e1020db 100644
--- a/src/core/FeaturedLink.tsx
+++ b/src/core/FeaturedLink.tsx
@@ -39,7 +39,7 @@ const buildTargetAndRel = (url: string, newWindow: boolean) => {
 const FeaturedLink = ({
   url,
   textSize = "text-p2",
-  iconColor = "text-cool-black",
+  iconColor,
   flush = false,
   reverse = false,
   additionalCSS = "",
@@ -72,7 +72,7 @@ const FeaturedLink = ({
             name="icon-gui-link-arrow"
             size={`calc(var(--featured-link-icon-size) * 1.25)`}
             color={iconColor}
-            additionalCSS="align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
+            additionalCSS="align-middle mr-8 relative -top-1 -right-4 transition-[right] group-hover:right-0 transform rotate-180"
           />
           {children}
         </>
@@ -83,7 +83,7 @@ const FeaturedLink = ({
             name="icon-gui-link-arrow"
             size={`calc(var(--featured-link-icon-size) * 1.25)`}
             color={iconColor}
-            additionalCSS="align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+            additionalCSS="align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
           />
         </>
       )}
diff --git a/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap b/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap
index dc23694c2..b09459935 100644
--- a/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap
+++ b/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap
@@ -6,7 +6,7 @@ exports[`JS Components/Featured Link Default smoke-test 1`] = `
    style="--featured-link-icon-size: var(--fs-p2);"
 >
   Featured link
-  <svg class="text-cool-black align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+  <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
        style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
   >
     <use xlink:href="#sprite-icon-gui-link-arrow">
@@ -21,7 +21,7 @@ exports[`JS Components/Featured Link Large smoke-test 1`] = `
    style="--featured-link-icon-size: var(--fs-p1);"
 >
   Featured link
-  <svg class="text-cool-black align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+  <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
        style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
   >
     <use xlink:href="#sprite-icon-gui-link-arrow">
@@ -36,7 +36,7 @@ exports[`JS Components/Featured Link Pink smoke-test 1`] = `
    style="--featured-link-icon-size: var(--fs-p2);"
 >
   Featured link
-  <svg class="text-pink-500 align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+  <svg class="text-pink-500 align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
        style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
   >
     <use xlink:href="#sprite-icon-gui-link-arrow">
@@ -50,7 +50,7 @@ exports[`JS Components/Featured Link Reverse smoke-test 1`] = `
    class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 "
    style="--featured-link-icon-size: var(--fs-p2);"
 >
-  <svg class="text-cool-black align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
+  <svg class=" align-middle mr-8 relative -top-1 -right-4 transition-[right] group-hover:right-0 transform rotate-180"
        style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
   >
     <use xlink:href="#sprite-icon-gui-link-arrow">
@@ -66,7 +66,7 @@ exports[`JS Components/Featured Link Small smoke-test 1`] = `
    style="--featured-link-icon-size: var(--fs-p3);"
 >
   Featured link
-  <svg class="text-cool-black align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+  <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
        style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
   >
     <use xlink:href="#sprite-icon-gui-link-arrow">
diff --git a/src/core/Icon.tsx b/src/core/Icon.tsx
index c97ec61c3..740a5ae55 100644
--- a/src/core/Icon.tsx
+++ b/src/core/Icon.tsx
@@ -2,6 +2,7 @@ import React, { CSSProperties } from "react";
 import { defaultIconSecondaryColor } from "./Icon/secondary-colors";
 import { IconName } from "./Icon/types";
 import { ColorClass } from "./styles/colors/types";
+import { convertTailwindClassToVar } from "./styles/colors/utils";
 
 type IconProps = {
   name: IconName;
@@ -11,9 +12,6 @@ type IconProps = {
   additionalCSS?: string;
 };
 
-const convertTailwindClassToVar = (className: string) =>
-  className.replace(/(text|bg)-([a-z0-9-]+)/gi, "var(--color-$2)");
-
 const Icon = ({
   name,
   size = "0.75rem",
diff --git a/src/core/Meganav/__snapshots__/Meganav.stories.tsx.snap b/src/core/Meganav/__snapshots__/Meganav.stories.tsx.snap
index d22e2eba0..e513d1c92 100644
--- a/src/core/Meganav/__snapshots__/Meganav.stories.tsx.snap
+++ b/src/core/Meganav/__snapshots__/Meganav.stories.tsx.snap
@@ -69,7 +69,7 @@ exports[`JS Components/Meganav Default smoke-test 1`] = `
                    style="--featured-link-icon-size: var(--fs-p2);"
                 >
                   Explore how it works
-                  <svg class="text-cool-black align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+                  <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
                        style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
                   >
                     <use xlink:href="#sprite-icon-gui-link-arrow">
@@ -211,7 +211,7 @@ exports[`JS Components/Meganav Default smoke-test 1`] = `
                    style="--featured-link-icon-size: var(--fs-p3);"
                 >
                   Explore Four Pillars of Dependability
-                  <svg class="text-cool-black align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+                  <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
                        style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
                   >
                     <use xlink:href="#sprite-icon-gui-link-arrow">
@@ -762,7 +762,7 @@ exports[`JS Components/Meganav Default smoke-test 1`] = `
                    style="--featured-link-icon-size: var(--fs-p3);"
                 >
                   More from our Blog
-                  <svg class="text-cool-black align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+                  <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
                        style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
                   >
                     <use xlink:href="#sprite-icon-gui-link-arrow">
@@ -1174,7 +1174,7 @@ exports[`JS Components/Meganav Default smoke-test 1`] = `
                    style="--featured-link-icon-size: var(--fs-p2);"
                 >
                   Support
-                  <svg class="text-cool-black align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+                  <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
                        style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
                   >
                     <use xlink:href="#sprite-icon-gui-link-arrow">
@@ -1375,7 +1375,7 @@ exports[`JS Components/Meganav Default smoke-test 1`] = `
                            style="--featured-link-icon-size: var(--fs-p2);"
                         >
                           Explore how it works
-                          <svg class="text-cool-black align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+                          <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
                                style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
                           >
                             <use xlink:href="#sprite-icon-gui-link-arrow">
@@ -1517,7 +1517,7 @@ exports[`JS Components/Meganav Default smoke-test 1`] = `
                            style="--featured-link-icon-size: var(--fs-p3);"
                         >
                           Explore Four Pillars of Dependability
-                          <svg class="text-cool-black align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+                          <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
                                style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
                           >
                             <use xlink:href="#sprite-icon-gui-link-arrow">
@@ -2093,7 +2093,7 @@ exports[`JS Components/Meganav Default smoke-test 1`] = `
                            style="--featured-link-icon-size: var(--fs-p3);"
                         >
                           More from our Blog
-                          <svg class="text-cool-black align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+                          <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
                                style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
                           >
                             <use xlink:href="#sprite-icon-gui-link-arrow">
diff --git a/src/core/Pricing/PricingCards.stories.tsx b/src/core/Pricing/PricingCards.stories.tsx
new file mode 100644
index 000000000..51a5b3202
--- /dev/null
+++ b/src/core/Pricing/PricingCards.stories.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import PricingCards, { PricingCardsProps } from "./PricingCards";
+import { consumptionData, planData } from "./data";
+
+export default {
+  title: "Features/Pricing Cards",
+  component: PricingCards,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A reusable component that forms the basis of two sections of the pricing page. It is used to display pricing plans and consumption pricing. The presence of a `delimiter` prop changes the UX to focus around intermediate icon columns.",
+      },
+    },
+  },
+};
+
+const Template = ({ data, theme = "dark", delimiter }: PricingCardsProps) => (
+  <div className={`${theme === "dark" ? "bg-neutral-1300" : ""} p-32`}>
+    <PricingCards data={data} theme={theme} delimiter={delimiter} />
+  </div>
+);
+
+export const PlansDarkMode = {
+  render: () => <Template data={planData} />,
+};
+
+export const PlansLightMode = {
+  render: () => <Template data={planData} theme="light" />,
+};
+
+export const ConsumptionDarkMode = {
+  render: () => <Template data={consumptionData} delimiter="icon-gui-plus" />,
+};
+
+export const ConsumptionLightMode = {
+  render: () => (
+    <Template data={consumptionData} theme="light" delimiter="icon-gui-plus" />
+  ),
+};
diff --git a/src/core/Pricing/PricingCards.tsx b/src/core/Pricing/PricingCards.tsx
new file mode 100644
index 000000000..3d701cced
--- /dev/null
+++ b/src/core/Pricing/PricingCards.tsx
@@ -0,0 +1,162 @@
+import React, { Fragment } from "react";
+import type { PricingDataFeature } from "./types";
+import { determineThemeColor } from "../styles/colors/utils";
+import { ColorClass, Theme } from "../styles/colors/types";
+import Icon from "../Icon";
+import FeaturedLink from "../FeaturedLink";
+import { IconName } from "../Icon/types";
+
+export type PricingCardsProps = {
+  data: PricingDataFeature[];
+  theme?: Theme;
+  delimiter?: IconName;
+};
+
+const PricingCards = ({
+  data,
+  theme = "dark",
+  delimiter,
+}: PricingCardsProps) => {
+  // work out a dynamic theme colouring, using dark theme colouring as the base
+  const t = (color: ColorClass) => determineThemeColor("dark", theme, color);
+
+  const delimiterColumn = (index: number) =>
+    delimiter && index % 2 === 1 ? (
+      <div className="flex items-center justify-center w-full m-8 @[920px]:w-20">
+        <Icon
+          name={delimiter}
+          size="20"
+          additionalCSS={t("text-neutral-500")}
+        />
+      </div>
+    ) : null;
+
+  const gridRules = {
+    nonDelimited: "grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4",
+    delimited: "flex flex-col items-center @[920px]:flex-row",
+  };
+
+  return (
+    <div className="@container flex justify-center">
+      <div
+        className={`${delimiter ? gridRules.delimited : gridRules.nonDelimited} gap-8`}
+      >
+        {data.map(({ title, description, price, cta, sections }, index) => (
+          <Fragment key={title.content}>
+            {delimiterColumn(index)}
+            <div
+              className={`flex flex-1 p-1 bg-gradient-to-b ${t("from-neutral-1100")} ${t("to-neutral-1100")} rounded-2xl min-w-[272px]`}
+            >
+              <div
+                className={`flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl ${t("bg-neutral-1300")} bg-opacity-25 ${cta ? `${t("hover:bg-neutral-1200")} hover:bg-opacity-100` : ""} transition-colors group ${delimiter ? "@[520px]:flex-row @[920px]:flex-col" : ""}`}
+              >
+                <div
+                  className={`flex flex-col gap-24 ${delimiter ? "@[520px]:flex-1 @[920px}:flex-none" : ""}`}
+                >
+                  <div>
+                    <p
+                      className={`mb-12 ${title.className ?? ""} ${t(title.color ?? "text-neutral-000")}`}
+                    >
+                      {title.content}
+                    </p>
+                    <p
+                      className={`ui-text-p1 ${description.className ?? ""} ${t(description.color ?? "text-neutral-000")}`}
+                    >
+                      {description.content}
+                    </p>
+                  </div>
+                  <div
+                    className={`flex items-end gap-8 ${delimiter ? "@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end" : ""}`}
+                  >
+                    <p
+                      className={`ui-text-title font-medium tracking-tight leading-none ${t("text-neutral-000")}`}
+                    >
+                      {Number.isNaN(Number(price.amount)) ? "" : "$"}
+                      {price.amount}
+                    </p>
+                    <div className={t("text-neutral-000")}>{price.content}</div>
+                  </div>
+                  {cta ? (
+                    <div className="group">
+                      <FeaturedLink
+                        additionalCSS={`text-center ui-btn ${t("bg-neutral-000")} ${t("text-neutral-1300")} hover:text-neutral-000 px-24 !py-12 ${cta.className ?? ""}`}
+                        url={cta.url}
+                      >
+                        {cta.text}
+                      </FeaturedLink>
+                    </div>
+                  ) : null}
+                </div>
+                <div className="flex-1 flex flex-col gap-24">
+                  {sections.map(({ title, items, listItemColors, cta }) => (
+                    <div key={title} className="flex flex-col gap-12">
+                      <p
+                        className={`${t("text-neutral-500")} font-mono uppercase text-overline2 tracking-[0.16em]`}
+                      >
+                        {title}
+                      </p>
+                      <div className={delimiter ? "" : "flex flex-col gap-4"}>
+                        {items.map((item, index) =>
+                          Array.isArray(item) ? (
+                            <div
+                              key={item[0]}
+                              className={`flex justify-between gap-16 px-8 -mx-8 ${index === 0 ? "py-8" : "py-4"} ${index > 0 && index % 2 === 0 ? `${t("bg-blue-900")} rounded-md` : ""}`}
+                            >
+                              {item.map((subItem, subIndex) => (
+                                <span
+                                  key={subItem}
+                                  className={`ui-text-p3 ${index === 0 ? "font-bold" : "font-medium"} ${t("text-neutral-300")} ${subIndex % 2 === 1 ? "text-right" : ""}`}
+                                >
+                                  {subItem}
+                                </span>
+                              ))}
+                            </div>
+                          ) : (
+                            <div key={item} className="flex gap-8 items-start">
+                              {listItemColors ? (
+                                <Icon
+                                  name="icon-gui-check-circled-fill"
+                                  color={t(listItemColors.background)}
+                                  secondaryColor={t(listItemColors.foreground)}
+                                  size="16"
+                                  additionalCSS="mt-2"
+                                />
+                              ) : null}
+                              <div
+                                className={`flex-1 ${listItemColors ? "ui-text-p3" : "ui-text-p2"} font-medium ${t("text-neutral-300")}`}
+                              >
+                                {item}
+                              </div>
+                            </div>
+                          ),
+                        )}
+                      </div>
+                      {cta ? (
+                        <div className="flex items-center h-40">
+                          <div
+                            className={`hidden sm:group-hover:hidden leading-6 font-extralight text-p3 ${t("text-neutral-800")}`}
+                          >
+                            •••
+                          </div>
+                          <FeaturedLink
+                            url={cta.url ?? "#"}
+                            additionalCSS={`sm:hidden group-hover:block font-medium ui-text-p3 ${t("text-neutral-500")} hover:${t("text-neutral-000")} transition-colors`}
+                          >
+                            {cta.text}
+                          </FeaturedLink>
+                        </div>
+                      ) : null}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+            {delimiterColumn(index)}
+          </Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default PricingCards;
diff --git a/src/core/Pricing/__snapshots__/PricingCards.stories.tsx.snap b/src/core/Pricing/__snapshots__/PricingCards.stories.tsx.snap
new file mode 100644
index 000000000..1e420eae6
--- /dev/null
+++ b/src/core/Pricing/__snapshots__/PricingCards.stories.tsx.snap
@@ -0,0 +1,1541 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Features/Pricing Cards ConsumptionDarkMode smoke-test 1`] = `
+<div class="bg-neutral-1300 p-32">
+  <div class="@container flex justify-center">
+    <div class="flex flex-col items-center @[920px]:flex-row gap-8">
+      <div class="flex flex-1 p-1 bg-gradient-to-b from-neutral-1100 to-neutral-1100 rounded-2xl min-w-[272px]">
+        <div class="flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl bg-neutral-1300 bg-opacity-25  transition-colors group @[520px]:flex-row @[920px]:flex-col">
+          <div class="flex flex-col gap-24 @[520px]:flex-1 @[920px}:flex-none">
+            <div>
+              <p class="mb-12 ui-text-h3 text-neutral-000">
+                Messages
+              </p>
+              <p class="ui-text-p1 ui-text-p3 text-neutral-700">
+                Messages contain the data that a client is communicating, such as the contents of a chat message.
+              </p>
+            </div>
+            <div class="flex items-end gap-8 @[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end">
+              <p class="ui-text-title font-medium tracking-tight leading-none text-neutral-000">
+                $2.5
+              </p>
+              <div class="text-neutral-000">
+                per million
+              </div>
+            </div>
+          </div>
+          <div class="flex-1 flex flex-col gap-24">
+            <div class="flex flex-col gap-12">
+              <p class="text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]">
+                Volume discounts
+              </p>
+              <div class>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-8 ">
+                  <span class="ui-text-p3 font-bold text-neutral-300 ">
+                    Consumption
+                  </span>
+                  <span class="ui-text-p3 font-bold text-neutral-300 text-right">
+                    $/million msgs
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 ">
+                  <span class="ui-text-p3 font-medium text-neutral-300 ">
+                    First 50 million msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-300 text-right">
+                    $2.50
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 bg-blue-900 rounded-md">
+                  <span class="ui-text-p3 font-medium text-neutral-300 ">
+                    Next 450 million msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-300 text-right">
+                    $2.25
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 ">
+                  <span class="ui-text-p3 font-medium text-neutral-300 ">
+                    Next 4.5 billion msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-300 text-right">
+                    $1.95
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 bg-blue-900 rounded-md">
+                  <span class="ui-text-p3 font-medium text-neutral-300 ">
+                    Next 15 billion msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-300 text-right">
+                    $1.65
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 ">
+                  <span class="ui-text-p3 font-medium text-neutral-300 ">
+                    Next 30 billion msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-300 text-right">
+                    $1.40
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 bg-blue-900 rounded-md">
+                  <span class="ui-text-p3 font-medium text-neutral-300 ">
+                    Over 50 billion msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-300 text-right">
+                    $1.25
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center justify-center w-full m-8 @[920px]:w-20">
+        <svg class=" text-neutral-500"
+             style="width: 20px; height: 20px;"
+        >
+          <use xlink:href="#sprite-icon-gui-plus">
+          </use>
+        </svg>
+      </div>
+      <div class="flex flex-1 p-1 bg-gradient-to-b from-neutral-1100 to-neutral-1100 rounded-2xl min-w-[272px]">
+        <div class="flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl bg-neutral-1300 bg-opacity-25  transition-colors group @[520px]:flex-row @[920px]:flex-col">
+          <div class="flex flex-col gap-24 @[520px]:flex-1 @[920px}:flex-none">
+            <div>
+              <p class="mb-12 ui-text-h3 text-neutral-000">
+                Channels
+              </p>
+              <p class="ui-text-p1 ui-text-p3 text-neutral-700">
+                Clients publish and receive messages on channels (also know as topics). We only charge for active channels.
+              </p>
+            </div>
+            <div class="flex items-end gap-8 @[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end">
+              <p class="ui-text-title font-medium tracking-tight leading-none text-neutral-000">
+                $1
+              </p>
+              <div class="text-neutral-000">
+                per million mins
+              </div>
+            </div>
+          </div>
+          <div class="flex-1 flex flex-col gap-24">
+            <div class="flex flex-col gap-12">
+              <p class="text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]">
+                Volume discounts
+              </p>
+              <div class>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-8 ">
+                  <span class="ui-text-p3 font-bold text-neutral-300 ">
+                    Consumption
+                  </span>
+                  <span class="ui-text-p3 font-bold text-neutral-300 text-right">
+                    $/million msgs
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 ">
+                  <span class="ui-text-p3 font-medium text-neutral-300 ">
+                    First 10 million msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-300 text-right">
+                    $1.00
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 bg-blue-900 rounded-md">
+                  <span class="ui-text-p3 font-medium text-neutral-300 ">
+                    Next 90 million msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-300 text-right">
+                    $0.95
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 ">
+                  <span class="ui-text-p3 font-medium text-neutral-300 ">
+                    Next 900 million msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-300 text-right">
+                    $0.85
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 bg-blue-900 rounded-md">
+                  <span class="ui-text-p3 font-medium text-neutral-300 ">
+                    Next 4 billion msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-300 text-right">
+                    $0.75
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 ">
+                  <span class="ui-text-p3 font-medium text-neutral-300 ">
+                    Next 10 billion msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-300 text-right">
+                    $0.65
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 bg-blue-900 rounded-md">
+                  <span class="ui-text-p3 font-medium text-neutral-300 ">
+                    Over 15 billion msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-300 text-right">
+                    $0.60
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center justify-center w-full m-8 @[920px]:w-20">
+        <svg class=" text-neutral-500"
+             style="width: 20px; height: 20px;"
+        >
+          <use xlink:href="#sprite-icon-gui-plus">
+          </use>
+        </svg>
+      </div>
+      <div class="flex flex-1 p-1 bg-gradient-to-b from-neutral-1100 to-neutral-1100 rounded-2xl min-w-[272px]">
+        <div class="flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl bg-neutral-1300 bg-opacity-25  transition-colors group @[520px]:flex-row @[920px]:flex-col">
+          <div class="flex flex-col gap-24 @[520px]:flex-1 @[920px}:flex-none">
+            <div>
+              <p class="mb-12 ui-text-h3 text-neutral-000">
+                Connections
+              </p>
+              <p class="ui-text-p1 ui-text-p3 text-neutral-700">
+                Clients establish and maintain a connection to the Ably service, typically over WebSockets.  We only charge for active connections.
+              </p>
+            </div>
+            <div class="flex items-end gap-8 @[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end">
+              <p class="ui-text-title font-medium tracking-tight leading-none text-neutral-000">
+                $1
+              </p>
+              <div class="text-neutral-000">
+                per million mins
+              </div>
+            </div>
+          </div>
+          <div class="flex-1 flex flex-col gap-24">
+            <div class="flex flex-col gap-12">
+              <p class="text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]">
+                Volume discounts
+              </p>
+              <div class>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-8 ">
+                  <span class="ui-text-p3 font-bold text-neutral-300 ">
+                    Consumption
+                  </span>
+                  <span class="ui-text-p3 font-bold text-neutral-300 text-right">
+                    $/million msgs
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 ">
+                  <span class="ui-text-p3 font-medium text-neutral-300 ">
+                    First 10 million msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-300 text-right">
+                    $1.00
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 bg-blue-900 rounded-md">
+                  <span class="ui-text-p3 font-medium text-neutral-300 ">
+                    Next 90 million msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-300 text-right">
+                    $0.95
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 ">
+                  <span class="ui-text-p3 font-medium text-neutral-300 ">
+                    Next 900 million msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-300 text-right">
+                    $0.85
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 bg-blue-900 rounded-md">
+                  <span class="ui-text-p3 font-medium text-neutral-300 ">
+                    Next 4 billion msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-300 text-right">
+                    $0.75
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 ">
+                  <span class="ui-text-p3 font-medium text-neutral-300 ">
+                    Next 10 billion msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-300 text-right">
+                    $0.65
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 bg-blue-900 rounded-md">
+                  <span class="ui-text-p3 font-medium text-neutral-300 ">
+                    Over 15 billion msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-300 text-right">
+                    $0.60
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Features/Pricing Cards ConsumptionLightMode smoke-test 1`] = `
+<div class=" p-32">
+  <div class="@container flex justify-center">
+    <div class="flex flex-col items-center @[920px]:flex-row gap-8">
+      <div class="flex flex-1 p-1 bg-gradient-to-b from-neutral-200 to-neutral-200 rounded-2xl min-w-[272px]">
+        <div class="flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl bg-neutral-000 bg-opacity-25  transition-colors group @[520px]:flex-row @[920px]:flex-col">
+          <div class="flex flex-col gap-24 @[520px]:flex-1 @[920px}:flex-none">
+            <div>
+              <p class="mb-12 ui-text-h3 text-neutral-1300">
+                Messages
+              </p>
+              <p class="ui-text-p1 ui-text-p3 text-neutral-600">
+                Messages contain the data that a client is communicating, such as the contents of a chat message.
+              </p>
+            </div>
+            <div class="flex items-end gap-8 @[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end">
+              <p class="ui-text-title font-medium tracking-tight leading-none text-neutral-1300">
+                $2.5
+              </p>
+              <div class="text-neutral-1300">
+                per million
+              </div>
+            </div>
+          </div>
+          <div class="flex-1 flex flex-col gap-24">
+            <div class="flex flex-col gap-12">
+              <p class="text-neutral-800 font-mono uppercase text-overline2 tracking-[0.16em]">
+                Volume discounts
+              </p>
+              <div class>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-8 ">
+                  <span class="ui-text-p3 font-bold text-neutral-1000 ">
+                    Consumption
+                  </span>
+                  <span class="ui-text-p3 font-bold text-neutral-1000 text-right">
+                    $/million msgs
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 ">
+                  <span class="ui-text-p3 font-medium text-neutral-1000 ">
+                    First 50 million msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-1000 text-right">
+                    $2.50
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 bg-blue-100 rounded-md">
+                  <span class="ui-text-p3 font-medium text-neutral-1000 ">
+                    Next 450 million msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-1000 text-right">
+                    $2.25
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 ">
+                  <span class="ui-text-p3 font-medium text-neutral-1000 ">
+                    Next 4.5 billion msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-1000 text-right">
+                    $1.95
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 bg-blue-100 rounded-md">
+                  <span class="ui-text-p3 font-medium text-neutral-1000 ">
+                    Next 15 billion msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-1000 text-right">
+                    $1.65
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 ">
+                  <span class="ui-text-p3 font-medium text-neutral-1000 ">
+                    Next 30 billion msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-1000 text-right">
+                    $1.40
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 bg-blue-100 rounded-md">
+                  <span class="ui-text-p3 font-medium text-neutral-1000 ">
+                    Over 50 billion msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-1000 text-right">
+                    $1.25
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center justify-center w-full m-8 @[920px]:w-20">
+        <svg class=" text-neutral-800"
+             style="width: 20px; height: 20px;"
+        >
+          <use xlink:href="#sprite-icon-gui-plus">
+          </use>
+        </svg>
+      </div>
+      <div class="flex flex-1 p-1 bg-gradient-to-b from-neutral-200 to-neutral-200 rounded-2xl min-w-[272px]">
+        <div class="flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl bg-neutral-000 bg-opacity-25  transition-colors group @[520px]:flex-row @[920px]:flex-col">
+          <div class="flex flex-col gap-24 @[520px]:flex-1 @[920px}:flex-none">
+            <div>
+              <p class="mb-12 ui-text-h3 text-neutral-1300">
+                Channels
+              </p>
+              <p class="ui-text-p1 ui-text-p3 text-neutral-600">
+                Clients publish and receive messages on channels (also know as topics). We only charge for active channels.
+              </p>
+            </div>
+            <div class="flex items-end gap-8 @[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end">
+              <p class="ui-text-title font-medium tracking-tight leading-none text-neutral-1300">
+                $1
+              </p>
+              <div class="text-neutral-1300">
+                per million mins
+              </div>
+            </div>
+          </div>
+          <div class="flex-1 flex flex-col gap-24">
+            <div class="flex flex-col gap-12">
+              <p class="text-neutral-800 font-mono uppercase text-overline2 tracking-[0.16em]">
+                Volume discounts
+              </p>
+              <div class>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-8 ">
+                  <span class="ui-text-p3 font-bold text-neutral-1000 ">
+                    Consumption
+                  </span>
+                  <span class="ui-text-p3 font-bold text-neutral-1000 text-right">
+                    $/million msgs
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 ">
+                  <span class="ui-text-p3 font-medium text-neutral-1000 ">
+                    First 10 million msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-1000 text-right">
+                    $1.00
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 bg-blue-100 rounded-md">
+                  <span class="ui-text-p3 font-medium text-neutral-1000 ">
+                    Next 90 million msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-1000 text-right">
+                    $0.95
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 ">
+                  <span class="ui-text-p3 font-medium text-neutral-1000 ">
+                    Next 900 million msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-1000 text-right">
+                    $0.85
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 bg-blue-100 rounded-md">
+                  <span class="ui-text-p3 font-medium text-neutral-1000 ">
+                    Next 4 billion msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-1000 text-right">
+                    $0.75
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 ">
+                  <span class="ui-text-p3 font-medium text-neutral-1000 ">
+                    Next 10 billion msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-1000 text-right">
+                    $0.65
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 bg-blue-100 rounded-md">
+                  <span class="ui-text-p3 font-medium text-neutral-1000 ">
+                    Over 15 billion msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-1000 text-right">
+                    $0.60
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center justify-center w-full m-8 @[920px]:w-20">
+        <svg class=" text-neutral-800"
+             style="width: 20px; height: 20px;"
+        >
+          <use xlink:href="#sprite-icon-gui-plus">
+          </use>
+        </svg>
+      </div>
+      <div class="flex flex-1 p-1 bg-gradient-to-b from-neutral-200 to-neutral-200 rounded-2xl min-w-[272px]">
+        <div class="flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl bg-neutral-000 bg-opacity-25  transition-colors group @[520px]:flex-row @[920px]:flex-col">
+          <div class="flex flex-col gap-24 @[520px]:flex-1 @[920px}:flex-none">
+            <div>
+              <p class="mb-12 ui-text-h3 text-neutral-1300">
+                Connections
+              </p>
+              <p class="ui-text-p1 ui-text-p3 text-neutral-600">
+                Clients establish and maintain a connection to the Ably service, typically over WebSockets.  We only charge for active connections.
+              </p>
+            </div>
+            <div class="flex items-end gap-8 @[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end">
+              <p class="ui-text-title font-medium tracking-tight leading-none text-neutral-1300">
+                $1
+              </p>
+              <div class="text-neutral-1300">
+                per million mins
+              </div>
+            </div>
+          </div>
+          <div class="flex-1 flex flex-col gap-24">
+            <div class="flex flex-col gap-12">
+              <p class="text-neutral-800 font-mono uppercase text-overline2 tracking-[0.16em]">
+                Volume discounts
+              </p>
+              <div class>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-8 ">
+                  <span class="ui-text-p3 font-bold text-neutral-1000 ">
+                    Consumption
+                  </span>
+                  <span class="ui-text-p3 font-bold text-neutral-1000 text-right">
+                    $/million msgs
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 ">
+                  <span class="ui-text-p3 font-medium text-neutral-1000 ">
+                    First 10 million msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-1000 text-right">
+                    $1.00
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 bg-blue-100 rounded-md">
+                  <span class="ui-text-p3 font-medium text-neutral-1000 ">
+                    Next 90 million msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-1000 text-right">
+                    $0.95
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 ">
+                  <span class="ui-text-p3 font-medium text-neutral-1000 ">
+                    Next 900 million msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-1000 text-right">
+                    $0.85
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 bg-blue-100 rounded-md">
+                  <span class="ui-text-p3 font-medium text-neutral-1000 ">
+                    Next 4 billion msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-1000 text-right">
+                    $0.75
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 ">
+                  <span class="ui-text-p3 font-medium text-neutral-1000 ">
+                    Next 10 billion msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-1000 text-right">
+                    $0.65
+                  </span>
+                </div>
+                <div class="flex justify-between gap-16 px-8 -mx-8 py-4 bg-blue-100 rounded-md">
+                  <span class="ui-text-p3 font-medium text-neutral-1000 ">
+                    Over 15 billion msgs
+                  </span>
+                  <span class="ui-text-p3 font-medium text-neutral-1000 text-right">
+                    $0.60
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Features/Pricing Cards PlansDarkMode smoke-test 1`] = `
+<div class="bg-neutral-1300 p-32">
+  <div class="@container flex justify-center">
+    <div class="grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4 gap-8">
+      <div class="flex flex-1 p-1 bg-gradient-to-b from-neutral-1100 to-neutral-1100 rounded-2xl min-w-[272px]">
+        <div class="flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl bg-neutral-1300 bg-opacity-25 hover:bg-neutral-1200 hover:bg-opacity-100 transition-colors group ">
+          <div class="flex flex-col gap-24 ">
+            <div>
+              <p class="mb-12 font-mono text-p3 uppercase font-extrabold tracking-[0.16em] text-neutral-700">
+                Free
+              </p>
+              <p class="ui-text-p1 ui-text-p1 text-neutral-500">
+                Build a proof of concept.
+              </p>
+            </div>
+            <div class="flex items-end gap-8 ">
+              <p class="ui-text-title font-medium tracking-tight leading-none text-neutral-000">
+                $0
+              </p>
+              <div class="text-neutral-000">
+              </div>
+            </div>
+            <div class="group">
+              <a href="#"
+                 class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 text-center ui-btn bg-neutral-000 text-neutral-1300 hover:text-neutral-000 px-24 !py-12 "
+                 style="--featured-link-icon-size: var(--fs-p2);"
+              >
+                Start for free
+                <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
+                     style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
+                >
+                  <use xlink:href="#sprite-icon-gui-link-arrow">
+                  </use>
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div class="flex-1 flex flex-col gap-24">
+            <div class="flex flex-col gap-12">
+              <p class="text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]">
+                Capacity
+              </p>
+              <div class="flex flex-col gap-4">
+                <div class="flex gap-8 items-start">
+                  <div class="flex-1 ui-text-p2 font-medium text-neutral-300">
+                    200 concurrent channels
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <div class="flex-1 ui-text-p2 font-medium text-neutral-300">
+                    200 concurrent connections
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="flex flex-col gap-12">
+              <p class="text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]">
+                Includes
+              </p>
+              <div class="flex flex-col gap-4">
+                <div class="flex gap-8 items-start">
+                  <svg class="text-neutral-1000 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-neutral-600);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-300">
+                    Community &amp; email support (best effort)
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <svg class="text-neutral-1000 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-neutral-600);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-300">
+                    No commitment
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center h-40">
+                <div class="hidden sm:group-hover:hidden leading-6 font-extralight text-p3 text-neutral-800">
+                  •••
+                </div>
+                <a href="#"
+                   class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 sm:hidden group-hover:block font-medium ui-text-p3 text-neutral-500 hover:text-neutral-000 transition-colors"
+                   style="--featured-link-icon-size: var(--fs-p2);"
+                >
+                  See all features
+                  <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
+                       style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-link-arrow">
+                    </use>
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-1 p-1 bg-gradient-to-b from-neutral-1100 to-neutral-1100 rounded-2xl min-w-[272px]">
+        <div class="flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl bg-neutral-1300 bg-opacity-25 hover:bg-neutral-1200 hover:bg-opacity-100 transition-colors group ">
+          <div class="flex flex-col gap-24 ">
+            <div>
+              <p class="mb-12 font-mono text-p3 uppercase font-extrabold tracking-[0.16em] text-neutral-000">
+                Standard
+              </p>
+              <p class="ui-text-p1 ui-text-p1 text-neutral-500">
+                Roll-out into production.
+              </p>
+            </div>
+            <div class="flex items-end gap-8 ">
+              <p class="ui-text-title font-medium tracking-tight leading-none text-neutral-000">
+                $29
+              </p>
+              <div class="text-neutral-000">
+                <p class="ui-text-p3 font-medium"
+                   style="color: currentcolor;"
+                >
+                  /month
+                </p>
+                <p class="ui-text-p2 font-bold text-gui-blue-default-dark -mt-6">
+                  + consumption
+                </p>
+              </div>
+            </div>
+            <div class="group">
+              <a href="#"
+                 class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 text-center ui-btn bg-neutral-000 text-neutral-1300 hover:text-neutral-000 px-24 !py-12 "
+                 style="--featured-link-icon-size: var(--fs-p2);"
+              >
+                Get started
+                <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
+                     style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
+                >
+                  <use xlink:href="#sprite-icon-gui-link-arrow">
+                  </use>
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div class="flex-1 flex flex-col gap-24">
+            <div class="flex flex-col gap-12">
+              <p class="text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]">
+                Capacity
+              </p>
+              <div class="flex flex-col gap-4">
+                <div class="flex gap-8 items-start">
+                  <div class="flex-1 ui-text-p2 font-medium text-neutral-300">
+                    10k concurrent channels
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <div class="flex-1 ui-text-p2 font-medium text-neutral-300">
+                    10k concurrent connections
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <div class="flex-1 ui-text-p2 font-medium text-neutral-300">
+                    2.5k messages/second
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="flex flex-col gap-12">
+              <p class="text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]">
+                Includes
+              </p>
+              <div class="flex flex-col gap-4">
+                <div class="flex gap-8 items-start">
+                  <svg class="text-blue-800 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-blue-400);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-300">
+                    1 day email support SLA
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <svg class="text-blue-800 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-blue-400);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-300">
+                    Uptime SLO
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center h-40">
+                <div class="hidden sm:group-hover:hidden leading-6 font-extralight text-p3 text-neutral-800">
+                  •••
+                </div>
+                <a href="#"
+                   class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 sm:hidden group-hover:block font-medium ui-text-p3 text-neutral-500 hover:text-neutral-000 transition-colors"
+                   style="--featured-link-icon-size: var(--fs-p2);"
+                >
+                  See all features
+                  <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
+                       style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-link-arrow">
+                    </use>
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-1 p-1 bg-gradient-to-b from-neutral-1100 to-neutral-1100 rounded-2xl min-w-[272px]">
+        <div class="flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl bg-neutral-1300 bg-opacity-25 hover:bg-neutral-1200 hover:bg-opacity-100 transition-colors group ">
+          <div class="flex flex-col gap-24 ">
+            <div>
+              <p class="mb-12 font-mono text-p3 uppercase font-extrabold tracking-[0.16em] text-neutral-000">
+                Pro
+              </p>
+              <p class="ui-text-p1 ui-text-p1 text-neutral-500">
+                Scale with confidence.
+              </p>
+            </div>
+            <div class="flex items-end gap-8 ">
+              <p class="ui-text-title font-medium tracking-tight leading-none text-neutral-000">
+                $399
+              </p>
+              <div class="text-neutral-000">
+                <p class="ui-text-p3 font-medium"
+                   style="color: currentcolor;"
+                >
+                  /month
+                </p>
+                <p class="ui-text-p2 font-bold text-gui-blue-default-dark -mt-6">
+                  + consumption
+                </p>
+              </div>
+            </div>
+            <div class="group">
+              <a href="#"
+                 class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 text-center ui-btn bg-neutral-000 text-neutral-1300 hover:text-neutral-000 px-24 !py-12 "
+                 style="--featured-link-icon-size: var(--fs-p2);"
+              >
+                Get started
+                <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
+                     style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
+                >
+                  <use xlink:href="#sprite-icon-gui-link-arrow">
+                  </use>
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div class="flex-1 flex flex-col gap-24">
+            <div class="flex flex-col gap-12">
+              <p class="text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]">
+                Capacity
+              </p>
+              <div class="flex flex-col gap-4">
+                <div class="flex gap-8 items-start">
+                  <div class="flex-1 ui-text-p2 font-medium text-neutral-300">
+                    50k concurrent channels
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <div class="flex-1 ui-text-p2 font-medium text-neutral-300">
+                    50k concurrent connections
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <div class="flex-1 ui-text-p2 font-medium text-neutral-300">
+                    10k messages/second
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="flex flex-col gap-12">
+              <p class="text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]">
+                Includes
+              </p>
+              <div class="flex flex-col gap-4">
+                <div class="flex gap-8 items-start">
+                  <svg class="text-blue-800 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-blue-400);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-300">
+                    4 hour email support SLA
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <svg class="text-blue-800 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-blue-400);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-300">
+                    Datadog (lite)
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <svg class="text-blue-800 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-blue-400);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-300">
+                    Uptime SLO
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center h-40">
+                <div class="hidden sm:group-hover:hidden leading-6 font-extralight text-p3 text-neutral-800">
+                  •••
+                </div>
+                <a href="#"
+                   class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 sm:hidden group-hover:block font-medium ui-text-p3 text-neutral-500 hover:text-neutral-000 transition-colors"
+                   style="--featured-link-icon-size: var(--fs-p2);"
+                >
+                  See all features
+                  <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
+                       style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-link-arrow">
+                    </use>
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-1 p-1 bg-gradient-to-b from-neutral-1100 to-neutral-1100 rounded-2xl min-w-[272px]">
+        <div class="flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl bg-neutral-1300 bg-opacity-25 hover:bg-neutral-1200 hover:bg-opacity-100 transition-colors group ">
+          <div class="flex flex-col gap-24 ">
+            <div>
+              <p class="mb-12 font-mono text-p3 uppercase font-extrabold tracking-[0.16em] text-orange-600">
+                Enterprise
+              </p>
+              <p class="ui-text-p1 ui-text-p1 text-neutral-500">
+                Deliver without limits.
+              </p>
+            </div>
+            <div class="flex items-end gap-8 ">
+              <p class="ui-text-title font-medium tracking-tight leading-none text-neutral-000">
+                Custom
+              </p>
+              <div class="text-neutral-000">
+              </div>
+            </div>
+            <div class="group">
+              <a href="#"
+                 class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 text-center ui-btn bg-neutral-000 text-neutral-1300 hover:text-neutral-000 px-24 !py-12 ui-btn-alt text-white"
+                 style="--featured-link-icon-size: var(--fs-p2);"
+              >
+                Contact us
+                <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
+                     style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
+                >
+                  <use xlink:href="#sprite-icon-gui-link-arrow">
+                  </use>
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div class="flex-1 flex flex-col gap-24">
+            <div class="flex flex-col gap-12">
+              <p class="text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]">
+                Capacity
+              </p>
+              <div class="flex flex-col gap-4">
+                <div class="flex gap-8 items-start">
+                  <div class="flex-1 ui-text-p2 font-medium text-neutral-300">
+                    Unlimited concurrent channels
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <div class="flex-1 ui-text-p2 font-medium text-neutral-300">
+                    Unlimited concurrent connections
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <div class="flex-1 ui-text-p2 font-medium text-neutral-300">
+                    Unlimited messages/second
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="flex flex-col gap-12">
+              <p class="text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]">
+                Includes
+              </p>
+              <div class="flex flex-col gap-4">
+                <div class="flex gap-8 items-start">
+                  <svg class="text-orange-1000 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-orange-600);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-300">
+                    24/7 mission critical support
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <svg class="text-orange-1000 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-orange-600);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-300">
+                    99.999% uptime SLAs
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <svg class="text-orange-1000 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-orange-600);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-300">
+                    Committed use discounts
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <svg class="text-orange-1000 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-orange-600);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-300">
+                    Datadog
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <svg class="text-orange-1000 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-orange-600);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-300">
+                    CNAME, SSO, &amp; more
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center h-40">
+                <div class="hidden sm:group-hover:hidden leading-6 font-extralight text-p3 text-neutral-800">
+                  •••
+                </div>
+                <a href="#"
+                   class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 sm:hidden group-hover:block font-medium ui-text-p3 text-neutral-500 hover:text-neutral-000 transition-colors"
+                   style="--featured-link-icon-size: var(--fs-p2);"
+                >
+                  See all features
+                  <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
+                       style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-link-arrow">
+                    </use>
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Features/Pricing Cards PlansLightMode smoke-test 1`] = `
+<div class=" p-32">
+  <div class="@container flex justify-center">
+    <div class="grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4 gap-8">
+      <div class="flex flex-1 p-1 bg-gradient-to-b from-neutral-200 to-neutral-200 rounded-2xl min-w-[272px]">
+        <div class="flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl bg-neutral-000 bg-opacity-25 hover:bg-neutral-100 hover:bg-opacity-100 transition-colors group ">
+          <div class="flex flex-col gap-24 ">
+            <div>
+              <p class="mb-12 font-mono text-p3 uppercase font-extrabold tracking-[0.16em] text-neutral-600">
+                Free
+              </p>
+              <p class="ui-text-p1 ui-text-p1 text-neutral-800">
+                Build a proof of concept.
+              </p>
+            </div>
+            <div class="flex items-end gap-8 ">
+              <p class="ui-text-title font-medium tracking-tight leading-none text-neutral-1300">
+                $0
+              </p>
+              <div class="text-neutral-1300">
+              </div>
+            </div>
+            <div class="group">
+              <a href="#"
+                 class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 text-center ui-btn bg-neutral-1300 text-neutral-000 hover:text-neutral-000 px-24 !py-12 "
+                 style="--featured-link-icon-size: var(--fs-p2);"
+              >
+                Start for free
+                <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
+                     style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
+                >
+                  <use xlink:href="#sprite-icon-gui-link-arrow">
+                  </use>
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div class="flex-1 flex flex-col gap-24">
+            <div class="flex flex-col gap-12">
+              <p class="text-neutral-800 font-mono uppercase text-overline2 tracking-[0.16em]">
+                Capacity
+              </p>
+              <div class="flex flex-col gap-4">
+                <div class="flex gap-8 items-start">
+                  <div class="flex-1 ui-text-p2 font-medium text-neutral-1000">
+                    200 concurrent channels
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <div class="flex-1 ui-text-p2 font-medium text-neutral-1000">
+                    200 concurrent connections
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="flex flex-col gap-12">
+              <p class="text-neutral-800 font-mono uppercase text-overline2 tracking-[0.16em]">
+                Includes
+              </p>
+              <div class="flex flex-col gap-4">
+                <div class="flex gap-8 items-start">
+                  <svg class="text-neutral-300 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-neutral-700);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-1000">
+                    Community &amp; email support (best effort)
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <svg class="text-neutral-300 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-neutral-700);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-1000">
+                    No commitment
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center h-40">
+                <div class="hidden sm:group-hover:hidden leading-6 font-extralight text-p3 text-neutral-500">
+                  •••
+                </div>
+                <a href="#"
+                   class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 sm:hidden group-hover:block font-medium ui-text-p3 text-neutral-800 hover:text-neutral-1300 transition-colors"
+                   style="--featured-link-icon-size: var(--fs-p2);"
+                >
+                  See all features
+                  <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
+                       style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-link-arrow">
+                    </use>
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-1 p-1 bg-gradient-to-b from-neutral-200 to-neutral-200 rounded-2xl min-w-[272px]">
+        <div class="flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl bg-neutral-000 bg-opacity-25 hover:bg-neutral-100 hover:bg-opacity-100 transition-colors group ">
+          <div class="flex flex-col gap-24 ">
+            <div>
+              <p class="mb-12 font-mono text-p3 uppercase font-extrabold tracking-[0.16em] text-neutral-1300">
+                Standard
+              </p>
+              <p class="ui-text-p1 ui-text-p1 text-neutral-800">
+                Roll-out into production.
+              </p>
+            </div>
+            <div class="flex items-end gap-8 ">
+              <p class="ui-text-title font-medium tracking-tight leading-none text-neutral-1300">
+                $29
+              </p>
+              <div class="text-neutral-1300">
+                <p class="ui-text-p3 font-medium"
+                   style="color: currentcolor;"
+                >
+                  /month
+                </p>
+                <p class="ui-text-p2 font-bold text-gui-blue-default-dark -mt-6">
+                  + consumption
+                </p>
+              </div>
+            </div>
+            <div class="group">
+              <a href="#"
+                 class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 text-center ui-btn bg-neutral-1300 text-neutral-000 hover:text-neutral-000 px-24 !py-12 "
+                 style="--featured-link-icon-size: var(--fs-p2);"
+              >
+                Get started
+                <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
+                     style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
+                >
+                  <use xlink:href="#sprite-icon-gui-link-arrow">
+                  </use>
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div class="flex-1 flex flex-col gap-24">
+            <div class="flex flex-col gap-12">
+              <p class="text-neutral-800 font-mono uppercase text-overline2 tracking-[0.16em]">
+                Capacity
+              </p>
+              <div class="flex flex-col gap-4">
+                <div class="flex gap-8 items-start">
+                  <div class="flex-1 ui-text-p2 font-medium text-neutral-1000">
+                    10k concurrent channels
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <div class="flex-1 ui-text-p2 font-medium text-neutral-1000">
+                    10k concurrent connections
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <div class="flex-1 ui-text-p2 font-medium text-neutral-1000">
+                    2.5k messages/second
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="flex flex-col gap-12">
+              <p class="text-neutral-800 font-mono uppercase text-overline2 tracking-[0.16em]">
+                Includes
+              </p>
+              <div class="flex flex-col gap-4">
+                <div class="flex gap-8 items-start">
+                  <svg class="text-blue-200 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-blue-600);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-1000">
+                    1 day email support SLA
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <svg class="text-blue-200 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-blue-600);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-1000">
+                    Uptime SLO
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center h-40">
+                <div class="hidden sm:group-hover:hidden leading-6 font-extralight text-p3 text-neutral-500">
+                  •••
+                </div>
+                <a href="#"
+                   class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 sm:hidden group-hover:block font-medium ui-text-p3 text-neutral-800 hover:text-neutral-1300 transition-colors"
+                   style="--featured-link-icon-size: var(--fs-p2);"
+                >
+                  See all features
+                  <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
+                       style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-link-arrow">
+                    </use>
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-1 p-1 bg-gradient-to-b from-neutral-200 to-neutral-200 rounded-2xl min-w-[272px]">
+        <div class="flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl bg-neutral-000 bg-opacity-25 hover:bg-neutral-100 hover:bg-opacity-100 transition-colors group ">
+          <div class="flex flex-col gap-24 ">
+            <div>
+              <p class="mb-12 font-mono text-p3 uppercase font-extrabold tracking-[0.16em] text-neutral-1300">
+                Pro
+              </p>
+              <p class="ui-text-p1 ui-text-p1 text-neutral-800">
+                Scale with confidence.
+              </p>
+            </div>
+            <div class="flex items-end gap-8 ">
+              <p class="ui-text-title font-medium tracking-tight leading-none text-neutral-1300">
+                $399
+              </p>
+              <div class="text-neutral-1300">
+                <p class="ui-text-p3 font-medium"
+                   style="color: currentcolor;"
+                >
+                  /month
+                </p>
+                <p class="ui-text-p2 font-bold text-gui-blue-default-dark -mt-6">
+                  + consumption
+                </p>
+              </div>
+            </div>
+            <div class="group">
+              <a href="#"
+                 class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 text-center ui-btn bg-neutral-1300 text-neutral-000 hover:text-neutral-000 px-24 !py-12 "
+                 style="--featured-link-icon-size: var(--fs-p2);"
+              >
+                Get started
+                <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
+                     style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
+                >
+                  <use xlink:href="#sprite-icon-gui-link-arrow">
+                  </use>
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div class="flex-1 flex flex-col gap-24">
+            <div class="flex flex-col gap-12">
+              <p class="text-neutral-800 font-mono uppercase text-overline2 tracking-[0.16em]">
+                Capacity
+              </p>
+              <div class="flex flex-col gap-4">
+                <div class="flex gap-8 items-start">
+                  <div class="flex-1 ui-text-p2 font-medium text-neutral-1000">
+                    50k concurrent channels
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <div class="flex-1 ui-text-p2 font-medium text-neutral-1000">
+                    50k concurrent connections
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <div class="flex-1 ui-text-p2 font-medium text-neutral-1000">
+                    10k messages/second
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="flex flex-col gap-12">
+              <p class="text-neutral-800 font-mono uppercase text-overline2 tracking-[0.16em]">
+                Includes
+              </p>
+              <div class="flex flex-col gap-4">
+                <div class="flex gap-8 items-start">
+                  <svg class="text-blue-200 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-blue-600);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-1000">
+                    4 hour email support SLA
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <svg class="text-blue-200 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-blue-600);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-1000">
+                    Datadog (lite)
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <svg class="text-blue-200 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-blue-600);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-1000">
+                    Uptime SLO
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center h-40">
+                <div class="hidden sm:group-hover:hidden leading-6 font-extralight text-p3 text-neutral-500">
+                  •••
+                </div>
+                <a href="#"
+                   class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 sm:hidden group-hover:block font-medium ui-text-p3 text-neutral-800 hover:text-neutral-1300 transition-colors"
+                   style="--featured-link-icon-size: var(--fs-p2);"
+                >
+                  See all features
+                  <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
+                       style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-link-arrow">
+                    </use>
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-1 p-1 bg-gradient-to-b from-neutral-200 to-neutral-200 rounded-2xl min-w-[272px]">
+        <div class="flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl bg-neutral-000 bg-opacity-25 hover:bg-neutral-100 hover:bg-opacity-100 transition-colors group ">
+          <div class="flex flex-col gap-24 ">
+            <div>
+              <p class="mb-12 font-mono text-p3 uppercase font-extrabold tracking-[0.16em] text-orange-600">
+                Enterprise
+              </p>
+              <p class="ui-text-p1 ui-text-p1 text-neutral-800">
+                Deliver without limits.
+              </p>
+            </div>
+            <div class="flex items-end gap-8 ">
+              <p class="ui-text-title font-medium tracking-tight leading-none text-neutral-1300">
+                Custom
+              </p>
+              <div class="text-neutral-1300">
+              </div>
+            </div>
+            <div class="group">
+              <a href="#"
+                 class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 text-center ui-btn bg-neutral-1300 text-neutral-000 hover:text-neutral-000 px-24 !py-12 ui-btn-alt text-white"
+                 style="--featured-link-icon-size: var(--fs-p2);"
+              >
+                Contact us
+                <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
+                     style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
+                >
+                  <use xlink:href="#sprite-icon-gui-link-arrow">
+                  </use>
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div class="flex-1 flex flex-col gap-24">
+            <div class="flex flex-col gap-12">
+              <p class="text-neutral-800 font-mono uppercase text-overline2 tracking-[0.16em]">
+                Capacity
+              </p>
+              <div class="flex flex-col gap-4">
+                <div class="flex gap-8 items-start">
+                  <div class="flex-1 ui-text-p2 font-medium text-neutral-1000">
+                    Unlimited concurrent channels
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <div class="flex-1 ui-text-p2 font-medium text-neutral-1000">
+                    Unlimited concurrent connections
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <div class="flex-1 ui-text-p2 font-medium text-neutral-1000">
+                    Unlimited messages/second
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="flex flex-col gap-12">
+              <p class="text-neutral-800 font-mono uppercase text-overline2 tracking-[0.16em]">
+                Includes
+              </p>
+              <div class="flex flex-col gap-4">
+                <div class="flex gap-8 items-start">
+                  <svg class="text-orange-200 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-orange-600);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-1000">
+                    24/7 mission critical support
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <svg class="text-orange-200 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-orange-600);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-1000">
+                    99.999% uptime SLAs
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <svg class="text-orange-200 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-orange-600);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-1000">
+                    Committed use discounts
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <svg class="text-orange-200 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-orange-600);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-1000">
+                    Datadog
+                  </div>
+                </div>
+                <div class="flex gap-8 items-start">
+                  <svg class="text-orange-200 mt-2"
+                       style="width: 16px; height: 16px; --ui-icon-secondary-color: var(--color-orange-600);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-check-circled-fill">
+                    </use>
+                  </svg>
+                  <div class="flex-1 ui-text-p3 font-medium text-neutral-1000">
+                    CNAME, SSO, &amp; more
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center h-40">
+                <div class="hidden sm:group-hover:hidden leading-6 font-extralight text-p3 text-neutral-500">
+                  •••
+                </div>
+                <a href="#"
+                   class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 sm:hidden group-hover:block font-medium ui-text-p3 text-neutral-800 hover:text-neutral-1300 transition-colors"
+                   style="--featured-link-icon-size: var(--fs-p2);"
+                >
+                  See all features
+                  <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
+                       style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
+                  >
+                    <use xlink:href="#sprite-icon-gui-link-arrow">
+                    </use>
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/core/Pricing/data.tsx b/src/core/Pricing/data.tsx
new file mode 100644
index 000000000..76ad1236f
--- /dev/null
+++ b/src/core/Pricing/data.tsx
@@ -0,0 +1,269 @@
+import React from "react";
+import { PricingDataFeature } from "./types";
+
+export const planData: PricingDataFeature[] = [
+  {
+    title: {
+      content: "Free",
+      className: "font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",
+      color: "text-neutral-700",
+    },
+    description: {
+      content: "Build a proof of concept.",
+      className: "ui-text-p1",
+      color: "text-neutral-500",
+    },
+    price: { amount: 0 },
+    cta: { text: "Start for free", url: "#" },
+    sections: [
+      {
+        title: "Capacity",
+        items: ["200 concurrent channels", "200 concurrent connections"],
+      },
+      {
+        title: "Includes",
+        items: ["Community & email support (best effort)", "No commitment"],
+        listItemColors: {
+          foreground: "text-neutral-600",
+          background: "text-neutral-1000",
+        },
+        cta: {
+          text: "See all features",
+          url: "#",
+        },
+      },
+    ],
+  },
+  {
+    title: {
+      content: "Standard",
+      className: "font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",
+      color: "text-neutral-000",
+    },
+    description: {
+      content: "Roll-out into production.",
+      className: "ui-text-p1",
+      color: "text-neutral-500",
+    },
+    price: {
+      amount: 29,
+      content: (
+        <>
+          <p
+            className="ui-text-p3 font-medium"
+            style={{ color: "currentColor" }}
+          >
+            /month
+          </p>
+          <p className="ui-text-p2 font-bold text-gui-blue-default-dark -mt-6">
+            + consumption
+          </p>
+        </>
+      ),
+    },
+    cta: { text: "Get started", url: "#" },
+    sections: [
+      {
+        title: "Capacity",
+        items: [
+          "10k concurrent channels",
+          "10k concurrent connections",
+          "2.5k messages/second",
+        ],
+      },
+      {
+        title: "Includes",
+        items: ["1 day email support SLA", "Uptime SLO"],
+        listItemColors: {
+          foreground: "text-blue-400",
+          background: "text-blue-800",
+        },
+        cta: {
+          text: "See all features",
+          url: "#",
+        },
+      },
+    ],
+  },
+  {
+    title: {
+      content: "Pro",
+      className: "font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",
+      color: "text-neutral-000",
+    },
+    description: {
+      content: "Scale with confidence.",
+      className: "ui-text-p1",
+      color: "text-neutral-500",
+    },
+    price: {
+      amount: 399,
+      content: (
+        <>
+          <p
+            className="ui-text-p3 font-medium"
+            style={{ color: "currentColor" }}
+          >
+            /month
+          </p>
+          <p className="ui-text-p2 font-bold text-gui-blue-default-dark -mt-6">
+            + consumption
+          </p>
+        </>
+      ),
+    },
+    cta: { text: "Get started", url: "#" },
+    sections: [
+      {
+        title: "Capacity",
+        items: [
+          "50k concurrent channels",
+          "50k concurrent connections",
+          "10k messages/second",
+        ],
+      },
+      {
+        title: "Includes",
+        items: ["4 hour email support SLA", "Datadog (lite)", "Uptime SLO"],
+        listItemColors: {
+          foreground: "text-blue-400",
+          background: "text-blue-800",
+        },
+        cta: {
+          text: "See all features",
+          url: "#",
+        },
+      },
+    ],
+  },
+
+  {
+    title: {
+      content: "Enterprise",
+      className: "font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",
+      color: "text-orange-600",
+    },
+    description: {
+      content: "Deliver without limits.",
+      className: "ui-text-p1",
+      color: "text-neutral-500",
+    },
+    price: { amount: "Custom" },
+    cta: { text: "Contact us", url: "#", className: "ui-btn-alt text-white" },
+    sections: [
+      {
+        title: "Capacity",
+        items: [
+          "Unlimited concurrent channels",
+          "Unlimited concurrent connections",
+          "Unlimited messages/second",
+        ],
+      },
+      {
+        title: "Includes",
+        items: [
+          "24/7 mission critical support",
+          "99.999% uptime SLAs",
+          "Committed use discounts",
+          "Datadog",
+          "CNAME, SSO, & more",
+        ],
+        listItemColors: {
+          foreground: "text-orange-600",
+          background: "text-orange-1000",
+        },
+        cta: {
+          text: "See all features",
+          url: "#",
+        },
+      },
+    ],
+  },
+];
+
+export const consumptionData: PricingDataFeature[] = [
+  {
+    title: {
+      content: "Messages",
+      className: "ui-text-h3",
+      color: "text-neutral-000",
+    },
+    description: {
+      content:
+        "Messages contain the data that a client is communicating, such as the contents of a chat message.",
+      className: "ui-text-p3",
+      color: "text-neutral-700",
+    },
+    price: { amount: 2.5, content: "per million" },
+    sections: [
+      {
+        title: "Volume discounts",
+        items: [
+          ["Consumption", "$/million msgs"],
+          ["First 50 million msgs", "$2.50"],
+          ["Next 450 million msgs", "$2.25"],
+          ["Next 4.5 billion msgs", "$1.95"],
+          ["Next 15 billion msgs", "$1.65"],
+          ["Next 30 billion msgs", "$1.40"],
+          ["Over 50 billion msgs", "$1.25"],
+        ],
+      },
+    ],
+  },
+  {
+    title: {
+      content: "Channels",
+      className: "ui-text-h3",
+      color: "text-neutral-000",
+    },
+    description: {
+      content:
+        "Clients publish and receive messages on channels (also know as topics). We only charge for active channels.",
+      className: "ui-text-p3",
+      color: "text-neutral-700",
+    },
+    price: { amount: 1, content: "per million mins" },
+    sections: [
+      {
+        title: "Volume discounts",
+        items: [
+          ["Consumption", "$/million msgs"],
+          ["First 10 million msgs", "$1.00"],
+          ["Next 90 million msgs", "$0.95"],
+          ["Next 900 million msgs", "$0.85"],
+          ["Next 4 billion msgs", "$0.75"],
+          ["Next 10 billion msgs", "$0.65"],
+          ["Over 15 billion msgs", "$0.60"],
+        ],
+      },
+    ],
+  },
+  {
+    title: {
+      content: "Connections",
+      className: "ui-text-h3",
+      color: "text-neutral-000",
+    },
+    description: {
+      content:
+        "Clients establish and maintain a connection to the Ably service, typically over WebSockets.  We only charge for active connections.",
+      className: "ui-text-p3",
+      color: "text-neutral-700",
+    },
+    price: { amount: 1, content: "per million mins" },
+    sections: [
+      {
+        title: "Volume discounts",
+        items: [
+          ["Consumption", "$/million msgs"],
+          ["First 10 million msgs", "$1.00"],
+          ["Next 90 million msgs", "$0.95"],
+          ["Next 900 million msgs", "$0.85"],
+          ["Next 4 billion msgs", "$0.75"],
+          ["Next 10 billion msgs", "$0.65"],
+          ["Over 15 billion msgs", "$0.60"],
+        ],
+      },
+    ],
+  },
+];
diff --git a/src/core/Pricing/types.ts b/src/core/Pricing/types.ts
new file mode 100644
index 000000000..c0f44185d
--- /dev/null
+++ b/src/core/Pricing/types.ts
@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+import { ColorClass } from "../styles/colors/types";
+
+type PricingDataHeader = {
+  content: string;
+  className?: string;
+  color?: ColorClass;
+};
+type PricingDataFeatureCta = { text: string; url: string; className?: string };
+
+export type PricingDataFeature = {
+  title: PricingDataHeader;
+  description: PricingDataHeader;
+  price: { amount: number | string; content?: ReactNode };
+  cta?: PricingDataFeatureCta;
+  sections: {
+    title: string;
+    items: string[] | string[][];
+    listItemColors?: { foreground: ColorClass; background: ColorClass };
+    cta?: PricingDataFeatureCta;
+  }[];
+};
diff --git a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
index 0fc3156d3..24770ab7a 100644
--- a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
+++ b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
@@ -181,7 +181,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
        style="--featured-link-icon-size: var(--fs-p2);"
     >
       View docs
-      <svg class="text-orange-600 align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+      <svg class="text-orange-600 align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
            style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
       >
         <use xlink:href="#sprite-icon-gui-link-arrow">
@@ -235,7 +235,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
        style="--featured-link-icon-size: var(--fs-p2);"
     >
       Explore
-      <svg class="text-orange-600 align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+      <svg class="text-orange-600 align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
            style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
       >
         <use xlink:href="#sprite-icon-gui-link-arrow">
@@ -289,7 +289,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
        style="--featured-link-icon-size: var(--fs-p2);"
     >
       Explore
-      <svg class="text-orange-600 align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+      <svg class="text-orange-600 align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover:left-0"
            style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
       >
         <use xlink:href="#sprite-icon-gui-link-arrow">
diff --git a/src/core/styles.components.css b/src/core/styles.components.css
index 1eb2d6c83..3b880f25d 100644
--- a/src/core/styles.components.css
+++ b/src/core/styles.components.css
@@ -39,4 +39,8 @@
   .ui-divider-spacing {
     @apply my-20 sm:my-24 md:my-32;
   }
+
+  .ui-container-padding {
+    @apply px-24 py-40 sm:px-40 sm:py-48 md:p-64;
+  }
 }
diff --git a/src/core/styles/colors/types.ts b/src/core/styles/colors/types.ts
index b994c5302..fa36be440 100644
--- a/src/core/styles/colors/types.ts
+++ b/src/core/styles/colors/types.ts
@@ -5,9 +5,19 @@ export type ColorName =
   | (typeof guiColors)[number]
   | (typeof aliasedColors)[number];
 
-type ColorClassPrefixes = "bg" | "text";
+type ColorClassVariants =
+  | ""
+  | "hover:"
+  | "focus:"
+  | "group-hover:"
+  | "group-focus:";
 
-export type ColorClass = `${ColorClassPrefixes}-${ColorName}`;
+type ColorClassPrefixes = "bg" | "text" | "from" | "to";
+
+export type Theme = "light" | "dark";
+
+export type ColorClass =
+  `${ColorClassVariants}${ColorClassPrefixes}-${ColorName}`;
 
 const neutralColors = [
   "neutral-000",
diff --git a/src/core/styles/colors/utils.ts b/src/core/styles/colors/utils.ts
new file mode 100644
index 000000000..3206d5fba
--- /dev/null
+++ b/src/core/styles/colors/utils.ts
@@ -0,0 +1,49 @@
+import { ColorClass, colorNames, Theme } from "./types";
+
+export const convertTailwindClassToVar = (className: string) =>
+  className.replace(/(text|bg|from|to)-([a-z0-9-]+)/gi, "var(--color-$2)");
+
+const calculatePaletteRange = (
+  acc: { max: number; min: number },
+  color: string,
+) => {
+  const splitColor = color.split("-");
+  const numericalColor = Number(splitColor[splitColor.length - 1]);
+
+  return {
+    min: acc.min === -1 || numericalColor < acc.min ? numericalColor : acc.min,
+    max: acc.max === -1 || numericalColor > acc.max ? numericalColor : acc.max,
+  };
+};
+
+export const determineThemeColor = (
+  baseTheme: Theme,
+  currentTheme: Theme,
+  color: ColorClass,
+) => {
+  if (baseTheme === currentTheme) {
+    return color;
+  } else {
+    const splitColor = color.split("-");
+
+    if (splitColor.length === 3) {
+      const [property, palette, variant] = splitColor;
+
+      const paletteColors = Object.keys(colorNames).includes(palette)
+        ? colorNames[palette as keyof typeof colorNames]
+        : colorNames.secondary;
+
+      const { min, max } = paletteColors.reduce(
+        (acc, color) => calculatePaletteRange(acc, color),
+        {
+          min: -1,
+          max: -1,
+        },
+      );
+
+      return `${property}-${palette}-${(max + min - Number(variant)).toString().padStart(3, "0")}` as ColorClass;
+    } else {
+      return color;
+    }
+  }
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index c8483fe4c..957698c1e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,6 +8,11 @@ module.exports = {
     "w-1/6",
     { pattern: /^hljs.*/ },
     { pattern: /^ui-.*/ },
+    {
+      pattern:
+        /^(text|bg|from|to)-(neutral|orange|yellow|green|blue|violet|pink)-[\d]{1,2}00.*/,
+      variants: ["hover", "focus"],
+    },
   ],
   theme: {
     screens: {
@@ -52,6 +57,7 @@ module.exports = {
       code2: ["var(--fs-code2)", "var(--lh-dense)"],
     },
     colors: {
+      "neutral-000": "var(--color-neutral-000)",
       "neutral-100": "var(--color-neutral-100)",
       "neutral-200": "var(--color-neutral-200)",
       "neutral-300": "var(--color-neutral-300)",
@@ -284,20 +290,15 @@ module.exports = {
       "widen-0.15": "var(--ls-widen-0_15)",
       "widen-0.16": "var(--ls-widen-0_16)",
     },
-    borderRadius: {
-      none: "0",
-      sm: "0.125rem",
-      md: "0.1875rem",
-      lg: "0.5rem",
-      xl: "0.75rem",
-      full: "9999px",
-      DEFAULT: "0.375rem",
-    },
     extend: {
       backgroundImage: {
         "gradient-active-orange": "var(--gradient-active-orange)",
         "gradient-hot-pink": "var(--gradient-hot-pink)",
       },
+      borderRadius: {
+        md: "0.1875rem",
+        DEFAULT: "0.375rem",
+      },
       transitionProperty: {
         input: "background-color, box-shadow",
         filter: "filter",
@@ -349,5 +350,5 @@ module.exports = {
   corePlugins: {
     preflight: false,
   },
-  plugins: [],
+  plugins: [require("@tailwindcss/container-queries")],
 };
diff --git a/yarn.lock b/yarn.lock
index eeffecd28..da996daa8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2064,6 +2064,11 @@
   dependencies:
     defer-to-connect "^2.0.0"
 
+"@tailwindcss/container-queries@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/container-queries/-/container-queries-0.1.1.tgz#9a759ce2cb8736a4c6a0cb93aeb740573a731974"
+  integrity sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==
+
 "@testing-library/dom@10.4.0":
   version "10.4.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.4.0.tgz#82a9d9462f11d240ecadbf406607c6ceeeff43a8"