diff --git a/README.md b/README.md
index 5ada2f11..d6348c93 100644
--- a/README.md
+++ b/README.md
@@ -58,8 +58,8 @@ function MyComponent() {
         label="password"
         hint="password must be between 6 to 30 character"
       />
-      <Checkbox color="pri" onChange={handleToggle} label="I agree to the terms and conditions" />
-      <Button icon={<Icons.Send name="heart" size={24} color="dan" />}>Register</Button>
+      <Checkbox color="p" onChange={handleToggle} label="I agree to the terms and conditions" />
+      <Button icon={<Icons.Send name="heart" size={24} color="d" />}>Register</Button>
     </form>
   )
 }
diff --git a/apps/docs/content/getting-started/cra.mdx b/apps/docs/content/getting-started/cra.mdx
index 6d0eec0b..0ffda728 100644
--- a/apps/docs/content/getting-started/cra.mdx
+++ b/apps/docs/content/getting-started/cra.mdx
@@ -53,18 +53,18 @@ By adhering to this guideline, you can ensure a cohesive and intuitive user inte
 
 ```css
 :root {
-  --pri-l-1: hsl(225deg 60% 99.4%);
-  --pri-l-2: hsl(223deg 100% 98.6%);
+  --Pl-1: hsl(225deg 60% 99.4%);
+  --Pl-2: hsl(223deg 100% 98.6%);
   /* ... */
-  --pri-l-11: hsl(226deg 55% 45%);
-  --pri-l-12: hsl(226dg 62% 17%);
+  --Pl-11: hsl(226deg 55% 45%);
+  --Pl-12: hsl(226dg 62% 17%);
 
   /* dark colors */
-  --pri-d-1: hsl(229deg 24% 10%);
-  --pri-d-2: hsl(230deg 36.4% 12.9%);
+  --Pd-1: hsl(229deg 24% 10%);
+  --Pd-2: hsl(230deg 36.4% 12.9%);
   /* ... */
-  --pri-d-11: hsl(228deg 100% 75.9%);
-  --pri-d-12: hsl(226deg 8% 96.3%);
+  --Pd-11: hsl(228deg 100% 75.9%);
+  --Pd-12: hsl(226deg 8% 96.3%);
 } /* Add dark mode custom properties here */
 ```
 
diff --git a/apps/docs/content/getting-started/next.mdx b/apps/docs/content/getting-started/next.mdx
index 239b9e6b..ef3af51d 100644
--- a/apps/docs/content/getting-started/next.mdx
+++ b/apps/docs/content/getting-started/next.mdx
@@ -53,18 +53,18 @@ By adhering to this guideline, you can ensure a cohesive and intuitive user inte
 
 ```css
 :root {
-  --pri-l-1: hsl(225deg 60% 99.4%);
-  --pri-l-2: hsl(223deg 100% 98.6%);
+  --Pl-1: hsl(225deg 60% 99.4%);
+  --Pl-2: hsl(223deg 100% 98.6%);
   /* ... */
-  --pri-l-11: hsl(226deg 55% 45%);
-  --pri-l-12: hsl(226dg 62% 17%);
+  --Pl-11: hsl(226deg 55% 45%);
+  --Pl-12: hsl(226dg 62% 17%);
 
   /* dark colors */
-  --pri-d-1: hsl(229deg 24% 10%);
-  --pri-d-2: hsl(230deg 36.4% 12.9%);
+  --Pd-1: hsl(229deg 24% 10%);
+  --Pd-2: hsl(230deg 36.4% 12.9%);
   /* ... */
-  --pri-d-11: hsl(228deg 100% 75.9%);
-  --pri-d-12: hsl(226deg 8% 96.3%);
+  --Pd-11: hsl(228deg 100% 75.9%);
+  --Pd-12: hsl(226deg 8% 96.3%);
 } /* Add dark mode custom properties here */
 ```
 
diff --git a/apps/docs/content/getting-started/remix.mdx b/apps/docs/content/getting-started/remix.mdx
index 772803ed..7784ff7a 100644
--- a/apps/docs/content/getting-started/remix.mdx
+++ b/apps/docs/content/getting-started/remix.mdx
@@ -53,18 +53,18 @@ By adhering to this guideline, you can ensure a cohesive and intuitive user inte
 
 ```css
 :root {
-  --pri-l-1: hsl(225deg 60% 99.4%);
-  --pri-l-2: hsl(223deg 100% 98.6%);
+  --Pl-1: hsl(225deg 60% 99.4%);
+  --Pl-2: hsl(223deg 100% 98.6%);
   /* ... */
-  --pri-l-11: hsl(226deg 55% 45%);
-  --pri-l-12: hsl(226dg 62% 17%);
+  --Pl-11: hsl(226deg 55% 45%);
+  --Pl-12: hsl(226dg 62% 17%);
 
   /* dark colors */
-  --pri-d-1: hsl(229deg 24% 10%);
-  --pri-d-2: hsl(230deg 36.4% 12.9%);
+  --Pd-1: hsl(229deg 24% 10%);
+  --Pd-2: hsl(230deg 36.4% 12.9%);
   /* ... */
-  --pri-d-11: hsl(228deg 100% 75.9%);
-  --pri-d-12: hsl(226deg 8% 96.3%);
+  --Pd-11: hsl(228deg 100% 75.9%);
+  --Pd-12: hsl(226deg 8% 96.3%);
 } /* Add dark mode custom properties here */
 ```
 
diff --git a/apps/docs/content/getting-started/vite.mdx b/apps/docs/content/getting-started/vite.mdx
index 7f4cdd18..a4582c55 100644
--- a/apps/docs/content/getting-started/vite.mdx
+++ b/apps/docs/content/getting-started/vite.mdx
@@ -53,18 +53,18 @@ By adhering to this guideline, you can ensure a cohesive and intuitive user inte
 
 ```css
 :root {
-  --pri-l-1: hsl(225deg 60% 99.4%);
-  --pri-l-2: hsl(223deg 100% 98.6%);
+  --Pl-1: hsl(225deg 60% 99.4%);
+  --Pl-2: hsl(223deg 100% 98.6%);
   /* ... */
-  --pri-l-11: hsl(226deg 55% 45%);
-  --pri-l-12: hsl(226dg 62% 17%);
+  --Pl-11: hsl(226deg 55% 45%);
+  --Pl-12: hsl(226dg 62% 17%);
 
   /* dark colors */
-  --pri-d-1: hsl(229deg 24% 10%);
-  --pri-d-2: hsl(230deg 36.4% 12.9%);
+  --Pd-1: hsl(229deg 24% 10%);
+  --Pd-2: hsl(230deg 36.4% 12.9%);
   /* ... */
-  --pri-d-11: hsl(228deg 100% 75.9%);
-  --pri-d-12: hsl(226deg 8% 96.3%);
+  --Pd-11: hsl(228deg 100% 75.9%);
+  --Pd-12: hsl(226deg 8% 96.3%);
 } /* Add dark mode custom properties here */
 ```
 
diff --git a/apps/docs/content/themes/color.mdx b/apps/docs/content/themes/color.mdx
index 277b4378..9fe35c6c 100644
--- a/apps/docs/content/themes/color.mdx
+++ b/apps/docs/content/themes/color.mdx
@@ -19,37 +19,37 @@ The Pillar UI color theme provides a set of default colors that can be easily ap
       </TableRow>
       <TableRow>
         <TableColumn>Primary Colors</TableColumn>
-        <TableColumn>`--pri-*`</TableColumn>
+        <TableColumn>`--P*`</TableColumn>
         <TableColumn>Highlight important elements; range from light to dark.</TableColumn>
       </TableRow>
       <TableRow>
         <TableColumn>Secondary Colors</TableColumn>
-        <TableColumn>`--sec-*`</TableColumn>
+        <TableColumn>`--Se*`</TableColumn>
         <TableColumn>Complement primary colors; offer visual variation.</TableColumn>
       </TableRow>
       <TableRow>
         <TableColumn>Danger Colors</TableColumn>
-        <TableColumn>`--dan-*`</TableColumn>
+        <TableColumn>`--D*`</TableColumn>
         <TableColumn>Signal critical or error-related elements in your UI.</TableColumn>
       </TableRow>
       <TableRow>
         <TableColumn>Warning Colors</TableColumn>
-        <TableColumn>`--war-*`</TableColumn>
+        <TableColumn>`--W*`</TableColumn>
         <TableColumn>Convey cautionary information or warnings.</TableColumn>
       </TableRow>
       <TableRow>
         <TableColumn>Success Colors</TableColumn>
-        <TableColumn>`--suc-*`</TableColumn>
+        <TableColumn>`--S*`</TableColumn>
         <TableColumn>Represent successful or positive elements in your UI.</TableColumn>
       </TableRow>
       <TableRow>
         <TableColumn>Opacity Colors</TableColumn>
-        <TableColumn>`--opa-*`</TableColumn>
+        <TableColumn>`--O*`</TableColumn>
         <TableColumn>Provide varying transparency levels to UI elements.</TableColumn>
       </TableRow>
       <TableRow>
         <TableColumn>bg Colors</TableColumn>
-        <TableColumn>`--bg-*`</TableColumn>
+        <TableColumn>`--B*`</TableColumn>
         <TableColumn>Serve as background colors for bgs or containers.</TableColumn>
       </TableRow>
     </Table>
diff --git a/apps/docs/content/themes/font.mdx b/apps/docs/content/themes/font.mdx
index ea29762c..3f4f8f16 100644
--- a/apps/docs/content/themes/font.mdx
+++ b/apps/docs/content/themes/font.mdx
@@ -12,7 +12,7 @@ publishedAt: '2024-05-03T05:35:07.322Z'
 The font size variables, defined within the `:root` CSS selector, ensure accessibility throughout your CSS stylesheets.
 
 <Alert
-  color="war"
+  color="w"
   title="Caution"
   variant="soft"
   message="Customizing spacing using the `--s-*` variables may impact the responsive layout. Default values utilize the `clamp` function to adapt spacing based on viewport size, maintaining proportions and alignment. Modifying these values might result in spacing inconsistencies."
diff --git a/apps/docs/content/themes/gradient.mdx b/apps/docs/content/themes/gradient.mdx
index 52fff8fe..09059322 100644
--- a/apps/docs/content/themes/gradient.mdx
+++ b/apps/docs/content/themes/gradient.mdx
@@ -13,7 +13,7 @@ Enhance your project's visual appeal with customizable CSS gradient variables in
 
 ## Usage Gradient Variables
 
-These gradient variables are available for usage when applying themes to your CSS. Some of our components utilize these variables to support gradients under the hood, so you don't need to worry about them. However, if you want to use gradients in your custom components, you can reference these variables using the following names, for example: `var(--suc-gradient)`.
+These gradient variables are available for usage when applying themes to your CSS. Some of our components utilize these variables to support gradients under the hood, so you don't need to worry about them. However, if you want to use gradients in your custom components, you can reference these variables using the following names, for example: `var(--Sgradient)`.
 
 <Table>
   <TableRow type="head">
@@ -21,23 +21,23 @@ These gradient variables are available for usage when applying themes to your CS
     <TableColumn as="th">Description</TableColumn>
   </TableRow>
   <TableRow>
-    <TableColumn>`--suc-gradient`</TableColumn>
+    <TableColumn>`--Sgradient`</TableColumn>
     <TableColumn>Gradient variable for success-related elements.</TableColumn>
   </TableRow>
   <TableRow>
-    <TableColumn>`--sec-gradient`</TableColumn>
+    <TableColumn>`--Segradient`</TableColumn>
     <TableColumn>Gradient variable for secondary elements.</TableColumn>
   </TableRow>
   <TableRow>
-    <TableColumn>`--dan-gradient`</TableColumn>
+    <TableColumn>`--Dgradient`</TableColumn>
     <TableColumn>Gradient variable for elements associated with danger or errors.</TableColumn>
   </TableRow>
   <TableRow>
-    <TableColumn>`--war-gradient`</TableColumn>
+    <TableColumn>`--Wgradient`</TableColumn>
     <TableColumn>Gradient variable for warning-related elements.</TableColumn>
   </TableRow>
   <TableRow>
-    <TableColumn>`--bg-gradient`</TableColumn>
+    <TableColumn>`--Bgradient`</TableColumn>
     <TableColumn>Gradient variable for bg elements.</TableColumn>
   </TableRow>
   <TableRow>
@@ -62,11 +62,11 @@ These gradient variables are available for usage when applying themes to your CS
 
 The gradient variables define different gradients for various color combinations. Each variable represents a specific gradient style:
 
-- **--suc-gradient**: Gradient variable for success-related elements.
-- **--sec-gradient**: Gradient variable for secondary elements.
-- **--dan-gradient**: Gradient variable for elements associated with danger or errors.
-- **--war-gradient**: Gradient variable for warning-related elements.
-- **--bg-gradient**: Gradient variable for bg elements.
+- **--Sgradient**: Gradient variable for success-related elements.
+- **--Segradient**: Gradient variable for secondary elements.
+- **--Dgradient**: Gradient variable for elements associated with danger or errors.
+- **--Wgradient**: Gradient variable for warning-related elements.
+- **--Bgradient**: Gradient variable for bg elements.
 - **--mixed1-gradient**: Customizable gradient variable for mixed color combination 1.
 - **--mixed2-gradient**: Customizable gradient variable for mixed color combination 2.
 - **--mixed3-gradient**: Customizable gradient variable for mixed color combination 3.
@@ -76,15 +76,15 @@ The gradient variables define different gradients for various color combinations
 
 If you'd like to customize the gradient styles beyond the default values, you have the flexibility to do so. Simply override the existing gradient variables with your preferred gradient styles.
 
-For instance, if you want to modify the gradient colors for the `--suc-gradient`, you can achieve this by assigning a new `linear-gradient` value to the `--suc-gradient-custom` variable:
+For instance, if you want to modify the gradient colors for the `--Sgradient`, you can achieve this by assigning a new `linear-gradient` value to the `--Sgradient-custom` variable:
 
 ```css showLineNumbers title="themes.css"
 :root {
-  --suc-gradient-custom: linear-gradient(to right, #00ff00, #ff0000);
+  --Sgradient-custom: linear-gradient(to right, #00ff00, #ff0000);
 }
 ```
 
-In this example, we're customizing the --pri-gradient-custom and --sec-gradient-custom properties to define our own gradient styles for primary and secondary elements, respectively.
+In this example, we're customizing the --Pgradient-custom and --Segradient-custom properties to define our own gradient styles for primary and secondary elements, respectively.
 
 By updating these gradient variables, you can create unique gradient styles for different components and elements in your project.
 
diff --git a/apps/docs/src/app/_components/_icon.scss b/apps/docs/src/app/_components/_icon.scss
index 7ff8224e..73de1112 100644
--- a/apps/docs/src/app/_components/_icon.scss
+++ b/apps/docs/src/app/_components/_icon.scss
@@ -1,4 +1,4 @@
 .icons-scroll {
   overflow-x: auto;
-  border: 1px solid var(--bg-4);
+  border: 1px solid var(--B4);
 }
diff --git a/apps/docs/src/app/_components/aside/_aside.scss b/apps/docs/src/app/_components/aside/_aside.scss
index 9b3154b5..8f4eb139 100644
--- a/apps/docs/src/app/_components/aside/_aside.scss
+++ b/apps/docs/src/app/_components/aside/_aside.scss
@@ -5,12 +5,12 @@
   top: 4rem;
   overflow-y: auto;
   max-height: calc(100vh - 4rem);
-  background: var(--bg-1);
+  background: var(--B1);
   z-index: 50;
 }
 
 .toc-wrapper {
-  border-inline-start: 1px solid var(--bg-4);
+  border-inline-start: 1px solid var(--B4);
 }
 
 .as-icon {
@@ -46,8 +46,8 @@
   border-inline-start: 3px solid transparent;
 
   &[data-active='true'] {
-    background: var(--pri-3);
-    border-color: var(--pri-9);
+    background: var(--P3);
+    border-color: var(--P9);
   }
 }
 
@@ -57,7 +57,7 @@
   justify-content: space-between;
   width: 100%;
   font-size: var(--f-xs);
-  color: var(--bg-11);
+  color: var(--B11);
   outline: none;
 }
 
diff --git a/apps/docs/src/app/_components/code/_index.scss b/apps/docs/src/app/_components/code/_index.scss
index db7e5ad5..aed59630 100644
--- a/apps/docs/src/app/_components/code/_index.scss
+++ b/apps/docs/src/app/_components/code/_index.scss
@@ -1,18 +1,18 @@
 .prose {
   --sha-rad: 0.5rem;
 
-  --sh-class: var(--pri-11);
-  --sh-identifier: var(--suc-11);
-  --sh-sign: var(--bg-11);
-  --sh-property: var(--sec-11);
-  --sh-entity: var(--war-11);
-  --sh-jsxliterals: var(--bg-12);
-  --sh-string: var(--suc-10);
-  --sh-keyword: var(--dan-11);
-  --sh-comment: var(--bg-9);
+  --sh-class: var(--P11);
+  --sh-identifier: var(--S11);
+  --sh-sign: var(--B11);
+  --sh-property: var(--Se11);
+  --sh-entity: var(--W11);
+  --sh-jsxliterals: var(--B12);
+  --sh-string: var(--S10);
+  --sh-keyword: var(--D11);
+  --sh-comment: var(--B9);
 
   & li::marker {
-    color: var(--bg-11);
+    color: var(--B11);
     font-size: 0.85rem;
   }
 
@@ -34,9 +34,9 @@
 }
 
 .code--section {
-  background-color: var(--bg-3);
+  background-color: var(--B3);
   border-radius: var(--sha-rad);
-  border: 1px solid var(--bg-6);
+  border: 1px solid var(--B6);
 
   & > * {
     padding: 0.375rem 1rem;
@@ -79,7 +79,7 @@
 }
 
 .playground {
-  border: 1px solid var(--bg-6);
+  border: 1px solid var(--B6);
   padding: 1.5rem;
   gap: 1.5rem;
   display: flex;
@@ -99,13 +99,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 1px solid var(--opa-4);
+  border-bottom: 1px solid var(--O4);
 }
 
 .dot {
   width: 0.5rem;
   height: 0.5rem;
-  background: var(--dan-9);
+  background: var(--D9);
   border-radius: 50%;
   position: relative;
 
@@ -115,14 +115,14 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    background-color: var(--war-9);
+    background-color: var(--W9);
     top: 0;
     left: 0.75rem;
     border-radius: inherit;
   }
 
   &:after {
-    background-color: var(--suc-9);
+    background-color: var(--S9);
     left: 1.5rem;
   }
 }
diff --git a/apps/docs/src/app/_components/colors/colors.tsx b/apps/docs/src/app/_components/colors/colors.tsx
index 628ac440..73858417 100644
--- a/apps/docs/src/app/_components/colors/colors.tsx
+++ b/apps/docs/src/app/_components/colors/colors.tsx
@@ -18,7 +18,7 @@ function ColorItem({ item, value }: ColorItem) {
       <div className="l_f-sm">
         <Grid justify="center" grid="repeat(12, 1fr) x auto 30px 30px" gap="xs">
           {Array.from({ length: 12 }, (_, index) => (
-            <Text align="center" size="sm" key={`${item}-${index + 1}`} weight="medium" color="bg" low>
+            <Text align="center" size="sm" key={`${item}-${index + 1}`} weight="medium" color="b" low>
               {index + 1}
             </Text>
           ))}
diff --git a/apps/docs/src/app/_components/docHeader/index.tsx b/apps/docs/src/app/_components/docHeader/index.tsx
index 454455e1..93152be3 100644
--- a/apps/docs/src/app/_components/docHeader/index.tsx
+++ b/apps/docs/src/app/_components/docHeader/index.tsx
@@ -9,14 +9,14 @@ export const DocHeader = ({ title, type, items, root, excerpt, slug, directory }
   return (
     <Paper className="docs--header" flow="lg" p="sm">
       <Heading size="2xl">{title} </Heading>
-      <Text color="bg" low size="sm" weight="medium">
+      <Text color="b" low size="sm" weight="medium">
         {excerpt}
       </Text>
 
       <Grid grid="auto minmax(0, 1fr)" sm="1fr" gap="md">
         {type === 'core' && (
           <>
-            <Text weight="medium" size="sm" color="bg" low>
+            <Text weight="medium" size="sm" color="b" low>
               Components:
             </Text>
             <Flex gap="sm" wrap>
@@ -24,14 +24,14 @@ export const DocHeader = ({ title, type, items, root, excerpt, slug, directory }
             </Flex>
           </>
         )}
-        <Text weight="medium" size="sm" color="bg" low>
+        <Text weight="medium" size="sm" color="b" low>
           Type
         </Text>
         <Flex gap="sm">
           <Chips>{typeName}</Chips>
         </Flex>
         <>
-          <Text weight="medium" size="sm" color="bg" low>
+          <Text weight="medium" size="sm" color="b" low>
             import
           </Text>
           <Flex gap="sm">
diff --git a/apps/docs/src/app/_components/footer/footer.tsx b/apps/docs/src/app/_components/footer/footer.tsx
index 2b374f02..986a3e82 100644
--- a/apps/docs/src/app/_components/footer/footer.tsx
+++ b/apps/docs/src/app/_components/footer/footer.tsx
@@ -45,7 +45,7 @@ const footer = () => {
       <Paper background="bg-3" as={Grid} p="lg" gap="sm" grid="repeat(4, minmax(1px, 1fr))" xs="1fr" lg="1fr 1fr">
         <div>
           <Logo width={100} />
-          <Text transform="first-letter-only" color="bg" low>
+          <Text transform="first-letter-only" color="b" low>
             Your comprehensive solution for modern web development. Reusable UI components, React hooks, icons, and
             tools designed with accessibility and scalability in mind. Empower your web applications effortlessly
           </Text>
diff --git a/apps/docs/src/app/_components/header/_header.scss b/apps/docs/src/app/_components/header/_header.scss
index 0be81383..0a0a3a1b 100644
--- a/apps/docs/src/app/_components/header/_header.scss
+++ b/apps/docs/src/app/_components/header/_header.scss
@@ -1,6 +1,6 @@
 .header {
   padding: 0 1rem;
-  border-bottom: 1px solid var(--bg-4);
+  border-bottom: 1px solid var(--B4);
   position: sticky;
   top: 0;
   left: 0;
@@ -21,7 +21,7 @@
   .header--input-search {
     position: absolute;
     inset: 0;
-    background-color: var(--bg-1);
+    background-color: var(--B1);
     visibility: hidden;
     z-index: 1;
     &[data-show='true'] {
diff --git a/apps/docs/src/app/_components/home/_home.scss b/apps/docs/src/app/_components/home/_home.scss
index 5bdc5eb6..d622be9c 100644
--- a/apps/docs/src/app/_components/home/_home.scss
+++ b/apps/docs/src/app/_components/home/_home.scss
@@ -16,7 +16,7 @@
 }
 
 .hero-svg {
-  stroke: var(--pri-9);
+  stroke: var(--P9);
   position: absolute;
   left: -10%;
   width: 115%;
@@ -26,7 +26,7 @@
 .hero-txt {
   font-size: max(2.5vw, 1.75rem);
   line-height: 1.25;
-  color: var(--bg-11);
+  color: var(--B11);
 }
 
 // Here we go
@@ -38,7 +38,7 @@
   z-index: 1;
   max-width: 100%;
   &:nth-child(even) {
-    background: var(--bg-2);
+    background: var(--B2);
   }
 }
 .rtl--support {
@@ -59,7 +59,7 @@
 }
 
 .feature--item {
-  border: 1px solid var(--bg-5);
+  border: 1px solid var(--B5);
   padding: 0.75rem;
   border-radius: 0.75rem;
 }
@@ -73,15 +73,15 @@
 }
 .article--item {
   padding: 1.25rem;
-  border: 1px solid var(--bg-4);
+  border: 1px solid var(--B4);
   position: relative;
   z-index: 1;
   border-radius: 0.5rem;
-  background-color: var(--bg-1);
+  background-color: var(--B1);
 }
 
 .article--icon-container {
-  background-color: var(--pri-4);
+  background-color: var(--P4);
   width: 48px;
   height: 48px;
   border-radius: 50%;
@@ -149,9 +149,9 @@
 .user--article,
 .get-started {
   padding: 0.75rem;
-  border: 1px solid var(--bg-4);
+  border: 1px solid var(--B4);
   border-radius: 0.5rem;
-  background-color: var(--bg-3);
+  background-color: var(--B3);
   height: fit-content;
 }
 
diff --git a/apps/docs/src/app/_components/home/accessible.tsx b/apps/docs/src/app/_components/home/accessible.tsx
index dbd5a11f..d3ec92fd 100644
--- a/apps/docs/src/app/_components/home/accessible.tsx
+++ b/apps/docs/src/app/_components/home/accessible.tsx
@@ -18,7 +18,7 @@ export function Accessible() {
                 {title}
               </Heading>
             </Flex>
-            <Text color="bg" low>
+            <Text color="b" low>
               {description}!
             </Text>
           </Paper>
diff --git a/apps/docs/src/app/_components/home/customTheme.tsx b/apps/docs/src/app/_components/home/customTheme.tsx
index 49a9dfb1..6039081b 100644
--- a/apps/docs/src/app/_components/home/customTheme.tsx
+++ b/apps/docs/src/app/_components/home/customTheme.tsx
@@ -9,11 +9,11 @@ export function CustomTheme() {
         <SectionHeading subheading="Change Theme" heading=" Custom your perfect look in seconds!" />
 
         <div className="l_f-lg">
-          <Text className="dark--description" color="bg" low size="xl">
+          <Text className="dark--description" color="b" low size="xl">
             Customize your interface to showcase your personal flair. Adjust CSS variables for colors, fonts, and
             layouts to craft a design that’s unmistakably your own.
           </Text>
-          <Text className="dark--description" color="bg" low size="xl">
+          <Text className="dark--description" color="b" low size="xl">
             In the theme settings, you can enhance your user experience by customizing various elements. This includes
             adjusting the size, corner details, and text transformations. You can select specific areas within the
             entire tree structure to apply these style changes, ensuring a consistent and personalized look.
diff --git a/apps/docs/src/app/_components/home/darkMode.tsx b/apps/docs/src/app/_components/home/darkMode.tsx
index e03dea7a..685c4bda 100644
--- a/apps/docs/src/app/_components/home/darkMode.tsx
+++ b/apps/docs/src/app/_components/home/darkMode.tsx
@@ -8,11 +8,11 @@ export function DarkMode() {
       <div className="l_f-lg">
         <div className="l_f-md">
           <SectionHeading subheading=" Subtle, Soothing, Smart" heading=" Night Mode: Effortless Elegance" />
-          <Text className="dark--description" color="bg" low size="xl">
+          <Text className="dark--description" color="b" low size="xl">
             Switch to dark mode with ease. Our useDarkMode hook ensures a smooth, flicker-free experience, compatible
             with major frameworks.
           </Text>
-          <Text className="dark--description" color="bg" low size="xl">
+          <Text className="dark--description" color="b" low size="xl">
             Our styles are dark mode-ready from the start. Simply add <code>class=&quot;dark&quot;</code> to your
             elements, and watch them transform.
           </Text>
diff --git a/apps/docs/src/app/_components/home/data.tsx b/apps/docs/src/app/_components/home/data.tsx
index d282a779..57144e07 100644
--- a/apps/docs/src/app/_components/home/data.tsx
+++ b/apps/docs/src/app/_components/home/data.tsx
@@ -72,49 +72,49 @@ export const ACCESSIBILITY = [
     title: 'Support Windows High Contrast',
     description:
       'Our UI library supports windows high contrast mode out of the box without any additional configuration.',
-    icon: <Star width="24" stroke="var(--pri-11)" />,
+    icon: <Star width="24" stroke="var(--P11)" />,
   },
   {
     id: 'color-contrast',
     title: 'Color Contrast',
     description: 'Meets WCAG contrast guidelines for readability by all users.',
-    icon: <EyeCheck width="24" stroke="var(--pri-11)" />,
+    icon: <EyeCheck width="24" stroke="var(--P11)" />,
   },
   {
     id: 'reduce-animation',
     title: 'Reduce Motion',
     description: 'Option to minimize animations for users with motion sensitivity.',
-    icon: <PlayerPause width="24" stroke="var(--pri-11)" />,
+    icon: <PlayerPause width="24" stroke="var(--P11)" />,
   },
   {
     id: 'Keyboard Navigation',
     title: 'Keyboard Navigation',
     description: 'Full keyboard support for users who cannot use a mouse.',
-    icon: <Space width="24" stroke="var(--pri-11)" />,
+    icon: <Space width="24" stroke="var(--P11)" />,
   },
   {
     id: 'Text Resizing',
     title: 'Text Resizing',
     description: 'Supports text resizing for users with low vision.',
-    icon: <TextIncrease width="24" stroke="var(--pri-11)" />,
+    icon: <TextIncrease width="24" stroke="var(--P11)" />,
   },
   {
     id: 'Focus Indicators',
     title: 'Focus Indicators',
     description: 'Clear focus indicators for keyboard navigation.',
-    icon: <Mouse width="24" stroke="var(--pri-11)" />,
+    icon: <Mouse width="24" stroke="var(--P11)" />,
   },
   {
     id: 'Semantic Markup',
     title: 'Semantic Markup',
     description: 'Uses semantic HTML for accessibility and structure.',
-    icon: <Code width="24" stroke="var(--pri-11)" />,
+    icon: <Code width="24" stroke="var(--P11)" />,
   },
   {
     id: 'colorblind-friendly',
     title: 'Color blind Friendly Design',
     description: 'Does not rely on color alone to convey information, ensuring accessibility for colorblind users.',
-    icon: <Palette width="24" stroke="var(--pri-11)" />, // You might want a more suitable icon here.
+    icon: <Palette width="24" stroke="var(--P11)" />, // You might want a more suitable icon here.
   },
 ]
 
@@ -195,7 +195,7 @@ export const SUPPORTED = [
     slug: 'remix',
     title: 'Remix',
     icon: (
-      <svg width="120" fill="var(--bg-12)" preserveAspectRatio="xMidYMid" viewBox="0 0 512 128">
+      <svg width="120" fill="var(--B12)" preserveAspectRatio="xMidYMid" viewBox="0 0 512 128">
         <path d="M404.5 38.3v89.5h-32.3V38.3h32.3zm41.6-.1 14.7 21.2L476 38.2h33.2L477 80.7l35.1 47h-35.6l-17.8-24.3-17.7 24.3h-33.3L442.5 82l-32-44H446zM330 35.3c24.2 0 31.5 16.7 31.7 35.2v56.7h-32.3V76.5a63.2 63.2 0 0 0 0-.3l-.1-.7a53.3 53.3 0 0 0 0-.6l-.1-.6a45 45 0 0 0 0-.4v-.6l-.1-.6C328 65 325 61 317.4 61c-9.1 0-13 6.4-14 16.6l-.1.7-.2 4.6v44.3h-32.3V76a54.2 54.2 0 0 0 0-.4l-.1-.6v-.6l-.1-.7c-.9-8.3-4-12.6-12-12.6-10.4 0-14.2 8.7-14.2 21.9v44.3H212V37.7h32.2v13.5c4.8-9.8 14.4-15.9 27.7-15.9 15.8 0 24 7.3 27.7 17.7A32.1 32.1 0 0 1 330 35.3zm-170.4-2.8c29.3 0 45 20 45.4 44v9.8h-62.4c.8 11 8.8 16.2 18.6 16.2 8.6 0 14.2-2.9 17.2-9.7v-.3l26 2.4c-4.6 20.5-21 32-44.4 32-28.5 0-48.8-17.3-48.8-45.8a47 47 0 0 1 48.4-48.6zM60.4 0C92.9 0 109 15.5 109 40.2c0 18.5-11.4 30.6-26.8 32.6 13 2.6 20.6 10 22 24.8l.2 2.7.2 2.5.1 2.3.1 1.8.1 2.1.1 1.2v2l.1 1.7v1l.1 1.7v2.8l.1 2.7v4.4H72v-16.2l-.1-1.5v-.7l-.1-1.2-.1-1.3-.1-1.8-.2-1.4c-.9-13.5-6.3-17.2-16.2-17.7H53.8a54.4 54.4 0 0 0-.7 0H0V58.3h54.4c14.3 0 21.5-4.4 21.5-16 0-10.3-7.2-16.5-21.5-16.5H0V0h60.4zm-25 106.9c4.5 0 6.3 2.4 7 4.7v.4l.1.3v.3l.1.1V113.7l.1.2v12.6H0v-19.6h35.5zm123.8-51.1c-8.1 0-12.7 3.9-14.9 9.6l-.1.4-.2.5-.4 1.4-.1.5-.2 1-.1.4v.3l-.1.5v.2h31.2c-.4-8-5.6-14.8-15.1-14.8zM404.7 1.4V30H372V1.4h32.7z" />
       </svg>
     ),
@@ -204,7 +204,7 @@ export const SUPPORTED = [
     slug: 'next',
     title: 'Next',
     icon: (
-      <svg width="120" preserveAspectRatio="xMidYMid" viewBox="0 0 512 309" fill="var(--bg-12)">
+      <svg width="120" preserveAspectRatio="xMidYMid" viewBox="0 0 512 309" fill="var(--B12)">
         <path d="M120.8 80.6h96.6v7.6h-87.7V146H212v7.7h-82.4V217h88.7v7.7h-97.6V80.6zm105.2 0h10.3l45.5 63.4 46.4-63.4L391.4 0 287.6 150.7l53.5 74h-10.7l-48.6-67.4-49 67.5h-10.4l54-74.2-50.4-70zm119 7.6v-7.6h110v7.6h-50.7v136.6h-8.9V88.2H345zM0 80.6h11l152.6 228.3-63-84.1L9.3 91.5l-.4 133.3H0V80.6zm454 134.2a3.1 3.1 0 0 1-3-3.2c0-1.8 1.3-3.2 3-3.2 2 0 3.2 1.4 3.2 3.2 0 1.8-1.3 3.2-3.1 3.2zm8.8-8.5h4.7c0 2.6 2 4.3 4.7 4.3 3 0 4.8-1.8 4.8-5.3v-22h4.9v22c0 6.3-3.7 9.9-9.6 9.9-5.7 0-9.5-3.5-9.5-8.9zm25.4-.2h4.7c.5 3 3.3 4.8 7.5 4.8 3.9 0 6.7-2 6.7-4.8 0-2.4-1.8-3.8-6-4.7l-4-1c-5.5-1.3-8-4-8-8.6 0-5.6 4.4-9.2 11.2-9.2 6.3 0 11 3.6 11.2 8.9h-4.7c-.4-2.9-3-4.7-6.6-4.7-3.8 0-6.3 1.9-6.3 4.7 0 2.2 1.6 3.5 5.7 4.4l3.4.8c6.4 1.5 9 4.1 9 8.8 0 6-4.6 9.7-12 9.7-6.9 0-11.5-3.6-11.8-9.1z" />
       </svg>
     ),
@@ -243,7 +243,7 @@ export const SUPPORTED = [
     icon: (
       <svg width="80" fill="none" viewBox="0 0 60 60">
         <path
-          fill="var(--bg-1)"
+          fill="var(--B1)"
           fillRule="evenodd"
           d="M26.6.8C24.3 2 19.5 4.3 16.9 6c-2.6 1.7-2.3 3.4-3.4 4.5a89.4 89.4 0 0 1-6.8 5.7c-2.3 1.7-1.8 6.2-2.3 8L2 31.4c-.6 1.7 1.1 4 2.3 6.2s4 8.5 5.1 10.8c1.1 2.3 4.5 1.2 7.4 3.4a100.2 100.2 0 0 0 9.7 6.8c2.8 1.7 4 1.7 6.8 0 2.9-1.7 6.8-4.5 9.7-6.8 2.8-2.2 6.2-1.1 7.4-3.4l5.1-10.8c1.1-2.2 2.8-4.5 2.3-6.2L55.6 24c-.6-1.7 0-6.2-2.3-8a84.1 84.1 0 0 1-6.8-5.6c-2-1.8-1.1-2.8-3.4-4.5-2.3-1.7-7.4-4-9.7-5.1a7.3 7.3 0 0 0-6.8 0Z"
           clipRule="evenodd"
@@ -297,7 +297,7 @@ export const COMING_SUPPORT = [
     icon: (
       <svg viewBox="0 0 24 24" width="80" fill="none">
         <path
-          stroke="var(--war-10)"
+          stroke="var(--W10)"
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth="2"
@@ -309,7 +309,7 @@ export const COMING_SUPPORT = [
 ]
 
 export const strokes = {
-  stroke: 'var(--bg-9)',
+  stroke: 'var(--B9)',
   strokeLinecap: 'round',
   strokeLinejoin: 'round',
   strokeMiterlimit: '1.5',
@@ -317,9 +317,9 @@ export const strokes = {
 } as const
 
 export const filles = {
-  fill: 'var(--bg-1)',
+  fill: 'var(--B1)',
   fillRule: 'evenodd',
   clipRule: 'evenodd',
 } as const
 
-export const allConfig = { ...strokes, ...filles } as const
\ No newline at end of file
+export const allConfig = { ...strokes, ...filles } as const
diff --git a/apps/docs/src/app/_components/home/hero.tsx b/apps/docs/src/app/_components/home/hero.tsx
index a4473aba..e0234f7c 100644
--- a/apps/docs/src/app/_components/home/hero.tsx
+++ b/apps/docs/src/app/_components/home/hero.tsx
@@ -28,7 +28,7 @@ export function Hero() {
           applications quickly and easily.
         </p>
 
-        <Text color="bg" low>
+        <Text color="b" low>
           When building this library, we focused on two key aspects: accessibility and performance. You can assess the
           library&apos;s size and compare it to other libraries to see the difference.{' '}
         </Text>
@@ -39,16 +39,16 @@ export function Hero() {
           Get Started
         </Button>
 
-        <Button color="bg" variant="outline" icon={<Dollar />}>
+        <Button color="b" variant="outline" icon={<Dollar />}>
           Donation
         </Button>
       </Flex>
 
       <Flex justify="end" gap="sm">
-        <IconButton color="bg" variant="soft" title="Go to Github" icon={<Github />} />
-        <IconButton color="bg" variant="soft" title="Go to Discord" icon={<Discord />} />
-        <IconButton color="bg" variant="soft" title="Go to Youtube" icon={<Youtube />} />
-        <IconButton color="bg" variant="soft" title="Go to Linkdin" icon={<Linkdin />} />
+        <IconButton color="b" variant="soft" title="Go to Github" icon={<Github />} />
+        <IconButton color="b" variant="soft" title="Go to Discord" icon={<Discord />} />
+        <IconButton color="b" variant="soft" title="Go to Youtube" icon={<Youtube />} />
+        <IconButton color="b" variant="soft" title="Go to Linkdin" icon={<Linkdin />} />
       </Flex>
     </Flex>
   )
diff --git a/apps/docs/src/app/_components/home/rtl.tsx b/apps/docs/src/app/_components/home/rtl.tsx
index 602e8e54..11c36c16 100644
--- a/apps/docs/src/app/_components/home/rtl.tsx
+++ b/apps/docs/src/app/_components/home/rtl.tsx
@@ -11,7 +11,7 @@ function Article({ type = 'en' }: { type?: 'ar' | 'en' }) {
           <Avatar variant="dashed" />
           <div>
             <Text>{fullName}</Text>
-            <Text color="bg" low size="xs">
+            <Text color="b" low size="xs">
               {jobTitle}
             </Text>
           </div>
@@ -19,7 +19,7 @@ function Article({ type = 'en' }: { type?: 'ar' | 'en' }) {
         <Button> {type === 'ar' ? 'تابع' : 'Follow'}</Button>
       </Flex>
       <div>
-        <Text className="article--description" color="bg" low size="sm">
+        <Text className="article--description" color="b" low size="sm">
           {description}
         </Text>
       </div>
@@ -54,7 +54,7 @@ export function RTLSupport() {
               />
             </div>
 
-            <Text size="xl" color="bg" low>
+            <Text size="xl" color="b" low>
               Our UI library ensures a welcoming experience for users worldwide.
             </Text>
           </div>
diff --git a/apps/docs/src/app/_components/home/simpleDev.tsx b/apps/docs/src/app/_components/home/simpleDev.tsx
index 42bcd343..78db9082 100644
--- a/apps/docs/src/app/_components/home/simpleDev.tsx
+++ b/apps/docs/src/app/_components/home/simpleDev.tsx
@@ -12,7 +12,7 @@ export function SimplifyDevelopment() {
           {SIMPLE_DEVELOPMENT.map(({ title, id, description }) => (
             <div className="article--item l_f-2xs" key={id}>
               <Heading as="h3">{title}</Heading>
-              <Text transform="capitalize" color="bg" low>
+              <Text transform="capitalize" color="b" low>
                 {description}
               </Text>
             </div>
diff --git a/apps/docs/src/app/_components/home/support.tsx b/apps/docs/src/app/_components/home/support.tsx
index 601ee5ab..32dce6a8 100644
--- a/apps/docs/src/app/_components/home/support.tsx
+++ b/apps/docs/src/app/_components/home/support.tsx
@@ -12,7 +12,7 @@ export function PillarSupport() {
         >
           <SectionHeading subheading="Framework Harmony:" heading="Effortless Integration with Pillar UI" />
 
-          <Text color="bg" low size="xl" className="dark--description">
+          <Text color="b" low size="xl" className="dark--description">
             Pillar UI adapts to your workflow, enhancing your projects with ease. Stay ahead of the curve with support
             for emerging technologies.
           </Text>
@@ -33,7 +33,7 @@ export function PillarSupport() {
           <Text weight="medium" size="lg">
             Lets Getting Start
           </Text>
-          <Text size="sm" color="bg" low>
+          <Text size="sm" color="b" low>
             Build faster and lighter. Experience the power of our streamlined design system.
           </Text>
           <Button>Get Started</Button>
@@ -42,7 +42,7 @@ export function PillarSupport() {
           <Text weight="medium" size="lg">
             Community
           </Text>
-          <Text size="sm" color="bg" low>
+          <Text size="sm" color="b" low>
             Get involved in our community. Everyone is welcome!
           </Text>
           <Flex gap="sm">
diff --git a/apps/docs/src/app/_components/logo.tsx b/apps/docs/src/app/_components/logo.tsx
index 9a6c2071..6d9ca02c 100644
--- a/apps/docs/src/app/_components/logo.tsx
+++ b/apps/docs/src/app/_components/logo.tsx
@@ -5,46 +5,22 @@ const logo = (props: SvgType) => {
   return (
     <svg viewBox="0 0 141 70" {...props} fill="none">
       <path
-        fill="var(--pri-9)"
+        fill="var(--P9)"
         d="M3.8 58.6V15H21c3.3 0 6.2.6 8.5 1.9 2.3 1.2 4.1 3 5.3 5.2 1.3 2.2 1.9 4.8 1.9 7.7 0 2.9-.7 5.4-1.9 7.6a13 13 0 0 1-5.4 5.2 18.3 18.3 0 0 1-8.6 1.9h-11V37h9.5c1.8 0 3.2-.3 4.4-1a6 6 0 0 0 2.6-2.5 8 8 0 0 0 .9-3.8c0-1.5-.3-2.7-.9-3.8-.6-1.1-1.4-2-2.6-2.6-1.2-.6-2.6-.9-4.4-.9H13v36.1H3.8Z"
       />
       <path
-        fill="var(--bg-12)"
+        fill="var(--B12)"
         d="M41.9 58.6V31.3h7.6v27.3h-7.6Zm3.8-30.8c-1.1 0-2.1-.3-2.9-1a3.6 3.6 0 0 1-1.2-2.8c0-1 .4-2 1.2-2.7a4 4 0 0 1 2.9-1.1 4 4 0 0 1 2.9 1.1c.8.8 1.2 1.7 1.2 2.7 0 1-.4 2-1.2 2.7a4 4 0 0 1-3 1.1ZM63 22.3v36.3h-7.6V22.3h7.6Zm13.6 0v36.3h-7.6V22.3h7.6ZM90.5 59c-1.7 0-3.3-.3-4.6-.9a7.5 7.5 0 0 1-3.2-2.7 8.1 8.1 0 0 1-1.2-4.5 8 8 0 0 1 .8-3.8c.6-1 1.3-1.9 2.3-2.5 1-.6 2-1.1 3.3-1.4a25 25 0 0 1 3.8-.7 98 98 0 0 0 3.9-.5c1-.1 1.6-.3 2-.6.5-.3.7-.8.7-1.3V40c0-1.2-.3-2-1-2.7-.7-.6-1.7-.9-3-.9-1.4 0-2.5.3-3.3 1-.8.5-1.3 1.3-1.6 2.2l-7-.6a9.5 9.5 0 0 1 6.2-7.1 17.4 17.4 0 0 1 10.1-.5c1.4.4 2.6 1 3.7 1.7a8 8 0 0 1 3.5 7v18.4h-7.2v-3.8h-.2a7.7 7.7 0 0 1-4.4 3.8c-1 .4-2.2.5-3.6.5Zm2.2-5.2c1.1 0 2.1-.2 3-.6.8-.5 1.5-1 2-1.9.4-.7.7-1.6.7-2.5v-3a4 4 0 0 1-1 .5 17.8 17.8 0 0 1-2.9.6l-1.4.2c-.9.1-1.6.3-2.3.6-.7.3-1.2.7-1.5 1.2-.4.5-.6 1-.6 1.8 0 1 .4 1.8 1.1 2.3.8.6 1.7.8 2.9.8Zm19 4.7V31.3h7.4v4.8h.3A6.6 6.6 0 0 1 126 31a11.4 11.4 0 0 1 2.3.2V38a13.3 13.3 0 0 0-3.2-.4 6 6 0 0 0-3 .8 5.4 5.4 0 0 0-2.8 4.9v15.4h-7.5Z"
       />
-      <rect width="13.4" height="3.2" x="52.2" y="24.4" fill="var(--bg-12)" rx="1.6" />
-      <rect width="10.7" height="3.2" x="53.5" y="27.3" fill="var(--bg-12)" rx="1.6" />
-      <rect width="16.9" height="3.2" x="50.5" y="21.5" fill="var(--bg-12)" rx="1.6" />
-      <rect
-        width="12.4"
-        height="3.1"
-        x="79.5"
-        y="56.6"
-        fill="var(--bg-12)"
-        rx="1.5"
-        transform="rotate(180 79.5 56.6)"
-      />
-      <rect width="10" height="3.1" x="78.2" y="53.8" fill="var(--bg-12)" rx="1.5" transform="rotate(180 78.2 53.8)" />
-      <rect
-        width="15.7"
-        height="3.1"
-        x="81.1"
-        y="59.3"
-        fill="var(--bg-12)"
-        rx="1.5"
-        transform="rotate(180 81.1 59.3)"
-      />
-      <rect
-        width="11.8"
-        height="2.8"
-        x="51.6"
-        y="56.5"
-        fill="var(--bg-12)"
-        rx="1.4"
-        transform="rotate(180 51.6 56.5)"
-      />
-      <rect width="9.4" height="2.8" x="50.5" y="54" fill="var(--bg-12)" rx="1.4" transform="rotate(180 50.5 54)" />
-      <rect width="14.2" height="2.8" x="53.1" y="59.1" fill="var(--bg-12)" rx="1.4" transform="rotate(180 53 59.1)" />
+      <rect width="13.4" height="3.2" x="52.2" y="24.4" fill="var(--B12)" rx="1.6" />
+      <rect width="10.7" height="3.2" x="53.5" y="27.3" fill="var(--B12)" rx="1.6" />
+      <rect width="16.9" height="3.2" x="50.5" y="21.5" fill="var(--B12)" rx="1.6" />
+      <rect width="12.4" height="3.1" x="79.5" y="56.6" fill="var(--B12)" rx="1.5" transform="rotate(180 79.5 56.6)" />
+      <rect width="10" height="3.1" x="78.2" y="53.8" fill="var(--B12)" rx="1.5" transform="rotate(180 78.2 53.8)" />
+      <rect width="15.7" height="3.1" x="81.1" y="59.3" fill="var(--B12)" rx="1.5" transform="rotate(180 81.1 59.3)" />
+      <rect width="11.8" height="2.8" x="51.6" y="56.5" fill="var(--B12)" rx="1.4" transform="rotate(180 51.6 56.5)" />
+      <rect width="9.4" height="2.8" x="50.5" y="54" fill="var(--B12)" rx="1.4" transform="rotate(180 50.5 54)" />
+      <rect width="14.2" height="2.8" x="53.1" y="59.1" fill="var(--B12)" rx="1.4" transform="rotate(180 53 59.1)" />
     </svg>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/alert/alertColor.tsx b/apps/docs/src/app/_components/playground/alert/alertColor.tsx
index 40d2f18d..10444fb6 100644
--- a/apps/docs/src/app/_components/playground/alert/alertColor.tsx
+++ b/apps/docs/src/app/_components/playground/alert/alertColor.tsx
@@ -3,12 +3,12 @@ import { Alert } from '@pillar-ui/core'
 export const AlertColor = () => {
   return (
     <>
-      <Alert title="Success!" color="dan" />
-      <Alert title="Success!" color="war" />
-      <Alert title="Success!" color="suc" />
-      <Alert title="Success!" color="pri" />
-      <Alert title="Success!" color="bg" />
-      <Alert title="Success!" color="sec" />
+      <Alert title="Success!" color="d" />
+      <Alert title="Success!" color="w" />
+      <Alert title="Success!" color="s" />
+      <Alert title="Success!" color="p" />
+      <Alert title="Success!" color="b" />
+      <Alert title="Success!" color="se" />
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/avatar/avatarColor.tsx b/apps/docs/src/app/_components/playground/avatar/avatarColor.tsx
index 08911cfa..15a368e9 100644
--- a/apps/docs/src/app/_components/playground/avatar/avatarColor.tsx
+++ b/apps/docs/src/app/_components/playground/avatar/avatarColor.tsx
@@ -4,13 +4,13 @@ export const AvatarColor = () => {
   return (
     <>
       <Avatar title="John Doe" />
-      <Avatar color="dan" title="John Doe" />
-      <Avatar color="suc" title="John Doe" />
-      <Avatar color="war" title="John Doe" />
-      <Avatar color="sec" title="John Doe" />
-      <Avatar color="pri" title="John Doe" />
-      <Avatar color="bg" title="John Doe" />
-      <Avatar color="opa" title="John Doe" />
+      <Avatar color="d" title="John Doe" />
+      <Avatar color="s" title="John Doe" />
+      <Avatar color="w" title="John Doe" />
+      <Avatar color="se" title="John Doe" />
+      <Avatar color="p" title="John Doe" />
+      <Avatar color="b" title="John Doe" />
+      <Avatar color="o" title="John Doe" />
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/avatar/avatarGroupContext.tsx b/apps/docs/src/app/_components/playground/avatar/avatarGroupContext.tsx
index 1a94ded9..e6cc45b4 100644
--- a/apps/docs/src/app/_components/playground/avatar/avatarGroupContext.tsx
+++ b/apps/docs/src/app/_components/playground/avatar/avatarGroupContext.tsx
@@ -18,7 +18,7 @@ export function AvatarGroupContext() {
         <Avatar title="Success!" />
         <Avatar title="Success!" />
       </AvatarGroup>
-      <AvatarGroup color="dan">
+      <AvatarGroup color="d">
         <Avatar title="Success!" />
         <Avatar title="Success!" />
         <Avatar title="Success!" />
diff --git a/apps/docs/src/app/_components/playground/badge/badgeColor.tsx b/apps/docs/src/app/_components/playground/badge/badgeColor.tsx
index 4d47779f..445ceaa2 100644
--- a/apps/docs/src/app/_components/playground/badge/badgeColor.tsx
+++ b/apps/docs/src/app/_components/playground/badge/badgeColor.tsx
@@ -5,33 +5,33 @@ export const BadgeColor = () => {
   return (
     <>
       <Flex gap="sm">
-        <Badge type="numeric" number={15} max={15} color="dan" />
-        <Badge type="numeric" number={15} max={15} color="suc" />
-        <Badge type="numeric" number={15} max={15} color="war" />
-        <Badge type="numeric" number={15} max={15} color="pri" />
-        <Badge type="numeric" number={15} max={15} color="sec" />
-        <Badge type="numeric" number={15} max={15} color="bg" />
-        <Badge type="numeric" number={15} max={15} color="inf" />
+        <Badge type="numeric" number={15} max={15} color="d" />
+        <Badge type="numeric" number={15} max={15} color="s" />
+        <Badge type="numeric" number={15} max={15} color="w" />
+        <Badge type="numeric" number={15} max={15} color="p" />
+        <Badge type="numeric" number={15} max={15} color="se" />
+        <Badge type="numeric" number={15} max={15} color="b" />
+        <Badge type="numeric" number={15} max={15} color="i" />
         <Badge type="numeric" number={15} max={15} />
       </Flex>
       <Flex gap="sm">
-        <Badge type="icon" color="dan" icon={<Check />} />
-        <Badge type="icon" color="suc" icon={<Check />} />
-        <Badge type="icon" color="war" icon={<Check />} />
-        <Badge type="icon" color="bg" icon={<Check />} />
-        <Badge type="icon" color="inf" icon={<Check />} />
-        <Badge type="icon" color="pri" icon={<Check />} />
-        <Badge type="icon" color="sec" icon={<Check />} />
+        <Badge type="icon" color="d" icon={<Check />} />
+        <Badge type="icon" color="s" icon={<Check />} />
+        <Badge type="icon" color="w" icon={<Check />} />
+        <Badge type="icon" color="b" icon={<Check />} />
+        <Badge type="icon" color="i" icon={<Check />} />
+        <Badge type="icon" color="p" icon={<Check />} />
+        <Badge type="icon" color="se" icon={<Check />} />
         <Badge type="icon" icon={<Check />} />
       </Flex>
       <Flex gap="sm">
-        <Badge type="dot" color="dan" />
-        <Badge type="dot" color="suc" />
-        <Badge type="dot" color="war" />
-        <Badge type="dot" color="pri" />
-        <Badge type="dot" color="sec" />
-        <Badge type="dot" color="bg" />
-        <Badge type="dot" color="inf" />
+        <Badge type="dot" color="d" />
+        <Badge type="dot" color="s" />
+        <Badge type="dot" color="w" />
+        <Badge type="dot" color="p" />
+        <Badge type="dot" color="se" />
+        <Badge type="dot" color="b" />
+        <Badge type="dot" color="i" />
         <Badge type="dot" />
       </Flex>
     </>
diff --git a/apps/docs/src/app/_components/playground/badge/badgeCorner.tsx b/apps/docs/src/app/_components/playground/badge/badgeCorner.tsx
index 105b8145..cd784982 100644
--- a/apps/docs/src/app/_components/playground/badge/badgeCorner.tsx
+++ b/apps/docs/src/app/_components/playground/badge/badgeCorner.tsx
@@ -5,31 +5,31 @@ export const BadgeCorner = () => {
   return (
     <>
       <Flex gap="sm">
-        <Badge type="numeric" corner="sharp" number={15} max={15} color="dan" />
-        <Badge type="numeric" corner="xs" number={15} max={15} color="suc" />
-        <Badge type="numeric" corner="sm" number={15} max={15} color="war" />
-        <Badge type="numeric" corner="md" number={15} max={15} color="sec" />
-        <Badge type="numeric" corner="lg" number={15} max={15} color="sec" />
-        <Badge type="numeric" corner="circle" number={15} max={15} color="pri" />
-        <Badge type="numeric" corner="full" number={15} max={15} color="bg" />
+        <Badge type="numeric" corner="sharp" number={15} max={15} color="d" />
+        <Badge type="numeric" corner="xs" number={15} max={15} color="s" />
+        <Badge type="numeric" corner="sm" number={15} max={15} color="w" />
+        <Badge type="numeric" corner="md" number={15} max={15} color="se" />
+        <Badge type="numeric" corner="lg" number={15} max={15} color="se" />
+        <Badge type="numeric" corner="circle" number={15} max={15} color="p" />
+        <Badge type="numeric" corner="full" number={15} max={15} color="b" />
       </Flex>
       <Flex gap="sm">
-        <Badge type="icon" icon={<Check />} corner="sharp" color="dan" />
-        <Badge type="icon" icon={<Plus />} corner="xs" color="suc" />
-        <Badge type="icon" icon={<Plane />} corner="sm" color="war" />
-        <Badge type="icon" icon={<Apple />} corner="md" color="sec" />
-        <Badge type="icon" icon={<Alien />} corner="lg" color="sec" />
-        <Badge type="icon" icon={<ChevronDown />} corner="circle" color="pri" />
-        <Badge type="icon" icon={<LetterSpacing />} corner="full" color="bg" />
+        <Badge type="icon" icon={<Check />} corner="sharp" color="d" />
+        <Badge type="icon" icon={<Plus />} corner="xs" color="s" />
+        <Badge type="icon" icon={<Plane />} corner="sm" color="w" />
+        <Badge type="icon" icon={<Apple />} corner="md" color="se" />
+        <Badge type="icon" icon={<Alien />} corner="lg" color="se" />
+        <Badge type="icon" icon={<ChevronDown />} corner="circle" color="p" />
+        <Badge type="icon" icon={<LetterSpacing />} corner="full" color="b" />
       </Flex>
       <Flex gap="sm">
-        <Badge type="dot" corner="sharp" color="dan" />
-        <Badge type="dot" corner="xs" color="suc" />
-        <Badge type="dot" corner="sm" color="war" />
-        <Badge type="dot" corner="md" color="sec" />
-        <Badge type="dot" corner="lg" color="sec" />
-        <Badge type="dot" corner="circle" color="pri" />
-        <Badge type="dot" corner="full" color="bg" />
+        <Badge type="dot" corner="sharp" color="d" />
+        <Badge type="dot" corner="xs" color="s" />
+        <Badge type="dot" corner="sm" color="w" />
+        <Badge type="dot" corner="md" color="se" />
+        <Badge type="dot" corner="lg" color="se" />
+        <Badge type="dot" corner="circle" color="p" />
+        <Badge type="dot" corner="full" color="b" />
       </Flex>
     </>
   )
diff --git a/apps/docs/src/app/_components/playground/badge/badgeDot.tsx b/apps/docs/src/app/_components/playground/badge/badgeDot.tsx
index 4cf66aa8..8ad1b36a 100644
--- a/apps/docs/src/app/_components/playground/badge/badgeDot.tsx
+++ b/apps/docs/src/app/_components/playground/badge/badgeDot.tsx
@@ -3,15 +3,15 @@ import { Badge } from '@pillar-ui/core'
 export const BadgeDot = () => {
   return (
     <>
-      <Badge type="dot" color="dan" />
-      <Badge type="dot" color="suc" />
-      <Badge type="dot" color="war" />
-      <Badge type="dot" color="pri" />
-      <Badge type="dot" color="dan" />
-      <Badge type="dot" color="sec" />
-      <Badge type="dot" color="pri" />
-      <Badge type="dot" color="sec" />
-      <Badge type="dot" color="bg" />
+      <Badge type="dot" color="d" />
+      <Badge type="dot" color="s" />
+      <Badge type="dot" color="w" />
+      <Badge type="dot" color="p" />
+      <Badge type="dot" color="d" />
+      <Badge type="dot" color="se" />
+      <Badge type="dot" color="p" />
+      <Badge type="dot" color="se" />
+      <Badge type="dot" color="b" />
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/badge/badgeIcon.tsx b/apps/docs/src/app/_components/playground/badge/badgeIcon.tsx
index 71ea9887..353faeb5 100644
--- a/apps/docs/src/app/_components/playground/badge/badgeIcon.tsx
+++ b/apps/docs/src/app/_components/playground/badge/badgeIcon.tsx
@@ -4,15 +4,15 @@ import { Check, Eye, Plus, Radar, User, Verified, Window, AspectRatio } from '@p
 export const BadgeIcon = () => {
   return (
     <>
-      <Badge type="icon" icon={<Check />} color="dan" />
-      <Badge type="icon" icon={<Eye />} color="suc" />
-      <Badge type="icon" icon={<User />} color="war" />
-      <Badge type="icon" icon={<Plus />} color="pri" />
-      <Badge type="icon" icon={<Verified />} color="dan" />
-      <Badge type="icon" icon={<Radar />} color="sec" />
-      <Badge type="icon" icon={<Window />} color="pri" />
-      <Badge type="icon" icon={<AspectRatio />} color="sec" />
-      <Badge type="icon" icon={<Check />} color="bg" />
+      <Badge type="icon" icon={<Check />} color="d" />
+      <Badge type="icon" icon={<Eye />} color="s" />
+      <Badge type="icon" icon={<User />} color="w" />
+      <Badge type="icon" icon={<Plus />} color="p" />
+      <Badge type="icon" icon={<Verified />} color="d" />
+      <Badge type="icon" icon={<Radar />} color="se" />
+      <Badge type="icon" icon={<Window />} color="p" />
+      <Badge type="icon" icon={<AspectRatio />} color="se" />
+      <Badge type="icon" icon={<Check />} color="b" />
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/badge/badgeNumeric.tsx b/apps/docs/src/app/_components/playground/badge/badgeNumeric.tsx
index b8062554..3f2835e2 100644
--- a/apps/docs/src/app/_components/playground/badge/badgeNumeric.tsx
+++ b/apps/docs/src/app/_components/playground/badge/badgeNumeric.tsx
@@ -3,12 +3,12 @@ import { Badge } from '@pillar-ui/core'
 export const BadgeNumeric = () => {
   return (
     <>
-      <Badge type="numeric" number={15} color="dan" />
-      <Badge type="numeric" number={15} color="dan" />
-      <Badge type="numeric" number={15} max={20} color="dan" />
-      <Badge type="numeric" number={0} color="dan" />
-      <Badge type="numeric" showZero number={0} color="dan" />
-      <Badge type="numeric" number={40} max={20} color="dan" />
+      <Badge type="numeric" number={15} color="d" />
+      <Badge type="numeric" number={15} color="d" />
+      <Badge type="numeric" number={15} max={20} color="d" />
+      <Badge type="numeric" number={0} color="d" />
+      <Badge type="numeric" showZero number={0} color="d" />
+      <Badge type="numeric" number={40} max={20} color="d" />
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/badge/badgeVariant.tsx b/apps/docs/src/app/_components/playground/badge/badgeVariant.tsx
index 0c397b2f..1370e30c 100644
--- a/apps/docs/src/app/_components/playground/badge/badgeVariant.tsx
+++ b/apps/docs/src/app/_components/playground/badge/badgeVariant.tsx
@@ -5,15 +5,15 @@ export const BadgeVariant = () => {
   return (
     <>
       <Flex gap="xs" items="center">
-        <Badge type="dot" variant="solid" color="dan" />
-        <Badge type="numeric" variant="solid" number={15} max={15} color="dan" />
-        <Badge type="icon" variant="solid" icon={<Check />} color="dan" />
+        <Badge type="dot" variant="solid" color="d" />
+        <Badge type="numeric" variant="solid" number={15} max={15} color="d" />
+        <Badge type="icon" variant="solid" icon={<Check />} color="d" />
       </Flex>
 
       <Flex gap="xs" items="center">
-        <Badge type="dot" variant="mixed" color="dan" />
-        <Badge type="numeric" variant="mixed" number={15} max={15} color="dan" />
-        <Badge type="icon" variant="mixed" icon={<Check />} color="dan" />
+        <Badge type="dot" variant="mixed" color="d" />
+        <Badge type="numeric" variant="mixed" number={15} max={15} color="d" />
+        <Badge type="icon" variant="mixed" icon={<Check />} color="d" />
       </Flex>
     </>
   )
diff --git a/apps/docs/src/app/_components/playground/blockquote/blockquoteCite.tsx b/apps/docs/src/app/_components/playground/blockquote/blockquoteCite.tsx
index a4c7ada4..cb5b41e5 100644
--- a/apps/docs/src/app/_components/playground/blockquote/blockquoteCite.tsx
+++ b/apps/docs/src/app/_components/playground/blockquote/blockquoteCite.tsx
@@ -3,14 +3,14 @@ import { Blockquote, Text } from '@pillar-ui/core'
 export const BlockquoteCite = () => {
   return (
     <div className="l_f-md">
-      <Blockquote color="dan">
+      <Blockquote color="d">
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro corporis autem minima animi, sequi
         exercitationem fugit mollitia ducimus consequatur praesentium, inventore laudantium ullam aliquam saepe?
         Repellat libero quibusdam repellendus quisquam?
         <Text as="cite">Hamza Miloud Amar</Text>
       </Blockquote>
 
-      <Blockquote color="dan">
+      <Blockquote color="d">
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro corporis autem minima animi, sequi
         exercitationem fugit mollitia ducimus consequatur praesentium, inventore laudantium ullam aliquam saepe?
         Repellat libero quibusdam repellendus quisquam?
@@ -19,7 +19,7 @@ export const BlockquoteCite = () => {
         </Text>
       </Blockquote>
 
-      <Blockquote color="dan">
+      <Blockquote color="d">
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro corporis autem minima animi, sequi
         exercitationem fugit mollitia ducimus consequatur praesentium, inventore laudantium ullam aliquam saepe?
         Repellat libero quibusdam repellendus quisquam?
diff --git a/apps/docs/src/app/_components/playground/blockquote/blockquoteColor.tsx b/apps/docs/src/app/_components/playground/blockquote/blockquoteColor.tsx
index b1f51df2..7380f192 100644
--- a/apps/docs/src/app/_components/playground/blockquote/blockquoteColor.tsx
+++ b/apps/docs/src/app/_components/playground/blockquote/blockquoteColor.tsx
@@ -3,22 +3,22 @@ import { Blockquote } from '@pillar-ui/core'
 export const BlockquoteColor = () => {
   return (
     <>
-      <Blockquote color="dan" cite="John Doe">
+      <Blockquote color="d" cite="John Doe">
         This is the quoted text.
       </Blockquote>
-      <Blockquote color="war" cite="John Doe">
+      <Blockquote color="w" cite="John Doe">
         This is the quoted text.
       </Blockquote>
-      <Blockquote color="suc" cite="John Doe">
+      <Blockquote color="s" cite="John Doe">
         This is the quoted text.
       </Blockquote>
-      <Blockquote color="pri" cite="John Doe">
+      <Blockquote color="p" cite="John Doe">
         This is the quoted text.
       </Blockquote>
-      <Blockquote color="sec" cite="John Doe">
+      <Blockquote color="se" cite="John Doe">
         This is the quoted text.
       </Blockquote>
-      <Blockquote color="bg" cite="John Doe">
+      <Blockquote color="b" cite="John Doe">
         This is the quoted text.
       </Blockquote>
     </>
diff --git a/apps/docs/src/app/_components/playground/breadcrumb/breadcrumbColor.tsx b/apps/docs/src/app/_components/playground/breadcrumb/breadcrumbColor.tsx
index 77af6cd9..837cf120 100644
--- a/apps/docs/src/app/_components/playground/breadcrumb/breadcrumbColor.tsx
+++ b/apps/docs/src/app/_components/playground/breadcrumb/breadcrumbColor.tsx
@@ -10,7 +10,7 @@ const breadcrumbsItems = [
 export const BreadcrumbColor = () => {
   return (
     <>
-      <Breadcrumb color="dan">
+      <Breadcrumb color="d">
         {breadcrumbsItems.map(({ name, link, current }) => (
           <BreadcrumbItem current={current} key={name} link={link}>
             {name}
@@ -18,7 +18,7 @@ export const BreadcrumbColor = () => {
         ))}
       </Breadcrumb>
 
-      <Breadcrumb color="war">
+      <Breadcrumb color="w">
         {breadcrumbsItems.map(({ name, link, current }) => (
           <BreadcrumbItem current={current} key={name} link={link}>
             {name}
@@ -26,7 +26,7 @@ export const BreadcrumbColor = () => {
         ))}
       </Breadcrumb>
 
-      <Breadcrumb color="suc">
+      <Breadcrumb color="s">
         {breadcrumbsItems.map(({ name, link, current }) => (
           <BreadcrumbItem current={current} key={name} link={link}>
             {name}
@@ -34,7 +34,7 @@ export const BreadcrumbColor = () => {
         ))}
       </Breadcrumb>
 
-      <Breadcrumb color="sec">
+      <Breadcrumb color="se">
         {breadcrumbsItems.map(({ name, link, current }) => (
           <BreadcrumbItem current={current} key={name} link={link}>
             {name}
@@ -42,7 +42,7 @@ export const BreadcrumbColor = () => {
         ))}
       </Breadcrumb>
 
-      <Breadcrumb color="pri">
+      <Breadcrumb color="p">
         {breadcrumbsItems.map(({ name, link, current }) => (
           <BreadcrumbItem current={current} key={name} link={link}>
             {name}
diff --git a/apps/docs/src/app/_components/playground/button/buttonColor.tsx b/apps/docs/src/app/_components/playground/button/buttonColor.tsx
index 91758949..1d6a19a3 100644
--- a/apps/docs/src/app/_components/playground/button/buttonColor.tsx
+++ b/apps/docs/src/app/_components/playground/button/buttonColor.tsx
@@ -5,21 +5,21 @@ export function ButtonColor() {
   return (
     <>
       <Flex gap="sm" items="center" wrap>
-        <Button color="dan">Hello World</Button>
-        <Button color="war">Hello World</Button>
-        <Button color="suc">Hello World</Button>
-        <Button color="pri">Hello World</Button>
-        <Button color="sec">Hello World</Button>
+        <Button color="d">Hello World</Button>
+        <Button color="w">Hello World</Button>
+        <Button color="s">Hello World</Button>
+        <Button color="p">Hello World</Button>
+        <Button color="se">Hello World</Button>
         <Button color="bg">Hello World</Button>
       </Flex>
 
       <Flex gap="sm" items="center" wrap>
-        <IconButton title="hello" variant="solid" icon={<ZoomPlus />} color="dan" />
-        <IconButton title="hello" variant="solid" icon={<ZoomPlus />} color="war" />
-        <IconButton title="hello" variant="solid" icon={<ZoomPlus />} color="suc" />
-        <IconButton title="hello" variant="solid" icon={<ZoomPlus />} color="pri" />
-        <IconButton title="hello" variant="solid" icon={<ZoomPlus />} color="sec" />
-        <IconButton title="hello" variant="solid" icon={<ZoomPlus />} color="bg" />
+        <IconButton title="hello" variant="solid" icon={<ZoomPlus />} color="d" />
+        <IconButton title="hello" variant="solid" icon={<ZoomPlus />} color="w" />
+        <IconButton title="hello" variant="solid" icon={<ZoomPlus />} color="s" />
+        <IconButton title="hello" variant="solid" icon={<ZoomPlus />} color="p" />
+        <IconButton title="hello" variant="solid" icon={<ZoomPlus />} color="se" />
+        <IconButton title="hello" variant="solid" icon={<ZoomPlus />} color="b" />
       </Flex>
     </>
   )
diff --git a/apps/docs/src/app/_components/playground/button/buttonFluid.tsx b/apps/docs/src/app/_components/playground/button/buttonFluid.tsx
index 33872be7..6a0cc47c 100644
--- a/apps/docs/src/app/_components/playground/button/buttonFluid.tsx
+++ b/apps/docs/src/app/_components/playground/button/buttonFluid.tsx
@@ -3,19 +3,19 @@ import { Button } from '@pillar-ui/core'
 export function ButtonFluid() {
   return (
     <>
-      <Button fluid color="dan">
+      <Button fluid color="d">
         Hello World
       </Button>
-      <Button fluid color="war">
+      <Button fluid color="w">
         Hello World
       </Button>
-      <Button fluid color="suc">
+      <Button fluid color="s">
         Hello World
       </Button>
-      <Button fluid color="pri">
+      <Button fluid color="p">
         Hello World
       </Button>
-      <Button fluid color="sec">
+      <Button fluid color="se">
         Hello World
       </Button>
       <Button fluid color="bg">
diff --git a/apps/docs/src/app/_components/playground/button/buttonState.tsx b/apps/docs/src/app/_components/playground/button/buttonState.tsx
index 6aeea901..1a98a1b0 100644
--- a/apps/docs/src/app/_components/playground/button/buttonState.tsx
+++ b/apps/docs/src/app/_components/playground/button/buttonState.tsx
@@ -3,13 +3,13 @@ import { Button } from '@pillar-ui/core'
 export function ButtonState() {
   return (
     <>
-      <Button state="idle" color="suc">
+      <Button state="idle" color="s">
         Idle
       </Button>
-      <Button state="loading" color="suc">
+      <Button state="loading" color="s">
         Loading
       </Button>
-      <Button disabled color="suc">
+      <Button disabled color="s">
         Disabled
       </Button>
     </>
diff --git a/apps/docs/src/app/_components/playground/button/buttonVariant.tsx b/apps/docs/src/app/_components/playground/button/buttonVariant.tsx
index cc8bca37..341e03a9 100644
--- a/apps/docs/src/app/_components/playground/button/buttonVariant.tsx
+++ b/apps/docs/src/app/_components/playground/button/buttonVariant.tsx
@@ -4,48 +4,48 @@ export function ButtonVariant() {
   return (
     <>
       <>
-        <Button color="suc" variant="link">
+        <Button color="s" variant="link">
           Green
         </Button>
-        <Button color="suc" variant="mixed">
+        <Button color="s" variant="mixed">
           Green
         </Button>
-        <Button color="suc" variant="outline">
+        <Button color="s" variant="outline">
           Green
         </Button>
-        <Button color="suc" variant="shadow">
+        <Button color="s" variant="shadow">
           Green
         </Button>
-        <Button color="suc" variant="soft">
+        <Button color="s" variant="soft">
           Green
         </Button>
-        <Button color="suc" variant="solid">
+        <Button color="s" variant="solid">
           Green
         </Button>
-        <Button color="suc" variant="text">
+        <Button color="s" variant="text">
           Green
         </Button>
       </>
       <>
-        <Button color="suc" variant="link">
+        <Button color="s" variant="link">
           Green
         </Button>
-        <Button color="suc" variant="mixed">
+        <Button color="s" variant="mixed">
           Green
         </Button>
-        <Button color="suc" variant="outline">
+        <Button color="s" variant="outline">
           Green
         </Button>
-        <Button color="suc" variant="shadow">
+        <Button color="s" variant="shadow">
           Green
         </Button>
-        <Button color="suc" variant="soft">
+        <Button color="s" variant="soft">
           Green
         </Button>
-        <Button color="suc" variant="solid">
+        <Button color="s" variant="solid">
           Green
         </Button>
-        <Button color="suc" variant="text">
+        <Button color="s" variant="text">
           Green
         </Button>
       </>
diff --git a/apps/docs/src/app/_components/playground/checkbox/checkboxColor.tsx b/apps/docs/src/app/_components/playground/checkbox/checkboxColor.tsx
index c3abe664..d11535f6 100644
--- a/apps/docs/src/app/_components/playground/checkbox/checkboxColor.tsx
+++ b/apps/docs/src/app/_components/playground/checkbox/checkboxColor.tsx
@@ -4,12 +4,12 @@ export const CheckboxColor = () => {
   return (
     <>
       <Checkbox name="hello" label="Options 1" />
-      <Checkbox name="hello" label="Options 2" color="dan" />
-      <Checkbox name="hello" label="Options 3" color="suc" />
-      <Checkbox name="hello" label="Options 4" color="war" />
-      <Checkbox name="hello" label="Options 5" color="pri" />
-      <Checkbox name="hello" label="Options 6" color="sec" />
-      <Checkbox name="hello" label="Options 7" color="bg" />
+      <Checkbox name="hello" label="Options 2" color="d" />
+      <Checkbox name="hello" label="Options 3" color="s" />
+      <Checkbox name="hello" label="Options 4" color="w" />
+      <Checkbox name="hello" label="Options 5" color="p" />
+      <Checkbox name="hello" label="Options 6" color="se" />
+      <Checkbox name="hello" label="Options 7" color="b" />
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/checkbox/checkboxDefaultChecked.tsx b/apps/docs/src/app/_components/playground/checkbox/checkboxDefaultChecked.tsx
index cb09d438..ae142dae 100644
--- a/apps/docs/src/app/_components/playground/checkbox/checkboxDefaultChecked.tsx
+++ b/apps/docs/src/app/_components/playground/checkbox/checkboxDefaultChecked.tsx
@@ -3,12 +3,12 @@ import { Checkbox } from '@pillar-ui/core'
 export const CheckboxDefaultChecked = () => {
   return (
     <>
-      <Checkbox defaultChecked name="hello" label="Hello" color="dan" />
-      <Checkbox defaultChecked name="hello" label="Hello" color="suc" />
-      <Checkbox defaultChecked name="hello" label="Hello" color="war" />
-      <Checkbox defaultChecked name="hello" label="Hello" color="pri" />
-      <Checkbox defaultChecked name="hello" label="Hello" color="sec" />
-      <Checkbox defaultChecked name="hello" label="Hello" color="bg" />
+      <Checkbox defaultChecked name="hello" label="Hello" color="d" />
+      <Checkbox defaultChecked name="hello" label="Hello" color="s" />
+      <Checkbox defaultChecked name="hello" label="Hello" color="w" />
+      <Checkbox defaultChecked name="hello" label="Hello" color="p" />
+      <Checkbox defaultChecked name="hello" label="Hello" color="se" />
+      <Checkbox defaultChecked name="hello" label="Hello" color="b" />
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/checkbox/checkboxDisabled.tsx b/apps/docs/src/app/_components/playground/checkbox/checkboxDisabled.tsx
index 01bd49f4..596102c3 100644
--- a/apps/docs/src/app/_components/playground/checkbox/checkboxDisabled.tsx
+++ b/apps/docs/src/app/_components/playground/checkbox/checkboxDisabled.tsx
@@ -4,20 +4,20 @@ export const CheckboxDisabled = () => {
   return (
     <>
       <Flex gap="sm" items="center">
-        <Checkbox disabled name="hello" label="Hello" color="dan" />
-        <Checkbox disabled name="hello" label="Hello" color="suc" />
-        <Checkbox disabled name="hello" label="Hello" color="war" />
-        <Checkbox disabled name="hello" label="Hello" color="pri" />
-        <Checkbox disabled name="hello" label="Hello" color="sec" />
-        <Checkbox disabled name="hello" label="Hello" color="bg" />
+        <Checkbox disabled name="hello" label="Hello" color="d" />
+        <Checkbox disabled name="hello" label="Hello" color="s" />
+        <Checkbox disabled name="hello" label="Hello" color="w" />
+        <Checkbox disabled name="hello" label="Hello" color="p" />
+        <Checkbox disabled name="hello" label="Hello" color="se" />
+        <Checkbox disabled name="hello" label="Hello" color="b" />
       </Flex>
       <Flex gap="sm" items="center">
-        <Checkbox disabled defaultChecked name="hello" label="Hello" color="dan" />
-        <Checkbox disabled defaultChecked name="hello" label="Hello" color="suc" />
-        <Checkbox disabled defaultChecked name="hello" label="Hello" color="war" />
-        <Checkbox disabled defaultChecked name="hello" label="Hello" color="pri" />
-        <Checkbox disabled defaultChecked name="hello" label="Hello" color="sec" />
-        <Checkbox disabled defaultChecked name="hello" label="Hello" color="bg" />
+        <Checkbox disabled defaultChecked name="hello" label="Hello" color="d" />
+        <Checkbox disabled defaultChecked name="hello" label="Hello" color="s" />
+        <Checkbox disabled defaultChecked name="hello" label="Hello" color="w" />
+        <Checkbox disabled defaultChecked name="hello" label="Hello" color="p" />
+        <Checkbox disabled defaultChecked name="hello" label="Hello" color="se" />
+        <Checkbox disabled defaultChecked name="hello" label="Hello" color="b" />
       </Flex>
     </>
   )
diff --git a/apps/docs/src/app/_components/playground/chips/chipsColor.tsx b/apps/docs/src/app/_components/playground/chips/chipsColor.tsx
index e9f0ae4e..006c914d 100644
--- a/apps/docs/src/app/_components/playground/chips/chipsColor.tsx
+++ b/apps/docs/src/app/_components/playground/chips/chipsColor.tsx
@@ -3,11 +3,11 @@ import { Chips } from '@pillar-ui/core'
 export const ChipsColor = () => {
   return (
     <>
-      <Chips color="dan">Hello</Chips>
-      <Chips color="suc">Hello</Chips>
-      <Chips color="war">Hello</Chips>
-      <Chips color="pri">Hello</Chips>
-      <Chips color="sec">Hello</Chips>
+      <Chips color="d">Hello</Chips>
+      <Chips color="s">Hello</Chips>
+      <Chips color="w">Hello</Chips>
+      <Chips color="p">Hello</Chips>
+      <Chips color="se">Hello</Chips>
       <Chips color="bg">Hello</Chips>
     </>
   )
diff --git a/apps/docs/src/app/_components/playground/code/codeColor.tsx b/apps/docs/src/app/_components/playground/code/codeColor.tsx
index a4ae63e5..d40dc964 100644
--- a/apps/docs/src/app/_components/playground/code/codeColor.tsx
+++ b/apps/docs/src/app/_components/playground/code/codeColor.tsx
@@ -3,12 +3,12 @@ import { Code } from '@pillar-ui/core'
 export const CodeColor = () => {
   return (
     <>
-      <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
-      <Code color="suc">{`console.log('Hello world Every thing is OK')`}</Code>
-      <Code color="war">{`console.log('Hello world Every thing is OK')`}</Code>
-      <Code color="pri">{`console.log('Hello world Every thing is OK')`}</Code>
+      <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
+      <Code color="s">{`console.log('Hello world Every thing is OK')`}</Code>
+      <Code color="w">{`console.log('Hello world Every thing is OK')`}</Code>
+      <Code color="p">{`console.log('Hello world Every thing is OK')`}</Code>
       <Code color="bg">{`console.log('Hello world Every thing is OK')`}</Code>
-      <Code color="sec">{`console.log('Hello world Every thing is OK')`}</Code>
+      <Code color="se">{`console.log('Hello world Every thing is OK')`}</Code>
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/form/FormGroup.tsx b/apps/docs/src/app/_components/playground/form/FormGroup.tsx
index b700bdf3..6e0d5169 100644
--- a/apps/docs/src/app/_components/playground/form/FormGroup.tsx
+++ b/apps/docs/src/app/_components/playground/form/FormGroup.tsx
@@ -29,17 +29,17 @@ export const FormGroupTitle = () => {
 export const FormGroupColors = () => {
   return (
     <>
-      <FormGroup title="User" color="dan">
+      <FormGroup title="User" color="d">
         <BaseFormController label="Name" />
         <BaseFormController label="Age" />
         <BaseFormController label="Age" />
       </FormGroup>
-      <FormGroup title="User" color="suc">
+      <FormGroup title="User" color="s">
         <BaseFormController label="Name" />
         <BaseFormController label="Age" />
         <BaseFormController label="Age" />
       </FormGroup>
-      <FormGroup title="User" color="sec">
+      <FormGroup title="User" color="se">
         <BaseFormController label="Name" />
         <BaseFormController label="Age" />
         <BaseFormController label="Age" />
diff --git a/apps/docs/src/app/_components/playground/form/input/inputColor.tsx b/apps/docs/src/app/_components/playground/form/input/inputColor.tsx
index 0d96298b..f3b04398 100644
--- a/apps/docs/src/app/_components/playground/form/input/inputColor.tsx
+++ b/apps/docs/src/app/_components/playground/form/input/inputColor.tsx
@@ -4,13 +4,13 @@ import { User } from '@pillar-ui/icons'
 export const InputColor = () => {
   return (
     <>
-      <Input color="pri" variant="bordered" autoFocus placeholder="Focus" />
-      <Input color="war" variant="bordered" autoFocus placeholder="Normal" />
-      <Input color="sec" variant="outline" autoFocus placeholder="Disabled" />
-      <Input color="bg" variant="filled" autoFocus placeholder="isInvalid" />
-      <Input color="suc" variant="bordered" autoFocus prefixInput={<User width="16" />} placeholder="Placeholder" />
+      <Input color="p" variant="bordered" autoFocus placeholder="Focus" />
+      <Input color="w" variant="bordered" autoFocus placeholder="Normal" />
+      <Input color="se" variant="outline" autoFocus placeholder="Disabled" />
+      <Input color="b" variant="filled" autoFocus placeholder="isInvalid" />
+      <Input color="s" variant="bordered" autoFocus prefixInput={<User width="16" />} placeholder="Placeholder" />
       <Input
-        color="dan"
+        color="d"
         variant="bordered"
         autoFocus
         prefixInput={'https://'}
diff --git a/apps/docs/src/app/_components/playground/form/inputFile/inputFileColor.tsx b/apps/docs/src/app/_components/playground/form/inputFile/inputFileColor.tsx
index b9361e42..e84eace7 100644
--- a/apps/docs/src/app/_components/playground/form/inputFile/inputFileColor.tsx
+++ b/apps/docs/src/app/_components/playground/form/inputFile/inputFileColor.tsx
@@ -3,10 +3,10 @@ import { InputFile } from '@pillar-ui/core'
 export const InputFileColor = () => {
   return (
     <>
-      <InputFile color="pri" variant="bordered" autoFocus />
-      <InputFile color="war" variant="bordered" autoFocus />
-      <InputFile color="sec" variant="outline" autoFocus />
-      <InputFile color="bg" variant="filled" autoFocus />
+      <InputFile color="p" variant="bordered" autoFocus />
+      <InputFile color="w" variant="bordered" autoFocus />
+      <InputFile color="se" variant="outline" autoFocus />
+      <InputFile color="b" variant="filled" autoFocus />
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/form/inputNumber/inputNumberColor.tsx b/apps/docs/src/app/_components/playground/form/inputNumber/inputNumberColor.tsx
index cca9e267..97a2550b 100644
--- a/apps/docs/src/app/_components/playground/form/inputNumber/inputNumberColor.tsx
+++ b/apps/docs/src/app/_components/playground/form/inputNumber/inputNumberColor.tsx
@@ -4,17 +4,11 @@ import { User } from '@pillar-ui/icons'
 export const InputNumberColor = () => {
   return (
     <>
-      <InputNumber color="pri" variant="bordered" autoFocus placeholder="Focus" />
-      <InputNumber color="war" variant="bordered" autoFocus placeholder="Normal" />
-      <InputNumber color="sec" variant="outline" autoFocus placeholder="Disabled" />
-      <InputNumber color="bg" variant="filled" autoFocus placeholder="isInvalid" />
-      <InputNumber
-        color="suc"
-        variant="bordered"
-        autoFocus
-        prefixInput={<User width="16" />}
-        placeholder="Placeholder"
-      />
+      <InputNumber color="p" variant="bordered" autoFocus placeholder="Focus" />
+      <InputNumber color="w" variant="bordered" autoFocus placeholder="Normal" />
+      <InputNumber color="se" variant="outline" autoFocus placeholder="Disabled" />
+      <InputNumber color="b" variant="filled" autoFocus placeholder="isInvalid" />
+      <InputNumber color="s" variant="bordered" autoFocus prefixInput={<User width="16" />} placeholder="Placeholder" />
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/form/inputPassword/inputPasswordColor.tsx b/apps/docs/src/app/_components/playground/form/inputPassword/inputPasswordColor.tsx
index 8c2226cb..6dfd2f57 100644
--- a/apps/docs/src/app/_components/playground/form/inputPassword/inputPasswordColor.tsx
+++ b/apps/docs/src/app/_components/playground/form/inputPassword/inputPasswordColor.tsx
@@ -4,12 +4,12 @@ import { User } from '@pillar-ui/icons'
 export const InputPasswordColor = () => {
   return (
     <>
-      <InputPassword color="pri" variant="bordered" autoFocus placeholder="Focus" />
-      <InputPassword color="war" variant="bordered" autoFocus placeholder="Normal" />
-      <InputPassword color="sec" variant="outline" autoFocus placeholder="Disabled" />
-      <InputPassword color="bg" variant="filled" autoFocus placeholder="isInvalid" />
+      <InputPassword color="p" variant="bordered" autoFocus placeholder="Focus" />
+      <InputPassword color="w" variant="bordered" autoFocus placeholder="Normal" />
+      <InputPassword color="se" variant="outline" autoFocus placeholder="Disabled" />
+      <InputPassword color="b" variant="filled" autoFocus placeholder="isInvalid" />
       <InputPassword
-        color="suc"
+        color="s"
         variant="bordered"
         autoFocus
         prefixInput={<User width="16" />}
diff --git a/apps/docs/src/app/_components/playground/form/inputSearch/inputSearchColor.tsx b/apps/docs/src/app/_components/playground/form/inputSearch/inputSearchColor.tsx
index 0ef545da..6925a74e 100644
--- a/apps/docs/src/app/_components/playground/form/inputSearch/inputSearchColor.tsx
+++ b/apps/docs/src/app/_components/playground/form/inputSearch/inputSearchColor.tsx
@@ -4,17 +4,11 @@ import { User } from '@pillar-ui/icons'
 export const InputSearchColor = () => {
   return (
     <>
-      <InputSearch color="pri" variant="bordered" autoFocus placeholder="Focus" />
-      <InputSearch color="war" variant="bordered" autoFocus placeholder="Normal" />
-      <InputSearch color="sec" variant="outline" autoFocus placeholder="Disabled" />
-      <InputSearch color="bg" variant="filled" autoFocus placeholder="isInvalid" />
-      <InputSearch
-        color="suc"
-        variant="bordered"
-        autoFocus
-        prefixInput={<User width="16" />}
-        placeholder="Placeholder"
-      />
+      <InputSearch color="p" variant="bordered" autoFocus placeholder="Focus" />
+      <InputSearch color="w" variant="bordered" autoFocus placeholder="Normal" />
+      <InputSearch color="se" variant="outline" autoFocus placeholder="Disabled" />
+      <InputSearch color="b" variant="filled" autoFocus placeholder="isInvalid" />
+      <InputSearch color="s" variant="bordered" autoFocus prefixInput={<User width="16" />} placeholder="Placeholder" />
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/form/pinInput/pinInputColor.tsx b/apps/docs/src/app/_components/playground/form/pinInput/pinInputColor.tsx
index d646cd50..1699393f 100644
--- a/apps/docs/src/app/_components/playground/form/pinInput/pinInputColor.tsx
+++ b/apps/docs/src/app/_components/playground/form/pinInput/pinInputColor.tsx
@@ -3,10 +3,10 @@ import { PinInput } from '@pillar-ui/core'
 export const PinInputColor = () => {
   return (
     <>
-      <PinInput color="pri" />
-      <PinInput color="war" />
-      <PinInput color="sec" />
-      <PinInput color="bg" />
+      <PinInput color="p" />
+      <PinInput color="w" />
+      <PinInput color="se" />
+      <PinInput color="b" />
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/form/select/selectColor.tsx b/apps/docs/src/app/_components/playground/form/select/selectColor.tsx
index 616395cd..dde7bbcb 100644
--- a/apps/docs/src/app/_components/playground/form/select/selectColor.tsx
+++ b/apps/docs/src/app/_components/playground/form/select/selectColor.tsx
@@ -14,19 +14,19 @@ const Options = () => {
 export const SelectColor = () => {
   return (
     <>
-      <Select color="dan">
+      <Select color="d">
         <Options />
       </Select>
-      <Select color="war">
+      <Select color="w">
         <Options />
       </Select>
-      <Select color="suc">
+      <Select color="s">
         <Options />
       </Select>
-      <Select color="sec">
+      <Select color="se">
         <Options />
       </Select>
-      <Select color="pri">
+      <Select color="p">
         <Options />
       </Select>
       <Select color="bg">
diff --git a/apps/docs/src/app/_components/playground/form/textarea/textareaColor.tsx b/apps/docs/src/app/_components/playground/form/textarea/textareaColor.tsx
index 71820e79..bfb6649f 100644
--- a/apps/docs/src/app/_components/playground/form/textarea/textareaColor.tsx
+++ b/apps/docs/src/app/_components/playground/form/textarea/textareaColor.tsx
@@ -4,13 +4,13 @@ import { User } from '@pillar-ui/icons'
 export const TextareaColor = () => {
   return (
     <>
-      <Textarea color="pri" variant="bordered" autoFocus placeholder="Focus" />
-      <Textarea color="war" variant="bordered" autoFocus placeholder="Normal" />
-      <Textarea color="sec" variant="outline" autoFocus placeholder="Disabled" />
-      <Textarea color="bg" variant="filled" autoFocus placeholder="isInvalid" />
-      <Textarea color="suc" variant="bordered" autoFocus prefixInput={<User width="16" />} placeholder="Placeholder" />
+      <Textarea color="p" variant="bordered" autoFocus placeholder="Focus" />
+      <Textarea color="w" variant="bordered" autoFocus placeholder="Normal" />
+      <Textarea color="se" variant="outline" autoFocus placeholder="Disabled" />
+      <Textarea color="b" variant="filled" autoFocus placeholder="isInvalid" />
+      <Textarea color="s" variant="bordered" autoFocus prefixInput={<User width="16" />} placeholder="Placeholder" />
       <Textarea
-        color="dan"
+        color="d"
         variant="bordered"
         autoFocus
         prefixInput={'https://'}
diff --git a/apps/docs/src/app/_components/playground/grid/grid.tsx b/apps/docs/src/app/_components/playground/grid/grid.tsx
index 1fbceb54..35442312 100644
--- a/apps/docs/src/app/_components/playground/grid/grid.tsx
+++ b/apps/docs/src/app/_components/playground/grid/grid.tsx
@@ -22,12 +22,12 @@ const boxes = Array.from({ length: 5 }, (_, index) => (
 export const GridPlayGround = () => {
   return (
     <Paper className="playground" border p="sm" background="bg-3" corner="sm">
-      <Avatar title="Success!" color="dan" />
-      <Avatar title="Success!" color="war" />
-      <Avatar title="Success!" color="suc" />
-      <Avatar title="Success!" color="pri" />
-      <Avatar title="Success!" color="bg" />
-      <Avatar title="Success!" color="sec" />
+      <Avatar title="Success!" color="d" />
+      <Avatar title="Success!" color="w" />
+      <Avatar title="Success!" color="s" />
+      <Avatar title="Success!" color="p" />
+      <Avatar title="Success!" color="b" />
+      <Avatar title="Success!" color="se" />
     </Paper>
   )
 }
@@ -109,19 +109,19 @@ export const Item = () => {
   return (
     <Paper className="playground" border p="sm" background="bg-3" corner="sm">
       <Grid grid="100px 1fr 100px x 2rem minmax(6rem, 1fr) 2rem" gap="sm">
-        <GridItem placement="2/4" style={{ background: 'var(--bg-8)' }}>
+        <GridItem placement="2/4" style={{ background: 'var(--B8)' }}>
           Header
         </GridItem>
-        <GridItem placement="span 1 x 1 / span 3" style={{ background: 'var(--bg-8)' }}>
+        <GridItem placement="span 1 x 1 / span 3" style={{ background: 'var(--B8)' }}>
           sidebar
         </GridItem>
-        <GridItem placement="2 / 3" style={{ background: 'var(--bg-8)' }}>
+        <GridItem placement="2 / 3" style={{ background: 'var(--B8)' }}>
           main
         </GridItem>
-        <GridItem placement="3 / 4" style={{ background: 'var(--bg-8)' }}>
+        <GridItem placement="3 / 4" style={{ background: 'var(--B8)' }}>
           sidebar
         </GridItem>
-        <GridItem placement="2 / span 2" style={{ background: 'var(--bg-8)' }}>
+        <GridItem placement="2 / span 2" style={{ background: 'var(--B8)' }}>
           Footer
         </GridItem>
       </Grid>
@@ -133,19 +133,19 @@ export const GridGrid = () => {
   return (
     <Paper className="playground" border p="sm" background="bg-3" corner="sm">
       <Grid grid="repeat(5, 1fr)" gap="sm">
-        <div style={{ height: '40px', background: 'var(--bg-6)' }} />
-        <div style={{ height: '40px', background: 'var(--bg-6)' }} />
-        <div style={{ height: '40px', background: 'var(--bg-6)' }} />
-        <div style={{ height: '40px', background: 'var(--bg-6)' }} />
-        <div style={{ height: '40px', background: 'var(--bg-6)' }} />
-        <div style={{ height: '40px', background: 'var(--bg-6)' }} />
-        <div style={{ height: '40px', background: 'var(--bg-6)' }} />
-        <div style={{ height: '40px', background: 'var(--bg-6)' }} />
-        <div style={{ height: '40px', background: 'var(--bg-6)' }} />
-        <div style={{ height: '40px', background: 'var(--bg-6)' }} />
-        <div style={{ height: '40px', background: 'var(--bg-6)' }} />
-        <div style={{ height: '40px', background: 'var(--bg-6)' }} />
-        <div style={{ height: '40px', background: 'var(--bg-6)' }} />
+        <div style={{ height: '40px', background: 'var(--B6)' }} />
+        <div style={{ height: '40px', background: 'var(--B6)' }} />
+        <div style={{ height: '40px', background: 'var(--B6)' }} />
+        <div style={{ height: '40px', background: 'var(--B6)' }} />
+        <div style={{ height: '40px', background: 'var(--B6)' }} />
+        <div style={{ height: '40px', background: 'var(--B6)' }} />
+        <div style={{ height: '40px', background: 'var(--B6)' }} />
+        <div style={{ height: '40px', background: 'var(--B6)' }} />
+        <div style={{ height: '40px', background: 'var(--B6)' }} />
+        <div style={{ height: '40px', background: 'var(--B6)' }} />
+        <div style={{ height: '40px', background: 'var(--B6)' }} />
+        <div style={{ height: '40px', background: 'var(--B6)' }} />
+        <div style={{ height: '40px', background: 'var(--B6)' }} />
       </Grid>
     </Paper>
   )
diff --git a/apps/docs/src/app/_components/playground/heading/headingColor.tsx b/apps/docs/src/app/_components/playground/heading/headingColor.tsx
index 3d15575b..06b36abe 100644
--- a/apps/docs/src/app/_components/playground/heading/headingColor.tsx
+++ b/apps/docs/src/app/_components/playground/heading/headingColor.tsx
@@ -3,29 +3,29 @@ import { Heading } from '@pillar-ui/core'
 export const HeadingColor = () => {
   return (
     <>
-      <Heading color="dan">Hello World</Heading>
-      <Heading color="suc">Hello World</Heading>
-      <Heading color="war">Hello World</Heading>
-      <Heading color="pri">Hello World</Heading>
+      <Heading color="d">Hello World</Heading>
+      <Heading color="s">Hello World</Heading>
+      <Heading color="w">Hello World</Heading>
+      <Heading color="p">Hello World</Heading>
       <Heading color="bg">Hello World</Heading>
-      <Heading color="sec">Hello World</Heading>
+      <Heading color="se">Hello World</Heading>
 
-      <Heading low color="dan">
+      <Heading low color="d">
         Hello World
       </Heading>
-      <Heading low color="suc">
+      <Heading low color="s">
         Hello World
       </Heading>
-      <Heading low color="war">
+      <Heading low color="w">
         Hello World
       </Heading>
-      <Heading low color="pri">
+      <Heading low color="p">
         Hello World
       </Heading>
       <Heading low color="bg">
         Hello World
       </Heading>
-      <Heading low color="sec">
+      <Heading low color="se">
         Hello World
       </Heading>
     </>
diff --git a/apps/docs/src/app/_components/playground/kbd/kbdColor.tsx b/apps/docs/src/app/_components/playground/kbd/kbdColor.tsx
index 855b36d6..0e668ffd 100644
--- a/apps/docs/src/app/_components/playground/kbd/kbdColor.tsx
+++ b/apps/docs/src/app/_components/playground/kbd/kbdColor.tsx
@@ -4,12 +4,12 @@ export const KbdColor = () => {
   return (
     <>
       <Kbd title="Esc" />
-      <Kbd title="Esc" color="dan" />
-      <Kbd title="Esc" color="suc" />
-      <Kbd title="Esc" color="war" />
-      <Kbd title="Esc" color="pri" />
-      <Kbd title="Esc" color="bg" />
-      <Kbd title="Esc" color="sec" />
+      <Kbd title="Esc" color="d" />
+      <Kbd title="Esc" color="s" />
+      <Kbd title="Esc" color="w" />
+      <Kbd title="Esc" color="p" />
+      <Kbd title="Esc" color="b" />
+      <Kbd title="Esc" color="se" />
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/link/linkColor.tsx b/apps/docs/src/app/_components/playground/link/linkColor.tsx
index 5007740b..782b2437 100644
--- a/apps/docs/src/app/_components/playground/link/linkColor.tsx
+++ b/apps/docs/src/app/_components/playground/link/linkColor.tsx
@@ -3,29 +3,29 @@ import { Link } from '@pillar-ui/core'
 export const LinkColor = () => {
   return (
     <>
-      <Link color="dan">Hello World</Link>
-      <Link color="suc">Hello World</Link>
-      <Link color="war">Hello World</Link>
-      <Link color="pri">Hello World</Link>
+      <Link color="d">Hello World</Link>
+      <Link color="s">Hello World</Link>
+      <Link color="w">Hello World</Link>
+      <Link color="p">Hello World</Link>
       <Link color="bg">Hello World</Link>
-      <Link color="sec">Hello World</Link>
+      <Link color="se">Hello World</Link>
 
-      <Link low color="dan">
+      <Link low color="d">
         Hello World
       </Link>
-      <Link low color="suc">
+      <Link low color="s">
         Hello World
       </Link>
-      <Link low color="war">
+      <Link low color="w">
         Hello World
       </Link>
-      <Link low color="pri">
+      <Link low color="p">
         Hello World
       </Link>
       <Link low color="bg">
         Hello World
       </Link>
-      <Link low color="sec">
+      <Link low color="se">
         Hello World
       </Link>
     </>
diff --git a/apps/docs/src/app/_components/playground/pagination/paginationColor.tsx b/apps/docs/src/app/_components/playground/pagination/paginationColor.tsx
index 9aa1acc4..4e5a84b6 100644
--- a/apps/docs/src/app/_components/playground/pagination/paginationColor.tsx
+++ b/apps/docs/src/app/_components/playground/pagination/paginationColor.tsx
@@ -4,12 +4,12 @@ export const PaginationColor = () => {
   return (
     <>
       <Pagination count={10} title="Esc" />
-      <Pagination count={10} title="Esc" color="dan" />
-      <Pagination count={10} title="Esc" color="suc" />
-      <Pagination count={10} title="Esc" color="war" />
-      <Pagination count={10} title="Esc" color="pri" />
-      <Pagination count={10} title="Esc" color="bg" />
-      <Pagination count={10} title="Esc" color="sec" />
+      <Pagination count={10} title="Esc" color="d" />
+      <Pagination count={10} title="Esc" color="s" />
+      <Pagination count={10} title="Esc" color="w" />
+      <Pagination count={10} title="Esc" color="p" />
+      <Pagination count={10} title="Esc" color="b" />
+      <Pagination count={10} title="Esc" color="se" />
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/paper/paperColor.tsx b/apps/docs/src/app/_components/playground/paper/paperColor.tsx
index 4d7b69bd..c7543f6e 100644
--- a/apps/docs/src/app/_components/playground/paper/paperColor.tsx
+++ b/apps/docs/src/app/_components/playground/paper/paperColor.tsx
@@ -6,7 +6,7 @@ export const PaperColor = () => {
       <Paper background="bg-5" p="xs">
         Hello
       </Paper>
-      <Paper background="bg-5" p="xs" color="dan">
+      <Paper background="bg-5" p="xs" color="d">
         Hello
       </Paper>
       <Paper background="bg-5" p="xs" color="dan-5">
diff --git a/apps/docs/src/app/_components/playground/progress/progressColor.tsx b/apps/docs/src/app/_components/playground/progress/progressColor.tsx
index fd5abd01..1444c28a 100644
--- a/apps/docs/src/app/_components/playground/progress/progressColor.tsx
+++ b/apps/docs/src/app/_components/playground/progress/progressColor.tsx
@@ -4,37 +4,37 @@ export const ProgressColor = () => {
   return (
     <>
       <div className="l_f-sm">
-        <ProgressBar color="dan" value={90} label="hello" />
-        <ProgressBar color="suc" value={90} label="hello" />
-        <ProgressBar color="war" value={90} label="hello" />
-        <ProgressBar color="sec" value={90} label="hello" />
-        <ProgressBar color="bg" value={90} label="hello" />
-        <ProgressBar color="pri" value={90} label="hello" />
+        <ProgressBar color="d" value={90} label="hello" />
+        <ProgressBar color="s" value={90} label="hello" />
+        <ProgressBar color="w" value={90} label="hello" />
+        <ProgressBar color="se" value={90} label="hello" />
+        <ProgressBar color="b" value={90} label="hello" />
+        <ProgressBar color="p" value={90} label="hello" />
       </div>
 
       <Flex gap="sm" wrap>
-        <ProgressCircle color="dan" value={90} label="hello" />
-        <ProgressCircle color="suc" value={90} label="hello" />
-        <ProgressCircle color="war" value={90} label="hello" />
-        <ProgressCircle color="sec" value={90} label="hello" />
-        <ProgressCircle color="bg" value={90} label="hello" />
-        <ProgressCircle color="pri" value={90} label="hello" />
+        <ProgressCircle color="d" value={90} label="hello" />
+        <ProgressCircle color="s" value={90} label="hello" />
+        <ProgressCircle color="w" value={90} label="hello" />
+        <ProgressCircle color="se" value={90} label="hello" />
+        <ProgressCircle color="b" value={90} label="hello" />
+        <ProgressCircle color="p" value={90} label="hello" />
       </Flex>
 
       <ProgressBarStack label="Nice to meet you">
-        <ProgressBarStackItem label="CSS" color="dan" value={30}>
+        <ProgressBarStackItem label="CSS" color="d" value={30}>
           <button>CSS 30</button>
         </ProgressBarStackItem>
-        <ProgressBarStackItem label="HTML" color="suc" value={15}>
+        <ProgressBarStackItem label="HTML" color="s" value={15}>
           <button>HTML 15%</button>
         </ProgressBarStackItem>
-        <ProgressBarStackItem label="React" color="sec" value={25}>
+        <ProgressBarStackItem label="React" color="se" value={25}>
           <button>React 25%</button>
         </ProgressBarStackItem>
-        <ProgressBarStackItem label="Node" color="pri" value={15}>
+        <ProgressBarStackItem label="Node" color="p" value={15}>
           <button>Node 15%</button>
         </ProgressBarStackItem>
-        <ProgressBarStackItem label="SCSS" color="war" value={15}>
+        <ProgressBarStackItem label="SCSS" color="w" value={15}>
           <button>SCSS 15%</button>
         </ProgressBarStackItem>
       </ProgressBarStack>
diff --git a/apps/docs/src/app/_components/playground/progress/progressSize.tsx b/apps/docs/src/app/_components/playground/progress/progressSize.tsx
index 90bf3cdb..b9fedefe 100644
--- a/apps/docs/src/app/_components/playground/progress/progressSize.tsx
+++ b/apps/docs/src/app/_components/playground/progress/progressSize.tsx
@@ -22,19 +22,19 @@ export const ProgressSize = () => {
         <ProgressCircle size="2xl" value={95} label="hello" />
       </Flex>
       <ProgressBarStack size="sm" label="Nice to meet you">
-        <ProgressBarStackItem label="CSS" color="dan" value={30}>
+        <ProgressBarStackItem label="CSS" color="d" value={30}>
           <button>CSS 30</button>
         </ProgressBarStackItem>
-        <ProgressBarStackItem label="HTML" color="suc" value={15}>
+        <ProgressBarStackItem label="HTML" color="s" value={15}>
           <button>HTML 15%</button>
         </ProgressBarStackItem>
-        <ProgressBarStackItem label="React" color="sec" value={25}>
+        <ProgressBarStackItem label="React" color="se" value={25}>
           <button>React 25%</button>
         </ProgressBarStackItem>
-        <ProgressBarStackItem label="Node" color="pri" value={15}>
+        <ProgressBarStackItem label="Node" color="p" value={15}>
           <button>Node 15%</button>
         </ProgressBarStackItem>
-        <ProgressBarStackItem label="SCSS" color="war" value={15}>
+        <ProgressBarStackItem label="SCSS" color="w" value={15}>
           <button>SCSS 15%</button>
         </ProgressBarStackItem>
       </ProgressBarStack>
diff --git a/apps/docs/src/app/_components/playground/radio/radioColor.tsx b/apps/docs/src/app/_components/playground/radio/radioColor.tsx
index 94fbe4d3..7d46993a 100644
--- a/apps/docs/src/app/_components/playground/radio/radioColor.tsx
+++ b/apps/docs/src/app/_components/playground/radio/radioColor.tsx
@@ -3,12 +3,12 @@ import { Radio } from '@pillar-ui/core'
 export const RadioColor = () => {
   return (
     <>
-      <Radio color="dan" name="red" label="Red" />
-      <Radio color="suc" name="green" label="Green" />
-      <Radio color="war" name="orange" label="Orange" />
-      <Radio color="pri" name="pri" label="Primary" />
-      <Radio color="bg" name="bg" label="Slate" />
-      <Radio color="sec" name="sec" label="Secondary" />
+      <Radio color="d" name="red" label="Red" />
+      <Radio color="s" name="green" label="Green" />
+      <Radio color="w" name="orange" label="Orange" />
+      <Radio color="p" name="pri" label="Primary" />
+      <Radio color="b" name="bg" label="Slate" />
+      <Radio color="se" name="sec" label="Secondary" />
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/radio/radioVariant.tsx b/apps/docs/src/app/_components/playground/radio/radioVariant.tsx
index 425032c8..8913f2fe 100644
--- a/apps/docs/src/app/_components/playground/radio/radioVariant.tsx
+++ b/apps/docs/src/app/_components/playground/radio/radioVariant.tsx
@@ -3,9 +3,9 @@ import { Radio } from '@pillar-ui/core'
 export const RadioVariant = () => {
   return (
     <>
-      <Radio color="sec" name="sec" label="Secondary" />
-      <Radio variant="outline" color="sec" name="sec2" label="Secondary" />
-      <Radio variant="soft" color="sec" name="sec3" label="Secondary" />
+      <Radio color="se" name="sec" label="Secondary" />
+      <Radio variant="outline" color="se" name="sec2" label="Secondary" />
+      <Radio variant="soft" color="se" name="sec3" label="Secondary" />
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/rating/ratingColor.tsx b/apps/docs/src/app/_components/playground/rating/ratingColor.tsx
index 9128428d..7f0fc4f7 100644
--- a/apps/docs/src/app/_components/playground/rating/ratingColor.tsx
+++ b/apps/docs/src/app/_components/playground/rating/ratingColor.tsx
@@ -3,12 +3,12 @@ import { Rating } from '@pillar-ui/core'
 export const RatingColor = () => {
   return (
     <>
-      <Rating color="dan" rating={4} />
-      <Rating color="pri" rating={4} />
-      <Rating color="sec" rating={4} />
-      <Rating color="suc" rating={4} />
-      <Rating color="war" rating={4} />
-      <Rating color="bg" rating={4} />
+      <Rating color="d" rating={4} />
+      <Rating color="p" rating={4} />
+      <Rating color="se" rating={4} />
+      <Rating color="s" rating={4} />
+      <Rating color="w" rating={4} />
+      <Rating color="b" rating={4} />
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/rating/ratingIcon.tsx b/apps/docs/src/app/_components/playground/rating/ratingIcon.tsx
index 3776c542..d81277b3 100644
--- a/apps/docs/src/app/_components/playground/rating/ratingIcon.tsx
+++ b/apps/docs/src/app/_components/playground/rating/ratingIcon.tsx
@@ -3,7 +3,7 @@ import { Rating } from '@pillar-ui/core'
 export const RatingIcon = () => {
   return (
     <>
-      <Rating icon="heart" rating={4} color="dan" />
+      <Rating icon="heart" rating={4} color="d" />
       <Rating rating={4} />
     </>
   )
diff --git a/apps/docs/src/app/_components/playground/separator/separatorColor.tsx b/apps/docs/src/app/_components/playground/separator/separatorColor.tsx
index 4a979049..3fc33a28 100644
--- a/apps/docs/src/app/_components/playground/separator/separatorColor.tsx
+++ b/apps/docs/src/app/_components/playground/separator/separatorColor.tsx
@@ -3,12 +3,12 @@ import { Separator } from '@pillar-ui/core'
 export const SeparatorColor = () => {
   return (
     <>
-      <Separator color="suc" />
-      <Separator color="dan" />
-      <Separator color="war" />
-      <Separator color="pri" />
-      <Separator color="sec" />
-      <Separator color="bg" />
+      <Separator color="s" />
+      <Separator color="d" />
+      <Separator color="w" />
+      <Separator color="p" />
+      <Separator color="se" />
+      <Separator color="b" />
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/spinner/spinnerColor.tsx b/apps/docs/src/app/_components/playground/spinner/spinnerColor.tsx
index 762cf7dc..4c70969e 100644
--- a/apps/docs/src/app/_components/playground/spinner/spinnerColor.tsx
+++ b/apps/docs/src/app/_components/playground/spinner/spinnerColor.tsx
@@ -3,12 +3,12 @@ import { Spinner } from '@pillar-ui/core'
 export const SpinnerColor = () => {
   return (
     <>
-      <Spinner color="suc" />
-      <Spinner color="dan" />
-      <Spinner color="war" />
-      <Spinner color="pri" />
-      <Spinner color="sec" />
-      <Spinner color="bg" />
+      <Spinner color="s" />
+      <Spinner color="d" />
+      <Spinner color="w" />
+      <Spinner color="p" />
+      <Spinner color="se" />
+      <Spinner color="b" />
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/spinner/spinnerInvert.tsx b/apps/docs/src/app/_components/playground/spinner/spinnerInvert.tsx
index 0ae837f0..88e2a771 100644
--- a/apps/docs/src/app/_components/playground/spinner/spinnerInvert.tsx
+++ b/apps/docs/src/app/_components/playground/spinner/spinnerInvert.tsx
@@ -4,20 +4,20 @@ export const SpinnerInvert = () => {
   return (
     <>
       <Flex gap="sm" items="center">
-        <Spinner color="suc" />
-        <Spinner color="dan" />
-        <Spinner color="war" />
-        <Spinner color="pri" />
-        <Spinner color="sec" />
-        <Spinner color="bg" />
+        <Spinner color="s" />
+        <Spinner color="d" />
+        <Spinner color="w" />
+        <Spinner color="p" />
+        <Spinner color="se" />
+        <Spinner color="b" />
       </Flex>
       <Flex gap="sm" items="center">
-        <Spinner invert color="suc" />
-        <Spinner invert color="dan" />
-        <Spinner invert color="war" />
-        <Spinner invert color="pri" />
-        <Spinner invert color="sec" />
-        <Spinner invert color="bg" />
+        <Spinner invert color="s" />
+        <Spinner invert color="d" />
+        <Spinner invert color="w" />
+        <Spinner invert color="p" />
+        <Spinner invert color="se" />
+        <Spinner invert color="b" />
       </Flex>
     </>
   )
diff --git a/apps/docs/src/app/_components/playground/stepper/stepperColor.tsx b/apps/docs/src/app/_components/playground/stepper/stepperColor.tsx
index 06a67812..1af430a7 100644
--- a/apps/docs/src/app/_components/playground/stepper/stepperColor.tsx
+++ b/apps/docs/src/app/_components/playground/stepper/stepperColor.tsx
@@ -15,7 +15,7 @@ export const StepperBase = (props: Omit<StepperProps, 'children' | 'setActive'>)
       <Stepper active={step} setActive={setStep} {...props}>
         <StepperStep title="About" icon={<Home />} description="Hello world my name is hamza miloud amar">
           <Heading size="xs">Hello World</Heading>
-          <Text size="sm" color="bg" low>
+          <Text size="sm" color="b" low>
             One Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab eveniet illo autem ipsam dolorum nulla
             natus at tempora labore. Exercitationem praesentium est illo, modi quos cupiditate dignissimos reiciendis
             ipsum iste!
@@ -23,7 +23,7 @@ export const StepperBase = (props: Omit<StepperProps, 'children' | 'setActive'>)
         </StepperStep>
         <StepperStep icon={<User />} title="Profile" description="Nice Picture from here i Like it so much">
           <Heading size="xs">Hello World</Heading>
-          <Text size="sm" color="bg" low>
+          <Text size="sm" color="b" low>
             Two Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab eveniet illo autem ipsam dolorum nulla
             natus at tempora labore. Exercitationem praesentium est illo, modi quos cupiditate dignissimos reiciendis
             ipsum iste!
@@ -31,7 +31,7 @@ export const StepperBase = (props: Omit<StepperProps, 'children' | 'setActive'>)
         </StepperStep>
         <StepperStep icon={<Settings />} title="Skills" description="Word is word no matter what happen">
           <Heading size="xs">Hello World</Heading>
-          <Text size="sm" color="bg" low>
+          <Text size="sm" color="b" low>
             Three Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab eveniet illo autem ipsam dolorum nulla
             natus at tempora labore. Exercitationem praesentium est illo, modi quos cupiditate dignissimos reiciendis
             ipsum iste!
@@ -53,9 +53,9 @@ export const StepperBase = (props: Omit<StepperProps, 'children' | 'setActive'>)
 export const StepperColor = () => {
   return (
     <>
-      <StepperBase color="pri" completeComponent={<CompleteComponent />} />
-      <StepperBase color="sec" completeComponent={<CompleteComponent />} />
-      <StepperBase color="dan" completeComponent={<CompleteComponent />} />
+      <StepperBase color="p" completeComponent={<CompleteComponent />} />
+      <StepperBase color="se" completeComponent={<CompleteComponent />} />
+      <StepperBase color="d" completeComponent={<CompleteComponent />} />
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/stepper/stepperCorner.tsx b/apps/docs/src/app/_components/playground/stepper/stepperCorner.tsx
index 166edd64..f6f574ae 100644
--- a/apps/docs/src/app/_components/playground/stepper/stepperCorner.tsx
+++ b/apps/docs/src/app/_components/playground/stepper/stepperCorner.tsx
@@ -15,7 +15,7 @@ export const StepperBase = (props: Omit<StepperProps, 'children' | 'setActive'>)
       <Stepper active={step} setActive={setStep} {...props}>
         <StepperStep title="About" icon={<Home />} description="Hello world my name is hamza miloud amar">
           <Heading size="xs">Hello World</Heading>
-          <Text size="sm" color="bg" low>
+          <Text size="sm" color="b" low>
             One Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab eveniet illo autem ipsam dolorum nulla
             natus at tempora labore. Exercitationem praesentium est illo, modi quos cupiditate dignissimos reiciendis
             ipsum iste!
@@ -23,7 +23,7 @@ export const StepperBase = (props: Omit<StepperProps, 'children' | 'setActive'>)
         </StepperStep>
         <StepperStep icon={<User />} title="Profile" description="Nice Picture from here i Like it so much">
           <Heading size="xs">Hello World</Heading>
-          <Text size="sm" color="bg" low>
+          <Text size="sm" color="b" low>
             Two Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab eveniet illo autem ipsam dolorum nulla
             natus at tempora labore. Exercitationem praesentium est illo, modi quos cupiditate dignissimos reiciendis
             ipsum iste!
@@ -31,7 +31,7 @@ export const StepperBase = (props: Omit<StepperProps, 'children' | 'setActive'>)
         </StepperStep>
         <StepperStep icon={<Settings />} title="Skills" description="Word is word no matter what happen">
           <Heading size="xs">Hello World</Heading>
-          <Text size="sm" color="bg" low>
+          <Text size="sm" color="b" low>
             Three Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab eveniet illo autem ipsam dolorum nulla
             natus at tempora labore. Exercitationem praesentium est illo, modi quos cupiditate dignissimos reiciendis
             ipsum iste!
diff --git a/apps/docs/src/app/_components/playground/stepper/stepperSize.tsx b/apps/docs/src/app/_components/playground/stepper/stepperSize.tsx
index f0607019..c381f261 100644
--- a/apps/docs/src/app/_components/playground/stepper/stepperSize.tsx
+++ b/apps/docs/src/app/_components/playground/stepper/stepperSize.tsx
@@ -15,7 +15,7 @@ export const StepperBase = (props: Omit<StepperProps, 'children' | 'setActive'>)
       <Stepper active={step} setActive={setStep} {...props}>
         <StepperStep title="About" icon={<Home />} description="Hello world my name is hamza miloud amar">
           <Heading size="xs">Hello World</Heading>
-          <Text size="sm" color="bg" low>
+          <Text size="sm" color="b" low>
             One Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab eveniet illo autem ipsam dolorum nulla
             natus at tempora labore. Exercitationem praesentium est illo, modi quos cupiditate dignissimos reiciendis
             ipsum iste!
@@ -23,7 +23,7 @@ export const StepperBase = (props: Omit<StepperProps, 'children' | 'setActive'>)
         </StepperStep>
         <StepperStep icon={<User />} title="Profile" description="Nice Picture from here i Like it so much">
           <Heading size="xs">Hello World</Heading>
-          <Text size="sm" color="bg" low>
+          <Text size="sm" color="b" low>
             Two Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab eveniet illo autem ipsam dolorum nulla
             natus at tempora labore. Exercitationem praesentium est illo, modi quos cupiditate dignissimos reiciendis
             ipsum iste!
@@ -31,7 +31,7 @@ export const StepperBase = (props: Omit<StepperProps, 'children' | 'setActive'>)
         </StepperStep>
         <StepperStep icon={<Settings />} title="Skills" description="Word is word no matter what happen">
           <Heading size="xs">Hello World</Heading>
-          <Text size="sm" color="bg" low>
+          <Text size="sm" color="b" low>
             Three Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab eveniet illo autem ipsam dolorum nulla
             natus at tempora labore. Exercitationem praesentium est illo, modi quos cupiditate dignissimos reiciendis
             ipsum iste!
diff --git a/apps/docs/src/app/_components/playground/switch/switchColor.tsx b/apps/docs/src/app/_components/playground/switch/switchColor.tsx
index 7176eb54..29654da0 100644
--- a/apps/docs/src/app/_components/playground/switch/switchColor.tsx
+++ b/apps/docs/src/app/_components/playground/switch/switchColor.tsx
@@ -3,12 +3,12 @@ import { Switch } from '@pillar-ui/core'
 export const SwitchColor = () => {
   return (
     <>
-      <Switch label="Hello" color="dan" />
-      <Switch label="Hello" color="war" />
-      <Switch label="Hello" color="suc" />
-      <Switch label="Hello" color="pri" />
-      <Switch label="Hello" color="sec" />
-      <Switch label="Hello" color="bg" />
+      <Switch label="Hello" color="d" />
+      <Switch label="Hello" color="w" />
+      <Switch label="Hello" color="s" />
+      <Switch label="Hello" color="p" />
+      <Switch label="Hello" color="se" />
+      <Switch label="Hello" color="b" />
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/switch/switchDefaultPressed.tsx b/apps/docs/src/app/_components/playground/switch/switchDefaultPressed.tsx
index 579bb5e9..8bd733fc 100644
--- a/apps/docs/src/app/_components/playground/switch/switchDefaultPressed.tsx
+++ b/apps/docs/src/app/_components/playground/switch/switchDefaultPressed.tsx
@@ -3,12 +3,12 @@ import { Switch } from '@pillar-ui/core'
 export const SwitchDefaultPressed = () => {
   return (
     <>
-      <Switch label="Hello" defaultPressed color="dan" />
-      <Switch label="Hello" defaultPressed color="war" />
-      <Switch label="Hello" defaultPressed color="suc" />
-      <Switch label="Hello" defaultPressed color="pri" />
-      <Switch label="Hello" defaultPressed color="sec" />
-      <Switch label="Hello" defaultPressed color="bg" />
+      <Switch label="Hello" defaultPressed color="d" />
+      <Switch label="Hello" defaultPressed color="w" />
+      <Switch label="Hello" defaultPressed color="s" />
+      <Switch label="Hello" defaultPressed color="p" />
+      <Switch label="Hello" defaultPressed color="se" />
+      <Switch label="Hello" defaultPressed color="b" />
     </>
   )
 }
diff --git a/apps/docs/src/app/_components/playground/text/textColor.tsx b/apps/docs/src/app/_components/playground/text/textColor.tsx
index 45103587..9e617f55 100644
--- a/apps/docs/src/app/_components/playground/text/textColor.tsx
+++ b/apps/docs/src/app/_components/playground/text/textColor.tsx
@@ -3,29 +3,29 @@ import { Text } from '@pillar-ui/core'
 export const TextColor = () => {
   return (
     <>
-      <Text color="dan">Hello World</Text>
-      <Text color="suc">Hello World</Text>
-      <Text color="war">Hello World</Text>
-      <Text color="pri">Hello World</Text>
+      <Text color="d">Hello World</Text>
+      <Text color="s">Hello World</Text>
+      <Text color="w">Hello World</Text>
+      <Text color="p">Hello World</Text>
       <Text color="bg">Hello World</Text>
-      <Text color="sec">Hello World</Text>
+      <Text color="se">Hello World</Text>
 
-      <Text low color="dan">
+      <Text low color="d">
         Hello World
       </Text>
-      <Text low color="suc">
+      <Text low color="s">
         Hello World
       </Text>
-      <Text low color="war">
+      <Text low color="w">
         Hello World
       </Text>
-      <Text low color="pri">
+      <Text low color="p">
         Hello World
       </Text>
       <Text low color="bg">
         Hello World
       </Text>
-      <Text low color="sec">
+      <Text low color="se">
         Hello World
       </Text>
     </>
diff --git a/apps/docs/src/app/_components/playground/timeline/timelineColor.tsx b/apps/docs/src/app/_components/playground/timeline/timelineColor.tsx
index 34e3761b..2adb7802 100644
--- a/apps/docs/src/app/_components/playground/timeline/timelineColor.tsx
+++ b/apps/docs/src/app/_components/playground/timeline/timelineColor.tsx
@@ -34,12 +34,12 @@ const TimelineBase = (props: Omit<TimelineProps, 'children'>) => {
 export const TimelineColor = () => {
   return (
     <>
-      <TimelineBase color="bg" />
-      <TimelineBase color="sec" />
-      <TimelineBase color="pri" />
-      <TimelineBase color="suc" />
-      <TimelineBase color="dan" />
-      <TimelineBase color="war" />
+      <TimelineBase color="b" />
+      <TimelineBase color="se" />
+      <TimelineBase color="p" />
+      <TimelineBase color="s" />
+      <TimelineBase color="d" />
+      <TimelineBase color="w" />
     </>
   )
 }
diff --git a/apps/docs/src/component/core/sectionHeading.tsx b/apps/docs/src/component/core/sectionHeading.tsx
index 68849269..4e7a70bc 100644
--- a/apps/docs/src/component/core/sectionHeading.tsx
+++ b/apps/docs/src/component/core/sectionHeading.tsx
@@ -8,7 +8,7 @@ interface SectionHeadingProps {
 export const SectionHeading = ({ heading, subheading }: SectionHeadingProps) => {
   return (
     <Heading as="h2" size="3xl" weight="medium" transform="uppercase">
-      <Text size="md" weight="normal" color="pri" low>
+      <Text size="md" weight="normal" color="p" low>
         {subheading}
       </Text>
       <div>{heading}</div>
diff --git a/apps/docs/src/scss/pages/_icons.scss b/apps/docs/src/scss/pages/_icons.scss
index 7ff8224e..73de1112 100644
--- a/apps/docs/src/scss/pages/_icons.scss
+++ b/apps/docs/src/scss/pages/_icons.scss
@@ -1,4 +1,4 @@
 .icons-scroll {
   overflow-x: auto;
-  border: 1px solid var(--bg-4);
+  border: 1px solid var(--B4);
 }
diff --git a/apps/stories/stories/IconButton.stories.tsx b/apps/stories/stories/IconButton.stories.tsx
index 9079a273..54f6a71c 100644
--- a/apps/stories/stories/IconButton.stories.tsx
+++ b/apps/stories/stories/IconButton.stories.tsx
@@ -12,12 +12,12 @@ export default meta
 export function IconButtonsColors() {
   return (
     <Flex gap="sm">
-      <IconButton title="Hello world" icon={<ThumbUp />} color="suc" />
-      <IconButton title="Hello world" icon={<ThumbUp />} color="war" />
-      <IconButton title="Hello world" icon={<ThumbUp />} color="dan" />
-      <IconButton title="Hello world" icon={<ThumbUp />} color="sec" />
-      <IconButton title="Hello world" icon={<ThumbUp />} color="bg" />
-      <IconButton title="Hello world" icon={<ThumbUp />} color="pri" />
+      <IconButton title="Hello world" icon={<ThumbUp />} color="s" />
+      <IconButton title="Hello world" icon={<ThumbUp />} color="w" />
+      <IconButton title="Hello world" icon={<ThumbUp />} color="d" />
+      <IconButton title="Hello world" icon={<ThumbUp />} color="se" />
+      <IconButton title="Hello world" icon={<ThumbUp />} color="b" />
+      <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
     </Flex>
   )
 }
@@ -25,12 +25,12 @@ export function IconButtonsColors() {
 export function IconButtonsSizes() {
   return (
     <Flex gap="sm" items="center">
-      <IconButton title="Hello world" size="3xs" icon={<ThumbUp />} color="suc" />
-      <IconButton title="Hello world" size="2xs" icon={<ThumbUp />} color="war" />
-      <IconButton title="Hello world" size="xs" icon={<ThumbUp />} color="dan" />
-      <IconButton title="Hello world" size="sm" icon={<ThumbUp />} color="sec" />
-      <IconButton title="Hello world" size="md" icon={<ThumbUp />} color="bg" />
-      <IconButton title="Hello world" size="xl" icon={<ThumbUp />} color="pri" />
+      <IconButton title="Hello world" size="3xs" icon={<ThumbUp />} color="s" />
+      <IconButton title="Hello world" size="2xs" icon={<ThumbUp />} color="w" />
+      <IconButton title="Hello world" size="xs" icon={<ThumbUp />} color="d" />
+      <IconButton title="Hello world" size="sm" icon={<ThumbUp />} color="se" />
+      <IconButton title="Hello world" size="md" icon={<ThumbUp />} color="b" />
+      <IconButton title="Hello world" size="xl" icon={<ThumbUp />} color="p" />
     </Flex>
   )
 }
@@ -38,11 +38,11 @@ export function IconButtonsSizes() {
 export function IconButtonsCorners() {
   return (
     <Flex gap="sm" items="center">
-      <IconButton title="Hello world" corner="sharp" icon={<ThumbUp />} color="suc" />
-      <IconButton title="Hello world" corner="xs" icon={<ThumbUp />} color="dan" />
-      <IconButton title="Hello world" corner="sm" icon={<ThumbUp />} color="sec" />
-      <IconButton title="Hello world" corner="md" icon={<ThumbUp />} color="bg" />
-      <IconButton title="Hello world" corner="xl" icon={<ThumbUp />} color="pri" />
+      <IconButton title="Hello world" corner="sharp" icon={<ThumbUp />} color="s" />
+      <IconButton title="Hello world" corner="xs" icon={<ThumbUp />} color="d" />
+      <IconButton title="Hello world" corner="sm" icon={<ThumbUp />} color="se" />
+      <IconButton title="Hello world" corner="md" icon={<ThumbUp />} color="b" />
+      <IconButton title="Hello world" corner="xl" icon={<ThumbUp />} color="p" />
     </Flex>
   )
 }
@@ -53,12 +53,12 @@ export function IconButtonsVariants() {
     <div className="l_f-md">
       {VARIANTS.map((variant) => (
         <Flex key={variant} gap="sm">
-          <IconButton title="Hello world" icon={<ThumbUp />} variant={variant} color="suc" />
-          <IconButton title="Hello world" icon={<ThumbUp />} variant={variant} color="war" />
-          <IconButton title="Hello world" icon={<ThumbUp />} variant={variant} color="dan" />
-          <IconButton title="Hello world" icon={<ThumbUp />} variant={variant} color="sec" />
-          <IconButton title="Hello world" icon={<ThumbUp />} variant={variant} color="bg" />
-          <IconButton title="Hello world" icon={<ThumbUp />} variant={variant} color="pri" />
+          <IconButton title="Hello world" icon={<ThumbUp />} variant={variant} color="s" />
+          <IconButton title="Hello world" icon={<ThumbUp />} variant={variant} color="w" />
+          <IconButton title="Hello world" icon={<ThumbUp />} variant={variant} color="d" />
+          <IconButton title="Hello world" icon={<ThumbUp />} variant={variant} color="se" />
+          <IconButton title="Hello world" icon={<ThumbUp />} variant={variant} color="b" />
+          <IconButton title="Hello world" icon={<ThumbUp />} variant={variant} color="p" />
         </Flex>
       ))}
     </div>
@@ -70,65 +70,65 @@ export function ButtonCornerDefaults() {
     <div className="l_f-sm">
       <Flex gap="sm">
         <Paper corner="sharp">
-          <IconButton title="Hello world" icon={<ThumbUp />} color="pri" />
+          <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
         </Paper>
         <Paper corner="sm">
-          <IconButton title="Hello world" icon={<ThumbUp />} color="pri" />
+          <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
         </Paper>
         <Paper corner="md">
-          <IconButton title="Hello world" icon={<ThumbUp />} color="pri" />
+          <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
         </Paper>
         <Paper corner="lg">
-          <IconButton title="Hello world" icon={<ThumbUp />} color="pri" />
+          <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
         </Paper>
-        <IconButton title="Hello world" icon={<ThumbUp />} color="pri" />
+        <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
       </Flex>
 
       <Flex gap="sm" style={{ '--button-rad': '5px' } as CSSProperties}>
         <Paper corner="sharp">
-          <IconButton title="Hello world" icon={<ThumbUp />} color="pri" />
+          <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
         </Paper>
         <Paper corner="sm">
-          <IconButton title="Hello world" icon={<ThumbUp />} color="pri" />
+          <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
         </Paper>
         <Paper corner="md">
-          <IconButton title="Hello world" icon={<ThumbUp />} color="pri" />
+          <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
         </Paper>
         <Paper corner="lg">
-          <IconButton title="Hello world" icon={<ThumbUp />} color="pri" />
+          <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
         </Paper>
-        <IconButton title="Hello world" icon={<ThumbUp />} color="pri" />
+        <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
       </Flex>
       <Flex gap="sm" style={{ '--button-rad': '10px' } as CSSProperties}>
         <Paper corner="sharp">
-          <IconButton title="Hello world" icon={<ThumbUp />} color="pri" />
+          <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
         </Paper>
         <Paper corner="sm">
-          <IconButton title="Hello world" icon={<ThumbUp />} color="pri" />
+          <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
         </Paper>
         <Paper corner="md">
-          <IconButton title="Hello world" icon={<ThumbUp />} color="pri" />
+          <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
         </Paper>
         <Paper corner="lg">
-          <IconButton title="Hello world" icon={<ThumbUp />} color="pri" />
+          <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
         </Paper>
-        <IconButton title="Hello world" icon={<ThumbUp />} color="pri" />
+        <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
       </Flex>
 
       <Flex gap="sm" style={{ '--button-rad': '20px' } as CSSProperties}>
         <Paper corner="sharp">
-          <IconButton title="Hello world" icon={<ThumbUp />} color="pri" />
+          <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
         </Paper>
         <Paper corner="sm">
-          <IconButton title="Hello world" icon={<ThumbUp />} color="pri" />
+          <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
         </Paper>
         <Paper corner="md">
-          <IconButton title="Hello world" icon={<ThumbUp />} color="pri" />
+          <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
         </Paper>
         <Paper corner="lg">
-          <IconButton title="Hello world" icon={<ThumbUp />} color="pri" />
+          <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
         </Paper>
-        <IconButton title="Hello world" icon={<ThumbUp />} color="pri" />
+        <IconButton title="Hello world" icon={<ThumbUp />} color="p" />
       </Flex>
     </div>
   )
diff --git a/apps/stories/stories/InputPassword.stories.tsx b/apps/stories/stories/InputPassword.stories.tsx
index 8773c4d4..2bb54dff 100644
--- a/apps/stories/stories/InputPassword.stories.tsx
+++ b/apps/stories/stories/InputPassword.stories.tsx
@@ -87,12 +87,12 @@ export const SizeInput = () => {
 export const ColorInput = () => {
   return (
     <Flex gap="sm" direction="column">
-      <InputPassword color="pri" variant="bordered" autoFocus placeholder="Focus" />
-      <InputPassword color="war" variant="bordered" autoFocus placeholder="Normal" />
-      <InputPassword color="sec" variant="outline" autoFocus placeholder="Disabled" />
-      <InputPassword color="bg" variant="filled" autoFocus placeholder="isInvalid" />
-      <InputPassword color="suc" variant="bordered" autoFocus placeholder="Placeholder" />
-      <InputPassword color="dan" variant="bordered" autoFocus defaultValue="Default Value" />
+      <InputPassword color="p" variant="bordered" autoFocus placeholder="Focus" />
+      <InputPassword color="w" variant="bordered" autoFocus placeholder="Normal" />
+      <InputPassword color="se" variant="outline" autoFocus placeholder="Disabled" />
+      <InputPassword color="b" variant="filled" autoFocus placeholder="isInvalid" />
+      <InputPassword color="s" variant="bordered" autoFocus placeholder="Placeholder" />
+      <InputPassword color="d" variant="bordered" autoFocus defaultValue="Default Value" />
     </Flex>
   )
 }
@@ -100,18 +100,13 @@ export const ColorInput = () => {
 export const InputPasswordCustomIcon = () => {
   return (
     <Flex gap="sm" direction="column">
-      <InputPassword placeholder="enter your password" color="pri" visibleIcon={<Lock />} hiddenIcon={<LockOff />} />
-      <InputPassword
-        placeholder="enter your password"
-        color="war"
-        visibleIcon={<OpenSource />}
-        hiddenIcon={<Close />}
-      />
+      <InputPassword placeholder="enter your password" color="p" visibleIcon={<Lock />} hiddenIcon={<LockOff />} />
+      <InputPassword placeholder="enter your password" color="w" visibleIcon={<OpenSource />} hiddenIcon={<Close />} />
 
       <FormController label="Hello world" hint="The password need to be between 5 and 15" error="Nice Error Here">
         <InputPassword
           placeholder="enter your password"
-          color="war"
+          color="w"
           visibleIcon={<OpenSource />}
           hiddenIcon={<Close />}
         />
diff --git a/apps/stories/stories/accordion.stories.tsx b/apps/stories/stories/accordion.stories.tsx
index 61e54fae..f4d60083 100644
--- a/apps/stories/stories/accordion.stories.tsx
+++ b/apps/stories/stories/accordion.stories.tsx
@@ -77,60 +77,60 @@ export const AlertColors = () => {
   return (
     <div className="l_f-md">
       <Grid grid="1fr 1fr 1fr" gap="lg">
-        <AccordionBase color="dan" />
-        <AccordionBase color="suc" />
-        <AccordionBase color="war" />
-        <AccordionBase color="pri" />
-        <AccordionBase color="sec" />
-        <AccordionBase color="bg" />
+        <AccordionBase color="d" />
+        <AccordionBase color="s" />
+        <AccordionBase color="w" />
+        <AccordionBase color="p" />
+        <AccordionBase color="se" />
+        <AccordionBase color="b" />
       </Grid>
       <Grid grid="1fr 1fr 1fr" gap="lg">
-        <AccordionBase variant="soft" color="dan" />
-        <AccordionBase variant="soft" color="suc" />
-        <AccordionBase variant="soft" color="war" />
-        <AccordionBase variant="soft" color="pri" />
-        <AccordionBase variant="soft" color="sec" />
-        <AccordionBase variant="soft" color="bg" />
+        <AccordionBase variant="soft" color="d" />
+        <AccordionBase variant="soft" color="s" />
+        <AccordionBase variant="soft" color="w" />
+        <AccordionBase variant="soft" color="p" />
+        <AccordionBase variant="soft" color="se" />
+        <AccordionBase variant="soft" color="b" />
       </Grid>
       <Grid grid="1fr 1fr 1fr" gap="lg">
-        <AccordionBase separate variant="soft" color="dan" />
-        <AccordionBase separate variant="soft" color="suc" />
-        <AccordionBase separate variant="soft" color="war" />
-        <AccordionBase separate variant="soft" color="pri" />
-        <AccordionBase separate variant="soft" color="sec" />
-        <AccordionBase separate variant="soft" color="bg" />
+        <AccordionBase separate variant="soft" color="d" />
+        <AccordionBase separate variant="soft" color="s" />
+        <AccordionBase separate variant="soft" color="w" />
+        <AccordionBase separate variant="soft" color="p" />
+        <AccordionBase separate variant="soft" color="se" />
+        <AccordionBase separate variant="soft" color="b" />
       </Grid>
       <Grid grid="1fr 1fr 1fr" gap="lg">
-        <AccordionBase variant="outline" color="dan" />
-        <AccordionBase variant="outline" color="suc" />
-        <AccordionBase variant="outline" color="war" />
-        <AccordionBase variant="outline" color="pri" />
-        <AccordionBase variant="outline" color="sec" />
-        <AccordionBase variant="outline" color="bg" />
+        <AccordionBase variant="outline" color="d" />
+        <AccordionBase variant="outline" color="s" />
+        <AccordionBase variant="outline" color="w" />
+        <AccordionBase variant="outline" color="p" />
+        <AccordionBase variant="outline" color="se" />
+        <AccordionBase variant="outline" color="b" />
       </Grid>
       <Grid grid="1fr 1fr 1fr" gap="lg">
-        <AccordionBase separate variant="outline" color="dan" />
-        <AccordionBase separate variant="outline" color="suc" />
-        <AccordionBase separate variant="outline" color="war" />
-        <AccordionBase separate variant="outline" color="pri" />
-        <AccordionBase separate variant="outline" color="sec" />
-        <AccordionBase separate variant="outline" color="bg" />
+        <AccordionBase separate variant="outline" color="d" />
+        <AccordionBase separate variant="outline" color="s" />
+        <AccordionBase separate variant="outline" color="w" />
+        <AccordionBase separate variant="outline" color="p" />
+        <AccordionBase separate variant="outline" color="se" />
+        <AccordionBase separate variant="outline" color="b" />
       </Grid>
       <Grid grid="1fr 1fr 1fr" gap="lg">
-        <AccordionBase variant="solid" color="dan" />
-        <AccordionBase variant="solid" color="suc" />
-        <AccordionBase variant="solid" color="war" />
-        <AccordionBase variant="solid" color="pri" />
-        <AccordionBase variant="solid" color="sec" />
-        <AccordionBase variant="solid" color="bg" />
+        <AccordionBase variant="solid" color="d" />
+        <AccordionBase variant="solid" color="s" />
+        <AccordionBase variant="solid" color="w" />
+        <AccordionBase variant="solid" color="p" />
+        <AccordionBase variant="solid" color="se" />
+        <AccordionBase variant="solid" color="b" />
       </Grid>
       <Grid grid="1fr 1fr 1fr" gap="lg">
-        <AccordionBase separate variant="solid" color="dan" />
-        <AccordionBase separate variant="solid" color="suc" />
-        <AccordionBase separate variant="solid" color="war" />
-        <AccordionBase separate variant="solid" color="pri" />
-        <AccordionBase separate variant="solid" color="sec" />
-        <AccordionBase separate variant="solid" color="bg" />
+        <AccordionBase separate variant="solid" color="d" />
+        <AccordionBase separate variant="solid" color="s" />
+        <AccordionBase separate variant="solid" color="w" />
+        <AccordionBase separate variant="solid" color="p" />
+        <AccordionBase separate variant="solid" color="se" />
+        <AccordionBase separate variant="solid" color="b" />
       </Grid>
     </div>
   )
@@ -163,12 +163,12 @@ export const AlertSizes = () => {
 export const AlertCorners = () => {
   return (
     <div className="l_f-md">
-      <AccordionBase separate color="bg" variant="solid" corner="sharp" />
-      <AccordionBase separate color="bg" variant="soft" corner="sm" />
-      <AccordionBase separate color="bg" variant="outline" corner="md" />
-      <AccordionBase separate color="bg" variant="solid" corner="lg" />
-      <AccordionBase separate color="bg" variant="soft" corner="xl" />
-      <AccordionBase separate color="bg" variant="outline" corner="full" />
+      <AccordionBase separate color="b" variant="solid" corner="sharp" />
+      <AccordionBase separate color="b" variant="soft" corner="sm" />
+      <AccordionBase separate color="b" variant="outline" corner="md" />
+      <AccordionBase separate color="b" variant="solid" corner="lg" />
+      <AccordionBase separate color="b" variant="soft" corner="xl" />
+      <AccordionBase separate color="b" variant="outline" corner="full" />
     </div>
   )
 }
diff --git a/apps/stories/stories/alert.stories.tsx b/apps/stories/stories/alert.stories.tsx
index 2f175d2e..1050f745 100644
--- a/apps/stories/stories/alert.stories.tsx
+++ b/apps/stories/stories/alert.stories.tsx
@@ -25,12 +25,12 @@ function AlertBase({
 export const AlertColors = () => {
   return (
     <Flex gap="sm" direction="column">
-      <AlertBase color="dan" />
-      <AlertBase color="war" />
-      <AlertBase color="suc" />
-      <AlertBase color="sec" />
-      <AlertBase color="pri" />
-      <AlertBase color="bg" />
+      <AlertBase color="d" />
+      <AlertBase color="w" />
+      <AlertBase color="s" />
+      <AlertBase color="se" />
+      <AlertBase color="p" />
+      <AlertBase color="b" />
     </Flex>
   )
 }
@@ -44,7 +44,7 @@ export const AlertControlled = () => {
   return (
     <Flex gap="sm" direction="column">
       <Button onClick={onClose}>{open ? 'Hide' : 'Open'} The Alert</Button>
-      <AlertBase color="dan" visible={open} onClose={onClose} closable />
+      <AlertBase color="d" visible={open} onClose={onClose} closable />
     </Flex>
   )
 }
@@ -112,7 +112,7 @@ export const AlertVariant = () => {
     <div className="l_f-md">
       {Variants.map((variant) => (
         <Flex key={variant} direction="column" gap="sm">
-          <AlertBase variant={variant} color="war" />
+          <AlertBase variant={variant} color="w" />
         </Flex>
       ))}
     </div>
@@ -122,10 +122,10 @@ export const AlertVariant = () => {
 export const AlertIcon = () => {
   return (
     <Flex direction="column" gap="sm">
-      <AlertBase icon={<CircleWarning width="20" />} color="dan" />
-      <AlertBase icon={<CircleCheck width="20" />} color="suc" />
-      <AlertBase icon={<CircleWarning width="20" />} color="war" />
-      <AlertBase icon={<CircleInfo width="20" />} color="inf" />
+      <AlertBase icon={<CircleWarning width="20" />} color="d" />
+      <AlertBase icon={<CircleCheck width="20" />} color="s" />
+      <AlertBase icon={<CircleWarning width="20" />} color="w" />
+      <AlertBase icon={<CircleInfo width="20" />} color="i" />
     </Flex>
   )
 }
@@ -156,16 +156,16 @@ export const AlertInline = () => {
 export const AlertTitleIcon = () => {
   return (
     <Flex direction="column" gap="sm">
-      <Alert color="dan" title="hello" />
-      <Alert color="suc" message="hello world something is wrong in the app here we go" />
-      <Alert color="war" icon={<CircleWarning width="20" />} title="hello" />
+      <Alert color="d" title="hello" />
+      <Alert color="s" message="hello world something is wrong in the app here we go" />
+      <Alert color="w" icon={<CircleWarning width="20" />} title="hello" />
       <Alert
-        color="war"
+        color="w"
         icon={<CircleWarning width="20" />}
         message="hello world something is wrong in the app here we go"
       />
       <Alert
-        color="war"
+        color="w"
         icon={<CircleWarning width="20" />}
         title="hello"
         message="hello world something is wrong in the app here we go"
@@ -177,14 +177,14 @@ export const AlertTitleIcon = () => {
 export const AlertCustomStyle = () => {
   return (
     <Flex direction="column" gap="sm">
-      <Alert color="dan" title="hello" style={{ backgroundColor: 'red' }} />
-      <Alert color="dan" title="hello" style={{ backgroundColor: 'green' }} closable />
-      <Alert color="dan" title="hello" style={{ backgroundColor: 'orange' }} variant="outline" />
-      <Alert color="dan" title="hello" style={{ backgroundColor: 'purple' }} variant="soft" />
-      <Alert color="dan" title="hello" className="u_secondary" />
-      <Alert color="dan" title="hello" className="u_secondary" closable />
-      <Alert color="dan" title="hello" className="u_secondary" variant="outline" />
-      <Alert color="dan" title="hello" className="u_secondary" variant="soft" />
+      <Alert color="d" title="hello" style={{ backgroundColor: 'red' }} />
+      <Alert color="d" title="hello" style={{ backgroundColor: 'green' }} closable />
+      <Alert color="d" title="hello" style={{ backgroundColor: 'orange' }} variant="outline" />
+      <Alert color="d" title="hello" style={{ backgroundColor: 'purple' }} variant="soft" />
+      <Alert color="d" title="hello" className="u_secondary" />
+      <Alert color="d" title="hello" className="u_secondary" closable />
+      <Alert color="d" title="hello" className="u_secondary" variant="outline" />
+      <Alert color="d" title="hello" className="u_secondary" variant="soft" />
     </Flex>
   )
 }
diff --git a/apps/stories/stories/avatar.stories.tsx b/apps/stories/stories/avatar.stories.tsx
index 607fe5cd..2fa83f2d 100644
--- a/apps/stories/stories/avatar.stories.tsx
+++ b/apps/stories/stories/avatar.stories.tsx
@@ -128,40 +128,40 @@ export function AvatarsColors() {
   return (
     <div className="l_f-md">
       <Flex gap="xs" items="center">
-        <Avatar color="dan" variant="solid" image={image} title="Hello" />
-        <Avatar color="dan" variant="solid" title="Hello" />
-        <Avatar color="suc" variant="solid" title="Hello" />
-        <Avatar color="war" variant="solid" title="Hello" />
-        <Avatar color="sec" variant="solid" title="Hello" />
-        <Avatar color="pri" variant="solid" title="Hello" />
-        <Avatar color="bg" variant="solid" title="Hello" />
+        <Avatar color="d" variant="solid" image={image} title="Hello" />
+        <Avatar color="d" variant="solid" title="Hello" />
+        <Avatar color="s" variant="solid" title="Hello" />
+        <Avatar color="w" variant="solid" title="Hello" />
+        <Avatar color="se" variant="solid" title="Hello" />
+        <Avatar color="p" variant="solid" title="Hello" />
+        <Avatar color="b" variant="solid" title="Hello" />
       </Flex>
       <Flex gap="xs" items="center">
-        <Avatar color="dan" variant="outline" image={image} title="Hello" />
-        <Avatar color="dan" variant="outline" title="Hello" />
-        <Avatar color="suc" variant="outline" title="Hello" />
-        <Avatar color="war" variant="outline" title="Hello" />
-        <Avatar color="sec" variant="outline" title="Hello" />
-        <Avatar color="pri" variant="outline" title="Hello" />
-        <Avatar color="bg" variant="outline" title="Hello" />
+        <Avatar color="d" variant="outline" image={image} title="Hello" />
+        <Avatar color="d" variant="outline" title="Hello" />
+        <Avatar color="s" variant="outline" title="Hello" />
+        <Avatar color="w" variant="outline" title="Hello" />
+        <Avatar color="se" variant="outline" title="Hello" />
+        <Avatar color="p" variant="outline" title="Hello" />
+        <Avatar color="b" variant="outline" title="Hello" />
       </Flex>
       <Flex gap="xs" items="center">
-        <Avatar color="dan" variant="dashed" image={image} title="Hello" />
-        <Avatar color="dan" variant="dashed" title="Hello" />
-        <Avatar color="suc" variant="dashed" title="Hello" />
-        <Avatar color="war" variant="dashed" title="Hello" />
-        <Avatar color="sec" variant="dashed" title="Hello" />
-        <Avatar color="pri" variant="dashed" title="Hello" />
-        <Avatar color="bg" variant="dashed" title="Hello" />
+        <Avatar color="d" variant="dashed" image={image} title="Hello" />
+        <Avatar color="d" variant="dashed" title="Hello" />
+        <Avatar color="s" variant="dashed" title="Hello" />
+        <Avatar color="w" variant="dashed" title="Hello" />
+        <Avatar color="se" variant="dashed" title="Hello" />
+        <Avatar color="p" variant="dashed" title="Hello" />
+        <Avatar color="b" variant="dashed" title="Hello" />
       </Flex>
       <Flex gap="xs" items="center">
-        <Avatar color="dan" variant="soft" image={image} title="Hello" />
-        <Avatar color="dan" variant="soft" title="Hello" />
-        <Avatar color="suc" variant="soft" title="Hello" />
-        <Avatar color="war" variant="soft" title="Hello" />
-        <Avatar color="sec" variant="soft" title="Hello" />
-        <Avatar color="pri" variant="soft" title="Hello" />
-        <Avatar color="bg" variant="soft" title="Hello" />
+        <Avatar color="d" variant="soft" image={image} title="Hello" />
+        <Avatar color="d" variant="soft" title="Hello" />
+        <Avatar color="s" variant="soft" title="Hello" />
+        <Avatar color="w" variant="soft" title="Hello" />
+        <Avatar color="se" variant="soft" title="Hello" />
+        <Avatar color="p" variant="soft" title="Hello" />
+        <Avatar color="b" variant="soft" title="Hello" />
       </Flex>
     </div>
   )
@@ -246,7 +246,7 @@ export function AvatarGroupLimit() {
 export function AvatarGroupCustom() {
   return (
     <div className="l_f-md">
-      <AvatarGroup limit={6} layout="stack" color="dan" variant="outline" fallback={<DotsHorizontal width="20" />}>
+      <AvatarGroup limit={6} layout="stack" color="d" variant="outline" fallback={<DotsHorizontal width="20" />}>
         <Avatar title="Hello" />
         <Avatar image="https://picsum.photos/id/128/100/100" title="Hello" />
         <Avatar fallback={<DotsHorizontal width="20" />} image="https://picsum.photos/id/123/100/100" title="Hello" />
diff --git a/apps/stories/stories/badge.stories.tsx b/apps/stories/stories/badge.stories.tsx
index a24caa48..5beb2e86 100644
--- a/apps/stories/stories/badge.stories.tsx
+++ b/apps/stories/stories/badge.stories.tsx
@@ -112,12 +112,12 @@ export const BadgeVariantIcon = () => {
 export const BadgeNumericColor = () => {
   return (
     <Flex gap="sm">
-      <Badge type="numeric" number={15} max={15} color="dan" />
-      <Badge type="numeric" number={15} max={15} color="suc" />
-      <Badge type="numeric" number={15} max={15} color="war" />
-      <Badge type="numeric" number={15} max={15} color="pri" />
-      <Badge type="numeric" number={15} max={15} color="sec" />
-      <Badge type="numeric" number={15} max={15} color="bg" />
+      <Badge type="numeric" number={15} max={15} color="d" />
+      <Badge type="numeric" number={15} max={15} color="s" />
+      <Badge type="numeric" number={15} max={15} color="w" />
+      <Badge type="numeric" number={15} max={15} color="p" />
+      <Badge type="numeric" number={15} max={15} color="se" />
+      <Badge type="numeric" number={15} max={15} color="b" />
     </Flex>
   )
 }
@@ -126,20 +126,20 @@ export const BadgeHighContrastColor = () => {
   return (
     <div className="l_f-sm">
       <Flex gap="sm">
-        <Badge type="numeric" number={15} max={15} color="dan" />
-        <Badge type="numeric" number={15} max={15} color="suc" />
-        <Badge type="numeric" number={15} max={15} color="war" />
-        <Badge type="numeric" number={15} max={15} color="pri" />
-        <Badge type="numeric" number={15} max={15} color="sec" />
-        <Badge type="numeric" number={15} max={15} color="bg" />
+        <Badge type="numeric" number={15} max={15} color="d" />
+        <Badge type="numeric" number={15} max={15} color="s" />
+        <Badge type="numeric" number={15} max={15} color="w" />
+        <Badge type="numeric" number={15} max={15} color="p" />
+        <Badge type="numeric" number={15} max={15} color="se" />
+        <Badge type="numeric" number={15} max={15} color="b" />
       </Flex>
       <Flex gap="sm">
-        <Badge type="numeric" highContrast number={15} max={15} color="dan" />
-        <Badge type="numeric" highContrast number={15} max={15} color="suc" />
-        <Badge type="numeric" highContrast number={15} max={15} color="war" />
-        <Badge type="numeric" highContrast number={15} max={15} color="pri" />
-        <Badge type="numeric" highContrast number={15} max={15} color="sec" />
-        <Badge type="numeric" highContrast number={15} max={15} color="bg" />
+        <Badge type="numeric" highContrast number={15} max={15} color="d" />
+        <Badge type="numeric" highContrast number={15} max={15} color="s" />
+        <Badge type="numeric" highContrast number={15} max={15} color="w" />
+        <Badge type="numeric" highContrast number={15} max={15} color="p" />
+        <Badge type="numeric" highContrast number={15} max={15} color="se" />
+        <Badge type="numeric" highContrast number={15} max={15} color="b" />
       </Flex>
     </div>
   )
@@ -149,31 +149,31 @@ export const BadgeCorner = () => {
   return (
     <div className="l_f-md">
       <Flex gap="sm">
-        <Badge type="numeric" corner="sharp" number={15} max={15} color="dan" />
-        <Badge type="numeric" corner="xs" number={15} max={15} color="suc" />
-        <Badge type="numeric" corner="sm" number={15} max={15} color="war" />
-        <Badge type="numeric" corner="md" number={15} max={15} color="sec" />
-        <Badge type="numeric" corner="lg" number={15} max={15} color="sec" />
-        <Badge type="numeric" corner="circle" number={15} max={15} color="pri" />
-        <Badge type="numeric" corner="full" number={15} max={15} color="bg" />
+        <Badge type="numeric" corner="sharp" number={15} max={15} color="d" />
+        <Badge type="numeric" corner="xs" number={15} max={15} color="s" />
+        <Badge type="numeric" corner="sm" number={15} max={15} color="w" />
+        <Badge type="numeric" corner="md" number={15} max={15} color="se" />
+        <Badge type="numeric" corner="lg" number={15} max={15} color="se" />
+        <Badge type="numeric" corner="circle" number={15} max={15} color="p" />
+        <Badge type="numeric" corner="full" number={15} max={15} color="b" />
       </Flex>
       <Flex gap="sm">
-        <Badge type="icon" icon={<Check />} corner="sharp" color="dan" />
-        <Badge type="icon" icon={<Plus />} corner="xs" color="suc" />
-        <Badge type="icon" icon={<Plane />} corner="sm" color="war" />
-        <Badge type="icon" icon={<Apple />} corner="md" color="sec" />
-        <Badge type="icon" icon={<Alien />} corner="lg" color="sec" />
-        <Badge type="icon" icon={<ChevronDown />} corner="circle" color="pri" />
-        <Badge type="icon" icon={<LetterSpacing />} corner="full" color="bg" />
+        <Badge type="icon" icon={<Check />} corner="sharp" color="d" />
+        <Badge type="icon" icon={<Plus />} corner="xs" color="s" />
+        <Badge type="icon" icon={<Plane />} corner="sm" color="w" />
+        <Badge type="icon" icon={<Apple />} corner="md" color="se" />
+        <Badge type="icon" icon={<Alien />} corner="lg" color="se" />
+        <Badge type="icon" icon={<ChevronDown />} corner="circle" color="p" />
+        <Badge type="icon" icon={<LetterSpacing />} corner="full" color="b" />
       </Flex>
       <Flex gap="sm">
-        <Badge type="dot" corner="sharp" color="dan" />
-        <Badge type="dot" corner="xs" color="suc" />
-        <Badge type="dot" corner="sm" color="war" />
-        <Badge type="dot" corner="md" color="sec" />
-        <Badge type="dot" corner="lg" color="sec" />
-        <Badge type="dot" corner="circle" color="pri" />
-        <Badge type="dot" corner="full" color="bg" />
+        <Badge type="dot" corner="sharp" color="d" />
+        <Badge type="dot" corner="xs" color="s" />
+        <Badge type="dot" corner="sm" color="w" />
+        <Badge type="dot" corner="md" color="se" />
+        <Badge type="dot" corner="lg" color="se" />
+        <Badge type="dot" corner="circle" color="p" />
+        <Badge type="dot" corner="full" color="b" />
       </Flex>
     </div>
   )
@@ -182,12 +182,12 @@ export const BadgeCorner = () => {
 export const BadgeIconColor = () => {
   return (
     <Flex gap="sm">
-      <Badge type="icon" icon={<Check />} color="dan" />
-      <Badge type="icon" icon={<Check />} color="suc" />
-      <Badge type="icon" icon={<Check />} color="war" />
-      <Badge type="icon" icon={<Check />} color="pri" />
-      <Badge type="icon" icon={<Check />} color="sec" />
-      <Badge type="icon" icon={<Check />} color="bg" />
+      <Badge type="icon" icon={<Check />} color="d" />
+      <Badge type="icon" icon={<Check />} color="s" />
+      <Badge type="icon" icon={<Check />} color="w" />
+      <Badge type="icon" icon={<Check />} color="p" />
+      <Badge type="icon" icon={<Check />} color="se" />
+      <Badge type="icon" icon={<Check />} color="b" />
     </Flex>
   )
 }
@@ -195,12 +195,12 @@ export const BadgeIconColor = () => {
 export const BadgeDotColor = () => {
   return (
     <Flex gap="sm">
-      <Badge type="dot" color="dan" />
-      <Badge type="dot" color="suc" />
-      <Badge type="dot" color="war" />
-      <Badge type="dot" color="pri" />
-      <Badge type="dot" color="sec" />
-      <Badge type="dot" color="bg" />
+      <Badge type="dot" color="d" />
+      <Badge type="dot" color="s" />
+      <Badge type="dot" color="w" />
+      <Badge type="dot" color="p" />
+      <Badge type="dot" color="se" />
+      <Badge type="dot" color="b" />
     </Flex>
   )
 }
@@ -208,13 +208,13 @@ export const BadgeDotColor = () => {
 export const BadgeNumericMaxValue = () => {
   return (
     <Flex gap="sm">
-      <Badge type="numeric" number={15} max={10} color="dan" />
-      <Badge type="numeric" number={1500} max={1000} color="suc" />
-      <Badge type="numeric" number={5} max={0} color="war" />
-      <Badge type="numeric" number={0} max={15} color="pri" />
-      <Badge type="numeric" showZero number={0} max={15} color="dan" />
-      <Badge type="numeric" number={15} max={1} color="sec" />
-      <Badge type="numeric" number={15} max={15} color="bg" />
+      <Badge type="numeric" number={15} max={10} color="d" />
+      <Badge type="numeric" number={1500} max={1000} color="s" />
+      <Badge type="numeric" number={5} max={0} color="w" />
+      <Badge type="numeric" number={0} max={15} color="p" />
+      <Badge type="numeric" showZero number={0} max={15} color="d" />
+      <Badge type="numeric" number={15} max={1} color="se" />
+      <Badge type="numeric" number={15} max={15} color="b" />
     </Flex>
   )
 }
@@ -240,7 +240,7 @@ export const BadgeRefForwarded = () => {
 
   return (
     <Flex gap="sm">
-      <Badge ref={badgeRef} type="numeric" number={15} max={10} color="dan" />
+      <Badge ref={badgeRef} type="numeric" number={15} max={10} color="d" />
       <Button onClick={handleClick}>Number {count}</Button>
     </Flex>
   )
diff --git a/apps/stories/stories/blockquote.stories.tsx b/apps/stories/stories/blockquote.stories.tsx
index 35e42287..e6d1add3 100644
--- a/apps/stories/stories/blockquote.stories.tsx
+++ b/apps/stories/stories/blockquote.stories.tsx
@@ -86,27 +86,27 @@ export const BlockquoteCorner = () => {
 export const BlockquoteColor = () => {
   return (
     <div className="l_f-md">
-      <Blockquote color="dan">
+      <Blockquote color="d">
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro corporis autem minima animi, sequi
         exercitationem fugit mollitia ducimus consequatur praesentium, inventore laudantium ullam aliquam saepe?
         Repellat libero quibusdam repellendus quisquam?
       </Blockquote>
-      <Blockquote color="suc">
+      <Blockquote color="s">
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro corporis autem minima animi, sequi
         exercitationem fugit mollitia ducimus consequatur praesentium, inventore laudantium ullam aliquam saepe?
         Repellat libero quibusdam repellendus quisquam?
       </Blockquote>
-      <Blockquote color="war">
+      <Blockquote color="w">
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro corporis autem minima animi, sequi
         exercitationem fugit mollitia ducimus consequatur praesentium, inventore laudantium ullam aliquam saepe?
         Repellat libero quibusdam repellendus quisquam?
       </Blockquote>
-      <Blockquote color="pri">
+      <Blockquote color="p">
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro corporis autem minima animi, sequi
         exercitationem fugit mollitia ducimus consequatur praesentium, inventore laudantium ullam aliquam saepe?
         Repellat libero quibusdam repellendus quisquam?
       </Blockquote>
-      <Blockquote color="sec">
+      <Blockquote color="se">
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro corporis autem minima animi, sequi
         exercitationem fugit mollitia ducimus consequatur praesentium, inventore laudantium ullam aliquam saepe?
         Repellat libero quibusdam repellendus quisquam?
@@ -123,21 +123,21 @@ export const BlockquoteColor = () => {
 export const BlockquoteWithCite = () => {
   return (
     <div className="l_f-md">
-      <Blockquote color="dan">
+      <Blockquote color="d">
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro corporis autem minima animi, sequi
         exercitationem fugit mollitia ducimus consequatur praesentium, inventore laudantium ullam aliquam saepe?
         Repellat libero quibusdam repellendus quisquam?
         <BlockquoteCite title="Hello world" />
       </Blockquote>
 
-      <Blockquote color="dan">
+      <Blockquote color="d">
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro corporis autem minima animi, sequi
         exercitationem fugit mollitia ducimus consequatur praesentium, inventore laudantium ullam aliquam saepe?
         Repellat libero quibusdam repellendus quisquam?
         <BlockquoteCite title="Hello world" align="end" />
       </Blockquote>
 
-      <Blockquote color="dan">
+      <Blockquote color="d">
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro corporis autem minima animi, sequi
         exercitationem fugit mollitia ducimus consequatur praesentium, inventore laudantium ullam aliquam saepe?
         Repellat libero quibusdam repellendus quisquam?
@@ -150,13 +150,13 @@ export const BlockquoteWithCite = () => {
 export const BlockquoteCustomStyle = () => {
   return (
     <Flex gap="sm">
-      <Blockquote color="dan" className="u_warning">
+      <Blockquote color="d" className="u_warning">
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro corporis autem minima animi, sequi
         exercitationem fugit mollitia ducimus consequatur praesentium, inventore laudantium ullam aliquam saepe?
         Repellat libero quibusdam repellendus quisquam?
         <BlockquoteCite title="Hello world" align="end" />
       </Blockquote>
-      <Blockquote style={{ background: 'red' }} color="dan">
+      <Blockquote style={{ background: 'red' }} color="d">
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro corporis autem minima animi, sequi
         exercitationem fugit mollitia ducimus consequatur praesentium, inventore laudantium ullam aliquam saepe?
         Repellat libero quibusdam repellendus quisquam?
diff --git a/apps/stories/stories/breadcrumb.stories.tsx b/apps/stories/stories/breadcrumb.stories.tsx
index a8ec946d..eff0331f 100644
--- a/apps/stories/stories/breadcrumb.stories.tsx
+++ b/apps/stories/stories/breadcrumb.stories.tsx
@@ -53,7 +53,7 @@ export function BreadcrumbSeparator() {
 export function BreadcrumbColor() {
   return (
     <div className="l_f-md">
-      <Breadcrumb color="dan">
+      <Breadcrumb color="d">
         <BreadcrumbItem link="../..">components</BreadcrumbItem>
         <BreadcrumbItem link="../">base-ui</BreadcrumbItem>
         <BreadcrumbItem link="./" current>
@@ -61,7 +61,7 @@ export function BreadcrumbColor() {
         </BreadcrumbItem>
       </Breadcrumb>
 
-      <Breadcrumb color="war">
+      <Breadcrumb color="w">
         <BreadcrumbItem link="../..">components</BreadcrumbItem>
         <BreadcrumbItem link="../">base-ui</BreadcrumbItem>
         <BreadcrumbItem link="./" current>
@@ -69,7 +69,7 @@ export function BreadcrumbColor() {
         </BreadcrumbItem>
       </Breadcrumb>
 
-      <Breadcrumb color="suc">
+      <Breadcrumb color="s">
         <BreadcrumbItem link="../..">components</BreadcrumbItem>
         <BreadcrumbItem link="../">base-ui</BreadcrumbItem>
         <BreadcrumbItem link="./" current>
@@ -77,7 +77,7 @@ export function BreadcrumbColor() {
         </BreadcrumbItem>
       </Breadcrumb>
 
-      <Breadcrumb color="sec">
+      <Breadcrumb color="se">
         <BreadcrumbItem link="../..">components</BreadcrumbItem>
         <BreadcrumbItem link="../">base-ui</BreadcrumbItem>
         <BreadcrumbItem link="./" current>
@@ -85,7 +85,7 @@ export function BreadcrumbColor() {
         </BreadcrumbItem>
       </Breadcrumb>
 
-      <Breadcrumb color="pri">
+      <Breadcrumb color="p">
         <BreadcrumbItem link="../..">components</BreadcrumbItem>
         <BreadcrumbItem link="../">base-ui</BreadcrumbItem>
         <BreadcrumbItem link="./" current>
@@ -250,7 +250,7 @@ export function BreadcrumbCustomStyle() {
         </BreadcrumbItem>
       </Breadcrumb>
 
-      <Breadcrumb style={{ color: 'brown', background: 'var(--bg-5)' }} separator="*">
+      <Breadcrumb style={{ color: 'brown', background: 'var(--B5)' }} separator="*">
         <BreadcrumbItem link="../..">components</BreadcrumbItem>
         <BreadcrumbItem link="../">base-ui</BreadcrumbItem>
         <BreadcrumbItem link="./" current>
diff --git a/apps/stories/stories/button.stories.tsx b/apps/stories/stories/button.stories.tsx
index 5b6e3deb..f85705a8 100644
--- a/apps/stories/stories/button.stories.tsx
+++ b/apps/stories/stories/button.stories.tsx
@@ -33,12 +33,12 @@ export function HtmlButton() {
 export function ButtonsColors() {
   return (
     <Flex gap="sm">
-      <Button color="suc">Green</Button>
-      <Button color="war">Orange</Button>
-      <Button color="dan">Red</Button>
-      <Button color="sec">Secondary</Button>
+      <Button color="s">Green</Button>
+      <Button color="w">Orange</Button>
+      <Button color="d">Red</Button>
+      <Button color="se">Secondary</Button>
       <Button color="bg">bg</Button>
-      <Button color="pri">Primary</Button>
+      <Button color="p">Primary</Button>
     </Flex>
   )
 }
@@ -100,39 +100,39 @@ export function ButtonsTransforms() {
     <div>
       <h1>with Props</h1>
       <Flex gap="sm" wrap>
-        <Button transform="uppercase" color="suc">
+        <Button transform="uppercase" color="s">
           Green
         </Button>
-        <Button transform="capitalize" color="war">
+        <Button transform="capitalize" color="w">
           Orange
         </Button>
-        <Button transform="lowercase" color="dan">
+        <Button transform="lowercase" color="d">
           Red
         </Button>
       </Flex>
       <h1>with Global Capitalize</h1>
       <Flex gap="sm" style={{ '--button-transform': 'capitalize' } as CSSProperties}>
-        <Button color="suc">Green</Button>
-        <Button color="war">Orange</Button>
-        <Button color="dan">Red</Button>
+        <Button color="s">Green</Button>
+        <Button color="w">Orange</Button>
+        <Button color="d">Red</Button>
       </Flex>
       <h1>with Global lowercase</h1>
       <Flex gap="sm" style={{ '--button-transform': 'lowercase' } as CSSProperties}>
-        <Button color="suc">Green</Button>
-        <Button color="war">Orange</Button>
-        <Button color="dan">Red</Button>
+        <Button color="s">Green</Button>
+        <Button color="w">Orange</Button>
+        <Button color="d">Red</Button>
       </Flex>
       <h1>with Global uppercase</h1>
       <Flex gap="sm" style={{ '--button-transform': 'uppercase' } as CSSProperties}>
-        <Button color="suc">Green</Button>
-        <Button color="war">Orange</Button>
-        <Button color="dan">Red</Button>
+        <Button color="s">Green</Button>
+        <Button color="w">Orange</Button>
+        <Button color="d">Red</Button>
       </Flex>
       <h1>Default</h1>
       <Flex gap="sm">
-        <Button color="suc">Green</Button>
-        <Button color="war">Orange</Button>
-        <Button color="dan">Red</Button>
+        <Button color="s">Green</Button>
+        <Button color="w">Orange</Button>
+        <Button color="d">Red</Button>
       </Flex>
     </div>
   )
@@ -143,22 +143,22 @@ export function ButtonsVariants() {
     <div className="l_f-md">
       {VARIANTS.map((variant) => (
         <Flex key={variant} gap="sm">
-          <Button color="suc" variant={variant}>
+          <Button color="s" variant={variant}>
             Green
           </Button>
-          <Button color="war" variant={variant}>
+          <Button color="w" variant={variant}>
             Orange
           </Button>
-          <Button color="dan" variant={variant}>
+          <Button color="d" variant={variant}>
             Red
           </Button>
-          <Button color="sec" variant={variant}>
+          <Button color="se" variant={variant}>
             Secondary
           </Button>
-          <Button color="bg" variant={variant}>
+          <Button color="b" variant={variant}>
             bg
           </Button>
-          <Button color="pri" variant={variant}>
+          <Button color="p" variant={variant}>
             Primary
           </Button>
         </Flex>
@@ -172,64 +172,64 @@ export function ButtonsCorners() {
     <div className="l_f-md">
       <h1>Regular</h1>
       <Flex gap="sm" wrap>
-        <Button corner="sharp" color="suc">
+        <Button corner="sharp" color="s">
           Green
         </Button>
-        <Button corner="xs" color="war">
+        <Button corner="xs" color="w">
           Orange
         </Button>
-        <Button corner="sm" color="dan">
+        <Button corner="sm" color="d">
           Red
         </Button>
-        <Button corner="md" color="sec">
+        <Button corner="md" color="se">
           Secondary
         </Button>
         <Button corner="lg" color="bg">
           bg
         </Button>
-        <Button corner="xl" color="pri">
+        <Button corner="xl" color="p">
           Primary
         </Button>
-        <Button corner="h-1" color="pri">
+        <Button corner="h-1" color="p">
           Primary
         </Button>
-        <Button corner="h-2" color="pri">
+        <Button corner="h-2" color="p">
           Primary
         </Button>
-        <Button corner="h-3" color="pri">
+        <Button corner="h-3" color="p">
           Primary
         </Button>
 
-        <Button corner="h-4" color="pri">
+        <Button corner="h-4" color="p">
           Primary
         </Button>
-        <Button corner="h-5" color="pri">
+        <Button corner="h-5" color="p">
           Primary
         </Button>
-        <Button corner="h-6" color="pri">
+        <Button corner="h-6" color="p">
           Primary
         </Button>
       </Flex>
       <h1>Specify the button Corner circle</h1>
 
       <Flex gap="sm" style={{ '--button-rad': '1000px' } as CSSProperties}>
-        <Button color="suc">Green</Button>
-        <Button color="war">Orange</Button>
-        <Button color="dan">Red</Button>
-        <Button color="sec">Secondary</Button>
+        <Button color="s">Green</Button>
+        <Button color="w">Orange</Button>
+        <Button color="d">Red</Button>
+        <Button color="se">Secondary</Button>
         <Button color="bg">bg</Button>
-        <Button color="pri">Primary</Button>
+        <Button color="p">Primary</Button>
       </Flex>
 
       <h1>Specify the button Corner Medium</h1>
 
       <Flex gap="sm" style={{ '--button-rad': 'var(--rad-md)' } as CSSProperties}>
-        <Button color="suc">Green</Button>
-        <Button color="war">Orange</Button>
-        <Button color="dan">Red</Button>
-        <Button color="sec">Secondary</Button>
+        <Button color="s">Green</Button>
+        <Button color="w">Orange</Button>
+        <Button color="d">Red</Button>
+        <Button color="se">Secondary</Button>
         <Button color="bg">bg</Button>
-        <Button color="pri">Primary</Button>
+        <Button color="p">Primary</Button>
       </Flex>
     </div>
   )
@@ -238,22 +238,22 @@ export function ButtonsCorners() {
 export function ButtonSizes() {
   return (
     <Flex gap="sm" items="center" wrap>
-      <Button size="3xs" color="suc">
+      <Button size="3xs" color="s">
         Green
       </Button>
-      <Button size="2xs" color="war">
+      <Button size="2xs" color="w">
         Orange
       </Button>
-      <Button size="xs" color="dan">
+      <Button size="xs" color="d">
         Red
       </Button>
-      <Button size="sm" color="sec">
+      <Button size="sm" color="se">
         Secondary
       </Button>
       <Button size="md" color="bg">
         bg
       </Button>
-      <Button size="lg" color="pri">
+      <Button size="lg" color="p">
         Primary
       </Button>
     </Flex>
@@ -263,31 +263,31 @@ export function ButtonSizes() {
 export function ButtonsFluid() {
   return (
     <Flex gap="md" direction="column">
-      <Button fluid icon={<ThumbUp />} iconPosition="end" size="3xs" color="suc">
+      <Button fluid icon={<ThumbUp />} iconPosition="end" size="3xs" color="s">
         Green
       </Button>
-      <Button fluid icon={<ThumbDown />} size="2xs" color="war">
+      <Button fluid icon={<ThumbDown />} size="2xs" color="w">
         Orange
       </Button>
-      <Button fluid icon={<Plus />} iconPosition="end" size="xs" color="dan">
+      <Button fluid icon={<Plus />} iconPosition="end" size="xs" color="d">
         Red
       </Button>
-      <Button fluid icon={<Github />} size="sm" color="sec">
+      <Button fluid icon={<Github />} size="sm" color="se">
         Secondary
       </Button>
       <Button fluid icon={<Eye />} iconPosition="end" size="md" color="bg">
         bg
       </Button>
-      <Button fluid icon={<ThumbUp />} size="lg" color="pri">
+      <Button fluid icon={<ThumbUp />} size="lg" color="p">
         Primary
       </Button>
-      <Button fluid icon={<ThumbUp />} iconPosition="end" size="xl" color="suc">
+      <Button fluid icon={<ThumbUp />} iconPosition="end" size="xl" color="s">
         Purple
       </Button>
-      <Button fluid icon={<ThumbUp />} size="2xl" color="sec">
+      <Button fluid icon={<ThumbUp />} size="2xl" color="se">
         Brown
       </Button>
-      <Button fluid icon={<ThumbUp />} iconPosition="end" size="3xl" color="sec">
+      <Button fluid icon={<ThumbUp />} iconPosition="end" size="3xl" color="se">
         Brown
       </Button>
     </Flex>
@@ -297,13 +297,13 @@ export function ButtonsFluid() {
 export function ButtonsState() {
   return (
     <Flex items="center" gap="xs">
-      <Button state="idle" color="suc">
+      <Button state="idle" color="s">
         Idle
       </Button>
-      <Button state="loading" color="suc">
+      <Button state="loading" color="s">
         Loading
       </Button>
-      <Button disabled color="suc">
+      <Button disabled color="s">
         Disabled
       </Button>
     </Flex>
@@ -313,31 +313,31 @@ export function ButtonsState() {
 export function ButtonLoadingState() {
   return (
     <Flex gap="sm" items="center" wrap>
-      <Button state="loading" size="3xs" color="suc">
+      <Button state="loading" size="3xs" color="s">
         Green
       </Button>
-      <Button state="loading" size="2xs" color="war">
+      <Button state="loading" size="2xs" color="w">
         Orange
       </Button>
-      <Button state="loading" size="xs" color="dan">
+      <Button state="loading" size="xs" color="d">
         Red
       </Button>
-      <Button state="loading" size="sm" color="sec">
+      <Button state="loading" size="sm" color="se">
         Secondary
       </Button>
       <Button state="loading" size="md" color="bg">
         bg
       </Button>
-      <Button state="loading" size="lg" color="pri">
+      <Button state="loading" size="lg" color="p">
         Primary
       </Button>
-      <Button state="loading" size="xl" color="suc">
+      <Button state="loading" size="xl" color="s">
         Purple
       </Button>
-      <Button state="loading" size="2xl" color="sec">
+      <Button state="loading" size="2xl" color="se">
         Brown
       </Button>
-      <Button state="loading" size="3xl" color="sec">
+      <Button state="loading" size="3xl" color="se">
         Brown
       </Button>
     </Flex>
@@ -347,10 +347,10 @@ export function ButtonLoadingState() {
 export function ButtonsCustomStyle() {
   return (
     <Flex items="center" gap="xs">
-      <Button style={{ background: 'orange' }} state="idle" color="suc">
+      <Button style={{ background: 'orange' }} state="idle" color="s">
         Hello world
       </Button>
-      <Button className="u_secondary" color="suc">
+      <Button className="u_secondary" color="s">
         Hello world
       </Button>
     </Flex>
@@ -360,14 +360,14 @@ export function ButtonsCustomStyle() {
 export function ButtonsLength() {
   return (
     <Flex items="center" gap="xs" wrap>
-      <Button state="idle" color="suc">
+      <Button state="idle" color="s">
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam asperiores a vitae expedita nostrum
         perspiciatis est excepturi, eligendi facere vel quis, et in dolores eos voluptates libero, adipisci
         necessitatibus voluptatum?
       </Button>
-      <Button color="suc">Hello world</Button>
+      <Button color="s">Hello world</Button>
 
-      <Button color="suc">H</Button>
+      <Button color="s">H</Button>
     </Flex>
   )
 }
@@ -377,65 +377,65 @@ export function ButtonCornerDefaults() {
     <div className="l_f-sm">
       <Flex gap="sm">
         <Paper corner="sharp">
-          <Button color="suc">Green</Button>
+          <Button color="s">Green</Button>
         </Paper>
         <Paper corner="sm">
-          <Button color="suc">Green</Button>
+          <Button color="s">Green</Button>
         </Paper>
         <Paper corner="md">
-          <Button color="suc">Green</Button>
+          <Button color="s">Green</Button>
         </Paper>
         <Paper corner="lg">
-          <Button color="suc">Green</Button>
+          <Button color="s">Green</Button>
         </Paper>
-        <Button color="suc">Green</Button>
+        <Button color="s">Green</Button>
       </Flex>
 
       <Flex gap="sm" style={{ '--button-rad': '5px' } as CSSProperties}>
         <Paper corner="sharp">
-          <Button color="suc">Green</Button>
+          <Button color="s">Green</Button>
         </Paper>
         <Paper corner="sm">
-          <Button color="suc">Green</Button>
+          <Button color="s">Green</Button>
         </Paper>
         <Paper corner="md">
-          <Button color="suc">Green</Button>
+          <Button color="s">Green</Button>
         </Paper>
         <Paper corner="lg">
-          <Button color="suc">Green</Button>
+          <Button color="s">Green</Button>
         </Paper>
-        <Button color="suc">Green</Button>
+        <Button color="s">Green</Button>
       </Flex>
       <Flex gap="sm" style={{ '--button-rad': '10px' } as CSSProperties}>
         <Paper corner="sharp">
-          <Button color="suc">Green</Button>
+          <Button color="s">Green</Button>
         </Paper>
         <Paper corner="sm">
-          <Button color="suc">Green</Button>
+          <Button color="s">Green</Button>
         </Paper>
         <Paper corner="md">
-          <Button color="suc">Green</Button>
+          <Button color="s">Green</Button>
         </Paper>
         <Paper corner="lg">
-          <Button color="suc">Green</Button>
+          <Button color="s">Green</Button>
         </Paper>
-        <Button color="suc">Green</Button>
+        <Button color="s">Green</Button>
       </Flex>
 
       <Flex gap="sm" style={{ '--button-rad': '20px' } as CSSProperties}>
         <Paper corner="sharp">
-          <Button color="suc">Green</Button>
+          <Button color="s">Green</Button>
         </Paper>
         <Paper corner="sm">
-          <Button color="suc">Green</Button>
+          <Button color="s">Green</Button>
         </Paper>
         <Paper corner="md">
-          <Button color="suc">Green</Button>
+          <Button color="s">Green</Button>
         </Paper>
         <Paper corner="lg">
-          <Button color="suc">Green</Button>
+          <Button color="s">Green</Button>
         </Paper>
-        <Button color="suc">Green</Button>
+        <Button color="s">Green</Button>
       </Flex>
     </div>
   )
@@ -445,18 +445,18 @@ export function ButtonTransformDefaults() {
   return (
     <div className="l_f-sm">
       <Flex gap="sm" style={{ '--button-transform': 'lowercase' } as CSSProperties}>
-        <Button transform="uppercase" color="suc">
+        <Button transform="uppercase" color="s">
           green
         </Button>
-        <Button transform="first-letter-only" color="suc">
+        <Button transform="first-letter-only" color="s">
           green
         </Button>
-        <Button transform="lowercase" color="suc">
+        <Button transform="lowercase" color="s">
           green
         </Button>
-        <Button color="suc">Green</Button>
+        <Button color="s">Green</Button>
       </Flex>
-      <Button color="suc">Green</Button>
+      <Button color="s">Green</Button>
     </div>
   )
 }
@@ -464,31 +464,31 @@ export function ButtonSizeDefaults() {
   return (
     <div className="l_f-sm">
       <Flex gap="sm" style={{ '--button-size': '8px' } as CSSProperties}>
-        <Button size="2xs" color="suc">
+        <Button size="2xs" color="s">
           green
         </Button>
-        <Button size="xs" color="suc">
+        <Button size="xs" color="s">
           green
         </Button>
-        <Button size="sm" color="suc">
+        <Button size="sm" color="s">
           green
         </Button>
-        <Button size="md" color="suc">
+        <Button size="md" color="s">
           green
         </Button>
-        <Button size="lg" color="suc">
+        <Button size="lg" color="s">
           green
         </Button>
-        <Button size="xl" color="suc">
+        <Button size="xl" color="s">
           green
         </Button>
-        <Button size="2xl" color="suc">
+        <Button size="2xl" color="s">
           green
         </Button>
-        <Button color="suc">Green</Button>
+        <Button color="s">Green</Button>
       </Flex>
 
-      <Button color="suc">Green</Button>
+      <Button color="s">Green</Button>
     </div>
   )
 }
diff --git a/apps/stories/stories/checkbox.stories.tsx b/apps/stories/stories/checkbox.stories.tsx
index c6bf6e75..447f1943 100644
--- a/apps/stories/stories/checkbox.stories.tsx
+++ b/apps/stories/stories/checkbox.stories.tsx
@@ -43,12 +43,12 @@ export const CheckboxColor = () => {
   return (
     <Flex gap="sm" items="center">
       <Checkbox name="hello" label="Transparent" />
-      <Checkbox name="hello" label="Danger" color="dan" />
-      <Checkbox name="hello" label="Success" color="suc" />
-      <Checkbox name="hello" label="Warning" color="war" />
-      <Checkbox name="hello" label="Primary" color="pri" />
-      <Checkbox name="hello" label="Secondary" color="sec" />
-      <Checkbox name="hello" label="bg" color="bg" />
+      <Checkbox name="hello" label="Danger" color="d" />
+      <Checkbox name="hello" label="Success" color="s" />
+      <Checkbox name="hello" label="Warning" color="w" />
+      <Checkbox name="hello" label="Primary" color="p" />
+      <Checkbox name="hello" label="Secondary" color="se" />
+      <Checkbox name="hello" label="bg" color="b" />
     </Flex>
   )
 }
@@ -57,20 +57,20 @@ export const CheckboxDisabled = () => {
   return (
     <div className="l_f-md">
       <Flex gap="sm" items="center">
-        <Checkbox disabled name="hello" label="Hello" color="dan" />
-        <Checkbox disabled name="hello" label="Hello" color="suc" />
-        <Checkbox disabled name="hello" label="Hello" color="war" />
-        <Checkbox disabled name="hello" label="Hello" color="pri" />
-        <Checkbox disabled name="hello" label="Hello" color="sec" />
-        <Checkbox disabled name="hello" label="Hello" color="bg" />
+        <Checkbox disabled name="hello" label="Hello" color="d" />
+        <Checkbox disabled name="hello" label="Hello" color="s" />
+        <Checkbox disabled name="hello" label="Hello" color="w" />
+        <Checkbox disabled name="hello" label="Hello" color="p" />
+        <Checkbox disabled name="hello" label="Hello" color="se" />
+        <Checkbox disabled name="hello" label="Hello" color="b" />
       </Flex>
       <Flex gap="sm" items="center">
-        <Checkbox disabled defaultChecked name="hello" label="Hello" color="dan" />
-        <Checkbox disabled defaultChecked name="hello" label="Hello" color="suc" />
-        <Checkbox disabled defaultChecked name="hello" label="Hello" color="war" />
-        <Checkbox disabled defaultChecked name="hello" label="Hello" color="pri" />
-        <Checkbox disabled defaultChecked name="hello" label="Hello" color="sec" />
-        <Checkbox disabled defaultChecked name="hello" label="Hello" color="bg" />
+        <Checkbox disabled defaultChecked name="hello" label="Hello" color="d" />
+        <Checkbox disabled defaultChecked name="hello" label="Hello" color="s" />
+        <Checkbox disabled defaultChecked name="hello" label="Hello" color="w" />
+        <Checkbox disabled defaultChecked name="hello" label="Hello" color="p" />
+        <Checkbox disabled defaultChecked name="hello" label="Hello" color="se" />
+        <Checkbox disabled defaultChecked name="hello" label="Hello" color="b" />
       </Flex>
     </div>
   )
@@ -79,12 +79,12 @@ export const CheckboxDisabled = () => {
 export const CheckboxDefaultCheckedColor = () => {
   return (
     <Flex gap="sm" items="center">
-      <Checkbox defaultChecked name="hello" label="Hello" color="dan" />
-      <Checkbox defaultChecked name="hello" label="Hello" color="suc" />
-      <Checkbox defaultChecked name="hello" label="Hello" color="war" />
-      <Checkbox defaultChecked name="hello" label="Hello" color="pri" />
-      <Checkbox defaultChecked name="hello" label="Hello" color="sec" />
-      <Checkbox defaultChecked name="hello" label="Hello" color="bg" />
+      <Checkbox defaultChecked name="hello" label="Hello" color="d" />
+      <Checkbox defaultChecked name="hello" label="Hello" color="s" />
+      <Checkbox defaultChecked name="hello" label="Hello" color="w" />
+      <Checkbox defaultChecked name="hello" label="Hello" color="p" />
+      <Checkbox defaultChecked name="hello" label="Hello" color="se" />
+      <Checkbox defaultChecked name="hello" label="Hello" color="b" />
     </Flex>
   )
 }
@@ -92,15 +92,15 @@ export const CheckboxDefaultCheckedColor = () => {
 export const CheckboxSize = () => {
   return (
     <Flex gap="sm" items="center">
-      <Checkbox size="3xs" name="hello" label="Hello" color="suc" />
-      <Checkbox size="2xs" name="hello" label="Hello" color="suc" />
-      <Checkbox size="xs" name="hello" label="Hello" color="suc" />
-      <Checkbox size="sm" name="hello" label="Hello" color="suc" />
-      <Checkbox size="md" name="hello" label="Hello" color="war" />
-      <Checkbox size="lg" name="hello" label="Hello" color="pri" />
-      <Checkbox size="xl" name="hello" label="Hello" color="pri" />
-      <Checkbox size="2xl" name="hello" label="Hello" color="pri" />
-      <Checkbox size="3xl" name="hello" label="Hello" color="pri" />
+      <Checkbox size="3xs" name="hello" label="Hello" color="s" />
+      <Checkbox size="2xs" name="hello" label="Hello" color="s" />
+      <Checkbox size="xs" name="hello" label="Hello" color="s" />
+      <Checkbox size="sm" name="hello" label="Hello" color="s" />
+      <Checkbox size="md" name="hello" label="Hello" color="w" />
+      <Checkbox size="lg" name="hello" label="Hello" color="p" />
+      <Checkbox size="xl" name="hello" label="Hello" color="p" />
+      <Checkbox size="2xl" name="hello" label="Hello" color="p" />
+      <Checkbox size="3xl" name="hello" label="Hello" color="p" />
     </Flex>
   )
 }
diff --git a/apps/stories/stories/chips.stories.tsx b/apps/stories/stories/chips.stories.tsx
index 5b420dba..1245e674 100644
--- a/apps/stories/stories/chips.stories.tsx
+++ b/apps/stories/stories/chips.stories.tsx
@@ -16,24 +16,24 @@ export const Playground = {}
 
 export const ChipsColor = () => (
   <Flex gap="xs">
-    <Chips color="dan" variant="solid">
+    <Chips color="d" variant="solid">
       Hello
     </Chips>
-    <Chips color="war" variant="solid">
+    <Chips color="w" variant="solid">
       Hello
     </Chips>
-    <Chips color="suc" variant="solid">
+    <Chips color="s" variant="solid">
       Hello
     </Chips>
 
-    <Chips color="pri" variant="solid">
+    <Chips color="p" variant="solid">
       Hello
     </Chips>
-    <Chips color="sec" variant="solid">
+    <Chips color="se" variant="solid">
       Hello
     </Chips>
 
-    <Chips color="bg" variant="solid">
+    <Chips color="b" variant="solid">
       Hello
     </Chips>
   </Flex>
@@ -45,23 +45,23 @@ export const ChipsVariants = () => (
   <div className="l_f-md">
     {VARIANTS.map((variant) => (
       <Flex key={variant} gap="xs">
-        <Chips color="dan" variant={variant}>
+        <Chips color="d" variant={variant}>
           Hello
         </Chips>
-        <Chips color="war" variant={variant}>
+        <Chips color="w" variant={variant}>
           Hello
         </Chips>
-        <Chips color="suc" variant={variant}>
+        <Chips color="s" variant={variant}>
           Hello
         </Chips>
 
-        <Chips color="pri" variant={variant}>
+        <Chips color="p" variant={variant}>
           Hello
         </Chips>
-        <Chips color="sec" variant={variant}>
+        <Chips color="se" variant={variant}>
           Hello
         </Chips>
-        <Chips color="bg" variant={variant}>
+        <Chips color="b" variant={variant}>
           Hello
         </Chips>
       </Flex>
@@ -228,14 +228,14 @@ export const ChipsRefForwarded = () => {
     if (chipsRef.current?.style) {
       const { style } = chipsRef.current
       if (count % 2 === 0) {
-        style.backgroundColor = 'var(--pri-8)'
-        style.borderColor = 'var(--pri-12)'
-        style.borderColor = 'var(--pri-11)'
+        style.backgroundColor = 'var(--P8)'
+        style.borderColor = 'var(--P12)'
+        style.borderColor = 'var(--P11)'
         return
       }
-      style.background = 'var(--sec-8)'
-      style.color = 'var(--sec-12)'
-      style.borderColor = 'var(--sec-11)'
+      style.background = 'var(--Se8)'
+      style.color = 'var(--Se12)'
+      style.borderColor = 'var(--Se11)'
       return
     }
   }
diff --git a/apps/stories/stories/code.stories.tsx b/apps/stories/stories/code.stories.tsx
index 4d2adfef..246eab25 100644
--- a/apps/stories/stories/code.stories.tsx
+++ b/apps/stories/stories/code.stories.tsx
@@ -12,12 +12,12 @@ export default meta
 export const CodeColors = () => {
   return (
     <Flex gap="sm" direction="column" justify="center">
-      <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
-      <Code color="suc">{`console.log('Hello world Every thing is OK')`}</Code>
-      <Code color="war">{`console.log('Hello world Every thing is OK')`}</Code>
-      <Code color="pri">{`console.log('Hello world Every thing is OK')`}</Code>
+      <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
+      <Code color="s">{`console.log('Hello world Every thing is OK')`}</Code>
+      <Code color="w">{`console.log('Hello world Every thing is OK')`}</Code>
+      <Code color="p">{`console.log('Hello world Every thing is OK')`}</Code>
       <Code color="bg">{`console.log('Hello world Every thing is OK')`}</Code>
-      <Code color="sec">{`console.log('Hello world Every thing is OK')`}</Code>
+      <Code color="se">{`console.log('Hello world Every thing is OK')`}</Code>
     </Flex>
   )
 }
@@ -58,7 +58,7 @@ export const CodeLong = () => {
           laborum reiciendis.
         </div>`}
       </Code>
-      <Code color="bg" corner="sharp">
+      <Code color="b" corner="sharp">
         {`<!DOCTYPE html>
             <html lang="en">
             <head>
@@ -72,7 +72,7 @@ export const CodeLong = () => {
             </body>
             </html>`}
       </Code>
-      <Code color="war" corner="sharp">
+      <Code color="w" corner="sharp">
         {`<!DOCTYPE html>
             <html lang="en">
             <head>
@@ -86,7 +86,7 @@ export const CodeLong = () => {
             </body>
             </html>`}
       </Code>
-      <Code color="war" corner="sharp">
+      <Code color="w" corner="sharp">
         {`<!DOCTYPE html>
             <html lang="en">
             <head>
@@ -109,65 +109,65 @@ export function ButtonCornerDefaults() {
     <div className="l_f-sm">
       <Flex gap="sm" direction="column">
         <Paper corner="sharp">
-          <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
+          <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
         </Paper>
         <Paper corner="sm">
-          <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
+          <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
         </Paper>
         <Paper corner="md">
-          <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
+          <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
         </Paper>
         <Paper corner="lg">
-          <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
+          <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
         </Paper>
-        <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
+        <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
       </Flex>
 
       <Flex gap="sm" direction="column" style={{ '--code-rad': '1px' } as CSSProperties}>
         <Paper corner="sharp">
-          <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
+          <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
         </Paper>
         <Paper corner="sm">
-          <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
+          <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
         </Paper>
         <Paper corner="md">
-          <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
+          <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
         </Paper>
         <Paper corner="lg">
-          <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
+          <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
         </Paper>
-        <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
+        <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
       </Flex>
       <Flex gap="sm" direction="column" style={{ '--code-rad': '10px' } as CSSProperties}>
         <Paper corner="sharp">
-          <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
+          <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
         </Paper>
         <Paper corner="sm">
-          <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
+          <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
         </Paper>
         <Paper corner="md">
-          <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
+          <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
         </Paper>
         <Paper corner="lg">
-          <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
+          <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
         </Paper>
-        <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
+        <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
       </Flex>
 
       <Flex gap="sm" direction="column" style={{ '--code-rad': '20px' } as CSSProperties}>
         <Paper corner="sharp">
-          <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
+          <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
         </Paper>
         <Paper corner="sm">
-          <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
+          <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
         </Paper>
         <Paper corner="md">
-          <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
+          <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
         </Paper>
         <Paper corner="lg">
-          <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
+          <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
         </Paper>
-        <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
+        <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
       </Flex>
     </div>
   )
@@ -176,7 +176,7 @@ export function ButtonCornerDefaults() {
 export function CodeCornerDefaults() {
   return (
     <div className="l_f-sm">
-      <Code color="dan">{`const animals = ['pigs', 'goats', 'sheep'];
+      <Code color="d">{`const animals = ['pigs', 'goats', 'sheep'];
                         const count = animals.push('cows');
                         console.log(count);
                         // Expected output: 4
diff --git a/apps/stories/stories/formGroup.stories.tsx b/apps/stories/stories/formGroup.stories.tsx
index 6e8f0d11..704ad068 100644
--- a/apps/stories/stories/formGroup.stories.tsx
+++ b/apps/stories/stories/formGroup.stories.tsx
@@ -115,7 +115,7 @@ export const ColorInput = () => {
 export const CornerInput = () => {
   return (
     <div>
-      <FormGroup size="sm" color="dan" title="Name" direction="row">
+      <FormGroup size="sm" color="d" title="Name" direction="row">
         <Input name="firstname" placeholder="First Name" />
         <InputPassword name="middlename" placeholder="Middle Name" />
         <InputNumber name="lastname" placeholder="Last Name" />
@@ -126,7 +126,7 @@ export const CornerInput = () => {
           <option value="H">Hello</option>
         </Select>
       </FormGroup>
-      <FormGroup size="sm" color="suc" title="Name" direction="row">
+      <FormGroup size="sm" color="s" title="Name" direction="row">
         <Input name="firstname" placeholder="First Name" />
         <InputPassword name="middlename" placeholder="Middle Name" />
         <InputNumber name="lastname" placeholder="Last Name" />
@@ -137,7 +137,7 @@ export const CornerInput = () => {
           <option value="H">Hello</option>
         </Select>
       </FormGroup>
-      <FormGroup size="sm" color="pri" title="Name" direction="row">
+      <FormGroup size="sm" color="p" title="Name" direction="row">
         <Input name="firstname" placeholder="First Name" />
         <InputPassword name="middlename" placeholder="Middle Name" />
         <InputNumber name="lastname" placeholder="Last Name" />
@@ -148,7 +148,7 @@ export const CornerInput = () => {
           <option value="H">Hello</option>
         </Select>
       </FormGroup>
-      <FormGroup size="sm" color="sec" title="Name" direction="row">
+      <FormGroup size="sm" color="se" title="Name" direction="row">
         <Input name="firstname" placeholder="First Name" />
         <InputPassword name="middlename" placeholder="Middle Name" />
         <InputNumber name="lastname" placeholder="Last Name" />
diff --git a/apps/stories/stories/heading.stories.tsx b/apps/stories/stories/heading.stories.tsx
index e92117e3..5bf92cdc 100644
--- a/apps/stories/stories/heading.stories.tsx
+++ b/apps/stories/stories/heading.stories.tsx
@@ -209,42 +209,42 @@ export function HeadingAligns() {
 export function HeadingColors() {
   return (
     <div className="l_f-md">
-      <Heading color="dan">
+      <Heading color="d">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Heading>
 
-      <Heading color="sec">
+      <Heading color="se">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Heading>
-      <Heading color="suc">
+      <Heading color="s">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Heading>
-      <Heading color="war">
+      <Heading color="w">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Heading>
-      <Heading color="pri">
+      <Heading color="p">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Heading>
       <Heading color="bg">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Heading>
 
-      <Heading color="dan" low>
+      <Heading color="d" low>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Heading>
-      <Heading color="sec" low>
+      <Heading color="se" low>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Heading>
-      <Heading color="suc" low>
+      <Heading color="s" low>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Heading>
-      <Heading color="war" low>
+      <Heading color="w" low>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Heading>
-      <Heading color="pri" low>
+      <Heading color="p" low>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Heading>
-      <Heading color="bg" low>
+      <Heading color="b" low>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Heading>
     </div>
diff --git a/apps/stories/stories/input.stories.tsx b/apps/stories/stories/input.stories.tsx
index 269dd59c..03f8b603 100644
--- a/apps/stories/stories/input.stories.tsx
+++ b/apps/stories/stories/input.stories.tsx
@@ -100,13 +100,13 @@ export const SizeInput = () => {
 export const ColorInput = () => {
   return (
     <Flex gap="sm" direction="column">
-      <Input color="pri" variant="bordered" autoFocus placeholder="Focus" />
-      <Input color="war" variant="bordered" autoFocus placeholder="Normal" />
-      <Input color="sec" variant="outline" autoFocus placeholder="Disabled" />
-      <Input color="bg" variant="filled" autoFocus placeholder="isInvalid" />
-      <Input color="suc" variant="bordered" autoFocus prefixInput={<User width="16" />} placeholder="Placeholder" />
+      <Input color="p" variant="bordered" autoFocus placeholder="Focus" />
+      <Input color="w" variant="bordered" autoFocus placeholder="Normal" />
+      <Input color="se" variant="outline" autoFocus placeholder="Disabled" />
+      <Input color="b" variant="filled" autoFocus placeholder="isInvalid" />
+      <Input color="s" variant="bordered" autoFocus prefixInput={<User width="16" />} placeholder="Placeholder" />
       <Input
-        color="dan"
+        color="d"
         variant="bordered"
         autoFocus
         prefixInput={'https://'}
diff --git a/apps/stories/stories/inputFile.stories.tsx b/apps/stories/stories/inputFile.stories.tsx
index ee08fba8..7bd23431 100644
--- a/apps/stories/stories/inputFile.stories.tsx
+++ b/apps/stories/stories/inputFile.stories.tsx
@@ -76,10 +76,10 @@ export const SizeInputFile = () => {
 export const ColorInputFile = () => {
   return (
     <Flex gap="sm" direction="column">
-      <InputFile color="pri" variant="bordered" />
-      <InputFile color="war" variant="bordered" />
-      <InputFile color="sec" variant="outline" />
-      <InputFile color="bg" variant="filled" />
+      <InputFile color="p" variant="bordered" />
+      <InputFile color="w" variant="bordered" />
+      <InputFile color="se" variant="outline" />
+      <InputFile color="b" variant="filled" />
     </Flex>
   )
 }
diff --git a/apps/stories/stories/inputSearch.stories.tsx b/apps/stories/stories/inputSearch.stories.tsx
index 6ea86c2a..76b54f0a 100644
--- a/apps/stories/stories/inputSearch.stories.tsx
+++ b/apps/stories/stories/inputSearch.stories.tsx
@@ -86,18 +86,12 @@ export const SizeInput = () => {
 export const ColorInput = () => {
   return (
     <Flex gap="sm" direction="column">
-      <InputSearch color="pri" variant="bordered" autoFocus placeholder="Focus" />
-      <InputSearch color="war" variant="bordered" autoFocus placeholder="Normal" />
-      <InputSearch color="sec" variant="outline" autoFocus placeholder="Disabled" />
-      <InputSearch color="bg" variant="filled" autoFocus placeholder="isInvalid" />
-      <InputSearch
-        color="suc"
-        variant="bordered"
-        autoFocus
-        prefixInput={<User width="16" />}
-        placeholder="Placeholder"
-      />
-      <InputSearch color="dan" variant="bordered" autoFocus prefixInput={'https://'} defaultValue="Default Value" />
+      <InputSearch color="p" variant="bordered" autoFocus placeholder="Focus" />
+      <InputSearch color="w" variant="bordered" autoFocus placeholder="Normal" />
+      <InputSearch color="se" variant="outline" autoFocus placeholder="Disabled" />
+      <InputSearch color="b" variant="filled" autoFocus placeholder="isInvalid" />
+      <InputSearch color="s" variant="bordered" autoFocus prefixInput={<User width="16" />} placeholder="Placeholder" />
+      <InputSearch color="d" variant="bordered" autoFocus prefixInput={'https://'} defaultValue="Default Value" />
     </Flex>
   )
 }
diff --git a/apps/stories/stories/kbd.stories.tsx b/apps/stories/stories/kbd.stories.tsx
index 0ff2df59..aece6102 100644
--- a/apps/stories/stories/kbd.stories.tsx
+++ b/apps/stories/stories/kbd.stories.tsx
@@ -16,12 +16,12 @@ export const KbdColors = () => {
   return (
     <Flex gap="sm" items="center">
       <Kbd title="Esc" />
-      <Kbd title="Esc" color="dan" />
-      <Kbd title="Esc" color="suc" />
-      <Kbd title="Esc" color="war" />
-      <Kbd title="Esc" color="pri" />
-      <Kbd title="Esc" color="bg" />
-      <Kbd title="Esc" color="sec" />
+      <Kbd title="Esc" color="d" />
+      <Kbd title="Esc" color="s" />
+      <Kbd title="Esc" color="w" />
+      <Kbd title="Esc" color="p" />
+      <Kbd title="Esc" color="b" />
+      <Kbd title="Esc" color="se" />
     </Flex>
   )
 }
@@ -34,12 +34,12 @@ export const KbdVariants = () => {
       {Variants.map((variant) => (
         <Flex key={variant} gap="sm">
           <Kbd title="Esc" variant={variant} />
-          <Kbd title="Esc" variant={variant} color="dan" />
-          <Kbd title="Esc" variant={variant} color="suc" />
-          <Kbd title="Esc" variant={variant} color="war" />
-          <Kbd title="Esc" variant={variant} color="pri" />
-          <Kbd title="Esc" variant={variant} color="bg" />
-          <Kbd title="Esc" variant={variant} color="sec" />
+          <Kbd title="Esc" variant={variant} color="d" />
+          <Kbd title="Esc" variant={variant} color="s" />
+          <Kbd title="Esc" variant={variant} color="w" />
+          <Kbd title="Esc" variant={variant} color="p" />
+          <Kbd title="Esc" variant={variant} color="b" />
+          <Kbd title="Esc" variant={variant} color="se" />
         </Flex>
       ))}
     </div>
diff --git a/apps/stories/stories/link.stories.tsx b/apps/stories/stories/link.stories.tsx
index 5e409593..38e98830 100644
--- a/apps/stories/stories/link.stories.tsx
+++ b/apps/stories/stories/link.stories.tsx
@@ -174,39 +174,39 @@ export function LinkAligns() {
 export function LinkColors() {
   return (
     <div className="l_f-md">
-      <Link href="#" color="dan">
+      <Link href="#" color="d">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Link>
 
-      <Link href="#" color="sec">
+      <Link href="#" color="se">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Link>
-      <Link href="#" color="suc">
+      <Link href="#" color="s">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Link>
-      <Link href="#" color="war">
+      <Link href="#" color="w">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Link>
-      <Link href="#" color="pri">
+      <Link href="#" color="p">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Link>
       <Link href="#" color="bg">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Link>
 
-      <Link href="#" color="dan">
+      <Link href="#" color="d">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Link>
-      <Link href="#" color="sec">
+      <Link href="#" color="se">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Link>
-      <Link href="#" color="suc">
+      <Link href="#" color="s">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Link>
-      <Link href="#" color="war">
+      <Link href="#" color="w">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Link>
-      <Link href="#" color="pri">
+      <Link href="#" color="p">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Link>
       <Link href="#" color="bg">
diff --git a/apps/stories/stories/pagination.stories.tsx b/apps/stories/stories/pagination.stories.tsx
index 5d89100e..80ebb903 100644
--- a/apps/stories/stories/pagination.stories.tsx
+++ b/apps/stories/stories/pagination.stories.tsx
@@ -20,30 +20,30 @@ export function PaginationColor() {
     <div>
       <div className="l_f-md">
         <Pagination count={10} />
-        <Pagination count={10} color="dan" />
-        <Pagination count={10} color="suc" />
-        <Pagination count={10} color="war" />
-        <Pagination count={10} color="pri" />
-        <Pagination count={10} color="sec" />
-        <Pagination count={10} color="bg" />
+        <Pagination count={10} color="d" />
+        <Pagination count={10} color="s" />
+        <Pagination count={10} color="w" />
+        <Pagination count={10} color="p" />
+        <Pagination count={10} color="se" />
+        <Pagination count={10} color="b" />
       </div>
       <div className="l_f-md">
         <Pagination count={10} variant="soft" />
-        <Pagination count={10} variant="soft" color="dan" />
-        <Pagination count={10} variant="soft" color="suc" />
-        <Pagination count={10} variant="soft" color="war" />
-        <Pagination count={10} variant="soft" color="pri" />
-        <Pagination count={10} variant="soft" color="sec" />
-        <Pagination count={10} variant="soft" color="bg" />
+        <Pagination count={10} variant="soft" color="d" />
+        <Pagination count={10} variant="soft" color="s" />
+        <Pagination count={10} variant="soft" color="w" />
+        <Pagination count={10} variant="soft" color="p" />
+        <Pagination count={10} variant="soft" color="se" />
+        <Pagination count={10} variant="soft" color="b" />
       </div>
       <div className="l_f-md">
         <Pagination count={10} />
-        <Pagination count={10} variant="solid" color="dan" />
-        <Pagination count={10} variant="solid" color="suc" />
-        <Pagination count={10} variant="solid" color="war" />
-        <Pagination count={10} variant="solid" color="pri" />
-        <Pagination count={10} variant="solid" color="sec" />
-        <Pagination count={10} variant="solid" color="bg" />
+        <Pagination count={10} variant="solid" color="d" />
+        <Pagination count={10} variant="solid" color="s" />
+        <Pagination count={10} variant="solid" color="w" />
+        <Pagination count={10} variant="solid" color="p" />
+        <Pagination count={10} variant="solid" color="se" />
+        <Pagination count={10} variant="solid" color="b" />
       </div>
     </div>
   )
@@ -52,11 +52,11 @@ export function PaginationColor() {
 export function PaginationVariant() {
   return (
     <div className="l_f-md">
-      <Pagination count={10} color="pri" />
-      <Pagination count={10} color="pri" variant="mixed" />
-      <Pagination count={10} color="pri" variant="soft" />
-      <Pagination count={10} color="pri" variant="solid" />
-      <Pagination count={10} color="pri" variant="text" />
+      <Pagination count={10} color="p" />
+      <Pagination count={10} color="p" variant="mixed" />
+      <Pagination count={10} color="p" variant="soft" />
+      <Pagination count={10} color="p" variant="solid" />
+      <Pagination count={10} color="p" variant="text" />
     </div>
   )
 }
@@ -65,12 +65,12 @@ export function PaginationCustomStyle() {
   return (
     <div className="l_f-md">
       <Pagination count={10} />
-      <Pagination count={10} color="dan" />
-      <Pagination count={10} color="suc" />
-      <Pagination count={10} color="war" />
-      <Pagination count={10} color="pri" />
-      <Pagination count={10} color="sec" />
-      <Pagination count={10} color="bg" />
+      <Pagination count={10} color="d" />
+      <Pagination count={10} color="s" />
+      <Pagination count={10} color="w" />
+      <Pagination count={10} color="p" />
+      <Pagination count={10} color="se" />
+      <Pagination count={10} color="b" />
     </div>
   )
 }
diff --git a/apps/stories/stories/paper.stories.tsx b/apps/stories/stories/paper.stories.tsx
index 9d220ad7..6d59caf0 100644
--- a/apps/stories/stories/paper.stories.tsx
+++ b/apps/stories/stories/paper.stories.tsx
@@ -148,52 +148,52 @@ export function PaperColors() {
 export function PaperWidths() {
   return (
     <div className="l_f-md">
-      <Paper background="dan-4" color="dan">
+      <Paper background="dan-4" color="d">
         Hello
       </Paper>
-      <Paper width="25" background="suc-4" color="suc">
+      <Paper width="25" background="suc-4" color="s">
         Hello
       </Paper>
-      <Paper width="50" background="war-4" color="war">
+      <Paper width="50" background="war-4" color="w">
         Hello
       </Paper>
-      <Paper width="75" background="sec-4" color="sec">
+      <Paper width="75" background="sec-4" color="se">
         Hello
       </Paper>
-      <Paper width="100" background="sec-4" color="sec">
+      <Paper width="100" background="sec-4" color="se">
         Hello
       </Paper>
-      <Paper width="30-char" background="suc-4" color="suc">
+      <Paper width="30-char" background="suc-4" color="s">
         Hello
       </Paper>
-      <Paper width="45-char" background="war-4" color="war">
+      <Paper width="45-char" background="war-4" color="w">
         Hello
       </Paper>
-      <Paper width="60-char" background="sec-4" color="sec">
+      <Paper width="60-char" background="sec-4" color="se">
         Hello
       </Paper>
       <Paper width="75-char" background="bg-4" color="bg">
         Hello
       </Paper>
-      <Paper width="90-char" background="pri-4" color="pri">
+      <Paper width="90-char" background="pri-4" color="p">
         Hello
       </Paper>
-      <Paper width="fit" background="pri-4" color="pri">
+      <Paper width="fit" background="pri-4" color="p">
         Hello
       </Paper>
-      <Paper width="24px" background="pri-4" color="pri">
+      <Paper width="24px" background="pri-4" color="p">
         Hello
       </Paper>
-      <Paper width="48px" background="pri-4" color="pri">
+      <Paper width="48px" background="pri-4" color="p">
         Hello
       </Paper>
-      <Paper width="192px" background="pri-4" color="pri">
+      <Paper width="192px" background="pri-4" color="p">
         Hello
       </Paper>
-      <Paper width="384px" background="pri-4" color="pri">
+      <Paper width="384px" background="pri-4" color="p">
         Hello
       </Paper>
-      <Paper width="screen" background="pri-4" color="pri">
+      <Paper width="screen" background="pri-4" color="p">
         Hello
       </Paper>
     </div>
@@ -203,22 +203,22 @@ export function PaperWidths() {
 export function PaperRatio() {
   return (
     <div className="l_f-md">
-      <Paper width="30-char" ratio="1" background="pri-4" color="pri">
+      <Paper width="30-char" ratio="1" background="pri-4" color="p">
         Hello
       </Paper>
-      <Paper width="30-char" ratio="16-9" background="pri-4" color="pri">
+      <Paper width="30-char" ratio="16-9" background="pri-4" color="p">
         Hello
       </Paper>
-      <Paper width="30-char" ratio="18-5" background="pri-4" color="pri">
+      <Paper width="30-char" ratio="18-5" background="pri-4" color="p">
         Hello
       </Paper>
-      <Paper width="30-char" ratio="3-4" background="pri-4" color="pri">
+      <Paper width="30-char" ratio="3-4" background="pri-4" color="p">
         Hello
       </Paper>
-      <Paper width="30-char" ratio="4-3" background="pri-4" color="pri">
+      <Paper width="30-char" ratio="4-3" background="pri-4" color="p">
         Hello
       </Paper>{' '}
-      <Paper width="30-char" ratio="golden" background="pri-4" color="pri">
+      <Paper width="30-char" ratio="golden" background="pri-4" color="p">
         Hello
       </Paper>
     </div>
@@ -228,34 +228,34 @@ export function PaperRatio() {
 export function PaperHeight() {
   return (
     <div className="l_f-md">
-      <Paper height="25" background="suc-4" color="suc">
+      <Paper height="25" background="suc-4" color="s">
         Hello
       </Paper>
-      <Paper height="50" background="war-4" color="war">
+      <Paper height="50" background="war-4" color="w">
         Hello
       </Paper>
-      <Paper height="75" background="sec-4" color="sec">
+      <Paper height="75" background="sec-4" color="se">
         Hello
       </Paper>
-      <Paper height="100" background="sec-4" color="sec">
+      <Paper height="100" background="sec-4" color="se">
         Hello
       </Paper>
-      <Paper height="fit" background="pri-4" color="pri">
+      <Paper height="fit" background="pri-4" color="p">
         Hello
       </Paper>
-      <Paper height="24px" background="pri-4" color="pri">
+      <Paper height="24px" background="pri-4" color="p">
         Hello
       </Paper>
-      <Paper height="48px" background="pri-4" color="pri">
+      <Paper height="48px" background="pri-4" color="p">
         Hello
       </Paper>
-      <Paper height="192px" background="pri-4" color="pri">
+      <Paper height="192px" background="pri-4" color="p">
         Hello
       </Paper>
-      <Paper height="384px" background="pri-4" color="pri">
+      <Paper height="384px" background="pri-4" color="p">
         Hello
       </Paper>
-      <Paper height="screen" background="pri-4" color="pri">
+      <Paper height="screen" background="pri-4" color="p">
         Hello
       </Paper>
     </div>
diff --git a/apps/stories/stories/pinInput.stories.tsx b/apps/stories/stories/pinInput.stories.tsx
index cda38644..046449e5 100644
--- a/apps/stories/stories/pinInput.stories.tsx
+++ b/apps/stories/stories/pinInput.stories.tsx
@@ -74,10 +74,10 @@ export const SizePinInput = () => {
 export const ColorPinInput = () => {
   return (
     <Flex gap="sm" direction="column">
-      <PinInput color="pri" variant="bordered" />
-      <PinInput color="war" variant="bordered" />
-      <PinInput color="sec" variant="outline" />
-      <PinInput color="bg" variant="filled" />
+      <PinInput color="p" variant="bordered" />
+      <PinInput color="w" variant="bordered" />
+      <PinInput color="se" variant="outline" />
+      <PinInput color="b" variant="filled" />
     </Flex>
   )
 }
@@ -85,12 +85,12 @@ export const ColorPinInput = () => {
 export const ColorPinLength = () => {
   return (
     <Flex gap="sm" direction="column">
-      <PinInput length={10} color="pri" variant="bordered" />
-      <PinInput color="bg" variant="filled" />
-      <PinInput length={5} color="pri" variant="bordered" />
-      <PinInput length={6} color="war" variant="bordered" />
-      <PinInput length={7} color="sec" variant="outline" />
-      <PinInput length={8} color="bg" variant="filled" />
+      <PinInput length={10} color="p" variant="bordered" />
+      <PinInput color="b" variant="filled" />
+      <PinInput length={5} color="p" variant="bordered" />
+      <PinInput length={6} color="w" variant="bordered" />
+      <PinInput length={7} color="se" variant="outline" />
+      <PinInput length={8} color="b" variant="filled" />
     </Flex>
   )
 }
@@ -98,13 +98,13 @@ export const ColorPinLength = () => {
 export const ColorPinPlaceholder = () => {
   return (
     <Flex gap="sm" direction="column">
-      <PinInput length={10} color="pri" variant="bordered" />
-      <PinInput placeholder="◊" length={10} color="pri" variant="bordered" />
-      <PinInput placeholder="◉" color="bg" variant="filled" />
-      <PinInput placeholder="●" length={5} color="pri" variant="bordered" />
-      <PinInput placeholder="◯" length={6} color="war" variant="bordered" />
-      <PinInput placeholder="◵" length={7} color="sec" variant="outline" />
-      <PinInput placeholder="◬" length={8} color="bg" variant="filled" />
+      <PinInput length={10} color="p" variant="bordered" />
+      <PinInput placeholder="◊" length={10} color="p" variant="bordered" />
+      <PinInput placeholder="◉" color="b" variant="filled" />
+      <PinInput placeholder="●" length={5} color="p" variant="bordered" />
+      <PinInput placeholder="◯" length={6} color="w" variant="bordered" />
+      <PinInput placeholder="◵" length={7} color="se" variant="outline" />
+      <PinInput placeholder="◬" length={8} color="b" variant="filled" />
     </Flex>
   )
 }
diff --git a/apps/stories/stories/popover.stories.tsx b/apps/stories/stories/popover.stories.tsx
index 4bf33db2..fa4ad5fb 100644
--- a/apps/stories/stories/popover.stories.tsx
+++ b/apps/stories/stories/popover.stories.tsx
@@ -161,22 +161,22 @@ export function PaperColors() {
 export function PaperWidths() {
   return (
     <div className="l_f-md">
-      <Paper background="dan-4" color="dan">
+      <Paper background="dan-4" color="d">
         Hello
       </Paper>
-      <Paper width="50" background="suc-4" color="suc">
+      <Paper width="50" background="suc-4" color="s">
         Hello
       </Paper>
-      <Paper width="25-char" background="war-4" color="war">
+      <Paper width="25-char" background="war-4" color="w">
         Hello
       </Paper>
-      <Paper width="45-char" background="sec-4" color="sec">
+      <Paper width="45-char" background="sec-4" color="se">
         Hello
       </Paper>
       <Paper width="75-char" background="bg-4" color="bg">
         Hello
       </Paper>
-      <Paper width="60-char" background="pri-4" color="pri">
+      <Paper width="60-char" background="pri-4" color="p">
         Hello
       </Paper>
     </div>
@@ -186,22 +186,22 @@ export function PaperWidths() {
 export function PaperHeights() {
   return (
     <div className="l_f-md">
-      <Paper height="100px" background="dan-4" color="dan">
+      <Paper height="100px" background="dan-4" color="d">
         Hello
       </Paper>
-      <Paper height="96px" background="suc-4" color="suc">
+      <Paper height="96px" background="suc-4" color="s">
         Hello
       </Paper>
-      <Paper height="20ch" background="war-4" color="war">
+      <Paper height="20ch" background="war-4" color="w">
         Hello
       </Paper>
-      <Paper height="30vmin" background="sec-4" color="sec">
+      <Paper height="30vmin" background="sec-4" color="se">
         Hello
       </Paper>
       <Paper height="min(100px, 8rem)" background="bg-4" color="bg">
         Hello
       </Paper>
-      <Paper background="pri-4" color="pri">
+      <Paper background="pri-4" color="p">
         Hello
       </Paper>
     </div>
diff --git a/apps/stories/stories/progress.stories.tsx b/apps/stories/stories/progress.stories.tsx
index a8c6b167..7f0595b2 100644
--- a/apps/stories/stories/progress.stories.tsx
+++ b/apps/stories/stories/progress.stories.tsx
@@ -29,12 +29,12 @@ export const ProgressBarSize = () => {
 export const ProgressBarColor = () => {
   return (
     <Flex direction="column" gap="sm" wrap>
-      <ProgressBar color="dan" value={90} label="hello" />
-      <ProgressBar color="suc" value={90} label="hello" />
-      <ProgressBar color="war" value={90} label="hello" />
-      <ProgressBar color="sec" value={90} label="hello" />
-      <ProgressBar color="bg" value={90} label="hello" />
-      <ProgressBar color="pri" value={90} label="hello" />
+      <ProgressBar color="d" value={90} label="hello" />
+      <ProgressBar color="s" value={90} label="hello" />
+      <ProgressBar color="w" value={90} label="hello" />
+      <ProgressBar color="se" value={90} label="hello" />
+      <ProgressBar color="b" value={90} label="hello" />
+      <ProgressBar color="p" value={90} label="hello" />
     </Flex>
   )
 }
@@ -86,12 +86,12 @@ export const ProgressCircleSize = () => {
 export const ProgressCircleColor = () => {
   return (
     <Flex gap="sm">
-      <ProgressCircle color="dan" value={15} label="hello" />
-      <ProgressCircle color="suc" value={30} label="hello" />
-      <ProgressCircle color="war" value={60} label="hello" />
-      <ProgressCircle color="pri" value={45} label="hello" />
-      <ProgressCircle color="sec" value={90} label="hello" />
-      <ProgressCircle color="bg" value={90} label="hello" />
+      <ProgressCircle color="d" value={15} label="hello" />
+      <ProgressCircle color="s" value={30} label="hello" />
+      <ProgressCircle color="w" value={60} label="hello" />
+      <ProgressCircle color="p" value={45} label="hello" />
+      <ProgressCircle color="se" value={90} label="hello" />
+      <ProgressCircle color="b" value={90} label="hello" />
     </Flex>
   )
 }
@@ -99,19 +99,19 @@ export const ProgressCircleColor = () => {
 function ProgressBarStackBase(props) {
   return (
     <ProgressBarStack {...props} label="Nice to meet you">
-      <ProgressBarStackItem label="CSS" color="dan" value={30}>
+      <ProgressBarStackItem label="CSS" color="d" value={30}>
         <button>CSS 30</button>
       </ProgressBarStackItem>
-      <ProgressBarStackItem label="HTML" color="suc" value={15}>
+      <ProgressBarStackItem label="HTML" color="s" value={15}>
         <button>HTML 15%</button>
       </ProgressBarStackItem>
-      <ProgressBarStackItem label="React" color="sec" value={25}>
+      <ProgressBarStackItem label="React" color="se" value={25}>
         <button>React 25%</button>
       </ProgressBarStackItem>
-      <ProgressBarStackItem label="Node" color="pri" value={15}>
+      <ProgressBarStackItem label="Node" color="p" value={15}>
         <button>Node 15%</button>
       </ProgressBarStackItem>
-      <ProgressBarStackItem label="SCSS" color="war" value={15}>
+      <ProgressBarStackItem label="SCSS" color="w" value={15}>
         <button>SCSS 15%</button>
       </ProgressBarStackItem>
     </ProgressBarStack>
diff --git a/apps/stories/stories/radio.stories.tsx b/apps/stories/stories/radio.stories.tsx
index 5df1d378..36df437c 100644
--- a/apps/stories/stories/radio.stories.tsx
+++ b/apps/stories/stories/radio.stories.tsx
@@ -23,12 +23,12 @@ export function RadioColors() {
   return (
     <div>
       <Flex gap="sm" items="center">
-        <Radio color="dan" name="red" label="Red" />
-        <Radio color="suc" name="green" label="Green" />
-        <Radio color="war" name="orange" label="Orange" />
-        <Radio color="pri" name="pri" label="Primary" />
-        <Radio color="bg" name="bg" label="bg" />
-        <Radio color="sec" name="sec" label="Secondary" />
+        <Radio color="d" name="red" label="Red" />
+        <Radio color="s" name="green" label="Green" />
+        <Radio color="w" name="orange" label="Orange" />
+        <Radio color="p" name="pri" label="Primary" />
+        <Radio color="b" name="bg" label="bg" />
+        <Radio color="se" name="sec" label="Secondary" />
       </Flex>
     </div>
   )
@@ -38,28 +38,28 @@ export function RadioDefaultCheck() {
   return (
     <div className="l_f-md">
       <Flex gap="sm" items="center">
-        <Radio defaultChecked color="dan" name="solid.red" label="Red" />
-        <Radio defaultChecked color="suc" name="solid.green" label="Green" />
-        <Radio defaultChecked color="war" name="solid.orange" label="Orange" />
-        <Radio defaultChecked color="pri" name="solid.primary" label="Primary" />
-        <Radio defaultChecked color="bg" name="solid.bg" label="bg" />
-        <Radio defaultChecked color="sec" name="solid.secondary" label="Secondary" />
+        <Radio defaultChecked color="d" name="solid.red" label="Red" />
+        <Radio defaultChecked color="s" name="solid.green" label="Green" />
+        <Radio defaultChecked color="w" name="solid.orange" label="Orange" />
+        <Radio defaultChecked color="p" name="solid.primary" label="Primary" />
+        <Radio defaultChecked color="b" name="solid.bg" label="bg" />
+        <Radio defaultChecked color="se" name="solid.secondary" label="Secondary" />
       </Flex>
       <Flex gap="sm" items="center">
-        <Radio defaultChecked variant="outline" color="dan" name="outline.red" label="Red" />
-        <Radio defaultChecked variant="outline" color="suc" name="outline.green" label="Green" />
-        <Radio defaultChecked variant="outline" color="war" name="outline.orange" label="Orange" />
-        <Radio defaultChecked variant="outline" color="pri" name="outline.primary" label="Primary" />
-        <Radio defaultChecked variant="outline" color="bg" name="outline.bg" label="bg" />
-        <Radio defaultChecked variant="outline" color="sec" name="outline.secondary" label="Secondary" />
+        <Radio defaultChecked variant="outline" color="d" name="outline.red" label="Red" />
+        <Radio defaultChecked variant="outline" color="s" name="outline.green" label="Green" />
+        <Radio defaultChecked variant="outline" color="w" name="outline.orange" label="Orange" />
+        <Radio defaultChecked variant="outline" color="p" name="outline.primary" label="Primary" />
+        <Radio defaultChecked variant="outline" color="b" name="outline.bg" label="bg" />
+        <Radio defaultChecked variant="outline" color="se" name="outline.secondary" label="Secondary" />
       </Flex>
       <Flex gap="sm" items="center">
-        <Radio defaultChecked variant="soft" color="dan" name="soft.red" label="Red" />
-        <Radio defaultChecked variant="soft" color="suc" name="soft.green" label="Green" />
-        <Radio defaultChecked variant="soft" color="war" name="soft.orange" label="Orange" />
-        <Radio defaultChecked variant="soft" color="pri" name="soft.primary" label="Primary" />
-        <Radio defaultChecked variant="soft" color="bg" name="soft.bg" label="bg" />
-        <Radio defaultChecked variant="soft" color="sec" name="soft.secondary" label="Secondary" />
+        <Radio defaultChecked variant="soft" color="d" name="soft.red" label="Red" />
+        <Radio defaultChecked variant="soft" color="s" name="soft.green" label="Green" />
+        <Radio defaultChecked variant="soft" color="w" name="soft.orange" label="Orange" />
+        <Radio defaultChecked variant="soft" color="p" name="soft.primary" label="Primary" />
+        <Radio defaultChecked variant="soft" color="b" name="soft.bg" label="bg" />
+        <Radio defaultChecked variant="soft" color="se" name="soft.secondary" label="Secondary" />
       </Flex>
     </div>
   )
@@ -69,28 +69,28 @@ export function RadioVariants() {
   return (
     <div className="l_f-md">
       <Flex gap="sm" items="center">
-        <Radio color="dan" name="red" label="Red" />
-        <Radio color="suc" name="green" label="Green" />
-        <Radio color="war" name="orange" label="Orange" />
-        <Radio color="pri" name="pri" label="Primary" />
-        <Radio color="bg" name="bg" label="bg" />
-        <Radio color="sec" name="sec" label="Secondary" />
+        <Radio color="d" name="red" label="Red" />
+        <Radio color="s" name="green" label="Green" />
+        <Radio color="w" name="orange" label="Orange" />
+        <Radio color="p" name="pri" label="Primary" />
+        <Radio color="b" name="bg" label="bg" />
+        <Radio color="se" name="sec" label="Secondary" />
       </Flex>
       <Flex gap="sm" items="center">
-        <Radio variant="outline" color="dan" name="red2" label="Red" />
-        <Radio variant="outline" color="suc" name="green2" label="Green" />
-        <Radio variant="outline" color="war" name="orange2" label="Orange" />
-        <Radio variant="outline" color="pri" name="pri2" label="Primary" />
-        <Radio variant="outline" color="bg" name="bg2" label="bg" />
-        <Radio variant="outline" color="sec" name="sec2" label="Secondary" />
+        <Radio variant="outline" color="d" name="red2" label="Red" />
+        <Radio variant="outline" color="s" name="green2" label="Green" />
+        <Radio variant="outline" color="w" name="orange2" label="Orange" />
+        <Radio variant="outline" color="p" name="pri2" label="Primary" />
+        <Radio variant="outline" color="b" name="bg2" label="bg" />
+        <Radio variant="outline" color="se" name="sec2" label="Secondary" />
       </Flex>
       <Flex gap="sm" items="center">
-        <Radio variant="soft" color="dan" name="red3" label="Red" />
-        <Radio variant="soft" color="suc" name="green3" label="Green" />
-        <Radio variant="soft" color="war" name="orange3" label="Orange" />
-        <Radio variant="soft" color="pri" name="pri3" label="Primary" />
-        <Radio variant="soft" color="bg" name="bg3" label="bg" />
-        <Radio variant="soft" color="sec" name="sec3" label="Secondary" />
+        <Radio variant="soft" color="d" name="red3" label="Red" />
+        <Radio variant="soft" color="s" name="green3" label="Green" />
+        <Radio variant="soft" color="w" name="orange3" label="Orange" />
+        <Radio variant="soft" color="p" name="pri3" label="Primary" />
+        <Radio variant="soft" color="b" name="bg3" label="bg" />
+        <Radio variant="soft" color="se" name="sec3" label="Secondary" />
       </Flex>
     </div>
   )
@@ -158,7 +158,7 @@ export function RadioGroupVertical() {
 
 export function RadioGroupVl() {
   return (
-    <RadioGroup name="red" label="Choose you Color" showLabel size="lg" color="dan">
+    <RadioGroup name="red" label="Choose you Color" showLabel size="lg" color="d">
       <Radio label="Nice" />
       <Radio label="To Meet" />
       <Radio label="Here IN " />
@@ -169,7 +169,7 @@ export function RadioGroupVl() {
 
 export function RadioGroupLongText() {
   return (
-    <RadioGroup name="red" label="Choose you Color" showLabel size="md" color="dan">
+    <RadioGroup name="red" label="Choose you Color" showLabel size="md" color="d">
       <Radio
         label="Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora saepe laborum, iste ad eaque animi laboriosam officiis architecto at, esse magnam eos dolorem! Culpa odit temporibus ab excepturi, fugiat a?
 "
diff --git a/apps/stories/stories/rating.stories.tsx b/apps/stories/stories/rating.stories.tsx
index 2208f3c9..4b6d9124 100644
--- a/apps/stories/stories/rating.stories.tsx
+++ b/apps/stories/stories/rating.stories.tsx
@@ -52,12 +52,12 @@ export const RatingSize = () => {
 export const RatingColor = () => {
   return (
     <Flex direction="column" gap="md">
-      <Rating color="dan" rating={4} />
-      <Rating color="pri" rating={4} />
-      <Rating color="sec" rating={4} />
-      <Rating color="suc" rating={4} />
-      <Rating color="war" rating={4} />
-      <Rating color="bg" rating={4} />
+      <Rating color="d" rating={4} />
+      <Rating color="p" rating={4} />
+      <Rating color="se" rating={4} />
+      <Rating color="s" rating={4} />
+      <Rating color="w" rating={4} />
+      <Rating color="b" rating={4} />
     </Flex>
   )
 }
@@ -65,7 +65,7 @@ export const RatingColor = () => {
 export const RatingType = () => {
   return (
     <Flex direction="column" gap="md">
-      <Rating icon="heart" rating={4} color="dan" />
+      <Rating icon="heart" rating={4} color="d" />
       <Rating rating={4} />
     </Flex>
   )
diff --git a/apps/stories/stories/select.stories.tsx b/apps/stories/stories/select.stories.tsx
index bf65b6ae..c67de4f7 100644
--- a/apps/stories/stories/select.stories.tsx
+++ b/apps/stories/stories/select.stories.tsx
@@ -138,27 +138,27 @@ export const SizeSelect = () => {
 export const ColorSelect = () => {
   return (
     <Flex gap="sm" direction="column">
-      <Select color="pri" variant="bordered" autoFocus>
+      <Select color="p" variant="bordered" autoFocus>
         <option value="helo">hello</option>
         <option value="nice">Nice</option>
       </Select>
-      <Select color="war" variant="bordered" autoFocus>
+      <Select color="w" variant="bordered" autoFocus>
         <option value="helo">hello</option>
         <option value="nice">Nice</option>
       </Select>
-      <Select color="sec" variant="outline" autoFocus>
+      <Select color="se" variant="outline" autoFocus>
         <option value="helo">hello</option>
         <option value="nice">Nice</option>
       </Select>
-      <Select color="bg" variant="filled" autoFocus>
+      <Select color="b" variant="filled" autoFocus>
         <option value="helo">hello</option>
         <option value="nice">Nice</option>
       </Select>
-      <Select color="suc" variant="bordered" autoFocus>
+      <Select color="s" variant="bordered" autoFocus>
         <option value="helo">hello</option>
         <option value="nice">Nice</option>
       </Select>
-      <Select color="dan" variant="bordered" autoFocus>
+      <Select color="d" variant="bordered" autoFocus>
         <option value="helo">hello</option>
         <option value="nice">Nice</option>
       </Select>
diff --git a/apps/stories/stories/separator.stories.tsx b/apps/stories/stories/separator.stories.tsx
index 2fedb6a1..886f8293 100644
--- a/apps/stories/stories/separator.stories.tsx
+++ b/apps/stories/stories/separator.stories.tsx
@@ -12,12 +12,12 @@ export default meta
 export const SeparatorColors = () => {
   return (
     <div className="l_f-md">
-      <Separator color="dan" />
-      <Separator color="war" />
-      <Separator color="suc" />
-      <Separator color="sec" />
-      <Separator color="pri" />
-      <Separator color="bg" />
+      <Separator color="d" />
+      <Separator color="w" />
+      <Separator color="s" />
+      <Separator color="se" />
+      <Separator color="p" />
+      <Separator color="b" />
     </div>
   )
 }
diff --git a/apps/stories/stories/spinner.stories.tsx b/apps/stories/stories/spinner.stories.tsx
index 4ca4ca62..c6ee2a19 100644
--- a/apps/stories/stories/spinner.stories.tsx
+++ b/apps/stories/stories/spinner.stories.tsx
@@ -13,12 +13,12 @@ export default meta
 export function SpinnerColors() {
   return (
     <Flex gap="sm">
-      <Spinner color="suc" />
-      <Spinner color="dan" />
-      <Spinner color="war" />
-      <Spinner color="pri" />
-      <Spinner color="sec" />
-      <Spinner color="bg" />
+      <Spinner color="s" />
+      <Spinner color="d" />
+      <Spinner color="w" />
+      <Spinner color="p" />
+      <Spinner color="se" />
+      <Spinner color="b" />
     </Flex>
   )
 }
@@ -57,20 +57,20 @@ export function SpinnerInvert() {
   return (
     <div className="l_f-md">
       <Flex gap="sm" items="center">
-        <Spinner color="suc" />
-        <Spinner color="dan" />
-        <Spinner color="war" />
-        <Spinner color="pri" />
-        <Spinner color="sec" />
-        <Spinner color="bg" />
+        <Spinner color="s" />
+        <Spinner color="d" />
+        <Spinner color="w" />
+        <Spinner color="p" />
+        <Spinner color="se" />
+        <Spinner color="b" />
       </Flex>
       <Flex gap="sm" items="center">
-        <Spinner invert color="suc" />
-        <Spinner invert color="dan" />
-        <Spinner invert color="war" />
-        <Spinner invert color="pri" />
-        <Spinner invert color="sec" />
-        <Spinner invert color="bg" />
+        <Spinner invert color="s" />
+        <Spinner invert color="d" />
+        <Spinner invert color="w" />
+        <Spinner invert color="p" />
+        <Spinner invert color="se" />
+        <Spinner invert color="b" />
       </Flex>
     </div>
   )
diff --git a/apps/stories/stories/stepper.stories.tsx b/apps/stories/stories/stepper.stories.tsx
index 9eadc591..40fbc9f0 100644
--- a/apps/stories/stories/stepper.stories.tsx
+++ b/apps/stories/stories/stepper.stories.tsx
@@ -18,7 +18,7 @@ const CompleteComponent = () => {
         <Check width={60} />
       </div>
       <Text weight="bold">Success</Text>
-      <Text style={{ width: '90ch' }} size="sm" color="bg" low>
+      <Text style={{ width: '90ch' }} size="sm" color="b" low>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, illum, ut eius esse voluptates voluptatibus
         perferendis laborum, quam temporibus consequuntur iure porro excepturi dolore. Enim labore id tempore iusto sed?{' '}
       </Text>
@@ -34,21 +34,21 @@ export const StepperIcon = () => {
       <Stepper active={step} setActive={setStep} completeComponent={<CompleteComponent />}>
         <StepperStep title="About" icon={<Home />} description="Hello world my name is hamza miloud amar">
           <Heading size="xs">Hello World</Heading>
-          <Text size="sm" color="bg" low>
+          <Text size="sm" color="b" low>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab eveniet illo autem ipsam dolorum nulla natus at
             tempora labore. Exercitationem praesentium est illo, modi quos cupiditate dignissimos reiciendis ipsum iste!
           </Text>
         </StepperStep>
         <StepperStep icon={<User />} title="Profile" description="Nice Picture from here i Like it so much">
           <Heading size="xs">Hello World</Heading>
-          <Text size="sm" color="bg" low>
+          <Text size="sm" color="b" low>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab eveniet illo autem ipsam dolorum nulla natus at
             tempora labore. Exercitationem praesentium est illo, modi quos cupiditate dignissimos reiciendis ipsum iste!
           </Text>
         </StepperStep>
         <StepperStep icon={<Settings />} title="Skills" description="Word is word no matter what happen">
           <Heading size="xs">Hello World</Heading>
-          <Text size="sm" color="bg" low>
+          <Text size="sm" color="b" low>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab eveniet illo autem ipsam dolorum nulla natus at
             tempora labore. Exercitationem praesentium est illo, modi quos cupiditate dignissimos reiciendis ipsum iste!
           </Text>
@@ -74,19 +74,19 @@ function StepperBase(props) {
       <Stepper active={step} setActive={setStep} corner="sharp" {...props} completeComponent={<CompleteComponent />}>
         <StepperStep title="About" icon={<Home />} description="Hello world my name is hamza miloud amar">
           <Heading size="xs">Hello World</Heading>
-          <Text size="sm" color="bg" low>
+          <Text size="sm" color="b" low>
             Hello
           </Text>
         </StepperStep>
         <StepperStep icon={<User />} title="Profile" description="Nice Picture from here i Like it so much">
           <Heading size="xs">Hello World</Heading>
-          <Text size="sm" color="bg" low>
+          <Text size="sm" color="b" low>
             World
           </Text>
         </StepperStep>
         <StepperStep icon={<Settings />} title="Skills" description="Word is word no matter what happen">
           <Heading size="xs">Hello World</Heading>
-          <Text size="sm" color="bg" low>
+          <Text size="sm" color="b" low>
             Nice{' '}
           </Text>
         </StepperStep>
@@ -120,12 +120,12 @@ export const StepperCorners = () => {
 export const StepperColors = () => {
   return (
     <div className="l_f-md">
-      <StepperBase color="dan" />
-      <StepperBase color="war" />
-      <StepperBase color="suc" />
-      <StepperBase color="sec" />
-      <StepperBase color="bg" />
-      <StepperBase color="pri" />
+      <StepperBase color="d" />
+      <StepperBase color="w" />
+      <StepperBase color="s" />
+      <StepperBase color="se" />
+      <StepperBase color="b" />
+      <StepperBase color="p" />
     </div>
   )
 }
@@ -138,21 +138,21 @@ export const DefaultStepper = () => {
       <Stepper active={step} setActive={setStep} completeComponent={<CompleteComponent />}>
         <StepperStep title="About" icon={<Home />} description="Hello world my name is hamza miloud amar">
           <Heading size="xs">Hello World</Heading>
-          <Text size="sm" color="bg" low>
+          <Text size="sm" color="b" low>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab eveniet illo autem ipsam dolorum nulla natus at
             tempora labore. Exercitationem praesentium est illo, modi quos cupiditate dignissimos reiciendis ipsum iste!
           </Text>
         </StepperStep>
         <StepperStep icon={<User />} title="Profile" description="Nice Picture from here i Like it so much">
           <Heading size="xs">Hello Nice</Heading>
-          <Text size="sm" color="bg" low>
+          <Text size="sm" color="b" low>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab eveniet illo autem ipsam dolorum nulla natus at
             tempora labore. Exercitationem praesentium est illo, modi quos cupiditate dignissimos reiciendis ipsum iste!
           </Text>
         </StepperStep>
         <StepperStep icon={<Settings />} title="Skills" description="Word is word no matter what happen">
           <Heading size="xs">Nice to Meet You</Heading>
-          <Text size="sm" color="bg" low>
+          <Text size="sm" color="b" low>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab eveniet illo autem ipsam dolorum nulla natus at
             tempora labore. Exercitationem praesentium est illo, modi quos cupiditate dignissimos reiciendis ipsum iste!
           </Text>
diff --git a/apps/stories/stories/switch.stories.tsx b/apps/stories/stories/switch.stories.tsx
index b6410293..038a7915 100644
--- a/apps/stories/stories/switch.stories.tsx
+++ b/apps/stories/stories/switch.stories.tsx
@@ -31,12 +31,12 @@ export function SwitchSizes() {
 export function SwitchColors() {
   return (
     <Flex gap="sm" items="center">
-      <Switch label="Hello" color="dan" />
-      <Switch label="Hello" color="war" />
-      <Switch label="Hello" color="suc" />
-      <Switch label="Hello" color="pri" />
-      <Switch label="Hello" color="sec" />
-      <Switch label="Hello" color="bg" />
+      <Switch label="Hello" color="d" />
+      <Switch label="Hello" color="w" />
+      <Switch label="Hello" color="s" />
+      <Switch label="Hello" color="p" />
+      <Switch label="Hello" color="se" />
+      <Switch label="Hello" color="b" />
     </Flex>
   )
 }
@@ -44,12 +44,12 @@ export function SwitchColors() {
 export function SwitchColorsDefault() {
   return (
     <Flex gap="sm" items="center">
-      <Switch label="Hello" defaultPressed color="dan" />
-      <Switch label="Hello" defaultPressed color="war" />
-      <Switch label="Hello" defaultPressed color="suc" />
-      <Switch label="Hello" defaultPressed color="pri" />
-      <Switch label="Hello" defaultPressed color="sec" />
-      <Switch label="Hello" defaultPressed color="bg" />
+      <Switch label="Hello" defaultPressed color="d" />
+      <Switch label="Hello" defaultPressed color="w" />
+      <Switch label="Hello" defaultPressed color="s" />
+      <Switch label="Hello" defaultPressed color="p" />
+      <Switch label="Hello" defaultPressed color="se" />
+      <Switch label="Hello" defaultPressed color="b" />
     </Flex>
   )
 }
@@ -122,7 +122,7 @@ export const SwitchControlled = () => {
   return (
     <Flex gap="sm" direction="column">
       <Button onClick={onPressedChange}>{pressed ? 'Pressed' : 'Unpressed'} The Switch</Button>
-      <Switch color="dan" label="hello" pressed={pressed} onPressedChange={onPressedChange} />
+      <Switch color="d" label="hello" pressed={pressed} onPressedChange={onPressedChange} />
     </Flex>
   )
 }
diff --git a/apps/stories/stories/table.stories.tsx b/apps/stories/stories/table.stories.tsx
index 416cca73..657a22a9 100644
--- a/apps/stories/stories/table.stories.tsx
+++ b/apps/stories/stories/table.stories.tsx
@@ -94,24 +94,24 @@ export const NormalTableColor = () => {
         <Heading as="h2" size="xs">
           Striped Table danger
         </Heading>
-        <NormalTableExample color="dan" variant="striped" />
+        <NormalTableExample color="d" variant="striped" />
 
         <Heading as="h2" size="xs">
           Striped Table success
         </Heading>
-        <NormalTableExample color="suc" variant="striped" />
+        <NormalTableExample color="s" variant="striped" />
         <Heading as="h2" size="xs">
           Striped Table Secondary
         </Heading>
-        <NormalTableExample color="sec" variant="striped" />
+        <NormalTableExample color="se" variant="striped" />
         <Heading as="h2" size="xs">
           Striped Table Orange
         </Heading>
-        <NormalTableExample color="war" variant="striped" />
+        <NormalTableExample color="w" variant="striped" />
         <Heading as="h2" size="xs">
           Striped Table primary
         </Heading>
-        <NormalTableExample color="pri" variant="striped" />
+        <NormalTableExample color="p" variant="striped" />
       </Flex>
 
       <Heading size="sm">Default Table</Heading>
@@ -119,40 +119,40 @@ export const NormalTableColor = () => {
         <Heading as="h2" size="xs">
           Default Table danger
         </Heading>
-        <NormalTableExample color="dan" />
+        <NormalTableExample color="d" />
 
         <Heading as="h2" size="xs">
           Default Table success
         </Heading>
-        <NormalTableExample color="suc" />
+        <NormalTableExample color="s" />
         <Heading as="h2" size="xs">
           Default Table secondary
         </Heading>
-        <NormalTableExample color="sec" />
+        <NormalTableExample color="se" />
         <Heading as="h2" size="xs">
           Default Table primary
         </Heading>
-        <NormalTableExample color="sec" />
+        <NormalTableExample color="se" />
       </Flex>
       <Heading size="sm">Soft Table</Heading>
       <Flex wrap gap="xs">
         <Heading as="h2" size="xs">
           Soft Table danger
         </Heading>
-        <NormalTableExample variant="soft" color="dan" />
+        <NormalTableExample variant="soft" color="d" />
 
         <Heading as="h2" size="xs">
           Soft Table success
         </Heading>
-        <NormalTableExample variant="soft" color="suc" />
+        <NormalTableExample variant="soft" color="s" />
         <Heading as="h2" size="xs">
           Soft Table secondary
         </Heading>
-        <NormalTableExample variant="soft" color="sec" />
+        <NormalTableExample variant="soft" color="se" />
         <Heading as="h2" size="xs">
           Soft Table primary
         </Heading>
-        <NormalTableExample variant="soft" color="pri" />
+        <NormalTableExample variant="soft" color="p" />
       </Flex>
       <NormalTableExample variant="soft" />
       <Heading size="sm">Head Color Table</Heading>
@@ -160,20 +160,20 @@ export const NormalTableColor = () => {
         <Heading as="h2" size="xs">
           Head Color Table danger
         </Heading>
-        <NormalTableExample variant="head-color" color="dan" />
+        <NormalTableExample variant="head-color" color="d" />
 
         <Heading as="h2" size="xs">
           Head Color Table success
         </Heading>
-        <NormalTableExample variant="head-color" color="suc" />
+        <NormalTableExample variant="head-color" color="s" />
         <Heading as="h2" size="xs">
           Head Color Table secondary
         </Heading>
-        <NormalTableExample variant="head-color" color="sec" />
+        <NormalTableExample variant="head-color" color="se" />
         <Heading as="h2" size="xs">
           Head Color Table primary
         </Heading>
-        <NormalTableExample variant="head-color" color="pri" />
+        <NormalTableExample variant="head-color" color="p" />
       </Flex>
       <NormalTableExample variant="head-color" />
     </Flex>
diff --git a/apps/stories/stories/tabs.stories.tsx b/apps/stories/stories/tabs.stories.tsx
index bc1d4495..939f775b 100644
--- a/apps/stories/stories/tabs.stories.tsx
+++ b/apps/stories/stories/tabs.stories.tsx
@@ -77,12 +77,12 @@ export const TabSize = () => {
 export const TabColor = () => {
   return (
     <Flex direction="column" gap="sm">
-      <TabBase color="dan" defaultValue={1} />
-      <TabBase color="war" defaultValue={1} />
-      <TabBase color="suc" defaultValue={1} />
-      <TabBase color="pri" defaultValue={1} />
-      <TabBase color="sec" defaultValue={1} />
-      <TabBase color="bg" defaultValue={1} />
+      <TabBase color="d" defaultValue={1} />
+      <TabBase color="w" defaultValue={1} />
+      <TabBase color="s" defaultValue={1} />
+      <TabBase color="p" defaultValue={1} />
+      <TabBase color="se" defaultValue={1} />
+      <TabBase color="b" defaultValue={1} />
     </Flex>
   )
 }
@@ -100,36 +100,36 @@ export const TabVariants = () => {
   return (
     <Grid grid="1fr 1fr" gap="sm">
       <Flex direction="column" gap="sm">
-        <TabBase variant="solid" color="dan" defaultValue={1} />
-        <TabBase variant="solid" color="war" defaultValue={1} />
-        <TabBase variant="solid" color="suc" defaultValue={1} />
-        <TabBase variant="solid" color="pri" defaultValue={1} />
-        <TabBase variant="solid" color="sec" defaultValue={1} />
-        <TabBase variant="solid" color="bg" defaultValue={1} />
+        <TabBase variant="solid" color="d" defaultValue={1} />
+        <TabBase variant="solid" color="w" defaultValue={1} />
+        <TabBase variant="solid" color="s" defaultValue={1} />
+        <TabBase variant="solid" color="p" defaultValue={1} />
+        <TabBase variant="solid" color="se" defaultValue={1} />
+        <TabBase variant="solid" color="b" defaultValue={1} />
       </Flex>
       <Flex direction="column" gap="sm">
-        <TabBase variant="outline" color="dan" defaultValue={1} />
-        <TabBase variant="outline" color="war" defaultValue={1} />
-        <TabBase variant="outline" color="suc" defaultValue={1} />
-        <TabBase variant="outline" color="pri" defaultValue={1} />
-        <TabBase variant="outline" color="sec" defaultValue={1} />
-        <TabBase variant="outline" color="bg" defaultValue={1} />
+        <TabBase variant="outline" color="d" defaultValue={1} />
+        <TabBase variant="outline" color="w" defaultValue={1} />
+        <TabBase variant="outline" color="s" defaultValue={1} />
+        <TabBase variant="outline" color="p" defaultValue={1} />
+        <TabBase variant="outline" color="se" defaultValue={1} />
+        <TabBase variant="outline" color="b" defaultValue={1} />
       </Flex>
       <Flex direction="column" gap="sm">
-        <TabBase variant="soft" color="dan" defaultValue={1} />
-        <TabBase variant="soft" color="war" defaultValue={1} />
-        <TabBase variant="soft" color="suc" defaultValue={1} />
-        <TabBase variant="soft" color="pri" defaultValue={1} />
-        <TabBase variant="soft" color="sec" defaultValue={1} />
-        <TabBase variant="soft" color="bg" defaultValue={1} />
+        <TabBase variant="soft" color="d" defaultValue={1} />
+        <TabBase variant="soft" color="w" defaultValue={1} />
+        <TabBase variant="soft" color="s" defaultValue={1} />
+        <TabBase variant="soft" color="p" defaultValue={1} />
+        <TabBase variant="soft" color="se" defaultValue={1} />
+        <TabBase variant="soft" color="b" defaultValue={1} />
       </Flex>
       <Flex direction="column" gap="sm">
-        <TabBase color="dan" defaultValue={1} />
-        <TabBase color="war" defaultValue={1} />
-        <TabBase color="suc" defaultValue={1} />
-        <TabBase color="pri" defaultValue={1} />
-        <TabBase color="sec" defaultValue={1} />
-        <TabBase color="bg" defaultValue={1} />
+        <TabBase color="d" defaultValue={1} />
+        <TabBase color="w" defaultValue={1} />
+        <TabBase color="s" defaultValue={1} />
+        <TabBase color="p" defaultValue={1} />
+        <TabBase color="se" defaultValue={1} />
+        <TabBase color="b" defaultValue={1} />
       </Flex>
     </Grid>
   )
diff --git a/apps/stories/stories/text.stories.tsx b/apps/stories/stories/text.stories.tsx
index f4b534ba..4cb59bea 100644
--- a/apps/stories/stories/text.stories.tsx
+++ b/apps/stories/stories/text.stories.tsx
@@ -209,43 +209,43 @@ export function TextAligns() {
 export function TextColors() {
   return (
     <div className="l_flow">
-      <Text color="dan">
+      <Text color="d">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Text>
 
-      <Text color="sec">
+      <Text color="se">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Text>
-      <Text color="suc">
+      <Text color="s">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Text>
-      <Text color="war">
+      <Text color="w">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Text>
-      <Text color="pri">
+      <Text color="p">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Text>
       <Text color="bg">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Text>
 
-      <Text color="dan" low>
+      <Text color="d" low>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Text>
 
-      <Text color="sec" low>
+      <Text color="se" low>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Text>
-      <Text color="suc" low>
+      <Text color="s" low>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Text>
-      <Text color="war" low>
+      <Text color="w" low>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Text>
-      <Text color="pri" low>
+      <Text color="p" low>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Text>
-      <Text color="bg" low>
+      <Text color="b" low>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
       </Text>
     </div>
diff --git a/apps/stories/stories/timeline.stories.tsx b/apps/stories/stories/timeline.stories.tsx
index 4cc2d61f..8fcc5a3d 100644
--- a/apps/stories/stories/timeline.stories.tsx
+++ b/apps/stories/stories/timeline.stories.tsx
@@ -50,19 +50,19 @@ export const TimelineColor = () => {
         <Items />
       </Timeline>
 
-      <Timeline color="pri">
+      <Timeline color="p">
         <Items />
       </Timeline>
-      <Timeline color="suc">
+      <Timeline color="s">
         <Items />
       </Timeline>
-      <Timeline color="dan">
+      <Timeline color="d">
         <Items />
       </Timeline>
-      <Timeline color="war">
+      <Timeline color="w">
         <Items />
       </Timeline>
-      <Timeline color="sec">
+      <Timeline color="se">
         <Items />
       </Timeline>
     </Flex>
@@ -218,6 +218,6 @@ export const TimelineCustomBullet = () => {
 
 export const NormalTimeline = {
   args: {
-    color: 'pri',
+    color: 'p',
   },
 }
diff --git a/packages/pillar-core/README.md b/packages/pillar-core/README.md
index d21a2977..dbc697a8 100644
--- a/packages/pillar-core/README.md
+++ b/packages/pillar-core/README.md
@@ -61,11 +61,11 @@ To change the primary color of your UI, follow these simple steps:
 
 1. Create a file named theme.css or any other preferred name.
 
-1. Inside theme.css, define the desired primary color using the `--pri-color` custom property. For example:
+1. Inside theme.css, define the desired primary color using the `--Pcolor` custom property. For example:
 
 ```css
 :root {
-  --pri-color: #ff0000; /* Replace with your desired primary color */
+  --Pcolor: #ff0000; /* Replace with your desired primary color */
 }
 ```
 
diff --git a/packages/pillar-core/package.json b/packages/pillar-core/package.json
index 67317250..ac961a07 100644
--- a/packages/pillar-core/package.json
+++ b/packages/pillar-core/package.json
@@ -63,7 +63,7 @@
     "type:check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@pillar-ui/hooks": "*",
+    "@pillar-ui/hooks": "0.7.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
diff --git a/packages/pillar-core/src/core/@accordion/_accordion.css b/packages/pillar-core/src/core/@accordion/_accordion.css
index 414e036b..a2529dae 100644
--- a/packages/pillar-core/src/core/@accordion/_accordion.css
+++ b/packages/pillar-core/src/core/@accordion/_accordion.css
@@ -21,7 +21,7 @@
 */
 
 .a-c_itm {
-  border-block-end: 1px solid var(--bg-5);
+  border-block-end: 1px solid var(--B5);
   overflow: hidden;
 
   /*
@@ -52,7 +52,7 @@
 
 .a-c_pnl {
   padding: var(--ac-p);
-  color: var(--bg-12);
+  color: var(--B12);
   font-size: 0.85em;
 
   &[data-open='false'] {
@@ -74,7 +74,7 @@
   transform: none;
 
   &:hover {
-    background: var(--opa-3);
+    background: var(--O3);
   }
   & svg {
     transition: transform 0.25s;
diff --git a/packages/pillar-core/src/core/@accordion/index.tsx b/packages/pillar-core/src/core/@accordion/index.tsx
index 9a34b573..df4fc0c7 100644
--- a/packages/pillar-core/src/core/@accordion/index.tsx
+++ b/packages/pillar-core/src/core/@accordion/index.tsx
@@ -63,7 +63,7 @@ export const Accordion = forwardRef(
       children,
       type = 'single',
       collapsible,
-      color = 'bg',
+      color = 'B',
       variant,
       size = 'md',
       corner = 'sharp',
@@ -76,7 +76,7 @@ export const Accordion = forwardRef(
     const state = useAccordion({ type, collapsible })
 
     const classNames = cx(`a-c`, {
-      [`u_${color}`]: color,
+      [`C${color}`]: color,
       [`u_f-${size}`]: size,
       'l_f-sm': separate,
       [`u_variant`]: variant,
diff --git a/packages/pillar-core/src/core/@alert/index.tsx b/packages/pillar-core/src/core/@alert/index.tsx
index 7a2b9f8a..79a103cb 100644
--- a/packages/pillar-core/src/core/@alert/index.tsx
+++ b/packages/pillar-core/src/core/@alert/index.tsx
@@ -10,7 +10,7 @@ import { Close } from '../icons'
 export const Alert = forwardRef(
   (
     {
-      color = 'dan',
+      color = 'd',
       message,
       size,
       title,
@@ -21,6 +21,7 @@ export const Alert = forwardRef(
       className,
       visible,
       defaultVisible = true,
+
       onClose,
       icon,
       ...rest
@@ -38,7 +39,7 @@ export const Alert = forwardRef(
 
     if (!isVisible) return
 
-    const classNames = cx(`a-l f-l u_gap-xs u_${variant} u_${color}`, {
+    const classNames = cx(`a-l f-l u_gap-xs u_${variant} C${color}`, {
       [`u_rad-${corner}`]: !!corner,
       [`u_f-${size}`]: size,
       [className!]: className,
diff --git a/packages/pillar-core/src/core/@avatar/_avatar.css b/packages/pillar-core/src/core/@avatar/_avatar.css
index a4d3b3c1..509e49b4 100644
--- a/packages/pillar-core/src/core/@avatar/_avatar.css
+++ b/packages/pillar-core/src/core/@avatar/_avatar.css
@@ -5,10 +5,10 @@
 
   /* overflow: hidden; */
   padding: 0;
-  /* border: 3px solid var(--bg-1); */
+  /* border: 3px solid var(--B1); */
   background:
     linear-gradient(var(--av-b), var(--av-b)) content-box,
-    linear-gradient(var(--bg-1), var(--bg-1)) padding-box;
+    linear-gradient(var(--B1), var(--B1)) padding-box;
   min-width: var(--eq-s);
 
   /*
diff --git a/packages/pillar-core/src/core/@avatar/index.tsx b/packages/pillar-core/src/core/@avatar/index.tsx
index 31b09316..04f9dbc5 100644
--- a/packages/pillar-core/src/core/@avatar/index.tsx
+++ b/packages/pillar-core/src/core/@avatar/index.tsx
@@ -21,7 +21,7 @@ export const AvatarGroup = forwardRef(
       size = 'md',
       layout = 'stack',
       variant = 'soft',
-      color = 'pri',
+      color = 'p',
       corner = 'full',
       fallback,
       animate,
@@ -68,7 +68,7 @@ export const Avatar = forwardRef((props, forwardRef) => {
     variant = ctx?.variant ?? 'soft',
     size = ctx?.size,
     corner = ctx?.corner,
-    color = ctx?.color ?? 'pri',
+    color = ctx?.color ?? 'p',
     fallback = ctx?.fallback ?? <User strokeWidth="1.5" width="max(1.5em, 10px)" />,
     image = '',
     className,
@@ -79,7 +79,7 @@ export const Avatar = forwardRef((props, forwardRef) => {
 
   const [isError, setIsError] = useState(!image)
 
-  const classNames = cx(`a-v a-v-${variant} u_${color} u_s-equal u_center`, {
+  const classNames = cx(`a-v a-v-${variant} C${color} u_s-equal u_center`, {
     [`u_${animate}`]: animate,
     [`u_f-${size}`]: size,
     [`u_rad-${corner}`]: corner,
diff --git a/packages/pillar-core/src/core/@breadcrumb/_breadcrumb.css b/packages/pillar-core/src/core/@breadcrumb/_breadcrumb.css
index 6ef94aa4..400a7db9 100644
--- a/packages/pillar-core/src/core/@breadcrumb/_breadcrumb.css
+++ b/packages/pillar-core/src/core/@breadcrumb/_breadcrumb.css
@@ -36,7 +36,7 @@
     text-decoration: underline 1.2px;
   }
   &[aria-current='page'] {
-    color: var(--bg-10);
+    color: var(--B10);
     text-decoration: none;
     cursor: not-allowed;
   }
diff --git a/packages/pillar-core/src/core/@breadcrumb/index.tsx b/packages/pillar-core/src/core/@breadcrumb/index.tsx
index 2dc42851..19919c71 100644
--- a/packages/pillar-core/src/core/@breadcrumb/index.tsx
+++ b/packages/pillar-core/src/core/@breadcrumb/index.tsx
@@ -45,7 +45,7 @@ BreadcrumbItem.displayName = 'BreadcrumbItem'
 export const Breadcrumb = forwardRef(
   ({ children, separator, size, color = 'bg', className, as: Tag = 'nav', ...rest }, ref) => {
     const breadcrumbContext = { separator }
-    const classNames = cx(`f-l l_fl-wrap u_gap-sm u_${color}`, {
+    const classNames = cx(`f-l l_fl-wrap u_gap-sm C${color}`, {
       [`u_f-${size}`]: size,
       [className!]: className,
     })
diff --git a/packages/pillar-core/src/core/@checkbox/_checkbox.css b/packages/pillar-core/src/core/@checkbox/_checkbox.css
index 2a0d3fff..d39b0cdc 100644
--- a/packages/pillar-core/src/core/@checkbox/_checkbox.css
+++ b/packages/pillar-core/src/core/@checkbox/_checkbox.css
@@ -22,13 +22,13 @@
   }
 
   &:hover > .c-h {
-    box-shadow: 0 0 0 0.125em var(--c-7, var(--pri-7));
+    box-shadow: 0 0 0 0.125em var(--c-7, var(--P7));
   }
 }
 
 .c-h_el {
   &:checked:disabled + .c-h {
-    color: var(--bg-5);
+    color: var(--B5);
   }
   &[aria-checked='false'] + .c-h svg {
     display: none;
@@ -41,12 +41,12 @@
 
   &:disabled + .c-h {
     box-shadow: none;
-    border-color: var(--bg-10);
-    background: var(--bg-10);
+    border-color: var(--B10);
+    background: var(--B10);
     color: transparent; /* Responsible For The Color Of The Check Icon stroke  transparent in disabled state */
   }
   &:disabled ~ * {
-    color: var(--bg-10);
+    color: var(--B10);
   }
 }
 
@@ -54,7 +54,7 @@
   --eq-s: 1.25em;
   --fx: inline-flex;
 
-  border: 1px solid var(--opa-7);
+  border: 1px solid var(--O7);
   border-radius: 0.25em;
   color: transparent; /* Responsible For The Color Of The Check Icon stroke Default to transparent */
 }
diff --git a/packages/pillar-core/src/core/@checkbox/index.tsx b/packages/pillar-core/src/core/@checkbox/index.tsx
index f0aea8d4..559c4872 100644
--- a/packages/pillar-core/src/core/@checkbox/index.tsx
+++ b/packages/pillar-core/src/core/@checkbox/index.tsx
@@ -27,7 +27,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       }
     })
 
-    const classNamesRoot = cx('c-h_cnt', { [`u_f-${size}`]: !!size, [`u_${color}`]: !!color })
+    const classNamesRoot = cx('c-h_cnt', { [`u_f-${size}`]: !!size, [`C${color}`]: !!color })
 
     return (
       <label className={classNamesRoot}>
diff --git a/packages/pillar-core/src/core/@counterButton/_couterButton.css b/packages/pillar-core/src/core/@counterButton/_couterButton.css
index 96669812..807c13a9 100644
--- a/packages/pillar-core/src/core/@counterButton/_couterButton.css
+++ b/packages/pillar-core/src/core/@counterButton/_couterButton.css
@@ -4,7 +4,7 @@
 
 .cb-f,
 .c-b {
-  border: 1px solid var(--opa-6);
+  border: 1px solid var(--O6);
   border-radius: inherit;
 }
 
@@ -13,9 +13,9 @@
 }
 
 .c-b {
-  background: var(--bg-1);
+  background: var(--B1);
 
   &:hover {
-    background: var(--bg-4);
+    background: var(--B4);
   }
 }
diff --git a/packages/pillar-core/src/core/@form/_form.css b/packages/pillar-core/src/core/@form/_form.css
index ceb2b8e4..4c5355bc 100644
--- a/packages/pillar-core/src/core/@form/_form.css
+++ b/packages/pillar-core/src/core/@form/_form.css
@@ -24,21 +24,21 @@
     outline-offset: -1px;
   }
   &:has([aria-invalid='true']) {
-    color: var(--dan-11);
-    border-color: var(--dan-9);
-    outline-color: var(--dan-9);
-    background: var(--dan-3);
-    caret-color: var(--dan-9);
+    color: var(--D11);
+    border-color: var(--D9);
+    outline-color: var(--D9);
+    background: var(--D3);
+    caret-color: var(--D9);
 
     input::placeholder {
-      color: var(--dan-11);
+      color: var(--D11);
     }
   }
 
   &:has(:disabled) {
-    background: var(--bg-7) !important;
+    background: var(--B7) !important;
     cursor: not-allowed;
-    border-color: var(--opa-1);
+    border-color: var(--O1);
   }
 
   &:not(:has(.fi-p_cnt)) .f-i:not(.pin-input) {
@@ -60,17 +60,17 @@
 }
 
 .f-i_cnt-outline {
-  border-color: var(--bg-7);
+  border-color: var(--B7);
 }
 .f-i_cnt-filled {
-  border-color: var(--opa-11);
-  background: var(--bg-1);
+  border-color: var(--O11);
+  background: var(--B1);
 }
 
 .f-i_cnt-bordered {
   border: none;
   outline: 2px solid transparent;
-  background: var(--opa-2);
+  background: var(--O2);
 
   &::before,
   &::after {
@@ -80,11 +80,11 @@
     position: absolute;
     bottom: 0;
     inset-inline-start: 0;
-    background: var(--opa-7);
+    background: var(--O7);
     border-radius: 100px;
   }
   &::after {
-    background: var(--c-9, var(--pri-9));
+    background: var(--c-9, var(--P9));
     transform: scaleX(0);
     transition: transform 0.2s;
   }
@@ -99,10 +99,10 @@
     border: none;
     outline: none;
     &::after {
-      background: var(--dan-11);
+      background: var(--D11);
     }
     &::before {
-      background: var(--dan-5);
+      background: var(--D5);
     }
   }
 }
@@ -111,7 +111,7 @@
   width: 100%;
 
   &:has(:read-only) .f-i_cnt {
-    background: var(--bg-5);
+    background: var(--B5);
   }
 }
 
@@ -166,18 +166,18 @@
   flex-direction: column;
   width: 2.5rem;
   & * + * {
-    border-top: 1px solid var(--opa-6);
+    border-top: 1px solid var(--O6);
   }
 }
 .fi-n-btn {
   line-height: 0;
-  background: var(--bg-7);
+  background: var(--B7);
   height: 50%;
   &:active {
-    background: var(--opa-8);
+    background: var(--O8);
   }
   &:hover {
-    background: var(--bg-8);
+    background: var(--B8);
   }
 }
 
@@ -192,10 +192,10 @@
   min-height: 100%;
   padding: 0 0.5em;
   &:focus-visible {
-    box-shadow: inset 0 0 16px var(--opa-8);
+    box-shadow: inset 0 0 16px var(--O8);
   }
   &:hover {
-    background: var(--bg-5);
+    background: var(--B5);
   }
   & svg {
     width: 20px;
@@ -208,8 +208,8 @@
 /////////////////////////////////////////////////////////////////////////////////////////////////
 */
 .f-g_cnt {
-  color: var(--bg-11);
-  border: 1px solid var(--opa-6);
+  color: var(--B11);
+  border: 1px solid var(--O6);
 }
 
 .f-g-hide-border {
@@ -234,7 +234,7 @@
 /////////////////////////////////////////////////////////////////////////////////////////////////
 */
 /* .form-controller--required {
-  color: var(--dan-11);
+  color: var(--D11);
   margin-inline-start: 0.25em;
   line-height: 0;
   font-weight: bold;
@@ -261,7 +261,7 @@
 }
 
 .fi-s:hover {
-  stroke: var(--shared-color-8, var(--pri-10));
+  stroke: var(--shared-color-8, var(--P10));
 }
 
 .fi-s {
@@ -274,7 +274,7 @@
 }
 
 .fi-se {
-  background: var(--bg-1);
+  background: var(--B1);
   width: 100%;
   padding-inline: 0.75rem;
 }
@@ -283,18 +283,18 @@
   inset-inline-end: 0.5rem;
   top: 50%;
   transform: translateY(-50%);
-  stroke: var(--bg-11);
+  stroke: var(--B11);
   width: 1em;
 }
 
 .fi-f {
-  background: var(--c-7, var(--bg-7));
+  background: var(--c-7, var(--B7));
   font-size: 0.9em;
   padding: 0.25rem 1rem;
   cursor: pointer;
 
   .f-i_cnt:not([data-disabled]) &:hover {
-    background: var(--c-8, var(--bg-8));
+    background: var(--c-8, var(--B8));
   }
 }
 
@@ -307,12 +307,12 @@
   width: 2.25em;
   height: 2.25em;
   text-align: center;
-  box-shadow: inset 0 0 0 1px var(--opa-3);
+  box-shadow: inset 0 0 0 1px var(--O3);
   padding: 0 !important;
 }
 
 .f-c_err {
-  color: var(--dan-11);
+  color: var(--D11);
   width: fit-content;
   gap: var(--s-3xs);
 }
diff --git a/packages/pillar-core/src/core/@form/index.tsx b/packages/pillar-core/src/core/@form/index.tsx
index c87d5cc7..efa19b81 100644
--- a/packages/pillar-core/src/core/@form/index.tsx
+++ b/packages/pillar-core/src/core/@form/index.tsx
@@ -32,7 +32,7 @@ function useField(props: any) {
     size = groupCtx?.size,
     variant = groupCtx?.variant ?? 'outline',
     corner = groupCtx?.corner,
-    color = groupCtx?.color ?? 'pri',
+    color = groupCtx?.color ?? 'p',
     transform,
     fluid = groupCtx?.fluid,
     isInvalid,
@@ -45,7 +45,7 @@ function useField(props: any) {
   const prefix = prefixInput && <span className="fi-p_cnt f-i-pre u_center">{prefixInput}</span>
   const suffix = suffixInput && <span className="fi-s_cnt f-i-suf u_center">{suffixInput}</span>
 
-  const cls = cx(`f-i_cnt f-l f-i_cnt-${variant} u_${color}`, {
+  const cls = cx(`f-i_cnt f-l f-i_cnt-${variant} C${color}`, {
     [`u_t-${transform}`]: transform,
     'f-i_cnt-fluid': fluid,
     [`u_f-${size}`]: corner,
@@ -235,7 +235,7 @@ export const PinInput = forwardRef<HTMLInputElement, PinInputProps>((props, forw
     size = groupCtx?.size ?? 'md',
     variant = groupCtx?.variant ?? 'outline',
     corner = groupCtx?.corner,
-    color = groupCtx?.color ?? 'pri',
+    color = groupCtx?.color ?? 'p',
     transform,
     fluid = groupCtx?.fluid,
     placeholder = '○',
@@ -243,7 +243,7 @@ export const PinInput = forwardRef<HTMLInputElement, PinInputProps>((props, forw
     children,
     ...rest
   } = props
-  const className = cx(`f-i_cnt f-i_cnt-${variant} l_fl u_gap-xs u_${color}`, {
+  const className = cx(`f-i_cnt f-i_cnt-${variant} l_fl u_gap-xs C${color}`, {
     [`u_rad-${corner}`]: corner,
     [`u_t-${transform}`]: transform,
     [`u_f-${size}`]: size,
diff --git a/packages/pillar-core/src/core/@pagination/_pagination.css b/packages/pillar-core/src/core/@pagination/_pagination.css
index ef44221c..c0e84eb0 100644
--- a/packages/pillar-core/src/core/@pagination/_pagination.css
+++ b/packages/pillar-core/src/core/@pagination/_pagination.css
@@ -6,7 +6,7 @@
   /* overflow: hidden; */
 
   &[aria-current='page'] {
-    border-color: var(--opa-8);
+    border-color: var(--O8);
     outline: min(0.25em, 3px) solid var(--c-10);
     outline-offset: -2px;
     &.u_solid {
diff --git a/packages/pillar-core/src/core/@pagination/index.tsx b/packages/pillar-core/src/core/@pagination/index.tsx
index a1f4fef6..b3ba3077 100644
--- a/packages/pillar-core/src/core/@pagination/index.tsx
+++ b/packages/pillar-core/src/core/@pagination/index.tsx
@@ -19,7 +19,7 @@ const Item = forwardRef((props, forwardedRef) => {
     active = 1,
     children,
     variant = context?.variant ?? 'outline',
-    color = context?.color ?? 'bg',
+    color = context?.color ?? 'b',
     size = context?.size ?? 'sm',
     corner = context?.corner ?? 'sm',
     number,
diff --git a/packages/pillar-core/src/core/@popover/_popover.css b/packages/pillar-core/src/core/@popover/_popover.css
index 8e39f3b1..7b1b89e2 100644
--- a/packages/pillar-core/src/core/@popover/_popover.css
+++ b/packages/pillar-core/src/core/@popover/_popover.css
@@ -1,6 +1,6 @@
 .p-o {
-  border: 1px solid var(--bg-6);
-  background: var(--bg-1);
+  border: 1px solid var(--B6);
+  background: var(--B1);
   position: absolute;
   z-index: 1000000000000000000000000000;
 }
diff --git a/packages/pillar-core/src/core/@radio/_radio.css b/packages/pillar-core/src/core/@radio/_radio.css
index 747b32b2..2899072a 100644
--- a/packages/pillar-core/src/core/@radio/_radio.css
+++ b/packages/pillar-core/src/core/@radio/_radio.css
@@ -11,7 +11,7 @@
 
   /* width: fit-content; */
   &:has(:disabled) {
-    color: var(--bg-11);
+    color: var(--B11);
     cursor: not-allowed;
   }
 }
@@ -20,7 +20,7 @@
   --eq-s: 1.25em;
   border-radius: 50%;
   position: relative;
-  border: 1px solid var(--bg-7);
+  border: 1px solid var(--B7);
   margin-top: 2px;
   &:hover {
     border-color: var(--c-9);
@@ -50,7 +50,7 @@
 
   &:disabled + .rc {
     filter: grayscale(1);
-    background: var(--bg-8);
+    background: var(--B8);
   }
 }
 
diff --git a/packages/pillar-core/src/core/@radio/index.tsx b/packages/pillar-core/src/core/@radio/index.tsx
index 8d94a469..a9700bac 100644
--- a/packages/pillar-core/src/core/@radio/index.tsx
+++ b/packages/pillar-core/src/core/@radio/index.tsx
@@ -16,7 +16,7 @@ export const CustomRadio = (props: CustomRadioProps) => {
   const {
     label,
     id = label,
-    color = provider?.color ?? 'pri',
+    color = provider?.color ?? 'p',
     size = provider?.size ?? 'md',
     name = provider?.name,
     showLabel = false,
@@ -26,7 +26,7 @@ export const CustomRadio = (props: CustomRadioProps) => {
     ...rest
   } = props
 
-  const classnames = cx(`f-l u_gap-xs u_it-center r-a_c u_${color}`, { [`l_fl-${direction}`]: direction })
+  const classnames = cx(`f-l u_gap-xs u_it-center r-a_c C${color}`, { [`l_fl-${direction}`]: direction })
   return (
     <label className={classnames} htmlFor={id}>
       <input type="radio" name={name} className="r-a" id={id} {...rest} />
@@ -76,7 +76,7 @@ export const Radio = (props: RadioProps) => {
   const {
     label,
     id = fallbackId,
-    color = ctx?.color ?? 'pri',
+    color = ctx?.color ?? 'p',
     size = ctx?.size ?? 'md',
     name = ctx?.name,
     variant = 'solid',
@@ -84,7 +84,7 @@ export const Radio = (props: RadioProps) => {
   } = props
 
   return (
-    <label className={`l_fl-inline u_gap-xs r-a_cnt u_f-${size} u_${color}`} htmlFor={id}>
+    <label className={`l_fl-inline u_gap-xs r-a_cnt u_f-${size} C${color}`} htmlFor={id}>
       <input type="radio" name={name} className="r-a u_sr" id={id} {...rest} />
       <span className={`rc rc-${variant} u_s-equal`} />
       <span className="r-a_lbl">{label}</span>
diff --git a/packages/pillar-core/src/core/@stepper/_stepper.css b/packages/pillar-core/src/core/@stepper/_stepper.css
index c0b1775d..35e0da03 100644
--- a/packages/pillar-core/src/core/@stepper/_stepper.css
+++ b/packages/pillar-core/src/core/@stepper/_stepper.css
@@ -39,21 +39,21 @@
     position: absolute;
     inset-inline-start: 0;
     top: 50%;
-    background: var(--bg-4);
+    background: var(--B4);
     z-index: -1;
   }
 }
 
 .s-t_cnt {
   padding: 0.5rem 1.5rem;
-  background: var(--bg-1);
+  background: var(--B1);
 }
 
 .s-t_btn {
   width: 2.75rem;
   height: 2.75rem;
-  background: var(--bg-4);
-  border: 2px solid var(--bg-6);
+  background: var(--B4);
+  border: 2px solid var(--B6);
   flex: none;
   border-radius: var(--border-rad);
   & svg {
diff --git a/packages/pillar-core/src/core/@stepper/index.tsx b/packages/pillar-core/src/core/@stepper/index.tsx
index 34ed1d3a..4f0f0c7b 100644
--- a/packages/pillar-core/src/core/@stepper/index.tsx
+++ b/packages/pillar-core/src/core/@stepper/index.tsx
@@ -54,7 +54,7 @@ export const StepperStep = (props: StepProps) => {
   )
 }
 
-export const Stepper = ({ children, color = 'bg', active = 0, completeComponent, ...rest }: StepperProps) => {
+export const Stepper = ({ children, color = 'b', active = 0, completeComponent, ...rest }: StepperProps) => {
   // let _content: ReactNode[] = []
   // // Rename Index to step to reduce code at createElement
   // const _children = Children.map(children, (child, step) => {
@@ -84,7 +84,7 @@ export const Stepper = ({ children, color = 'bg', active = 0, completeComponent,
 
   return (
     <div className="s-t_cnt l_flow">
-      <div className={`f-l s-t u_${color} u_between`}>
+      <div className={`f-l s-t C${color} u_between`}>
         <StepperProvider {...rest}> {steps}</StepperProvider>
       </div>
       <div>{currentContent}</div>
diff --git a/packages/pillar-core/src/core/@switch/_switch.css b/packages/pillar-core/src/core/@switch/_switch.css
index c1a04bd4..06e74d11 100644
--- a/packages/pillar-core/src/core/@switch/_switch.css
+++ b/packages/pillar-core/src/core/@switch/_switch.css
@@ -1,7 +1,7 @@
 .s-w {
   position: relative;
-  background: var(--bg-7);
-  border: 2px solid var(--bg-7);
+  background: var(--B7);
+  border: 2px solid var(--B7);
   width: 2.5em;
   max-width: 2.5em;
   flex: none;
@@ -17,14 +17,14 @@
   text-transform: var(--switch-transform);
 
   /* &:hover::before {
-    box-shadow: inset 0 0 0 0.125em var(--opa-8);
+    box-shadow: inset 0 0 0 0.125em var(--O8);
   } */
   &::before {
     content: '';
     width: calc(1.25em - 2px);
     height: calc(1.25em - 4px);
     border-radius: inherit;
-    background: var(--bg-1);
+    background: var(--B1);
     position: absolute;
     inset-inline-start: 0;
     top: 50%;
@@ -51,12 +51,12 @@
     }
   }
   &:disabled {
-    background: var(--bg-8);
-    border-color: var(--bg-8);
+    background: var(--B8);
+    border-color: var(--B8);
     pointer-events: none;
     cursor: not-allowed;
     &:before {
-      background: var(--bg-7);
+      background: var(--B7);
     }
   }
 }
diff --git a/packages/pillar-core/src/core/@switch/index.tsx b/packages/pillar-core/src/core/@switch/index.tsx
index 15d1ba32..207860fe 100644
--- a/packages/pillar-core/src/core/@switch/index.tsx
+++ b/packages/pillar-core/src/core/@switch/index.tsx
@@ -9,7 +9,7 @@ import type { ForwardRefComponent } from '../../types/polymorphic.type'
 export const Switch = forwardRef(
   (
     {
-      color = 'pri',
+      color = 'p',
       size,
       corner,
       label,
@@ -32,7 +32,7 @@ export const Switch = forwardRef(
       else setPressed((current) => !current)
     }
 
-    const classNames = cx(`s-w u_${color}`, {
+    const classNames = cx(`s-w C${color}`, {
       [`u_rad-${corner}`]: corner,
       [`u_f-${size}`]: size,
       [className!]: className,
diff --git a/packages/pillar-core/src/core/@tabs/_tabs.css b/packages/pillar-core/src/core/@tabs/_tabs.css
index 62761c5e..6ca8ee2d 100644
--- a/packages/pillar-core/src/core/@tabs/_tabs.css
+++ b/packages/pillar-core/src/core/@tabs/_tabs.css
@@ -16,7 +16,7 @@
   }
 
   &[aria-orientation='horizontal'] {
-    border-inline-end: 1px solid var(--opa-6);
+    border-inline-end: 1px solid var(--O6);
 
     & .t_ab {
       border-start-end-radius: 0;
@@ -27,7 +27,7 @@
     }
   }
   &[aria-orientation='vertical'] {
-    border-block-end: 1px solid var(--opa-6);
+    border-block-end: 1px solid var(--O6);
     & .t_ab {
       border-end-start-radius: 0;
       border-end-end-radius: 0;
@@ -50,13 +50,13 @@
   color: white;
 }
 .t_ab-soft[aria-selected='true'] {
-  border: 1px solid var(--opa-6);
+  border: 1px solid var(--O6);
   border-bottom: 0;
   background: var(--c-4);
   color: var(--c-12);
 }
 .t_ab-outline[aria-selected='true'] {
-  border: 1px solid var(--opa-6);
+  border: 1px solid var(--O6);
   border-bottom: 0;
-  background: var(--bg-1);
+  background: var(--B1);
 }
diff --git a/packages/pillar-core/src/core/@tabs/index.tsx b/packages/pillar-core/src/core/@tabs/index.tsx
index 4d7ef530..7da4ec35 100644
--- a/packages/pillar-core/src/core/@tabs/index.tsx
+++ b/packages/pillar-core/src/core/@tabs/index.tsx
@@ -104,7 +104,7 @@ export const Tabs = forwardRef(
       size,
       variant = 'bordered',
       corner = 'sm',
-      color = 'pri',
+      color = 'p',
       ...rest
     },
     ref
@@ -133,7 +133,7 @@ export const Tabs = forwardRef(
       <TabsProvider {...context}>
         <div
           ref={ref}
-          className={cx(`f-l u_gap-sm u_${color} u_f-${size}`, { ['l_fl-column']: direction === 'vertical' })}
+          className={cx(`f-l u_gap-sm C${color} u_f-${size}`, { ['l_fl-column']: direction === 'vertical' })}
           {...rest}
         >
           {children}
diff --git a/packages/pillar-core/src/core/@timeline/_timeline.css b/packages/pillar-core/src/core/@timeline/_timeline.css
index c9786669..3de25bf0 100644
--- a/packages/pillar-core/src/core/@timeline/_timeline.css
+++ b/packages/pillar-core/src/core/@timeline/_timeline.css
@@ -15,7 +15,7 @@
 .t-i_bullet {
   width: 1em;
   height: 1em;
-  background: var(--bg-1);
+  background: var(--B1);
   border: var(--c-9) 0.15em solid;
   transform: translateX(-50%) translateX(-0.08em);
   overflow: hidden;
diff --git a/packages/pillar-core/src/core/@timeline/index.tsx b/packages/pillar-core/src/core/@timeline/index.tsx
index 6ba69c50..2b49798f 100644
--- a/packages/pillar-core/src/core/@timeline/index.tsx
+++ b/packages/pillar-core/src/core/@timeline/index.tsx
@@ -22,9 +22,9 @@ export const TimelineItem = (props: TimelineItemProps) => {
   )
 }
 
-export const Timeline = ({ color = 'bg', size = 'sm', children, ...rest }: TimelineProps) => {
+export const Timeline = ({ color = 'b', size = 'sm', children, ...rest }: TimelineProps) => {
   return (
-    <div className={`t-i u_f-${size} u_${color}`}>
+    <div className={`t-i u_f-${size} C${color}`}>
       <TimelineProvider {...rest}>{children}</TimelineProvider>
     </div>
   )
diff --git a/packages/pillar-core/src/core/badge/index.tsx b/packages/pillar-core/src/core/badge/index.tsx
index 3b1750f4..1a829d0d 100644
--- a/packages/pillar-core/src/core/badge/index.tsx
+++ b/packages/pillar-core/src/core/badge/index.tsx
@@ -6,8 +6,8 @@ import type { ReactNode } from 'react'
 import type { BadgeProps } from './badge.type'
 
 export const Badge = forwardRef((props, ref) => {
-  let { variant = 'solid', color = 'pri', as: Tag = 'div', type = 'numeric', size, corner, className, ...rest } = props
-  const classNames = cx(`b-a shd u_${variant} u_center u_${color}`, {
+  let { variant = 'solid', color = 'p', as: Tag = 'div', type = 'numeric', size, corner, className, ...rest } = props
+  const classNames = cx(`b-a shd u_${variant} u_center C${color}`, {
     'b-a_dot': type === 'dot',
     [`u_f-${size}`]: size,
     [`u_rad-${corner}`]: corner,
diff --git a/packages/pillar-core/src/core/blockquote/_blockquote.css b/packages/pillar-core/src/core/blockquote/_blockquote.css
index a8206a4f..4cef54d6 100644
--- a/packages/pillar-core/src/core/blockquote/_blockquote.css
+++ b/packages/pillar-core/src/core/blockquote/_blockquote.css
@@ -3,7 +3,7 @@
   /* background-clip: ;
   background-color: ; */
   padding: 1.5em;
-  background: padding-box var(--bg-3);
+  background: padding-box var(--B3);
   position: relative;
 
   /*
@@ -25,6 +25,6 @@
   top: 0.25em;
   & svg {
     width: 1.25em;
-    color: var(--opa-9);
+    color: var(--O9);
   }
 }
diff --git a/packages/pillar-core/src/core/blockquote/index.tsx b/packages/pillar-core/src/core/blockquote/index.tsx
index 988cdb0a..ddc8f9f9 100644
--- a/packages/pillar-core/src/core/blockquote/index.tsx
+++ b/packages/pillar-core/src/core/blockquote/index.tsx
@@ -4,22 +4,20 @@ import { cx } from '../cx'
 import type { BlockquoteProps } from './blockquote.type'
 import type { ForwardRefComponent } from '../../types/polymorphic.type'
 
-export const Blockquote = forwardRef(
-  ({ children, icon, size, color = 'pri', corner, className, cite, ...rest }, ref) => {
-    const classNames = cx(`b-l u_${color} l_f-xs u_sh-2xs`, {
-      [`u_f-${size}`]: size,
-      [`u_rad-${corner}`]: corner,
-      [className!]: className,
-    })
+export const Blockquote = forwardRef(({ children, icon, size, color = 'p', corner, className, cite, ...rest }, ref) => {
+  const classNames = cx(`b-l C${color} l_f-xs u_sh-2xs`, {
+    [`u_f-${size}`]: size,
+    [`u_rad-${corner}`]: corner,
+    [className!]: className,
+  })
 
-    return (
-      <blockquote ref={ref} className={classNames} cite={cite} {...rest}>
-        {icon && <span className="b-l_quote">{icon}</span>}
-        {children}
-      </blockquote>
-    )
-  }
-) as ForwardRefComponent<'blockquote', BlockquoteProps>
+  return (
+    <blockquote ref={ref} className={classNames} cite={cite} {...rest}>
+      {icon && <span className="b-l_quote">{icon}</span>}
+      {children}
+    </blockquote>
+  )
+}) as ForwardRefComponent<'blockquote', BlockquoteProps>
 
 Blockquote.displayName = 'Blockquote'
 
diff --git a/packages/pillar-core/src/core/button/_button.css b/packages/pillar-core/src/core/button/_button.css
index 95d4ac77..b5c4b5ad 100644
--- a/packages/pillar-core/src/core/button/_button.css
+++ b/packages/pillar-core/src/core/button/_button.css
@@ -16,10 +16,10 @@
     transform: translateY(-1px) scale(1.01);
   }
   &:disabled {
-    background: var(--bg-5);
-    color: var(--bg-11);
+    background: var(--B5);
+    color: var(--B11);
     pointer-events: none;
-    border-color: var(--bg-5);
+    border-color: var(--B5);
   }
   & svg {
     width: 1.1em;
@@ -71,11 +71,11 @@
 }
 
 .b-u-transparent {
-  border: 1px solid var(--opa-6);
+  border: 1px solid var(--O6);
   &:hover {
-    background: var(--opa-6);
+    background: var(--O6);
   }
   &:focus-visible {
-    outline: 2px dashed var(--opa-11);
+    outline: 2px dashed var(--O11);
   }
 }
diff --git a/packages/pillar-core/src/core/button/button.type.ts b/packages/pillar-core/src/core/button/button.type.ts
index 101ed63f..b6b7a1eb 100644
--- a/packages/pillar-core/src/core/button/button.type.ts
+++ b/packages/pillar-core/src/core/button/button.type.ts
@@ -22,7 +22,7 @@ interface BaseButton {
  *
  * @param {Object} props - The props for the button.
  * @param {Size} [props.size='md'] - The size of the button.
- * @param {Color} [props.color="pri"] - The color of the button.
+ * @param {Color} [props.color="p"] - The color of the button.
  * @param {Corner} [props.corner='xs'] - The corner of the button.
  * @param {Variant} [props.variant='solid'] - The variant of the button.
  * @param {ReactElement} [props.icon]  - The icon of the button.
diff --git a/packages/pillar-core/src/core/button/index.tsx b/packages/pillar-core/src/core/button/index.tsx
index ea0731b0..3a17e436 100644
--- a/packages/pillar-core/src/core/button/index.tsx
+++ b/packages/pillar-core/src/core/button/index.tsx
@@ -14,7 +14,7 @@ export const Button = forwardRef(
   (
     {
       children,
-      color = 'pri',
+      color = 'p',
       corner,
       variant = 'solid',
       size,
@@ -31,7 +31,7 @@ export const Button = forwardRef(
     },
     forwardedRef
   ) => {
-    const classNames = cx(`b-u shd u_${variant} u_${color} u_center`, {
+    const classNames = cx(`b-u shd u_${variant} C${color} u_center`, {
       'b-u-fluid': fluid,
       [`u_t-${transform}`]: transform,
       [`u_f-${size}`]: size,
@@ -43,7 +43,7 @@ export const Button = forwardRef(
 
     const content = isLoading ? (
       <>
-        <Spinner color="bg" size={size} />
+        <Spinner color="b" size={size} />
         <span>{loadingText}</span>
       </>
     ) : (
@@ -75,7 +75,7 @@ export const IconButton = forwardRef(
     { icon, title, corner, color = 'bg', size = 'md', variant = 'transparent', className, as: Tag = 'button', ...rest },
     forwardedRef
   ) => {
-    const classnames = cx(`b-u bu-i u_${variant} u_${color} u_center`, {
+    const classnames = cx(`b-u bu-i u_${variant} C${color} u_center`, {
       [`u_f-${size}`]: size,
       [`u_rad-${corner}`]: corner,
       [className!]: className,
@@ -103,7 +103,7 @@ export const ButtonGroup = forwardRef(
       children,
       title,
       corner = 'sharp',
-      color = 'pri',
+      color = 'p',
       size = 'md',
       variant = 'transparent',
       className,
@@ -112,7 +112,7 @@ export const ButtonGroup = forwardRef(
     },
     forwardedRef
   ) => {
-    const classNames = cx(`bu-g b-u u_${color} u_center`, {
+    const classNames = cx(`bu-g b-u C${color} u_center`, {
       [className!]: className,
       [`u_f-${size}`]: size,
       [`u_rad-${corner}`]: corner,
diff --git a/packages/pillar-core/src/core/chips/index.tsx b/packages/pillar-core/src/core/chips/index.tsx
index 94998cc5..59552da5 100644
--- a/packages/pillar-core/src/core/chips/index.tsx
+++ b/packages/pillar-core/src/core/chips/index.tsx
@@ -6,10 +6,10 @@ import type { ChipsProps } from './chips.type'
 
 export const Chips = forwardRef(
   (
-    { size, color = 'pri', as: Tag = 'span', variant = 'solid', transform, corner, className, children, ...rest },
+    { size, color = 'p', as: Tag = 'span', variant = 'solid', transform, corner, className, children, ...rest },
     ref
   ) => {
-    const _className = cx(`c-i shd u_${variant} u_${color}`, {
+    const _className = cx(`c-i shd u_${variant} C${color}`, {
       [`u_f-${size}`]: size,
       [`u_t-${transform}`]: transform,
       [`u_rad-${corner}`]: corner,
diff --git a/packages/pillar-core/src/core/code/index.tsx b/packages/pillar-core/src/core/code/index.tsx
index 82fbf0c9..f181a0a9 100644
--- a/packages/pillar-core/src/core/code/index.tsx
+++ b/packages/pillar-core/src/core/code/index.tsx
@@ -6,7 +6,7 @@ import type { CodeProps } from './code.type'
 
 export const Code = forwardRef(
   ({ as: Tag = 'code', color = 'bg', size, corner, children, transform, className, ...rest }, ref) => {
-    const classNames = cx(`c-o u_soft u_${color}`, {
+    const classNames = cx(`c-o u_soft C${color}`, {
       [`u_f-${size}`]: size,
       [`u_t-${transform}`]: transform,
       [`u_rad-${corner}`]: corner,
diff --git a/packages/pillar-core/src/core/kbd/_kbd.css b/packages/pillar-core/src/core/kbd/_kbd.css
index de2b04cd..b69a3941 100644
--- a/packages/pillar-core/src/core/kbd/_kbd.css
+++ b/packages/pillar-core/src/core/kbd/_kbd.css
@@ -1,6 +1,6 @@
 .k-d {
   border-bottom: 0.15rem solid var(--c-8);
-  /* box-shadow: inset 1px 1px 0.175em var(--c-6, var(--bg-6)); */
+  /* box-shadow: inset 1px 1px 0.175em var(--c-6, var(--B6)); */
   /* 
   TODO: Because Of this line Repeated A lot Lets make a way to do it in its own class 
   and shared with all components need it
diff --git a/packages/pillar-core/src/core/kbd/index.tsx b/packages/pillar-core/src/core/kbd/index.tsx
index 508fb014..37ca2c30 100644
--- a/packages/pillar-core/src/core/kbd/index.tsx
+++ b/packages/pillar-core/src/core/kbd/index.tsx
@@ -6,7 +6,7 @@ import type { ForwardRefComponent } from '../../types/polymorphic.type'
 
 export const Kbd = forwardRef(
   ({ title, variant = 'soft', color = 'bg', size, corner, className, transform, ...rest }, ref) => {
-    const classNames = cx(`k-d shd u_${variant} u_${color}`, {
+    const classNames = cx(`k-d shd u_${variant} C${color}`, {
       [`u_t-${transform}`]: transform,
       [`u_f-${size}`]: size,
       [`u_rad-${corner}`]: corner,
diff --git a/packages/pillar-core/src/core/progress/_progress.css b/packages/pillar-core/src/core/progress/_progress.css
index b6a189bb..40b05333 100644
--- a/packages/pillar-core/src/core/progress/_progress.css
+++ b/packages/pillar-core/src/core/progress/_progress.css
@@ -8,7 +8,7 @@
   width: 100%;
   height: 0.25em;
   border-radius: 100rem;
-  background: var(--opa-6);
+  background: var(--O6);
   position: relative;
 }
 
@@ -38,7 +38,7 @@
 .pr-c_background {
   font-size: 1em;
   fill: none;
-  stroke: var(--opa-6);
+  stroke: var(--O6);
   stroke-width: clamp(2px, 0.375em, 10px);
 }
 
@@ -57,7 +57,7 @@
   font-size: 1.25rem;
   text-anchor: middle;
   dominant-baseline: central;
-  fill: var(--bg-12);
+  fill: var(--B12);
   font-weight: 500;
 }
 
diff --git a/packages/pillar-core/src/core/progress/index.tsx b/packages/pillar-core/src/core/progress/index.tsx
index a63e955c..6291fc98 100644
--- a/packages/pillar-core/src/core/progress/index.tsx
+++ b/packages/pillar-core/src/core/progress/index.tsx
@@ -16,7 +16,7 @@ export const ProgressCircle = ({
   max = 100,
   value,
   label,
-  color = 'pri',
+  color = 'p',
   ...rest
 }: ProgressCircleProps) => {
   const progress = ((value - min) / (max - min)) * 100
@@ -27,7 +27,7 @@ export const ProgressCircle = ({
   const dashOffset = circumference - (progress / 100) * circumference
 
   return (
-    <div className={`pr-c u_center u_f-${size} u_${color}`} {...rest}>
+    <div className={`pr-c u_center u_f-${size} C${color}`} {...rest}>
       <svg className="pr-c_svg" viewBox="0 0 100 100">
         <circle className="pr-c_background" {...circle} />
         <circle className={`pr-c_bar`} {...circle} strokeDasharray={circumference} strokeDashoffset={dashOffset} />
@@ -42,7 +42,7 @@ export const ProgressCircle = ({
 export const ProgressBar = ({
   showValue,
   value,
-  color = 'pri',
+  color = 'p',
   size = 'md',
   label,
   min = 0,
@@ -52,7 +52,7 @@ export const ProgressBar = ({
   const progress = ((MaxValue - min) / (max - min)) * 100
 
   return (
-    <div className={`u_${color}`}>
+    <div className={`C${color}`}>
       <div className="f-l u_jus-end">
         <div className={cx(`u_f-${size}`, { ' u_sr': !showValue })}>{MaxValue}%</div>
       </div>
@@ -71,8 +71,8 @@ export const ProgressBar = ({
   )
 }
 
-export const ProgressBarStackItem = ({ color = 'pri', value }: ProgressBarStackItemProps) => {
-  return <div className={`pr-s_itm u_${color}`} style={{ width: `${value}%` }} />
+export const ProgressBarStackItem = ({ color = 'p', value }: ProgressBarStackItemProps) => {
+  return <div className={`pr-s_itm C${color}`} style={{ width: `${value}%` }} />
 }
 
 export const ProgressBarStack = ({ size = 'sm', children }: ProgressBarStackProps) => {
@@ -87,7 +87,7 @@ export const ProgressBarStack = ({ size = 'sm', children }: ProgressBarStackProp
       <div className={`f-l u_gap-2xs pr-b pr-s u_f-${size}`}>{children}</div>
       <ul className="f-l u_gap-md l_fl-wrap">
         {_children?.map(({ children, color }, index) => (
-          <li className={`pr-s_cnt f-l u_it-center u_gap-2xs u_${color}`} key={index}>
+          <li className={`pr-s_cnt f-l u_it-center u_gap-2xs C${color}`} key={index}>
             <span className="u_bg t-y-low u_f-sm">{children}</span>
           </li>
         ))}
diff --git a/packages/pillar-core/src/core/rating/index.tsx b/packages/pillar-core/src/core/rating/index.tsx
index 3d872437..38af03db 100644
--- a/packages/pillar-core/src/core/rating/index.tsx
+++ b/packages/pillar-core/src/core/rating/index.tsx
@@ -16,7 +16,7 @@ export const Rating = ({
   icon = 'star',
   ...props
 }: RatingProps) => {
-  const classNames = cx(`r-t u_${color} u_gap-xs u_center`, {
+  const classNames = cx(`r-t C${color} u_gap-xs u_center`, {
     [`u_f-${size}`]: size,
   })
   return (
diff --git a/packages/pillar-core/src/core/separator/_separator.css b/packages/pillar-core/src/core/separator/_separator.css
index 80bd3931..644fc15f 100644
--- a/packages/pillar-core/src/core/separator/_separator.css
+++ b/packages/pillar-core/src/core/separator/_separator.css
@@ -11,7 +11,7 @@
 }
 
 .s-e_txt {
-  background: var(--bg-1);
+  background: var(--B1);
   font-size: max(0.75em, 0.75rem);
   line-height: 1.1;
   padding: 0 0.5em;
diff --git a/packages/pillar-core/src/core/separator/index.tsx b/packages/pillar-core/src/core/separator/index.tsx
index a87adc81..cedcfffe 100644
--- a/packages/pillar-core/src/core/separator/index.tsx
+++ b/packages/pillar-core/src/core/separator/index.tsx
@@ -19,7 +19,7 @@ export const Separator = forwardRef(
     },
     ref
   ) => {
-    const classNames = cx(`s-e s-e-${direction} u_f-${thickness} f-l u_jus-${position} u_it-center u_${color}`, {
+    const classNames = cx(`s-e s-e-${direction} u_f-${thickness} f-l u_jus-${position} u_it-center C${color}`, {
       [`u_rad-${corner}`]: corner,
       'l_fl-column': direction === 'vertical',
       [className!]: className,
diff --git a/packages/pillar-core/src/core/skeleton/_skeleton.css b/packages/pillar-core/src/core/skeleton/_skeleton.css
index 63b14a9c..03dd36f2 100644
--- a/packages/pillar-core/src/core/skeleton/_skeleton.css
+++ b/packages/pillar-core/src/core/skeleton/_skeleton.css
@@ -1,11 +1,11 @@
 .s-k {
-  background: var(--bg-7);
+  background: var(--B7);
   position: relative;
   overflow: hidden;
 
   &::before {
     content: '';
-    background: linear-gradient(to right, var(--opa-1), var(--opa-4), var(--opa-2));
+    background: linear-gradient(to right, var(--O1), var(--O4), var(--O2));
     width: 40%;
     height: 100%;
     position: absolute;
diff --git a/packages/pillar-core/src/core/spinner/index.tsx b/packages/pillar-core/src/core/spinner/index.tsx
index 4ba07b56..2aa9b92d 100644
--- a/packages/pillar-core/src/core/spinner/index.tsx
+++ b/packages/pillar-core/src/core/spinner/index.tsx
@@ -3,16 +3,9 @@ import { cx } from '../cx'
 import type { CSSProperties } from 'react'
 import type { SpinnerProps } from './spinner.type'
 
-export const Spinner = ({
-  color = 'pri',
-  size,
-  thickness = '2px',
-  invert = false,
-  className,
-  ...rest
-}: SpinnerProps) => {
-  const classnames = cx(`s-p u_${color}`, {
-    [`u_${color}`]: color,
+export const Spinner = ({ color = 'p', size, thickness = '2px', invert = false, className, ...rest }: SpinnerProps) => {
+  const classnames = cx(`s-p C${color}`, {
+    [`C${color}`]: color,
     ['s-p-invert']: invert,
     [`u_f-${size}`]: size,
     [className!]: className,
diff --git a/packages/pillar-core/src/core/table/index.tsx b/packages/pillar-core/src/core/table/index.tsx
index 6ac93259..1efa875b 100644
--- a/packages/pillar-core/src/core/table/index.tsx
+++ b/packages/pillar-core/src/core/table/index.tsx
@@ -47,7 +47,7 @@ export const Table = ({
   return (
     <div className="t-a_cnt">
       <table
-        className={cx(`t-a u_f-${size} t-a-${variant}  u_${color}`, {
+        className={cx(`t-a u_f-${size} t-a-${variant}  C${color}`, {
           table__border: showBorder,
         })}
         {...rest}
diff --git a/packages/pillar-core/src/core/typography/_typography.css b/packages/pillar-core/src/core/typography/_typography.css
index 3913a552..a29d2c2a 100644
--- a/packages/pillar-core/src/core/typography/_typography.css
+++ b/packages/pillar-core/src/core/typography/_typography.css
@@ -14,9 +14,9 @@
 
 .t-y_link {
   padding: 2px;
-  color: var(--pri-11);
+  color: var(--P11);
   &:hover {
-    text-decoration: underline var(--pri-9) clamp(1px, 0.1em, 2px);
+    text-decoration: underline var(--P9) clamp(1px, 0.1em, 2px);
   }
   &:focus-visible {
     outline: 2px dashed var(--c-9);
diff --git a/packages/pillar-core/src/core/typography/index.tsx b/packages/pillar-core/src/core/typography/index.tsx
index c6c002ca..b45159a1 100644
--- a/packages/pillar-core/src/core/typography/index.tsx
+++ b/packages/pillar-core/src/core/typography/index.tsx
@@ -33,7 +33,7 @@ export const Text = forwardRef(
       [`u_t-${decoration}`]: decoration,
       [`u_t-${leading}`]: leading,
       [`u_f-${fontStyle}`]: fontStyle,
-      [`u_${color}`]: color,
+      [`C${color}`]: color,
       [`u_w-${width}`]: width,
       [`t-y-low`]: low,
       [`${className}`]: className,
@@ -60,7 +60,7 @@ Heading.displayName = 'Heading'
 
 export const Link = forwardRef(({ children, ...rest }, forwardedRef) => {
   return (
-    <Text ref={forwardedRef} color="pri" low className="t-y_link" as="a" {...rest}>
+    <Text ref={forwardedRef} color="p" low className="t-y_link" as="a" {...rest}>
       {children}
     </Text>
   )
diff --git a/packages/pillar-core/src/css/generics/_form.css b/packages/pillar-core/src/css/generics/_form.css
index a3758c23..c9809cf2 100644
--- a/packages/pillar-core/src/css/generics/_form.css
+++ b/packages/pillar-core/src/css/generics/_form.css
@@ -24,12 +24,12 @@ a {
   cursor: pointer;
 
   &:focus-visible {
-    outline: 2px dashed var(--pri-9);
+    outline: 2px dashed var(--P9);
   }
 }
 
 a {
-  color: var(--pri-11);
+  color: var(--P11);
 }
 
 .shd,
@@ -47,6 +47,6 @@ code {
 }
 
 code {
-  background-color: var(--bg-6);
+  background-color: var(--B6);
   border-radius: 0.25rem;
 }
diff --git a/packages/pillar-core/src/css/generics/_reset.css b/packages/pillar-core/src/css/generics/_reset.css
index c93a3f6c..b5311fa1 100644
--- a/packages/pillar-core/src/css/generics/_reset.css
+++ b/packages/pillar-core/src/css/generics/_reset.css
@@ -42,10 +42,10 @@ picture {
 /* Inherit fonts for inputs and buttons */
 
 body {
-  color: var(--bg-12);
+  color: var(--B12);
 
   /* // Please Make Sure If you want to update This Background color you need to update .storybook/preview.js */
-  background: var(--bg-1);
+  background: var(--B1);
   -webkit-font-smoothing: antialiased;
   font-family: var(--custom-body-font, var(--body-font));
   font-weight: 400;
diff --git a/packages/pillar-core/src/css/layout/_flow.css b/packages/pillar-core/src/css/layout/_flow.css
index 0f083bc0..16042ca0 100644
--- a/packages/pillar-core/src/css/layout/_flow.css
+++ b/packages/pillar-core/src/css/layout/_flow.css
@@ -1,3 +1,5 @@
+/* Fl */
+
 .l_f-3xs > * + * {
   margin-top: var(--s-3xs);
 }
diff --git a/packages/pillar-core/src/css/themes.css b/packages/pillar-core/src/css/themes.css
index 2da07265..347e833e 100644
--- a/packages/pillar-core/src/css/themes.css
+++ b/packages/pillar-core/src/css/themes.css
@@ -11,109 +11,109 @@
   */
 
   /* removed color from the old colors list: 1-2-4 and reordering them again  */
-  --pri-1: var(--pri-l-1, #fdfdfe);
-  --pri-2: var(--pri-l-2, #f7f9ff);
-  --pri-3: var(--pri-l-3, #edf2fe);
-  --pri-4: var(--pri-l-4, #e1e9ff);
-  --pri-5: var(--pri-l-5, #d2deff);
-  --pri-6: var(--pri-l-6, #c1d0ff);
-  --pri-7: var(--pri-l-7, #abbdf9);
-  --pri-8: var(--pri-l-8, #8da4ef);
-  --pri-9: var(--pri-l-9, #3e63dd);
-  --pri-10: var(--pri-l-10, #3358d4);
-  --pri-11: var(--pri-l-11, #3a5bc7);
-  --pri-12: var(--pri-l-12, #1f2d5c);
+  --P1: var(--Pl-1, #fdfdfe);
+  --P2: var(--Pl-2, #f7f9ff);
+  --P3: var(--Pl-3, #edf2fe);
+  --P4: var(--Pl-4, #e1e9ff);
+  --P5: var(--Pl-5, #d2deff);
+  --P6: var(--Pl-6, #c1d0ff);
+  --P7: var(--Pl-7, #abbdf9);
+  --P8: var(--Pl-8, #8da4ef);
+  --P9: var(--Pl-9, #3e63dd);
+  --P10: var(--Pl-10, #3358d4);
+  --P11: var(--Pl-11, #3a5bc7);
+  --P12: var(--Pl-12, #1f2d5c);
 
-  --sec-1: var(--sec-l-1, #fffcfe);
-  --sec-2: var(--sec-l-2, #fef7fb);
-  --sec-3: var(--sec-l-3, #fee9f5);
-  --sec-4: var(--sec-l-4, #fbdcef);
-  --sec-5: var(--sec-l-5, #f6cee7);
-  --sec-6: var(--sec-l-6, #efbfdd);
-  --sec-7: var(--sec-l-7, #e7acd0);
-  --sec-8: var(--sec-l-8, #dd93c2);
-  --sec-9: var(--sec-l-9, #d6409f);
-  --sec-10: var(--sec-l-10, #cf3897);
-  --sec-11: var(--sec-l-11, #c2298a);
-  --sec-12: var(--sec-l-12, #651249);
+  --Se1: var(--Sel-1, #fffcfe);
+  --Se2: var(--Sel-2, #fef7fb);
+  --Se3: var(--Sel-3, #fee9f5);
+  --Se4: var(--Sel-4, #fbdcef);
+  --Se5: var(--Sel-5, #f6cee7);
+  --Se6: var(--Sel-6, #efbfdd);
+  --Se7: var(--Sel-7, #e7acd0);
+  --Se8: var(--Sel-8, #dd93c2);
+  --Se9: var(--Sel-9, #d6409f);
+  --Se10: var(--Sel-10, #cf3897);
+  --Se11: var(--Sel-11, #c2298a);
+  --Se12: var(--Sel-12, #651249);
 
-  --opa-1: var(--opa-light-1, #00000003);
-  --opa-2: var(--opa-light-2, #00000007);
-  --opa-3: var(--opa-light-3, #0000000c);
-  --opa-4: var(--opa-light-4, #00000012);
-  --opa-5: var(--opa-light-5, #00000016);
-  --opa-6: var(--opa-light-6, #0000001c);
-  --opa-7: var(--opa-light-7, #00000023);
-  --opa-8: var(--opa-light-8, #00000038);
-  --opa-9: var(--opa-light-9, #0000006f);
-  --opa-10: var(--opa-light-10, #0000007a);
-  --opa-11: var(--opa-light-11, #0000008f);
-  --opa-12: var(--opa-light-12, #000000e3);
+  --O1: var(--Ol-1, #00000003);
+  --O2: var(--Ol-2, #00000007);
+  --O3: var(--Ol-3, #0000000c);
+  --O4: var(--Ol-4, #00000012);
+  --O5: var(--Ol-5, #00000016);
+  --O6: var(--Ol-6, #0000001c);
+  --O7: var(--Ol-7, #00000023);
+  --O8: var(--Ol-8, #00000038);
+  --O9: var(--Ol-9, #0000006f);
+  --O10: var(--Ol-10, #0000007a);
+  --O11: var(--Ol-11, #0000008f);
+  --O12: var(--Ol-12, #000000e3);
 
-  --bg-1: var(--bg-l-1, #fcfcfd);
-  --bg-2: var(--bg-l-2, #f9f9fb);
-  --bg-3: var(--bg-l-3, #f0f0f3);
-  --bg-4: var(--bg-l-4, #e8e8ec);
-  --bg-5: var(--bg-l-5, #e0e1e6);
-  --bg-6: var(--bg-l-6, #d9d9e0);
-  --bg-7: var(--bg-l-7, #cdced6);
-  --bg-8: var(--bg-l-8, #b9bbc6);
-  --bg-9: var(--bg-l-9, #8b8d98);
-  --bg-10: var(--bg-l-10, #80838d);
-  --bg-11: var(--bg-l-11, #60646c);
-  --bg-12: var(--bg-l-12, #1c2024);
+  --B1: var(--Bl-1, #fcfcfd);
+  --B2: var(--Bl-2, #f9f9fb);
+  --B3: var(--Bl-3, #f0f0f3);
+  --B4: var(--Bl-4, #e8e8ec);
+  --B5: var(--Bl-5, #e0e1e6);
+  --B6: var(--Bl-6, #d9d9e0);
+  --B7: var(--Bl-7, #cdced6);
+  --B8: var(--Bl-8, #b9bbc6);
+  --B9: var(--Bl-9, #8b8d98);
+  --B10: var(--Bl-10, #80838d);
+  --B11: var(--Bl-11, #60646c);
+  --B12: var(--Bl-12, #1c2024);
 
-  --dan-1: var(--dan-l-1, #fffcfc);
-  --dan-2: var(--dan-l-2, #fff7f7);
-  --dan-3: var(--dan-l-3, #feebec);
-  --dan-4: var(--dan-l-4, #ffdbdc);
-  --dan-5: var(--dan-l-5, #ffcdce);
-  --dan-6: var(--dan-l-6, #fdbdbe);
-  --dan-7: var(--dan-l-7, #f4a9aa);
-  --dan-8: var(--dan-l-8, #eb8e90);
-  --dan-9: var(--dan-l-9, #e5484d);
-  --dan-10: var(--dan-l-10, #dc3e42);
-  --dan-11: var(--dan-l-11, #ce2c31);
-  --dan-12: var(--dan-l-12, #641723);
+  --D1: var(--Dl-1, #fffcfc);
+  --D2: var(--Dl-2, #fff7f7);
+  --D3: var(--Dl-3, #feebec);
+  --D4: var(--Dl-4, #ffdbdc);
+  --D5: var(--Dl-5, #ffcdce);
+  --D6: var(--Dl-6, #fdbdbe);
+  --D7: var(--Dl-7, #f4a9aa);
+  --D8: var(--Dl-8, #eb8e90);
+  --D9: var(--Dl-9, #e5484d);
+  --D10: var(--Dl-10, #dc3e42);
+  --D11: var(--Dl-11, #ce2c31);
+  --D12: var(--Dl-12, #641723);
 
-  --war-1: var(--war-l-1, #fefcfb);
-  --war-2: var(--war-l-2, #fff7ed);
-  --war-3: var(--war-l-3, #ffefd6);
-  --war-4: var(--war-l-4, #ffdfb5);
-  --war-5: var(--war-l-5, #ffd19a);
-  --war-6: var(--war-l-6, #ffc182);
-  --war-7: var(--war-l-7, #f5ae73);
-  --war-8: var(--war-l-8, #ec9455);
-  --war-9: var(--war-l-9, #f76b15);
-  --war-10: var(--war-l-10, #ef5f00);
-  --war-11: var(--war-l-11, #cc4e00);
-  --war-12: var(--war-l-12, #582d1d);
+  --W1: var(--Wl-1, #fefcfb);
+  --W2: var(--Wl-2, #fff7ed);
+  --W3: var(--Wl-3, #ffefd6);
+  --W4: var(--Wl-4, #ffdfb5);
+  --W5: var(--Wl-5, #ffd19a);
+  --W6: var(--Wl-6, #ffc182);
+  --W7: var(--Wl-7, #f5ae73);
+  --W8: var(--Wl-8, #ec9455);
+  --W9: var(--Wl-9, #f76b15);
+  --W10: var(--Wl-10, #ef5f00);
+  --W11: var(--Wl-11, #cc4e00);
+  --W12: var(--Wl-12, #582d1d);
 
-  --suc-1: var(--suc-l-1, #fbfefc);
-  --suc-2: var(--suc-l-2, #f4fbf6);
-  --suc-3: var(--suc-l-3, #e6f6eb);
-  --suc-4: var(--suc-l-4, #d6f1df);
-  --suc-5: var(--suc-l-5, #c4e8d1);
-  --suc-6: var(--suc-l-6, #adddc0);
-  --suc-7: var(--suc-l-7, #8eceaa);
-  --suc-8: var(--suc-l-8, #5bb98b);
-  --suc-9: var(--suc-l-9, #30a46c);
-  --suc-10: var(--suc-l-10, #2b9a66);
-  --suc-11: var(--suc-l-11, #218358);
-  --suc-12: var(--suc-l-12, #193b2d);
+  --S1: var(--Sl-1, #fbfefc);
+  --S2: var(--Sl-2, #f4fbf6);
+  --S3: var(--Sl-3, #e6f6eb);
+  --S4: var(--Sl-4, #d6f1df);
+  --S5: var(--Sl-5, #c4e8d1);
+  --S6: var(--Sl-6, #adddc0);
+  --S7: var(--Sl-7, #8eceaa);
+  --S8: var(--Sl-8, #5bb98b);
+  --S9: var(--Sl-9, #30a46c);
+  --S10: var(--Sl-10, #2b9a66);
+  --S11: var(--Sl-11, #218358);
+  --S12: var(--Sl-12, #193b2d);
 
-  --inf-1: var(--inf-l-1, #fbfdff);
-  --inf-2: var(--inf-l-2, #f4faff);
-  --inf-3: var(--inf-l-3, #e6f4fe);
-  --inf-4: var(--inf-l-4, #d5efff);
-  --inf-5: var(--inf-l-5, #c2e5ff);
-  --inf-6: var(--inf-l-6, #acd8fc);
-  --inf-7: var(--inf-l-7, #8ec8f6);
-  --inf-8: var(--inf-l-8, #5eb1ef);
-  --inf-9: var(--inf-l-9, #0090ff);
-  --inf-10: var(--inf-l-10, #0588f0);
-  --inf-11: var(--inf-l-11, #0d74ce);
-  --inf-12: var(--inf-l-12, #113264);
+  --I1: var(--Il-1, #fbfdff);
+  --I2: var(--Il-2, #f4faff);
+  --I3: var(--Il-3, #e6f4fe);
+  --I4: var(--Il-4, #d5efff);
+  --I5: var(--Il-5, #c2e5ff);
+  --I6: var(--Il-6, #acd8fc);
+  --I7: var(--Il-7, #8ec8f6);
+  --I8: var(--Il-8, #5eb1ef);
+  --I9: var(--Il-9, #0090ff);
+  --I10: var(--Il-10, #0588f0);
+  --I11: var(--Il-11, #0d74ce);
+  --I12: var(--Il-12, #113264);
 
   /*
    ------------------------------------------------------------------------------------------------------
@@ -172,107 +172,107 @@
 .dark {
   color-scheme: dark;
 
-  --sec-1: var(--sec-d-1, #191117);
-  --sec-2: var(--sec-d-2, #21121d);
-  --sec-3: var(--sec-d-3, #37172f);
-  --sec-4: var(--sec-d-4, #4b143d);
-  --sec-5: var(--sec-d-5, #591c47);
-  --sec-6: var(--sec-d-6, #692955);
-  --sec-7: var(--sec-d-7, #833869);
-  --sec-8: var(--sec-d-8, #a84885);
-  --sec-9: var(--sec-d-9, #d6409f);
-  --sec-10: var(--sec-d-10, #de51a8);
-  --sec-11: var(--sec-d-11, #ff8dcc);
-  --sec-12: var(--sec-d-12, #fdd1ea);
+  --Se1: var(--Sed-1, #191117);
+  --Se2: var(--Sed-2, #21121d);
+  --Se3: var(--Sed-3, #37172f);
+  --Se4: var(--Sed-4, #4b143d);
+  --Se5: var(--Sed-5, #591c47);
+  --Se6: var(--Sed-6, #692955);
+  --Se7: var(--Sed-7, #833869);
+  --Se8: var(--Sed-8, #a84885);
+  --Se9: var(--Sed-9, #d6409f);
+  --Se10: var(--Sed-10, #de51a8);
+  --Se11: var(--Sed-11, #ff8dcc);
+  --Se12: var(--Sed-12, #fdd1ea);
 
-  --bg-1: var(--bg-d-1, #111113);
-  --bg-2: var(--bg-d-2, #18191b);
-  --bg-3: var(--bg-d-3, #212225);
-  --bg-4: var(--bg-d-4, #272a2d);
-  --bg-5: var(--bg-d-5, #2e3135);
-  --bg-6: var(--bg-d-6, #363a3f);
-  --bg-7: var(--bg-d-7, #43484e);
-  --bg-8: var(--bg-d-8, #5a6169);
-  --bg-9: var(--bg-d-9, #696e77);
-  --bg-10: var(--bg-d-10, #777b84);
-  --bg-11: var(--bg-d-11, #b0b4ba);
-  --bg-12: var(--bg-d-12, #edeef0);
+  --B1: var(--Bd-1, #111113);
+  --B2: var(--Bd-2, #18191b);
+  --B3: var(--Bd-3, #212225);
+  --B4: var(--Bd-4, #272a2d);
+  --B5: var(--Bd-5, #2e3135);
+  --B6: var(--Bd-6, #363a3f);
+  --B7: var(--Bd-7, #43484e);
+  --B8: var(--Bd-8, #5a6169);
+  --B9: var(--Bd-9, #696e77);
+  --B10: var(--Bd-10, #777b84);
+  --B11: var(--Bd-11, #b0b4ba);
+  --B12: var(--Bd-12, #edeef0);
 
-  --opa-1: var(--opa-d-1, #ffffff0d);
-  --opa-2: var(--opa-d-2, #ffffff1a);
-  --opa-3: var(--opa-d-3, #ffffff26);
-  --opa-4: var(--opa-d-4, #ffffff33);
-  --opa-5: var(--opa-d-5, #ffffff4d);
-  --opa-6: var(--opa-d-6, #ffffff66);
-  --opa-7: var(--opa-d-7, #ffffff80);
-  --opa-8: var(--opa-d-8, #ffffff99);
-  --opa-9: var(--opa-d-9, #ffffffb3);
-  --opa-10: var(--opa-d-10, #ffffffcc);
-  --opa-11: var(--opa-d-11, #ffffffe6);
-  --opa-12: var(--opa-d-12, #fffffff2);
+  --O1: var(--Od-1, #ffffff0d);
+  --O2: var(--Od-2, #ffffff1a);
+  --O3: var(--Od-3, #ffffff26);
+  --O4: var(--Od-4, #ffffff33);
+  --O5: var(--Od-5, #ffffff4d);
+  --O6: var(--Od-6, #ffffff66);
+  --O7: var(--Od-7, #ffffff80);
+  --O8: var(--Od-8, #ffffff99);
+  --O9: var(--Od-9, #ffffffb3);
+  --O10: var(--Od-10, #ffffffcc);
+  --O11: var(--Od-11, #ffffffe6);
+  --O12: var(--Od-12, #fffffff2);
 
-  --dan-1: var(--dan-d-1, #191111);
-  --dan-2: var(--dan-d-2, #201314);
-  --dan-3: var(--dan-d-3, #3b1219);
-  --dan-4: var(--dan-d-4, #500f1c);
-  --dan-5: var(--dan-d-5, #611623);
-  --dan-6: var(--dan-d-6, #72232d);
-  --dan-7: var(--dan-d-7, #8c333a);
-  --dan-8: var(--dan-d-8, #b54548);
-  --dan-9: var(--dan-d-9, #e5484d);
-  --dan-10: var(--dan-d-10, #ec5d5e);
-  --dan-11: var(--dan-d-11, #ff9592);
-  --dan-12: var(--dan-d-12, #ffd1d9);
+  --D1: var(--Dd-1, #191111);
+  --D2: var(--Dd-2, #201314);
+  --D3: var(--Dd-3, #3b1219);
+  --D4: var(--Dd-4, #500f1c);
+  --D5: var(--Dd-5, #611623);
+  --D6: var(--Dd-6, #72232d);
+  --D7: var(--Dd-7, #8c333a);
+  --D8: var(--Dd-8, #b54548);
+  --D9: var(--Dd-9, #e5484d);
+  --D10: var(--Dd-10, #ec5d5e);
+  --D11: var(--Dd-11, #ff9592);
+  --D12: var(--Dd-12, #ffd1d9);
 
-  --pri-1: var(--pri-d-1, #11131f);
-  --pri-2: var(--pri-d-2, #141726);
-  --pri-3: var(--pri-d-3, #182449);
-  --pri-4: var(--pri-d-4, #1d2e62);
-  --pri-5: var(--pri-d-5, #253974);
-  --pri-6: var(--pri-d-6, #304384);
-  --pri-7: var(--pri-d-7, #3a4f97);
-  --pri-8: var(--pri-d-8, #435db1);
-  --pri-9: var(--pri-d-9, #3e63dd);
-  --pri-10: var(--pri-d-10, #5472e4);
-  --pri-11: var(--pri-d-11, #9eb1ff);
-  --pri-12: var(--pri-d-12, #d6e1ff);
+  --P1: var(--Pd-1, #11131f);
+  --P2: var(--Pd-2, #141726);
+  --P3: var(--Pd-3, #182449);
+  --P4: var(--Pd-4, #1d2e62);
+  --P5: var(--Pd-5, #253974);
+  --P6: var(--Pd-6, #304384);
+  --P7: var(--Pd-7, #3a4f97);
+  --P8: var(--Pd-8, #435db1);
+  --P9: var(--Pd-9, #3e63dd);
+  --P10: var(--Pd-10, #5472e4);
+  --P11: var(--Pd-11, #9eb1ff);
+  --P12: var(--Pd-12, #d6e1ff);
 
-  --suc-1: var(--suc-d-1, #0e1512);
-  --suc-2: var(--suc-d-2, #121b17);
-  --suc-3: var(--suc-d-3, #132d21);
-  --suc-4: var(--suc-d-4, #113b29);
-  --suc-5: var(--suc-d-5, #174933);
-  --suc-6: var(--suc-d-6, #20573e);
-  --suc-7: var(--suc-d-7, #28684a);
-  --suc-8: var(--suc-d-8, #2f7c57);
-  --suc-9: var(--suc-d-9, #30a46c);
-  --suc-10: var(--suc-d-10, #33b074);
-  --suc-11: var(--suc-d-11, #3dd68c);
-  --suc-12: var(--suc-d-12, #b1f1cb);
+  --S1: var(--Sd-1, #0e1512);
+  --S2: var(--Sd-2, #121b17);
+  --S3: var(--Sd-3, #132d21);
+  --S4: var(--Sd-4, #113b29);
+  --S5: var(--Sd-5, #174933);
+  --S6: var(--Sd-6, #20573e);
+  --S7: var(--Sd-7, #28684a);
+  --S8: var(--Sd-8, #2f7c57);
+  --S9: var(--Sd-9, #30a46c);
+  --S10: var(--Sd-10, #33b074);
+  --S11: var(--Sd-11, #3dd68c);
+  --S12: var(--Sd-12, #b1f1cb);
 
-  --war-1: var(--war-d-1, #17120e);
-  --war-2: var(--war-d-2, #1e160f);
-  --war-3: var(--war-d-3, #331e0b);
-  --war-4: var(--war-d-4, #462100);
-  --war-5: var(--war-d-5, #562800);
-  --war-6: var(--war-d-6, #66350c);
-  --war-7: var(--war-d-7, #7e451d);
-  --war-8: var(--war-d-8, #a35829);
-  --war-9: var(--war-d-9, #f76b15);
-  --war-10: var(--war-d-10, #ff801f);
-  --war-11: var(--war-d-11, #ffa057);
-  --war-12: var(--war-d-12, #ffe0c2);
+  --W1: var(--Wd-1, #17120e);
+  --W2: var(--Wd-2, #1e160f);
+  --W3: var(--Wd-3, #331e0b);
+  --W4: var(--Wd-4, #462100);
+  --W5: var(--Wd-5, #562800);
+  --W6: var(--Wd-6, #66350c);
+  --W7: var(--Wd-7, #7e451d);
+  --W8: var(--Wd-8, #a35829);
+  --W9: var(--Wd-9, #f76b15);
+  --W10: var(--Wd-10, #ff801f);
+  --W11: var(--Wd-11, #ffa057);
+  --W12: var(--Wd-12, #ffe0c2);
 
-  --inf-1: var(--inf-d-1, #0d1520);
-  --inf-2: var(--inf-d-2, #111927);
-  --inf-3: var(--inf-d-3, #0d2847);
-  --inf-4: var(--inf-d-4, #003362);
-  --inf-5: var(--inf-d-5, #004074);
-  --inf-6: var(--inf-d-6, #104d87);
-  --inf-7: var(--inf-d-7, #205d9e);
-  --inf-8: var(--inf-d-8, #2870bd);
-  --inf-9: var(--inf-d-9, #0090ff);
-  --inf-10: var(--inf-d-10, #3b9eff);
-  --inf-11: var(--inf-d-11, #70b8ff);
-  --inf-12: var(--inf-d-12, #c2e6ff);
+  --I1: var(--Id-1, #0d1520);
+  --I2: var(--Id-2, #111927);
+  --I3: var(--Id-3, #0d2847);
+  --I4: var(--Id-4, #003362);
+  --I5: var(--Id-5, #004074);
+  --I6: var(--Id-6, #104d87);
+  --I7: var(--Id-7, #205d9e);
+  --I8: var(--Id-8, #2870bd);
+  --I9: var(--Id-9, #0090ff);
+  --I10: var(--Id-10, #3b9eff);
+  --I11: var(--Id-11, #70b8ff);
+  --I12: var(--Id-12, #c2e6ff);
 }
diff --git a/packages/pillar-core/src/css/utilities/_alignment.css b/packages/pillar-core/src/css/utilities/_alignment.css
index 6b728f9e..79659c8d 100644
--- a/packages/pillar-core/src/css/utilities/_alignment.css
+++ b/packages/pillar-core/src/css/utilities/_alignment.css
@@ -1,3 +1,5 @@
+/* Alignment: Ajc, Aji,Aai, Aac */
+
 /*
  1-  TO Support in flex and in grid because safari does not support end in flex
 */
diff --git a/packages/pillar-core/src/css/utilities/_border.css b/packages/pillar-core/src/css/utilities/_border.css
index d313e7d7..74e77e8f 100644
--- a/packages/pillar-core/src/css/utilities/_border.css
+++ b/packages/pillar-core/src/css/utilities/_border.css
@@ -1,3 +1,5 @@
+/* border: B */
+
 .u_border {
-  border: 1px solid var(--bg-6);
+  border: 1px solid var(--B6);
 }
diff --git a/packages/pillar-core/src/css/utilities/_color.css b/packages/pillar-core/src/css/utilities/_color.css
index bbd7696e..1fe390bd 100644
--- a/packages/pillar-core/src/css/utilities/_color.css
+++ b/packages/pillar-core/src/css/utilities/_color.css
@@ -1,104 +1,106 @@
-.u_pri {
-  --c-1: var(--pri-1);
-  --c-2: var(--pri-2);
-  --c-3: var(--pri-3);
-  --c-4: var(--pri-4);
-  --c-5: var(--pri-5);
-  --c-6: var(--pri-6);
-  --c-7: var(--pri-7);
-  --c-8: var(--pri-8);
-  --c-9: var(--pri-9);
-  --c-10: var(--pri-10);
-  --c-11: var(--pri-11);
-  --c-12: var(--pri-12);
+/* Color: Cp, Cse, Cw, Cs, Cd, Ci, Cb */
+
+.Cp {
+  --c-1: var(--P1);
+  --c-2: var(--P2);
+  --c-3: var(--P3);
+  --c-4: var(--P4);
+  --c-5: var(--P5);
+  --c-6: var(--P6);
+  --c-7: var(--P7);
+  --c-8: var(--P8);
+  --c-9: var(--P9);
+  --c-10: var(--P10);
+  --c-11: var(--P11);
+  --c-12: var(--P12);
 }
 
-.u_sec {
-  --c-1: var(--sec-1);
-  --c-2: var(--sec-2);
-  --c-3: var(--sec-3);
-  --c-4: var(--sec-4);
-  --c-5: var(--sec-5);
-  --c-6: var(--sec-6);
-  --c-7: var(--sec-7);
-  --c-8: var(--sec-8);
-  --c-9: var(--sec-9);
-  --c-10: var(--sec-10);
-  --c-11: var(--sec-11);
-  --c-12: var(--sec-12);
+.Cse {
+  --c-1: var(--Se1);
+  --c-2: var(--Se2);
+  --c-3: var(--Se3);
+  --c-4: var(--Se4);
+  --c-5: var(--Se5);
+  --c-6: var(--Se6);
+  --c-7: var(--Se7);
+  --c-8: var(--Se8);
+  --c-9: var(--Se9);
+  --c-10: var(--Se10);
+  --c-11: var(--Se11);
+  --c-12: var(--Se12);
 }
 
-.u_war {
-  --c-1: var(--war-1);
-  --c-2: var(--war-2);
-  --c-3: var(--war-3);
-  --c-4: var(--war-4);
-  --c-5: var(--war-5);
-  --c-6: var(--war-6);
-  --c-7: var(--war-7);
-  --c-8: var(--war-8);
-  --c-9: var(--war-9);
-  --c-10: var(--war-10);
-  --c-11: var(--war-11);
-  --c-12: var(--war-12);
+.Cw {
+  --c-1: var(--W1);
+  --c-2: var(--W2);
+  --c-3: var(--W3);
+  --c-4: var(--W4);
+  --c-5: var(--W5);
+  --c-6: var(--W6);
+  --c-7: var(--W7);
+  --c-8: var(--W8);
+  --c-9: var(--W9);
+  --c-10: var(--W10);
+  --c-11: var(--W11);
+  --c-12: var(--W12);
 }
 
-.u_suc {
-  --c-1: var(--suc-1);
-  --c-2: var(--suc-2);
-  --c-3: var(--suc-3);
-  --c-4: var(--suc-4);
-  --c-5: var(--suc-5);
-  --c-6: var(--suc-6);
-  --c-7: var(--suc-7);
-  --c-8: var(--suc-8);
-  --c-9: var(--suc-9);
-  --c-10: var(--suc-10);
-  --c-11: var(--suc-11);
-  --c-12: var(--suc-12);
+.Cs {
+  --c-1: var(--S1);
+  --c-2: var(--S2);
+  --c-3: var(--S3);
+  --c-4: var(--S4);
+  --c-5: var(--S5);
+  --c-6: var(--S6);
+  --c-7: var(--S7);
+  --c-8: var(--S8);
+  --c-9: var(--S9);
+  --c-10: var(--S10);
+  --c-11: var(--S11);
+  --c-12: var(--S12);
 }
 
-.u_dan {
-  --c-1: var(--dan-1);
-  --c-2: var(--dan-2);
-  --c-3: var(--dan-3);
-  --c-4: var(--dan-4);
-  --c-5: var(--dan-5);
-  --c-6: var(--dan-6);
-  --c-7: var(--dan-7);
-  --c-8: var(--dan-8);
-  --c-9: var(--dan-9);
-  --c-10: var(--dan-10);
-  --c-11: var(--dan-11);
-  --c-12: var(--dan-12);
+.Cd {
+  --c-1: var(--D1);
+  --c-2: var(--D2);
+  --c-3: var(--D3);
+  --c-4: var(--D4);
+  --c-5: var(--D5);
+  --c-6: var(--D6);
+  --c-7: var(--D7);
+  --c-8: var(--D8);
+  --c-9: var(--D9);
+  --c-10: var(--D10);
+  --c-11: var(--D11);
+  --c-12: var(--D12);
 }
 
-.u_inf {
-  --c-1: var(--inf-1);
-  --c-2: var(--inf-2);
-  --c-3: var(--inf-3);
-  --c-4: var(--inf-4);
-  --c-5: var(--inf-5);
-  --c-6: var(--inf-6);
-  --c-7: var(--inf-7);
-  --c-8: var(--inf-8);
-  --c-9: var(--inf-9);
-  --c-10: var(--inf-10);
-  --c-11: var(--inf-11);
-  --c-12: var(--inf-12);
+.Ci {
+  --c-1: var(--I1);
+  --c-2: var(--I2);
+  --c-3: var(--I3);
+  --c-4: var(--I4);
+  --c-5: var(--I5);
+  --c-6: var(--I6);
+  --c-7: var(--I7);
+  --c-8: var(--I8);
+  --c-9: var(--I9);
+  --c-10: var(--I10);
+  --c-11: var(--I11);
+  --c-12: var(--I12);
 }
 
-.u_bg {
-  --c-1: var(--bg-1);
-  --c-2: var(--bg-2);
-  --c-3: var(--bg-3);
-  --c-4: var(--bg-4);
-  --c-5: var(--bg-5);
-  --c-6: var(--bg-6);
-  --c-7: var(--bg-7);
-  --c-8: var(--bg-8);
-  --c-9: var(--bg-9);
-  --c-10: var(--bg-10);
-  --c-11: var(--bg-11);
-  --c-12: var(--bg-12);
+.Cb {
+  --c-1: var(--B1);
+  --c-2: var(--B2);
+  --c-3: var(--B3);
+  --c-4: var(--B4);
+  --c-5: var(--B5);
+  --c-6: var(--B6);
+  --c-7: var(--B7);
+  --c-8: var(--B8);
+  --c-9: var(--B9);
+  --c-10: var(--B10);
+  --c-11: var(--B11);
+  --c-12: var(--B12);
 }
diff --git a/packages/pillar-core/src/css/utilities/_flex.css b/packages/pillar-core/src/css/utilities/_flex.css
index b03d6cf9..3c7beb12 100644
--- a/packages/pillar-core/src/css/utilities/_flex.css
+++ b/packages/pillar-core/src/css/utilities/_flex.css
@@ -1,3 +1,5 @@
+/* Flex: C, B */
+
 .u_center,
 .u_between {
   display: var(--fx, flex);
diff --git a/packages/pillar-core/src/css/utilities/_fonts.css b/packages/pillar-core/src/css/utilities/_fonts.css
index 23955647..1ec4e276 100644
--- a/packages/pillar-core/src/css/utilities/_fonts.css
+++ b/packages/pillar-core/src/css/utilities/_fonts.css
@@ -1,3 +1,4 @@
+/*Font: Fs, Fw, --fw, --fs */
 .u_f-thin {
   font-weight: 100;
 }
diff --git a/packages/pillar-core/src/css/utilities/_index.css b/packages/pillar-core/src/css/utilities/_index.css
index abbca42e..82bf473f 100644
--- a/packages/pillar-core/src/css/utilities/_index.css
+++ b/packages/pillar-core/src/css/utilities/_index.css
@@ -1,3 +1,17 @@
+/* Alignment: Ajc, Aji,Aai, Aac */
+/* animation: Az, Aj-x Aj-y */
+/* border: B */
+/* Color: Cp, Cse, Cw, Cs, Cd, Ci, Cb */
+/* Flex: Fc, Fb */
+/* Font: Fs, Fw, --fw, --fs */
+/* Radius: R, Rh, Rb, --R */
+/* Shadow: S */
+/* Size: Sw, Sh, Sr */
+/* Spacing: Sg, Sp, Spt, Spb, Spl, Spr, Sm, Smt, Smb, Sml, Smr, Sf */
+/* Text: Tt, Ta, Td, Lh */
+/* truncate: T */
+/* visual-hidden: Vsr */
+
 @import './_alignment.css';
 @import './_color.css';
 @import './_truncate.css';
@@ -8,7 +22,7 @@
 @import './_animation.css';
 @import './_flex.css';
 @import './_shadow.css';
-@import './_corner.css';
+@import './_radius.css';
 @import './_sizing.css';
 @import './_variants.css';
 @import './_border.css';
diff --git a/packages/pillar-core/src/css/utilities/_corner.css b/packages/pillar-core/src/css/utilities/_radius.css
similarity index 98%
rename from packages/pillar-core/src/css/utilities/_corner.css
rename to packages/pillar-core/src/css/utilities/_radius.css
index 10a0a9b6..1e2f6af0 100644
--- a/packages/pillar-core/src/css/utilities/_corner.css
+++ b/packages/pillar-core/src/css/utilities/_radius.css
@@ -1,3 +1,5 @@
+/*Corner: R, Rh, RB, --R */
+
 .u_rad-sharp {
   border-radius: 0;
 }
diff --git a/packages/pillar-core/src/css/utilities/_shadow.css b/packages/pillar-core/src/css/utilities/_shadow.css
index e11efd40..134957ff 100644
--- a/packages/pillar-core/src/css/utilities/_shadow.css
+++ b/packages/pillar-core/src/css/utilities/_shadow.css
@@ -1,24 +1,26 @@
+/*Shadow: S */
+
 .u_sh-2xs {
-  box-shadow: var(--c-sha-2xs, 1px 1px 2px -1px var(--opa-5));
+  box-shadow: var(--c-sha-2xs, 1px 1px 2px -1px var(--O5));
 }
 .u_sh-xs {
-  box-shadow: var(--c-sha-xs, 1px 2px 4px -2px var(--opa-5));
+  box-shadow: var(--c-sha-xs, 1px 2px 4px -2px var(--O5));
 }
 .u_sh-sm {
-  box-shadow: var(--c-sha-sm, 2px 4px 8px -4px var(--opa-5));
+  box-shadow: var(--c-sha-sm, 2px 4px 8px -4px var(--O5));
 }
 .u_sh-md {
-  box-shadow: var(--c-sha-md, 3px 6px 12px -6px var(--opa-5));
+  box-shadow: var(--c-sha-md, 3px 6px 12px -6px var(--O5));
 }
 .u_sh-lg {
-  box-shadow: var(--c-sha-lg, 4px 8px 16px -8px var(--opa-5));
+  box-shadow: var(--c-sha-lg, 4px 8px 16px -8px var(--O5));
 }
 .u_sh-xl {
-  box-shadow: var(--c-sha-xl, 4px 12px 24px -12px var(--opa-5));
+  box-shadow: var(--c-sha-xl, 4px 12px 24px -12px var(--O5));
 }
 .u_sh-2xl {
-  box-shadow: var(--c-sha-2xl, 5px 16px 32px -16px var(--opa-5));
+  box-shadow: var(--c-sha-2xl, 5px 16px 32px -16px var(--O5));
 }
 .u_sh-in-out {
-  box-shadow: var(--c-sha-in-out, inset 0 0 0.75rem var(--opa-5), 1px 1px 3px var(--opa-5), -1px -1px 2px var(--opa-5));
+  box-shadow: var(--c-sha-in-out, inset 0 0 0.75rem var(--O5), 1px 1px 3px var(--O5), -1px -1px 2px var(--O5));
 }
diff --git a/packages/pillar-core/src/css/utilities/_sizing.css b/packages/pillar-core/src/css/utilities/_sizing.css
index 969dc985..e7b8430b 100644
--- a/packages/pillar-core/src/css/utilities/_sizing.css
+++ b/packages/pillar-core/src/css/utilities/_sizing.css
@@ -1,3 +1,5 @@
+/*Size: W, H, Ar */
+
 .u_ratio-1 {
   aspect-ratio: 1;
 }
diff --git a/packages/pillar-core/src/css/utilities/_spacing.css b/packages/pillar-core/src/css/utilities/_spacing.css
index d1f26d07..2d162c27 100644
--- a/packages/pillar-core/src/css/utilities/_spacing.css
+++ b/packages/pillar-core/src/css/utilities/_spacing.css
@@ -1,3 +1,5 @@
+/*Spacing: G, P, Pt, Pb, Pl, Pr, M, Mt, Mb, Ml, Mr */
+
 /* Spacing Style Section Start */
 .u_gap-2xs {
   gap: var(--s-2xs);
@@ -80,3 +82,37 @@
 .u_mt-auto {
   margin-top: auto;
 }
+
+.l_f-3xs > * + * {
+  margin-top: var(--s-3xs);
+}
+.l_f-2xs > * + * {
+  margin-top: var(--s-2xs);
+}
+
+.l_f-xs > * + * {
+  margin-top: var(--s-xs);
+}
+
+.l_f-sm > * + * {
+  margin-top: var(--s-sm);
+}
+
+.l_f-md > * + * {
+  margin-top: var(--s-md);
+}
+
+.l_f-lg > * + * {
+  margin-top: var(--s-lg);
+}
+.l_f-xl > * + * {
+  margin-top: var(--s-xl);
+}
+
+.l_f-2xl > * + * {
+  margin-top: var(--s-2xl);
+}
+
+.l_f-3xl > * + * {
+  margin-top: var(--s-3xl);
+}
diff --git a/packages/pillar-core/src/css/utilities/_state.css b/packages/pillar-core/src/css/utilities/_state.css
index da00878b..8ba528d9 100644
--- a/packages/pillar-core/src/css/utilities/_state.css
+++ b/packages/pillar-core/src/css/utilities/_state.css
@@ -1,10 +1,10 @@
 :is(.b-u, .s-w):focus-visible,
 :is(.r-a_cnt, .c-h_cnt, .b-r_itm, .step--button):focus-within {
-  outline: 2px dashed var(--c-9, var(--pri-9));
+  outline: 2px dashed var(--c-9, var(--P9));
   outline-offset: 2px;
 }
 
 :is(.step--button, .a-c_btn, .fi-p-btn):focus-visible {
-  outline: 2px dashed var(--c-9, var(--pri-9));
+  outline: 2px dashed var(--c-9, var(--P9));
   outline-offset: -2px;
 }
diff --git a/packages/pillar-core/src/css/utilities/_text.css b/packages/pillar-core/src/css/utilities/_text.css
index d3b38fb2..93de4d83 100644
--- a/packages/pillar-core/src/css/utilities/_text.css
+++ b/packages/pillar-core/src/css/utilities/_text.css
@@ -1,3 +1,5 @@
+/*text:  Tt, Ta, Td, Lh */
+
 .u_t-uppercase {
   text-transform: uppercase;
 }
@@ -51,7 +53,7 @@
 }
 
 /*
-      Align Text Decoration Section
+      line-height Section
   */
 
 .u_t-normal {
diff --git a/packages/pillar-core/src/css/utilities/_truncate.css b/packages/pillar-core/src/css/utilities/_truncate.css
index 479d84a0..02fa9e7a 100644
--- a/packages/pillar-core/src/css/utilities/_truncate.css
+++ b/packages/pillar-core/src/css/utilities/_truncate.css
@@ -1,34 +1,34 @@
 /* /// TRUNCATE TEXT UTILITY */
-
+/* truncate: Tr */
 .u_truncate-1,
 .u_truncate-2,
 .u_truncate-3,
 .u_truncate-4,
 .u_truncate-5,
 .u_truncate-6 {
-  --lns: 1;
+  --T: 1;
   display: -webkit-box;
-  -webkit-line-clamp: var(--lns);
+  -webkit-line-clamp: var(--T);
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 
 .u_truncate-2 {
-  --lns: 2;
+  --T: 2;
 }
 
 .u_truncate-3 {
-  --lns: 3;
+  --T: 3;
 }
 
 .u_truncate-4 {
-  --lns: 4;
+  --T: 4;
 }
 
 .u_truncate-5 {
-  --lns: 5;
+  --T: 5;
 }
 
 .u_truncate-6 {
-  --lns: 6;
+  --T: 6;
 }
diff --git a/packages/pillar-core/src/css/utilities/_visually-hidden.css b/packages/pillar-core/src/css/utilities/_visually-hidden.css
index d4004e5c..16d45695 100644
--- a/packages/pillar-core/src/css/utilities/_visually-hidden.css
+++ b/packages/pillar-core/src/css/utilities/_visually-hidden.css
@@ -1,4 +1,5 @@
 /* VISUALLY HIDDEN UTILITY */
+/* visual Hidden: SR */
 .u_sr {
   border: 0;
   clip: rect(0 0 0 0);
diff --git a/packages/pillar-core/src/types/index.ts b/packages/pillar-core/src/types/index.ts
index 9ea7250b..3b75a73a 100644
--- a/packages/pillar-core/src/types/index.ts
+++ b/packages/pillar-core/src/types/index.ts
@@ -4,10 +4,18 @@ type Size = '3xs' | '2xs' | CommonSize | '2xl' | '3xl'
 
 /**
  * Represents the color of a component.
- * @typedef {Size} Size
+ *
+ * @typedef {string} Color
+ * @property {Color} i - Info color (for informational messages)
+ * @property {Color} d - Danger color (for errors or alerts)
+ * @property {Color} s - Success color (for positive actions or confirmations)
+ * @property {Color} se - Secondary color (for less prominent elements)
+ * @property {Color} w - Warning color (for cautionary messages)
+ * @property {Color} p - Primary color (for main actions or branding)
+ * @property {Color} b - Background color (for backgrounds or containers)
+ * @property {Color} o - Opacity color (for Transparency element)
  */
-
-type Color = 'inf' | 'dan' | 'suc' | 'sec' | 'war' | 'pri' | 'bg' | 'opa' | undefined
+type Color = 'i' | 'd' | 's' | 'se' | 'w' | 'p' | 'b' | 'o' | undefined
 
 /**
  * Represents the color of a component.
diff --git a/yarn.lock b/yarn.lock
index 52e898d8..13f400d1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3045,7 +3045,7 @@ __metadata:
     tsup: "npm:^8.2.4"
     typescript: "npm:^5.5.4"
   peerDependencies:
-    "@pillar-ui/hooks": "*"
+    "@pillar-ui/hooks": 0.7.4
     react: ^18.0.0
     react-dom: ^18.0.0
   languageName: unknown
@@ -4690,14 +4690,14 @@ __metadata:
   linkType: hard
 
 "@types/express-serve-static-core@npm:^4.17.33":
-  version: 4.19.5
-  resolution: "@types/express-serve-static-core@npm:4.19.5"
+  version: 4.19.6
+  resolution: "@types/express-serve-static-core@npm:4.19.6"
   dependencies:
     "@types/node": "npm:*"
     "@types/qs": "npm:*"
     "@types/range-parser": "npm:*"
     "@types/send": "npm:*"
-  checksum: 10c0/ba8d8d976ab797b2602c60e728802ff0c98a00f13d420d82770f3661b67fa36ea9d3be0b94f2ddd632afe1fbc6e41620008b01db7e4fabdd71a2beb5539b0725
+  checksum: 10c0/4281f4ead71723f376b3ddf64868ae26244d434d9906c101cf8d436d4b5c779d01bd046e4ea0ed1a394d3e402216fabfa22b1fa4dba501061cd7c81c54045983
   languageName: node
   linkType: hard
 
@@ -4877,11 +4877,11 @@ __metadata:
   linkType: hard
 
 "@types/node@npm:*, @types/node@npm:^22.0.0, @types/node@npm:^22.5.3":
-  version: 22.7.0
-  resolution: "@types/node@npm:22.7.0"
+  version: 22.7.2
+  resolution: "@types/node@npm:22.7.2"
   dependencies:
     undici-types: "npm:~6.19.2"
-  checksum: 10c0/127b1ac3eebe8c2b09e3d2de277ee906710c4908b4573cde23b9c7cec1cb1aaf1af8bdabbccdac08d005f820b770e7447b22c8eb56ca63344f4d2e26bcdc29fb
+  checksum: 10c0/987e4df034e4af0ce76b938c2c0d94373da376b228f1c93081a661c77e682795c599bcad47c93c70a25b8ea443587137cf23088fb7f62ef442955f13046eae3d
   languageName: node
   linkType: hard
 
@@ -4893,11 +4893,11 @@ __metadata:
   linkType: hard
 
 "@types/node@npm:^18.0.0":
-  version: 18.19.51
-  resolution: "@types/node@npm:18.19.51"
+  version: 18.19.53
+  resolution: "@types/node@npm:18.19.53"
   dependencies:
     undici-types: "npm:~5.26.4"
-  checksum: 10c0/ed9d1acec81da03ed90e5ab493f47869e8791af0d6a4d882370d75decb4c567e03c6f27799ec85ab8494f61ba1c6b27ced5285747529015d4479cc83583161e0
+  checksum: 10c0/9612c38f63928abffbdabfa8e61c3adf30ff5483884eadd2fab4a790f0b2b51efdf773c76a21601c627850763da216140a4d163b27d8c6d1fa5250b0d11f683b
   languageName: node
   linkType: hard
 
@@ -6871,9 +6871,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001579, caniuse-lite@npm:^1.0.30001646, caniuse-lite@npm:^1.0.30001663":
-  version: 1.0.30001663
-  resolution: "caniuse-lite@npm:1.0.30001663"
-  checksum: 10c0/6508e27bf7fdec657f26f318b1ab64ace6e1208ef9fedaf0975bc89046e0c683bfba837f108840ada1686ff09b8ffd01e05ac791dcf598b8f16eefb636875cf2
+  version: 1.0.30001664
+  resolution: "caniuse-lite@npm:1.0.30001664"
+  checksum: 10c0/db2b431aba41a585191ab1e4d40da0ad349ff32400edac2a167bf6bf92dbf9c704eab03dc60fb89e882ce02478d61c3036b2b1bdce8edf9b2aabda5608bae05e
   languageName: node
   linkType: hard
 
@@ -8558,9 +8558,9 @@ __metadata:
   linkType: hard
 
 "electron-to-chromium@npm:^1.5.28":
-  version: 1.5.28
-  resolution: "electron-to-chromium@npm:1.5.28"
-  checksum: 10c0/6e2f4150ba03ce53ca128955c7d2da071d3774362a10c68848a85b71c29857915e2256cb53cd2de17fdbf0f56bf76ec174d24965abef7430d8c414ec733030b2
+  version: 1.5.29
+  resolution: "electron-to-chromium@npm:1.5.29"
+  checksum: 10c0/ae4849f1fe8d756d30c6f5f992803d8550a98b38a30aecc7d9776858cf229ad05b12cb9f7675f0a89330a077d16e28388cfe394fdd9d0828ffe860c8568c95c2
   languageName: node
   linkType: hard
 
@@ -15849,8 +15849,8 @@ __metadata:
   linkType: hard
 
 "nypm@npm:^0.3.8":
-  version: 0.3.11
-  resolution: "nypm@npm:0.3.11"
+  version: 0.3.12
+  resolution: "nypm@npm:0.3.12"
   dependencies:
     citty: "npm:^0.1.6"
     consola: "npm:^3.2.3"
@@ -15860,7 +15860,7 @@ __metadata:
     ufo: "npm:^1.5.4"
   bin:
     nypm: dist/cli.mjs
-  checksum: 10c0/016a74110f9629ddb9ee06d378aca56004ba0cbf824defb1f558342e411051443f95ae20171f538691798d4ac1da72d7582192c1a9c858843a2a90d6f5c3f86b
+  checksum: 10c0/1455abc1521e2d307736ef7c3b79eb4c2ef1fb2e471b90d16a440f2f7863cbcfe40708061015fd7056ebdba48359845192b749882b12a6659798244a5936ece6
   languageName: node
   linkType: hard