diff --git a/lib/components/HeroCard/HeroCard.tsx b/lib/components/HeroCard/HeroCard.tsx
index 352ea00..edf22b2 100644
--- a/lib/components/HeroCard/HeroCard.tsx
+++ b/lib/components/HeroCard/HeroCard.tsx
@@ -65,7 +65,7 @@ export const HeroCard = ({
         className="ds:relative ds:flex ds:flex-col ds:gap-6 ds:rounded-lg ds:p-5 ds:sm:px-7 ds:sm:pb-11 ds:sm:pt-7 ds:tracking-widest"
         style={{ backgroundColor, color: textColor }}
       >
-        <h1 className="ds-overflow ds:text-pretty ds:text-[22px] ds:font-semibold ds:leading-[30px] ds:sm:leading-[50px] ds:sm:text-[36px]">
+        <h1 className="ds:overflow ds:text-pretty ds:text-[22px] ds:font-semibold ds:leading-[30px] ds:sm:leading-[50px] ds:sm:text-[36px]">
           {title}
         </h1>
         {sm && content && (
@@ -100,7 +100,7 @@ export const HeroCard = ({
         style={{ backgroundColor, color: textColor }}
       >
         <div className="ds:flex ds:flex-col gap-4">
-          <h2 className="ds-overflow ds:text-pretty ds:text-[22px] ds:sm:text-[24px] ds:font-semibold ds:leading-[30px] ds:sm:leading-[34px]">
+          <h2 className="ds:overflow ds:text-pretty ds:text-[22px] ds:sm:text-[24px] ds:font-semibold ds:leading-[30px] ds:sm:leading-[34px]">
             {title}
           </h2>
           {content && <p className="ds:tracking-normal ds:leading-[27px] ds:font-medium ds:text-[18px]">{content}</p>}
@@ -114,7 +114,7 @@ export const HeroCard = ({
       style={{ backgroundColor, color: textColor }}
     >
       <div className="ds:flex ds:flex-col gap-4">
-        <h2 className="ds-overflow ds:text-pretty ds:text-[22px] ds:sm:text-[24px] ds:font-semibold ds:leading-[30px] ds:sm:leading-[34px]">
+        <h2 className="ds:overflow ds:text-pretty ds:text-[22px] ds:sm:text-[24px] ds:font-semibold ds:leading-[30px] ds:sm:leading-[34px]">
           {title}
         </h2>
         {content && <p className="ds:tracking-normal ds:leading-[27px] ds:font-medium ds:text-[18px]">{content}</p>}
diff --git a/lib/docs/Spacing.mdx b/lib/docs/Spacing.mdx
index c0132f6..633bcb4 100644
--- a/lib/docs/Spacing.mdx
+++ b/lib/docs/Spacing.mdx
@@ -17,77 +17,77 @@ import { Meta } from '@storybook/blocks';
       <td>1</td>
       <td>2px</td>
       <td>
-        <div className="ds-bg-alert" style={{ width: 2, height: 2 }}></div>
+        <div className="ds:bg-alert" style={{ width: 2, height: 2 }}></div>
       </td>
     </tr>
     <tr>
       <td>2</td>
       <td>4px</td>
       <td>
-        <div className="ds-bg-alert" style={{ width: 4, height: 4 }}></div>
+        <div className="ds:bg-alert" style={{ width: 4, height: 4 }}></div>
       </td>
     </tr>
     <tr>
       <td>3</td>
       <td>8px</td>
       <td>
-        <div className="ds-bg-alert" style={{ width: 8, height: 8 }}></div>
+        <div className="ds:bg-alert" style={{ width: 8, height: 8 }}></div>
       </td>
     </tr>
     <tr>
       <td>4</td>
       <td>12px</td>
       <td>
-        <div className="ds-bg-alert" style={{ width: 12, height: 12 }}></div>
+        <div className="ds:bg-alert" style={{ width: 12, height: 12 }}></div>
       </td>
     </tr>
     <tr>
       <td>5</td>
       <td>16px</td>
       <td>
-        <div className="ds-bg-alert" style={{ width: 16, height: 16 }}></div>
+        <div className="ds:bg-alert" style={{ width: 16, height: 16 }}></div>
       </td>
     </tr>
     <tr>
       <td>6</td>
       <td>24px</td>
       <td>
-        <div className="ds-bg-alert" style={{ width: 24, height: 24 }}></div>
+        <div className="ds:bg-alert" style={{ width: 24, height: 24 }}></div>
       </td>
     </tr>
     <tr>
       <td>7</td>
       <td>32px</td>
       <td>
-        <div className="ds-bg-alert" style={{ width: 32, height: 32 }}></div>
+        <div className="ds:bg-alert" style={{ width: 32, height: 32 }}></div>
       </td>
     </tr>
     <tr>
       <td>8</td>
       <td>40px</td>
       <td>
-        <div className="ds-bg-alert" style={{ width: 40, height: 40 }}></div>
+        <div className="ds:bg-alert" style={{ width: 40, height: 40 }}></div>
       </td>
     </tr>
     <tr>
       <td>9</td>
       <td>48px</td>
       <td>
-        <div className="ds-bg-alert" style={{ width: 48, height: 48 }}></div>
+        <div className="ds:bg-alert" style={{ width: 48, height: 48 }}></div>
       </td>
     </tr>
     <tr>
       <td>10</td>
       <td>56px</td>
       <td>
-        <div className="ds-bg-alert" style={{ width: 56, height: 56 }}></div>
+        <div className="ds:bg-alert" style={{ width: 56, height: 56 }}></div>
       </td>
     </tr>
     <tr>
       <td>11</td>
       <td>64px</td>
       <td>
-        <div className="ds-bg-alert" style={{ width: 64, height: 64 }}></div>
+        <div className="ds:bg-alert" style={{ width: 64, height: 64 }}></div>
       </td>
     </tr>
   </tbody>