From bfe0d005dfb037f8d540b1dc44762d6bbbe720de Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Fri, 6 Sep 2024 15:21:41 +0100
Subject: [PATCH 1/6] feat: add additional className and onClick props to
 ProductTile

---
 src/core/ProductTile.tsx                     | 13 +++++++++++--
 src/core/ProductTile/ProductTile.stories.tsx | 19 +++++++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/core/ProductTile.tsx b/src/core/ProductTile.tsx
index 05ff431c7..e0653de03 100644
--- a/src/core/ProductTile.tsx
+++ b/src/core/ProductTile.tsx
@@ -7,14 +7,23 @@ type ProductTileProps = {
   name: ProductName;
   selected?: boolean;
   currentPage?: boolean;
+  className?: string;
+  onClick?: () => void;
 };
 
-const ProductTile = ({ name, selected, currentPage }: ProductTileProps) => {
+const ProductTile = ({
+  name,
+  selected,
+  currentPage,
+  className,
+  onClick,
+}: ProductTileProps) => {
   const { icon, label, description, link, unavailable } = products[name] ?? {};
 
   return (
     <div
-      className={`rounded-lg p-12 flex flex-col gap-8 transition-colors ${selected ? "bg-neutral-300" : "bg-neutral-1200 hover:bg-neutral-1100"}`}
+      className={`rounded-lg p-12 flex flex-col gap-8 transition-colors ${selected ? "bg-neutral-300" : "bg-neutral-1200 hover:bg-neutral-1100"} ${className ?? ""}`}
+      onClick={onClick}
     >
       <div className="flex gap-12">
         {icon ? <Icon name={icon} size="48" /> : null}
diff --git a/src/core/ProductTile/ProductTile.stories.tsx b/src/core/ProductTile/ProductTile.stories.tsx
index 265fbbe49..cdcb1cbf1 100644
--- a/src/core/ProductTile/ProductTile.stories.tsx
+++ b/src/core/ProductTile/ProductTile.stories.tsx
@@ -47,3 +47,22 @@ export const SelectedProductTiles = {
     },
   },
 };
+
+export const ProductTileWithOverriddenStylesAndClick = {
+  render: () => (
+    <ProductTile
+      key="pubsub"
+      name="pubsub"
+      className="bg-pink-800 hover:bg-pink-600 cursor-pointer"
+      onClick={() => alert("yo congrats on the click")}
+    />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "`className` is overridden to change the background color and cursor. `onClick` is also overridden to show an alert on click.",
+      },
+    },
+  },
+};

From 3d27f8538e0146f217b057b85fd3a3c875fae6f7 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Fri, 6 Sep 2024 15:42:00 +0100
Subject: [PATCH 2/6] feat: add line support to Code component

---
 src/core/Code.tsx              | 19 ++++++++++++++++++-
 src/core/Code/Code.stories.tsx | 14 ++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/core/Code.tsx b/src/core/Code.tsx
index ea4738c17..1192c2881 100644
--- a/src/core/Code.tsx
+++ b/src/core/Code.tsx
@@ -14,6 +14,8 @@ type CodeProps = {
   textSize?: string;
   padding?: string;
   additionalCSS?: string;
+  showLines?: boolean;
+  lineCSS?: string;
 };
 
 const Code = ({
@@ -22,15 +24,30 @@ const Code = ({
   textSize = "ui-text-code",
   padding = "p-32",
   additionalCSS = "",
+  showLines,
+  lineCSS,
 }: CodeProps) => {
   const HTMLraw = highlightSnippet(language, `${snippet}`.trim()) ?? "";
   const className = `language-${language} ${textSize}`;
+  const lineCount = snippet.split(/\r\n|\r|\n/).length;
 
   return (
     <div
-      className={`hljs overflow-auto ${padding} ${additionalCSS}`}
+      className={`hljs overflow-auto flex ${padding} ${additionalCSS}`}
       data-id="code"
     >
+      {showLines ? (
+        <div>
+          {[...Array(lineCount)].map((_, i) => (
+            <p
+              className={`mr-24 font-mono text-neutral-800 ${lineCSS ?? ""}`}
+              key={i}
+            >
+              {i + 1}
+            </p>
+          ))}
+        </div>
+      ) : null}
       <pre lang={language}>
         <code
           className={className}
diff --git a/src/core/Code/Code.stories.tsx b/src/core/Code/Code.stories.tsx
index b5904e0ba..f7c210abf 100644
--- a/src/core/Code/Code.stories.tsx
+++ b/src/core/Code/Code.stories.tsx
@@ -69,3 +69,17 @@ val exampleConstraints = DefaultResolutionConstraints(
 )`,
   },
 };
+
+export const CodeWithLines = {
+  args: {
+    showLines: true,
+    language: "javascript",
+    snippet: `var ably = new Ably.Realtime('1WChTA.mc0Biw:kNfiYG4KiPgmHHgH');
+var channel = ably.channels.get('web-pal');
+    
+// Subscribe to messages on channel
+channel.subscribe('greeting', function(message) {
+  alert(message.data);
+});`,
+  },
+};

From 4bf6ac37d941658476cacc33504e40651f248cda Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Fri, 6 Sep 2024 16:51:41 +0100
Subject: [PATCH 3/6] chore: sort Storybook categories by importance

---
 .storybook/preview.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 8bd2978d4..81d64a388 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -38,6 +38,12 @@ const preview = {
       theme,
       container: docsContainer,
     },
+    options: {
+      storySort: {
+        method: "alphabetical",
+        order: ["CSS", "JS Components", "Brand"],
+      },
+    },
   },
   loaders: [mswLoader],
   tags: ["autodocs"],

From f6fbf81c7d9b277f8e4f37434a08db4b5b657707 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Fri, 6 Sep 2024 16:52:16 +0100
Subject: [PATCH 4/6] fix: allow bg- tailwind classes in icon secondaryColor
 prop

---
 src/core/Icon.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/Icon.tsx b/src/core/Icon.tsx
index 4a46248e4..ca178de34 100644
--- a/src/core/Icon.tsx
+++ b/src/core/Icon.tsx
@@ -10,7 +10,7 @@ type IconProps = {
 };
 
 const convertTailwindClassToVar = (className: string) =>
-  className.replace(/text-([a-z0-9-]+)/gi, "var(--color-$1)");
+  className.replace(/(text|bg)-([a-z0-9-]+)/gi, "var(--color-$2)");
 
 const Icon = ({
   name,

From 4905258b50da7663250b2ec2e68dc44f06db90e3 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Fri, 6 Sep 2024 16:52:34 +0100
Subject: [PATCH 5/6] feat: port Colors storybook page to stories

---
 src/core/styles/Colors.stories.tsx | 189 +++++++++++++++++++++++++++++
 src/pages/Colour.mdx               |  23 ----
 src/pages/utils.ts                 |  49 --------
 3 files changed, 189 insertions(+), 72 deletions(-)
 create mode 100644 src/core/styles/Colors.stories.tsx
 delete mode 100644 src/pages/Colour.mdx

diff --git a/src/core/styles/Colors.stories.tsx b/src/core/styles/Colors.stories.tsx
new file mode 100644
index 000000000..f4d0f24d0
--- /dev/null
+++ b/src/core/styles/Colors.stories.tsx
@@ -0,0 +1,189 @@
+import React from "react";
+
+export default {
+  title: "CSS/Colors",
+};
+
+const neutralColors = [
+  "bg-neutral-000",
+  "bg-neutral-100",
+  "bg-neutral-200",
+  "bg-neutral-300",
+  "bg-neutral-400",
+  "bg-neutral-500",
+  "bg-neutral-600",
+  "bg-neutral-700",
+  "bg-neutral-800",
+  "bg-neutral-900",
+  "bg-neutral-1000",
+  "bg-neutral-1100",
+  "bg-neutral-1200",
+  "bg-neutral-1300",
+];
+
+const orangeColors = [
+  "bg-orange-100",
+  "bg-orange-200",
+  "bg-orange-300",
+  "bg-orange-400",
+  "bg-orange-500",
+  "bg-orange-600",
+  "bg-orange-700",
+  "bg-orange-800",
+  "bg-orange-900",
+  "bg-orange-1000",
+  "bg-orange-1100",
+];
+
+const secondaryColors = [
+  "bg-yellow-100",
+  "bg-yellow-200",
+  "bg-yellow-300",
+  "bg-yellow-400",
+  "bg-yellow-500",
+  "bg-yellow-600",
+  "bg-yellow-700",
+  "bg-yellow-800",
+  "bg-yellow-900",
+  "bg-green-100",
+  "bg-green-200",
+  "bg-green-300",
+  "bg-green-400",
+  "bg-green-500",
+  "bg-green-600",
+  "bg-green-700",
+  "bg-green-800",
+  "bg-green-900",
+  "bg-blue-100",
+  "bg-blue-200",
+  "bg-blue-300",
+  "bg-blue-400",
+  "bg-blue-500",
+  "bg-blue-600",
+  "bg-blue-700",
+  "bg-blue-800",
+  "bg-blue-900",
+  "bg-violet-100",
+  "bg-violet-200",
+  "bg-violet-300",
+  "bg-violet-400",
+  "bg-violet-500",
+  "bg-violet-600",
+  "bg-violet-700",
+  "bg-violet-800",
+  "bg-violet-900",
+  "bg-pink-100",
+  "bg-pink-200",
+  "bg-pink-300",
+  "bg-pink-400",
+  "bg-pink-500",
+  "bg-pink-600",
+  "bg-pink-700",
+  "bg-pink-800",
+  "bg-pink-900",
+];
+
+const guiColors = [
+  "bg-gui-blue-default-light",
+  "bg-gui-blue-hover-light",
+  "bg-gui-blue-active-light",
+  "bg-gui-blue-default-dark",
+  "bg-gui-blue-hover-dark",
+  "bg-gui-blue-active-dark",
+  "bg-gui-blue-focus",
+  "bg-gui-unavailable",
+  "bg-gui-success-green",
+  "bg-gui-error-red",
+  "bg-gui-focus",
+  "bg-gui-focus-outline",
+  "bg-gui-visited",
+];
+
+const colorSet = (colors) =>
+  colors.map((color) => (
+    <div
+      key={color}
+      className="rounded-lg w-128 ui-shadow-lg-soft flex flex-col"
+    >
+      <div className={`${color} h-[100px] rounded-t-lg`} />
+      <div className="p-12 flex flex-col flex-1">
+        <p className="ui-text-p2 font-semibold flex-1">
+          {color.replace("bg-", "")}
+        </p>
+        <p className="ui-text-p3 font-normal text-neutral-800">
+          {varToValues(color)[0]}
+        </p>
+        <p className="ui-text-p3 text-[12px] font-normal text-neutral-800">
+          {varToValues(color)[1]}
+        </p>
+      </div>
+    </div>
+  ));
+
+const varToValues = (color: string) => {
+  // Convert the computed color value in the page to a hex string
+  const hex = getComputedStyle(document.body).getPropertyValue(
+    color.replace("bg-", "--color-"),
+  );
+
+  // Parse the hex string into its RGB components
+  const bigint = parseInt(hex.replace(/^#/, ""), 16);
+  const r = (bigint >> 16) & 255;
+  const g = (bigint >> 8) & 255;
+  const b = bigint & 255;
+
+  return [hex, `rgb(${r}, ${g}, ${b})`];
+};
+
+export const NeutralColors = {
+  render: () => (
+    <div className="flex flex-wrap gap-24">{colorSet(neutralColors)}</div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Example usage: `.text-neutral-1000`, `.bg-neutral-1000`",
+      },
+    },
+  },
+};
+
+export const OrangeColors = {
+  render: () => (
+    <div className="flex flex-wrap gap-24">{colorSet(orangeColors)}</div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Example usage: `.text-orange-600`, `.bg-orange-600`",
+      },
+    },
+  },
+};
+
+export const SecondaryColors = {
+  render: () => (
+    <div className="flex flex-wrap gap-24">{colorSet(secondaryColors)}</div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Example usage: `.text-green-1000`, `.bg-green-1000`",
+      },
+    },
+  },
+};
+
+export const GUIColors = {
+  render: () => (
+    <div className="flex flex-wrap gap-24">{colorSet(guiColors)}</div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Example usage: `.text-gui-blue-default`, `.bg-gui-blue-default`",
+      },
+    },
+  },
+};
diff --git a/src/pages/Colour.mdx b/src/pages/Colour.mdx
deleted file mode 100644
index 68b40d36a..000000000
--- a/src/pages/Colour.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Fragment } from "react";
-import { Meta, Unstyled } from "@storybook/blocks";
-import { colours } from "./utils";
-
-<Meta title="Brand/Colour" />
-
-<Unstyled>
-  <h1 className="ui-text-h1 mb-32">Colour</h1>
-  {colours.map((category) => (
-    <Fragment key={category.name}>
-      <h3 className="ui-text-h2 mb-16">{category.name}</h3>
-      <ul className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-32 mb-40">
-        {category.colours.map(({ hex, name, bg }) => (
-          <li key={`${category.name}-${bg}`}>
-            <div className={`w-full h-64 mb-16 ${bg}`}></div>
-            <p className="ui-text-p1">{name}</p>
-            <p className="ui-text-p2">hex {hex}</p>
-          </li>
-        ))}
-      </ul>
-    </Fragment>
-  ))}
-</Unstyled>
diff --git a/src/pages/utils.ts b/src/pages/utils.ts
index 4d5f4962b..183b61f9a 100644
--- a/src/pages/utils.ts
+++ b/src/pages/utils.ts
@@ -1,52 +1,3 @@
-export const colours = [
-  {
-    name: "Primary",
-    colours: [
-      { bg: "bg-cool-black", name: "Cool Black", hex: "#03020D" },
-      { bg: "bg-active-orange", name: "Active Orange", hex: "#FF5416" },
-      { bg: "bg-white", name: "White", hex: "#FFFFFF" },
-    ],
-  },
-  {
-    name: "Secondary",
-    colours: [
-      { bg: "bg-electric-cyan", name: "Electric Cyan", hex: "#4AD4FF" },
-      { bg: "bg-zingy-green", name: "Zingy Green", hex: "#08FF13" },
-      { bg: "bg-bright-red", name: "Bright Red", hex: "#FE372B" },
-      { bg: "bg-jazzy-pink", name: "Jazzy Pink", hex: "#FF17D2" },
-    ],
-  },
-  {
-    name: "Neutrals",
-    colours: [
-      { bg: "bg-extra-light-grey", name: "Extra Light Grey", hex: "#F8FAFC" },
-      { bg: "bg-light-grey", name: "Light Grey", hex: "#F4F8FB" },
-      { bg: "bg-mid-grey", name: "Mid Grey", hex: "#C6CED9" },
-      { bg: "bg-dark-grey", name: "Dark Grey", hex: "#667085" },
-      { bg: "bg-charcoal-grey", name: "Charcoal Grey", hex: "#2B303B" },
-      { bg: "bg-neutral-500", name: "Neutral 500", hex: "#C6CED9" },
-      { bg: "bg-neutral-900", name: "Neutral 900", hex: "#39414E" },
-    ],
-  },
-  {
-    name: "GUI",
-    colours: [
-      { bg: "bg-gui-default", name: "Default (Light)", hex: "#006EDC" },
-      { bg: "bg-gui-hover", name: "Hover (Light)", hex: "#0862B9" },
-      { bg: "bg-gui-active", name: "Active (Light)", hex: "#074095" },
-      { bg: "bg-gui-default-dark", name: "Default (Dark)", hex: "#4DA6FF" },
-      { bg: "bg-gui-hover-dark", name: "Hover (Dark)", hex: "#2894FF" },
-      { bg: "bg-gui-active-dark", name: "Active (Dark)", hex: "#0080FF" },
-      { bg: "bg-gui-blue-visited", name: "Visited", hex: "#4887c2" },
-      { bg: "bg-gui-focus", name: "Focus", hex: "#80B9F2" },
-      { bg: "bg-gui-focus-outline", name: "Focus Outline", hex: "#80B9F2" },
-      { bg: "bg-gui-unavailable", name: "Unavailable", hex: "#a8a8a8" },
-      { bg: "bg-gui-success", name: "Success", hex: "#11CB24" },
-      { bg: "bg-gui-error", name: "Error", hex: "#FB0C0C" },
-    ],
-  },
-];
-
 export const formsHtml = `
 <div class="ui-checkbox-p1">
   <input

From 5d7a6c11265f649d642163804bc03336e32f33b5 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Fri, 6 Sep 2024 16:59:48 +0100
Subject: [PATCH 6/6] chore: update snapshots

---
 .../Code/__snapshots__/Code.stories.tsx.snap  |  106 +-
 .../ProductTile.stories.tsx.snap              |   48 +-
 .../__snapshots__/Colors.stories.tsx.snap     | 1266 +++++++++++++++++
 3 files changed, 1404 insertions(+), 16 deletions(-)
 create mode 100644 src/core/styles/__snapshots__/Colors.stories.tsx.snap

diff --git a/src/core/Code/__snapshots__/Code.stories.tsx.snap b/src/core/Code/__snapshots__/Code.stories.tsx.snap
index f0af95b8f..18b584745 100644
--- a/src/core/Code/__snapshots__/Code.stories.tsx.snap
+++ b/src/core/Code/__snapshots__/Code.stories.tsx.snap
@@ -1,7 +1,105 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`JS Components/Code CodeWithLines smoke-test 1`] = `
+<div class="hljs overflow-auto flex p-32 "
+     data-id="code"
+>
+  <div>
+    <p class="mr-24 font-mono text-neutral-800 ">
+      1
+    </p>
+    <p class="mr-24 font-mono text-neutral-800 ">
+      2
+    </p>
+    <p class="mr-24 font-mono text-neutral-800 ">
+      3
+    </p>
+    <p class="mr-24 font-mono text-neutral-800 ">
+      4
+    </p>
+    <p class="mr-24 font-mono text-neutral-800 ">
+      5
+    </p>
+    <p class="mr-24 font-mono text-neutral-800 ">
+      6
+    </p>
+    <p class="mr-24 font-mono text-neutral-800 ">
+      7
+    </p>
+  </div>
+  <pre lang="javascript">
+    <code class="language-javascript ui-text-code">
+      <span class="hljs-keyword">
+        var
+      </span>
+      ably =
+      <span class="hljs-keyword">
+        new
+      </span>
+      <span class="hljs-title class_">
+        Ably
+      </span>
+      .
+      <span class="hljs-title class_">
+        Realtime
+      </span>
+      (
+      <span class="hljs-string">
+        '1WChTA.mc0Biw:kNfiYG4KiPgmHHgH'
+      </span>
+      );
+      <span class="hljs-keyword">
+        var
+      </span>
+      channel = ably.
+      <span class="hljs-property">
+        channels
+      </span>
+      .
+      <span class="hljs-title function_">
+        get
+      </span>
+      (
+      <span class="hljs-string">
+        'web-pal'
+      </span>
+      );
+      <span class="hljs-comment">
+        // Subscribe to messages on channel
+      </span>
+      channel.
+      <span class="hljs-title function_">
+        subscribe
+      </span>
+      (
+      <span class="hljs-string">
+        'greeting'
+      </span>
+      ,
+      <span class="hljs-keyword">
+        function
+      </span>
+      (
+      <span class="hljs-params">
+        message
+      </span>
+      ) {
+      <span class="hljs-title function_">
+        alert
+      </span>
+      (message.
+      <span class="hljs-property">
+        data
+      </span>
+      );
+});
+    </code>
+  </pre>
+</div>
+`;
+
 exports[`JS Components/Code Java smoke-test 1`] = `
-<div class="hljs overflow-auto p-32 "
+<div class="hljs overflow-auto flex p-32 "
      data-id="code"
 >
   <pre lang="java">
@@ -82,7 +180,7 @@ channel.subscribe(
 `;
 
 exports[`JS Components/Code Javascript smoke-test 1`] = `
-<div class="hljs overflow-auto p-32 "
+<div class="hljs overflow-auto flex p-32 "
      data-id="code"
 >
   <pre lang="javascript">
@@ -157,7 +255,7 @@ exports[`JS Components/Code Javascript smoke-test 1`] = `
 `;
 
 exports[`JS Components/Code Kotlin smoke-test 1`] = `
-<div class="hljs overflow-auto p-32 "
+<div class="hljs overflow-auto flex p-32 "
      data-id="code"
 >
   <pre lang="kotlin">
@@ -212,7 +310,7 @@ exports[`JS Components/Code Kotlin smoke-test 1`] = `
 `;
 
 exports[`JS Components/Code Swift smoke-test 1`] = `
-<div class="hljs overflow-auto p-32 "
+<div class="hljs overflow-auto flex p-32 "
      data-id="code"
 >
   <pre lang="swift">
diff --git a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
index dd4d9212b..0fc3156d3 100644
--- a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
+++ b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
@@ -1,8 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`JS Components/Product Tile ProductTileWithOverriddenStylesAndClick smoke-test 1`] = `
+<div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 bg-pink-800 hover:bg-pink-600 cursor-pointer">
+  <div class="flex gap-12">
+    <svg class=" "
+         style="width: 48px; height: 48px;"
+    >
+      <use xlink:href="#sprite-icon-product-pubsub-encapsulated">
+      </use>
+    </svg>
+    <div class="flex flex-col justify-center ">
+      <p class="ui-text-p3 text-neutral-500 font-medium">
+        Ably
+      </p>
+      <p class="ui-text-p2 text-neutral-300 font-bold mt-[-3px]">
+        PubSub
+      </p>
+    </div>
+  </div>
+  <p class="ui-text-p3 text-neutral-700 font-medium leading-snug">
+    Low-level APIs to build any realtime experience
+  </p>
+</div>
+`;
+
 exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
 <div class="grid sm:grid-cols-3 gap-32">
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
     <div class="flex gap-12">
       <svg class=" "
            style="width: 48px; height: 48px;"
@@ -23,7 +47,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
       Low-level APIs to build any realtime experience
     </p>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
     <div class="flex gap-12">
       <svg class=" "
            style="width: 48px; height: 48px;"
@@ -44,7 +68,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
       Rapidly build chat features and roll-out at scale
     </p>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
     <div class="flex gap-12">
       <svg class=" "
            style="width: 48px; height: 48px;"
@@ -65,7 +89,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
       Create collaborative environments in a few lines of code
     </p>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
     <div class="flex gap-12">
       <svg class=" "
            style="width: 48px; height: 48px;"
@@ -86,7 +110,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
       Sync database changes with frontend clients
     </p>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
     <div class="flex gap-12">
       <svg class=" "
            style="width: 48px; height: 48px;"
@@ -107,7 +131,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
       Simple APIs to build realtime tracking applications
     </p>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
     <div class="flex gap-12">
       <div class="flex flex-row items-center gap-4 ">
         <p class="ui-text-p2 text-neutral-500 font-medium">
@@ -132,7 +156,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
 
 exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
 <div class="grid grid-cols-3 gap-32">
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-300">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-300 ">
     <div class="flex gap-12">
       <svg class=" "
            style="width: 48px; height: 48px;"
@@ -165,7 +189,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       </svg>
     </a>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
     <div class="flex gap-12">
       <svg class=" "
            style="width: 48px; height: 48px;"
@@ -186,7 +210,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       Rapidly build chat features and roll-out at scale
     </p>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-300">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-300 ">
     <div class="flex gap-12">
       <svg class=" "
            style="width: 48px; height: 48px;"
@@ -219,7 +243,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       </svg>
     </a>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
     <div class="flex gap-12">
       <svg class=" "
            style="width: 48px; height: 48px;"
@@ -240,7 +264,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       Sync database changes with frontend clients
     </p>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-300">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-300 ">
     <div class="flex gap-12">
       <svg class=" "
            style="width: 48px; height: 48px;"
@@ -273,7 +297,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       </svg>
     </a>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
     <div class="flex gap-12">
       <div class="flex flex-row items-center gap-4 ">
         <p class="ui-text-p2 text-neutral-500 font-medium">
diff --git a/src/core/styles/__snapshots__/Colors.stories.tsx.snap b/src/core/styles/__snapshots__/Colors.stories.tsx.snap
new file mode 100644
index 000000000..6037c64bf
--- /dev/null
+++ b/src/core/styles/__snapshots__/Colors.stories.tsx.snap
@@ -0,0 +1,1266 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSS/Colors GUIColors smoke-test 1`] = `
+<div class="flex flex-wrap gap-24">
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-gui-blue-default-light h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        gui-blue-default-light
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #006edc
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(0, 110, 220)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-gui-blue-hover-light h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        gui-blue-hover-light
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #0862b9
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(8, 98, 185)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-gui-blue-active-light h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        gui-blue-active-light
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #074095
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(7, 64, 149)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-gui-blue-default-dark h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        gui-blue-default-dark
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #4da6ff
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(77, 166, 255)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-gui-blue-hover-dark h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        gui-blue-hover-dark
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #2894ff
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(40, 148, 255)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-gui-blue-active-dark h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        gui-blue-active-dark
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #0080ff
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(0, 128, 255)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-gui-blue-focus h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        gui-blue-focus
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #80b9f2
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(128, 185, 242)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-gui-unavailable h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        gui-unavailable
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #a8a8a8
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(168, 168, 168)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-gui-success-green h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        gui-success-green
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #11cb24
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(17, 203, 36)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-gui-error-red h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        gui-error-red
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #fb0c0c
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(251, 12, 12)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-gui-focus h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        gui-focus
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #80b9f2
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(128, 185, 242)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-gui-focus-outline h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        gui-focus-outline
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #80b9f2
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(128, 185, 242)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-gui-visited h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        gui-visited
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #4887c2
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(72, 135, 194)
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CSS/Colors NeutralColors smoke-test 1`] = `
+<div class="flex flex-wrap gap-24">
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-neutral-000 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        neutral-000
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #ffffff
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(255, 255, 255)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-neutral-100 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        neutral-100
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #f8fafc
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(248, 250, 252)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-neutral-200 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        neutral-200
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #f4f8fb
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(244, 248, 251)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-neutral-300 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        neutral-300
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #edf1f7
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(237, 241, 247)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-neutral-400 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        neutral-400
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #e2e7ef
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(226, 231, 239)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-neutral-500 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        neutral-500
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #c6ced9
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(198, 206, 217)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-neutral-600 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        neutral-600
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #adb6c2
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(173, 182, 194)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-neutral-700 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        neutral-700
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #89929f
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(137, 146, 159)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-neutral-800 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        neutral-800
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #667085
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(102, 112, 133)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-neutral-900 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        neutral-900
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #39414e
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(57, 65, 78)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-neutral-1000 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        neutral-1000
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #2b303b
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(43, 48, 59)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-neutral-1100 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        neutral-1100
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #202531
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(32, 37, 49)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-neutral-1200 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        neutral-1200
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #141924
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(20, 25, 36)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-neutral-1300 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        neutral-1300
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #03020d
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(3, 2, 13)
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CSS/Colors OrangeColors smoke-test 1`] = `
+<div class="flex flex-wrap gap-24">
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-orange-100 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        orange-100
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #fff5f1
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(255, 245, 241)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-orange-200 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        orange-200
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #ffe3d8
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(255, 227, 216)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-orange-300 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        orange-300
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #ffc4ae
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(255, 196, 174)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-orange-400 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        orange-400
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #ff9c79
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(255, 156, 121)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-orange-500 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        orange-500
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #ff723f
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(255, 114, 63)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-orange-600 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        orange-600
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #ff5416
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(255, 84, 22)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-orange-700 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        orange-700
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #ff2739
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(255, 39, 57)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-orange-800 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        orange-800
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #e40000
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(228, 0, 0)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-orange-900 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        orange-900
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #b82202
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(184, 34, 2)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-orange-1000 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        orange-1000
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #751500
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(117, 21, 0)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-orange-1100 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        orange-1100
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #2a0b00
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(42, 11, 0)
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
+<div class="flex flex-wrap gap-24">
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-yellow-100 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        yellow-100
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #fffbef
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(255, 251, 239)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-yellow-200 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        yellow-200
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #fff0ba
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(255, 240, 186)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-yellow-300 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        yellow-300
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #ffe27c
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(255, 226, 124)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-yellow-400 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        yellow-400
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #ffd43d
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(255, 212, 61)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-yellow-500 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        yellow-500
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #f8c100
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(248, 193, 0)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-yellow-600 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        yellow-600
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #e8a700
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(232, 167, 0)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-yellow-700 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        yellow-700
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #ac8600
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(172, 134, 0)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-yellow-800 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        yellow-800
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #654f00
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(101, 79, 0)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-yellow-900 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        yellow-900
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #291c01
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(41, 28, 1)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-green-100 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        green-100
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #f1fff1
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(241, 255, 241)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-green-200 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        green-200
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #b8ffbb
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(184, 255, 187)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-green-300 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        green-300
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #80ff85
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(128, 255, 133)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-green-400 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        green-400
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #08ff13
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(8, 255, 19)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-green-500 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        green-500
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #00e80b
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(0, 232, 11)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-green-600 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        green-600
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #00c008
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(0, 192, 8)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-green-700 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        green-700
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #008e06
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(0, 142, 6)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-green-800 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        green-800
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #005303
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(0, 83, 3)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-green-900 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        green-900
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #002a02
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(0, 42, 2)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-blue-100 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        blue-100
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #f1fbff
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(241, 251, 255)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-blue-200 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        blue-200
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #b8eaff
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(184, 234, 255)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-blue-300 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        blue-300
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #80d9ff
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(128, 217, 255)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-blue-400 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        blue-400
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #4ad4ff
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(74, 212, 255)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-blue-500 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        blue-500
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #2cc0ff
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(44, 192, 255)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-blue-600 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        blue-600
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #00a5ec
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(0, 165, 236)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-blue-700 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        blue-700
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #0284cd
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(2, 132, 205)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-blue-800 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        blue-800
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #004b75
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(0, 75, 117)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-blue-900 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        blue-900
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #001b2a
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(0, 27, 42)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-violet-100 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        violet-100
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #f7f2fe
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(247, 242, 254)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-violet-200 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        violet-200
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #d8bcfb
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(216, 188, 251)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-violet-300 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        violet-300
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #b986f8
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(185, 134, 248)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-violet-400 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        violet-400
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #9951f5
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(153, 81, 245)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-violet-500 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        violet-500
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #7a1bf2
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(122, 27, 242)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-violet-600 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        violet-600
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #5f0bc9
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(95, 11, 201)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-violet-700 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        violet-700
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #460894
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(70, 8, 148)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-violet-800 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        violet-800
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #2d055e
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(45, 5, 94)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-violet-900 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        violet-900
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #130228
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(19, 2, 40)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-pink-100 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        pink-100
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #fff1fc
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(255, 241, 252)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-pink-200 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        pink-200
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #ffb8f1
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(255, 184, 241)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-pink-300 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        pink-300
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #ff80e6
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(255, 128, 230)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-pink-400 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        pink-400
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #ff47db
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(255, 71, 219)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-pink-500 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        pink-500
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #ff17d2
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(255, 23, 210)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-pink-600 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        pink-600
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #d400ab
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(212, 0, 171)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-pink-700 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        pink-700
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #9c007e
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(156, 0, 126)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-pink-800 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        pink-800
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #630050
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(99, 0, 80)
+      </p>
+    </div>
+  </div>
+  <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+    <div class="bg-pink-900 h-[100px] rounded-t-lg">
+    </div>
+    <div class="p-12 flex flex-col flex-1">
+      <p class="ui-text-p2 font-semibold flex-1">
+        pink-900
+      </p>
+      <p class="ui-text-p3 font-normal text-neutral-800">
+        #2a0022
+      </p>
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        rgb(42, 0, 34)
+      </p>
+    </div>
+  </div>
+</div>
+`;