diff --git a/apps/cyberstorm-remix/app/Error.module.css b/apps/cyberstorm-remix/app/Error.module.css
index bfd32e8e8..d5bd2945a 100644
--- a/apps/cyberstorm-remix/app/Error.module.css
+++ b/apps/cyberstorm-remix/app/Error.module.css
@@ -1,12 +1,12 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--space--32);
+  gap: var(--space-32);
   align-items: center;
   justify-content: center;
 
-  --glitch-color-1: var(--old--color-cyber-green--50);
-  --glitch-color-2: var(--old--color-pink--50);
+  --glitch-color-1: var(--old--color-cyber-green-50);
+  --glitch-color-2: var(--old--color-accent-pink-50);
 }
 
 .description {
@@ -17,16 +17,16 @@
 
 .flavor {
   font-weight: var(--font-weight-bold);
-  font-size: var(--space--32);
+  font-size: var(--space-32);
   line-height: 1;
   text-align: center;
 }
 
 .glitch {
   position: relative;
-  margin-top: var(--space--32);
-  margin-bottom: var(--space--48);
-  font-weight: var(--font-weight-heavy);
+  margin-top: var(--space-32);
+  margin-bottom: var(--space-48);
+  font-weight: var(--font-weight-extra-bold);
   font-size: 12rem;
   line-height: 1;
 }
diff --git a/apps/cyberstorm-remix/app/Markdown.module.css b/apps/cyberstorm-remix/app/Markdown.module.css
index 423813d9c..ef2dcc0fe 100644
--- a/apps/cyberstorm-remix/app/Markdown.module.css
+++ b/apps/cyberstorm-remix/app/Markdown.module.css
@@ -54,7 +54,7 @@
 }
 
 .root h3 {
-  font-size: 1.25rem;
+  font-size: var(--font-size-body-xxl);
 }
 
 .root h4 {
@@ -115,7 +115,7 @@
 }
 
 .root a {
-  color: var(--old--color-cyber-green--50);
+  color: var(--old--color-cyber-green-50);
 }
 
 .root blockquote {
diff --git a/apps/cyberstorm-remix/app/c/CommunityCard.module.css b/apps/cyberstorm-remix/app/c/CommunityCard.module.css
index 33169462b..451271e30 100644
--- a/apps/cyberstorm-remix/app/c/CommunityCard.module.css
+++ b/apps/cyberstorm-remix/app/c/CommunityCard.module.css
@@ -1,7 +1,7 @@
 .root {
   display: flex;
   flex-direction: row;
-  gap: var(--space--32);
+  gap: var(--space-32);
 }
 
 .image {
@@ -11,21 +11,21 @@
 .info {
   display: flex;
   flex-direction: column;
-  gap: var(--space--4);
+  gap: var(--space-4);
   min-width: 0;
 }
 
 @media (width <= 30rem) {
   .root {
-    gap: var(--space--16);
+    gap: var(--space-16);
   }
 }
 
 .meta {
   display: flex;
   flex-direction: row;
-  gap: var(--space--16);
-  padding-top: var(--space--16);
+  gap: var(--space-16);
+  padding-top: var(--space-16);
 }
 
 .skeletonImage {
diff --git a/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css b/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css
new file mode 100644
index 000000000..b21669616
--- /dev/null
+++ b/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css
@@ -0,0 +1,260 @@
+@layer project-layout {
+  .project-footer {
+    width: 100%;
+
+    --border: var(--space-px) solid #27275d;
+  }
+
+  @media (width <= 63.5rem) {
+    .project-footer__item {
+      padding-right: 1.5rem;
+      padding-left: 1.5rem;
+    }
+  }
+
+  .project-footer__main {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .project-footer__section {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .project-footer__item {
+    display: flex;
+    flex: 1;
+    border-top: var(--border);
+  }
+
+  .project-footer__extra {
+    position: relative;
+    order: -1;
+  }
+
+  .project-footer__extra::before {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+    height: 100%;
+    max-height: 24rem;
+    background-image: linear-gradient(
+      165deg,
+      hsl(276deg 39% 38% / 0) 60%,
+      hsl(276deg 39% 38%) 100%
+    );
+    background-repeat: no-repeat;
+    background-position: 100% 100%;
+    content: "\0020";
+    aspect-ratio: 5/1;
+  }
+
+  .project-footer__inner {
+    display: flex;
+    flex: 1;
+    padding-block: var(--space-32);
+    width: 100%;
+  }
+
+  .project-footer__adwrapper .project-footer__inner {
+    padding-bottom: 0;
+  }
+
+  .project-footer__company {
+    order: 2;
+  }
+
+  .project-footer__footnote {
+    padding-block: var(--space-32);
+    padding-block-end: 5.5rem;
+  }
+
+  .project-footer__footnotecopyright {
+    color: rgb(197 194 255 / 0.6) !important;
+    font-weight: var(--font-weight-regular);
+    font-size: var(--font-size-body-sm);
+    line-height: var(--line-height-lg);
+    text-align: center;
+  }
+
+  .project-footer__footnoteinner {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    align-items: center;
+    align-self: stretch;
+    justify-content: center;
+    width: 100%;
+    max-width: 80rem;
+    margin-inline: auto;
+    padding-inline: var(--space-24);
+  }
+
+  .project-footer__nav {
+    display: flex;
+    gap: var(--space-40);
+    justify-content: center;
+    width: 100%;
+  }
+
+  .project-footer__navsection {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-24);
+  }
+
+  .project-footer__ad {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-32);
+    max-width: 100%;
+  }
+
+  .project-footer__adtext {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--space-16);
+    padding-bottom: 1rem;
+  }
+
+  .project-footer__addescription {
+    max-width: 29rem;
+    color: var(--color-text-accent);
+    font-weight: 400;
+    font-size: 1.125rem;
+    line-height: var(--line-height-md);
+  }
+
+  .project-footer__getmanagerbutton {
+    width: fit-content;
+  }
+
+  .project-footer__img {
+    position: relative;
+    aspect-ratio: 2.5/1;
+    object-fit: cover;
+    object-position: left top;
+    box-shadow: -36px -36px 40px 0 rgb(0 0 0 / 0.35);
+  }
+
+  .project-footer__logoandlinks {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-xxxl);
+    align-items: center;
+  }
+
+  .project-footer__logo {
+    height: 2rem;
+  }
+
+  .project-footer__iconlinks {
+    display: flex;
+    gap: 30px;
+    color: var(--color-text-accent);
+  }
+
+  .project-footer__iconlink {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 2rem;
+    border-radius: var(--radius-md);
+  }
+
+  .project-footer__footerpageslinks {
+    display: flex;
+    gap: var(--gap-xxxl);
+    font-weight: var(--font-weight-regular);
+    font-size: var(--font-size-body-sm);
+  }
+
+  .project-footer__footerlist {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-xs);
+    font-size: var(--font-size-body-md);
+    line-height: var(--line-height-lg);
+    list-style-type: none;
+  }
+
+  @media (width >= calc(63.5rem + 1px)) {
+    .project-footer__logoandlinks {
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+
+  @media (width >= calc(63.5rem + 1px)) {
+    .project-footer__main {
+      flex-direction: row;
+    }
+
+    .project-footer__section {
+      flex: 0 0 50%;
+    }
+
+    .project-footer__info .project-footer__item {
+      justify-content: flex-end;
+    }
+
+    .project-footer__inner {
+      flex: 0 1 45rem;
+      padding-block: 4.5rem;
+    }
+
+    .project-footer__company .project-footer__inner,
+    .project-footer__linkswrapper .project-footer__inner {
+      padding-right: 3.5rem;
+    }
+
+    .project-footer__company {
+      align-items: center;
+      order: 0;
+    }
+
+    .project-footer__extra {
+      order: 0;
+      border-left: var(--border);
+    }
+
+    .project-footer__adwrapper .project-footer__inner {
+      padding-top: 5rem;
+      padding-bottom: 0;
+      padding-left: 5rem;
+    }
+
+    .project-footer__logoandlinks,
+    .project-footer__navlinks {
+      margin-left: 4.5rem;
+    }
+
+    .project-footer__footnote {
+      padding-block-end: var(--space-32);
+    }
+
+    .project-footer__nav {
+      gap: 7rem;
+      justify-content: flex-start;
+    }
+
+    .project-footer__footnoteinner {
+      flex-direction: row;
+      justify-content: space-between;
+    }
+
+    .project-footer__ad {
+      padding-right: 3.125rem;
+    }
+  }
+
+  @media (width <= 23.25rem) {
+    .project-footer__nav {
+      flex-flow: wrap;
+      justify-content: flex-start;
+    }
+  }
+}
diff --git a/packages/cyberstorm/src/components/Footer/Footer.tsx b/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.tsx
similarity index 59%
rename from packages/cyberstorm/src/components/Footer/Footer.tsx
rename to apps/cyberstorm-remix/app/commonComponents/Footer/Footer.tsx
index b1c7a44ae..da8de315b 100644
--- a/packages/cyberstorm/src/components/Footer/Footer.tsx
+++ b/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.tsx
@@ -1,13 +1,17 @@
-import styles from "./Footer.module.css";
+import "./Footer.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faDiscord, faGithub } from "@fortawesome/free-brands-svg-icons";
 import {
   faArrowUpRightFromSquare,
   faBoltLightning,
 } from "@fortawesome/free-solid-svg-icons";
-import { ThunderstoreLogoHorizontal } from "../../svg/svg";
-import { classnames } from "../../utils/utils";
-import { Container, Heading, LinkButton, List, NewIcon, NewLink } from "../..";
+import { ThunderstoreLogoHorizontal } from "@thunderstore/cyberstorm/src/svg/svg";
+import {
+  Heading,
+  LinkButton,
+  NewIcon,
+  NewLink,
+} from "@thunderstore/cyberstorm/src";
 
 const AD_IMAGE_SRC = "/cyberstorm-static/images/tsmm_screenshot.png";
 const DISCORD_URL = "https://discord.thunderstore.io/";
@@ -18,20 +22,20 @@ const GITHUB_URL = "https://github.com/thunderstore-io";
  */
 export function Footer() {
   return (
-    <footer className={styles.root} aria-label="Footer">
-      <div className={styles.main}>
-        <div className={classnames(styles.section, styles.info)}>
-          <div className={classnames(styles.item, styles.company)}>
-            <div className={classnames(styles.inner, styles.logoAndLinks)}>
-              <NewIcon csVariant="accent" wrapperClasses={styles.logo}>
+    <footer className="project-footer" aria-label="Footer">
+      <div className="project-footer__main">
+        <div className="project-footer__section project-footer__info">
+          <div className="project-footer__item project-footer__company">
+            <div className="project-footer__inner project-footer__logoandlinks">
+              <NewIcon csVariant="accent" wrapperClasses="project-footer__logo">
                 <ThunderstoreLogoHorizontal />
               </NewIcon>
-              <Container rootClasses={styles.iconLinks} csVariant="accent">
+              <div className="project-footer__iconlinks">
                 <NewLink
                   primitiveType="link"
                   tooltipText="Join our Discord"
                   href={DISCORD_URL}
-                  rootClasses={styles.iconLink}
+                  rootClasses="project-footer__iconlink"
                   aria-label="Invite link to Thunderstores Discord server"
                 >
                   <NewIcon noWrapper>
@@ -42,127 +46,114 @@ export function Footer() {
                   primitiveType="link"
                   tooltipText="Check out our GitHub"
                   href={GITHUB_URL}
-                  rootClasses={styles.iconLink}
+                  rootClasses="project-footer__iconlink"
                   aria-label="Link to Thunderstores Github"
                 >
                   <NewIcon noWrapper>
                     <FontAwesomeIcon icon={faGithub} />
                   </NewIcon>
                 </NewLink>
-              </Container>
+              </div>
             </div>
           </div>
-          <div className={classnames(styles.item, styles.linksWrapper)}>
-            <div className={classnames(styles.inner, styles.navLinks)}>
-              <nav className={styles.nav} aria-label="Footer links">
-                <Container rootClasses={styles.navSection}>
+          <div className="project-footer__item project-footer__linkswrapper">
+            <div className="project-footer__inner project-footer__navlinks">
+              <nav className="project-footer__nav" aria-label="Footer links">
+                <div className="project-footer__navsection">
                   <Heading
                     csVariant="primary"
                     mode="heading"
                     csLevel="2"
-                    csStyleLevel="4"
+                    csSize="4"
                   >
                     Thunderstore
                   </Heading>
-                  <List.Root csTextStyles={["lineHeightBody", "fontSizeS"]}>
-                    <List.ListItem>
+                  <ul className="project-footer__footerlist">
+                    <li>
                       <NewLink
                         primitiveType="cyberstormLink"
                         linkId="Communities"
-                        csVariant="accent"
                       >
                         Communities
                       </NewLink>
-                    </List.ListItem>
-                  </List.Root>
-                </Container>
-                <Container rootClasses={styles.navSection}>
+                    </li>
+                  </ul>
+                </div>
+                <div className="project-footer__navsection">
                   <Heading
                     csVariant="primary"
                     mode="heading"
                     csLevel="2"
-                    csStyleLevel="4"
+                    csSize="4"
                   >
                     Developers
                   </Heading>
-                  <List.Root csTextStyles={["lineHeightBody", "fontSizeS"]}>
-                    <List.ListItem>
-                      <NewLink
-                        primitiveType="link"
-                        href="/api/docs"
-                        csVariant="accent"
-                      >
+                  <ul className="project-footer__footerlist">
+                    <li>
+                      <NewLink primitiveType="link" href="/api/docs">
                         API Documentation
                       </NewLink>
-                    </List.ListItem>
-                    <List.ListItem>
+                    </li>
+                    <li>
                       <NewLink
                         primitiveType="link"
                         href="/package/create/docs/"
-                        csVariant="accent"
                       >
                         Package Format Docs
                       </NewLink>
-                    </List.ListItem>
-                    <List.ListItem>
+                    </li>
+                    <li>
                       <NewLink
                         primitiveType="link"
                         href="/tools/manifest-v1-validator/"
-                        csVariant="accent"
                       >
                         Manifest Validator
                       </NewLink>
-                    </List.ListItem>
-                    <List.ListItem>
+                    </li>
+                    <li>
                       <NewLink
                         primitiveType="link"
                         href="/tools/markdown-preview/"
-                        csVariant="accent"
                       >
                         Markdown Preview
                       </NewLink>
-                    </List.ListItem>
-                    <List.ListItem>
+                    </li>
+                    <li>
                       <NewLink
                         primitiveType="link"
                         href="https://github.com/thunderstore-io"
-                        csVariant="accent"
                       >
                         GitHub
                       </NewLink>
-                    </List.ListItem>
-                  </List.Root>
-                </Container>
+                    </li>
+                  </ul>
+                </div>
               </nav>
             </div>
           </div>
         </div>
 
-        <div className={classnames(styles.section, styles.extra)}>
-          <div className={classnames(styles.item, styles.adWrapper)}>
-            <div className={styles.inner}>
-              <div className={styles.ad}>
-                <div className={styles.adText}>
-                  <Heading mode="display" csLevel="2" csStyleLevel="3">
+        <div className="project-footer__section project-footer__extra">
+          <div className="project-footer__item project-footer__adwrapper">
+            <div className="project-footer__inner">
+              <div className="project-footer__ad">
+                <div className="project-footer__adtext">
+                  <Heading mode="display" csLevel="2" csSize="3">
                     Thunderstore Mod Manager
                   </Heading>
-                  <Container
-                    rootClasses={styles.adDescription}
-                    csVariant="accent"
-                  >
+                  <div className="project-footer__addescription">
                     You are prepared. Download Thunderstore Mod Manager for
                     desktop and enter a world of Thunder{" "}
                     <NewIcon csMode="inline" noWrapper>
                       <FontAwesomeIcon icon={faBoltLightning} />
                     </NewIcon>
-                  </Container>
+                  </div>
                   <LinkButton
                     primitiveType="link"
                     href="https://www.overwolf.com/app/Thunderstore-Thunderstore_Mod_Manager"
-                    csSize="l"
-                    csColor="cyber-green"
+                    csSize="big"
                     csVariant="accent"
-                    rootClasses={styles.getManagerButton}
+                    rootClasses="project-footer__getmanagerbutton"
                   >
                     Get Manager
                     <NewIcon csMode="inline" noWrapper>
@@ -173,7 +164,7 @@ export function Footer() {
                 <img
                   alt="Screenshot of the Thunderstore Mod Manager"
                   src={AD_IMAGE_SRC}
-                  className={styles.img}
+                  className="project-footer__img"
                 />
               </div>
             </div>
@@ -181,12 +172,9 @@ export function Footer() {
         </div>
       </div>
 
-      <div className={classnames(styles.item, styles.footnote)}>
-        <div className={styles.footnoteInner}>
-          <Container
-            rootClasses={styles.footerPagesLinks}
-            csTextStyles={["fontSizeXS", "fontWeightRegular", "lineHeightAuto"]}
-          >
+      <div className="project-footer__item project-footer__footnote">
+        <div className="project-footer__footnoteinner">
+          <div className="project-footer__footerpageslinks">
             <NewLink
               primitiveType="link"
               href="https://pages.thunderstore.io/p/contact-us"
@@ -202,12 +190,8 @@ export function Footer() {
             <NewLink primitiveType="link" href="https://blog.thunderstore.io/">
               News
             </NewLink>
-          </Container>
-          <Container
-            csVariant="accent"
-            csTextStyles={["lineHeightBody", "fontWeightRegular", "fontSizeXS"]}
-            rootClasses={styles.footnoteCopyright}
-          >
+          </div>
+          <div className="project-footer__footnotecopyright">
             © 2024 Thunderstore and contributors. This page is{" "}
             <NewLink
               primitiveType="link"
@@ -216,7 +200,7 @@ export function Footer() {
             >
               open-source ❤
             </NewLink>
-          </Container>
+          </div>
         </div>
       </div>
     </footer>
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.module.css
index c7065d428..6512d1965 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.module.css
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.module.css
@@ -1,7 +1,7 @@
 .root {
   display: flex;
   flex-flow: row wrap;
-  gap: var(--space--8);
+  gap: var(--space-8);
   list-style: none;
 }
 
@@ -12,19 +12,19 @@
   justify-content: center;
 
   --text-color: var(--color-text--default);
-  --bg-color: var(--color-surface--9);
+  --bg-color: var(--color-surface-9);
 }
 
 .tag.exclude {
-  --text-color: var(--old--color-red--3);
-  --bg-color: var(--old--color-red--10);
+  --text-color: var(--old--color-accent-red-3);
+  --bg-color: var(--old--color-accent-red-10);
 }
 
 .icon {
-  height: var(--space--16);
+  height: var(--space-16);
   color: var(--text-color);
 }
 
 .tag.exclude .icon {
-  --text-color: var(--old--color-red--3);
+  --text-color: var(--old--color-accent-red-3);
 }
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css
index 691093376..592807e87 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css
@@ -1,14 +1,14 @@
 .root {
   display: flex;
   flex-direction: column;
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
 }
 
 .header,
 .empty {
-  padding: var(--space--8) var(--space--12);
+  padding: var(--space-8) var(--space-12);
   font-weight: var(--font-weight-boldest);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
 }
 
 .header {
@@ -22,31 +22,31 @@
 
 .label {
   display: flex;
-  gap: var(--gap--12);
+  gap: var(--gap-sm);
   align-items: center;
-  padding: var(--space--8) var(--space--12);
-  border-radius: var(--border-radius--8);
+  padding: var(--space-8) var(--space-12);
+  border-radius: var(--radius-md);
   color: var(--color-text--secondary);
   font-weight: var(--font-weight-bold);
   cursor: pointer;
-  transition: var(--animation-length-xs);
+  transition: var(--animation-duration-xs);
   user-select: none;
 
-  --mark-color: var(--old--color-purple--6);
+  --mark-color: var(--old--color-accent-purple-6);
 }
 
 .label:hover {
-  background-color: var(--color-surface--4);
+  background-color: var(--color-surface-4);
 
-  --mark-color: var(--old--color-purple--2);
+  --mark-color: var(--old--color-accent-purple-2);
 }
 
 .checkbox {
-  width: var(--space--18);
-  height: var(--space--18);
-  border-radius: var(--border-radius--2);
+  width: var(--space-18);
+  height: var(--space-18);
+  border-radius: var(--radius-xs);
   background-color: var(--mark-color);
-  transition: ease-out var(--animation-length-xs);
+  transition: ease-out var(--animation-duration-xs);
 }
 
 .label:hover .checkbox {
@@ -68,20 +68,20 @@
 }
 
 .icon {
-  height: var(--space--16);
-  color: var(--color-surface--0);
+  height: var(--space-16);
+  color: var(--color-surface-0);
 }
 
 .radio {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--space--16);
-  height: var(--space--16);
-  border: var(--space--2) solid var(--color-surface--7);
-  border-radius: var(--border-radius--8);
+  width: var(--space-16);
+  height: var(--space-16);
+  border: var(--space-2) solid var(--color-surface-7);
+  border-radius: var(--radius-md);
   background-color: transparent;
-  transition: ease-out var(--animation-length-xs);
+  transition: ease-out var(--animation-duration-xs);
 }
 
 .radio.radioSelected {
@@ -90,8 +90,8 @@
 
 .radioIndicator {
   display: block;
-  width: var(--space--6);
-  height: var(--space--6);
+  width: var(--space-6);
+  height: var(--space-6);
   border-radius: 50%;
   background-color: var(--mark-color);
 }
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css
index 98da3c229..3d7ed801e 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css
@@ -1,13 +1,13 @@
 .root {
   display: flex;
   flex-direction: column;
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
 }
 
 .header,
 .empty {
-  padding: var(--space--8) var(--space--12);
-  font-size: var(--font-size--m);
+  padding: var(--space-8) var(--space-12);
+  font-size: var(--font-size-body-lg);
 }
 
 .list {
@@ -16,31 +16,31 @@
 
 .label {
   display: flex;
-  gap: var(--gap--12);
+  gap: var(--gap-sm);
   align-items: center;
-  padding: var(--space--8) var(--space--12);
-  border-radius: var(--border-radius--8);
+  padding: var(--space-8) var(--space-12);
+  border-radius: var(--radius-md);
   color: var(--color-text--secondary);
   font-weight: var(--font-weight-bold);
   cursor: pointer;
-  transition: var(--animation-length-xs);
+  transition: var(--animation-duration-xs);
   user-select: none;
 
-  --mark-color: var(--old--color-purple--6);
+  --mark-color: var(--old--color-accent-purple-6);
 }
 
 .label:hover {
-  background-color: var(--color-surface--4);
+  background-color: var(--color-surface-4);
 
-  --mark-color: var(--old--color-purple--2);
+  --mark-color: var(--old--color-accent-purple-2);
 }
 
 .checkbox {
-  width: var(--space--18);
-  height: var(--space--18);
-  border-radius: var(--border-radius--2);
+  width: var(--space-18);
+  height: var(--space-18);
+  border-radius: var(--radius-xs);
   background-color: var(--mark-color);
-  transition: ease-out var(--animation-length-xs);
+  transition: ease-out var(--animation-duration-xs);
 }
 
 .label:hover .checkbox {
@@ -62,20 +62,20 @@
 }
 
 .icon {
-  height: var(--space--16);
-  color: var(--color-surface--0);
+  height: var(--space-16);
+  color: var(--color-surface-0);
 }
 
 .radio {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--space--16);
-  height: var(--space--16);
-  border: var(--space--2) solid var(--color-surface--7);
-  border-radius: var(--border-radius--8);
+  width: var(--space-16);
+  height: var(--space-16);
+  border: var(--space-2) solid var(--color-surface-7);
+  border-radius: var(--radius-md);
   background-color: transparent;
-  transition: ease-out var(--animation-length-xs);
+  transition: ease-out var(--animation-duration-xs);
 }
 
 .radio.radioSelected {
@@ -84,8 +84,8 @@
 
 .radioIndicator {
   display: block;
-  width: var(--space--6);
-  height: var(--space--6);
+  width: var(--space-6);
+  height: var(--space-6);
   border-radius: 50%;
   background-color: var(--mark-color);
 }
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageList.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageList.module.css
index 21a96aa06..94373bfee 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageList.module.css
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageList.module.css
@@ -1,7 +1,7 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
 }
 
 .top {
@@ -13,27 +13,27 @@
 
 .packageCount {
   color: var(--color-text--tertiary);
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
 }
 
 .order {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
   align-items: flex-start;
 }
 
 .sortByText {
   color: var(--color-text--tertiary);
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
   white-space: nowrap;
 }
 
 .packages {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
-  gap: var(--gap--24);
+  gap: var(--gap-xl);
 }
 
 .packagesIsFiltersVisible {
@@ -46,12 +46,12 @@
 
 .packageOrderBySkeletonBar {
   width: 14rem;
-  height: var(--space--38);
+  height: var(--space-38);
 }
 
 .packageCountSkeletonBar {
   width: 14rem;
-  height: var(--space--20);
+  height: var(--space-20);
 }
 
 .packagePaginationSkeletonContainer {
@@ -61,7 +61,7 @@
 
 .packagePaginationSkeletonBar {
   width: 14rem;
-  height: var(--space--36);
+  height: var(--space-36);
 }
 
 @media (width <= 43.75rem) {
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.module.css
index 849728caa..2621f75ed 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.module.css
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.module.css
@@ -3,13 +3,13 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
 }
 
 .contentWrapper {
   display: flex;
   flex-direction: row;
-  gap: var(--gap--24);
+  gap: var(--gap-xl);
   align-items: flex-start;
 }
 
@@ -19,7 +19,7 @@
   display: flex;
   flex-basis: 20%;
   flex-direction: column;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
 }
 
 .sidebarIsHidden {
@@ -42,7 +42,7 @@
 .dateFilterHeader {
   color: var(--color-text--tertiary);
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
   white-space: nowrap;
 }
 
@@ -63,18 +63,18 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: var(--space--10) var(--space--14);
+  padding: var(--space-10) var(--space-14);
   border: var(--border-width--2) solid var(--border-color);
 
-  border-radius: var(--border-radius--8);
+  border-radius: var(--radius-md);
   color: var(--color-text--tertiary);
   font-weight: var(--font-weight-medium);
 
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: normal;
-  background-color: var(--color-surface--4);
+  background-color: var(--color-surface-4);
   outline: none;
-  transition: ease-out var(--animation-length-l);
+  transition: ease-out var(--animation-duration-lg);
 
   --border-color: transparent;
 }
@@ -112,7 +112,7 @@
 .searchText {
   color: var(--color-text--tertiary);
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
   white-space: nowrap;
 }
 
diff --git a/apps/cyberstorm-remix/app/commonComponents/PageHeader/PageHeader.module.css b/apps/cyberstorm-remix/app/commonComponents/PageHeader/PageHeader.module.css
index 837377821..27282f0a5 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PageHeader/PageHeader.module.css
+++ b/apps/cyberstorm-remix/app/commonComponents/PageHeader/PageHeader.module.css
@@ -1,7 +1,7 @@
 .root {
   display: flex;
   flex-direction: row;
-  gap: var(--space--32);
+  gap: var(--space-32);
 }
 
 .image {
@@ -11,19 +11,19 @@
 .info {
   display: flex;
   flex-direction: column;
-  gap: var(--space--4);
+  gap: var(--space-4);
   min-width: 0;
 }
 
 @media (width <= 30rem) {
   .root {
-    gap: var(--space--16);
+    gap: var(--space-16);
   }
 }
 
 .meta {
   display: flex;
   flex-direction: row;
-  gap: var(--space--16);
-  padding-top: var(--space--16);
+  gap: var(--space-16);
+  padding-top: var(--space-16);
 }
diff --git a/apps/cyberstorm-remix/app/communities/SearchAndOrder.module.css b/apps/cyberstorm-remix/app/communities/SearchAndOrder.module.css
index 8c812e592..75f1128e2 100644
--- a/apps/cyberstorm-remix/app/communities/SearchAndOrder.module.css
+++ b/apps/cyberstorm-remix/app/communities/SearchAndOrder.module.css
@@ -1,21 +1,24 @@
 .root {
   display: flex;
   flex-direction: row;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
   justify-content: space-between;
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-body-md);
 }
 
 .searchTextInput {
   display: flex;
   flex: 1;
   flex-direction: column;
-  gap: var(--space--8);
+  gap: var(--space-8);
 }
 
 .searchFilters {
   display: flex;
   flex-direction: column;
-  gap: var(--space--8);
+  gap: var(--space-8);
   white-space: nowrap;
 }
 
diff --git a/apps/cyberstorm-remix/app/communities/communities.tsx b/apps/cyberstorm-remix/app/communities/communities.tsx
index 69b5a636c..c83609db3 100644
--- a/apps/cyberstorm-remix/app/communities/communities.tsx
+++ b/apps/cyberstorm-remix/app/communities/communities.tsx
@@ -1,6 +1,5 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import {
-  Container,
   CardCommunity,
   CommunityCardSkeleton,
   EmptyState,
@@ -131,21 +130,12 @@ export default function CommunitiesPage() {
         Communities
       </NewBreadCrumbs>
       <header className="project-root__page-header">
-        <Heading
-          csLevel="1"
-          csStyleLevel="2"
-          csVariant="primary"
-          mode="display"
-        >
+        <Heading csLevel="1" csSize="2" csVariant="primary" mode="display">
           Communities
         </Heading>
       </header>
       <main className="project-root__main">
-        <Container
-          rootClasses={searchAndOrderStyles.root}
-          csVariant="tertiary"
-          csTextStyles={["fontWeightBold", "lineHeightAuto", "fontSizeS"]}
-        >
+        <div className={searchAndOrderStyles.root}>
           <div className={searchAndOrderStyles.searchTextInput}>
             <label htmlFor="communitiesSearchInput">Search</label>
             <NewTextInput
@@ -154,7 +144,6 @@ export default function CommunitiesPage() {
               placeholder="Search communities..."
               clearValue={() => setSearchValue("")}
               leftIcon={<FontAwesomeIcon icon={faSearch} />}
-              csColor="cyber-green"
               id="communitiesSearchInput"
             />
           </div>
@@ -168,7 +157,7 @@ export default function CommunitiesPage() {
               id="communitiesSortBy"
             />
           </div>
-        </Container>
+        </div>
 
         <CommunitiesList communitiesData={communitiesData} />
         {/* {navigation.state === "loading" ? (
diff --git a/apps/cyberstorm-remix/app/p/Tabs.module.css b/apps/cyberstorm-remix/app/p/Tabs.module.css
index 913bfebda..f042799a6 100644
--- a/apps/cyberstorm-remix/app/p/Tabs.module.css
+++ b/apps/cyberstorm-remix/app/p/Tabs.module.css
@@ -2,25 +2,25 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  gap: var(--space--32);
+  gap: var(--space-32);
 }
 
 .buttons {
   display: flex;
-  border-bottom: 3px solid var(--old--color-purple--5);
+  border-bottom: 3px solid var(--old--color-accent-purple-5);
 }
 
 .button {
   display: flex;
   flex: none;
   flex-direction: row;
-  gap: var(--space--12);
+  gap: var(--space-12);
   align-items: center;
   justify-content: center;
   margin-bottom: -3px;
 
-  padding: var(--space--12) var(--space--16);
-  border-bottom: 3px solid var(--old--color-purple--5);
+  padding: var(--space-12) var(--space-16);
+  border-bottom: 3px solid var(--old--color-accent-purple-5);
   color: var(--tab-color);
   background-color: transparent;
 
@@ -30,7 +30,7 @@
 .button.active {
   border-color: var(--tab-color);
 
-  --tab-color: var(--old--color-green--5);
+  --tab-color: var(--old--color-accent-green-5);
 }
 
 .button:disabled {
@@ -51,6 +51,6 @@
 
 .label {
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: 1.3;
 }
diff --git a/apps/cyberstorm-remix/app/p/components/Dependencies/Dependencies.module.css b/apps/cyberstorm-remix/app/p/components/Dependencies/Dependencies.module.css
index ba729d11d..5a78ba448 100644
--- a/apps/cyberstorm-remix/app/p/components/Dependencies/Dependencies.module.css
+++ b/apps/cyberstorm-remix/app/p/components/Dependencies/Dependencies.module.css
@@ -1,25 +1,25 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--8);
+  gap: var(--gap-xs);
   border-radius: 8px;
 }
 
 .countDescription {
-  padding: 0 var(--space--8);
+  padding: 0 var(--space-8);
   color: var(--color-text--tertiary);
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
 }
 
 .item {
   display: flex;
-  gap: var(--gap--16);
-  padding: var(--space--8);
-  border-radius: var(--border-radius--8);
+  gap: var(--gap-md);
+  padding: var(--space-8);
+  border-radius: var(--radius-md);
 }
 
 .item:hover {
-  background-color: var(--color-surface--4);
+  background-color: var(--color-surface-4);
 }
 
 .itemImage {
@@ -29,7 +29,7 @@
 .itemTitle {
   overflow: hidden;
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
   line-height: var(--line-height--m);
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -38,7 +38,7 @@
 .itemDescription {
   overflow: hidden;
   color: var(--color-text--tertiary);
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
   line-height: var(--line-height--m);
   white-space: nowrap;
   text-overflow: ellipsis;
diff --git a/apps/cyberstorm-remix/app/p/components/Dependencies/DependencyDialog/DependencyDialog.module.css b/apps/cyberstorm-remix/app/p/components/Dependencies/DependencyDialog/DependencyDialog.module.css
index 09858ab82..fcb5d5279 100644
--- a/apps/cyberstorm-remix/app/p/components/Dependencies/DependencyDialog/DependencyDialog.module.css
+++ b/apps/cyberstorm-remix/app/p/components/Dependencies/DependencyDialog/DependencyDialog.module.css
@@ -1,5 +1,5 @@
 .root {
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
   line-height: var(--line-height--m);
 }
 
@@ -9,40 +9,40 @@
 
 .title {
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
 }
 
 .description {
   color: var(--color-text--tertiary);
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
   line-height: var(--line-height--m);
 }
 
 .item {
   display: flex;
-  gap: var(--gap--24);
-  padding: var(--space--16) var(--space--32);
+  gap: var(--gap-xl);
+  padding: var(--space-16) var(--space-32);
 }
 
 .item:hover {
-  gap: var(--gap--24);
-  padding: var(--space--16) var(--space--32);
-  background-color: var(--color-surface--5);
+  gap: var(--gap-xl);
+  padding: var(--space-16) var(--space-32);
+  background-color: var(--color-surface-5);
 }
 
 .preferredVersion {
-  padding-top: var(--space--6);
+  padding-top: var(--space-6);
   color: var(--color-text--accent);
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size--s);
+  font-size: var(--font-size-body-md);
   line-height: var(--line-height--s);
 }
 
 .preferredVersion__version {
   color: var(--color-highlight);
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size--s);
+  font-size: var(--font-size-body-md);
   line-height: var(--line-height--s);
 }
diff --git a/apps/cyberstorm-remix/app/p/components/Meta/Meta.module.css b/apps/cyberstorm-remix/app/p/components/Meta/Meta.module.css
index 737cf6cdb..8c2709aad 100644
--- a/apps/cyberstorm-remix/app/p/components/Meta/Meta.module.css
+++ b/apps/cyberstorm-remix/app/p/components/Meta/Meta.module.css
@@ -1,6 +1,6 @@
 .dependencyStringWrapper {
   display: flex;
-  gap: var(--gap--8);
+  gap: var(--gap-xs);
   align-items: center;
   max-width: 180px;
   max-height: 21px;
diff --git a/apps/cyberstorm-remix/app/p/components/TagList/TagList.module.css b/apps/cyberstorm-remix/app/p/components/TagList/TagList.module.css
index 047000c96..a447b5795 100644
--- a/apps/cyberstorm-remix/app/p/components/TagList/TagList.module.css
+++ b/apps/cyberstorm-remix/app/p/components/TagList/TagList.module.css
@@ -1,5 +1,5 @@
 .list {
   display: flex;
   flex-flow: row wrap;
-  gap: var(--gap--8);
+  gap: var(--gap-xs);
 }
diff --git a/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.module.css b/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.module.css
index e09485b72..2371ae6dd 100644
--- a/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.module.css
+++ b/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.module.css
@@ -4,35 +4,35 @@
 
 .item {
   display: flex;
-  gap: var(--gap--16);
-  padding: var(--space--8);
-  border-radius: var(--border-radius--8);
+  gap: var(--gap-md);
+  padding: var(--space-8);
+  border-radius: var(--radius-md);
 }
 
 .item:hover {
-  background-color: var(--color-surface--4);
+  background-color: var(--color-surface-4);
 }
 
 .itemTitle {
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
   line-height: var(--line-height--m);
 }
 
 .itemDescription {
   color: var(--color-text--tertiary);
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
   line-height: var(--line-height--m);
 }
 
 .teamLink {
   display: flex;
-  gap: var(--gap--8);
+  gap: var(--gap-xs);
   align-items: center;
   color: var(--color-highlight);
   font-weight: var(--font-weight-semibold);
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
   line-height: var(--line-height--m);
 }
 
@@ -49,6 +49,6 @@
   display: inline-flex;
   width: 1em;
   height: 1em;
-  margin-left: var(--space--4);
+  margin-left: var(--space-4);
   color: var(--color-crown);
 }
diff --git a/apps/cyberstorm-remix/app/p/dependants/Dependants.module.css b/apps/cyberstorm-remix/app/p/dependants/Dependants.module.css
index 4f32fc3f2..e7a9bcfda 100644
--- a/apps/cyberstorm-remix/app/p/dependants/Dependants.module.css
+++ b/apps/cyberstorm-remix/app/p/dependants/Dependants.module.css
@@ -1,12 +1,12 @@
 .root {
   display: flex;
   flex-direction: row;
-  gap: var(--space--32);
+  gap: var(--space-32);
 }
 
 @media (width <= 30rem) {
   .root {
-    gap: var(--space--16);
+    gap: var(--space-16);
   }
 }
 
@@ -46,9 +46,9 @@
   color: var(--color-text--default);
   font-weight: var(--font-weight-bold);
   font-size: 1.75rem;
-  line-height: 120%;
+  line-height: var(--line-height-xs);
 }
 
 .header a {
-  color: var(--old--color-cyber-green--60);
+  color: var(--old--color-cyber-green-60);
 }
diff --git a/apps/cyberstorm-remix/app/p/headerPackageDetailLayout.module.css b/apps/cyberstorm-remix/app/p/headerPackageDetailLayout.module.css
index add56a31c..a4bd0e0ea 100644
--- a/apps/cyberstorm-remix/app/p/headerPackageDetailLayout.module.css
+++ b/apps/cyberstorm-remix/app/p/headerPackageDetailLayout.module.css
@@ -1,20 +1,20 @@
 .packageInfo {
   display: flex;
   flex-direction: row;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
   justify-content: space-between;
 }
 
 .packageInfoDetails {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--8);
+  gap: var(--gap-xs);
 }
 
 .packageInfoMeta {
   display: flex;
   flex-direction: row;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
 }
 
 .description {
@@ -38,7 +38,7 @@
 }
 
 .installButtonIcon {
-  max-width: var(--space--24);
+  max-width: var(--space-24);
 }
 
 .installButtonIcon svg {
@@ -49,7 +49,7 @@
 .metaButtonWrapper {
   display: flex;
   flex-grow: 1;
-  gap: var(--gap--8);
+  gap: var(--gap-xs);
 }
 
 .metaDownloadButton {
@@ -65,13 +65,13 @@
 .metaInfo {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
   min-width: 354px;
 }
 
 .dependencyStringWrapper {
   display: flex;
-  gap: var(--gap--8);
+  gap: var(--gap-xs);
   align-items: center;
   max-width: 180px;
   max-height: 21px;
@@ -109,7 +109,7 @@
   max-width: 9rem;
   min-height: 9rem;
   max-height: 9rem;
-  border-radius: var(--border-radius--8);
+  border-radius: var(--radius-md);
 }
 
 .categoriesCard {
diff --git a/apps/cyberstorm-remix/app/p/sidebarPackageDetailsLayout.module.css b/apps/cyberstorm-remix/app/p/sidebarPackageDetailsLayout.module.css
index 783731670..7437a1d15 100644
--- a/apps/cyberstorm-remix/app/p/sidebarPackageDetailsLayout.module.css
+++ b/apps/cyberstorm-remix/app/p/sidebarPackageDetailsLayout.module.css
@@ -1,13 +1,13 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
   min-width: 354px;
 }
 
 .buttons {
   display: flex;
-  gap: var(--gap--8);
+  gap: var(--gap-xs);
 }
 
 .download {
diff --git a/apps/cyberstorm-remix/app/root.tsx b/apps/cyberstorm-remix/app/root.tsx
index 4638dc51f..e51f376c2 100644
--- a/apps/cyberstorm-remix/app/root.tsx
+++ b/apps/cyberstorm-remix/app/root.tsx
@@ -1,5 +1,6 @@
-import "@thunderstore/cyberstorm-styles";
 import "./styles/index.css";
+import "@thunderstore/cyberstorm-styles";
+import "@thunderstore/cyberstorm-theme";
 import {
   Links,
   Meta,
@@ -13,7 +14,6 @@ import {
   useRouteError,
 } from "@remix-run/react";
 // import { LinksFunction } from "@remix-run/react/dist/routeModules";
-import { Footer } from "@thunderstore/cyberstorm/src/components/Footer/Footer";
 import { Provider as RadixTooltip } from "@radix-ui/react-tooltip";
 
 import {
@@ -37,6 +37,7 @@ import { useHydrated } from "remix-utils/use-hydrated";
 import Toast from "@thunderstore/cyberstorm/src/components/Toast";
 import { SessionProvider } from "@thunderstore/ts-api-react";
 import { CurrentUser } from "@thunderstore/dapper/types";
+import { Footer } from "./commonComponents/Footer/Footer";
 // Disabled until we have "rated_packages_cyberstorm" available in the currentUser django endpoint
 // import { getDapper } from "cyberstorm/dapper/sessionUtils";
 
diff --git a/apps/cyberstorm-remix/app/settings/teams/TeamsLayout.module.css b/apps/cyberstorm-remix/app/settings/teams/TeamsLayout.module.css
index 2769de3e8..dc023ddd6 100644
--- a/apps/cyberstorm-remix/app/settings/teams/TeamsLayout.module.css
+++ b/apps/cyberstorm-remix/app/settings/teams/TeamsLayout.module.css
@@ -1,7 +1,7 @@
 .contentWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
 }
 
 .boldText {
diff --git a/apps/cyberstorm-remix/app/settings/teams/team/Tabs.module.css b/apps/cyberstorm-remix/app/settings/teams/team/Tabs.module.css
index 913bfebda..f042799a6 100644
--- a/apps/cyberstorm-remix/app/settings/teams/team/Tabs.module.css
+++ b/apps/cyberstorm-remix/app/settings/teams/team/Tabs.module.css
@@ -2,25 +2,25 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  gap: var(--space--32);
+  gap: var(--space-32);
 }
 
 .buttons {
   display: flex;
-  border-bottom: 3px solid var(--old--color-purple--5);
+  border-bottom: 3px solid var(--old--color-accent-purple-5);
 }
 
 .button {
   display: flex;
   flex: none;
   flex-direction: row;
-  gap: var(--space--12);
+  gap: var(--space-12);
   align-items: center;
   justify-content: center;
   margin-bottom: -3px;
 
-  padding: var(--space--12) var(--space--16);
-  border-bottom: 3px solid var(--old--color-purple--5);
+  padding: var(--space-12) var(--space-16);
+  border-bottom: 3px solid var(--old--color-accent-purple-5);
   color: var(--tab-color);
   background-color: transparent;
 
@@ -30,7 +30,7 @@
 .button.active {
   border-color: var(--tab-color);
 
-  --tab-color: var(--old--color-green--5);
+  --tab-color: var(--old--color-accent-green-5);
 }
 
 .button:disabled {
@@ -51,6 +51,6 @@
 
 .label {
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: 1.3;
 }
diff --git a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/TeamMembers.module.css b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/TeamMembers.module.css
index 8518b558c..160960bb7 100644
--- a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/TeamMembers.module.css
+++ b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/TeamMembers.module.css
@@ -1,7 +1,7 @@
 .dialogContent {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
 }
 
 .dialogTeamName {
@@ -11,7 +11,7 @@
 .dialogInput {
   display: flex;
   flex-direction: row;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
   align-items: flex-end;
   width: 100%;
 }
@@ -30,20 +30,20 @@
 
 .userInfo {
   display: flex;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
   align-items: center;
 }
 
 .userInfoName {
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
   line-height: var(--line-height--m);
 }
 
 .description {
   color: var(--color-text--secondary);
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
 }
 
diff --git a/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccountList/ServiceAccountList.module.css b/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccountList/ServiceAccountList.module.css
index 14480560d..d31d2ee9d 100644
--- a/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccountList/ServiceAccountList.module.css
+++ b/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccountList/ServiceAccountList.module.css
@@ -1,7 +1,7 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--8);
+  gap: var(--gap-xs);
 }
 
 .removeDescriptionAccountName {
@@ -11,7 +11,7 @@
 .content {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
 }
 
 .removeServiceAccountFooter {
diff --git a/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccountList/ServiceAccountListItem.module.css b/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccountList/ServiceAccountListItem.module.css
index 43ccd9d46..f9714a030 100644
--- a/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccountList/ServiceAccountListItem.module.css
+++ b/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccountList/ServiceAccountListItem.module.css
@@ -1,17 +1,17 @@
 .root {
   display: flex;
   flex-direction: row;
-  gap: var(--gap--16);
-  padding: var(--space--16) var(--space--24);
-  border-radius: var(--border-radius--8);
-  background-color: var(--color-surface--4);
+  gap: var(--gap-md);
+  padding: var(--space-16) var(--space-24);
+  border-radius: var(--radius-md);
+  background-color: var(--color-surface-4);
 }
 
 .name {
   display: flex;
   flex: 2;
   flex-direction: row;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
   align-items: center;
   font: var(--font-heading);
 }
diff --git a/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/TeamServiceAccounts.module.css b/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/TeamServiceAccounts.module.css
index a9349990a..f183fb271 100644
--- a/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/TeamServiceAccounts.module.css
+++ b/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/TeamServiceAccounts.module.css
@@ -1,13 +1,13 @@
 .content {
   display: flex;
   flex-direction: column;
-  gap: var(--space--16);
+  gap: var(--space-16);
 }
 
 .dialogContent {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
 }
 
 .dialogTeamName,
@@ -18,13 +18,13 @@
 .description {
   color: var(--color-text--secondary);
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
 }
 
 .token {
   display: flex;
-  gap: var(--gap--8);
+  gap: var(--gap-xs);
 }
 
 .tokenText {
diff --git a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Settings/TeamLeaveAndDisband.module.css b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Settings/TeamLeaveAndDisband.module.css
index 3ab19e3aa..bf3f5542f 100644
--- a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Settings/TeamLeaveAndDisband.module.css
+++ b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Settings/TeamLeaveAndDisband.module.css
@@ -1,17 +1,17 @@
 .content {
   display: flex;
   flex-direction: column;
-  gap: var(--space--16);
+  gap: var(--space-16);
 }
 
 .description {
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
   line-height: normal;
 }
 
 .separator {
-  margin: var(--space--32) 0;
-  border-bottom: var(--border-width--px) solid var(--color-surface--5);
+  margin: var(--space-32) 0;
+  border-bottom: var(--border-width--px) solid var(--color-surface-5);
 }
 
 .disbandVerificationInput {
diff --git a/apps/cyberstorm-remix/app/settings/teams/team/teamSettingsLayout.module.css b/apps/cyberstorm-remix/app/settings/teams/team/teamSettingsLayout.module.css
index 3c901c0db..ca77bd95e 100644
--- a/apps/cyberstorm-remix/app/settings/teams/team/teamSettingsLayout.module.css
+++ b/apps/cyberstorm-remix/app/settings/teams/team/teamSettingsLayout.module.css
@@ -1,7 +1,7 @@
 .header {
   display: flex;
   flex-direction: row;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
   justify-content: space-between;
 }
 
diff --git a/apps/cyberstorm-remix/app/settings/user/Account/Account.module.css b/apps/cyberstorm-remix/app/settings/user/Account/Account.module.css
index a841b62e3..11bc2cda2 100644
--- a/apps/cyberstorm-remix/app/settings/user/Account/Account.module.css
+++ b/apps/cyberstorm-remix/app/settings/user/Account/Account.module.css
@@ -6,17 +6,17 @@
 .section {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
 }
 
 .content {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
 }
 
 .instructionText {
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
 }
 
diff --git a/apps/cyberstorm-remix/app/settings/user/Connections/Connections.module.css b/apps/cyberstorm-remix/app/settings/user/Connections/Connections.module.css
index 9974f0b7b..e919e8d0b 100644
--- a/apps/cyberstorm-remix/app/settings/user/Connections/Connections.module.css
+++ b/apps/cyberstorm-remix/app/settings/user/Connections/Connections.module.css
@@ -6,7 +6,7 @@
 .section {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
 }
 
 .privacyPolicyLink {
@@ -16,12 +16,12 @@
 .connectionList {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
 }
 
 .itemWrapper {
-  padding: var(--space--16) var(--space--32);
-  border-radius: var(--border-radius--8);
+  padding: var(--space-16) var(--space-32);
+  border-radius: var(--radius-md);
   overflow: hidden;
 }
 
@@ -35,16 +35,16 @@
 }
 
 .enabled {
-  background-color: var(--color-surface--3);
+  background-color: var(--color-surface-3);
 }
 
 .disabled {
-  background-color: var(--color-surface--1);
+  background-color: var(--color-surface-1);
 }
 
 .connectionTypeInfo {
   display: flex;
-  gap: var(--space--24);
+  gap: var(--space-24);
   align-items: center;
   justify-content: center;
 }
@@ -59,13 +59,13 @@
 .connectionTypeInfoName {
   color: var(--color-text--default);
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: 1;
 }
 
 .rightSection {
   display: flex;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
   align-items: center;
   justify-content: center;
 }
@@ -73,27 +73,27 @@
 .connectedAs {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--4);
+  gap: var(--gap-xxs);
   align-items: flex-end;
 }
 
 .connectedAsDescription {
   color: var(--color-text--tertiary);
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
   line-height: 1;
 }
 
 .connectedAsUsername {
   color: var(--color-text--default);
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
   line-height: normal;
 }
 
 @media (width <= 30rem) {
   .item {
     flex-direction: column;
-    gap: var(--gap--8);
+    gap: var(--gap-xs);
   }
 }
diff --git a/apps/cyberstorm-remix/app/settings/user/Profile/Profile.module.css b/apps/cyberstorm-remix/app/settings/user/Profile/Profile.module.css
index 77e1ef4a8..ad41fe852 100644
--- a/apps/cyberstorm-remix/app/settings/user/Profile/Profile.module.css
+++ b/apps/cyberstorm-remix/app/settings/user/Profile/Profile.module.css
@@ -6,18 +6,18 @@
 .section {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
 }
 
 .line {
-  margin: var(--space--24) 0;
-  border-bottom: var(--border-width--px) solid var(--color-surface--4);
+  margin: var(--space-24) 0;
+  border-bottom: var(--border-width--px) solid var(--color-surface-4);
 }
 
 .avatarContent {
   display: flex;
   flex-direction: row;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
   align-items: center;
 }
 
diff --git a/apps/cyberstorm-remix/app/settings/user/SettingsLayout.module.css b/apps/cyberstorm-remix/app/settings/user/SettingsLayout.module.css
index 21ac03746..a4dd73520 100644
--- a/apps/cyberstorm-remix/app/settings/user/SettingsLayout.module.css
+++ b/apps/cyberstorm-remix/app/settings/user/SettingsLayout.module.css
@@ -1,24 +1,24 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
   margin: 0 var(--page-margin);
 }
 
 .tabContent {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
 }
 
 .separator {
-  border-bottom: var(--border-width--px) solid var(--color-surface--4);
+  border-bottom: var(--border-width--px) solid var(--color-surface-4);
 }
 
 .header {
   display: flex;
   flex-direction: row;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
   justify-content: space-between;
 }
 
diff --git a/apps/cyberstorm-remix/app/settings/user/Tabs.module.css b/apps/cyberstorm-remix/app/settings/user/Tabs.module.css
index 913bfebda..f042799a6 100644
--- a/apps/cyberstorm-remix/app/settings/user/Tabs.module.css
+++ b/apps/cyberstorm-remix/app/settings/user/Tabs.module.css
@@ -2,25 +2,25 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  gap: var(--space--32);
+  gap: var(--space-32);
 }
 
 .buttons {
   display: flex;
-  border-bottom: 3px solid var(--old--color-purple--5);
+  border-bottom: 3px solid var(--old--color-accent-purple-5);
 }
 
 .button {
   display: flex;
   flex: none;
   flex-direction: row;
-  gap: var(--space--12);
+  gap: var(--space-12);
   align-items: center;
   justify-content: center;
   margin-bottom: -3px;
 
-  padding: var(--space--12) var(--space--16);
-  border-bottom: 3px solid var(--old--color-purple--5);
+  padding: var(--space-12) var(--space-16);
+  border-bottom: 3px solid var(--old--color-accent-purple-5);
   color: var(--tab-color);
   background-color: transparent;
 
@@ -30,7 +30,7 @@
 .button.active {
   border-color: var(--tab-color);
 
-  --tab-color: var(--old--color-green--5);
+  --tab-color: var(--old--color-accent-green-5);
 }
 
 .button:disabled {
@@ -51,6 +51,6 @@
 
 .label {
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: 1.3;
 }
diff --git a/apps/cyberstorm-remix/app/styles/error.css b/apps/cyberstorm-remix/app/styles/error.css
index 52e21e10d..ae6e07eca 100644
--- a/apps/cyberstorm-remix/app/styles/error.css
+++ b/apps/cyberstorm-remix/app/styles/error.css
@@ -1,405 +1,407 @@
-.project-error {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space--32);
-  align-items: center;
-  justify-content: center;
-
-  --glitch-color-1: var(--old--color-cyber-green--50);
-  --glitch-color-2: var(--old--color-pink--50);
-}
-
-.project-error__description {
-  color: var(--color-text--accent);
-  font-weight: var(--font-weight-semibold);
-  line-height: 1;
-}
-
-.project-error__flavor {
-  font-weight: var(--font-weight-bold);
-  font-size: var(--space--32);
-  line-height: 1;
-  text-align: center;
-}
-
-.project-error__glitch {
-  position: relative;
-  margin-top: var(--space--32);
-  margin-bottom: var(--space--48);
-  font-weight: var(--font-weight-heavy);
-  font-size: 12rem;
-  line-height: 1;
-}
-
-.project-error__glitch::before,
-.project-error__glitch::after {
-  position: absolute;
-  z-index: -1;
-  width: 110%;
-  content: attr(data-text);
-}
-
-.project-error__glitch::before {
-  top: 10px;
-  left: 15px;
-  color: var(--glitch-color-1);
-  animation: project-error-paths 5s step-end infinite,
-    project-error-opacity 5s step-end infinite,
-    project-error-font 8s step-end infinite,
-    project-error-movement 10s step-end infinite;
-}
-
-.project-error__glitch::after {
-  top: 5px;
-  left: -10px;
-  color: var(--glitch-color-2);
-  animation: project-error-paths 5s step-end infinite,
-    project-error-opacity 5s step-end infinite,
-    project-error-font 7s step-end infinite,
-    project-error-movement 8s step-end infinite;
-}
-
-@keyframes project-error-paths {
-  0% {
-    clip-path: polygon(
-      0% 43%,
-      83% 43%,
-      83% 22%,
-      23% 22%,
-      23% 24%,
-      91% 24%,
-      91% 26%,
-      18% 26%,
-      18% 83%,
-      29% 83%,
-      29% 17%,
-      41% 17%,
-      41% 39%,
-      18% 39%,
-      18% 82%,
-      54% 82%,
-      54% 88%,
-      19% 88%,
-      19% 4%,
-      39% 4%,
-      39% 14%,
-      76% 14%,
-      76% 52%,
-      23% 52%,
-      23% 35%,
-      19% 35%,
-      19% 8%,
-      36% 8%,
-      36% 31%,
-      73% 31%,
-      73% 16%,
-      1% 16%,
-      1% 56%,
-      50% 56%,
-      50% 8%
-    );
-  }
-
-  5% {
-    clip-path: polygon(
-      0% 29%,
-      44% 29%,
-      44% 83%,
-      94% 83%,
-      94% 56%,
-      11% 56%,
-      11% 64%,
-      94% 64%,
-      94% 70%,
-      88% 70%,
-      88% 32%,
-      18% 32%,
-      18% 96%,
-      10% 96%,
-      10% 62%,
-      9% 62%,
-      9% 84%,
-      68% 84%,
-      68% 50%,
-      52% 50%,
-      52% 55%,
-      35% 55%,
-      35% 87%,
-      25% 87%,
-      25% 39%,
-      15% 39%,
-      15% 88%,
-      52% 88%
-    );
-  }
-
-  30% {
-    clip-path: polygon(
-      0% 53%,
-      93% 53%,
-      93% 62%,
-      68% 62%,
-      68% 37%,
-      97% 37%,
-      97% 89%,
-      13% 89%,
-      13% 45%,
-      51% 45%,
-      51% 88%,
-      17% 88%,
-      17% 54%,
-      81% 54%,
-      81% 75%,
-      79% 75%,
-      79% 76%,
-      38% 76%,
-      38% 28%,
-      61% 28%,
-      61% 12%,
-      55% 12%,
-      55% 62%,
-      68% 62%,
-      68% 51%,
-      0% 51%,
-      0% 92%,
-      63% 92%,
-      63% 4%,
-      65% 4%
-    );
-  }
-
-  45% {
-    clip-path: polygon(
-      0% 33%,
-      2% 33%,
-      2% 69%,
-      58% 69%,
-      58% 94%,
-      55% 94%,
-      55% 25%,
-      33% 25%,
-      33% 85%,
-      16% 85%,
-      16% 19%,
-      5% 19%,
-      5% 20%,
-      79% 20%,
-      79% 96%,
-      93% 96%,
-      93% 50%,
-      5% 50%,
-      5% 74%,
-      55% 74%,
-      55% 57%,
-      96% 57%,
-      96% 59%,
-      87% 59%,
-      87% 65%,
-      82% 65%,
-      82% 39%,
-      63% 39%,
-      63% 92%,
-      4% 92%,
-      4% 36%,
-      24% 36%,
-      24% 70%,
-      1% 70%,
-      1% 43%,
-      15% 43%,
-      15% 28%,
-      23% 28%,
-      23% 71%,
-      90% 71%,
-      90% 86%,
-      97% 86%,
-      97% 1%,
-      60% 1%,
-      60% 67%,
-      71% 67%,
-      71% 91%,
-      17% 91%,
-      17% 14%,
-      39% 14%,
-      39% 30%,
-      58% 30%,
-      58% 11%,
-      52% 11%,
-      52% 83%,
-      68% 83%
-    );
+@layer project-layout {
+  .project-error {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-32);
+    align-items: center;
+    justify-content: center;
+
+    --glitch-color-1: var(--old--color-cyber-green-50);
+    --glitch-color-2: var(--old--color-accent-pink-50);
   }
 
-  76% {
-    clip-path: polygon(
-      0% 26%,
-      15% 26%,
-      15% 73%,
-      72% 73%,
-      72% 70%,
-      77% 70%,
-      77% 75%,
-      8% 75%,
-      8% 42%,
-      4% 42%,
-      4% 61%,
-      17% 61%,
-      17% 12%,
-      26% 12%,
-      26% 63%,
-      73% 63%,
-      73% 43%,
-      90% 43%,
-      90% 67%,
-      50% 67%,
-      50% 41%,
-      42% 41%,
-      42% 46%,
-      50% 46%,
-      50% 84%,
-      96% 84%,
-      96% 78%,
-      49% 78%,
-      49% 25%,
-      63% 25%,
-      63% 14%
-    );
+  .project-error__description {
+    color: var(--color-text--accent);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1;
   }
 
-  90% {
-    clip-path: polygon(
-      0% 41%,
-      13% 41%,
-      13% 6%,
-      87% 6%,
-      87% 93%,
-      10% 93%,
-      10% 13%,
-      89% 13%,
-      89% 6%,
-      3% 6%,
-      3% 8%,
-      16% 8%,
-      16% 79%,
-      0% 79%,
-      0% 99%,
-      92% 99%,
-      92% 90%,
-      5% 90%,
-      5% 60%,
-      0% 60%,
-      0% 48%,
-      89% 48%,
-      89% 13%,
-      80% 13%,
-      80% 43%,
-      95% 43%,
-      95% 19%,
-      80% 19%,
-      80% 85%,
-      38% 85%,
-      38% 62%
-    );
+  .project-error__flavor {
+    font-weight: var(--font-weight-bold);
+    font-size: var(--space-32);
+    line-height: 1;
+    text-align: center;
   }
 
-  1%,
-  7%,
-  33%,
-  47%,
-  78%,
-  93% {
-    clip-path: none;
+  .project-error__glitch {
+    position: relative;
+    margin-top: var(--space-32);
+    margin-bottom: var(--space-48);
+    font-weight: var(--font-weight-extra-bold);
+    font-size: 12rem;
+    line-height: 1;
   }
-}
 
-@keyframes project-error-movement {
-  0% {
-    top: 0;
-    left: -20px;
+  .project-error__glitch::before,
+  .project-error__glitch::after {
+    position: absolute;
+    z-index: -1;
+    width: 110%;
+    content: attr(data-text);
   }
 
-  15% {
+  .project-error__glitch::before {
     top: 10px;
-    left: 10px;
+    left: 15px;
+    color: var(--glitch-color-1);
+    animation: project-error-paths 5s step-end infinite,
+      project-error-opacity 5s step-end infinite,
+      project-error-font 8s step-end infinite,
+      project-error-movement 10s step-end infinite;
   }
 
-  60% {
+  .project-error__glitch::after {
     top: 5px;
     left: -10px;
+    color: var(--glitch-color-2);
+    animation: project-error-paths 5s step-end infinite,
+      project-error-opacity 5s step-end infinite,
+      project-error-font 7s step-end infinite,
+      project-error-movement 8s step-end infinite;
   }
 
-  75% {
-    top: -5px;
-    left: 20px;
-  }
-
-  100% {
-    top: 10px;
-    left: 5px;
-  }
-}
-
-@keyframes project-error-opacity {
-  0% {
-    opacity: 0.1;
-  }
-
-  5% {
-    opacity: 0.7;
-  }
-
-  30% {
-    opacity: 0.4;
-  }
-
-  45% {
-    opacity: 0.6;
-  }
-
-  76% {
-    opacity: 0.4;
-  }
-
-  90% {
-    opacity: 0.8;
-  }
-
-  1%,
-  7%,
-  33%,
-  47%,
-  78%,
-  93% {
-    opacity: 0;
-  }
-}
-
-@keyframes project-error-font {
-  0% {
-    color: var(--glitch-color-1);
-    font-weight: 100;
+  @keyframes project-error-paths {
+    0% {
+      clip-path: polygon(
+        0% 43%,
+        83% 43%,
+        83% 22%,
+        23% 22%,
+        23% 24%,
+        91% 24%,
+        91% 26%,
+        18% 26%,
+        18% 83%,
+        29% 83%,
+        29% 17%,
+        41% 17%,
+        41% 39%,
+        18% 39%,
+        18% 82%,
+        54% 82%,
+        54% 88%,
+        19% 88%,
+        19% 4%,
+        39% 4%,
+        39% 14%,
+        76% 14%,
+        76% 52%,
+        23% 52%,
+        23% 35%,
+        19% 35%,
+        19% 8%,
+        36% 8%,
+        36% 31%,
+        73% 31%,
+        73% 16%,
+        1% 16%,
+        1% 56%,
+        50% 56%,
+        50% 8%
+      );
+    }
+
+    5% {
+      clip-path: polygon(
+        0% 29%,
+        44% 29%,
+        44% 83%,
+        94% 83%,
+        94% 56%,
+        11% 56%,
+        11% 64%,
+        94% 64%,
+        94% 70%,
+        88% 70%,
+        88% 32%,
+        18% 32%,
+        18% 96%,
+        10% 96%,
+        10% 62%,
+        9% 62%,
+        9% 84%,
+        68% 84%,
+        68% 50%,
+        52% 50%,
+        52% 55%,
+        35% 55%,
+        35% 87%,
+        25% 87%,
+        25% 39%,
+        15% 39%,
+        15% 88%,
+        52% 88%
+      );
+    }
+
+    30% {
+      clip-path: polygon(
+        0% 53%,
+        93% 53%,
+        93% 62%,
+        68% 62%,
+        68% 37%,
+        97% 37%,
+        97% 89%,
+        13% 89%,
+        13% 45%,
+        51% 45%,
+        51% 88%,
+        17% 88%,
+        17% 54%,
+        81% 54%,
+        81% 75%,
+        79% 75%,
+        79% 76%,
+        38% 76%,
+        38% 28%,
+        61% 28%,
+        61% 12%,
+        55% 12%,
+        55% 62%,
+        68% 62%,
+        68% 51%,
+        0% 51%,
+        0% 92%,
+        63% 92%,
+        63% 4%,
+        65% 4%
+      );
+    }
+
+    45% {
+      clip-path: polygon(
+        0% 33%,
+        2% 33%,
+        2% 69%,
+        58% 69%,
+        58% 94%,
+        55% 94%,
+        55% 25%,
+        33% 25%,
+        33% 85%,
+        16% 85%,
+        16% 19%,
+        5% 19%,
+        5% 20%,
+        79% 20%,
+        79% 96%,
+        93% 96%,
+        93% 50%,
+        5% 50%,
+        5% 74%,
+        55% 74%,
+        55% 57%,
+        96% 57%,
+        96% 59%,
+        87% 59%,
+        87% 65%,
+        82% 65%,
+        82% 39%,
+        63% 39%,
+        63% 92%,
+        4% 92%,
+        4% 36%,
+        24% 36%,
+        24% 70%,
+        1% 70%,
+        1% 43%,
+        15% 43%,
+        15% 28%,
+        23% 28%,
+        23% 71%,
+        90% 71%,
+        90% 86%,
+        97% 86%,
+        97% 1%,
+        60% 1%,
+        60% 67%,
+        71% 67%,
+        71% 91%,
+        17% 91%,
+        17% 14%,
+        39% 14%,
+        39% 30%,
+        58% 30%,
+        58% 11%,
+        52% 11%,
+        52% 83%,
+        68% 83%
+      );
+    }
+
+    76% {
+      clip-path: polygon(
+        0% 26%,
+        15% 26%,
+        15% 73%,
+        72% 73%,
+        72% 70%,
+        77% 70%,
+        77% 75%,
+        8% 75%,
+        8% 42%,
+        4% 42%,
+        4% 61%,
+        17% 61%,
+        17% 12%,
+        26% 12%,
+        26% 63%,
+        73% 63%,
+        73% 43%,
+        90% 43%,
+        90% 67%,
+        50% 67%,
+        50% 41%,
+        42% 41%,
+        42% 46%,
+        50% 46%,
+        50% 84%,
+        96% 84%,
+        96% 78%,
+        49% 78%,
+        49% 25%,
+        63% 25%,
+        63% 14%
+      );
+    }
+
+    90% {
+      clip-path: polygon(
+        0% 41%,
+        13% 41%,
+        13% 6%,
+        87% 6%,
+        87% 93%,
+        10% 93%,
+        10% 13%,
+        89% 13%,
+        89% 6%,
+        3% 6%,
+        3% 8%,
+        16% 8%,
+        16% 79%,
+        0% 79%,
+        0% 99%,
+        92% 99%,
+        92% 90%,
+        5% 90%,
+        5% 60%,
+        0% 60%,
+        0% 48%,
+        89% 48%,
+        89% 13%,
+        80% 13%,
+        80% 43%,
+        95% 43%,
+        95% 19%,
+        80% 19%,
+        80% 85%,
+        38% 85%,
+        38% 62%
+      );
+    }
+
+    1%,
+    7%,
+    33%,
+    47%,
+    78%,
+    93% {
+      clip-path: none;
+    }
   }
 
-  20% {
-    color: #fff;
-    font-weight: var(--font-weight-medium);
+  @keyframes project-error-movement {
+    0% {
+      top: 0;
+      left: -20px;
+    }
+
+    15% {
+      top: 10px;
+      left: 10px;
+    }
+
+    60% {
+      top: 5px;
+      left: -10px;
+    }
+
+    75% {
+      top: -5px;
+      left: 20px;
+    }
+
+    100% {
+      top: 10px;
+      left: 5px;
+    }
   }
 
-  50% {
-    color: var(--glitch-color-2);
-    font-weight: 300;
+  @keyframes project-error-opacity {
+    0% {
+      opacity: 0.1;
+    }
+
+    5% {
+      opacity: 0.7;
+    }
+
+    30% {
+      opacity: 0.4;
+    }
+
+    45% {
+      opacity: 0.6;
+    }
+
+    76% {
+      opacity: 0.4;
+    }
+
+    90% {
+      opacity: 0.8;
+    }
+
+    1%,
+    7%,
+    33%,
+    47%,
+    78%,
+    93% {
+      opacity: 0;
+    }
   }
 
-  60% {
-    color: #fff;
-    font-weight: var(--font-weight-bold);
+  @keyframes project-error-font {
+    0% {
+      color: var(--glitch-color-1);
+      font-weight: 100;
+    }
+
+    20% {
+      color: #fff;
+      font-weight: var(--font-weight-medium);
+    }
+
+    50% {
+      color: var(--glitch-color-2);
+      font-weight: 300;
+    }
+
+    60% {
+      color: #fff;
+      font-weight: var(--font-weight-bold);
+    }
+
+    90% {
+      color: var(--glitch-color-1);
+      font-weight: var(--font-weight-medium);
+    }
   }
 
-  90% {
-    color: var(--glitch-color-1);
-    font-weight: var(--font-weight-medium);
+  .project-error__glitch span {
+    animation: paths 5s step-end infinite;
   }
 }
-
-.project-error__glitch span {
-  animation: paths 5s step-end infinite;
-}
diff --git a/apps/cyberstorm-remix/app/styles/index.css b/apps/cyberstorm-remix/app/styles/index.css
index 137eb3622..23ba7001a 100644
--- a/apps/cyberstorm-remix/app/styles/index.css
+++ b/apps/cyberstorm-remix/app/styles/index.css
@@ -1,4 +1,5 @@
 @layer utils, components, colors, theme, theme-components, project-layout, project-overrides;
 
 @import "layout.css";
+@import "overrides.css";
 @import "error.css";
diff --git a/apps/cyberstorm-remix/app/styles/layout.css b/apps/cyberstorm-remix/app/styles/layout.css
index 40434562a..8fec63624 100644
--- a/apps/cyberstorm-remix/app/styles/layout.css
+++ b/apps/cyberstorm-remix/app/styles/layout.css
@@ -1,92 +1,100 @@
-.project-root {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-.project-root__content {
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  gap: 3rem;
-  align-items: flex-start;
-  justify-content: center;
-  width: 100%;
-  max-width: 100%;
-  padding: var(--content-padding-top-desktop) 1rem 6rem;
-}
-
-.project-root__middle-container {
-  position: relative;
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  gap: 1rem;
-  width: 100%;
-  max-width: 83.5rem;
-}
+@layer project-layout {
+  :root {
+    /* Header dimensions */
+    --header-height: 3.5rem;
+    --content-padding-top-desktop: 2rem;
+  }
 
-.project-root__side-containers {
-  position: sticky;
-  top: var(--header-height);
-  display: flex;
-  flex-basis: 0;
-  flex-direction: column;
-  flex-grow: 1;
-  gap: 2rem;
-  align-items: flex-start;
-  padding-top: 1rem;
-}
+  .project-root {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
 
-.project-root__page-header {
-  padding: 0;
-}
+  .project-root__content {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    gap: 3rem;
+    align-items: flex-start;
+    justify-content: center;
+    width: 100%;
+    max-width: 100%;
+    padding: var(--content-padding-top-desktop) 1rem 6rem;
+  }
 
-.project-root__page-body {
-  display: flex;
-  flex-direction: column;
-}
+  .project-root__middle-container {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+    max-width: 83.5rem;
+  }
 
-.project-root__layout-sidebar {
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-}
+  .project-root__side-containers {
+    position: sticky;
+    top: var(--header-height);
+    display: flex;
+    flex-basis: 0;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: 2rem;
+    align-items: flex-start;
+    padding-top: 1rem;
+  }
 
-.project-root__main {
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-}
+  .project-root__page-header {
+    padding: 0;
+  }
 
-@media (width >= 60rem) {
-  .project-root__layout-sidebar {
-    flex-flow: row wrap;
+  .project-root__page-body {
+    display: flex;
+    flex-direction: column;
   }
 
-  .project-root__sidebar {
-    flex: 0 1 16rem;
+  .project-root__layout-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
   }
 
   .project-root__main {
-    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
   }
 
-  .project-root__fullwidth {
-    flex: 0 0 100%;
-  }
+  @media (width >= 60rem) {
+    .project-root__layout-sidebar {
+      flex-flow: row wrap;
+    }
 
-  .project-root__page-header {
-    padding: 2.5rem 0;
-  }
+    .project-root__sidebar {
+      flex: 0 1 16rem;
+    }
 
-  .project-root__middle-container {
-    gap: 0;
+    .project-root__main {
+      flex: 1;
+    }
+
+    .project-root__fullwidth {
+      flex: 0 0 100%;
+    }
+
+    .project-root__page-header {
+      padding: 2.5rem 0;
+    }
+
+    .project-root__middle-container {
+      gap: 0;
+    }
   }
-}
 
-@media (width <= 92.125rem) {
-  .project-root__side-containers {
-    display: none;
+  @media (width <= 92.125rem) {
+    .project-root__side-containers {
+      display: none;
+    }
   }
 }
diff --git a/apps/cyberstorm-remix/app/styles/overrides.css b/apps/cyberstorm-remix/app/styles/overrides.css
new file mode 100644
index 000000000..b6a5cb70e
--- /dev/null
+++ b/apps/cyberstorm-remix/app/styles/overrides.css
@@ -0,0 +1,5 @@
+@layer project-overrides {
+  :root {
+    --project-not-used-token: black;
+  }
+}
diff --git a/apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.module.css b/apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.module.css
index 32f108936..34b88983c 100644
--- a/apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.module.css
+++ b/apps/cyberstorm-remix/app/tools/manifest-validator/manifestValidator.module.css
@@ -1,5 +1,5 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
 }
diff --git a/apps/cyberstorm-remix/app/tools/markdown-preview/MarkdownPreview.module.css b/apps/cyberstorm-remix/app/tools/markdown-preview/MarkdownPreview.module.css
index 0adf98447..c33c597fd 100644
--- a/apps/cyberstorm-remix/app/tools/markdown-preview/MarkdownPreview.module.css
+++ b/apps/cyberstorm-remix/app/tools/markdown-preview/MarkdownPreview.module.css
@@ -1,5 +1,5 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--48);
+  gap: var(--gap-xxxxxxxl);
 }
diff --git a/apps/cyberstorm-remix/app/tools/package-format-docs/PackageFormatDocs.module.css b/apps/cyberstorm-remix/app/tools/package-format-docs/PackageFormatDocs.module.css
index d1390fb3a..7dd7df0ec 100644
--- a/apps/cyberstorm-remix/app/tools/package-format-docs/PackageFormatDocs.module.css
+++ b/apps/cyberstorm-remix/app/tools/package-format-docs/PackageFormatDocs.module.css
@@ -1,10 +1,10 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--40);
+  gap: var(--gap-xxxxxl);
 }
 
 .greenWrap {
   height: 1rem;
-  color: var(--old--color-cyber-green--60);
+  color: var(--old--color-cyber-green-60);
 }
diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/DesktopLoginPopover.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/DesktopLoginPopover.tsx
index c4d9823c9..110c2ac6d 100644
--- a/apps/cyberstorm-remix/cyberstorm/navigation/DesktopLoginPopover.tsx
+++ b/apps/cyberstorm-remix/cyberstorm/navigation/DesktopLoginPopover.tsx
@@ -5,7 +5,6 @@ import {
   NewButton,
   NewIcon,
   NewLink,
-  NewText,
 } from "@thunderstore/cyberstorm";
 import { faArrowRightToBracket } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -21,14 +20,12 @@ export function DesktopLoginPopover() {
       trigger={
         <NewButton
           csVariant="primary"
-          csColor="purple"
-          csSize="l"
+          csSize="big"
           rootClasses={styles.loginButton}
           {...{
             popovertarget: "navAccount",
             popovertargetaction: "open",
           }}
-          csTextStyles={["fontSizeS", "fontWeightBold", "lineHeightAuto"]}
         >
           <NewIcon csMode="inline" noWrapper>
             <FontAwesomeIcon icon={faArrowRightToBracket} />
@@ -67,7 +64,7 @@ export function DesktopLoginPopover() {
         <Heading
           mode="heading"
           csLevel="2"
-          csStyleLevel="3"
+          csSize="3"
           rootClasses={styles.loginTitle}
         >
           Log in to Thunderstore
@@ -77,7 +74,6 @@ export function DesktopLoginPopover() {
             primitiveType="link"
             href={buildAuthLoginUrl({ type: "discord" })}
             rootClasses={classnames(styles.loginLink, styles.loginLinkDiscord)}
-            csTextStyles={["fontSizeS", "fontWeightBold"]}
           >
             <NewIcon csMode="inline" noWrapper>
               <FontAwesomeIcon icon={faDiscord} />
@@ -88,7 +84,6 @@ export function DesktopLoginPopover() {
             primitiveType="link"
             href={buildAuthLoginUrl({ type: "github" })}
             rootClasses={classnames(styles.loginLink, styles.loginLinkGithub)}
-            csTextStyles={["fontSizeS", "fontWeightBold"]}
           >
             <NewIcon csMode="inline" noWrapper>
               <FontAwesomeIcon icon={faGithub} />
@@ -99,7 +94,6 @@ export function DesktopLoginPopover() {
             primitiveType="link"
             href={buildAuthLoginUrl({ type: "overwolf" })}
             rootClasses={classnames(styles.loginLink, styles.loginLinkOverwolf)}
-            csTextStyles={["fontSizeS", "fontWeightBold"]}
           >
             <NewIcon csMode="inline" noWrapper>
               <OverwolfLogo />
@@ -107,15 +101,12 @@ export function DesktopLoginPopover() {
             Connect with Overwolf
           </NewLink>
         </div>
-        <NewText
-          rootClasses={styles.loginLegalText}
-          csTextStyles={["lineHeightBody", "fontSizeXS", "fontWeightRegular"]}
-        >
+        <p className={styles.loginLegalText}>
           By logging in and accessing the site you agree to{" "}
           <NewLink
             primitiveType="cyberstormLink"
             linkId="TermsOfService"
-            csVariant="tertiary"
+            csVariant="primary"
           >
             Terms and Conditions
           </NewLink>{" "}
@@ -123,11 +114,11 @@ export function DesktopLoginPopover() {
           <NewLink
             primitiveType="cyberstormLink"
             linkId="PrivacyPolicy"
-            csVariant="tertiary"
+            csVariant="primary"
           >
             Privacy Policy
           </NewLink>
-        </NewText>
+        </p>
       </div>
     </Modal>
   );
diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/DesktopUserDropdown.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/DesktopUserDropdown.tsx
index 68a01a002..c657709ae 100644
--- a/apps/cyberstorm-remix/cyberstorm/navigation/DesktopUserDropdown.tsx
+++ b/apps/cyberstorm-remix/cyberstorm/navigation/DesktopUserDropdown.tsx
@@ -6,7 +6,6 @@ import dropdownStyles from "../../../../packages/cyberstorm/src/newComponents/Dr
 import {
   Avatar,
   NewDropDown,
-  NewText,
   NewDropDownItem,
   NewDropDownDivider,
   NewLink,
@@ -28,27 +27,20 @@ export function DesktopUserDropdown(props: { user: CurrentUser }) {
       trigger={
         <AvatarButton src={avatar} username={user.username} size="small" />
       }
-      csVariant="default"
-      csColor="surface"
     >
       <NewDropDownItem rootClasses={styles.dropDownUserInfo}>
         <Avatar src={avatar} username={user.username} size="small" />
-        <NewText rootClasses={styles.dropdownUserInfoDetails}>
-          {user.username}
-        </NewText>
+        <p className={styles.dropdownUserInfoDetails}>{user.username}</p>
       </NewDropDownItem>
-      <NewDropDownDivider csVariant="default" csColor="surface" />
+      <NewDropDownDivider />
       <NewDropDownItem asChild>
         <NewLink
           primitiveType="cyberstormLink"
           linkId="Settings"
-          csVariant="default"
-          csColor="surface"
           rootClasses={classnames(
             dropdownStyles.dropdownItem,
             styles.dropDownItem
           )}
-          csTextStyles={["fontSizeS", "fontWeightRegular"]}
         >
           <NewIcon csMode="inline" noWrapper csVariant="tertiary">
             <FontAwesomeIcon icon={faCog} />
@@ -60,13 +52,10 @@ export function DesktopUserDropdown(props: { user: CurrentUser }) {
         <NewLink
           primitiveType="cyberstormLink"
           linkId="Teams"
-          csVariant="default"
-          csColor="surface"
           rootClasses={classnames(
             dropdownStyles.dropdownItem,
             styles.dropDownItem
           )}
-          csTextStyles={["fontSizeS", "fontWeightRegular"]}
         >
           <NewIcon csMode="inline" noWrapper csVariant="tertiary">
             <FontAwesomeIcon icon={faUsers} />
@@ -78,13 +67,10 @@ export function DesktopUserDropdown(props: { user: CurrentUser }) {
         <NewLink
           primitiveType="link"
           href="/logout"
-          csVariant="default"
-          csColor="surface"
           rootClasses={classnames(
             dropdownStyles.dropdownItem,
             styles.dropDownItem
           )}
-          csTextStyles={["fontSizeS", "fontWeightRegular"]}
         >
           <NewIcon csMode="inline" noWrapper csVariant="tertiary">
             <FontAwesomeIcon icon={faSignOut} />
diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.module.css b/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.module.css
index cf4cb83bc..7d1d02a83 100644
--- a/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.module.css
+++ b/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.module.css
@@ -2,12 +2,21 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-body-md);
 }
 
 .focus:not([data-highlighted]) a svg {
-  color: var(--color-tertiary);
+  color: var(--color-text-tertiary);
 }
 
 .root {
   min-width: 14rem;
 }
+
+.link {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-body-md);
+}
diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx
index cfabcafcf..993664447 100644
--- a/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx
+++ b/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx
@@ -16,22 +16,23 @@ export function DevelopersDropDown() {
     <>
       <NewDropDown
         trigger={
-          <NewButton csSize="l" csVariant="tertiary" csColor="surface">
+          <NewButton
+            csSize="big"
+            csVariant="secondary"
+            csModifiers={["subtle"]}
+          >
             Developers
             <NewIcon csMode="inline" noWrapper>
               <FontAwesomeIcon icon={faCaretDown} />
             </NewIcon>
           </NewButton>
         }
-        csVariant="default"
-        csColor="surface"
         rootClasses={styles.root}
       >
         <NewDropDownItem>
           <NewLink
             primitiveType="link"
-            csVariant="primary"
-            csTextStyles={["fontSizeS", "fontWeightRegular"]}
+            rootClasses={styles.link}
             href="/api/docs"
           >
             API Docs
@@ -40,8 +41,7 @@ export function DevelopersDropDown() {
         <NewDropDownItem>
           <NewLink
             primitiveType="link"
-            csVariant="primary"
-            csTextStyles={["fontSizeS", "fontWeightRegular"]}
+            rootClasses={styles.link}
             href="/package/create/docs/"
           >
             Package Format Docs
@@ -50,8 +50,7 @@ export function DevelopersDropDown() {
         <NewDropDownItem>
           <NewLink
             primitiveType="link"
-            csVariant="primary"
-            csTextStyles={["fontSizeS", "fontWeightRegular"]}
+            rootClasses={styles.link}
             href="/tools/manifest-v1-validator/"
           >
             Manifest Validator
@@ -60,8 +59,7 @@ export function DevelopersDropDown() {
         <NewDropDownItem>
           <NewLink
             primitiveType="link"
-            csVariant="primary"
-            csTextStyles={["fontSizeS", "fontWeightRegular"]}
+            rootClasses={styles.link}
             href="/tools/markdown-preview/"
           >
             Markdown Preview
@@ -70,10 +68,8 @@ export function DevelopersDropDown() {
         <NewDropDownItem rootClasses={styles.focus}>
           <NewLink
             primitiveType="link"
-            csVariant="primary"
-            csTextStyles={["fontSizeS", "fontWeightRegular"]}
-            href="https://github.com/thunderstore-io"
             rootClasses={styles.externalLink}
+            href="https://github.com/thunderstore-io"
           >
             Github
             <NewIcon csMode="inline" noWrapper>
diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/LoginList.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/LoginList.tsx
index 4d5f7657e..090128053 100644
--- a/apps/cyberstorm-remix/cyberstorm/navigation/LoginList.tsx
+++ b/apps/cyberstorm-remix/cyberstorm/navigation/LoginList.tsx
@@ -2,7 +2,7 @@ import { faDiscord, faGithub } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import styles from "./Navigation.module.css";
-import { Heading, NewIcon, NewLink, NewText } from "@thunderstore/cyberstorm";
+import { Heading, NewIcon, NewLink } from "@thunderstore/cyberstorm";
 import { OverwolfLogo } from "@thunderstore/cyberstorm/src/svg/svg";
 import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
 import { buildAuthLoginUrl } from "cyberstorm/utils/ThunderstoreAuth";
@@ -39,7 +39,7 @@ export function LoginList() {
       <Heading
         mode="heading"
         csLevel="2"
-        csStyleLevel="3"
+        csSize="3"
         rootClasses={styles.loginTitle}
       >
         Log in to Thunderstore
@@ -49,7 +49,6 @@ export function LoginList() {
           primitiveType="link"
           href={buildAuthLoginUrl({ type: "discord" })}
           rootClasses={classnames(styles.loginLink, styles.loginLinkDiscord)}
-          csTextStyles={["fontSizeS", "fontWeightBold"]}
         >
           <NewIcon csMode="inline" noWrapper>
             <FontAwesomeIcon icon={faDiscord} />
@@ -60,7 +59,6 @@ export function LoginList() {
           primitiveType="link"
           href={buildAuthLoginUrl({ type: "github" })}
           rootClasses={classnames(styles.loginLink, styles.loginLinkGithub)}
-          csTextStyles={["fontSizeS", "fontWeightBold"]}
         >
           <NewIcon csMode="inline" noWrapper>
             <FontAwesomeIcon icon={faGithub} />
@@ -71,7 +69,6 @@ export function LoginList() {
           primitiveType="link"
           href={buildAuthLoginUrl({ type: "overwolf" })}
           rootClasses={classnames(styles.loginLink, styles.loginLinkOverwolf)}
-          csTextStyles={["fontSizeS", "fontWeightBold"]}
         >
           <NewIcon csMode="inline" noWrapper>
             <OverwolfLogo />
@@ -79,15 +76,12 @@ export function LoginList() {
           Connect with Overwolf
         </NewLink>
       </div>
-      <NewText
-        rootClasses={styles.loginLegalText}
-        csTextStyles={["lineHeightBody", "fontSizeXS", "fontWeightRegular"]}
-      >
+      <p className={styles.loginLegalText}>
         By logging in and accessing the site you agree to{" "}
         <NewLink
           primitiveType="cyberstormLink"
           linkId="TermsOfService"
-          csVariant="tertiary"
+          csVariant="primary"
         >
           Terms and Conditions
         </NewLink>{" "}
@@ -95,11 +89,11 @@ export function LoginList() {
         <NewLink
           primitiveType="cyberstormLink"
           linkId="PrivacyPolicy"
-          csVariant="tertiary"
+          csVariant="primary"
         >
           Privacy Policy
         </NewLink>
-      </NewText>
+      </p>
     </div>
   );
 }
diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/MobileUserPopoverContent.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/MobileUserPopoverContent.tsx
index 53bcf1bda..e140a59d3 100644
--- a/apps/cyberstorm-remix/cyberstorm/navigation/MobileUserPopoverContent.tsx
+++ b/apps/cyberstorm-remix/cyberstorm/navigation/MobileUserPopoverContent.tsx
@@ -8,7 +8,6 @@ import {
   NewButton,
   NewIcon,
   NewLink,
-  NewText,
 } from "@thunderstore/cyberstorm";
 import { AvatarButton } from "@thunderstore/cyberstorm/src/components/Avatar/AvatarButton";
 import { CurrentUser } from "@thunderstore/dapper/types";
@@ -43,9 +42,9 @@ export function MobileUserPopoverContent(props: { user: CurrentUser }) {
             popovertargetaction: "close",
           }}
           aria-label="Back"
-          mode="iconButton"
-          csSize="m"
-          csVariant="tertiaryDimmed"
+          csSize="medium"
+          csVariant="secondary"
+          csModifiers={["subtle", "dimmed"]}
           icon={faLongArrowLeft}
         />
       }
@@ -54,12 +53,7 @@ export function MobileUserPopoverContent(props: { user: CurrentUser }) {
         <div className={styles.mobileNavPopover}>
           <div className={styles.accountPopoverUser}>
             <Avatar src={avatar} username={user.username} size="small" />
-            <NewText
-              rootClasses={styles.dropdownUserInfoDetails}
-              csTextStyles={["fontSizeM", "fontWeightBold"]}
-            >
-              {user.username}
-            </NewText>
+            <p className={styles.dropdownUserInfoDetails}>{user.username}</p>
           </div>
           <NewLink
             primitiveType="cyberstormLink"
diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.module.css b/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.module.css
index 134d647a1..2d9a9f5ba 100644
--- a/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.module.css
+++ b/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.module.css
@@ -8,12 +8,12 @@
   top: 0;
   z-index: 99999;
   display: flex;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
   align-items: center;
   justify-content: space-between;
   width: 100%;
   height: var(--header-height);
-  padding: 0 var(--space--12);
+  padding: 0 var(--space-12);
   background: var(--body-bg-color-a);
   box-shadow: 0 1px 10px 0 var(--body-bg-color);
   backdrop-filter: blur(10px);
@@ -21,7 +21,7 @@
 
 .item {
   display: flex;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
   align-items: center;
 }
 
@@ -36,30 +36,39 @@
   width: 1.655rem;
   height: 1.463rem;
   margin: 0 0.75rem;
+  color: var(--color-cyber-green-7);
+}
+
+.logoWrapper:hover {
+  color: var(--color-cyber-green-9);
 }
 
 .dropDownItem {
   display: flex;
-  gap: var(--space--16);
+  gap: var(--space-16);
   align-items: center;
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-body-md);
 }
 
 .dropDownItem[data-highlighted] svg,
 .dropDownItem[data-highlighted],
 .dropDownItem {
-  color: var(--color-primary);
+  color: var(--color-text-primary);
 }
 
 .dropDownUserInfo {
   display: flex;
-  gap: var(--gap--16);
-  padding: var(--space--6) var(--space--16);
+  gap: var(--gap-md);
+  padding: var(--space-6) var(--space-16);
 }
 
 .dropdownUserInfoDetails {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-body-lg);
 }
 
 .mobileNavRoot {
@@ -71,12 +80,12 @@
   align-items: center;
   align-self: stretch;
   justify-content: space-between;
-  color: var(--color-primary);
   background: transparent;
 }
 
 .mobileNavMenuDevelopersButtonIcon {
   height: 0.875rem;
+  color: var(--color-text-tertiary);
 }
 
 .mobileNavItem {
@@ -84,7 +93,7 @@
   flex-direction: column;
   flex-grow: 1;
   align-items: center;
-  color: var(--color-tertiary);
+  color: var(--color-text-tertiary);
   font-weight: 400;
   font-size: 0.75rem;
   line-height: 1.2rem;
@@ -95,11 +104,11 @@ button.mobileNavItem {
 }
 
 .mobileNavItem:active {
-  color: var(--color-cyber-green--5);
+  color: var(--color-cyber-green-5);
 }
 
 .mobileNavItem:hover {
-  color: var(--color-secondary);
+  color: var(--color-text-secondary);
 }
 
 .mobileNavItemIcon {
@@ -112,6 +121,9 @@ button.mobileNavItem {
   align-items: center;
   align-self: stretch;
   padding: 1rem;
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-body-lg);
 }
 
 .accountPopoverUser {
@@ -179,6 +191,8 @@ button.mobileNavItem {
   padding: 0.75rem 3rem 0.75rem 1rem;
   border-radius: 0.5rem;
   color: #f5f5f6;
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-body-md);
 }
 
 .loginLinkMobile {
@@ -189,6 +203,8 @@ button.mobileNavItem {
   padding: 0.75rem 1rem;
   border-radius: 0.5rem;
   color: #f5f5f6;
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-body-md);
 }
 
 .loginLinkDiscord {
@@ -204,11 +220,18 @@ button.mobileNavItem {
 }
 
 .loginLegalText {
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-body-sm);
+  line-height: var(--line-height-lg);
   text-align: center;
 
   --text-color: #8683be;
 }
 
+.loginLegalTextLinks {
+  color: var(--color-text-tertiary);
+}
+
 .mobileMenu {
   display: none;
 }
@@ -238,12 +261,15 @@ button.mobileNavItem {
 }
 
 .getAppButton {
+  height: 2.25rem;
   padding: 0.75rem 0.812rem;
 }
 
 .loginButton {
   height: 2.25rem !important;
   padding: 0.75rem !important;
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-body-md);
 }
 
 .headerRightSide {
@@ -254,19 +280,30 @@ button.mobileNavItem {
 .divider {
   align-self: stretch;
   height: 1px;
-  margin: var(--space--16) var(--space--8);
-  background: var(--color-surface--7);
+  margin: var(--space-16) var(--space-8);
+  background: var(--color-surface-7);
 }
 
 .navMenuItem {
   display: flex;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
   align-items: center;
   align-self: stretch;
-  padding: var(--space--16);
-  border-radius: var(--border-radius--8);
+  padding: var(--space-16);
+  border-radius: var(--radius-md);
+  color: var(--color-text-primary);
 }
 
 .navMenuItem:hover {
-  background: var(--color-surface--9);
+  background: var(--color-surface-9);
+}
+
+.navMenuItemFirst {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-body-lg);
+}
+
+.navMenuItemSecond {
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-body-md);
 }
diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.tsx
index 0313c864c..6bba59abb 100644
--- a/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.tsx
+++ b/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.tsx
@@ -13,7 +13,6 @@ import {
   NewLink,
   NewIcon,
   Avatar,
-  NewText,
   Heading,
   NewButton,
 } from "@thunderstore/cyberstorm";
@@ -48,9 +47,8 @@ export function Navigation(props: {
             primitiveType="cyberstormLink"
             linkId="Index"
             rootClasses={styles.logoWrapper}
-            csVariant="default"
-            csColor="cyber-green"
             aria-label="Home"
+            csVariant="cyber"
           >
             <NewIcon noWrapper>
               <ThunderstoreLogo />
@@ -59,9 +57,9 @@ export function Navigation(props: {
           <LinkButton
             primitiveType="cyberstormLink"
             linkId="Communities"
-            csSize="l"
-            csColor="surface-alpha"
-            csVariant="tertiary"
+            csSize="big"
+            csVariant="secondary"
+            csModifiers={["subtle"]}
           >
             Communities
           </LinkButton>
@@ -71,8 +69,7 @@ export function Navigation(props: {
           <LinkButton
             primitiveType="link"
             href="https://www.overwolf.com/app/Thunderstore-Thunderstore_Mod_Manager"
-            csSize="s"
-            csColor="cyber-green"
+            csSize="medium"
             csVariant="accent"
             rootClasses={styles.getAppButton}
             aria-label="Get Thunderstore Mod Manager App"
@@ -140,9 +137,7 @@ export function MobileNavigationMenu() {
         <NewLink
           primitiveType="cyberstormLink"
           linkId="Communities"
-          rootClasses={styles.navMenuItem}
-          csVariant="primary"
-          csTextStyles={["fontSizeM", "fontWeightBold", "lineHeightAuto"]}
+          rootClasses={classnames(styles.navMenuItem, styles.navMenuItemFirst)}
         >
           Communities
         </NewLink>
@@ -155,17 +150,14 @@ export function MobileNavigationMenu() {
                 popovertargetaction: "open",
               }}
               className={classnames(
-                "fontSizeM",
-                "fontWeightBold",
-                "lineHeightAuto",
                 styles.navMenuItem,
-                styles.mobileNavMenuDevelopersButton
+                styles.mobileNavMenuDevelopersButton,
+                styles.navMenuItemFirst
               )}
             >
               Developers
               <NewIcon
                 csMode="inline"
-                csVariant="tertiary"
                 wrapperClasses={styles.mobileNavMenuDevelopersButtonIcon}
               >
                 <FontAwesomeIcon icon={faCaretRight} />
@@ -179,8 +171,9 @@ export function MobileNavigationMenu() {
                 popovertargetaction: "close",
               }}
               aria-label="Back to previous menu"
-              csSize="m"
-              csVariant="tertiaryDimmed"
+              csSize="medium"
+              csVariant="secondary"
+              csModifiers={["subtle", "dimmed"]}
               icon={faLongArrowLeft}
             />
           }
@@ -189,45 +182,50 @@ export function MobileNavigationMenu() {
             <NewLink
               primitiveType="link"
               href="/api/docs"
-              csVariant="primary"
-              csTextStyles={["fontSizeM", "fontWeightBold", "lineHeightAuto"]}
-              rootClasses={styles.navMenuItem}
+              rootClasses={classnames(
+                styles.navMenuItem,
+                styles.navMenuItemFirst
+              )}
             >
               API Docs
             </NewLink>
             <NewLink
               primitiveType="link"
               href="https://github.com/thunderstore-io"
-              csVariant="primary"
-              csTextStyles={["fontSizeM", "fontWeightBold", "lineHeightAuto"]}
-              rootClasses={styles.navMenuItem}
+              rootClasses={classnames(
+                styles.navMenuItem,
+                styles.navMenuItemFirst
+              )}
             >
               GitHub
             </NewLink>
             <NewLink
               primitiveType="link"
               href="/package/create/docs/"
-              csVariant="primary"
-              csTextStyles={["fontSizeM", "fontWeightBold", "lineHeightAuto"]}
-              rootClasses={styles.navMenuItem}
+              rootClasses={classnames(
+                styles.navMenuItem,
+                styles.navMenuItemFirst
+              )}
             >
               Package Format Docs
             </NewLink>
             <NewLink
               primitiveType="link"
               href="/tools/markdown-preview/"
-              csVariant="primary"
-              csTextStyles={["fontSizeM", "fontWeightBold", "lineHeightAuto"]}
-              rootClasses={styles.navMenuItem}
+              rootClasses={classnames(
+                styles.navMenuItem,
+                styles.navMenuItemFirst
+              )}
             >
               Markdown Preview
             </NewLink>
             <NewLink
               primitiveType="link"
               href="/tools/manifest-v1-validator/"
-              csVariant="primary"
-              csTextStyles={["fontSizeM", "fontWeightBold", "lineHeightAuto"]}
-              rootClasses={styles.navMenuItem}
+              rootClasses={classnames(
+                styles.navMenuItem,
+                styles.navMenuItemFirst
+              )}
             >
               Manifest Validator
             </NewLink>
@@ -236,28 +234,22 @@ export function MobileNavigationMenu() {
         <div className={styles.divider} />
         <NewLink
           primitiveType="link"
-          csVariant="primary"
           href="https://pages.thunderstore.io/p/contact-us"
-          csTextStyles={["fontSizeS", "fontWeightRegular", "lineHeightAuto"]}
-          rootClasses={styles.navMenuItem}
+          rootClasses={classnames(styles.navMenuItem, styles.navMenuItemSecond)}
         >
           Contact Us
         </NewLink>
         <NewLink
           primitiveType="link"
-          csVariant="primary"
           href="https://pages.thunderstore.io/p/privacy-policy"
-          csTextStyles={["fontSizeS", "fontWeightRegular", "lineHeightAuto"]}
-          rootClasses={styles.navMenuItem}
+          rootClasses={classnames(styles.navMenuItem, styles.navMenuItemSecond)}
         >
           Privacy Policy
         </NewLink>
         <NewLink
           primitiveType="link"
-          csVariant="primary"
           href="https://blog.thunderstore.io/"
-          csTextStyles={["fontSizeS", "fontWeightRegular", "lineHeightAuto"]}
-          rootClasses={styles.navMenuItem}
+          rootClasses={classnames(styles.navMenuItem, styles.navMenuItemSecond)}
         >
           News
         </NewLink>
@@ -276,12 +268,7 @@ export function MobileUserPopoverContent(props: { user?: CurrentUser }) {
         <div className={styles.mobileNavPopover}>
           <div className={styles.accountPopoverUser}>
             <Avatar src={avatar} username={user.username} size="small" />
-            <NewText
-              rootClasses={styles.dropdownUserInfoDetails}
-              csTextStyles={["fontSizeM", "fontWeightBold"]}
-            >
-              {user.username}
-            </NewText>
+            <p className={styles.dropdownUserInfoDetails}>{user.username}</p>
           </div>
           {/* <NewLink
             primitiveType="cyberstormLink"
@@ -310,9 +297,7 @@ export function MobileUserPopoverContent(props: { user?: CurrentUser }) {
           <NewLink
             primitiveType="link"
             href="/logout"
-            csVariant="primary"
             rootClasses={styles.accountPopoverItem}
-            csTextStyles={["fontSizeM", "fontWeightRegular", "lineHeightAuto"]}
           >
             <NewIcon csMode="inline" noWrapper>
               <FontAwesomeIcon icon={faSignOut} />
@@ -351,7 +336,7 @@ export function MobileUserPopoverContent(props: { user?: CurrentUser }) {
           <Heading
             mode="heading"
             csLevel="2"
-            csStyleLevel="3"
+            csSize="3"
             rootClasses={styles.loginTitle}
           >
             Log in to Thunderstore
@@ -364,7 +349,6 @@ export function MobileUserPopoverContent(props: { user?: CurrentUser }) {
                 styles.loginLinkMobile,
                 styles.loginLinkDiscord
               )}
-              csTextStyles={["fontSizeS", "fontWeightBold"]}
             >
               <NewIcon csMode="inline" noWrapper>
                 <FontAwesomeIcon icon={faDiscord} />
@@ -378,7 +362,6 @@ export function MobileUserPopoverContent(props: { user?: CurrentUser }) {
                 styles.loginLinkMobile,
                 styles.loginLinkGithub
               )}
-              csTextStyles={["fontSizeS", "fontWeightBold"]}
             >
               <NewIcon csMode="inline" noWrapper>
                 <FontAwesomeIcon icon={faGithub} />
@@ -392,7 +375,6 @@ export function MobileUserPopoverContent(props: { user?: CurrentUser }) {
                 styles.loginLinkMobile,
                 styles.loginLinkOverwolf
               )}
-              csTextStyles={["fontSizeS", "fontWeightBold"]}
             >
               <NewIcon csMode="inline" noWrapper>
                 <OverwolfLogo />
@@ -400,15 +382,12 @@ export function MobileUserPopoverContent(props: { user?: CurrentUser }) {
               Connect with Overwolf
             </NewLink>
           </div>
-          <NewText
-            rootClasses={styles.loginLegalText}
-            csTextStyles={["lineHeightBody", "fontSizeXS", "fontWeightRegular"]}
-          >
+          <p className={styles.loginLegalText}>
             By logging in and accessing the site you agree to{" "}
             <NewLink
               primitiveType="cyberstormLink"
               linkId="TermsOfService"
-              csVariant="tertiary"
+              rootClasses={styles.loginLegalTextLinks}
             >
               Terms and Conditions
             </NewLink>{" "}
@@ -416,11 +395,11 @@ export function MobileUserPopoverContent(props: { user?: CurrentUser }) {
             <NewLink
               primitiveType="cyberstormLink"
               linkId="PrivacyPolicy"
-              csVariant="tertiary"
+              rootClasses={styles.loginLegalTextLinks}
             >
               Privacy Policy
             </NewLink>
-          </NewText>
+          </p>
         </div>
       )}
     </Menu>
diff --git a/apps/cyberstorm-storybook/.storybook/preview.js b/apps/cyberstorm-storybook/.storybook/preview.js
index aadc0e17a..8fc36b0ab 100644
--- a/apps/cyberstorm-storybook/.storybook/preview.js
+++ b/apps/cyberstorm-storybook/.storybook/preview.js
@@ -2,6 +2,8 @@ import React from "react";
 
 import { CyberstormProviders, LinkingProvider } from "@thunderstore/cyberstorm";
 import "@thunderstore/cyberstorm-styles";
+import "@thunderstore/cyberstorm-theme";
+import "./storybook.css";
 import { LinkLibrary } from "../LinkLibrary";
 
 export const parameters = {
diff --git a/apps/cyberstorm-storybook/.storybook/storybook.css b/apps/cyberstorm-storybook/.storybook/storybook.css
new file mode 100644
index 000000000..73d0f6d2e
--- /dev/null
+++ b/apps/cyberstorm-storybook/.storybook/storybook.css
@@ -0,0 +1 @@
+@layer utils, components, colors, theme, theme-components;
diff --git a/apps/cyberstorm-storybook/stories/components/Tooltip.stories.tsx b/apps/cyberstorm-storybook/stories/components/Tooltip.stories.tsx
index d34810097..84e331acc 100644
--- a/apps/cyberstorm-storybook/stories/components/Tooltip.stories.tsx
+++ b/apps/cyberstorm-storybook/stories/components/Tooltip.stories.tsx
@@ -12,9 +12,9 @@ const Template: StoryFn<typeof Tooltip> = (args) => (
     style={{
       display: "flex",
       flexDirection: "column",
-      gap: "var(--gap--4)",
-      backgroundColor: "var(--old--color-cyber-green--40)",
-      padding: "var(--space--16)",
+      gap: "var(--gap-xxs)",
+      backgroundColor: "var(--old--color-cyber-green-40)",
+      padding: "var(--space-16)",
     }}
   >
     <div>
diff --git a/apps/cyberstorm-storybook/stories/newComponents/Button.stories.tsx b/apps/cyberstorm-storybook/stories/newComponents/Button.stories.tsx
index d807c3b33..847700399 100644
--- a/apps/cyberstorm-storybook/stories/newComponents/Button.stories.tsx
+++ b/apps/cyberstorm-storybook/stories/newComponents/Button.stories.tsx
@@ -3,7 +3,14 @@ import { NewButton, NewIcon } from "@thunderstore/cyberstorm";
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
-import { colorsList } from "@thunderstore/cyberstorm/src/primitiveComponents/utils/utils";
+import {
+  ButtonModifiersList,
+  ButtonSizesList,
+  ButtonVariantsList,
+  IconButtonModifiersList,
+  IconButtonSizesList,
+  IconButtonVariantsList,
+} from "@thunderstore/cyberstorm-theme/src/components";
 
 const meta = {
   title: "Button",
@@ -12,40 +19,18 @@ const meta = {
 
 const defaultArgs = {};
 
-const buttonVariants = [
-  "default",
-  "defaultPeek",
-  "primary",
-  "secondary",
-  "tertiary",
-  "minimal",
-  "accent",
-  "special",
-] as const;
-const buttonSizes = ["xs", "s", "m", "l"] as const;
-const IconButtonVariants = [
-  "default",
-  "defaultPeek",
-  "primary",
-  "secondary",
-  "tertiary",
-  "tertiaryDimmed",
-  "minimal",
-] as const;
-const IconButtonSizes = ["xs", "s", "m"] as const;
-
 const Template: StoryFn<typeof NewButton> = () => {
-  const Buttons = buttonSizes.map((size) => {
-    const variantBlock = buttonVariants.map((variant) => {
-      const colorBlock = colorsList.map((color) => {
+  const Buttons = ButtonSizesList.map((size) => {
+    const variantBlock = ButtonVariantsList.map((variant) => {
+      const modifierBlock = ButtonModifiersList.map((modifier) => {
         return (
           <NewButton
-            key={`${size}-${variant}-${color}`}
+            key={`${size}-${variant}-${modifier}`}
             csVariant={variant}
             csSize={size}
-            csColor={color}
+            csModifiers={[modifier]}
           >
-            {size}-{variant}-{color}
+            {size}-{variant}-{modifier}
             <NewIcon csMode={"inline"} noWrapper>
               <FontAwesomeIcon icon={faChevronDown} />
             </NewIcon>
@@ -61,7 +46,17 @@ const Template: StoryFn<typeof NewButton> = () => {
             gap: "0.5rem",
           }}
         >
-          {colorBlock}
+          <NewButton
+            key={`${size}-${variant}-noModifier`}
+            csVariant={variant}
+            csSize={size}
+          >
+            {size}-{variant}-noModifier
+            <NewIcon csMode={"inline"} noWrapper>
+              <FontAwesomeIcon icon={faChevronDown} />
+            </NewIcon>
+          </NewButton>
+          {modifierBlock}
         </div>
       );
     });
@@ -91,15 +86,15 @@ const Template: StoryFn<typeof NewButton> = () => {
     </div>
   );
 
-  const IconButtons = IconButtonSizes.map((size) => {
-    const variantBlock = IconButtonVariants.map((variant) => {
-      const colorBlock = colorsList.map((color) => {
+  const IconButtons = IconButtonSizesList.map((size) => {
+    const variantBlock = IconButtonVariantsList.map((variant) => {
+      const modifierBlock = IconButtonModifiersList.map((modifier) => {
         return (
           <NewButton
-            key={`${size}-${variant}-${color}`}
+            key={`${size}-${variant}-${modifier}`}
             csVariant={variant}
             csSize={size}
-            csColor={color}
+            csModifiers={[modifier]}
             icon={faChevronDown}
           />
         );
@@ -113,7 +108,13 @@ const Template: StoryFn<typeof NewButton> = () => {
             gap: "0.5rem",
           }}
         >
-          {colorBlock}
+          <NewButton
+            key={`${size}-${variant}-noModifier`}
+            csVariant={variant}
+            csSize={size}
+            icon={faChevronDown}
+          />
+          {modifierBlock}
         </div>
       );
     });
@@ -154,67 +155,6 @@ const Template: StoryFn<typeof NewButton> = () => {
     >
       {buttonOptions}
       {iconButtonOptions}
-      <NewButton>
-        default
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </NewButton>
-      <NewButton tooltipText="tooltip text">
-        tooltipDefault
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </NewButton>
-      <NewButton csVariant="primary">
-        primary
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </NewButton>
-      <NewButton csVariant="tertiary" csColor="surface">
-        tertiary
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </NewButton>
-      <NewButton csVariant="accent">
-        accent
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </NewButton>
-      <NewButton csVariant="default" csColor="green">
-        success
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </NewButton>
-      <NewButton csVariant="default" csColor="yellow">
-        warning
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </NewButton>
-      <NewButton csVariant="default" csColor="red">
-        danger
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </NewButton>
-      <NewButton csVariant="special">
-        specialGreen
-        <NewIcon csMode={"inline"} noWrapper>
-          <FontAwesomeIcon icon={faChevronDown} />
-        </NewIcon>
-      </NewButton>
-      <NewButton icon={faChevronDown} csVariant="default" />
-      <NewButton icon={faChevronDown} csVariant="defaultPeek" />
-      <NewButton icon={faChevronDown} csVariant="primary" />
-      <NewButton icon={faChevronDown} csVariant="secondary" />
-      <NewButton icon={faChevronDown} csVariant="tertiary" />
-      <NewButton icon={faChevronDown} csVariant="tertiaryDimmed" />
-      <NewButton icon={faChevronDown} csVariant="minimal" />
     </div>
   );
 };
diff --git a/apps/cyberstorm-storybook/stories/newComponents/Container.stories.tsx b/apps/cyberstorm-storybook/stories/newComponents/Container.stories.tsx
deleted file mode 100644
index 62d93e5b5..000000000
--- a/apps/cyberstorm-storybook/stories/newComponents/Container.stories.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { StoryFn, Meta } from "@storybook/react";
-import { Container, NewIcon } from "@thunderstore/cyberstorm";
-import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSearch } from "@fortawesome/free-solid-svg-icons";
-
-const meta = {
-  title: "Container",
-  component: Container,
-} as Meta<typeof Container>;
-
-const Template: StoryFn<typeof Container> = () => (
-  <Container
-    style={{ width: "100px", height: "100px" }}
-    csColor="orange"
-    csVariant="default"
-    csTextStyles={["fontSizeL", "fontFamilyHubot", "fontWeightBold"]}
-  >
-    <NewIcon>
-      <FontAwesomeIcon icon={faSearch} />
-    </NewIcon>
-    Test Style System Check
-  </Container>
-);
-
-const ReferenceContainer = Template.bind({});
-ReferenceContainer.args = {};
-
-export { meta as default, ReferenceContainer };
diff --git a/apps/cyberstorm-storybook/stories/newComponents/DropDown.stories.tsx b/apps/cyberstorm-storybook/stories/newComponents/DropDown.stories.tsx
index bd4be567b..0bc904fd8 100644
--- a/apps/cyberstorm-storybook/stories/newComponents/DropDown.stories.tsx
+++ b/apps/cyberstorm-storybook/stories/newComponents/DropDown.stories.tsx
@@ -25,7 +25,7 @@ const defaultArgs = {
   trigger: (
     <NewButton csVariant="default" csColor="red">
       Developers
-      <NewIcon csVariant="default" csColor="cyber-green">
+      <NewIcon csVariant="accent">
         <FontAwesomeIcon icon={faChevronDown} />
       </NewIcon>
     </NewButton>
@@ -44,11 +44,10 @@ const children: ReactElement = (
       <NewLink
         primitiveType="link"
         csVariant="primary"
-        csTextStyles={["fontSizeS", "fontWeightRegular"]}
         href="https://github.com/thunderstore-io"
       >
         Github
-        <NewIcon csMode="inline" csVariant="default" csColor="red">
+        <NewIcon csMode="inline" csVariant="danger">
           <FontAwesomeIcon icon={faThumbtack} />
         </NewIcon>
       </NewLink>
@@ -56,12 +55,7 @@ const children: ReactElement = (
     <NewDropDownItem>
       <NewButton csVariant="special" style={{ minWidth: "100%" }} key={3}>
         Nabbula
-        <NewIcon
-          csMode="inline"
-          noWrapper
-          csVariant="default"
-          csColor="cyber-green"
-        >
+        <NewIcon csMode="inline" noWrapper csVariant="cyber">
           <FontAwesomeIcon icon={faSkull} />
         </NewIcon>
       </NewButton>
diff --git a/apps/cyberstorm-storybook/stories/newComponents/Heading.stories.tsx b/apps/cyberstorm-storybook/stories/newComponents/Heading.stories.tsx
index ecae009b3..8c96cf2f9 100644
--- a/apps/cyberstorm-storybook/stories/newComponents/Heading.stories.tsx
+++ b/apps/cyberstorm-storybook/stories/newComponents/Heading.stories.tsx
@@ -19,7 +19,7 @@ const Template: StoryFn<typeof Heading> = (args) => {
           {...args}
           key={`${level}-${styleLevel}`}
           csLevel={level}
-          csStyleLevel={styleLevel}
+          csSize={styleLevel}
         >
           Test Heading
         </Heading>
diff --git a/apps/cyberstorm-storybook/stories/newComponents/LinkButton.stories.tsx b/apps/cyberstorm-storybook/stories/newComponents/LinkButton.stories.tsx
index 51c60306c..8f1423381 100644
--- a/apps/cyberstorm-storybook/stories/newComponents/LinkButton.stories.tsx
+++ b/apps/cyberstorm-storybook/stories/newComponents/LinkButton.stories.tsx
@@ -56,8 +56,8 @@ const Template: StoryFn<typeof LinkButton> = (args) => (
         </NewIcon>
       </LinkButton>
       <LinkButton
-        csVariant="tertiary"
-        csColor="surface"
+        csVariant="secondary"
+        csModifiers={["subtle"]}
         {...args}
         primitiveType="link"
         href="https://example.com"
@@ -79,8 +79,7 @@ const Template: StoryFn<typeof LinkButton> = (args) => (
         </NewIcon>
       </LinkButton>
       <LinkButton
-        csVariant="default"
-        csColor="green"
+        csVariant="success"
         {...args}
         primitiveType="link"
         href="https://example.com"
@@ -91,8 +90,7 @@ const Template: StoryFn<typeof LinkButton> = (args) => (
         </NewIcon>
       </LinkButton>
       <LinkButton
-        csVariant="default"
-        csColor="yellow"
+        csVariant="warning"
         {...args}
         primitiveType="link"
         href="https://example.com"
@@ -103,8 +101,7 @@ const Template: StoryFn<typeof LinkButton> = (args) => (
         </NewIcon>
       </LinkButton>
       <LinkButton
-        csVariant="default"
-        csColor="red"
+        csVariant="danger"
         {...args}
         primitiveType="link"
         href="https://example.com"
@@ -163,8 +160,8 @@ const Template: StoryFn<typeof LinkButton> = (args) => (
         </NewIcon>
       </LinkButton>
       <LinkButton
-        csVariant="tertiary"
-        csColor="surface"
+        csVariant="secondary"
+        csModifiers={["subtle"]}
         {...args}
         primitiveType="cyberstormLink"
         linkId="Communities"
@@ -186,8 +183,7 @@ const Template: StoryFn<typeof LinkButton> = (args) => (
         </NewIcon>
       </LinkButton>
       <LinkButton
-        csVariant="default"
-        csColor="green"
+        csVariant="success"
         {...args}
         primitiveType="cyberstormLink"
         linkId="Communities"
@@ -198,8 +194,7 @@ const Template: StoryFn<typeof LinkButton> = (args) => (
         </NewIcon>
       </LinkButton>
       <LinkButton
-        csVariant="default"
-        csColor="yellow"
+        csVariant="warning"
         {...args}
         primitiveType="cyberstormLink"
         linkId="Communities"
@@ -210,8 +205,7 @@ const Template: StoryFn<typeof LinkButton> = (args) => (
         </NewIcon>
       </LinkButton>
       <LinkButton
-        csVariant="default"
-        csColor="red"
+        csVariant="danger"
         {...args}
         primitiveType="cyberstormLink"
         linkId="Communities"
diff --git a/apps/cyberstorm-storybook/stories/newComponents/List.stories.tsx b/apps/cyberstorm-storybook/stories/newComponents/List.stories.tsx
deleted file mode 100644
index 1f3a62664..000000000
--- a/apps/cyberstorm-storybook/stories/newComponents/List.stories.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { StoryFn, Meta } from "@storybook/react";
-import { List, NewLink } from "@thunderstore/cyberstorm";
-import React from "react";
-
-const meta = {
-  title: "List",
-  component: List.Root,
-} as Meta<typeof List.Root>;
-
-const defaultArgs = {};
-
-const Template: StoryFn<typeof List> = () => {
-  return (
-    <List.Root csTextStyles={["lineHeightBody", "fontSizeS"]}>
-      <List.ListItem>
-        <NewLink primitiveType="link" href="/api/docs" csVariant="accent">
-          API Documentation
-        </NewLink>
-      </List.ListItem>
-      <List.ListItem>
-        <NewLink
-          primitiveType="link"
-          href="/package/create/docs/"
-          csVariant="accent"
-        >
-          Package Format Docs
-        </NewLink>
-      </List.ListItem>
-      <List.ListItem>
-        <NewLink
-          primitiveType="link"
-          href="/tools/manifest-v1-validator/"
-          csVariant="accent"
-        >
-          Manifest Validator
-        </NewLink>
-      </List.ListItem>
-      <List.ListItem>
-        <NewLink
-          primitiveType="link"
-          href="/tools/markdown-preview/"
-          csVariant="accent"
-        >
-          Markdown Preview
-        </NewLink>
-      </List.ListItem>
-      <List.ListItem>
-        <NewLink
-          primitiveType="link"
-          href="https://github.com/thunderstore-io"
-          csVariant="accent"
-        >
-          GitHub
-        </NewLink>
-      </List.ListItem>
-    </List.Root>
-  );
-};
-
-const ReferenceList = Template.bind({});
-ReferenceList.args = defaultArgs;
-
-export { meta as default, ReferenceList };
diff --git a/apps/cyberstorm-storybook/stories/newComponents/Tag.stories.tsx b/apps/cyberstorm-storybook/stories/newComponents/Tag.stories.tsx
index 21488b44b..e00ef5618 100644
--- a/apps/cyberstorm-storybook/stories/newComponents/Tag.stories.tsx
+++ b/apps/cyberstorm-storybook/stories/newComponents/Tag.stories.tsx
@@ -1,140 +1,103 @@
 import { StoryFn, Meta } from "@storybook/react";
-import { NewIcon, NewTag } from "@thunderstore/cyberstorm";
+import { NewTag, NewIcon } from "@thunderstore/cyberstorm";
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faTag, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import {
+  TagModifiersList,
+  TagSizesList,
+  TagVariantsList,
+} from "@thunderstore/cyberstorm-theme/src/components";
 
 const meta = {
   title: "Tag",
   component: NewTag,
 } as Meta<typeof NewTag>;
 
-const Template: StoryFn<typeof NewTag> = (args) => (
-  <div
-    style={{
-      display: "flex",
-      gap: "0.25em",
-      flexDirection: "column",
-      width: "3rem",
-    }}
-  >
-    <div style={{ display: "flex", gap: "0.25em" }}>
-      <NewTag {...args} csVariant="default" csColor="surface" hoverable />
-      <NewTag {...args} csVariant="default" csColor="surface" hoverable dark />
-      <NewTag {...args} csVariant="default" csColor="surface" />
-      <NewTag {...args} csVariant="default" csColor="surface" dark />
-    </div>
-    <div style={{ display: "flex", gap: "0.25em" }}>
-      <NewTag {...args} csVariant="default" csColor="surface-alpha" hoverable />
-      <NewTag
-        {...args}
-        csVariant="default"
-        csColor="surface-alpha"
-        hoverable
-        dark
-      />
-      <NewTag {...args} csVariant="default" csColor="surface-alpha" />
-      <NewTag {...args} csVariant="default" csColor="surface-alpha" dark />
-    </div>
-    <div style={{ display: "flex", gap: "0.25em" }}>
-      <NewTag {...args} csVariant="default" csColor="cyber-green" hoverable />
-      <NewTag
-        {...args}
-        csVariant="default"
-        csColor="cyber-green"
-        hoverable
-        dark
-      />
-      <NewTag {...args} csVariant="default" csColor="cyber-green" />
-      <NewTag {...args} csVariant="default" csColor="cyber-green" dark />
-    </div>
-    <div style={{ display: "flex", gap: "0.25em" }}>
-      <NewTag {...args} csVariant="default" csColor="green" hoverable />
-      <NewTag {...args} csVariant="default" csColor="green" hoverable dark />
-      <NewTag {...args} csVariant="default" csColor="green" />
-      <NewTag {...args} csVariant="default" csColor="green" dark />
-    </div>
-    <div style={{ display: "flex", gap: "0.25em" }}>
-      <NewTag {...args} csVariant="default" csColor="yellow" hoverable />
-      <NewTag {...args} csVariant="default" csColor="yellow" hoverable dark />
-      <NewTag {...args} csVariant="default" csColor="yellow" />
-      <NewTag {...args} csVariant="default" csColor="yellow" dark />
-    </div>
-    <div style={{ display: "flex", gap: "0.25em" }}>
-      <NewTag {...args} csVariant="default" csColor="blue" hoverable />
-      <NewTag {...args} csVariant="default" csColor="blue" hoverable dark />
-      <NewTag {...args} csVariant="default" csColor="blue" />
-      <NewTag {...args} csVariant="default" csColor="blue" dark />
-    </div>
-    <div style={{ display: "flex", gap: "0.25em" }}>
-      <NewTag {...args} csVariant="default" csColor="red" hoverable />
-      <NewTag {...args} csVariant="default" csColor="red" hoverable dark />
-      <NewTag {...args} csVariant="default" csColor="red" />
-      <NewTag {...args} csVariant="default" csColor="red" dark />
-    </div>
-  </div>
-);
+const defaultArgs = {};
 
-const MinimalTag = Template.bind({});
-MinimalTag.args = {};
+const Template: StoryFn<typeof NewTag> = () => {
+  const tags = TagSizesList.map((size) => {
+    const variantBlock = TagVariantsList.map((variant) => {
+      const modifierBlock = TagModifiersList.map((modifier) => {
+        return (
+          <NewTag
+            key={`${size}-${variant}-${modifier}`}
+            csVariant={variant}
+            csSize={size}
+            csModifiers={[modifier]}
+          >
+            {size}-{variant}-{modifier}
+            <NewIcon csMode={"inline"} noWrapper>
+              <FontAwesomeIcon icon={faChevronDown} />
+            </NewIcon>
+          </NewTag>
+        );
+      });
+      return (
+        <div
+          key={`${size}-${variant}`}
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            gap: "0.5rem",
+          }}
+        >
+          <NewTag
+            key={`${size}-${variant}-noModifier`}
+            csVariant={variant}
+            csSize={size}
+          >
+            {size}-{variant}-noModifier
+            <NewIcon csMode={"inline"} noWrapper>
+              <FontAwesomeIcon icon={faChevronDown} />
+            </NewIcon>
+          </NewTag>
+          {modifierBlock}
+        </div>
+      );
+    });
+    return (
+      <div
+        key={`${size}`}
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "0.5rem",
+        }}
+      >
+        {variantBlock}
+      </div>
+    );
+  });
 
-const DefaultTag = Template.bind({});
-DefaultTag.args = {
-  children: (
-    <>
-      tag
-      <NewIcon csMode="inline" noWrapper>
-        <FontAwesomeIcon icon={faXmark} />
-      </NewIcon>
-    </>
-  ),
-};
-
-const IconOnlyTag = Template.bind({});
-IconOnlyTag.args = {
-  children: (
-    <NewIcon csMode="inline" noWrapper>
-      <FontAwesomeIcon icon={faTag} />
-    </NewIcon>
-  ),
-};
-const TextOnlyTag = Template.bind({});
-TextOnlyTag.args = {
-  children: <>tag</>,
-};
+  const tagOptions = (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.5rem",
+      }}
+    >
+      {tags}
+    </div>
+  );
 
-const SmallTag = Template.bind({});
-SmallTag.args = {
-  children: (
-    <>
-      tag
-      <NewIcon csMode="inline" noWrapper>
-        <FontAwesomeIcon icon={faXmark} />
-      </NewIcon>
-    </>
-  ),
-  csSize: "m",
+  return (
+    <div
+      style={{
+        width: "12rem",
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.5rem",
+      }}
+    >
+      {tagOptions}
+    </div>
+  );
 };
 
-const TinyTag = Template.bind({});
-TinyTag.args = {
-  children: (
-    <>
-      tag
-      <NewIcon csMode="inline" noWrapper>
-        <FontAwesomeIcon icon={faXmark} />
-      </NewIcon>
-    </>
-  ),
-  csSize: "s",
-};
+const DefaultTag = Template.bind({});
+DefaultTag.args = defaultArgs;
 
-export {
-  meta as default,
-  MinimalTag,
-  DefaultTag,
-  IconOnlyTag,
-  TextOnlyTag,
-  SmallTag,
-  TinyTag,
-};
+export { meta as default, DefaultTag as Tags };
diff --git a/apps/cyberstorm-storybook/stories/newComponents/TextInput.stories.tsx b/apps/cyberstorm-storybook/stories/newComponents/TextInput.stories.tsx
index ad8865393..dc7ede5b2 100644
--- a/apps/cyberstorm-storybook/stories/newComponents/TextInput.stories.tsx
+++ b/apps/cyberstorm-storybook/stories/newComponents/TextInput.stories.tsx
@@ -22,26 +22,22 @@ ReferenceTextInput.args = {};
 
 const IconTextInput = Template.bind({});
 IconTextInput.args = {
-  csColor: "cyber-green",
   leftIcon: <FontAwesomeIcon icon={faSearch} />,
 };
 
 const PlaceholderTextInput = Template.bind({});
 PlaceholderTextInput.args = {
-  csColor: "cyber-green",
   placeholder: "Placeholder text",
 };
 
 const ValueTextInput = Template.bind({});
 ValueTextInput.args = {
   ...defaultArgs,
-  csColor: "cyber-green",
   value: "Text value",
 };
 
 const ValueTextWithClearInput = Template.bind({});
 ValueTextWithClearInput.args = {
-  csColor: "cyber-green",
   value: "Text value",
   clearValue: () => {
     return;
@@ -50,7 +46,6 @@ ValueTextWithClearInput.args = {
 
 const PlaceholderClearValueLeftIcon = Template.bind({});
 PlaceholderClearValueLeftIcon.args = {
-  csColor: "cyber-green",
   placeholder: "Placeholder text",
   clearValue: () => {
     return;
diff --git a/packages/cyberstorm-forms/src/forms/AddServiceAccountForm.module.css b/packages/cyberstorm-forms/src/forms/AddServiceAccountForm.module.css
index 5db3222ad..bc623cb5b 100644
--- a/packages/cyberstorm-forms/src/forms/AddServiceAccountForm.module.css
+++ b/packages/cyberstorm-forms/src/forms/AddServiceAccountForm.module.css
@@ -7,14 +7,14 @@
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
-  padding: var(--space--32);
-  border-top: var(--border-width--px) solid var(--color-surface--5);
+  padding: var(--space-32);
+  border-top: var(--border-width--px) solid var(--color-surface-5);
 }
 
 .dialogText {
   color: var(--color-text--secondary);
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
 }
 
@@ -50,6 +50,6 @@
   flex-direction: row-reverse;
   gap: 1rem;
   justify-content: space-between;
-  padding: var(--space--16) var(--space--24);
-  border-top: var(--border-width--px) solid var(--color-surface--5);
+  padding: var(--space-16) var(--space-24);
+  border-top: var(--border-width--px) solid var(--color-surface-5);
 }
diff --git a/packages/cyberstorm-forms/src/forms/AddTeamMemberForm.module.css b/packages/cyberstorm-forms/src/forms/AddTeamMemberForm.module.css
index e2e76d146..cfc816cce 100644
--- a/packages/cyberstorm-forms/src/forms/AddTeamMemberForm.module.css
+++ b/packages/cyberstorm-forms/src/forms/AddTeamMemberForm.module.css
@@ -7,14 +7,14 @@
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
-  padding: var(--space--32);
-  border-top: var(--border-width--px) solid var(--color-surface--5);
+  padding: var(--space-32);
+  border-top: var(--border-width--px) solid var(--color-surface-5);
 }
 
 .dialogText {
   color: var(--color-text--secondary);
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
 }
 
@@ -42,6 +42,6 @@
   flex-direction: row-reverse;
   gap: 1rem;
   justify-content: space-between;
-  padding: var(--space--16) var(--space--24);
-  border-top: var(--border-width--px) solid var(--color-surface--5);
+  padding: var(--space-16) var(--space-24);
+  border-top: var(--border-width--px) solid var(--color-surface-5);
 }
diff --git a/packages/cyberstorm-forms/src/forms/CreateTeamForm.module.css b/packages/cyberstorm-forms/src/forms/CreateTeamForm.module.css
index ed4104103..8c1f64a7c 100644
--- a/packages/cyberstorm-forms/src/forms/CreateTeamForm.module.css
+++ b/packages/cyberstorm-forms/src/forms/CreateTeamForm.module.css
@@ -7,14 +7,14 @@
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
-  padding: var(--space--32);
-  border-top: var(--border-width--px) solid var(--color-surface--5);
+  padding: var(--space-32);
+  border-top: var(--border-width--px) solid var(--color-surface-5);
 }
 
 .dialogText {
   color: var(--color-text--secondary);
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
 }
 
@@ -23,6 +23,6 @@
   flex-direction: row-reverse;
   gap: 1rem;
   justify-content: space-between;
-  padding: var(--space--16) var(--space--24);
-  border-top: var(--border-width--px) solid var(--color-surface--5);
+  padding: var(--space-16) var(--space-24);
+  border-top: var(--border-width--px) solid var(--color-surface-5);
 }
diff --git a/packages/cyberstorm-forms/src/forms/DeleteAccountForm.module.css b/packages/cyberstorm-forms/src/forms/DeleteAccountForm.module.css
index 5adef644b..2f143dd25 100644
--- a/packages/cyberstorm-forms/src/forms/DeleteAccountForm.module.css
+++ b/packages/cyberstorm-forms/src/forms/DeleteAccountForm.module.css
@@ -1,7 +1,7 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
 }
 
 .username {
@@ -11,17 +11,17 @@
 .section {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
 }
 
 .content {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
 }
 
 .instructionText {
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
 }
 
diff --git a/packages/cyberstorm-forms/src/forms/DisbandTeamForm.module.css b/packages/cyberstorm-forms/src/forms/DisbandTeamForm.module.css
index edad33d23..a584c78a9 100644
--- a/packages/cyberstorm-forms/src/forms/DisbandTeamForm.module.css
+++ b/packages/cyberstorm-forms/src/forms/DisbandTeamForm.module.css
@@ -7,14 +7,14 @@
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
-  padding: var(--space--32);
-  border-top: var(--border-width--px) solid var(--color-surface--5);
+  padding: var(--space-32);
+  border-top: var(--border-width--px) solid var(--color-surface-5);
 }
 
 .dialogText {
   color: var(--color-text--secondary);
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
 }
 
@@ -23,8 +23,8 @@
   flex-direction: row-reverse;
   gap: 1rem;
   justify-content: space-between;
-  padding: var(--space--16) var(--space--24);
-  border-top: var(--border-width--px) solid var(--color-surface--5);
+  padding: var(--space-16) var(--space-24);
+  border-top: var(--border-width--px) solid var(--color-surface-5);
 }
 
 .kickDescriptionUserName {
diff --git a/packages/cyberstorm-forms/src/forms/LeaveTeamForm.module.css b/packages/cyberstorm-forms/src/forms/LeaveTeamForm.module.css
index f965fb72b..5005218c3 100644
--- a/packages/cyberstorm-forms/src/forms/LeaveTeamForm.module.css
+++ b/packages/cyberstorm-forms/src/forms/LeaveTeamForm.module.css
@@ -7,14 +7,14 @@
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
-  padding: var(--space--32);
-  border-top: var(--border-width--px) solid var(--color-surface--5);
+  padding: var(--space-32);
+  border-top: var(--border-width--px) solid var(--color-surface-5);
 }
 
 .dialogText {
   color: var(--color-text--secondary);
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
 }
 
@@ -23,8 +23,8 @@
   flex-direction: row-reverse;
   gap: 1rem;
   justify-content: space-between;
-  padding: var(--space--16) var(--space--24);
-  border-top: var(--border-width--px) solid var(--color-surface--5);
+  padding: var(--space-16) var(--space-24);
+  border-top: var(--border-width--px) solid var(--color-surface-5);
 }
 
 .leaveDescriptionTeamName {
diff --git a/packages/cyberstorm-forms/src/forms/PackageEditForm.module.css b/packages/cyberstorm-forms/src/forms/PackageEditForm.module.css
index d7daf802b..97695e4bd 100644
--- a/packages/cyberstorm-forms/src/forms/PackageEditForm.module.css
+++ b/packages/cyberstorm-forms/src/forms/PackageEditForm.module.css
@@ -1,24 +1,24 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
 }
 
 .main {
   display: flex;
   flex-direction: column;
-  gap: var(--space--32);
-  padding: var(--space--32);
+  gap: var(--space-32);
+  padding: var(--space-32);
 }
 
 .dialog {
-  border-top: var(--border-width--px) solid var(--color-surface--5);
+  border-top: var(--border-width--px) solid var(--color-surface-5);
 }
 
 .statusSection {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
 }
 
 .statusTag {
@@ -27,7 +27,7 @@
 
 .title {
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
 }
 
@@ -36,8 +36,8 @@
   flex-direction: row-reverse;
   gap: 1rem;
   justify-content: space-between;
-  padding: var(--space--16) var(--space--24);
-  border-top: var(--border-width--px) solid var(--color-surface--5);
+  padding: var(--space-16) var(--space-24);
+  border-top: var(--border-width--px) solid var(--color-surface-5);
 }
 
 .currentCategories {
diff --git a/packages/cyberstorm-forms/src/forms/RemoveServiceAccountForm.module.css b/packages/cyberstorm-forms/src/forms/RemoveServiceAccountForm.module.css
index 7c3f7ab79..6f4f81b5c 100644
--- a/packages/cyberstorm-forms/src/forms/RemoveServiceAccountForm.module.css
+++ b/packages/cyberstorm-forms/src/forms/RemoveServiceAccountForm.module.css
@@ -7,14 +7,14 @@
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
-  padding: var(--space--32);
-  border-top: var(--border-width--px) solid var(--color-surface--5);
+  padding: var(--space-32);
+  border-top: var(--border-width--px) solid var(--color-surface-5);
 }
 
 .dialogText {
   color: var(--color-text--secondary);
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
 }
 
@@ -27,8 +27,8 @@
   flex-direction: row-reverse;
   gap: 1rem;
   justify-content: space-between;
-  padding: var(--space--16) var(--space--24);
-  border-top: var(--border-width--px) solid var(--color-surface--5);
+  padding: var(--space-16) var(--space-24);
+  border-top: var(--border-width--px) solid var(--color-surface-5);
 }
 
 .kickDescriptionUserName {
diff --git a/packages/cyberstorm-forms/src/forms/RemoveTeamMemberForm.module.css b/packages/cyberstorm-forms/src/forms/RemoveTeamMemberForm.module.css
index edad33d23..a584c78a9 100644
--- a/packages/cyberstorm-forms/src/forms/RemoveTeamMemberForm.module.css
+++ b/packages/cyberstorm-forms/src/forms/RemoveTeamMemberForm.module.css
@@ -7,14 +7,14 @@
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
-  padding: var(--space--32);
-  border-top: var(--border-width--px) solid var(--color-surface--5);
+  padding: var(--space-32);
+  border-top: var(--border-width--px) solid var(--color-surface-5);
 }
 
 .dialogText {
   color: var(--color-text--secondary);
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
 }
 
@@ -23,8 +23,8 @@
   flex-direction: row-reverse;
   gap: 1rem;
   justify-content: space-between;
-  padding: var(--space--16) var(--space--24);
-  border-top: var(--border-width--px) solid var(--color-surface--5);
+  padding: var(--space-16) var(--space-24);
+  border-top: var(--border-width--px) solid var(--color-surface-5);
 }
 
 .kickDescriptionUserName {
diff --git a/packages/cyberstorm-forms/src/forms/TeamDetailsEdit.module.css b/packages/cyberstorm-forms/src/forms/TeamDetailsEdit.module.css
index 5bc6df7a0..71fcb169c 100644
--- a/packages/cyberstorm-forms/src/forms/TeamDetailsEdit.module.css
+++ b/packages/cyberstorm-forms/src/forms/TeamDetailsEdit.module.css
@@ -7,27 +7,27 @@
 .section {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
 }
 
 .donationLink {
   display: flex;
   align-items: center;
-  padding: var(--space--16) var(--space--32);
-  background-color: var(--color-surface--2);
+  padding: var(--space-16) var(--space-32);
+  background-color: var(--color-surface-2);
 }
 
 .donationLinkLabel {
   width: 8em;
   font-weight: var(--font-weight-bold);
   line-height: 1;
-  background-color: var(--color-surface--2);
+  background-color: var(--color-surface-2);
 }
 
 .donationLinkActions {
   display: flex;
   flex: 1 1 0;
-  gap: var(--space--16);
+  gap: var(--space-16);
   align-items: center;
 }
 
@@ -40,14 +40,14 @@
 }
 
 .line {
-  margin: var(--space--24) 0;
-  border-bottom: var(--border-width--px) solid var(--color-surface--4);
+  margin: var(--space-24) 0;
+  border-bottom: var(--border-width--px) solid var(--color-surface-4);
 }
 
 .avatarContent {
   display: flex;
   flex-direction: row;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
   align-items: center;
 }
 
@@ -59,7 +59,7 @@
 @media (width <= 30rem) {
   .donationLink {
     flex-direction: column;
-    gap: var(--gap--16);
+    gap: var(--gap-md);
     align-items: flex-start;
   }
 }
diff --git a/packages/cyberstorm-forms/src/forms/UserConnectionsForm.module.css b/packages/cyberstorm-forms/src/forms/UserConnectionsForm.module.css
index afffbbf3b..ffeddf005 100644
--- a/packages/cyberstorm-forms/src/forms/UserConnectionsForm.module.css
+++ b/packages/cyberstorm-forms/src/forms/UserConnectionsForm.module.css
@@ -6,7 +6,7 @@
 .section {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
 }
 
 .privacyPolicyLink {
@@ -16,12 +16,12 @@
 .connectionList {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
 }
 
 .itemWrapper {
-  padding: var(--space--16) var(--space--32);
-  border-radius: var(--border-radius--8);
+  padding: var(--space-16) var(--space-32);
+  border-radius: var(--radius-md);
   overflow: hidden;
 }
 
@@ -31,16 +31,16 @@
 }
 
 .enabled {
-  background-color: var(--color-surface--3);
+  background-color: var(--color-surface-3);
 }
 
 .disabled {
-  background-color: var(--color-surface--1);
+  background-color: var(--color-surface-1);
 }
 
 .connectionTypeInfo {
   display: flex;
-  gap: var(--space--24);
+  gap: var(--space-24);
   align-items: center;
   justify-content: center;
 }
@@ -59,13 +59,13 @@
 .connectionTypeInfoName {
   color: var(--color-text--default);
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: 1;
 }
 
 .rightSection {
   display: flex;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
   align-items: center;
   justify-content: center;
 }
@@ -73,21 +73,21 @@
 .connectedAs {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--4);
+  gap: var(--gap-xxs);
   align-items: flex-end;
 }
 
 .connectedAsDescription {
   color: var(--color-text--tertiary);
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
   line-height: 1;
 }
 
 .connectedAsUsername {
   color: var(--color-text--default);
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
   line-height: normal;
 }
 
@@ -106,6 +106,6 @@
 @media (width <= 30rem) {
   .item {
     flex-direction: column;
-    gap: var(--gap--8);
+    gap: var(--gap-xs);
   }
 }
diff --git a/packages/cyberstorm-styles/src/index.tsx b/packages/cyberstorm-styles/src/index.tsx
index 46e7bef1a..0bb6853ab 100644
--- a/packages/cyberstorm-styles/src/index.tsx
+++ b/packages/cyberstorm-styles/src/index.tsx
@@ -1,6 +1 @@
-import "./styles/reset.css";
 import "./styles/colors.css";
-import "./styles/fonts.css";
-import "./styles/theme.css";
-import "./styles/globals.css";
-import "./styles/common.css";
diff --git a/packages/cyberstorm-styles/src/styles/colors.css b/packages/cyberstorm-styles/src/styles/colors.css
index aa55a8699..c61fe1840 100644
--- a/packages/cyberstorm-styles/src/styles/colors.css
+++ b/packages/cyberstorm-styles/src/styles/colors.css
@@ -1,341 +1,83 @@
 :root {
   /* OLD COLORS FOR COMPATIBILITY UNTIL ALL PAGES ARE CONVERTED */
-  --old--color-purple--0: rgb(13 13 28);
-  --old--color-purple--1: rgb(18 18 38);
-  --old--color-purple--2: rgb(21 21 45);
-  --old--color-purple--3: rgb(25 25 56);
-  --old--color-purple--4: rgb(29 29 68);
-  --old--color-purple--5: rgb(33 33 79);
-  --old--color-purple--6: rgb(39 39 93);
-  --old--color-purple--7: rgb(48 48 115);
-  --old--color-purple--8: rgb(55 55 134);
-  --old--color-purple--9: rgb(67 67 163);
-  --old--color-purple--10: rgb(75 54 161);
-  --old--color-cyber-green--90: rgb(211 255 239);
-  --old--color-cyber-green--80: rgb(145 255 216);
-  --old--color-cyber-green--70: rgb(123 255 208);
-  --old--color-cyber-green--60: rgb(79 255 192);
-  --old--color-cyber-green--50: rgb(35 255 176);
-  --old--color-cyber-green--40: rgb(28 204 141);
-  --old--color-cyber-green--30: rgb(21 153 106);
-  --old--color-cyber-green--20: rgb(14 102 70);
-  --old--color-cyber-green--10: rgb(3 25 18);
-  --old--color-blue--90: rgb(232 246 254);
-  --old--color-blue--80: rgb(187 227 252);
-  --old--color-blue--70: rgb(119 200 249);
-  --old--color-blue--60: rgb(73 181 247);
-  --old--color-blue--50: rgb(28 163 245);
-  --old--color-blue--40: rgb(22 130 196);
-  --old--color-blue--30: rgb(17 98 147);
-  --old--color-blue--20: rgb(11 65 98);
-  --old--color-blue--10: rgb(6 33 49);
-  --old--color-green--1: rgb(220 247 236);
-  --old--color-green--2: rgb(185 240 217);
-  --old--color-green--3: rgb(150 232 197);
-  --old--color-green--4: rgb(115 225 178);
-  --old--color-green--5: rgb(80 217 159);
-  --old--color-green--6: rgb(64 174 127);
-  --old--color-green--7: rgb(48 130 95);
-  --old--color-green--8: rgb(32 87 64);
-  --old--color-green--9: rgb(24 65 48);
-  --old--color-green--10: rgb(16 43 32);
-  --old--color-green--11: rgba(8 22 16);
-  --old--color-yellow--1: rgb(253 245 220);
-  --old--color-yellow--2: rgb(250 236 185);
-  --old--color-yellow--3: rgb(248 226 149);
-  --old--color-yellow--4: rgb(245 217 114);
-  --old--color-yellow--5: rgb(243 207 79);
-  --old--color-yellow--6: rgb(194 166 63);
-  --old--color-yellow--7: rgb(146 124 47);
-  --old--color-yellow--8: rgb(97 83 32);
-  --old--color-yellow--9: rgb(73 62 24);
-  --old--color-yellow--10: rgb(49 41 16);
-  --old--color-yellow--11: rgb(24 21 8);
-  --old--color-orange--90: rgb(253 225 217);
-  --old--color-orange--80: rgb(251 196 178);
-  --old--color-orange--70: rgb(250 166 140);
-  --old--color-orange--60: rgb(248 137 101);
-  --old--color-orange--50: rgb(246 107 63);
-  --old--color-orange--40: rgb(197 86 50);
-  --old--color-orange--30: rgb(148 64 38);
-  --old--color-orange--20: rgb(98 43 25);
-  --old--color-orange--10: rgb(49 21 13);
-  --old--color-pink--90: rgb(249 221 246);
-  --old--color-pink--80: rgb(242 187 237);
-  --old--color-pink--70: rgb(236 154 227);
-  --old--color-pink--60: rgb(229 120 218);
-  --old--color-pink--50: rgb(223 86 209);
-  --old--color-pink--40: rgb(178 69 167);
-  --old--color-pink--30: rgb(134 52 125);
-  --old--color-pink--20: rgb(89 34 84);
-  --old--color-pink--10: rgb(45 17 42);
-  --old--color-red--1: rgb(252 215 222);
-  --old--color-red--2: rgb(249 175 189);
-  --old--color-red--3: rgb(247 136 156);
-  --old--color-red--4: rgb(244 96 123);
-  --old--color-red--5: rgb(241 56 90);
-  --old--color-red--6: rgb(193 45 72);
-  --old--color-red--7: rgb(145 34 54);
-  --old--color-red--8: rgb(96 22 36);
-  --old--color-red--9: rgb(72 17 27);
-  --old--color-red--10: rgb(48 11 18);
-  --old--color-red--11: rgb(24 6 9);
-
-  /* NEW COLORS */
-  --color-black: rgb(0 0 0);
-  --color-white: rgb(255 255 255);
-  --color-primary: hsl(240deg 5% 96% / 1);
-  --color-secondary: hsl(231deg 46% 86% / 1);
-  --color-tertiary: hsl(230deg 32% 74% / 1);
-  --color-accent: hsl(243deg 100% 88% / 1);
-  --color-surface--1: hsl(240deg 65% 8% / 1);
-  --color-surface--2: hsl(240deg 43% 11% / 1);
-  --color-surface--3: hsl(240deg 39% 13% / 1);
-  --color-surface--4: hsl(236deg 38% 16% / 1);
-  --color-surface--5: hsl(240deg 36% 19% / 1);
-  --color-surface--6: hsl(240deg 37% 22% / 1);
-  --color-surface--7: hsl(240deg 38% 26% / 1);
-  --color-surface--8: hsl(240deg 37% 32% / 1);
-  --color-surface--9: hsl(240deg 38% 38% / 1);
-  --color-surface--10: hsl(240deg 38% 47% / 1);
-  --color-surface--11: hsl(246deg 50% 42% / 1);
-  --color-surface-alpha--1: hsl(240deg 100% 90% / 0.05);
-  --color-surface-alpha--2: hsl(240deg 35% 32% / 0.09);
-  --color-surface-alpha--3: hsl(240deg 30% 32% / 0.15);
-  --color-surface-alpha--4: hsl(236deg 36% 36% / 0.24);
-  --color-surface-alpha--5: hsl(240deg 33% 39% / 0.32);
-  --color-surface-alpha--6: hsl(240deg 35% 37% / 0.44);
-  --color-surface-alpha--7: hsl(240deg 37% 39% / 0.55);
-  --color-surface-alpha--8: hsl(240deg 36% 43% / 0.66);
-  --color-surface-alpha--9: hsl(240deg 39% 47% / 0.77);
-  --color-surface-alpha--10: hsla(240deg 38% 51% / 0.88);
-  --color-surface-alpha--11: hsla(246deg 49% 48% / 0.85);
-  --color-blue--1: hsl(203deg 78% 5% / 1);
-  --color-blue--2: hsl(202deg 78% 11% / 1);
-  --color-blue--3: hsl(202deg 80% 16% / 1);
-  --color-blue--4: hsl(203deg 80% 21% / 1);
-  --color-blue--5: hsl(203deg 79% 32% / 1);
-  --color-blue--6: hsl(203deg 80% 43% / 1);
-  --color-blue--7: hsl(203deg 92% 54% / 1);
-  --color-blue--8: hsl(203deg 92% 63% / 1);
-  --color-blue--9: hsl(203deg 92% 72% / 1);
-  --color-blue--10: hsl(203deg 92% 86% / 1);
-  --color-blue--11: hsl(202deg 92% 95% / 1);
-  --color-pink--1: hsl(305deg 42% 6% / 1);
-  --color-pink--2: hsl(306deg 45% 12% / 1);
-  --color-pink--3: hsl(306deg 44% 18% / 1);
-  --color-pink--4: hsl(305deg 45% 24% / 1);
-  --color-pink--5: hsl(307deg 44% 36% / 1);
-  --color-pink--6: hsl(306deg 44% 48% / 1);
-  --color-pink--7: hsl(306deg 68% 61% / 1);
-  --color-pink--8: hsl(306deg 68% 68% / 1);
-  --color-pink--9: hsl(307deg 68% 76% / 1);
-  --color-pink--10: hsl(305deg 68% 84% / 1);
-  --color-pink--11: hsl(306deg 70% 92% / 1);
-  --color-red--1: hsl(350deg 60% 6% / 1);
-  --color-red--2: hsl(349deg 63% 12% / 1);
-  --color-red--3: hsl(349deg 62% 17% / 1);
-  --color-red--4: hsl(349deg 63% 23% / 1);
-  --color-red--5: hsl(349deg 62% 35% / 1);
-  --color-red--6: hsl(349deg 62% 47% / 1);
-  --color-red--7: hsl(349deg 87% 58% / 1);
-  --color-red--8: hsl(349deg 87% 67% / 1);
-  --color-red--9: hsl(349deg 87% 75% / 1);
-  --color-red--10: hsl(349deg 86% 83% / 1);
-  --color-red--11: hsl(349deg 86% 92% / 1);
-  --color-orange--1: hsl(16deg 61% 6% / 1);
-  --color-orange--2: hsl(13deg 58% 12% / 1);
-  --color-orange--3: hsl(14deg 59% 18% / 1);
-  --color-orange--4: hsl(15deg 59% 24% / 1);
-  --color-orange--5: hsl(14deg 59% 36% / 1);
-  --color-orange--6: hsl(15deg 60% 48% / 1);
-  --color-orange--7: hsl(14deg 91% 61% / 1);
-  --color-orange--8: hsl(15deg 91% 68% / 1);
-  --color-orange--9: hsl(14deg 92% 76% / 1);
-  --color-orange--10: hsl(15deg 90% 84% / 1);
-  --color-orange--11: hsl(13deg 90% 92% / 1);
-  --color-green--1: hsl(154deg 47% 6% / 1);
-  --color-green--2: hsl(156deg 46% 12% / 1);
-  --color-green--3: hsl(155deg 46% 17% / 1);
-  --color-green--4: hsl(155deg 46% 23% / 1);
-  --color-green--5: hsl(154deg 46% 35% / 1);
-  --color-green--6: hsl(154deg 46% 47% / 1);
-  --color-green--7: hsl(155deg 64% 58% / 1);
-  --color-green--8: hsl(154deg 65% 67% / 1);
-  --color-green--9: hsl(154deg 64% 75% / 1);
-  --color-green--10: hsl(155deg 65% 83% / 1);
-  --color-green--11: hsl(156deg 63% 92% / 1);
-  --color-yellow--1: hsl(49deg 50% 6% / 1);
-  --color-yellow--2: hsl(45deg 51% 13% / 1);
-  --color-yellow--3: hsl(47deg 51% 19% / 1);
-  --color-yellow--4: hsl(47deg 50% 25% / 1);
-  --color-yellow--5: hsl(47deg 51% 38% / 1);
-  --color-yellow--6: hsl(47deg 52% 50% / 1);
-  --color-yellow--7: hsl(47deg 87% 63% / 1);
-  --color-yellow--8: hsl(47deg 87% 70% / 1);
-  --color-yellow--9: hsl(47deg 88% 78% / 1);
-  --color-yellow--10: hsl(47deg 87% 85% / 1);
-  --color-yellow--11: hsl(45deg 89% 93% / 1);
-  --color-purple--1: hsl(277deg 50% 6% / 1);
-  --color-purple--2: hsl(277deg 50% 13% / 1);
-  --color-purple--3: hsl(277deg 51% 19% / 1);
-  --color-purple--4: hsl(277deg 50% 25% / 1);
-  --color-purple--5: hsl(276deg 50% 38% / 1);
-  --color-purple--6: hsl(276deg 52% 51% / 1);
-  --color-purple--7: hsl(277deg 86% 63% / 1);
-  --color-purple--8: hsl(276deg 87% 71% / 1);
-  --color-purple--9: hsl(276deg 86% 78% / 1);
-  --color-purple--10: hsl(277deg 87% 85% / 1);
-  --color-purple--11: hsl(277deg 84% 93% / 1);
-  --color-cyber-green--1: transparent;
-  --color-cyber-green--2: hsl(161deg 79% 5% / 1);
-  --color-cyber-green--3: hsl(158deg 76% 11% / 1);
-  --color-cyber-green--4: hsl(158deg 76% 23% / 1);
-  --color-cyber-green--5: hsl(159deg 76% 34% / 1);
-  --color-cyber-green--6: hsl(159deg 76% 45% / 1);
-  --color-cyber-green--7: hsl(158deg 100% 57% / 1);
-  --color-cyber-green--8: hsl(159deg 100% 65% / 1);
-  --color-cyber-green--9: hsl(159deg 100% 74% / 1);
-  --color-cyber-green--10: hsl(159deg 100% 78% / 1);
-  --color-cyber-green--11: hsl(158deg 100% 91% / 1);
-}
-
-[data-color="surface"] {
-  --color-1: var(--color-surface--1);
-  --color-2: var(--color-surface--2);
-  --color-3: var(--color-surface--3);
-  --color-4: var(--color-surface--4);
-  --color-5: var(--color-surface--5);
-  --color-6: var(--color-surface--6);
-  --color-7: var(--color-surface--7);
-  --color-8: var(--color-surface--8);
-  --color-9: var(--color-surface--9);
-  --color-10: var(--color-surface--10);
-  --color-11: var(--color-surface--11);
-}
-
-[data-color="surface-alpha"] {
-  --color-1: var(--color-surface-alpha--1);
-  --color-2: var(--color-surface-alpha--2);
-  --color-3: var(--color-surface-alpha--3);
-  --color-4: var(--color-surface-alpha--4);
-  --color-5: var(--color-surface-alpha--5);
-  --color-6: var(--color-surface-alpha--6);
-  --color-7: var(--color-surface-alpha--7);
-  --color-8: var(--color-surface-alpha--8);
-  --color-9: var(--color-surface-alpha--9);
-  --color-10: var(--color-surface-alpha--10);
-  --color-11: var(--color-surface-alpha--11);
-}
-
-[data-color="blue"] {
-  --color-1: var(--color-blue--1);
-  --color-2: var(--color-blue--2);
-  --color-3: var(--color-blue--3);
-  --color-4: var(--color-blue--4);
-  --color-5: var(--color-blue--5);
-  --color-6: var(--color-blue--6);
-  --color-7: var(--color-blue--7);
-  --color-8: var(--color-blue--8);
-  --color-9: var(--color-blue--9);
-  --color-10: var(--color-blue--10);
-  --color-11: var(--color-blue--11);
-}
-
-[data-color="pink"] {
-  --color-1: var(--color-pink--1);
-  --color-2: var(--color-pink--2);
-  --color-3: var(--color-pink--3);
-  --color-4: var(--color-pink--4);
-  --color-5: var(--color-pink--5);
-  --color-6: var(--color-pink--6);
-  --color-7: var(--color-pink--7);
-  --color-8: var(--color-pink--8);
-  --color-9: var(--color-pink--9);
-  --color-10: var(--color-pink--10);
-  --color-11: var(--color-pink--11);
-}
-
-[data-color="red"] {
-  --color-1: var(--color-red--1);
-  --color-2: var(--color-red--2);
-  --color-3: var(--color-red--3);
-  --color-4: var(--color-red--4);
-  --color-5: var(--color-red--5);
-  --color-6: var(--color-red--6);
-  --color-7: var(--color-red--7);
-  --color-8: var(--color-red--8);
-  --color-9: var(--color-red--9);
-  --color-10: var(--color-red--10);
-  --color-11: var(--color-red--11);
-}
-
-[data-color="orange"] {
-  --color-1: var(--color-orange--1);
-  --color-2: var(--color-orange--2);
-  --color-3: var(--color-orange--3);
-  --color-4: var(--color-orange--4);
-  --color-5: var(--color-orange--5);
-  --color-6: var(--color-orange--6);
-  --color-7: var(--color-orange--7);
-  --color-8: var(--color-orange--8);
-  --color-9: var(--color-orange--9);
-  --color-10: var(--color-orange--10);
-  --color-11: var(--color-orange--11);
-}
-
-[data-color="green"] {
-  --color-1: var(--color-green--1);
-  --color-2: var(--color-green--2);
-  --color-3: var(--color-green--3);
-  --color-4: var(--color-green--4);
-  --color-5: var(--color-green--5);
-  --color-6: var(--color-green--6);
-  --color-7: var(--color-green--7);
-  --color-8: var(--color-green--8);
-  --color-9: var(--color-green--9);
-  --color-10: var(--color-green--10);
-  --color-11: var(--color-green--11);
-}
-
-[data-color="yellow"] {
-  --color-1: var(--color-yellow--1);
-  --color-2: var(--color-yellow--2);
-  --color-3: var(--color-yellow--3);
-  --color-4: var(--color-yellow--4);
-  --color-5: var(--color-yellow--5);
-  --color-6: var(--color-yellow--6);
-  --color-7: var(--color-yellow--7);
-  --color-8: var(--color-yellow--8);
-  --color-9: var(--color-yellow--9);
-  --color-10: var(--color-yellow--10);
-  --color-11: var(--color-yellow--11);
-}
-
-[data-color="purple"] {
-  --color-1: var(--color-purple--1);
-  --color-2: var(--color-purple--2);
-  --color-3: var(--color-purple--3);
-  --color-4: var(--color-purple--4);
-  --color-5: var(--color-purple--5);
-  --color-6: var(--color-purple--6);
-  --color-7: var(--color-purple--7);
-  --color-8: var(--color-purple--8);
-  --color-9: var(--color-purple--9);
-  --color-10: var(--color-purple--10);
-  --color-11: var(--color-purple--11);
-}
-
-[data-color="cyber-green"] {
-  --color-1: var(--color-cyber-green--1);
-  --color-2: var(--color-cyber-green--2);
-  --color-3: var(--color-cyber-green--3);
-  --color-4: var(--color-cyber-green--4);
-  --color-5: var(--color-cyber-green--5);
-  --color-6: var(--color-cyber-green--6);
-  --color-7: var(--color-cyber-green--7);
-  --color-8: var(--color-cyber-green--8);
-  --color-9: var(--color-cyber-green--9);
-  --color-10: var(--color-cyber-green--10);
-  --color-11: var(--color-cyber-green--11);
+  --old--color-accent-purple-0: rgb(13 13 28);
+  --old--color-accent-purple-1: rgb(18 18 38);
+  --old--color-accent-purple-2: rgb(21 21 45);
+  --old--color-accent-purple-3: rgb(25 25 56);
+  --old--color-accent-purple-4: rgb(29 29 68);
+  --old--color-accent-purple-5: rgb(33 33 79);
+  --old--color-accent-purple-6: rgb(39 39 93);
+  --old--color-accent-purple-7: rgb(48 48 115);
+  --old--color-accent-purple-8: rgb(55 55 134);
+  --old--color-accent-purple-9: rgb(67 67 163);
+  --old--color-accent-purple-10: rgb(75 54 161);
+  --old--color-cyber-green-90: rgb(211 255 239);
+  --old--color-cyber-green-80: rgb(145 255 216);
+  --old--color-cyber-green-70: rgb(123 255 208);
+  --old--color-cyber-green-60: rgb(79 255 192);
+  --old--color-cyber-green-50: rgb(35 255 176);
+  --old--color-cyber-green-40: rgb(28 204 141);
+  --old--color-cyber-green-30: rgb(21 153 106);
+  --old--color-cyber-green-20: rgb(14 102 70);
+  --old--color-cyber-green-10: rgb(3 25 18);
+  --old--color-accent-blue-90: rgb(232 246 254);
+  --old--color-accent-blue-80: rgb(187 227 252);
+  --old--color-accent-blue-70: rgb(119 200 249);
+  --old--color-accent-blue-60: rgb(73 181 247);
+  --old--color-accent-blue-50: rgb(28 163 245);
+  --old--color-accent-blue-40: rgb(22 130 196);
+  --old--color-accent-blue-30: rgb(17 98 147);
+  --old--color-accent-blue-20: rgb(11 65 98);
+  --old--color-accent-blue-10: rgb(6 33 49);
+  --old--color-accent-green-1: rgb(220 247 236);
+  --old--color-accent-green-2: rgb(185 240 217);
+  --old--color-accent-green-3: rgb(150 232 197);
+  --old--color-accent-green-4: rgb(115 225 178);
+  --old--color-accent-green-5: rgb(80 217 159);
+  --old--color-accent-green-6: rgb(64 174 127);
+  --old--color-accent-green-7: rgb(48 130 95);
+  --old--color-accent-green-8: rgb(32 87 64);
+  --old--color-accent-green-9: rgb(24 65 48);
+  --old--color-accent-green-10: rgb(16 43 32);
+  --old--color-accent-green-11: rgba(8 22 16);
+  --old--color-accent-yellow-1: rgb(253 245 220);
+  --old--color-accent-yellow-2: rgb(250 236 185);
+  --old--color-accent-yellow-3: rgb(248 226 149);
+  --old--color-accent-yellow-4: rgb(245 217 114);
+  --old--color-accent-yellow-5: rgb(243 207 79);
+  --old--color-accent-yellow-6: rgb(194 166 63);
+  --old--color-accent-yellow-7: rgb(146 124 47);
+  --old--color-accent-yellow-8: rgb(97 83 32);
+  --old--color-accent-yellow-9: rgb(73 62 24);
+  --old--color-accent-yellow-10: rgb(49 41 16);
+  --old--color-accent-yellow-11: rgb(24 21 8);
+  --old--color-accent-orange-90: rgb(253 225 217);
+  --old--color-accent-orange-80: rgb(251 196 178);
+  --old--color-accent-orange-70: rgb(250 166 140);
+  --old--color-accent-orange-60: rgb(248 137 101);
+  --old--color-accent-orange-50: rgb(246 107 63);
+  --old--color-accent-orange-40: rgb(197 86 50);
+  --old--color-accent-orange-30: rgb(148 64 38);
+  --old--color-accent-orange-20: rgb(98 43 25);
+  --old--color-accent-orange-10: rgb(49 21 13);
+  --old--color-accent-pink-90: rgb(249 221 246);
+  --old--color-accent-pink-80: rgb(242 187 237);
+  --old--color-accent-pink-70: rgb(236 154 227);
+  --old--color-accent-pink-60: rgb(229 120 218);
+  --old--color-accent-pink-50: rgb(223 86 209);
+  --old--color-accent-pink-40: rgb(178 69 167);
+  --old--color-accent-pink-30: rgb(134 52 125);
+  --old--color-accent-pink-20: rgb(89 34 84);
+  --old--color-accent-pink-10: rgb(45 17 42);
+  --old--color-accent-red-1: rgb(252 215 222);
+  --old--color-accent-red-2: rgb(249 175 189);
+  --old--color-accent-red-3: rgb(247 136 156);
+  --old--color-accent-red-4: rgb(244 96 123);
+  --old--color-accent-red-5: rgb(241 56 90);
+  --old--color-accent-red-6: rgb(193 45 72);
+  --old--color-accent-red-7: rgb(145 34 54);
+  --old--color-accent-red-8: rgb(96 22 36);
+  --old--color-accent-red-9: rgb(72 17 27);
+  --old--color-accent-red-10: rgb(48 11 18);
+  --old--color-accent-red-11: rgb(24 6 9);
 }
diff --git a/packages/cyberstorm-styles/src/styles/common.css b/packages/cyberstorm-styles/src/styles/common.css
deleted file mode 100644
index 9b4a02baa..000000000
--- a/packages/cyberstorm-styles/src/styles/common.css
+++ /dev/null
@@ -1,51 +0,0 @@
-.lineHeightAuto {
-  line-height: normal;
-}
-
-.lineHeightBody {
-  line-height: 170%;
-}
-
-.fontSizeXXS {
-  font-size: 0.625rem;
-}
-
-.fontSizeXS {
-  font-size: 0.75rem;
-}
-
-.fontSizeS {
-  font-size: 0.875rem;
-}
-
-.fontSizeM {
-  font-size: 1rem;
-}
-
-.fontSizeL {
-  font-size: 1.5rem;
-}
-
-.fontWeightRegular {
-  font-weight: 400;
-}
-
-.fontWeightMedium {
-  font-weight: 500;
-}
-
-.fontWeightSemiBold {
-  font-weight: 600;
-}
-
-.fontWeightBold {
-  font-weight: 700;
-}
-
-.fontFamilyInter {
-  font-family: inter, sans-serif;
-}
-
-.fontFamilyHubot {
-  font-family: Hubot-Sans, sans-serif;
-}
diff --git a/packages/cyberstorm-styles/src/styles/fonts.css b/packages/cyberstorm-styles/src/styles/fonts.css
deleted file mode 100644
index 2ba9f858f..000000000
--- a/packages/cyberstorm-styles/src/styles/fonts.css
+++ /dev/null
@@ -1,17 +0,0 @@
-@font-face {
-  font-weight: 100 1000;
-  font-family: Sora;
-  src: url("../fonts/Sora.ttf") format("truetype-variations");
-}
-
-@font-face {
-  font-weight: 100 1000;
-  font-family: Inter;
-  src: url("../fonts/Inter.ttf") format("truetype-variations");
-}
-
-@font-face {
-  font-weight: 200 900;
-  font-family: Hubot-Sans;
-  src: url("../fonts/HubotSans.ttf") format("truetype-variations");
-}
diff --git a/packages/cyberstorm-styles/src/styles/globals.css b/packages/cyberstorm-styles/src/styles/globals.css
deleted file mode 100644
index d5ba838b8..000000000
--- a/packages/cyberstorm-styles/src/styles/globals.css
+++ /dev/null
@@ -1,127 +0,0 @@
-:root {
-  /* Base values */
-  --space--px: 1px;
-  --space--2: 0.125rem;
-  --space--4: 0.25rem;
-  --space--6: 0.375rem;
-  --space--8: 0.5rem;
-  --space--10: 0.625rem;
-  --space--12: 0.75rem;
-  --space--14: 0.875rem;
-  --space--16: 1rem;
-  --space--18: 1.125rem;
-  --space--20: 1.25rem;
-  --space--22: 1.375rem;
-  --space--24: 1.5rem;
-  --space--30: 1.875rem;
-  --space--32: 2rem;
-  --space--36: 2.25rem;
-  --space--38: 2.375rem;
-  --space--40: 2.5rem;
-  --space--44: 2.75rem;
-  --space--48: 3rem;
-  --space--51: 3.188rem;
-  --space--54: 3.375rem;
-
-  /* Space affecting layout values */
-  --gap--2: var(--space--2);
-  --gap--4: var(--space--4);
-  --gap--8: var(--space--8);
-  --gap--12: var(--space--12);
-  --gap--16: var(--space--16);
-  --gap--24: var(--space--24);
-  --gap--32: var(--space--32);
-  --gap--40: var(--space--40);
-  --gap--48: var(--space--48);
-  --page-margin: 16rem;
-  --page-margin-top: 25px;
-
-  /* Other re-used values */
-  --blur-default: 0.25rem;
-  --border-width--px: 1px;
-  --border-width--2: 0.125rem;
-  --border-radius--2: 0.125rem;
-  --border-radius--4: 0.25rem;
-  --border-radius--6: 0.375rem;
-  --border-radius--8: 0.5rem;
-  --border-radius--12: 0.75rem;
-  --border-radius--16: 1rem;
-  --border-radius--48: 3rem;
-  --font-size--xs: var(--space--10);
-  --font-size--s: var(--space--12);
-  --font-size--m: var(--space--14);
-  --font-size--l: var(--space--16);
-  --font-size--xl: var(--space--18);
-  --font-size--xxl: var(--space--22);
-  --line-height--s: 1.7;
-  --line-height--m: 1.7;
-  --line-height--l: 1.6;
-  --line-height--xl: 1.6;
-  --line-height--xxl: 1.2;
-
-  /* Common fonts */
-  --font-body: normal var(--font-size--l) inter, sans-serif;
-  --font-heading: normal var(--font-size--l) "Hubot-Sans", sans-serif;
-  --font-family-monospace: sfmono-regular, menlo, consolas, courier, monospace;
-  --fa-fw-width: 1em;
-
-  /* Font weigths */
-  --font-weight-regular: 300;
-  --font-weight-medium: 400;
-  --font-weight-semibold: 500;
-  --font-weight-bold: 600;
-  --font-weight-boldest: 700;
-  --font-weight-heavy: 800;
-
-  /* Header dimensions */
-  --header-height: 3.5rem;
-  --content-padding-top-desktop: 2rem;
-
-  /* Animation lengths */
-  --animation-length-xs: 80ms;
-  --animation-length-s: 120ms;
-  --animation-length-m: 150ms;
-  --animation-length-l: 300ms;
-
-  font-synthesis: none;
-  font-feature-settings: "liga" 1, "calt" 1; /* workaround for bug in Chrome, dunno if still present or not */
-  scrollbar-color: var(--color-surface--8) var(--color-surface--1);
-}
-
-/* DESIGN SYSTEM TODO: Add different sizes of scaling? */
-
-/* e.g --scaling-s --scaling-m --scaling-l */
-
-@media (width <= calc(40rem - 1px)) {
-  :root {
-    --scaling: 0.7;
-  }
-}
-
-@media (width >= 40rem) {
-  :root {
-    --scaling: 0.9;
-  }
-}
-
-@media (width >= 63.5rem) {
-  :root {
-    --scaling: 1;
-  }
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-body {
-  color: var(--color-text--default);
-  font: var(--font-body);
-  line-height: normal;
-  background-color: var(--body-bg-color);
-}
-
-* > * {
-  scrollbar-width: thin;
-}
diff --git a/packages/cyberstorm-styles/src/styles/reset.css b/packages/cyberstorm-styles/src/styles/reset.css
deleted file mode 100644
index 208693985..000000000
--- a/packages/cyberstorm-styles/src/styles/reset.css
+++ /dev/null
@@ -1,180 +0,0 @@
-/*
-  Made by Elly Loel - https://ellyloel.com/
-  With inspiration from:
-    - Josh W Comeau
-    https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
-    - Andy Bell
-    https://piccalil.li/blog/a-modern-css-reset/
-    - Adam Argyle
-    https://unpkg.com/open-props@1.3.16/normalize.min.css
-    https://codepen.io/argyleink/pen/KKvRORE
-
-  Notes:
-    - `:where()` is used to lower specificity for easy overriding.
-*/
-
-* {
-  /* Remove default margin on everything */
-  margin: 0;
-
-  /* Remove default padding on everything */
-  padding: 0;
-}
-
-/* Use a more-intuitive box-sizing model on everything */
-*,
-::before,
-::after {
-  box-sizing: border-box;
-}
-
-/* Remove border and set sensible defaults for backgrounds,
-  on all elements except fieldset progress and meter */
-*:where(:not(fieldset, progress, meter)) {
-  border-style: solid;
-  border-width: 0;
-  background-repeat: no-repeat;
-  background-origin: border-box;
-}
-
-html {
-  /* Allow percentage-based heights in the application */
-  block-size: 100%;
-
-  /* Making sure text size is only controlled by font-size */
-  text-size-adjust: none;
-}
-
-/* Smooth scrolling for users that don't prefer reduced motion */
-@media (prefers-reduced-motion: no-preference) {
-  html:focus-within {
-    scroll-behavior: smooth;
-  }
-}
-
-body {
-  /* https://marco.org/2012/11/15/text-rendering-optimize-legibility */
-  text-rendering: optimizespeed;
-
-  /* Allow percentage-based heights in the application */
-  min-block-size: 100%;
-
-  /*
-   https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter#example_2
-   */
-
-  /* scrollbar-gutter: stable both-edges; Removed until this bug is fixed:
-  https://bugs.chromium.org/p/chromium/issues/detail?id=1318404#c2 */
-}
-
-/* Improve media defaults */
-:where(img, svg, video, canvas, audio, iframe, embed, object) {
-  display: block;
-}
-
-:where(img, svg, video) {
-  block-size: auto;
-  max-inline-size: 100%;
-}
-
-/* Remove stroke and set fill colour to the inherited font colour */
-:where(svg) {
-  fill: currentcolor;
-  stroke: none;
-}
-
-/* SVG's without a fill attribute */
-:where(svg):where(:not([fill])) {
-  fill: none;
-
-  /* Remove fill and set stroke colour to the inherited font colour */
-  stroke: currentcolor;
-
-  /* Rounded stroke */
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-/* Remove built-in form typography styles */
-:where(input, button, textarea, select),
-:where(input[type="file"])::-webkit-file-upload-button {
-  color: inherit;
-  font: inherit;
-  font-size: inherit;
-  letter-spacing: inherit;
-  word-spacing: inherit;
-}
-
-/* Change textarea resize to vertical only and block only if the browser
-  supports that */
-:where(textarea) {
-  resize: vertical;
-}
-
-@supports (resize: block) {
-  :where(textarea) {
-    resize: block;
-  }
-}
-
-/* Avoid text overflows */
-:where(p, h1, h2, h3, h4, h5, h6) {
-  overflow-wrap: break-word;
-}
-
-/* Fix h1 font size inside article, aside, nav, and section */
-h1 {
-  font-size: 2em;
-}
-
-/* Position list marker inside */
-:where(ul, ol) {
-  list-style-position: inside;
-}
-
-/* Remove list styles on ul, ol elements with a list role,
-  which suggests default styling will be removed */
-:where(ul, ol)[role="list"] {
-  list-style: none;
-}
-
-/* More readable underline style for anchor tags
-  without a class. This could be set on anchor tags globally,
-  but it can cause conflicts. */
-a:not([class]) {
-  text-decoration-skip-ink: auto;
-}
-
-/* Make it clear that interactive elements are interactive */
-:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
-  cursor: pointer;
-  touch-action: manipulation;
-}
-
-:where(input[type="file"]) {
-  cursor: auto;
-}
-
-:where(input[type="file"])::-webkit-file-upload-button,
-:where(input[type="file"])::file-selector-button {
-  cursor: pointer;
-}
-
-:where(:not(:active)):focus-visible {
-  outline: 0.2rem solid var(--color-cyber-green--5);
-}
-
-/* Make sure users can't select button text */
-:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"]),
-:where(input[type="file"])::-webkit-file-upload-button,
-:where(input[type="file"])::file-selector-button {
-  text-align: center;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-}
-
-/* Disabled cursor for disabled buttons */
-:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"])[disabled] {
-  cursor: not-allowed;
-}
diff --git a/packages/cyberstorm-styles/src/styles/theme.css b/packages/cyberstorm-styles/src/styles/theme.css
deleted file mode 100644
index 3db5de610..000000000
--- a/packages/cyberstorm-styles/src/styles/theme.css
+++ /dev/null
@@ -1,113 +0,0 @@
-:root {
-  --skeletor-bg: var(--color-surface-alpha--3);
-  --body-bg-color: var(--color-surface--3);
-  --body-bg-color-a: hsl(240deg 38% 13% / 0.85);
-  --border-default: var(--color-surface-alpha--7);
-  --border-dim: var(--color-surface-alpha--6);
-  --datalist-row-bg-color: var(--color-surface-alpha--3);
-  --surface-dim: var(--color-surface-alpha--3);
-  --surface-dimmer: var(--color-surface-alpha--2);
-
-  /* OLD STYLES FROM THIS POINT ONWARDS */
-  --color-danger: var(--old--color-red--5);
-  --color-danger-background: var(--old--color-red--8);
-  --color-danger-background--hover: var(--old--color-red--9);
-  --color-danger--hover: var(--old--color-red--6);
-  --color-danger-text: var(--old--color-red--1);
-  --color-warning-text: var(--old--color-yellow--1);
-  --color-warning-background: var(--old--color-yellow--8);
-  --color-warning-background--hover: var(--old--color-yellow--9);
-  --color-success-text: var(--old--color-green--1);
-  --color-success-background: var(--old--color-green--8);
-  --color-success-background--hover: var(--old--color-green--9);
-  --color-crown: var(--old--color-yellow--5);
-  --color-info: var(--old--color-blue--70);
-  --color-info-background: var(--old--color-blue--10);
-  --old--color-surface--0: var(--old--color-purple--0);
-  --old--color-surface--1: var(--old--color-purple--1);
-  --old--color-surface--2: var(--old--color-purple--2);
-  --old--color-surface--3: var(--old--color-purple--3);
-  --old--color-surface--4: var(--old--color-purple--4);
-  --old--color-surface--5: var(--old--color-purple--5);
-  --old--color-surface--6: var(--old--color-purple--6);
-  --old--color-surface--7: var(--old--color-purple--7);
-  --old--color-surface--8: var(--old--color-purple--8);
-  --old--color-surface--9: var(--old--color-purple--9);
-  --old--color-surface--10: var(--old--color-purple--10);
-  --old--color-surface--10--hover: rgb(59 42 126 / 1);
-  --color-border: rgb(54 52 91 / 1);
-  --color-border--highlight: rgb(93 90 159);
-  --color-shadow-1: rgb(0 0 0 / 0.7);
-  --color-gradient-blue-green--darker: linear-gradient(
-    to left top,
-    rgb(6 33 49) 0%,
-    rgb(16 43 32) 100%
-  );
-  --color-gradient-blue-green--dark: linear-gradient(
-    to left top,
-    rgb(11 65 98) 0%,
-    rgb(32 87 64) 100%
-  );
-  --color-gradient-blue-green: linear-gradient(
-    to left top,
-    rgb(28 163 245) 0%,
-    rgb(35 255 176) 100%
-  );
-  --color-gradient-blue-green--light: linear-gradient(
-    to left top,
-    rgb(73 181 247) 0%,
-    rgb(115 225 178) 100%
-  );
-  --color-gradient-purple-green--darker: linear-gradient(
-    to left top,
-    rgb(31 10 46) 0%,
-    rgb(16 43 32) 100%
-  );
-  --color-gradient-purple-green--dark: linear-gradient(
-    to left top,
-    rgb(47 14 68) 0%,
-    rgb(10 76 53) 100%
-  );
-  --color-gradient-purple-green: linear-gradient(
-    to left top,
-    rgb(157 48 228) 0%,
-    rgb(35 255 176) 100%
-  );
-  --color-gradient-purple-green--light: linear-gradient(
-    to left top,
-    rgb(177 89 233) 0%,
-    rgb(115 225 178) 100%
-  );
-  --color-gradient-vibrant: linear-gradient(
-    to left,
-    rgb(157 48 228) 0%,
-    rgb(28 167 245) 50%,
-    rgb(35 255 176) 100%
-  );
-  --color-highlight--hover: var(--old--color-cyber-green--40);
-  --color-highlight: var(--old--color-cyber-green--50);
-  --box-shadow-default: 0 0.75em 1.5em 0.25em rgb(0 0 0 / 0.65);
-  --box-shadow-small: 0 0.25em 0.75em 0.125em rgb(0 0 0 / 0.65);
-  --box-shadow-special-green: 0 0 1em rgb(80 217 159 / 0.32);
-  --box-shadow-special-green--highlight: 0 0 0.75em rgb(255 255 255 / 0.2),
-    0 0 1.125em rgb(80 217 159 / 0.6);
-  --box-shadow-special-purple--highlight: 0 0 0.75em rgb(255 255 255 / 0.2),
-    0 0 1.125em rgb(157 48 228 / 0.5);
-  --color-text--default: rgb(245 245 246);
-  --color-text--secondary: rgb(196 192 216);
-  --color-text--accent: rgb(198 195 255);
-  --color-text--tertiary: rgb(156 156 196);
-  --alert-info-bg-color: rgb(8 49 73);
-  --alert-success-bg-color: rgb(24 65 48);
-  --alert-warning-bg-color: rgb(73 62 24);
-  --alert-danger-bg-color: rgb(72 17 27);
-  --alert-info-accent-color: rgb(28 163 245);
-  --alert-success-accent-color: rgb(80 217 159);
-  --alert-warning-accent-color: rgb(243 207 79);
-  --alert-danger-accent-color: rgb(241 56 90);
-  --alert-info-text-color: rgb(187 227 252);
-  --alert-success-text-color: rgb(185 240 217);
-  --alert-warning-text-color: rgb(250 236 185);
-  --alert-danger-text-color: rgb(249 175 189);
-  --animation-timing-1: cubic-bezier(0.16, 1, 0.3, 1);
-}
diff --git a/packages/cyberstorm-theme/.gitignore b/packages/cyberstorm-theme/.gitignore
new file mode 100644
index 000000000..25562a3d4
--- /dev/null
+++ b/packages/cyberstorm-theme/.gitignore
@@ -0,0 +1,3 @@
+/node_modules/
+/tsconfig.tsbuildinfo
+/dist/
diff --git a/packages/cyberstorm-theme/README.md b/packages/cyberstorm-theme/README.md
new file mode 100644
index 000000000..43cdd0120
--- /dev/null
+++ b/packages/cyberstorm-theme/README.md
@@ -0,0 +1 @@
+To be named "Cyberstorm" as the name "Cyberstorm" was originally meant to be the design system name.
diff --git a/packages/cyberstorm-theme/package.json b/packages/cyberstorm-theme/package.json
new file mode 100644
index 000000000..8fa9b4f4a
--- /dev/null
+++ b/packages/cyberstorm-theme/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "@thunderstore/cyberstorm-theme",
+  "version": "0.1.0",
+  "description": "Cyberstorm theme",
+  "repository": "https://github.com/thunderstore-io/thunderstore-ui/tree/master/packages/cyberstorm-theme",
+  "type": "module",
+  "main": "dist/thunderstore-cyberstorm-theme.cjs.js",
+  "module": "dist/thunderstore-cyberstorm-theme.esm.js",
+  "types": "dist/thunderstore-cyberstorm-theme.cjs.d.ts",
+  "files": [
+    "dist"
+  ]
+}
diff --git a/packages/cyberstorm-theme/src/components.tsx b/packages/cyberstorm-theme/src/components.tsx
new file mode 100644
index 000000000..e0fd8ae4c
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components.tsx
@@ -0,0 +1,87 @@
+export {
+  type ButtonVariants,
+  ButtonVariantsList,
+  type ButtonSizes,
+  ButtonSizesList,
+  type ButtonModifiers,
+  ButtonModifiersList,
+} from "./components/Button/Button";
+export {
+  type IconButtonVariants,
+  IconButtonVariantsList,
+  type IconButtonSizes,
+  IconButtonSizesList,
+  type IconButtonModifiers,
+  IconButtonModifiersList,
+} from "./components/Button/IconButton";
+export {
+  type HeadingVariants,
+  HeadingVariantsList,
+  type HeadingSizes,
+  HeadingSizesList,
+  type HeadingModifiers,
+  HeadingModifiersList,
+} from "./components/Heading/Heading";
+export {
+  type DropDownVariants,
+  DropDownVariantsList,
+  type DropDownSizes,
+  DropDownSizesList,
+  type DropDownModifiers,
+  DropDownModifiersList,
+  type DropDownItemVariants,
+  DropDownItemVariantsList,
+  type DropDownItemSizes,
+  DropDownItemSizesList,
+  type DropDownItemModifiers,
+  DropDownItemModifiersList,
+  type DropDownDividerVariants,
+  DropDownDividerVariantsList,
+  type DropDownDividerSizes,
+  DropDownDividerSizesList,
+  type DropDownDividerModifiers,
+  DropDownDividerModifiersList,
+} from "./components/DropDown/DropDown";
+export {
+  type SelectVariants,
+  SelectVariantsList,
+  type SelectSizes,
+  SelectSizesList,
+  type SelectModifiers,
+  SelectModifiersList,
+} from "./components/Select/Select";
+export {
+  type TextInputVariants,
+  TextInputVariantsList,
+  type TextInputSizes,
+  TextInputSizesList,
+  type TextInputModifiers,
+  TextInputModifiersList,
+} from "./components/TextInput/TextInput";
+export { type IconVariants, IconVariantsList } from "./components/Icon/Icon";
+export {
+  type BreadCrumbsVariants,
+  BreadCrumbsVariantsList,
+  type BreadCrumbsSizes,
+  BreadCrumbsSizesList,
+  type BreadCrumbsModifiers,
+  BreadCrumbsModifiersList,
+} from "./components/BreadCrumbs/BreadCrumbs";
+export {
+  type TagVariants,
+  TagVariantsList,
+  type TagSizes,
+  TagSizesList,
+  type TagModifiers,
+  TagModifiersList,
+} from "./components/Tag/Tag";
+export { type LinkVariants, LinkVariantsList } from "./components/Link/Link";
+export {
+  type ImageVariants,
+  ImageVariantsList,
+} from "./components/Image/Image";
+export { type MenuVariants, MenuVariantsList } from "./components/Menu/Menu";
+export {
+  type ModalVariants,
+  ModalVariantsList,
+} from "./components/Modal/Modal";
diff --git a/packages/cyberstorm-theme/src/components/BreadCrumbs/BreadCrumbs.css b/packages/cyberstorm-theme/src/components/BreadCrumbs/BreadCrumbs.css
new file mode 100644
index 000000000..c11f91466
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/BreadCrumbs/BreadCrumbs.css
@@ -0,0 +1,40 @@
+@layer theme-components {
+  /* VARIANTS STATELESS */
+  .ts-breadcrumbs__outer:where(.ts-variant--default) {
+    --breadcrumbs__outer-background-color: var(
+      --breadcrumbs__outer-background-color--default
+    );
+  }
+
+  .ts-breadcrumbs__outerend:where(.ts-variant--default) {
+    --breadcrumbs__outer-background-color: var(
+      --breadcrumbs__outer-background-color--hover
+    );
+  }
+
+  .ts-breadcrumbs__innerend:where(.ts-variant--default) {
+    --ts-breadcrumbs__innerend-text-color: var(
+      --breadcrumbs__innerend-text-color--default
+    );
+  }
+
+  /* MODIFIERS */
+  .ts-button:where(.ts-modifier--dimmed) {
+    filter: brightness(85%);
+  }
+
+  /* VARIANTS STATES */
+  .ts-breadcrumbs__outer:where(.ts-variant--default):hover {
+    --breadcrumbs__outer-background-color: var(
+      --breadcrumbs__outer-background-color--hover
+    );
+  }
+
+  /* TOKENS */
+  :root {
+    --breadcrumbs__outer-background-color--default: var(--color-surface-6);
+    --breadcrumbs__outer-background-color--hover: var(--color-surface-8);
+    --breadcrumbs__outerend-background-color--default: var(--color-surface-8);
+    --breadcrumbs__innerend-text-color--default: var(--color-text-primary);
+  }
+}
diff --git a/packages/cyberstorm-theme/src/components/BreadCrumbs/BreadCrumbs.ts b/packages/cyberstorm-theme/src/components/BreadCrumbs/BreadCrumbs.ts
new file mode 100644
index 000000000..7436e335b
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/BreadCrumbs/BreadCrumbs.ts
@@ -0,0 +1,14 @@
+// Variants
+export const BreadCrumbsVariantsList = ["default"] as const;
+export type BreadCrumbsVariants = "default";
+
+// Sizes
+export const BreadCrumbsSizesList = ["medium"] as const;
+export type BreadCrumbsSizes = "medium";
+
+// Modifiers
+export const BreadCrumbsModifiersList = ["dimmed"] as const;
+// There is an issue with Typescript (eslint) and prettier disagreeing if
+// the type should have parentheses
+// prettier-ignore
+export type BreadCrumbsModifiers = typeof BreadCrumbsModifiersList[number];
diff --git a/packages/cyberstorm-theme/src/components/Button/Button.css b/packages/cyberstorm-theme/src/components/Button/Button.css
new file mode 100644
index 000000000..1ed249c99
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/Button/Button.css
@@ -0,0 +1,274 @@
+@layer theme-components {
+  /* theme base styles */
+  .ts-button {
+    --button-line-height: var(--line-height-auto);
+    --button-gap: 1rem;
+    --button-border-radius: 0.5rem;
+    --button-font-weight: var(--font-weight-bold);
+  }
+
+  /* SIZES */
+  .ts-button:where(.ts-size--xsmall) {
+    --button-height: var(--space-30);
+    --button-padding: var(--space-12);
+    --button-font-size: var(--font-size-body-sm);
+  }
+
+  .ts-button:where(.ts-size--small) {
+    --button-height: var(--space-36);
+    --button-padding: var(--space-12);
+    --button-font-size: var(--font-size-body-md);
+  }
+
+  .ts-button:where(.ts-size--medium) {
+    --button-height: var(--space-44);
+    --button-padding: var(--space-12) var(--space-16);
+    --button-font-size: var(--font-size-body-md);
+  }
+
+  .ts-button:where(.ts-size--big) {
+    --button-height: var(--space-44);
+    --button-padding: var(--space-12) var(--space-16);
+    --button-font-size: var(--font-size-body-lg);
+  }
+
+  /* VARIANTS DEFAULT STATE */
+  .ts-button:where(.ts-variant--primary) {
+    --button-background-color: var(--button-primary-bg-color--default);
+    --button-text-color: var(--button-primary-text-color--default);
+  }
+
+  .ts-button:where(.ts-variant--secondary) {
+    --button-background-color: var(--button-secondary-bg-color--default);
+    --button-text-color: var(--button-secondary-text-color--default);
+  }
+
+  .ts-button:where(.ts-variant--accent) {
+    --button-background-color: var(--button-accent-bg-color--default);
+    --button-text-color: var(--button-accent-text-color--default);
+  }
+
+  .ts-button:where(.ts-variant--special) {
+    --button-text-color: var(--button-special-text-color--default);
+    --button-border: var(--button-special-border--default);
+    --button-border-color: var(--button-special-border-color--default);
+
+    background: var(--button-special-background--default);
+  }
+
+  .ts-button:where(.ts-variant--success) {
+    --button-background-color: var(--button-success-bg-color--default);
+    --button-text-color: var(--button-success-text-color--default);
+  }
+
+  .ts-button:where(.ts-variant--info) {
+    --button-background-color: var(--button-info-bg-color--default);
+    --button-text-color: var(--button-info-text-color--default);
+  }
+
+  .ts-button:where(.ts-variant--warning) {
+    --button-background-color: var(--button-warning-bg-color--default);
+    --button-text-color: var(--button-warning-text-color--default);
+  }
+
+  .ts-button:where(.ts-variant--danger) {
+    --button-background-color: var(--button-danger-bg-color--default);
+    --button-text-color: var(--button-danger-text-color--default);
+  }
+
+  /* MODIFIERS */
+  .ts-button:where(:not(.ts-variant--special)):where(.ts-modifier--subtle):where(:not(:hover, :active)) {
+    --button-background-color: transparent;
+  }
+
+  .ts-button:where(.ts-variant--special):where(.ts-modifier--subtle):where(:not(:hover, :active)) {
+    background: transparent;
+  }
+
+  .ts-button[disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .ts-button:where(.ts-modifier--dimmed) {
+    filter: brightness(85%);
+  }
+
+  /* VARIANTS STATES */
+  .ts-button:where(.ts-variant--primary):hover {
+    --button-background-color: var(--button-primary-bg-color--hover);
+    --button-text-color: var(--button-primary-text-color--hover);
+  }
+
+  .ts-button:where(.ts-variant--secondary):hover {
+    --button-background-color: var(--button-secondary-bg-color--hover);
+    --button-text-color: var(--button-secondary-text-color--hover);
+  }
+
+  .ts-button:where(.ts-variant--accent):hover {
+    --button-background-color: var(--button-accent-bg-color--hover);
+    --button-text-color: var(--button-accent-text-color--hover);
+  }
+
+  .ts-button:where(.ts-variant--special):hover {
+    --button-text-color: var(--button-special-text-color--hover);
+    --button-border: var(--button-special-border--hover);
+    --button-border-color: var(--button-special-border-color--hover);
+
+    background: var(--button-special-background--hover);
+  }
+
+  .ts-button:where(.ts-variant--success):hover {
+    --button-background-color: var(--button-success-bg-color--hover);
+    --button-text-color: var(--button-success-text-color--hover);
+  }
+
+  .ts-button:where(.ts-variant--info):hover {
+    --button-background-color: var(--button-info-bg-color--hover);
+    --button-text-color: var(--button-info-text-color--hover);
+  }
+
+  .ts-button:where(.ts-variant--warning):hover {
+    --button-background-color: var(--button-warning-bg-color--hover);
+    --button-text-color: var(--button-warning-text-color--hover);
+  }
+
+  .ts-button:where(.ts-variant--danger):hover {
+    --button-background-color: var(--button-danger-bg-color--hover);
+    --button-text-color: var(--button-danger-text-color--hover);
+  }
+
+  .ts-button:where(.ts-variant--primary):active {
+    --button-background-color: var(--button-primary-bg-color--active);
+    --button-text-color: var(--button-primary-text-color--active);
+  }
+
+  .ts-button:where(.ts-variant--secondary):active {
+    --button-background-color: var(--button-secondary-bg-color--active);
+    --button-text-color: var(--button-secondary-text-color--active);
+  }
+
+  .ts-button:where(.ts-variant--accent):active {
+    --button-background-color: var(--button-accent-bg-color--active);
+    --button-text-color: var(--button-accent-text-color--active);
+  }
+
+  .ts-button:where(.ts-variant--special):active {
+    --button-text-color: var(--button-special-text-color--active);
+    --button-border: var(--button-special-border--active);
+    --button-border-color: var(--button-special-border-color--active);
+
+    background: var(--button-special-background--active);
+  }
+
+  .ts-button:where(.ts-variant--success):active {
+    --button-background-color: var(--button-success-bg-color--active);
+    --button-text-color: var(--button-success-text-color--active);
+  }
+
+  .ts-button:where(.ts-variant--info):active {
+    --button-background-color: var(--button-info-bg-color--active);
+    --button-text-color: var(--button-info-text-color--active);
+  }
+
+  .ts-button:where(.ts-variant--warning):active {
+    --button-background-color: var(--button-warning-bg-color--active);
+    --button-text-color: var(--button-warning-text-color--active);
+  }
+
+  .ts-button:where(.ts-variant--danger):active {
+    --button-background-color: var(--button-danger-bg-color--active);
+    --button-text-color: var(--button-danger-text-color--active);
+  }
+
+  /* TOKENS */
+  :root {
+    --button-danger-bg-color--active: var(--color-accent-red-2);
+    --button-danger-bg-color--default: var(--color-accent-red-4);
+    --button-danger-bg-color--hover: var(--color-accent-red-3);
+    --button-danger-text-color--active: var(--color-accent-red-11);
+    --button-danger-text-color--default: var(--color-accent-red-11);
+    --button-danger-text-color--hover: var(--color-accent-red-11);
+    --button-info-bg-color--active: var(--color-accent-blue-2);
+    --button-info-bg-color--default: var(--color-accent-blue-4);
+    --button-info-bg-color--hover: var(--color-accent-blue-3);
+    --button-info-text-color--active: var(--color-accent-blue-11);
+    --button-info-text-color--default: var(--color-accent-blue-11);
+    --button-info-text-color--hover: var(--color-accent-blue-11);
+    --button-primary-bg-color--active: hsl(256deg 60% 42%);
+    --button-primary-bg-color--default: hsl(256deg 60% 52%);
+    --button-primary-bg-color--hover: hsl(256deg 67% 56%);
+    --button-primary-text-color--active: var(--color-text-primary);
+    --button-primary-text-color--default: var(--color-text-primary);
+    --button-primary-text-color--hover: var(--color-text-primary);
+    --button-secondary-bg-color--active: var(--color-surface-a6);
+    --button-secondary-bg-color--default: var(--color-surface-a7);
+    --button-secondary-bg-color--hover: var(--color-surface-a8);
+    --button-secondary-text-color--active: var(--color-text-primary);
+    --button-secondary-text-color--default: var(--color-text-primary);
+    --button-secondary-text-color--hover: var(--color-text-primary);
+    --button-success-bg-color--active: var(--color-accent-green-2);
+    --button-success-bg-color--default: var(--color-accent-green-4);
+    --button-success-bg-color--hover: var(--color-accent-green-3);
+    --button-success-text-color--active: var(--color-accent-green-11);
+    --button-success-text-color--default: var(--color-accent-green-11);
+    --button-success-text-color--hover: var(--color-accent-green-11);
+    --button-warning-bg-color--active: var(--color-accent-yellow-2);
+    --button-warning-bg-color--default: var(--color-accent-yellow-4);
+    --button-warning-bg-color--hover: var(--color-accent-yellow-3);
+    --button-warning-text-color--active: var(--color-accent-yellow-11);
+    --button-warning-text-color--default: var(--color-accent-yellow-11);
+    --button-warning-text-color--hover: var(--color-accent-yellow-11);
+    --button-special-text-color--active: var(--color-text-primary);
+    --button-special-text-color--default: var(--color-text-primary);
+    --button-special-text-color--hover: var(--color-text-primary);
+    --button-special-border--active: 2px solid;
+    --button-special-border--default: 2px solid;
+    --button-special-border--hover: 2px solid;
+    --button-special-border-color--active: transparent;
+    --button-special-border-color--default: transparent;
+    --button-special-border-color--hover: transparent;
+    --button-special-background--active: linear-gradient(
+          284deg,
+          hsl(203deg 80% 21% / 1) 0%,
+          hsl(155deg 46% 23% / 1) 100%
+        )
+        padding-box,
+      linear-gradient(
+          284deg,
+          hsl(154deg 65% 67% / 1) 0%,
+          hsl(203deg 92% 63% / 1) 100%
+        )
+        border-box;
+    --button-special-background--default: linear-gradient(
+          284deg,
+          hsl(275deg 64% 11% / 1) 0%,
+          hsl(156deg 46% 12% / 1) 100%
+        )
+        padding-box,
+      linear-gradient(
+          284deg,
+          hsl(276deg 77% 54% / 1) 0%,
+          hsl(158deg 100% 57% / 1) 100%
+        )
+        border-box;
+    --button-special-background--hover: linear-gradient(
+          284deg,
+          hsl(203deg 80% 21% / 1) 0%,
+          hsl(155deg 46% 23% / 1) 100%
+        )
+        padding-box,
+      linear-gradient(
+          284deg,
+          hsl(154deg 65% 67% / 1) 0%,
+          hsl(203deg 92% 63% / 1) 100%
+        )
+        border-box;
+    --button-accent-bg-color--active: var(--color-cyber-green-6);
+    --button-accent-bg-color--default: var(--color-cyber-green-7);
+    --button-accent-bg-color--hover: var(--color-cyber-green-9);
+    --button-accent-text-color--active: var(--color-cyber-green-2);
+    --button-accent-text-color--default: var(--color-cyber-green-2);
+    --button-accent-text-color--hover: var(--color-cyber-green-2);
+  }
+}
diff --git a/packages/cyberstorm-theme/src/components/Button/Button.ts b/packages/cyberstorm-theme/src/components/Button/Button.ts
new file mode 100644
index 000000000..016bff2bd
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/Button/Button.ts
@@ -0,0 +1,31 @@
+// Variants
+export const ButtonVariantsList = [
+  "primary",
+  "secondary",
+  "accent",
+  "special",
+  "info",
+  "success",
+  "warning",
+  "danger",
+] as const;
+export type ButtonVariants =
+  | "primary"
+  | "secondary"
+  | "accent"
+  | "special"
+  | "info"
+  | "success"
+  | "warning"
+  | "danger";
+
+// Sizes
+export const ButtonSizesList = ["big", "medium", "small", "xsmall"] as const;
+export type ButtonSizes = "big" | "medium" | "small" | "xsmall";
+
+// Modifiers
+export const ButtonModifiersList = ["disabled", "subtle", "dimmed"] as const;
+// There is an issue with Typescript (eslint) and prettier disagreeing if
+// the type should have parentheses
+// prettier-ignore
+export type ButtonModifiers = typeof ButtonModifiersList[number];
diff --git a/packages/cyberstorm-theme/src/components/Button/IconButton.css b/packages/cyberstorm-theme/src/components/Button/IconButton.css
new file mode 100644
index 000000000..b6d780418
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/Button/IconButton.css
@@ -0,0 +1,264 @@
+@layer theme-components {
+  /* theme base styles */
+  .ts-iconbutton {
+    --iconbutton-border-radius: 0.5rem;
+  }
+
+  /* SIZES */
+  .ts-iconbutton:where(.ts-size--xsmall) {
+    --iconbutton-height: var(--space-30);
+    --iconbutton-width: var(--space-30);
+  }
+
+  .ts-iconbutton:where(.ts-size--small) {
+    --iconbutton-height: var(--space-36);
+    --iconbutton-width: var(--space-36);
+  }
+
+  .ts-iconbutton:where(.ts-size--medium) {
+    --iconbutton-height: var(--space-44);
+    --iconbutton-width: var(--space-44);
+  }
+
+  /* VARIANTS DEFAULT STATE */
+  .ts-iconbutton:where(.ts-variant--primary) {
+    --iconbutton-background-color: var(--iconbutton-primary-bg-color--default);
+    --iconbutton-icon-color: var(--iconbutton-primary-icon-color--default);
+  }
+
+  .ts-iconbutton:where(.ts-variant--secondary) {
+    --iconbutton-background-color: var(
+      --iconbutton-secondary-bg-color--default
+    );
+    --iconbutton-icon-color: var(--iconbutton-secondary-icon-color--default);
+  }
+
+  .ts-iconbutton:where(.ts-variant--accent) {
+    --iconbutton-background-color: var(--iconbutton-accent-bg-color--default);
+    --iconbutton-icon-color: var(--iconbutton-accent-icon-color--default);
+  }
+
+  .ts-iconbutton:where(.ts-variant--special) {
+    --iconbutton-icon-color: var(--iconbutton-special-icon-color--default);
+    --iconbutton-border: var(--iconbutton-special-border--default);
+    --iconbutton-border-color: var(--button-special-border-color--default);
+
+    background: var(--iconbutton-special-background--default);
+  }
+
+  .ts-iconbutton:where(.ts-variant--success) {
+    --iconbutton-background-color: var(--iconbutton-success-bg-color--default);
+    --iconbutton-icon-color: var(--iconbutton-success-icon-color--default);
+  }
+
+  .ts-iconbutton:where(.ts-variant--info) {
+    --iconbutton-background-color: var(--iconbutton-info-bg-color--default);
+    --iconbutton-icon-color: var(--iconbutton-info-icon-color--default);
+  }
+
+  .ts-iconbutton:where(.ts-variant--warning) {
+    --iconbutton-background-color: var(--iconbutton-warning-bg-color--default);
+    --iconbutton-icon-color: var(--iconbutton-warning-icon-color--default);
+  }
+
+  .ts-iconbutton:where(.ts-variant--danger) {
+    --iconbutton-background-color: var(--iconbutton-danger-bg-color--default);
+    --iconbutton-icon-color: var(--iconbutton-danger-icon-color--default);
+  }
+
+  /* MODIFIERS */
+  .ts-iconbutton:where(:not(.ts-variant--special)):where(.ts-modifier--subtle):where(:not(:hover, :active)) {
+    --iconbutton-background-color: transparent;
+  }
+
+  .ts-iconbutton:where(.ts-variant--special):where(.ts-modifier--subtle):where(:not(:hover, :active)) {
+    background: transparent;
+  }
+
+  .ts-iconbutton[disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .ts-button:where(.ts-modifier--dimmed) {
+    filter: brightness(85%);
+  }
+
+  /* VARIANTS STATES */
+  .ts-iconbutton:where(.ts-variant--primary):hover {
+    --iconbutton-background-color: var(--iconbutton-primary-bg-color--hover);
+    --iconbutton-icon-color: var(--iconbutton-primary-icon-color--hover);
+  }
+
+  .ts-iconbutton:where(.ts-variant--secondary):hover {
+    --iconbutton-background-color: var(--iconbutton-secondary-bg-color--hover);
+    --iconbutton-icon-color: var(--iconbutton-secondary-icon-color--hover);
+  }
+
+  .ts-iconbutton:where(.ts-variant--accent):hover {
+    --iconbutton-background-color: var(--iconbutton-accent-bg-color--hover);
+    --iconbutton-icon-color: var(--iconbutton-accent-icon-color--hover);
+  }
+
+  .ts-iconbutton:where(.ts-variant--special):hover {
+    --iconbutton-icon-color: var(--iconbutton-special-icon-color--hover);
+    --iconbutton-border: var(--iconbutton-special-border--hover);
+    --iconbutton-border-color: var(--button-special-border-color--hover);
+
+    background: var(--iconbutton-special-background--hover);
+  }
+
+  .ts-iconbutton:where(.ts-variant--success):hover {
+    --iconbutton-background-color: var(--iconbutton-success-bg-color--hover);
+    --iconbutton-icon-color: var(--iconbutton-success-icon-color--hover);
+  }
+
+  .ts-iconbutton:where(.ts-variant--info):hover {
+    --iconbutton-background-color: var(--iconbutton-info-bg-color--hover);
+    --iconbutton-icon-color: var(--iconbutton-info-icon-color--hover);
+  }
+
+  .ts-iconbutton:where(.ts-variant--warning):hover {
+    --iconbutton-background-color: var(--iconbutton-warning-bg-color--hover);
+    --iconbutton-icon-color: var(--iconbutton-warning-icon-color--hover);
+  }
+
+  .ts-iconbutton:where(.ts-variant--danger):hover {
+    --iconbutton-background-color: var(--iconbutton-danger-bg-color--hover);
+    --iconbutton-icon-color: var(--iconbutton-danger-icon-color--hover);
+  }
+
+  .ts-iconbutton:where(.ts-variant--primary):active {
+    --iconbutton-background-color: var(--iconbutton-primary-bg-color--active);
+    --iconbutton-icon-color: var(--iconbutton-primary-icon-color--active);
+  }
+
+  .ts-iconbutton:where(.ts-variant--secondary):active {
+    --iconbutton-background-color: var(--iconbutton-secondary-bg-color--active);
+    --iconbutton-icon-color: var(--iconbutton-secondary-icon-color--active);
+  }
+
+  .ts-iconbutton:where(.ts-variant--accent):active {
+    --iconbutton-background-color: var(--iconbutton-accent-bg-color--active);
+    --iconbutton-icon-color: var(--iconbutton-accent-icon-color--active);
+  }
+
+  .ts-iconbutton:where(.ts-variant--special):active {
+    --iconbutton-icon-color: var(--iconbutton-special-icon-color--active);
+    --iconbutton-border: var(--iconbutton-special-border--active);
+    --iconbutton-border-color: var(--button-special-border-color--active);
+
+    background: var(--iconbutton-special-background--active);
+  }
+
+  .ts-iconbutton:where(.ts-variant--success):active {
+    --iconbutton-background-color: var(--iconbutton-success-bg-color--active);
+    --iconbutton-icon-color: var(--iconbutton-success-icon-color--active);
+  }
+
+  .ts-iconbutton:where(.ts-variant--info):active {
+    --iconbutton-background-color: var(--iconbutton-info-bg-color--active);
+    --iconbutton-icon-color: var(--iconbutton-info-icon-color--active);
+  }
+
+  .ts-iconbutton:where(.ts-variant--warning):active {
+    --iconbutton-background-color: var(--iconbutton-warning-bg-color--active);
+    --iconbutton-icon-color: var(--iconbutton-warning-icon-color--active);
+  }
+
+  .ts-iconbutton:where(.ts-variant--danger):active {
+    --iconbutton-background-color: var(--iconbutton-danger-bg-color--active);
+    --iconbutton-icon-color: var(--iconbutton-danger-icon-color--active);
+  }
+
+  /* TOKENS */
+  :root {
+    --iconbutton-danger-bg-color--active: var(--color-accent-red-2);
+    --iconbutton-danger-bg-color--default: var(--color-accent-red-4);
+    --iconbutton-danger-bg-color--hover: var(--color-accent-red-3);
+    --iconbutton-danger-icon-color--active: var(--color-accent-red-11);
+    --iconbutton-danger-icon-color--default: var(--color-accent-red-11);
+    --iconbutton-danger-icon-color--hover: var(--color-accent-red-11);
+    --iconbutton-info-bg-color--active: var(--color-accent-blue-2);
+    --iconbutton-info-bg-color--default: var(--color-accent-blue-4);
+    --iconbutton-info-bg-color--hover: var(--color-accent-blue-3);
+    --iconbutton-info-icon-color--active: var(--color-accent-blue-11);
+    --iconbutton-info-icon-color--default: var(--color-accent-blue-11);
+    --iconbutton-info-icon-color--hover: var(--color-accent-blue-11);
+    --iconbutton-primary-bg-color--active: hsl(256deg 60% 42%);
+    --iconbutton-primary-bg-color--default: hsl(256deg 60% 52%);
+    --iconbutton-primary-bg-color--hover: hsl(256deg 67% 56%);
+    --iconbutton-primary-icon-color--active: var(--text-primary);
+    --iconbutton-primary-icon-color--default: var(--text-primary);
+    --iconbutton-primary-icon-color--hover: var(--text-primary);
+    --iconbutton-secondary-bg-color--active: var(--color-surface-a6);
+    --iconbutton-secondary-bg-color--default: var(--color-surface-a7);
+    --iconbutton-secondary-bg-color--hover: var(--color-surface-a8);
+    --iconbutton-secondary-icon-color--active: var(--text-primary);
+    --iconbutton-secondary-icon-color--default: var(--text-primary);
+    --iconbutton-secondary-icon-color--hover: var(--text-primary);
+    --iconbutton-success-bg-color--active: var(--color-accent-green-2);
+    --iconbutton-success-bg-color--default: var(--color-accent-green-4);
+    --iconbutton-success-bg-color--hover: var(--color-accent-green-3);
+    --iconbutton-success-icon-color--active: var(--color-accent-green-11);
+    --iconbutton-success-icon-color--default: var(--color-accent-green-11);
+    --iconbutton-success-icon-color--hover: var(--color-accent-green-11);
+    --iconbutton-warning-bg-color--active: var(--color-accent-yellow-2);
+    --iconbutton-warning-bg-color--default: var(--color-accent-yellow-4);
+    --iconbutton-warning-bg-color--hover: var(--color-accent-yellow-3);
+    --iconbutton-warning-icon-color--active: var(--color-accent-yellow-11);
+    --iconbutton-warning-icon-color--default: var(--color-accent-yellow-11);
+    --iconbutton-warning-icon-color--hover: var(--color-accent-yellow-11);
+    --iconbutton-special-icon-color--active: var(--color-text-primary);
+    --iconbutton-special-icon-color--default: var(--color-text-primary);
+    --iconbutton-special-icon-color--hover: var(--color-text-primary);
+    --iconbutton-special-border--active: 2px solid;
+    --iconbutton-special-border--default: 2px solid;
+    --iconbutton-special-border--hover: 2px solid;
+    --iconbutton-special-border-color--active: transparent;
+    --iconbutton-special-border-color--default: transparent;
+    --iconbutton-special-border-color--hover: transparent;
+    --iconbutton-special-background--active: linear-gradient(
+          284deg,
+          hsl(203deg 80% 21% / 1) 0%,
+          hsl(155deg 46% 23% / 1) 100%
+        )
+        padding-box,
+      linear-gradient(
+          284deg,
+          hsl(154deg 65% 67% / 1) 0%,
+          hsl(203deg 92% 63% / 1) 100%
+        )
+        border-box;
+    --iconbutton-special-background--default: linear-gradient(
+          284deg,
+          hsl(275deg 64% 11% / 1) 0%,
+          hsl(156deg 46% 12% / 1) 100%
+        )
+        padding-box,
+      linear-gradient(
+          284deg,
+          hsl(276deg 77% 54% / 1) 0%,
+          hsl(158deg 100% 57% / 1) 100%
+        )
+        border-box;
+    --iconbutton-special-background--hover: linear-gradient(
+          284deg,
+          hsl(203deg 80% 21% / 1) 0%,
+          hsl(155deg 46% 23% / 1) 100%
+        )
+        padding-box,
+      linear-gradient(
+          284deg,
+          hsl(154deg 65% 67% / 1) 0%,
+          hsl(203deg 92% 63% / 1) 100%
+        )
+        border-box;
+    --iconbutton-accent-bg-color--active: var(--color-cyber-green-6);
+    --iconbutton-accent-bg-color--default: var(--color-cyber-green-7);
+    --iconbutton-accent-bg-color--hover: var(--color-cyber-green-9);
+    --iconbutton-accent-icon-color--active: var(--color-cyber-green-2);
+    --iconbutton-accent-icon-color--default: var(--color-cyber-green-2);
+    --iconbutton-accent-icon-color--hover: var(--color-cyber-green-2);
+  }
+}
diff --git a/packages/cyberstorm-theme/src/components/Button/IconButton.ts b/packages/cyberstorm-theme/src/components/Button/IconButton.ts
new file mode 100644
index 000000000..13c7c58d2
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/Button/IconButton.ts
@@ -0,0 +1,37 @@
+// Variants
+export const IconButtonVariantsList = [
+  "primary",
+  "secondary",
+  "minimal",
+  "accent",
+  "special",
+  "info",
+  "success",
+  "warning",
+  "danger",
+] as const;
+export type IconButtonVariants =
+  | "primary"
+  | "secondary"
+  | "minimal"
+  | "accent"
+  | "special"
+  | "info"
+  | "success"
+  | "warning"
+  | "danger";
+
+// Sizes
+export const IconButtonSizesList = ["medium", "small", "xsmall"] as const;
+export type IconButtonSizes = "medium" | "small" | "xsmall";
+
+// Modifiers
+export const IconButtonModifiersList = [
+  "disabled",
+  "subtle",
+  "dimmed",
+] as const;
+// There is an issue with Typescript (eslint) and prettier disagreeing if
+// the type should have parentheses
+// prettier-ignore
+export type IconButtonModifiers = typeof IconButtonModifiersList[number];
diff --git a/packages/cyberstorm-theme/src/components/DropDown/DropDown.css b/packages/cyberstorm-theme/src/components/DropDown/DropDown.css
new file mode 100644
index 000000000..f052b87ae
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/DropDown/DropDown.css
@@ -0,0 +1,51 @@
+@layer theme-components {
+  /* DROPDOWN ROOT */
+
+  /* Missing tokens */
+  .ts-dropdown:where(.ts-variant--primary) {
+    --dropdown-color: var(--color-surface-5);
+    --dropdown-background-color: var(--color-surface-2);
+    --dropdown-border-color: var(--color-surface-6);
+    --dropdown-border: var(--space-px) var(--dropdown-border-color) solid;
+    --dropdown-border-radius: var(--radius-md);
+    --dropdown-box-shadow: var(--shadow-lg);
+    --dropdown-animation: fade-in var(--animation-duration-md) ease;
+    --dropdown-padding: var(--space-8) 0;
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  /* DROPDOWN ITEM */
+
+  /* Missing tokens */
+  .ts-dropdown__item:where(.ts-variant--primary) {
+    --dropdown__item-padding: var(--space-12) var(--space-16);
+    --dropdown__item-color: var(--color-surface-8);
+    --dropdown__item-background-color: var(--color-surface-2);
+  }
+
+  .ts-dropdown__item:where(.ts-variant--primary)[data-highlighted] {
+    --dropdown__item-color: var(--color-surface-2);
+    --dropdown__item-background-color: var(--color-surface-6);
+  }
+
+  /* DROPDOWN DIVIDER */
+
+  /* Missing tokens */
+  .ts-dropdown__divider:where(.ts-variant--primary) {
+    --dropdown__divider-height: var(--space-px);
+    --dropdown__divider-margin: var(--space-8) 0;
+    --dropdown__divider-background-color: var(
+      --color-surface-6,
+      var(--color-text-primary, red)
+    );
+  }
+}
diff --git a/packages/cyberstorm-theme/src/components/DropDown/DropDown.ts b/packages/cyberstorm-theme/src/components/DropDown/DropDown.ts
new file mode 100644
index 000000000..3b267e2c1
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/DropDown/DropDown.ts
@@ -0,0 +1,51 @@
+// DROPDOWN ROOT
+// Variants
+export const DropDownVariantsList = ["primary"] as const;
+export type DropDownVariants = "primary";
+
+// Sizes
+export const DropDownSizesList = ["medium"] as const;
+export type DropDownSizes = "medium";
+
+// Modifiers
+export const DropDownModifiersList = ["disabled", "subtle", "dimmed"] as const;
+// There is an issue with Typescript (eslint) and prettier disagreeing if
+// the type should have parentheses
+// prettier-ignore
+export type DropDownModifiers = typeof DropDownModifiersList[number];
+
+// DROPDOWN ITEM
+// Variants
+export const DropDownItemVariantsList = ["primary"] as const;
+export type DropDownItemVariants = "primary";
+
+// Sizes
+export const DropDownItemSizesList = ["medium"] as const;
+export type DropDownItemSizes = "medium";
+
+// Modifiers
+export const DropDownItemModifiersList = [
+  "disabled",
+  "subtle",
+  "dimmed",
+] as const;
+// There is an issue with Typescript (eslint) and prettier disagreeing if
+// the type should have parentheses
+// prettier-ignore
+export type DropDownItemModifiers = typeof DropDownItemModifiersList[number];
+
+// DROPDOWN DIVIDER
+// Variants
+export const DropDownDividerVariantsList = ["primary"] as const;
+export type DropDownDividerVariants = "primary";
+
+// Sizes
+export const DropDownDividerSizesList = ["medium"] as const;
+export type DropDownDividerSizes = "medium";
+
+// Modifiers
+export const DropDownDividerModifiersList = ["subtle", "dimmed"] as const;
+// There is an issue with Typescript (eslint) and prettier disagreeing if
+// the type should have parentheses
+// prettier-ignore
+export type DropDownDividerModifiers = typeof DropDownDividerModifiersList[number];
diff --git a/packages/cyberstorm-theme/src/components/Heading/Heading.css b/packages/cyberstorm-theme/src/components/Heading/Heading.css
new file mode 100644
index 000000000..8601dc7a4
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/Heading/Heading.css
@@ -0,0 +1,164 @@
+@layer theme-components {
+  /* Heading base tokens */
+  .ts-heading {
+    --heading-font-weight: var(--font-weight-bold);
+    --heading-font-family: var(--font-family--inter);
+    --heading-font-style: normal;
+    --heading-line-height: normal;
+  }
+
+  .ts-heading:where(.ts-size--1) {
+    --heading-font-weight: var(--font-weight-extra-bold);
+    --heading-font-size: var(--space-54);
+    --heading-font-family: var(--font-family--hubot);
+    --heading-line-height: 115%;
+  }
+
+  .ts-heading:where(.ts-size--2) {
+    --heading-font-size: var(--space-32);
+    --heading-line-height: var(--line-height-sm);
+  }
+
+  .ts-heading:where(.ts-size--3) {
+    --heading-font-size: var(--space-20);
+  }
+
+  .ts-heading:where(.ts-size--4) {
+    --heading-font-size: var(--space-16);
+  }
+
+  .ts-heading:where(.ts-size--5) {
+    --heading-font-size: var(--space-14);
+  }
+
+  .ts-heading:where(.ts-size--6) {
+    --heading-font-size: var(--space-12);
+  }
+
+  /* Display base tokens */
+  .ts-display {
+    --display-font-weight: var(--font-weight-bold);
+    --display-font-family: var(--font-family--inter);
+    --display-font-style: normal;
+    --display-line-height: var(--line-height-auto);
+  }
+
+  .ts-display:where(.ts-size--1) {
+    --display-font-weight: var(--font-weight-extra-bold);
+    --display-font-family: var(--font-family--hubot);
+    --display-font-size: var(--space-54);
+    --display-line-height: 115%; /* 62.1px */
+  }
+
+  .ts-display:where(.ts-size--2) {
+    --display-font-weight: var(--font-weight-extra-bold);
+    --display-font-family: var(--font-family--hubot);
+    --display-font-size: var(--space-51);
+  }
+
+  .ts-display:where(.ts-size--3) {
+    --display-font-weight: var(--font-weight-bold);
+    --display-font-family: var(--font-family--hubot);
+    --display-font-size: var(--space-38);
+  }
+
+  .ts-display:where(.ts-size--4) {
+    --display-font-size: var(--space-16);
+  }
+
+  .ts-display:where(.ts-size--5) {
+    --display-font-size: var(--space-14);
+  }
+
+  .ts-display:where(.ts-size--6) {
+    --display-font-size: var(--space-12);
+  }
+
+  /* VARIANTS DEFAULT STATE */
+  .ts-heading:where(.ts-variant--primary),
+  .ts-display:where(.ts-variant--primary) {
+    --heading-text-color: var(--heading-primary-text-color--default);
+  }
+
+  .ts-heading:where(.ts-variant--secondary),
+  .ts-display:where(.ts-variant--secondary) {
+    --heading-text-color: var(--heading-secondary-text-color--default);
+  }
+
+  .ts-heading:where(.ts-variant--tertiary),
+  .ts-display:where(.ts-variant--tertiary) {
+    --heading-text-color: var(--heading-tertiary-text-color--default);
+  }
+
+  .ts-heading:where(.ts-variant--accent),
+  .ts-display:where(.ts-variant--accent) {
+    --heading-text-color: var(--heading-accent-text-color--default);
+  }
+
+  .ts-heading:where(.ts-variant--special),
+  .ts-display:where(.ts-variant--special) {
+    --heading-text-color: var(--heading-special-text-color--default);
+  }
+
+  .ts-heading:where(.ts-variant--success),
+  .ts-display:where(.ts-variant--success) {
+    --heading-text-color: var(--heading-success-text-color--default);
+  }
+
+  .ts-heading:where(.ts-variant--info),
+  .ts-display:where(.ts-variant--info) {
+    --heading-text-color: var(--heading-info-text-color--default);
+  }
+
+  .ts-heading:where(.ts-variant--warning),
+  .ts-display:where(.ts-variant--warning) {
+    --heading-text-color: var(--heading-warning-text-color--default);
+  }
+
+  .ts-heading:where(.ts-variant--danger),
+  .ts-display:where(.ts-variant--danger) {
+    --heading-text-color: var(--heading-danger-text-color--default);
+  }
+
+  .ts-heading:where(.ts-variant--cyber),
+  .ts-display:where(.ts-variant--cyber) {
+    --heading-text-color: var(--heading-cyber-text-color--default);
+  }
+
+  /* TOKENS */
+  :root {
+    --heading-danger-text-color--default: var(--color-accent-red-7);
+    --heading-info-text-color--default: var(--color-accent-blue-7);
+    --heading-primary-text-color--default: var(--color-text-primary);
+    --heading-secondary-text-color--default: var(--color-text-secondary);
+    --heading-tertiary-text-color--default: var(--color-text-tertiary);
+    --heading-success-text-color--default: var(--color-accent-green-7);
+    --heading-warning-text-color--default: var(--color-accent-yellow-7);
+    --heading-special-text-color--default: linear-gradient(
+          284deg,
+          hsl(275deg 64% 11% / 1) 0%,
+          hsl(156deg 46% 12% / 1) 100%
+        )
+        padding-box,
+      linear-gradient(
+          284deg,
+          hsl(276deg 77% 54% / 1) 0%,
+          hsl(158deg 100% 57% / 1) 100%
+        )
+        border-box;
+    --heading-special-text-color--hover: linear-gradient(
+          284deg,
+          hsl(203deg 80% 21% / 1) 0%,
+          hsl(155deg 46% 23% / 1) 100%
+        )
+        padding-box,
+      linear-gradient(
+          284deg,
+          hsl(154deg 65% 67% / 1) 0%,
+          hsl(203deg 92% 63% / 1) 100%
+        )
+        border-box;
+    --heading-accent-text-color--default: var(--color-text-accent);
+    --heading-cyber-text-color--default: var(--color-cyber-green-7);
+  }
+}
diff --git a/packages/cyberstorm-theme/src/components/Heading/Heading.ts b/packages/cyberstorm-theme/src/components/Heading/Heading.ts
new file mode 100644
index 000000000..d485bf9a8
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/Heading/Heading.ts
@@ -0,0 +1,19 @@
+// Variants
+export const HeadingVariantsList = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "accent",
+] as const;
+export type HeadingVariants = "primary" | "secondary" | "tertiary" | "accent";
+
+// Sizes
+export const HeadingSizesList = ["1", "2", "3", "4", "5", "6"] as const;
+export type HeadingSizes = "1" | "2" | "3" | "4" | "5" | "6";
+
+// Modifiers
+export const HeadingModifiersList = ["subtle", "dimmed"] as const;
+// There is an issue with Typescript (eslint) and prettier disagreeing if
+// the type should have parentheses
+// prettier-ignore
+export type HeadingModifiers = typeof HeadingModifiersList[number];
diff --git a/packages/cyberstorm-theme/src/components/Icon/Icon.css b/packages/cyberstorm-theme/src/components/Icon/Icon.css
new file mode 100644
index 000000000..2aea7cfcc
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/Icon/Icon.css
@@ -0,0 +1,79 @@
+@layer theme-components {
+  /* VARIANTS DEFAULT STATE */
+  .ts-icon:where(.ts-variant--primary) {
+    --icon-color: var(--icon-primary-color--default);
+  }
+
+  .ts-icon:where(.ts-variant--secondary) {
+    --icon-color: var(--icon-secondary-color--default);
+  }
+
+  .ts-icon:where(.ts-variant--tertiary) {
+    --icon-color: var(--icon-tertiary-color--default);
+  }
+
+  .ts-icon:where(.ts-variant--accent) {
+    --icon-color: var(--icon-accent-color--default);
+  }
+
+  .ts-icon:where(.ts-variant--special) {
+    --icon-color: var(--icon-special-color--default);
+  }
+
+  .ts-icon:where(.ts-variant--success) {
+    --icon-color: var(--icon-success-color--default);
+  }
+
+  .ts-icon:where(.ts-variant--info) {
+    --icon-color: var(--icon-info-color--default);
+  }
+
+  .ts-icon:where(.ts-variant--warning) {
+    --icon-color: var(--icon-warning-color--default);
+  }
+
+  .ts-icon:where(.ts-variant--danger) {
+    --icon-color: var(--icon-danger-color--default);
+  }
+
+  .ts-icon:where(.ts-variant--cyber) {
+    --icon-color: var(--icon-cyber-color--default);
+  }
+
+  /* TOKENS */
+  :root {
+    --icon-danger-color--default: var(--color-accent-red-7);
+    --icon-info-color--default: var(--color-accent-blue-7);
+    --icon-primary-color--default: var(--color-text-primary);
+    --icon-secondary-color--default: var(--color-text-secondary);
+    --icon-tertiary-color--default: var(--color-text-tertiary);
+    --icon-success-color--default: var(--color-accent-green-7);
+    --icon-warning-color--default: var(--color-accent-yellow-7);
+    --icon-special-color--default: linear-gradient(
+          284deg,
+          hsl(275deg 64% 11% / 1) 0%,
+          hsl(156deg 46% 12% / 1) 100%
+        )
+        padding-box,
+      linear-gradient(
+          284deg,
+          hsl(276deg 77% 54% / 1) 0%,
+          hsl(158deg 100% 57% / 1) 100%
+        )
+        border-box;
+    --icon-special-color--hover: linear-gradient(
+          284deg,
+          hsl(203deg 80% 21% / 1) 0%,
+          hsl(155deg 46% 23% / 1) 100%
+        )
+        padding-box,
+      linear-gradient(
+          284deg,
+          hsl(154deg 65% 67% / 1) 0%,
+          hsl(203deg 92% 63% / 1) 100%
+        )
+        border-box;
+    --icon-accent-color--default: var(--color-text-accent);
+    --icon-cyber-color--default: var(--color-cyber-green-7);
+  }
+}
diff --git a/packages/cyberstorm-theme/src/components/Icon/Icon.ts b/packages/cyberstorm-theme/src/components/Icon/Icon.ts
new file mode 100644
index 000000000..9ef098db8
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/Icon/Icon.ts
@@ -0,0 +1,24 @@
+// Variants
+export const IconVariantsList = [
+  "primary",
+  "secondary",
+  "accent",
+  "tertiary",
+  "special",
+  "info",
+  "success",
+  "warning",
+  "danger",
+  "cyber",
+] as const;
+export type IconVariants =
+  | "primary"
+  | "secondary"
+  | "accent"
+  | "tertiary"
+  | "special"
+  | "info"
+  | "success"
+  | "warning"
+  | "danger"
+  | "cyber";
diff --git a/packages/cyberstorm-theme/src/components/Image/Image.css b/packages/cyberstorm-theme/src/components/Image/Image.css
new file mode 100644
index 000000000..96bd6e916
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/Image/Image.css
@@ -0,0 +1,11 @@
+@layer theme-components {
+  /* VARIANTS DEFAULT STATE */
+  .ts-image:where(.ts-variant--primary) {
+    --image-color: var(--image-primary-color--default);
+  }
+
+  /* TOKENS */
+  :root {
+    --image-primary-color--default: var(--color-text-primary);
+  }
+}
diff --git a/packages/cyberstorm-theme/src/components/Image/Image.ts b/packages/cyberstorm-theme/src/components/Image/Image.ts
new file mode 100644
index 000000000..034138faf
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/Image/Image.ts
@@ -0,0 +1,3 @@
+// Variants
+export const ImageVariantsList = ["primary"] as const;
+export type ImageVariants = "primary";
diff --git a/packages/cyberstorm-theme/src/components/Link/Link.css b/packages/cyberstorm-theme/src/components/Link/Link.css
new file mode 100644
index 000000000..bac9dfb02
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/Link/Link.css
@@ -0,0 +1,28 @@
+@layer theme-components {
+  /* VARIANTS DEFAULT STATE */
+  .ts-link:where(.ts-variant--primary) {
+    --link-color: var(--link-primary-color--default);
+  }
+
+  .ts-link:where(.ts-variant--cyber) {
+    --link-color: var(--link-cyber-color--default);
+  }
+
+  .ts-link:where(.ts-variant--primary):hover {
+    --link-color: var(--link-primary-color--hover);
+  }
+
+  .ts-link:where(.ts-variant--cyber):hover {
+    --link-color: var(--link-cyber-color--hover);
+
+    text-decoration: underline;
+  }
+
+  /* TOKENS */
+  :root {
+    --link-primary-color--default: var(--color-text-accent);
+    --link-primary-color--hover: var(--color-text-primary);
+    --link-cyber-color--default: var(--color-cyber-green-7);
+    --link-cyber-color--hover: var(--color-cyber-green-9);
+  }
+}
diff --git a/packages/cyberstorm-theme/src/components/Link/Link.ts b/packages/cyberstorm-theme/src/components/Link/Link.ts
new file mode 100644
index 000000000..fc8440038
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/Link/Link.ts
@@ -0,0 +1,3 @@
+// Variants
+export const LinkVariantsList = ["primary", "cyber"] as const;
+export type LinkVariants = "primary" | "cyber";
diff --git a/packages/cyberstorm-theme/src/components/Menu/Menu.css b/packages/cyberstorm-theme/src/components/Menu/Menu.css
new file mode 100644
index 000000000..4c60c9eda
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/Menu/Menu.css
@@ -0,0 +1,18 @@
+@layer theme-components {
+  /* VARIANTS DEFAULT STATE */
+  .ts-menu:where(.ts-variant--primary) {
+    --menu-color: var(--menu-primary-color--default);
+  }
+
+  .ts-menu:where(.ts-variant--primary):hover {
+    --menu-color: var(--menu-primary-color--hover);
+
+    text-decoration: none;
+  }
+
+  /* TOKENS */
+  :root {
+    --menu-primary-color--default: var(--color-text-accent);
+    --menu-primary-color--hover: var(--color-text-primary);
+  }
+}
diff --git a/packages/cyberstorm-theme/src/components/Menu/Menu.ts b/packages/cyberstorm-theme/src/components/Menu/Menu.ts
new file mode 100644
index 000000000..612cd4555
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/Menu/Menu.ts
@@ -0,0 +1,3 @@
+// Variants
+export const MenuVariantsList = ["primary"] as const;
+export type MenuVariants = "primary";
diff --git a/packages/cyberstorm-theme/src/components/Modal/Modal.css b/packages/cyberstorm-theme/src/components/Modal/Modal.css
new file mode 100644
index 000000000..74f033480
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/Modal/Modal.css
@@ -0,0 +1,18 @@
+@layer theme-components {
+  /* VARIANTS DEFAULT STATE */
+  .ts-modal:where(.ts-variant--primary) {
+    --modal-color: var(--modal-primary-color--default);
+  }
+
+  .ts-modal:where(.ts-variant--primary):hover {
+    --modal-color: var(--modal-primary-color--hover);
+
+    text-decoration: none;
+  }
+
+  /* TOKENS */
+  :root {
+    --modal-primary-color--default: var(--color-text-accent);
+    --modal-primary-color--hover: var(--color-text-primary);
+  }
+}
diff --git a/packages/cyberstorm-theme/src/components/Modal/Modal.ts b/packages/cyberstorm-theme/src/components/Modal/Modal.ts
new file mode 100644
index 000000000..cd93b22f1
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/Modal/Modal.ts
@@ -0,0 +1,3 @@
+// Variants
+export const ModalVariantsList = ["primary"] as const;
+export type ModalVariants = "primary";
diff --git a/packages/cyberstorm-theme/src/components/Select/Select.css b/packages/cyberstorm-theme/src/components/Select/Select.css
new file mode 100644
index 000000000..0f3a106e4
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/Select/Select.css
@@ -0,0 +1,90 @@
+@layer theme-components {
+  /* SELECT ROOT */
+
+  /* VARIANTS */
+  .ts-select:where(.ts-variant--default) {
+    --select-border-color: var(--color-surface-6);
+    --select-border-radius: var(--radius-md);
+    --select-border: var(--space-px) var(--select-border-color) solid;
+    --select-text-color: var(--color-text-primary);
+    --select-background-color: var(--color-surface-2);
+    --select-box-shadow: var(--shadow-lg);
+    --select-animation: fade-in var(--animation-duration-lg) ease;
+  }
+
+  /* SIZES */
+  .ts-select:where(.ts-size--medium) {
+    --select-gap: var(--gap-xxxs);
+    --select-padding: var(--space-8) 0;
+  }
+
+  /* SELECT ITEM */
+
+  /* VARIANTS */
+  .ts-select__item:where(.ts-variant--default) {
+    --select__item-color: var(--color-text-primary);
+  }
+
+  .ts-select__item:where(.ts-variant--default) > .ts-select__item__icon {
+    --select__item__icon-color: var(--color-text-tertiary);
+  }
+
+  .ts-select__item:where(.ts-variant--default)[data-highlighted] {
+    --select__item-color: var(--color-text-primary);
+    --select__item-background-color: var(--color-surface-6);
+  }
+
+  .ts-select__item:where(.ts-variant--default)[data-highlighted]
+    > .ts-select__item__icon {
+    --select__item__icon-color: var(--color-text-primary);
+  }
+
+  /* SIZES */
+  .ts-select__item:where(.ts-size--medium) {
+    --select__item-gap: var(--gap-sm);
+    --select__item-padding: var(--space-12) var(--space-16);
+    --select__item-font-weight: var(--font-weight-regular);
+    --select__item-font-size: var(--font-size-body-md);
+  }
+
+  /* SELECT TRIGGER */
+
+  /* SIZES */
+  .ts-select__trigger:where(.ts-size--medium) {
+    --select__trigger-font-weight: var(--font-weight-bold);
+    --select__trigger-font-size: var(--font-size-body-md);
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  :root {
+    --select-bg-color--default: var(--color-surface-3);
+    --select-border-color--default: var(--color-surface-a7);
+    --select-item-bg-color--default: hsl(0deg 0 0% / 0);
+    --select-item-bg-color--hover: var(--color-surface-a9);
+    --select-item-icon-color--default: var(--color-text-tertiary);
+    --select-item-icon-color--hover: var(--color-text-primary);
+    --select-item-text-color--default: var(--color-text-primary);
+    --select-item-text-color--hover: var(--color-text-primary);
+    --select-item-danger-bg-color--default: hsl(0deg 0 0% / 0);
+    --select-item-danger-bg-color--hover: var(--color-accent-red-6);
+    --select-item-danger-icon-color--default: var(--color-accent-red-7);
+    --select-item-danger-icon-color--hover: hsl(0deg 0 100%);
+    --select-item-danger-text-color--default: var(--color-accent-red-7);
+    --select-item-danger-text-color--hover: hsl(0deg 0 100%);
+    --select-item-disabled-bg-color--default: hsl(0deg 0 0% / 0);
+    --select-item-disabled-bg-color--hover: hsl(0deg 0 0% / 0);
+    --select-item-disabled-icon-color--default: var(--color-text-tertiary);
+    --select-item-disabled-icon-color--hover: var(--color-text-tertiary);
+    --select-item-disabled-text-color--default: var(--color-text-tertiary);
+    --select-item-disabled-text-color--hover: var(--color-text-tertiary);
+  }
+}
diff --git a/packages/cyberstorm-theme/src/components/Select/Select.ts b/packages/cyberstorm-theme/src/components/Select/Select.ts
new file mode 100644
index 000000000..edc82b8b6
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/Select/Select.ts
@@ -0,0 +1,15 @@
+// SELECT ROOT
+// Variants
+export const SelectVariantsList = ["default"] as const;
+export type SelectVariants = "default";
+
+// Sizes
+export const SelectSizesList = ["medium"] as const;
+export type SelectSizes = "medium";
+
+// Modifiers
+export const SelectModifiersList = ["disabled"] as const;
+// There is an issue with Typescript (eslint) and prettier disagreeing if
+// the type should have parentheses
+// prettier-ignore
+export type SelectModifiers = typeof SelectModifiersList[number];
diff --git a/packages/cyberstorm-theme/src/components/Tag/Tag.css b/packages/cyberstorm-theme/src/components/Tag/Tag.css
new file mode 100644
index 000000000..1ed427364
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/Tag/Tag.css
@@ -0,0 +1,259 @@
+@layer theme-components {
+  /* theme base styles */
+  .ts-tag {
+    --tag-gap: 1rem;
+    --tag-font-weight: var(--font-weight-bold);
+  }
+
+  /* SIZES */
+  .ts-tag:where(.ts-size--small) {
+    --tag-gap: var(--gap-xxs);
+    --tag-padding-block: var(--tag-md-padding-block);
+    --tag-padding-inline: var(--tag-md-padding-inline);
+    --tag-border-radius: 6px;
+    --tag-font-size: var(--tag-md-font-size);
+  }
+
+  .ts-tag:where(.ts-size--medium) {
+    --tag-gap: var(--space-8);
+    --tag-padding-block: var(--tag-xs-padding-block);
+    --tag-padding-inline: var(--tag-xs-padding-inline);
+    --tag-border-radius: var(--radius-md);
+    --tag-font-size: var(--tag-xs-font-size);
+  }
+
+  /* VARIANTS DEFAULT STATE */
+  .ts-tag:where(.ts-variant--primary) {
+    --tag-color: var(--tag-light-primary-text-color--default);
+    --tag-background-color: var(--tag-light-primary-bg-color--default);
+  }
+
+  .ts-tag:where(.ts-variant--primary):where(.ts-modifier--dark) {
+    --tag-color: var(--tag-dark-primary-text-color--default);
+    --tag-background-color: var(--tag-dark-primary-bg-color--default);
+  }
+
+  .ts-tag:where(.ts-variant--blue) {
+    --tag-color: var(--tag-light-blue-text-color--default);
+    --tag-background-color: var(--tag-light-blue-bg-color--default);
+  }
+
+  .ts-tag:where(.ts-variant--blue):where(.ts-modifier--dark) {
+    --tag-color: var(--tag-dark-blue-text-color--default);
+    --tag-background-color: var(--tag-dark-blue-bg-color--default);
+  }
+
+  .ts-tag:where(.ts-variant--green) {
+    --tag-color: var(--tag-light-green-text-color--default);
+    --tag-background-color: var(--tag-light-green-bg-color--default);
+  }
+
+  .ts-tag:where(.ts-variant--green):where(.ts-modifier--dark) {
+    --tag-color: var(--tag-dark-green-text-color--default);
+    --tag-background-color: var(--tag-dark-green-bg-color--default);
+  }
+
+  .ts-tag:where(.ts-variant--yellow) {
+    --tag-color: var(--tag-light-yellow-text-color--default);
+    --tag-background-color: var(--tag-light-yellow-bg-color--default);
+  }
+
+  .ts-tag:where(.ts-variant--yellow):where(.ts-modifier--dark) {
+    --tag-color: var(--tag-dark-yellow-text-color--default);
+    --tag-background-color: var(--tag-dark-yellow-bg-color--default);
+  }
+
+  .ts-tag:where(.ts-variant--red) {
+    --tag-color: var(--tag-light-red-text-color--default);
+    --tag-background-color: var(--tag-light-red-bg-color--default);
+  }
+
+  .ts-tag:where(.ts-variant--red):where(.ts-modifier--dark) {
+    --tag-color: var(--tag-dark-red-text-color--default);
+    --tag-background-color: var(--tag-dark-red-bg-color--default);
+  }
+
+  .ts-tag:where(.ts-variant--pink) {
+    --tag-color: var(--tag-light-pink-text-color--default);
+    --tag-background-color: var(--tag-light-pink-bg-color--default);
+  }
+
+  .ts-tag:where(.ts-variant--pink):where(.ts-modifier--dark) {
+    --tag-color: var(--tag-dark-pink-text-color--default);
+    --tag-background-color: var(--tag-dark-pink-bg-color--default);
+  }
+
+  .ts-tag:where(.ts-variant--orange) {
+    --tag-color: var(--tag-light-orange-text-color--default);
+    --tag-background-color: var(--tag-light-orange-bg-color--default);
+  }
+
+  .ts-tag:where(.ts-variant--orange):where(.ts-modifier--dark) {
+    --tag-color: var(--tag-dark-orange-text-color--default);
+    --tag-background-color: var(--tag-dark-orange-bg-color--default);
+  }
+
+  .ts-tag:where(.ts-variant--purple) {
+    --tag-color: var(--tag-light-purple-text-color--default);
+    --tag-background-color: var(--tag-light-purple-bg-color--default);
+  }
+
+  .ts-tag:where(.ts-variant--purple):where(.ts-modifier--dark) {
+    --tag-color: var(--tag-dark-purple-text-color--default);
+    --tag-background-color: var(--tag-dark-purple-bg-color--default);
+  }
+
+  .ts-tag:where(.ts-variant--primary):where(.ts-modifier--hoverable):hover {
+    --tag-color: var(--tag-light-primary-text-color--hover);
+    --tag-background-color: var(--tag-light-primary-bg-color--hover);
+  }
+
+  .ts-tag:where(.ts-variant--primary):where(.ts-modifier--dark):where(.ts-modifier--hoverable):hover {
+    --tag-color: var(--tag-dark-primary-text-color--hover);
+    --tag-background-color: var(--tag-dark-primary-bg-color--hover);
+  }
+
+  .ts-tag:where(.ts-variant--blue):where(.ts-modifier--hoverable):hover {
+    --tag-color: var(--tag-light-blue-text-color--hover);
+    --tag-background-color: var(--tag-light-blue-bg-color--hover);
+  }
+
+  .ts-tag:where(.ts-variant--blue):where(.ts-modifier--dark):where(.ts-modifier--hoverable):hover {
+    --tag-color: var(--tag-dark-blue-text-color--hover);
+    --tag-background-color: var(--tag-dark-blue-bg-color--hover);
+  }
+
+  .ts-tag:where(.ts-variant--green):where(.ts-modifier--hoverable):hover {
+    --tag-color: var(--tag-light-green-text-color--hover);
+    --tag-background-color: var(--tag-light-green-bg-color--hover);
+  }
+
+  .ts-tag:where(.ts-variant--green):where(.ts-modifier--dark):where(.ts-modifier--hoverable):hover {
+    --tag-color: var(--tag-dark-green-text-color--hover);
+    --tag-background-color: var(--tag-dark-green-bg-color--hover);
+  }
+
+  .ts-tag:where(.ts-variant--yellow):where(.ts-modifier--hoverable):hover {
+    --tag-color: var(--tag-light-yellow-text-color--hover);
+    --tag-background-color: var(--tag-light-yellow-bg-color--hover);
+  }
+
+  .ts-tag:where(.ts-variant--yellow):where(.ts-modifier--dark):where(.ts-modifier--hoverable):hover {
+    --tag-color: var(--tag-dark-yellow-text-color--hover);
+    --tag-background-color: var(--tag-dark-yellow-bg-color--hover);
+  }
+
+  .ts-tag:where(.ts-variant--red):where(.ts-modifier--hoverable):hover {
+    --tag-color: var(--tag-light-red-text-color--hover);
+    --tag-background-color: var(--tag-light-red-bg-color--hover);
+  }
+
+  .ts-tag:where(.ts-variant--red):where(.ts-modifier--dark):where(.ts-modifier--hoverable):hover {
+    --tag-color: var(--tag-dark-red-text-color--hover);
+    --tag-background-color: var(--tag-dark-red-bg-color--hover);
+  }
+
+  .ts-tag:where(.ts-variant--pink):where(.ts-modifier--hoverable):hover {
+    --tag-color: var(--tag-light-pink-text-color--hover);
+    --tag-background-color: var(--tag-light-pink-bg-color--hover);
+  }
+
+  .ts-tag:where(.ts-variant--pink):where(.ts-modifier--dark):where(.ts-modifier--hoverable):hover {
+    --tag-color: var(--tag-dark-pink-text-color--hover);
+    --tag-background-color: var(--tag-dark-pink-bg-color--hover);
+  }
+
+  .ts-tag:where(.ts-variant--orange):where(.ts-modifier--hoverable):hover {
+    --tag-color: var(--tag-light-orange-text-color--hover);
+    --tag-background-color: var(--tag-light-orange-bg-color--hover);
+  }
+
+  .ts-tag:where(.ts-variant--orange):where(.ts-modifier--dark):where(.ts-modifier--hoverable):hover {
+    --tag-color: var(--tag-dark-orange-text-color--hover);
+    --tag-background-color: var(--tag-dark-orange-bg-color--hover);
+  }
+
+  .ts-tag:where(.ts-variant--purple):where(.ts-modifier--hoverable):hover {
+    --tag-color: var(--tag-light-purple-text-color--hover);
+    --tag-background-color: var(--tag-light-purple-bg-color--hover);
+  }
+
+  .ts-tag:where(.ts-variant--purple):where(.ts-modifier--dark):where(.ts-modifier--hoverable):hover {
+    --tag-color: var(--tag-dark-purple-text-color--hover);
+    --tag-background-color: var(--tag-dark-purple-bg-color--hover);
+  }
+
+  /* TOKENS */
+  :root {
+    --tag-dark-blue-bg-color--default: var(--color-accent-blue-2);
+    --tag-dark-blue-bg-color--hover: var(--color-accent-blue-3);
+    --tag-dark-blue-text-color--default: var(--color-accent-blue-9);
+    --tag-dark-blue-text-color--hover: var(--color-accent-blue-9);
+    --tag-dark-green-bg-color--default: var(--color-accent-green-2);
+    --tag-dark-green-bg-color--hover: var(--color-accent-green-3);
+    --tag-dark-green-text-color--default: var(--color-accent-green-9);
+    --tag-dark-green-text-color--hover: var(--color-accent-green-9);
+    --tag-dark-orange-bg-color--default: var(--color-accent-orange-2);
+    --tag-dark-orange-bg-color--hover: var(--color-accent-orange-3);
+    --tag-dark-orange-text-color--default: var(--color-accent-orange-9);
+    --tag-dark-orange-text-color--hover: var(--color-accent-orange-9);
+    --tag-dark-pink-bg-color--default: var(--color-accent-pink-2);
+    --tag-dark-pink-bg-color--hover: var(--color-accent-pink-3);
+    --tag-dark-pink-text-color--default: var(--color-accent-pink-9);
+    --tag-dark-pink-text-color--hover: var(--color-accent-pink-9);
+    --tag-dark-primary-bg-color--default: var(--color-surface-8);
+    --tag-dark-primary-bg-color--hover: var(--color-surface-9);
+    --tag-dark-primary-text-color--default: var(--color--primary);
+    --tag-dark-primary-text-color--hover: var(--color--primary);
+    --tag-dark-purple-bg-color--default: var(--color-purple-2);
+    --tag-dark-purple-bg-color--hover: var(--color-accent-purple-3);
+    --tag-dark-purple-text-color--default: var(--color-accent-purple-9);
+    --tag-dark-purple-text-color--hover: var(--color-accent-purple-9);
+    --tag-dark-red-bg-color--default: var(--color-accent-red-2);
+    --tag-dark-red-bg-color--hover: var(--color-accent-red-3);
+    --tag-dark-red-text-color--default: var(--color-accent-red-9);
+    --tag-dark-red-text-color--hover: var(--color-accent-red-9);
+    --tag-dark-yellow-bg-color--default: var(--color-accent-yellow-2);
+    --tag-dark-yellow-bg-color--hover: var(--color-accent-yellow-3);
+    --tag-dark-yellow-text-color--default: var(--color-accent-yellow-9);
+    --tag-dark-yellow-text-color--hover: var(--color-accent-yellow-9);
+    --tag-light-blue-bg-color--default: var(--color-accent-blue-7);
+    --tag-light-blue-bg-color--hover: var(--color-accent-blue-8);
+    --tag-light-blue-text-color--default: var(--color-accent-blue-1);
+    --tag-light-blue-text-color--hover: var(--color-accent-blue-1);
+    --tag-light-green-bg-color--default: var(--color-accent-green-7);
+    --tag-light-green-bg-color--hover: var(--color-accent-green-8);
+    --tag-light-green-text-color--default: var(--color-accent-green-1);
+    --tag-light-green-text-color--hover: var(--color-accent-green-1);
+    --tag-light-orange-bg-color--default: var(--color-accent-orange-7);
+    --tag-light-orange-bg-color--hover: var(--color-accent-orange-8);
+    --tag-light-orange-text-color--default: var(--color-accent-orange-1);
+    --tag-light-orange-text-color--hover: var(--color-accent-orange-1);
+    --tag-light-pink-bg-color--default: var(--color-accent-pink-7);
+    --tag-light-pink-bg-color--hover: var(--color-accent-pink-8);
+    --tag-light-pink-text-color--default: var(--color-accent-pink-1);
+    --tag-light-pink-text-color--hover: var(--color-accent-pink-1);
+    --tag-light-primary-bg-color--default: var(--color-surface-10);
+    --tag-light-primary-bg-color--hover: hsl(240deg 44% 55%);
+    --tag-light-primary-text-color--default: var(--color-text-primary);
+    --tag-light-primary-text-color--hover: var(--color-text-primary);
+    --tag-light-purple-bg-color--default: var(--color-accent-purple-7);
+    --tag-light-purple-bg-color--hover: var(--color-accent-purple-8);
+    --tag-light-purple-text-color--default: var(--color-accent-purple-1);
+    --tag-light-purple-text-color--hover: var(--color-accent-purple-1);
+    --tag-light-red-bg-color--default: var(--color-accent-red-7);
+    --tag-light-red-bg-color--hover: var(--color-accent-red-8);
+    --tag-light-red-text-color--default: var(--color-accent-red-1);
+    --tag-light-red-text-color--hover: var(--color-accent-red-1);
+    --tag-light-yellow-bg-color--default: var(--color-accent-yellow-7);
+    --tag-light-yellow-bg-color--hover: var(--color-accent-yellow-8);
+    --tag-light-yellow-text-color--default: var(--color-accent-yellow-1);
+    --tag-light-yellow-text-color--hover: var(--color-accent-yellow-1);
+    --tag-md-padding-block: var(--space-6);
+    --tag-md-padding-inline: var(--space-8);
+    --tag-md-font-size: var(--font-size-body-sm);
+    --tag-xs-padding-block: var(--space-4);
+    --tag-xs-padding-inline: var(--space-6);
+    --tag-xs-font-size: var(--font-size-body-sm);
+  }
+}
diff --git a/packages/cyberstorm-theme/src/components/Tag/Tag.ts b/packages/cyberstorm-theme/src/components/Tag/Tag.ts
new file mode 100644
index 000000000..e9165e164
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/Tag/Tag.ts
@@ -0,0 +1,31 @@
+// Variants
+export const TagVariantsList = [
+  "primary",
+  "blue",
+  "green",
+  "yellow",
+  "red",
+  "pink",
+  "orange",
+  "purple",
+] as const;
+export type TagVariants =
+  | "primary"
+  | "blue"
+  | "green"
+  | "yellow"
+  | "red"
+  | "pink"
+  | "orange"
+  | "purple";
+
+// Sizes
+export const TagSizesList = ["medium", "small"] as const;
+export type TagSizes = "medium" | "small";
+
+// Modifiers
+export const TagModifiersList = ["dark", "hoverable"] as const;
+// There is an issue with Typescript (eslint) and prettier disagreeing if
+// the type should have parentheses
+// prettier-ignore
+export type TagModifiers = typeof TagModifiersList[number];
diff --git a/packages/cyberstorm-theme/src/components/TextInput/TextInput.css b/packages/cyberstorm-theme/src/components/TextInput/TextInput.css
new file mode 100644
index 000000000..ad06a2151
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/TextInput/TextInput.css
@@ -0,0 +1,90 @@
+@layer theme-components {
+  .ts-textinput {
+    --textinput-width: 100%;
+    --textinput-padding: var(--space-8) var(--space-10);
+    --textinput-border: var(--border-width--2) solid
+      var(--textinput-border-color);
+    --textinput-border-radius: var(--radius-md);
+    --textinput-transition: ease-out var(--animation-duration-xs);
+    --textinput-border-color: transparent;
+    --textinput-text-color: var(--color-text-primary);
+    --textinput-background-color: var(--color-surface-a5);
+  }
+
+  .ts-textinput__wrapper {
+    --textinput__wrapper-width: auto;
+    --textinput__wrapper-line-height: var(--line-height-auto);
+    --textinput__wrapper-font-weight: var(--font-weight-regular);
+    --textinput__wrapper-font-size: var(--font-size-body-lg);
+  }
+
+  .ts-textinput[value] {
+    --textinput-text-color: var(--color-text-secondary);
+  }
+
+  .ts-textinput:where(.ts-size--default) {
+    --textinput-height: var(--space-44);
+    --textinput-padding: var(--space-10)
+      calc(var(--space-16) + var(--right-padding-bonus, 0px)) var(--space-10)
+      calc(var(--space-16) + var(--left-padding-bonus, 0px));
+  }
+
+  .ts-textinput:where(.ts-size--small) {
+    --textinput-height: var(--space-36);
+    --textinput-padding: var(--space-8)
+      calc(var(--space-16) + var(--right-padding-bonus, 0px)) var(--space-10)
+      calc(var(--space-16) + var(--left-padding-bonus, 0px));
+  }
+
+  .ts-textinput:where(.ts-textinput__haslefticon) {
+    --left-padding-bonus: var(--space-24);
+  }
+
+  .ts-textinput:where(.ts-textinput__hasclearvalue) {
+    --right-padding-bonus: var(--space-16);
+  }
+
+  .ts-textinput:hover {
+    --textinput-background-color: var(--color-surface-a6);
+    --textinput-border-color: var(--color-surface-a10);
+  }
+
+  .ts-textinput:focus-within {
+    --textinput-text-color: var(--color-text-primary);
+    --textinput-background-color: var(--color-black);
+    --textinput-border-color: var(--color-cyber-green-7);
+  }
+
+  .ts-textinput:has(+ .ts-textinput__clearvaluebutton:hover):not(:focus-within) {
+    --input-background-color: var(--color-surface-a6);
+    --border-color: var(--color-surface-a10);
+  }
+
+  .ts-textinput::placeholder {
+    --textinput__placeholder-color: var(--color-text--tertiary);
+    --textinput__placeholder-opacity: 1;
+  }
+
+  .ts-textinput__lefticon {
+    --ts-textinput__lefticon-position: absolute;
+    --ts-textinput__lefticon-margin: var(--space-10) var(--space-16);
+    --ts-textinput__lefticon-color: var(--color-text-tertiary);
+    --ts-textinput__lefticon-pointer-events: none;
+  }
+
+  .ts-textinput__righticon {
+    --ts-textinput__righticon-position: absolute;
+    --ts-textinput__righticon-padding: var(--space-14) var(--space-16);
+    --ts-textinput__righticon-color: var(--color-text-secondary);
+  }
+
+  .ts-textinput__clearvaluebutton {
+    --ts-textinput__clearvaluebutton-right: var(--space-16);
+    --ts-textinput__clearvaluebutton-color: var(--color-text-secondary);
+    --ts-textinput__clearvaluebutton-opacity: 0.5;
+  }
+
+  .ts-textinput__clearvaluebutton:hover {
+    --ts-textinput__clearvaluebutton-opacity: 1;
+  }
+}
diff --git a/packages/cyberstorm-theme/src/components/TextInput/TextInput.ts b/packages/cyberstorm-theme/src/components/TextInput/TextInput.ts
new file mode 100644
index 000000000..adb210bfc
--- /dev/null
+++ b/packages/cyberstorm-theme/src/components/TextInput/TextInput.ts
@@ -0,0 +1,14 @@
+// Variants
+export const TextInputVariantsList = ["primary"] as const;
+export type TextInputVariants = "primary";
+
+// Sizes
+export const TextInputSizesList = ["default", "textarea", "small"] as const;
+export type TextInputSizes = "default" | "textarea" | "small";
+
+// Modifiers
+export const TextInputModifiersList = ["disabled", "subtle", "dimmed"] as const;
+// There is an issue with Typescript (eslint) and prettier disagreeing if
+// the type should have parentheses
+// prettier-ignore
+export type TextInputModifiers = typeof TextInputModifiersList[number];
diff --git a/packages/cyberstorm-theme/src/index.tsx b/packages/cyberstorm-theme/src/index.tsx
new file mode 100644
index 000000000..5f6735d95
--- /dev/null
+++ b/packages/cyberstorm-theme/src/index.tsx
@@ -0,0 +1,15 @@
+import "./styles/colors.css";
+import "./styles/globals.css";
+import "./styles/typography.css";
+import "./styles/reset.css";
+import "./components/Button/Button.css";
+import "./components/Button/IconButton.css";
+import "./components/Heading/Heading.css";
+import "./components/DropDown/DropDown.css";
+import "./components/TextInput/TextInput.css";
+import "./components/Icon/Icon.css";
+import "./components/BreadCrumbs/BreadCrumbs.css";
+import "./components/Select/Select.css";
+import "./components/Tag/Tag.css";
+import "./components/Link/Link.css";
+import "./components/Image/Image.css";
diff --git a/packages/cyberstorm-theme/src/styles/colors.css b/packages/cyberstorm-theme/src/styles/colors.css
new file mode 100644
index 000000000..a0b503bb6
--- /dev/null
+++ b/packages/cyberstorm-theme/src/styles/colors.css
@@ -0,0 +1,138 @@
+@layer colors {
+  :root {
+    /* Figma common colors */
+    --skeletor-bg: var(--color-surface-a3);
+    --body-bg-color: var(--color-surface-3);
+    --body-bg-color-a: hsl(240deg 38% 13% / 0.85);
+    --border-default: var(--color-surface-a7);
+    --border-dim: var(--color-surface-a6);
+    --datalist-row-bg-color: var(--color-surface-a3);
+    --surface-dim: var(--color-surface-a3);
+    --surface-dimmer: var(--color-surface-a2);
+
+    /* Misc */
+    --color-crown: var(--color-accent-yellow-5);
+    --animation-timing-1: cubic-bezier(0.16, 1, 0.3, 1);
+    --shadow-lg: 0 12px 24px 5px hsl(0deg 0 0% / 0.65);
+    --color-text-a--default: var(--color-cyber-green-7);
+    --color-text-a--hover: var(--color-cyber-green-6);
+
+    /* Color tokens */
+    --color-black: rgb(0 0 0);
+    --color-white: rgb(255 255 255);
+    --color-text-primary: hsl(240deg 5% 96% / 1);
+    --color-text-secondary: hsl(231deg 46% 86% / 1);
+    --color-text-tertiary: hsl(230deg 32% 74% / 1);
+    --color-text-accent: hsl(243deg 100% 88% / 1);
+    --color-accent-blue-1: hsl(203deg 78% 5%);
+    --color-accent-blue-10: hsl(203deg 92% 86%);
+    --color-accent-blue-11: hsl(202deg 92% 95%);
+    --color-accent-blue-2: hsl(202deg 78% 11%);
+    --color-accent-blue-3: hsl(202deg 80% 16%);
+    --color-accent-blue-4: hsl(203deg 80% 21%);
+    --color-accent-blue-5: hsl(203deg 79% 32%);
+    --color-accent-blue-6: hsl(203deg 80% 43%);
+    --color-accent-blue-7: hsl(203deg 92% 54%);
+    --color-accent-blue-8: hsl(203deg 92% 63%);
+    --color-accent-blue-9: hsl(203deg 92% 72%);
+    --color-accent-green-1: hsl(154deg 47% 6%);
+    --color-accent-green-10: hsl(155deg 65% 83%);
+    --color-accent-green-11: hsl(156deg 63% 92%);
+    --color-accent-green-2: hsl(156deg 46% 12%);
+    --color-accent-green-3: hsl(155deg 46% 17%);
+    --color-accent-green-4: hsl(155deg 46% 23%);
+    --color-accent-green-5: hsl(154deg 46% 35%);
+    --color-accent-green-6: hsl(154deg 46% 47%);
+    --color-accent-green-7: hsl(155deg 64% 58%);
+    --color-accent-green-8: hsl(154deg 65% 67%);
+    --color-accent-green-9: hsl(154deg 64% 75%);
+    --color-accent-orange-1: hsl(16deg 61% 6%);
+    --color-accent-orange-10: hsl(15deg 90% 84%);
+    --color-accent-orange-11: hsl(13deg 90% 92%);
+    --color-accent-orange-2: hsl(13deg 58% 12%);
+    --color-accent-orange-3: hsl(14deg 59% 18%);
+    --color-accent-orange-4: hsl(15deg 59% 24%);
+    --color-accent-orange-5: hsl(14deg 59% 36%);
+    --color-accent-orange-6: hsl(15deg 60% 48%);
+    --color-accent-orange-7: hsl(14deg 91% 61%);
+    --color-accent-orange-8: hsl(15deg 91% 68%);
+    --color-accent-orange-9: hsl(14deg 92% 76%);
+    --color-accent-pink-1: hsl(305deg 42% 6%);
+    --color-accent-pink-10: hsl(305deg 68% 84%);
+    --color-accent-pink-11: hsl(306deg 70% 92%);
+    --color-accent-pink-2: hsl(306deg 45% 12%);
+    --color-accent-pink-3: hsl(306deg 44% 18%);
+    --color-accent-pink-4: hsl(305deg 45% 24%);
+    --color-accent-pink-5: hsl(307deg 44% 36%);
+    --color-accent-pink-6: hsl(306deg 44% 48%);
+    --color-accent-pink-7: hsl(306deg 68% 61%);
+    --color-accent-pink-8: hsl(306deg 68% 68%);
+    --color-accent-pink-9: hsl(307deg 68% 76%);
+    --color-accent-purple-1: hsl(278deg 50% 6%);
+    --color-accent-purple-10: hsl(277deg 87% 85%);
+    --color-accent-purple-11: hsl(278deg 84% 93%);
+    --color-accent-purple-2: hsl(278deg 50% 13%);
+    --color-accent-purple-3: hsl(277deg 51% 19%);
+    --color-accent-purple-4: hsl(277deg 50% 25%);
+    --color-accent-purple-5: hsl(276deg 50% 38%);
+    --color-accent-purple-6: hsl(276deg 52% 51%);
+    --color-accent-purple-7: hsl(277deg 86% 63%);
+    --color-accent-purple-8: hsl(276deg 87% 71%);
+    --color-accent-purple-9: hsl(276deg 86% 78%);
+    --color-accent-red-1: hsl(350deg 60% 6%);
+    --color-accent-red-10: hsl(349deg 86% 83%);
+    --color-accent-red-11: hsl(349deg 86% 92%);
+    --color-accent-red-2: hsl(349deg 63% 12%);
+    --color-accent-red-3: hsl(349deg 62% 17%);
+    --color-accent-red-4: hsl(349deg 63% 23%);
+    --color-accent-red-5: hsl(349deg 62% 35%);
+    --color-accent-red-6: hsl(349deg 62% 47%);
+    --color-accent-red-7: hsl(349deg 87% 58%);
+    --color-accent-red-8: hsl(349deg 87% 67%);
+    --color-accent-red-9: hsl(349deg 87% 75%);
+    --color-accent-yellow-1: hsl(49deg 50% 6%);
+    --color-accent-yellow-10: hsl(47deg 87% 85%);
+    --color-accent-yellow-11: hsl(45deg 89% 93%);
+    --color-accent-yellow-2: hsl(45deg 51% 13%);
+    --color-accent-yellow-3: hsl(47deg 51% 19%);
+    --color-accent-yellow-4: hsl(47deg 50% 25%);
+    --color-accent-yellow-5: hsl(47deg 51% 38%);
+    --color-accent-yellow-6: hsl(47deg 52% 50%);
+    --color-accent-yellow-7: hsl(47deg 87% 63%);
+    --color-accent-yellow-8: hsl(47deg 87% 70%);
+    --color-accent-yellow-9: hsl(47deg 88% 78%);
+    --color-cyber-green-1: hsl(161deg 98% 3%);
+    --color-cyber-green-10: hsl(159deg 100% 78%);
+    --color-cyber-green-11: hsl(158deg 100% 91%);
+    --color-cyber-green-2: hsl(161deg 79% 5%);
+    --color-cyber-green-3: hsl(158deg 76% 11%);
+    --color-cyber-green-4: hsl(158deg 76% 23%);
+    --color-cyber-green-5: hsl(159deg 76% 34%);
+    --color-cyber-green-6: hsl(159deg 76% 45%);
+    --color-cyber-green-7: hsl(157deg 100% 57%);
+    --color-cyber-green-8: hsl(159deg 100% 65%);
+    --color-cyber-green-9: hsl(159deg 100% 74%);
+    --color-surface-1: hsl(240deg 65% 8%);
+    --color-surface-10: hsl(240deg 38% 47%);
+    --color-surface-11: hsl(246deg 50% 42%);
+    --color-surface-2: hsl(240deg 42% 11%);
+    --color-surface-3: hsl(240deg 38% 13%);
+    --color-surface-4: hsl(236deg 38% 16%);
+    --color-surface-5: hsl(240deg 36% 19%);
+    --color-surface-6: hsl(240deg 37% 22%);
+    --color-surface-7: hsl(240deg 38% 26%);
+    --color-surface-8: hsl(240deg 37% 32%);
+    --color-surface-9: hsl(240deg 38% 38%);
+    --color-surface-a1: hsl(240deg 100% 9% / 0.05);
+    --color-surface-a10: hsl(240deg 38% 51% / 0.88);
+    --color-surface-a11: hsl(247deg 49% 48% / 0.85);
+    --color-surface-a2: hsl(240deg 35% 32% / 0.09);
+    --color-surface-a3: hsl(240deg 30% 32% / 0.15);
+    --color-surface-a4: hsl(236deg 36% 36% / 0.24);
+    --color-surface-a5: hsl(240deg 33% 39% / 0.32);
+    --color-surface-a6: hsl(240deg 35% 37% / 0.44);
+    --color-surface-a7: hsl(240deg 37% 39% / 0.55);
+    --color-surface-a8: hsl(240deg 36% 43% / 0.66);
+    --color-surface-a9: hsl(240deg 39% 47% / 0.77);
+  }
+}
diff --git a/packages/cyberstorm-styles/src/fonts/HubotSans.ttf b/packages/cyberstorm-theme/src/styles/fonts/HubotSans.ttf
similarity index 100%
rename from packages/cyberstorm-styles/src/fonts/HubotSans.ttf
rename to packages/cyberstorm-theme/src/styles/fonts/HubotSans.ttf
diff --git a/packages/cyberstorm-styles/src/fonts/Inter.ttf b/packages/cyberstorm-theme/src/styles/fonts/Inter.ttf
similarity index 100%
rename from packages/cyberstorm-styles/src/fonts/Inter.ttf
rename to packages/cyberstorm-theme/src/styles/fonts/Inter.ttf
diff --git a/packages/cyberstorm-styles/src/fonts/Sora.ttf b/packages/cyberstorm-theme/src/styles/fonts/Sora.ttf
similarity index 100%
rename from packages/cyberstorm-styles/src/fonts/Sora.ttf
rename to packages/cyberstorm-theme/src/styles/fonts/Sora.ttf
diff --git a/packages/cyberstorm-theme/src/styles/globals.css b/packages/cyberstorm-theme/src/styles/globals.css
new file mode 100644
index 000000000..9c6ff4eed
--- /dev/null
+++ b/packages/cyberstorm-theme/src/styles/globals.css
@@ -0,0 +1,63 @@
+@layer utils {
+  :root {
+    /* Base values */
+    --space-px: 1px;
+    --space-2: 0.125rem;
+    --space-4: 0.25rem;
+    --space-6: 0.375rem;
+    --space-8: 0.5rem;
+    --space-10: 0.625rem;
+    --space-12: 0.75rem;
+    --space-14: 0.875rem;
+    --space-16: 1rem;
+    --space-18: 1.125rem;
+    --space-20: 1.25rem;
+    --space-22: 1.375rem;
+    --space-24: 1.5rem;
+    --space-28: 1.75rem;
+    --space-30: 1.875rem;
+    --space-32: 2rem;
+    --space-36: 2.25rem;
+    --space-38: 2.375rem;
+    --space-40: 2.5rem;
+    --space-44: 2.75rem;
+    --space-48: 3rem;
+    --space-51: 3.188rem;
+    --space-54: 3.375rem;
+
+    /* Space affecting layout values */
+
+    --gap-xxxs: var(--space-2);
+    --gap-xxs: var(--space-4);
+    --gap-xs: var(--space-8);
+    --gap-sm: var(--space-12);
+    --gap-md: var(--space-16);
+    --gap-xl: var(--space-24);
+    --gap-xxl: var(--space-28);
+    --gap-xxxl: var(--space-32);
+    --gap-xxxxl: var(--space-36);
+    --gap-xxxxxl: var(--space-40);
+    --gap-xxxxxxl: var(--space-44);
+    --gap-xxxxxxxl: var(--space-48);
+    --page-margin: 16rem;
+    --page-margin-top: 25px;
+
+    /* Other re-used values */
+    --blur-default: 0.25rem;
+    --border-width--px: 1px;
+    --border-width--2: var(--space-2);
+    --radius-none: none;
+    --radius-xs: var(--space-2);
+    --radius-sm: var(--space-4);
+    --radius-md: var(--space-8);
+    --radius-lg: var(--space-12);
+    --radius-xl: var(--space-16);
+    --radius-full: 64rem;
+
+    /* Animation lengths */
+    --animation-duration-xs: 80ms;
+    --animation-duration-sm: 120ms;
+    --animation-duration-md: 150ms;
+    --animation-duration-lg: 300ms;
+  }
+}
diff --git a/packages/cyberstorm-theme/src/styles/reset.css b/packages/cyberstorm-theme/src/styles/reset.css
new file mode 100644
index 000000000..63a74d633
--- /dev/null
+++ b/packages/cyberstorm-theme/src/styles/reset.css
@@ -0,0 +1,186 @@
+@layer utils {
+  /*
+    Made by Elly Loel - https://ellyloel.com/
+    With inspiration from:
+      - Josh W Comeau
+      https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
+      - Andy Bell
+      https://piccalil.li/blog/a-modern-css-reset/
+      - Adam Argyle
+      https://unpkg.com/open-props@1.3.16/normalize.min.css
+      https://codepen.io/argyleink/pen/KKvRORE
+
+    Notes:
+      - `:where()` is used to lower specificity for easy overriding.
+  */
+
+  * {
+    /* Remove default margin on everything */
+    margin: 0;
+
+    /* Remove default padding on everything */
+    padding: 0;
+  }
+
+  /* Use a more-intuitive box-sizing model on everything */
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+  }
+
+  /* Remove border and set sensible defaults for backgrounds,
+    on all elements except fieldset progress and meter */
+  *:where(:not(fieldset, progress, meter)) {
+    border-style: solid;
+    border-width: 0;
+    background-repeat: no-repeat;
+    background-origin: border-box;
+  }
+
+  html {
+    /* Allow percentage-based heights in the application */
+    block-size: 100%;
+
+    /* Making sure text size is only controlled by font-size */
+    text-size-adjust: none;
+  }
+
+  /* Smooth scrolling for users that don't prefer reduced motion */
+  @media (prefers-reduced-motion: no-preference) {
+    html:focus-within {
+      scroll-behavior: smooth;
+    }
+  }
+
+  body {
+    /* https://marco.org/2012/11/15/text-rendering-optimize-legibility */
+    text-rendering: optimizespeed;
+
+    /* Allow percentage-based heights in the application */
+    min-block-size: 100%;
+
+    /*
+     https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter#example_2
+     */
+
+    /* scrollbar-gutter: stable both-edges; Removed until this bug is fixed:
+    https://bugs.chromium.org/p/chromium/issues/detail?id=1318404#c2 */
+  }
+
+  /* Improve media defaults */
+  :where(img, svg, video, canvas, audio, iframe, embed, object) {
+    display: block;
+  }
+
+  :where(img, svg, video) {
+    block-size: auto;
+    max-inline-size: 100%;
+  }
+
+  /* Remove stroke and set fill colour to the inherited font colour */
+  :where(svg) {
+    fill: currentcolor;
+    stroke: none;
+  }
+
+  /* SVG's without a fill attribute */
+  :where(svg):where(:not([fill])) {
+    fill: none;
+
+    /* Remove fill and set stroke colour to the inherited font colour */
+    stroke: currentcolor;
+
+    /* Rounded stroke */
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  /* Remove built-in form typography styles */
+  :where(input, button, textarea, select),
+  :where(input[type="file"])::-webkit-file-upload-button {
+    color: inherit;
+    font: inherit;
+    font-size: inherit;
+    letter-spacing: inherit;
+    word-spacing: inherit;
+  }
+
+  /* Change textarea resize to vertical only and block only if the browser
+    supports that */
+  :where(textarea) {
+    resize: vertical;
+  }
+
+  @supports (resize: block) {
+    :where(textarea) {
+      resize: block;
+    }
+  }
+
+  /* Avoid text overflows */
+  :where(p, h1, h2, h3, h4, h5, h6) {
+    overflow-wrap: break-word;
+  }
+
+  /* Fix h1 font size inside article, aside, nav, and section */
+  h1 {
+    font-size: 2em;
+  }
+
+  /* Position list marker inside */
+  :where(ul, ol) {
+    list-style-position: inside;
+  }
+
+  /* Remove list styles on ul, ol elements with a list role,
+    which suggests default styling will be removed */
+  :where(ul, ol)[role="list"] {
+    list-style: none;
+  }
+
+  /* More readable underline style for anchor tags
+    without a class. This could be set on anchor tags globally,
+    but it can cause conflicts. */
+  a:not([class]) {
+    text-decoration-skip-ink: auto;
+  }
+
+  /* Make it clear that interactive elements are interactive */
+  :where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
+    cursor: pointer;
+    touch-action: manipulation;
+  }
+
+  :where(input[type="file"]) {
+    cursor: auto;
+  }
+
+  :where(input[type="file"])::-webkit-file-upload-button,
+  :where(input[type="file"])::file-selector-button {
+    cursor: pointer;
+  }
+
+  :where(:not(:active)):focus-visible {
+    outline: 0.2rem solid var(--color-cyber-green-5);
+  }
+
+  /* Make sure users can't select button text */
+  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"]),
+  :where(input[type="file"])::-webkit-file-upload-button,
+  :where(input[type="file"])::file-selector-button {
+    text-align: center;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+  }
+
+  /* Disabled cursor for disabled buttons */
+  :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"])[disabled] {
+    cursor: not-allowed;
+  }
+
+  * > * {
+    scrollbar-width: thin;
+  }
+}
diff --git a/packages/cyberstorm-theme/src/styles/typography.css b/packages/cyberstorm-theme/src/styles/typography.css
new file mode 100644
index 000000000..d546f9c6e
--- /dev/null
+++ b/packages/cyberstorm-theme/src/styles/typography.css
@@ -0,0 +1,69 @@
+@layer utils {
+  :root {
+    --line-height-auto: normal;
+    --line-height-xs: 120%;
+    --line-height-sm: 140%;
+    --line-height-md: 160%;
+    --line-height-lg: 170%;
+    --font-size-body-xs: 0.625rem;
+    --font-size-body-sm: 0.75rem;
+    --font-size-body-md: 0.875rem;
+    --font-size-body-lg: 1rem;
+    --font-size-body-xl: 1.125rem;
+    --font-size-body-xxl: 1.25rem;
+    --font-size-body-xxxl: 1.375rem;
+    --font-size-body-xxxxl: 1.5rem;
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-extra-bold: 800;
+    --font-family--inter: inter, sans-serif;
+    --font-family--hubot: hubot-sans, sans-serif;
+
+    font-synthesis: none;
+    font-feature-settings: "liga" 1, "calt" 1; /* workaround for bug in Chrome, dunno if still present or not */
+    scrollbar-color: var(--color-surface-8) var(--color-surface-1);
+
+    --font-body: normal var(--font-size-body-lg) var(--font-family--inter);
+    --font-heading: normal var(--font-size-body-lg) var(--font-family--hubot);
+    --font-family-monospace: sfmono-regular, menlo, consolas, courier, monospace;
+    --fa-fw-width: 1em;
+  }
+
+  body {
+    color: var(--color-text-primary);
+    font: var(--font-body);
+    line-height: normal;
+    background-color: var(--body-bg-color);
+  }
+
+  a {
+    color: var(--color-text-a--default);
+    text-decoration: none;
+  }
+
+  a:where(:hover),
+  a:where(:active) {
+    color: var(--color-text-a--hover);
+    text-decoration: underline;
+  }
+
+  @font-face {
+    font-weight: 100 1000;
+    font-family: Sora;
+    src: url("./fonts/Sora.ttf") format("truetype-variations");
+  }
+
+  @font-face {
+    font-weight: 100 1000;
+    font-family: Inter;
+    src: url("./fonts/Inter.ttf") format("truetype-variations");
+  }
+
+  @font-face {
+    font-weight: 200 900;
+    font-family: Hubot-Sans;
+    src: url("./fonts/HubotSans.ttf") format("truetype-variations");
+  }
+}
diff --git a/packages/cyberstorm-theme/tsconfig.json b/packages/cyberstorm-theme/tsconfig.json
new file mode 100644
index 000000000..1043b8447
--- /dev/null
+++ b/packages/cyberstorm-theme/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "removeComments": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "resolveJsonModule": true,
+    "forceConsistentCasingInFileNames": true,
+    "composite": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "react-jsx"
+  },
+  "include": ["./src/**/*.tsx", "./src/**/*.ts", "./src/**/*.css"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/cyberstorm/README.md b/packages/cyberstorm/README.md
index 9c03e54f4..1c70f7f8c 100644
--- a/packages/cyberstorm/README.md
+++ b/packages/cyberstorm/README.md
@@ -65,7 +65,7 @@ Storybook can then be accessed at [http://localhost:6006/](http://localhost:6006
 1. examples of global CSS variable names:
    - `--color-gradient-blue-green--darker`
    - `--font-weight-bold`
-   - `--old--color-cyber-green--70`
+   - `--old--color-cyber-green-70`
    - `--padding-m`
 
 2. When reasonable, don't use the `--size` variables directly, instead proxy them like this:
diff --git a/packages/cyberstorm/package.json b/packages/cyberstorm/package.json
index f4aa6ffe2..dea593f88 100644
--- a/packages/cyberstorm/package.json
+++ b/packages/cyberstorm/package.json
@@ -29,6 +29,7 @@
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
     "@radix-ui/react-tooltip": "^1.1.2",
+    "@thunderstore/cyberstorm-theme": "^0.1.0",
     "@thunderstore/dapper": "^0.1.0",
     "@thunderstore/thunderstore-api": "*",
     "@thunderstore/use-promise": "^0.1.0",
diff --git a/packages/cyberstorm/src/components/Alert/Alert.module.css b/packages/cyberstorm/src/components/Alert/Alert.module.css
index 4dcffa224..6f3d4a7b5 100644
--- a/packages/cyberstorm/src/components/Alert/Alert.module.css
+++ b/packages/cyberstorm/src/components/Alert/Alert.module.css
@@ -1,11 +1,11 @@
 .root {
   display: flex;
-  gap: var(--space--16);
+  gap: var(--space-16);
   align-items: center;
   width: 100%;
-  padding: var(--space--16) var(--space--24);
+  padding: var(--space-16) var(--space-24);
   border-left: 3px solid var(--feature-color);
-  border-radius: var(--border-radius--4);
+  border-radius: var(--radius-sm);
   background-color: var(--background-color);
 
   --background-color: var(--alert-info-bg-color);
@@ -17,14 +17,14 @@
 .content {
   color: var(--text-color);
   font-weight: var(--font-weight-regular);
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
   line-height: var(--line-height--m);
 }
 
 /* Styles for Alert's Icon */
 .icon {
-  width: var(--space--18);
-  height: var(--space--18);
+  width: var(--space-18);
+  height: var(--space-18);
   color: var(--feature-color);
 }
 
diff --git a/packages/cyberstorm/src/components/Avatar/Avatar.module.css b/packages/cyberstorm/src/components/Avatar/Avatar.module.css
index 90c9bd3bf..3aa5fd344 100644
--- a/packages/cyberstorm/src/components/Avatar/Avatar.module.css
+++ b/packages/cyberstorm/src/components/Avatar/Avatar.module.css
@@ -14,7 +14,7 @@
   width: var(--size);
   height: var(--size);
   border-radius: calc(var(--size) * 4.92);
-  transition: opacity var(--animation-length-m) ease-in-out;
+  transition: opacity var(--animation-duration-md) ease-in-out;
 }
 
 .image:where(.placeholder) {
@@ -30,11 +30,11 @@
   font: var(--font-body);
   font-weight: var(--font-weight-semibold);
   font-size: calc(var(--size) / 1.9);
-  line-height: 1.2;
+  line-height: var(--line-height-xs);
 }
 
 .image:where(.placeholderIcon) {
-  color: var(--old--color-purple--9);
+  color: var(--old--color-accent-purple-9);
 }
 
 .image:where(.placeholderIcon):hover {
diff --git a/packages/cyberstorm/src/components/BreadCrumbs/BreadCrumbs.module.css b/packages/cyberstorm/src/components/BreadCrumbs/BreadCrumbs.module.css
index dda15b2d9..a171ed481 100644
--- a/packages/cyberstorm/src/components/BreadCrumbs/BreadCrumbs.module.css
+++ b/packages/cyberstorm/src/components/BreadCrumbs/BreadCrumbs.module.css
@@ -1,18 +1,18 @@
 .root {
   display: flex;
-  gap: var(--space--4);
-  padding-left: var(--space--16);
-  color: var(--old--color-cyber-green--60);
+  gap: var(--space-4);
+  padding-left: var(--space-16);
+  color: var(--old--color-cyber-green-60);
 }
 
 .outer {
-  --bg-color: var(--color-surface--4);
+  --bg-color: var(--color-surface-4);
 
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0.5rem var(--space--16);
+  padding: 0.5rem var(--space-16);
   background-color: var(--bg-color);
 
   /* skew the container */
@@ -24,7 +24,7 @@
 }
 
 .outer:hover {
-  --bg-color: var(--color-surface--6);
+  --bg-color: var(--color-surface-6);
 }
 
 .outer__start {
@@ -34,7 +34,7 @@
 .outer__end {
   padding-right: 0;
 
-  --bg-color: var(--color-surface--6);
+  --bg-color: var(--color-surface-6);
 }
 
 .outer__start::before,
@@ -43,7 +43,7 @@
   top: 0;
   bottom: 0;
   z-index: -1;
-  width: var(--space--32);
+  width: var(--space-32);
   background-color: var(--bg-color);
   transform: skew(30deg);
   content: "\0020";
@@ -60,10 +60,10 @@
 }
 
 .inner {
-  gap: var(--space--14);
+  gap: var(--space-14);
   align-items: center;
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size--s);
+  font-size: var(--font-size-body-md);
   line-height: normal;
 
   /* unskew the content */
@@ -77,8 +77,8 @@
 
 .inner > a {
   display: block;
-  margin: calc(-1 * var(--space--8)) calc(-1 * var(--space--16));
-  padding: var(--space--8) var(--space--16);
+  margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-16));
+  padding: var(--space-8) var(--space-16);
 }
 
 .inner__end {
diff --git a/packages/cyberstorm/src/components/Button/Button.module.css b/packages/cyberstorm/src/components/Button/Button.module.css
index 8bf19aca8..b091452fb 100644
--- a/packages/cyberstorm/src/components/Button/Button.module.css
+++ b/packages/cyberstorm/src/components/Button/Button.module.css
@@ -3,12 +3,12 @@
   display: flex;
   flex: none;
   flex-direction: row;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
   align-items: center;
 
-  padding: var(--space--12) var(--space--16);
+  padding: var(--space-12) var(--space-16);
   border: var(--button-border-width) solid var(--button-border-color);
-  border-radius: var(--border-radius--8);
+  border-radius: var(--radius-md);
   color: var(--text-color);
 
   font-weight: var(--font-weight);
@@ -16,12 +16,12 @@
   line-height: 1;
   text-align: center;
   background-color: var(--bg-color);
-  transition: ease-in-out var(--animation-length-s);
+  transition: ease-in-out var(--animation-duration-sm);
   user-select: none;
 
-  --font-size: var(--font-size--l);
+  --font-size: var(--font-size-body-xxxxl);
   --text-color: var(--color-text--default);
-  --bg-color: var(--old--color-surface--7);
+  --bg-color: var(--old--color-surface-7);
   --button-border-color: transparent;
   --button-border-width: var(--border-width--2);
 }
@@ -38,45 +38,45 @@
 
 .button__default {
   --text-color: var(--color-text--default);
-  --bg-color: var(--old--color-surface--7);
+  --bg-color: var(--old--color-surface-7);
 }
 
 .button__default:hover {
-  --bg-color: var(--old--color-surface--10);
+  --bg-color: var(--old--color-surface-10);
   --button-border-color: transparent;
 }
 
 .button__primary {
-  --bg-color: var(--old--color-surface--10);
+  --bg-color: var(--old--color-surface-10);
 }
 
 .button__primary:hover {
-  --bg-color: var(--old--color-surface--10--hover);
+  --bg-color: var(--old--color-surface-10--hover);
 }
 
 .button__fancyAccent {
   border: none;
 
-  --bg-color: var(--old--color-cyber-green--60);
-  --text-color: var(--old--color-cyber-green--10);
+  --bg-color: var(--old--color-cyber-green-60);
+  --text-color: var(--old--color-cyber-green-10);
 
   box-shadow: inset 0 -3px 0 0 rgb(0 0 0 / 0.35),
-    inset 0 var(--space--px) 0 0 rgb(255 255 255 / 0.2),
-    inset 0 0 var(--space--16) 0 var(--old--color-green--6);
+    inset 0 var(--space-px) 0 0 rgb(255 255 255 / 0.2),
+    inset 0 0 var(--space-16) 0 var(--old--color-accent-green-6);
 }
 
 .button__fancyAccent:hover {
   box-shadow: inset 0 -3px 0 0 rgb(0 0 0 / 0.35),
-    inset 0 var(--space--px) 0 0 rgb(255 255 255 / 0.2),
-    inset 0 0 var(--space--16) 0 var(--old--color-green--3),
-    0 0 var(--space--10) 0 rgb(79 216 159 / 0.5);
+    inset 0 var(--space-px) 0 0 rgb(255 255 255 / 0.2),
+    inset 0 0 var(--space-16) 0 var(--old--color-accent-green-3),
+    0 0 var(--space-10) 0 rgb(79 216 159 / 0.5);
 }
 
 .button__fancyAccent:active {
-  --bg-color: var(--old--color-cyber-green--50);
+  --bg-color: var(--old--color-cyber-green-50);
 
-  box-shadow: inset 0 var(--space--2) 0 0 rgb(0 0 0 / 0.25),
-    0 0 var(--space--10) 0 rgb(79 216 159 / 0.5);
+  box-shadow: inset 0 var(--space-2) 0 0 rgb(0 0 0 / 0.25),
+    0 0 var(--space-10) 0 rgb(79 216 159 / 0.5);
 }
 
 .button__accent {
@@ -93,7 +93,7 @@
 }
 
 .button__tertiary:hover {
-  --bg-color: var(--old--color-surface--7);
+  --bg-color: var(--old--color-surface-7);
 }
 
 .button__success {
@@ -156,7 +156,7 @@
 .button__specialGreen {
   position: relative;
   z-index: 1;
-  transition: all var(--animation-length-l);
+  transition: all var(--animation-duration-lg);
 }
 
 .button__specialGreen {
@@ -189,9 +189,9 @@
   inset: calc(0 - var(--button-border-width));
   z-index: -1;
   border: var(--button-border-width) solid transparent;
-  border-radius: var(--border-radius--8);
+  border-radius: var(--radius-md);
   opacity: 0;
-  transition: all var(--animation-length-l);
+  transition: all var(--animation-duration-lg);
   content: "";
 }
 
@@ -215,7 +215,7 @@
 }
 
 .button__transparentDefault:hover {
-  --bg-color: var(--old--color-surface--4);
+  --bg-color: var(--old--color-surface-4);
 }
 
 .button__transparentDanger {
@@ -234,7 +234,7 @@
 }
 
 .button__transparentTertiary:hover {
-  --bg-color: var(--old--color-surface--4);
+  --bg-color: var(--old--color-surface-4);
 }
 
 .button__transparentPrimary {
@@ -244,7 +244,7 @@
 
 .button__transparentPrimary:hover {
   --text-color: var(--color-highlight--hover);
-  --bg-color: var(--old--color-surface--4);
+  --bg-color: var(--old--color-surface-4);
 }
 
 .button__transparentAccent {
@@ -254,7 +254,7 @@
 
 .button__transparentAccent:hover {
   --text-color: var(--color-text--accent);
-  --bg-color: var(--old--color-surface--7);
+  --bg-color: var(--old--color-surface-7);
 }
 
 .button__wideDarker {
@@ -280,47 +280,47 @@
 /* Button padding sizes */
 
 .padding__none {
-  gap: var(--gap--8);
+  gap: var(--gap-xs);
   padding: 0;
   border-radius: 0;
 }
 
 .padding__small {
-  gap: var(--gap--12);
-  padding: var(--space--6) var(--space--8);
+  gap: var(--gap-sm);
+  padding: var(--space-6) var(--space-8);
 }
 
 .padding__medium {
-  gap: var(--gap--12);
-  padding: var(--space--8) var(--space--12);
+  gap: var(--gap-sm);
+  padding: var(--space-8) var(--space-12);
 }
 
 .padding__mediumSquare {
   max-width: 45px;
   max-height: 45px;
-  padding: var(--space--12);
+  padding: var(--space-12);
 }
 
 .padding__large {
-  gap: var(--gap--16);
-  padding: var(--space--12) var(--space--16);
+  gap: var(--gap-md);
+  padding: var(--space-12) var(--space-16);
 }
 
 .padding__large__borderCompensated {
-  gap: var(--gap--16);
-  padding: var(--space--10) var(--space--14);
+  gap: var(--gap-md);
+  padding: var(--space-10) var(--space-14);
 }
 
 .padding__huge {
-  gap: var(--gap--16);
+  gap: var(--gap-md);
   padding-block: var(--button-padding-block);
 
-  --button-padding-block: var(--space--16);
+  --button-padding-block: var(--space-16);
 }
 
 .padding__huge:active {
-  --button-padding-block: calc(var(--space--16) + var(--space--2))
-    calc(var(--space--16) - var(--space--2));
+  --button-padding-block: calc(var(--space-16) + var(--space-2))
+    calc(var(--space-16) - var(--space-2));
 }
 
 /* Button Icon */
@@ -361,19 +361,19 @@
 }
 
 .ButtonLabel__font__small {
-  --font-size: var(--font-size--s);
+  --font-size: var(--font-size-body-md);
 }
 
 .ButtonLabel__font__medium {
-  --font-size: var(--font-size--m);
+  --font-size: var(--font-size-body-lg);
 }
 
 .ButtonLabel__font__large {
-  --font-size: var(--font-size--l);
+  --font-size: var(--font-size-body-xxxxl);
 }
 
 .ButtonLabel__font__huge {
-  --font-size: 1.375rem;
+  --font-size: var(--font-size-body-xxxl);
 }
 
 .ButtonLabel__fontWeight__600 {
@@ -385,5 +385,5 @@
 }
 
 .ButtonLabel__fontWeight__800 {
-  --font-weight: var(--font-weight-heavy);
+  --font-weight: var(--font-weight-extra-bold);
 }
diff --git a/packages/cyberstorm/src/components/CodeBox/CodeBox.module.css b/packages/cyberstorm/src/components/CodeBox/CodeBox.module.css
index 52871cc77..c39169e90 100644
--- a/packages/cyberstorm/src/components/CodeBox/CodeBox.module.css
+++ b/packages/cyberstorm/src/components/CodeBox/CodeBox.module.css
@@ -1,10 +1,10 @@
 .root {
   align-self: stretch;
   width: 100%;
-  padding: var(--space--16);
+  padding: var(--space-16);
   border: 1px solid #333370;
 
-  border-radius: var(--border-radius--8);
+  border-radius: var(--radius-md);
   overflow: auto;
   font-weight: var(--font-weight-regular);
   font-size: 0.875rem;
diff --git a/packages/cyberstorm/src/components/CodeInput/CodeInput.module.css b/packages/cyberstorm/src/components/CodeInput/CodeInput.module.css
index bfbf22b86..94685b9c8 100644
--- a/packages/cyberstorm/src/components/CodeInput/CodeInput.module.css
+++ b/packages/cyberstorm/src/components/CodeInput/CodeInput.module.css
@@ -1,7 +1,7 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--48);
+  gap: var(--gap-xxxxxxxl);
 }
 
 .inputContainer {
diff --git a/packages/cyberstorm/src/components/CollapsibleText/CollapsibleText.module.css b/packages/cyberstorm/src/components/CollapsibleText/CollapsibleText.module.css
index e592d4f76..e80689bc5 100644
--- a/packages/cyberstorm/src/components/CollapsibleText/CollapsibleText.module.css
+++ b/packages/cyberstorm/src/components/CollapsibleText/CollapsibleText.module.css
@@ -5,7 +5,7 @@
 .text {
   overflow: hidden;
   color: var(--color-text--secondary);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
   white-space: pre-wrap;
   text-overflow: ellipsis;
@@ -17,7 +17,7 @@
 
 @media (width <= 30rem) {
   .text {
-    font-size: var(--font-size--s);
+    font-size: var(--font-size-body-md);
     line-height: var(--line-height--s);
   }
 }
diff --git a/packages/cyberstorm/src/components/CommunityCard/CommunityCard.module.css b/packages/cyberstorm/src/components/CommunityCard/CommunityCard.module.css
index 3f6ce717f..bd74e208e 100644
--- a/packages/cyberstorm/src/components/CommunityCard/CommunityCard.module.css
+++ b/packages/cyberstorm/src/components/CommunityCard/CommunityCard.module.css
@@ -1,7 +1,7 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--space--12);
+  gap: var(--space-12);
 }
 
 .root:hover .imageWrapper {
@@ -9,8 +9,8 @@
 }
 
 .root:focus-within {
-  border-radius: var(--border-radius--8);
-  outline: 0.2rem solid var(--old--color-cyber-green--50);
+  border-radius: var(--radius-md);
+  outline: 0.2rem solid var(--old--color-cyber-green-50);
   outline-offset: 0.5rem;
 }
 
@@ -27,7 +27,7 @@
   overflow: hidden;
   color: var(--color-text--default);
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: normal;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -40,6 +40,6 @@
 .metaItemList {
   display: flex;
   flex-direction: row;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
   margin-top: auto;
 }
diff --git a/packages/cyberstorm/src/components/CommunityCard/CommunityCardSkeleton.module.css b/packages/cyberstorm/src/components/CommunityCard/CommunityCardSkeleton.module.css
index ea306e224..dd002c82a 100644
--- a/packages/cyberstorm/src/components/CommunityCard/CommunityCardSkeleton.module.css
+++ b/packages/cyberstorm/src/components/CommunityCard/CommunityCardSkeleton.module.css
@@ -1,7 +1,7 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--space--12);
+  gap: var(--space-12);
 }
 
 .image {
@@ -10,9 +10,9 @@
 
 .title {
   width: 75%;
-  height: var(--space--18);
+  height: var(--space-18);
 }
 
 .meta {
-  height: var(--font-size--m);
+  height: var(--font-size-body-lg);
 }
diff --git a/packages/cyberstorm/src/components/Dialog/Dialog.module.css b/packages/cyberstorm/src/components/Dialog/Dialog.module.css
index 14d8f48ef..0c10571ff 100644
--- a/packages/cyberstorm/src/components/Dialog/Dialog.module.css
+++ b/packages/cyberstorm/src/components/Dialog/Dialog.module.css
@@ -1,6 +1,6 @@
 .overlay {
   position: fixed;
-  background-color: var(--color-shadow-1);
+  background-color: var(--shadow-lg);
   inset: 0;
   animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
 }
@@ -14,16 +14,17 @@
   max-width: 40rem;
   max-height: 80vh;
   border: var(--border);
-  border-radius: var(--border-radius--8);
-  background-color: var(--color-surface--2);
+  border-radius: var(--radius-md);
+  background-color: var(--color-surface-2);
 
   box-shadow: hsl(206deg 22% 7% / 0.35) 0 10px 38px -10px,
     hsl(206deg 22% 7% / 0.2) 0 10px 20px -15px;
   transform: translate(-50%, -50%);
   animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
-  animation: contentShow var(--animation-length-m) cubic-bezier(0.16, 1, 0.3, 1);
+  animation: contentShow var(--animation-duration-md)
+    cubic-bezier(0.16, 1, 0.3, 1);
 
-  --border: var(--border-width--px) solid var(--color-surface--5);
+  --border: var(--border-width--px) solid var(--color-surface-5);
 }
 
 .body {
@@ -34,10 +35,10 @@
 .header {
   display: flex;
   flex-direction: row-reverse;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
   align-items: center;
   justify-content: space-between;
-  padding: var(--space--16) var(--space--16) var(--space--8) var(--space--32);
+  padding: var(--space-16) var(--space-16) var(--space-8) var(--space-32);
 }
 
 .headerBorder {
@@ -46,16 +47,16 @@
 
 .title {
   font-weight: var(--font-weight-bold);
-  font-size: 1.25rem;
+  font-size: var(--font-size-body-xxl);
   line-height: 1;
 }
 
 .separator {
-  border-top: var(--border-width--px) solid var(--color-surface--5);
+  border-top: var(--border-width--px) solid var(--color-surface-5);
 }
 
 .closeIcon {
   display: flex;
   color: var(--color-border--highlight);
-  font-weight: var(--font-weight-heavy);
+  font-weight: var(--font-weight-extra-bold);
 }
diff --git a/packages/cyberstorm/src/components/DropDown/DropDown.module.css b/packages/cyberstorm/src/components/DropDown/DropDown.module.css
index 59a2eace4..065da4835 100644
--- a/packages/cyberstorm/src/components/DropDown/DropDown.module.css
+++ b/packages/cyberstorm/src/components/DropDown/DropDown.module.css
@@ -10,35 +10,35 @@
   z-index: 2;
   display: flex;
   flex-direction: column;
-  padding: var(--space--8) 0;
-  border: var(--space--px) var(--color-surface--6) solid;
-  border-radius: var(--border-radius--8);
+  padding: var(--space-8) 0;
+  border: var(--space-px) var(--color-surface-6) solid;
+  border-radius: var(--radius-md);
   overflow: hidden;
   color: var(--text-color);
-  background-color: var(--color-surface--2);
-  box-shadow: var(--box-shadow-default);
+  background-color: var(--color-surface-2);
+  box-shadow: var(--shadow-lg);
   transform-origin: var(--radix-dropdown-menu-content-transform-origin);
-  animation: fade-in var(--animation-length-l) ease;
+  animation: fade-in var(--animation-duration-lg) ease;
 
   --text-color: var(--color-white);
-  --bg-color: var(--color-surface--4);
+  --bg-color: var(--color-surface-4);
 }
 
 .itemWrapper {
-  padding: var(--space--12) var(--space--16);
+  padding: var(--space-12) var(--space-16);
   overflow: hidden;
   outline: none;
 }
 
 .itemWrapper[data-highlighted] {
   z-index: 999;
-  background-color: var(--color-surface--6);
+  background-color: var(--color-surface-6);
 }
 
 .divider {
-  height: var(--space--px);
-  margin: var(--space--8) 0;
-  background-color: var(--color-surface--6);
+  height: var(--space-px);
+  margin: var(--space-8) 0;
+  background-color: var(--color-surface-6);
 }
 
 @keyframes fade-in {
diff --git a/packages/cyberstorm/src/components/DropDown/DropDownLink.module.css b/packages/cyberstorm/src/components/DropDown/DropDownLink.module.css
index e5dd19a20..9c89be456 100644
--- a/packages/cyberstorm/src/components/DropDown/DropDownLink.module.css
+++ b/packages/cyberstorm/src/components/DropDown/DropDownLink.module.css
@@ -5,14 +5,14 @@
   width: 12rem;
   color: var(--color-text--default);
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
   line-height: 1;
 }
 
 .label {
   display: flex;
   flex-direction: row;
-  gap: var(--space--12);
+  gap: var(--space-12);
   align-items: center;
 }
 
diff --git a/packages/cyberstorm/src/components/DropDown/DropDownLink.tsx b/packages/cyberstorm/src/components/DropDown/DropDownLink.tsx
index 2e060dddb..5dcbc2aa6 100644
--- a/packages/cyberstorm/src/components/DropDown/DropDownLink.tsx
+++ b/packages/cyberstorm/src/components/DropDown/DropDownLink.tsx
@@ -25,7 +25,7 @@ export function DropDownLink(props: DropDownLinkProps) {
         <NewIcon
           csMode="inline"
           noWrapper
-          csVariant="tertiary"
+          csVariant="secondary"
           rootClasses={styles.arrowUpRightIcon}
         >
           <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
diff --git a/packages/cyberstorm/src/components/EmptyState/EmptyState.module.css b/packages/cyberstorm/src/components/EmptyState/EmptyState.module.css
index 34c1acaa0..7a30cdb13 100644
--- a/packages/cyberstorm/src/components/EmptyState/EmptyState.module.css
+++ b/packages/cyberstorm/src/components/EmptyState/EmptyState.module.css
@@ -1,7 +1,7 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
   color: var(--color-text--default);
 }
 
@@ -15,7 +15,7 @@
   color: #c9c5d8;
   font-weight: var(--font-weight-boldest);
 
-  line-height: 1.6;
+  line-height: var(--line-height-md);
   text-align: center;
 }
 
@@ -23,6 +23,6 @@
   color: #9c9cc4;
   font-weight: var(--font-weight-medium);
 
-  line-height: 1.6;
+  line-height: var(--line-height-md);
   text-align: center;
 }
diff --git a/packages/cyberstorm/src/components/Footer/Footer.module.css b/packages/cyberstorm/src/components/Footer/Footer.module.css
deleted file mode 100644
index 87b701794..000000000
--- a/packages/cyberstorm/src/components/Footer/Footer.module.css
+++ /dev/null
@@ -1,242 +0,0 @@
-.root {
-  width: 100%;
-
-  --border: var(--space--px) solid #27275d;
-}
-
-@media (width <= 63.5rem) {
-  .item {
-    padding-right: 1.5rem;
-    padding-left: 1.5rem;
-  }
-}
-
-.main {
-  display: flex;
-  flex-direction: column;
-}
-
-.section {
-  display: flex;
-  flex-direction: column;
-}
-
-.item {
-  display: flex;
-  flex: 1;
-  border-top: var(--border);
-}
-
-.extra {
-  position: relative;
-  order: -1;
-}
-
-.extra::before {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
-  height: 100%;
-  max-height: 24rem;
-  background-image: linear-gradient(
-    165deg,
-    hsl(276deg 39% 38% / 0) 60%,
-    hsl(276deg 39% 38%) 100%
-  );
-  background-repeat: no-repeat;
-  background-position: 100% 100%;
-  content: "\0020";
-  aspect-ratio: 5/1;
-}
-
-.inner {
-  display: flex;
-  flex: 1;
-  padding-block: var(--space--32);
-  width: 100%;
-}
-
-.adWrapper .inner {
-  padding-bottom: 0;
-}
-
-.company {
-  order: 2;
-}
-
-.footnote {
-  padding-block: var(--space--32);
-  padding-block-end: 5.5rem;
-}
-
-.footnoteCopyright {
-  color: rgb(197 194 255 / 0.6) !important;
-  text-align: center;
-}
-
-.footnoteInner {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  align-items: center;
-  align-self: stretch;
-  justify-content: center;
-  width: 100%;
-  max-width: 80rem;
-  margin-inline: auto;
-  padding-inline: var(--space--24);
-}
-
-.nav {
-  display: flex;
-  gap: var(--space--40);
-  justify-content: center;
-  width: 100%;
-}
-
-.navSection {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space--24);
-}
-
-.ad {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space--32);
-  max-width: 100%;
-}
-
-.adText {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: var(--space--16);
-  padding-bottom: 1rem;
-}
-
-.adDescription {
-  max-width: 29rem;
-  font-weight: 400;
-  font-size: 1.125rem;
-  line-height: 160%;
-}
-
-.getManagerButton {
-  width: fit-content;
-}
-
-.img {
-  position: relative;
-  aspect-ratio: 2.5/1;
-  object-fit: cover;
-  object-position: left top;
-  box-shadow: -36px -36px 40px 0 rgb(0 0 0 / 0.35);
-}
-
-.logoAndLinks {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap--32);
-  align-items: center;
-}
-
-.logo {
-  height: 2rem;
-}
-
-.iconLinks {
-  display: flex;
-  gap: 30px;
-}
-
-.iconLink {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2rem;
-  border-radius: var(--border-radius--8);
-}
-
-.footerPagesLinks {
-  display: flex;
-  gap: var(--gap--32);
-}
-
-@media (width >= calc(63.5rem + 1px)) {
-  .logoAndLinks {
-    flex-direction: row;
-    justify-content: space-between;
-  }
-}
-
-@media (width >= calc(63.5rem + 1px)) {
-  .main {
-    flex-direction: row;
-  }
-
-  .section {
-    flex: 0 0 50%;
-  }
-
-  .info .item {
-    justify-content: flex-end;
-  }
-
-  .inner {
-    flex: 0 1 45rem;
-    padding-block: 4.5rem;
-  }
-
-  .company .inner,
-  .linksWrapper .inner {
-    padding-right: 3.5rem;
-  }
-
-  .company {
-    align-items: center;
-    order: 0;
-  }
-
-  .extra {
-    order: 0;
-    border-left: var(--border);
-  }
-
-  .adWrapper .inner {
-    padding-top: 5rem;
-    padding-bottom: 0;
-    padding-left: 5rem;
-  }
-
-  .logoAndLinks,
-  .navLinks {
-    margin-left: 4.5rem;
-  }
-
-  .footnote {
-    padding-block-end: var(--space--32);
-  }
-
-  .nav {
-    gap: 7rem;
-    justify-content: flex-start;
-  }
-
-  .footnoteInner {
-    flex-direction: row;
-    justify-content: space-between;
-  }
-
-  .ad {
-    padding-right: 3.125rem;
-  }
-}
-
-@media (width <= 23.25rem) {
-  .nav {
-    flex-flow: wrap;
-    justify-content: flex-start;
-  }
-}
diff --git a/packages/cyberstorm/src/components/ImageWithFallback/ImageWithFallback.module.css b/packages/cyberstorm/src/components/ImageWithFallback/ImageWithFallback.module.css
index 0c58a1025..d313edc31 100644
--- a/packages/cyberstorm/src/components/ImageWithFallback/ImageWithFallback.module.css
+++ b/packages/cyberstorm/src/components/ImageWithFallback/ImageWithFallback.module.css
@@ -16,11 +16,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--border-radius--8);
+  border-radius: var(--radius-md);
   overflow: hidden;
-  color: var(--old--color-purple--9);
-  background-color: var(--old--color-purple--4);
-  transition: var(--animation-length-s) ease-out;
+  color: var(--old--color-accent-purple-9);
+  background-color: var(--old--color-accent-purple-4);
+  transition: var(--animation-duration-sm) ease-out;
   aspect-ratio: var(--aspect-ratio);
 }
 
@@ -30,7 +30,7 @@
   justify-content: center;
   width: var(--image-width);
   aspect-ratio: 1;
-  transition: var(--animation-length-s) ease-out;
+  transition: var(--animation-duration-sm) ease-out;
 }
 
 .image {
diff --git a/packages/cyberstorm/src/components/Link/Link.module.css b/packages/cyberstorm/src/components/Link/Link.module.css
index bd5006d87..25badb414 100644
--- a/packages/cyberstorm/src/components/Link/Link.module.css
+++ b/packages/cyberstorm/src/components/Link/Link.module.css
@@ -1,7 +1,7 @@
 .root {
   display: flex;
-  padding: var(--space--8) var(--space--12);
-  border-radius: var(--border-radius--8);
+  padding: var(--space-8) var(--space-12);
+  border-radius: var(--radius-md);
   color: var(--color-highlight);
   font-weight: var(--font-weight);
   font-size: var(--font-size);
@@ -11,27 +11,27 @@
 }
 
 .root:hover {
-  --bg-color: var(--color-surface--4);
+  --bg-color: var(--color-surface-4);
 }
 
 .leftIcon {
   display: flex;
   align-items: center;
-  margin-right: var(--space--8);
+  margin-right: var(--space-8);
 }
 
 .rightIcon {
   display: flex;
   align-items: center;
-  margin-left: var(--space--8);
+  margin-left: var(--space-8);
 }
 
 .link__thin {
-  --font-size: var(--font-size--m);
+  --font-size: var(--font-size-body-lg);
   --font-weight: var(--font-weight-regular);
 }
 
 .link__bold {
-  --font-size: var(--font-size--m);
+  --font-size: var(--font-size-body-lg);
   --font-weight: var(--font-weight-bold);
 }
diff --git a/packages/cyberstorm/src/components/Markdown/Markdown.module.css b/packages/cyberstorm/src/components/Markdown/Markdown.module.css
index 7ade6ccc7..5c880fdad 100644
--- a/packages/cyberstorm/src/components/Markdown/Markdown.module.css
+++ b/packages/cyberstorm/src/components/Markdown/Markdown.module.css
@@ -58,7 +58,7 @@
 }
 
 .root h3 {
-  font-size: 1.25rem;
+  font-size: var(--font-size-body-xxl);
 }
 
 .root h4 {
@@ -119,7 +119,7 @@
 }
 
 .root a {
-  color: var(--old--color-cyber-green--50);
+  color: var(--old--color-cyber-green-50);
 }
 
 .root blockquote {
diff --git a/packages/cyberstorm/src/components/MenuItem/MenuItem.module.css b/packages/cyberstorm/src/components/MenuItem/MenuItem.module.css
index 2c0f4f43b..250b29c54 100644
--- a/packages/cyberstorm/src/components/MenuItem/MenuItem.module.css
+++ b/packages/cyberstorm/src/components/MenuItem/MenuItem.module.css
@@ -2,9 +2,9 @@
   display: flex;
   flex-direction: row;
 
-  gap: var(--gap--12);
+  gap: var(--gap-sm);
   align-items: center;
-  padding: var(--space--12) var(--space--16);
+  padding: var(--space-12) var(--space-16);
   color: var(--text-color);
   outline: none;
   cursor: pointer;
@@ -14,7 +14,7 @@
 }
 
 .root:hover {
-  background-color: var(--color-surface--6);
+  background-color: var(--color-surface-6);
 
   --icon-color: var(--color-text--default);
 }
@@ -32,9 +32,9 @@
 }
 
 .menuItemLabel__fontSize__small {
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
 }
 
 .menuItemLabel__fontSize__medium {
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
 }
diff --git a/packages/cyberstorm/src/components/MetaInfoItem/MetaInfoItem.module.css b/packages/cyberstorm/src/components/MetaInfoItem/MetaInfoItem.module.css
index 54330fce4..5c89ae9b7 100644
--- a/packages/cyberstorm/src/components/MetaInfoItem/MetaInfoItem.module.css
+++ b/packages/cyberstorm/src/components/MetaInfoItem/MetaInfoItem.module.css
@@ -4,10 +4,10 @@
   align-items: center;
   justify-content: space-between;
 
-  padding: var(--space--8) var(--space--12);
+  padding: var(--space-8) var(--space-12);
   color: var(--text-color);
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
   line-height: normal;
   background: #191b38;
 }
diff --git a/packages/cyberstorm/src/components/MetaInfoItemList/MetaInfoItemList.module.css b/packages/cyberstorm/src/components/MetaInfoItemList/MetaInfoItemList.module.css
index 310faeddc..444a80dfc 100644
--- a/packages/cyberstorm/src/components/MetaInfoItemList/MetaInfoItemList.module.css
+++ b/packages/cyberstorm/src/components/MetaInfoItemList/MetaInfoItemList.module.css
@@ -1,7 +1,7 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--2);
-  border-radius: var(--border-radius--8);
+  gap: var(--gap-xxxs);
+  border-radius: var(--radius-md);
   overflow: hidden;
 }
diff --git a/packages/cyberstorm/src/components/MetaItem/MetaItem.module.css b/packages/cyberstorm/src/components/MetaItem/MetaItem.module.css
index 5be68c099..c6e7eb69d 100644
--- a/packages/cyberstorm/src/components/MetaItem/MetaItem.module.css
+++ b/packages/cyberstorm/src/components/MetaItem/MetaItem.module.css
@@ -3,7 +3,7 @@
   display: flex;
   flex: none;
   flex-direction: row;
-  gap: var(--gap--8);
+  gap: var(--gap-xs);
   align-items: center;
   justify-content: center;
   color: var(--text-color);
@@ -42,16 +42,16 @@
 }
 
 .metaItem__medium {
-  --font-size: var(--font-size--s);
+  --font-size: var(--font-size-body-md);
   --font-weight: var(--font-weight-bold);
 }
 
 .metaItem__large {
-  --font-size: var(--font-size--m);
+  --font-size: var(--font-size-body-lg);
   --font-weight: var(--font-weight-semibold);
 }
 
 .metaItem__bold_large {
-  --font-size: var(--font-size--m);
+  --font-size: var(--font-size-body-lg);
   --font-weight: var(--font-weight-bold);
 }
diff --git a/packages/cyberstorm/src/components/MultiSelectSearch/MultiSelectSearch.module.css b/packages/cyberstorm/src/components/MultiSelectSearch/MultiSelectSearch.module.css
index 4156c413b..f84e19c9d 100644
--- a/packages/cyberstorm/src/components/MultiSelectSearch/MultiSelectSearch.module.css
+++ b/packages/cyberstorm/src/components/MultiSelectSearch/MultiSelectSearch.module.css
@@ -2,7 +2,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
   justify-content: flex-end;
   width: auto;
   min-height: 6rem;
@@ -12,7 +12,7 @@
 .selected {
   display: flex;
   flex-flow: row wrap;
-  gap: var(--space--8);
+  gap: var(--space-8);
 }
 
 .search {
@@ -31,19 +31,19 @@
   width: 100%;
   border: var(--border-width--2) solid var(--border-color);
 
-  border-radius: var(--border-radius--8);
-  background-color: var(--color-surface--4);
+  border-radius: var(--radius-md);
+  background-color: var(--color-surface-4);
 
   --border-color: transparent;
 
-  transition: ease-out var(--animation-length-l);
+  transition: ease-out var(--animation-duration-lg);
 }
 
 .input {
   width: 100%;
-  margin: var(--space--10) var(--space--14);
+  margin: var(--space-10) var(--space-14);
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: normal;
   background-color: transparent;
 }
@@ -64,19 +64,19 @@
 }
 
 .inputContainer[data-color="red"] {
-  --border-color: var(--old--color-red--5);
+  --border-color: var(--old--color-accent-red-5);
 }
 
 .inputContainer[data-color="red"]:hover {
-  --border-color: var(--old--color-red--3);
+  --border-color: var(--old--color-accent-red-3);
 }
 
 .inputContainer[data-color="green"] {
-  --border-color: var(--old--color-cyber-green--50);
+  --border-color: var(--old--color-cyber-green-50);
 }
 
 .inputContainer[data-color="green"]:hover {
-  --border-color: var(--old--color-cyber-green--80);
+  --border-color: var(--old--color-cyber-green-80);
 }
 
 .clearSearch {
@@ -106,22 +106,22 @@
   z-index: 9999;
   display: flex;
   flex-direction: column;
-  gap: var(--gap--4);
+  gap: var(--gap-xxs);
   width: 100%;
   min-height: 1.5rem;
   max-height: 12rem;
-  padding: var(--space--8) 0;
-  border: var(--space--px) var(--color-surface--6) solid;
-  border-radius: var(--border-radius--8);
+  padding: var(--space-8) 0;
+  border: var(--space-px) var(--color-surface-6) solid;
+  border-radius: var(--radius-md);
   overflow: hidden;
   overflow-y: auto !important;
   color: var(--text-color);
-  background-color: var(--color-surface--2);
-  box-shadow: var(--box-shadow-default);
+  background-color: var(--color-surface-2);
+  box-shadow: var(--shadow-lg);
   visibility: hidden;
 
   --text-color: var(--color-white);
-  --bg-color: var(--color-surface--4);
+  --bg-color: var(--color-surface-4);
 }
 
 .menu:where(.visible) {
@@ -133,9 +133,9 @@
 }
 
 .multiSelectItemWrapper {
-  padding: var(--space--12) var(--space--16);
+  padding: var(--space-12) var(--space-16);
 }
 
 .multiSelectItemWrapper:focus {
-  background-color: var(--color-surface--6);
+  background-color: var(--color-surface-6);
 }
diff --git a/packages/cyberstorm/src/components/NewTabs/Tabs.module.css b/packages/cyberstorm/src/components/NewTabs/Tabs.module.css
index 913bfebda..f042799a6 100644
--- a/packages/cyberstorm/src/components/NewTabs/Tabs.module.css
+++ b/packages/cyberstorm/src/components/NewTabs/Tabs.module.css
@@ -2,25 +2,25 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  gap: var(--space--32);
+  gap: var(--space-32);
 }
 
 .buttons {
   display: flex;
-  border-bottom: 3px solid var(--old--color-purple--5);
+  border-bottom: 3px solid var(--old--color-accent-purple-5);
 }
 
 .button {
   display: flex;
   flex: none;
   flex-direction: row;
-  gap: var(--space--12);
+  gap: var(--space-12);
   align-items: center;
   justify-content: center;
   margin-bottom: -3px;
 
-  padding: var(--space--12) var(--space--16);
-  border-bottom: 3px solid var(--old--color-purple--5);
+  padding: var(--space-12) var(--space-16);
+  border-bottom: 3px solid var(--old--color-accent-purple-5);
   color: var(--tab-color);
   background-color: transparent;
 
@@ -30,7 +30,7 @@
 .button.active {
   border-color: var(--tab-color);
 
-  --tab-color: var(--old--color-green--5);
+  --tab-color: var(--old--color-accent-green-5);
 }
 
 .button:disabled {
@@ -51,6 +51,6 @@
 
 .label {
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: 1.3;
 }
diff --git a/packages/cyberstorm/src/components/PackageCard/PackageCard.module.css b/packages/cyberstorm/src/components/PackageCard/PackageCard.module.css
index d61533350..d1723b7b8 100644
--- a/packages/cyberstorm/src/components/PackageCard/PackageCard.module.css
+++ b/packages/cyberstorm/src/components/PackageCard/PackageCard.module.css
@@ -2,11 +2,11 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
   align-items: flex-start;
   border-radius: 0.5em;
   overflow: hidden;
-  transition: ease-in-out var(--animation-length-l);
+  transition: ease-in-out var(--animation-duration-lg);
 }
 
 .root:focus-within,
@@ -20,7 +20,7 @@
   width: 100%;
   padding-bottom: 100%;
   overflow: hidden;
-  transition: var(--animation-length-m);
+  transition: var(--animation-duration-md);
 }
 
 .root:hover .imageWrapper {
@@ -35,7 +35,7 @@
   width: 100%;
   height: auto;
   transform: var(--transform-translate);
-  transition: var(--animation-length-m);
+  transition: var(--animation-duration-md);
 
   --transform-translate: translate(-50%, -50%);
 }
@@ -46,11 +46,11 @@
 
 .flagWrapper {
   position: absolute;
-  top: var(--space--8);
-  right: var(--space--8);
+  top: var(--space-8);
+  right: var(--space-8);
   display: flex;
   flex-flow: row wrap;
-  gap: var(--space--4);
+  gap: var(--space-4);
   align-items: flex-end;
 }
 
@@ -58,8 +58,8 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  gap: var(--gap--12);
-  padding: 0 var(--space--16);
+  gap: var(--gap-sm);
+  padding: 0 var(--space-16);
 }
 
 /* Styles for PackageCard's Package name (title) */
@@ -67,7 +67,7 @@
   color: var(--color-text--default);
   font: var(--font-body);
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: normal;
 }
 
@@ -75,7 +75,7 @@
 .author {
   display: flex;
   flex-direction: row;
-  font-size: var(--font-size--s);
+  font-size: var(--font-size-body-md);
   line-height: 1;
 }
 
@@ -86,7 +86,7 @@
 }
 
 .author_prefix {
-  padding-right: var(--space--4);
+  padding-right: var(--space-4);
   color: var(--color-text--tertiary);
 }
 
@@ -97,8 +97,8 @@
   color: var(--color-text--secondary);
   font: var(--font-body);
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size--m);
-  line-height: 1.7;
+  font-size: var(--font-size-body-lg);
+  line-height: var(--line-height-lg);
   text-overflow: ellipsis;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
@@ -109,24 +109,24 @@
   color: var(--color-text--tertiary);
   font: var(--font-body);
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size--s);
+  font-size: var(--font-size-body-md);
   line-height: 1;
 }
 
 .footer {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
   width: 100%;
-  padding: 0 var(--space--16) var(--space--16);
+  padding: 0 var(--space-16) var(--space-16);
 }
 
 .categoryWrapper {
   display: flex;
   flex-flow: row wrap;
-  gap: var(--gap--4);
+  gap: var(--gap-xxs);
   align-items: flex-start;
-  padding: 0 var(--space--16);
+  padding: 0 var(--space-16);
 }
 
 /* TODO: These are figma copy pasted */
@@ -149,7 +149,7 @@
   display: flex;
   flex-basis: 100%;
   flex-direction: row;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
   align-items: flex-start;
 }
 
diff --git a/packages/cyberstorm/src/components/Pagination/Pagination.module.css b/packages/cyberstorm/src/components/Pagination/Pagination.module.css
index e17815475..ece8075e1 100644
--- a/packages/cyberstorm/src/components/Pagination/Pagination.module.css
+++ b/packages/cyberstorm/src/components/Pagination/Pagination.module.css
@@ -1,7 +1,7 @@
 .list {
   display: flex;
   flex-direction: row;
-  gap: var(--gap--8);
+  gap: var(--gap-xs);
   align-items: center;
   justify-content: center;
   list-style: none;
@@ -18,8 +18,8 @@
   min-width: 2.25em;
   min-height: 2.25em;
 
-  padding: var(--space--8) var(--space--8);
-  border-radius: var(--border-radius--8);
+  padding: var(--space-8) var(--space-8);
+  border-radius: var(--radius-md);
   color: var(--color-text--secondary);
 
   font-weight: var(--font-weight-medium);
diff --git a/packages/cyberstorm/src/components/Pagination/PaginationButton.module.css b/packages/cyberstorm/src/components/Pagination/PaginationButton.module.css
index 38b9c89d3..6f9c33ad2 100644
--- a/packages/cyberstorm/src/components/Pagination/PaginationButton.module.css
+++ b/packages/cyberstorm/src/components/Pagination/PaginationButton.module.css
@@ -2,18 +2,18 @@
   display: flex;
   flex: none;
   flex-direction: row;
-  gap: var(--space--8);
+  gap: var(--space-8);
   align-items: center;
   justify-content: center;
   min-width: 2.25em;
   height: 2.25em;
 
-  padding: var(--space--8) var(--space--8);
-  border-radius: var(--border-radius--8);
+  padding: var(--space-8) var(--space-8);
+  border-radius: var(--radius-md);
   color: var(--color-text--tertiary);
   background-color: var(--bg-color);
 
-  --bg-color: var(--color-surface--4);
+  --bg-color: var(--color-surface-4);
 }
 
 .label {
@@ -27,19 +27,19 @@
 }
 
 .button__default {
-  --bg-color: var(--color-surface--4);
+  --bg-color: var(--color-surface-4);
 }
 
 .button__default:hover {
   color: var(--color-text--default);
 
-  --bg-color: var(--color-surface--7);
+  --bg-color: var(--color-surface-7);
 }
 
 .button__default_selected {
   color: var(--color-text--default);
 
-  --bg-color: var(--color-surface--10);
+  --bg-color: var(--color-surface-10);
 }
 
 .button__inactive {
diff --git a/packages/cyberstorm/src/components/SearchFilter/Searchfilter.module.css b/packages/cyberstorm/src/components/SearchFilter/Searchfilter.module.css
index 69f6d9a85..e77119326 100644
--- a/packages/cyberstorm/src/components/SearchFilter/Searchfilter.module.css
+++ b/packages/cyberstorm/src/components/SearchFilter/Searchfilter.module.css
@@ -1,7 +1,7 @@
 .selectedTags {
   display: flex;
   flex-direction: row;
-  gap: var(--space--8);
-  height: var(--space--24);
-  margin: var(--space--16) 0;
+  gap: var(--space-8);
+  height: var(--space-24);
+  margin: var(--space-16) 0;
 }
diff --git a/packages/cyberstorm/src/components/Select/Select.module.css b/packages/cyberstorm/src/components/Select/Select.module.css
index ba8e9bbc2..164dbd3e2 100644
--- a/packages/cyberstorm/src/components/Select/Select.module.css
+++ b/packages/cyberstorm/src/components/Select/Select.module.css
@@ -15,23 +15,23 @@
   z-index: 999;
   display: flex;
   flex-direction: column;
-  gap: var(--gap--2);
+  gap: var(--gap-xxxs);
   min-width: var(--radix-popper-anchor-width);
   max-width: max-content;
-  padding: var(--space--8) 0;
-  border: var(--space--px) var(--color-surface--6) solid;
-  border-radius: var(--border-radius--8);
+  padding: var(--space-8) 0;
+  border: var(--space-px) var(--color-surface-6) solid;
+  border-radius: var(--radius-md);
   overflow: hidden;
   color: var(--text-color);
-  background-color: var(--color-surface--2);
-  box-shadow: var(--box-shadow-default);
-  animation: fade-in var(--animation-length-l) ease;
+  background-color: var(--color-surface-2);
+  box-shadow: var(--shadow-lg);
+  animation: fade-in var(--animation-duration-lg) ease;
 }
 
 /* Different Select variant schemes */
 .content__default {
   --text-color: var(--color-white);
-  --bg-color: var(--color-surface--5);
+  --bg-color: var(--color-surface-5);
 }
 
 .content__accent {
diff --git a/packages/cyberstorm/src/components/SelectSearch/SelectSearch.module.css b/packages/cyberstorm/src/components/SelectSearch/SelectSearch.module.css
index 4156c413b..f84e19c9d 100644
--- a/packages/cyberstorm/src/components/SelectSearch/SelectSearch.module.css
+++ b/packages/cyberstorm/src/components/SelectSearch/SelectSearch.module.css
@@ -2,7 +2,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
   justify-content: flex-end;
   width: auto;
   min-height: 6rem;
@@ -12,7 +12,7 @@
 .selected {
   display: flex;
   flex-flow: row wrap;
-  gap: var(--space--8);
+  gap: var(--space-8);
 }
 
 .search {
@@ -31,19 +31,19 @@
   width: 100%;
   border: var(--border-width--2) solid var(--border-color);
 
-  border-radius: var(--border-radius--8);
-  background-color: var(--color-surface--4);
+  border-radius: var(--radius-md);
+  background-color: var(--color-surface-4);
 
   --border-color: transparent;
 
-  transition: ease-out var(--animation-length-l);
+  transition: ease-out var(--animation-duration-lg);
 }
 
 .input {
   width: 100%;
-  margin: var(--space--10) var(--space--14);
+  margin: var(--space-10) var(--space-14);
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: normal;
   background-color: transparent;
 }
@@ -64,19 +64,19 @@
 }
 
 .inputContainer[data-color="red"] {
-  --border-color: var(--old--color-red--5);
+  --border-color: var(--old--color-accent-red-5);
 }
 
 .inputContainer[data-color="red"]:hover {
-  --border-color: var(--old--color-red--3);
+  --border-color: var(--old--color-accent-red-3);
 }
 
 .inputContainer[data-color="green"] {
-  --border-color: var(--old--color-cyber-green--50);
+  --border-color: var(--old--color-cyber-green-50);
 }
 
 .inputContainer[data-color="green"]:hover {
-  --border-color: var(--old--color-cyber-green--80);
+  --border-color: var(--old--color-cyber-green-80);
 }
 
 .clearSearch {
@@ -106,22 +106,22 @@
   z-index: 9999;
   display: flex;
   flex-direction: column;
-  gap: var(--gap--4);
+  gap: var(--gap-xxs);
   width: 100%;
   min-height: 1.5rem;
   max-height: 12rem;
-  padding: var(--space--8) 0;
-  border: var(--space--px) var(--color-surface--6) solid;
-  border-radius: var(--border-radius--8);
+  padding: var(--space-8) 0;
+  border: var(--space-px) var(--color-surface-6) solid;
+  border-radius: var(--radius-md);
   overflow: hidden;
   overflow-y: auto !important;
   color: var(--text-color);
-  background-color: var(--color-surface--2);
-  box-shadow: var(--box-shadow-default);
+  background-color: var(--color-surface-2);
+  box-shadow: var(--shadow-lg);
   visibility: hidden;
 
   --text-color: var(--color-white);
-  --bg-color: var(--color-surface--4);
+  --bg-color: var(--color-surface-4);
 }
 
 .menu:where(.visible) {
@@ -133,9 +133,9 @@
 }
 
 .multiSelectItemWrapper {
-  padding: var(--space--12) var(--space--16);
+  padding: var(--space-12) var(--space-16);
 }
 
 .multiSelectItemWrapper:focus {
-  background-color: var(--color-surface--6);
+  background-color: var(--color-surface-6);
 }
diff --git a/packages/cyberstorm/src/components/SettingItem/SettingItem.module.css b/packages/cyberstorm/src/components/SettingItem/SettingItem.module.css
index 9773d082d..2f2e7830c 100644
--- a/packages/cyberstorm/src/components/SettingItem/SettingItem.module.css
+++ b/packages/cyberstorm/src/components/SettingItem/SettingItem.module.css
@@ -1,45 +1,45 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--32);
+  gap: var(--gap-xxxl);
   color: var(--color-text--default);
 }
 
 .leftColumn {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--16);
+  gap: var(--gap-md);
 }
 
 .leftColumnRegular {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--8);
+  gap: var(--gap-xs);
 }
 
 .leftColumnTitle {
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: 1;
 }
 
 .leftColumnDescription {
   color: var(--color-text--tertiary);
   font-weight: var(--font-weight-medium);
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
   line-height: var(--line-height--m);
 }
 
 .wrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--24);
+  gap: var(--gap-xl);
 }
 
 @media (width >= 60rem) {
   .wrapper {
     flex-flow: row wrap;
-    gap: var(--gap--32);
+    gap: var(--gap-xxxl);
   }
 
   .leftColumn {
diff --git a/packages/cyberstorm/src/components/SkeletonBox/SkeletonBox.module.css b/packages/cyberstorm/src/components/SkeletonBox/SkeletonBox.module.css
index 5ff22ce96..b0c78897a 100644
--- a/packages/cyberstorm/src/components/SkeletonBox/SkeletonBox.module.css
+++ b/packages/cyberstorm/src/components/SkeletonBox/SkeletonBox.module.css
@@ -1,6 +1,6 @@
 .root {
   display: flex;
-  border-radius: var(--border-radius--4);
+  border-radius: var(--radius-sm);
   background: hsl(236deg 36% 36% / 0.24);
   animation: pulse 2s infinite;
 }
diff --git a/packages/cyberstorm/src/components/Switch/Switch.module.css b/packages/cyberstorm/src/components/Switch/Switch.module.css
index 610e74080..69c8e9acb 100644
--- a/packages/cyberstorm/src/components/Switch/Switch.module.css
+++ b/packages/cyberstorm/src/components/Switch/Switch.module.css
@@ -11,7 +11,7 @@
 
 .root:hover {
   border: 1px solid rgb(99 90 159);
-  background-color: var(--color-surface--7);
+  background-color: var(--color-surface-7);
 }
 
 .root[data-state="checked"] {
@@ -25,7 +25,7 @@
   border-radius: 2.813rem;
   background: #f5f5f6;
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.65), 0 -1px 0 0 rgb(0 0 0 / 0.05);
-  transition: ease-out var(--animation-length-s);
+  transition: ease-out var(--animation-duration-sm);
 }
 
 .root[data-state="unchecked"] .thumb {
diff --git a/packages/cyberstorm/src/components/Table/Table.module.css b/packages/cyberstorm/src/components/Table/Table.module.css
index 4449066ac..6569a156a 100644
--- a/packages/cyberstorm/src/components/Table/Table.module.css
+++ b/packages/cyberstorm/src/components/Table/Table.module.css
@@ -58,13 +58,13 @@
 
 .grid__Row:hover {
   background-color: #191b38;
-  transition: var(--animation-length-xs);
+  transition: var(--animation-duration-xs);
 }
 
 .grid__Cell {
   display: flex;
   align-items: center;
-  padding: var(--space--12) var(--space--16);
+  padding: var(--space-12) var(--space-16);
   border-right: 1px solid #333370;
   color: #fff;
   font-weight: var(--font-weight-regular);
@@ -94,18 +94,18 @@
 .grid__Header_ItemList {
   display: flex;
   flex-direction: row;
-  gap: var(--space--12);
+  gap: var(--space-12);
   width: fit-content;
-  margin: 0 var(--space--24) var(--space--16) var(--space--24);
-  border-radius: var(--border-radius--8);
+  margin: 0 var(--space-24) var(--space-16) var(--space-24);
+  border-radius: var(--radius-md);
   color: var(--color-text--accent);
   font-weight: var(--font-weight-bold);
-  font-size: var(--space--14);
+  font-size: var(--space-14);
   line-height: normal;
 }
 
 .grid__Header_ItemList:hover {
-  background-color: var(--color-surface--4);
+  background-color: var(--color-surface-4);
 }
 
 .grid__Rows_ItemList {
@@ -114,13 +114,13 @@
 }
 
 .grid__Rows_ItemList > div:first-child {
-  border-top-left-radius: var(--border-radius--8);
-  border-top-right-radius: var(--border-radius--8);
+  border-top-left-radius: var(--radius-md);
+  border-top-right-radius: var(--radius-md);
 }
 
 .grid__Rows_ItemList > div:last-child {
-  border-bottom-right-radius: var(--border-radius--8);
-  border-bottom-left-radius: var(--border-radius--8);
+  border-bottom-right-radius: var(--radius-md);
+  border-bottom-left-radius: var(--radius-md);
 }
 
 .grid__Row_ItemList {
@@ -129,17 +129,17 @@
     var(--column-count, auto-fit),
     minmax(1rem, 1fr)
   );
-  background-color: var(--color-surface--3);
+  background-color: var(--color-surface-3);
 }
 
 .grid__Row_ItemList:hover {
-  background-color: var(--color-surface--5);
+  background-color: var(--color-surface-5);
 }
 
 .grid__Cell_ItemList {
   display: flex;
   align-items: center;
-  padding: var(--space--16) var(--space--24);
+  padding: var(--space-16) var(--space-24);
   color: var(--color-text--secondary);
   font-weight: var(--font-weight-medium);
   line-height: var(--line-height--l);
@@ -168,14 +168,14 @@
 .grid__Header_ItemListSmall {
   display: flex;
   flex-direction: row;
-  gap: var(--space--12);
+  gap: var(--space-12);
   width: fit-content;
-  margin: 0 var(--space--24) var(--space--8) var(--space--24);
-  border-radius: var(--border-radius--8);
+  margin: 0 var(--space-24) var(--space-8) var(--space-24);
+  border-radius: var(--radius-md);
   color: var(--color-text--accent);
   font-weight: var(--font-weight-bold);
-  font-size: var(--space--14);
-  line-height: 1.7;
+  font-size: var(--space-14);
+  line-height: var(--line-height-lg);
 }
 
 .grid__Rows_ItemListSmall {
@@ -184,13 +184,13 @@
 }
 
 .grid__Rows_ItemListSmall > div:first-child {
-  border-top-left-radius: var(--border-radius--8);
-  border-top-right-radius: var(--border-radius--8);
+  border-top-left-radius: var(--radius-md);
+  border-top-right-radius: var(--radius-md);
 }
 
 .grid__Rows_ItemListSmall > div:last-child {
-  border-bottom-right-radius: var(--border-radius--8);
-  border-bottom-left-radius: var(--border-radius--8);
+  border-bottom-right-radius: var(--radius-md);
+  border-bottom-left-radius: var(--radius-md);
 }
 
 .grid__Row_ItemListSmall {
@@ -203,13 +203,13 @@
 }
 
 .grid__Row_ItemListSmall:hover {
-  background-color: var(--color-surface--5);
+  background-color: var(--color-surface-5);
 }
 
 .grid__Cell_ItemListSmall {
   display: flex;
   align-items: center;
-  padding: 0.425rem var(--space--24);
+  padding: 0.425rem var(--space-24);
   color: var(--color-text--secondary);
   font-weight: var(--font-weight-medium);
   line-height: var(--line-height--l);
@@ -224,10 +224,10 @@
 
 .buttonIcon {
   color: hsl(240deg 25% 69% / 0.3);
-  font-size: var(--font-size--s);
+  font-size: var(--font-size-body-md);
 }
 
 .buttonIconActive {
   color: hsl(240deg 25% 69%);
-  font-size: var(--font-size--s);
+  font-size: var(--font-size-body-md);
 }
diff --git a/packages/cyberstorm/src/components/Tabs/TabsButton.module.css b/packages/cyberstorm/src/components/Tabs/TabsButton.module.css
index be4d328c3..73634082e 100644
--- a/packages/cyberstorm/src/components/Tabs/TabsButton.module.css
+++ b/packages/cyberstorm/src/components/Tabs/TabsButton.module.css
@@ -2,11 +2,11 @@
   display: flex;
   flex: none;
   flex-direction: row;
-  gap: var(--space--12);
+  gap: var(--space-12);
   align-items: center;
   justify-content: center;
 
-  padding: var(--space--12) var(--space--16);
+  padding: var(--space-12) var(--space-16);
   border-bottom: 3px solid #1f1f42;
   color: var(--color-text--default);
   background-color: transparent;
@@ -19,7 +19,7 @@
 
 .label {
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: 1.3;
 }
 
@@ -36,7 +36,7 @@
 }
 
 .button__default:hover {
-  --bg-color: var(--color-surface--7);
+  --bg-color: var(--color-surface-7);
 }
 
 .button__default_selected {
diff --git a/packages/cyberstorm/src/components/Tag/Tag.module.css b/packages/cyberstorm/src/components/Tag/Tag.module.css
index 5fd86632f..c929e50af 100644
--- a/packages/cyberstorm/src/components/Tag/Tag.module.css
+++ b/packages/cyberstorm/src/components/Tag/Tag.module.css
@@ -18,8 +18,8 @@
   cursor: default;
 
   --text-color: var(--color-text--default);
-  --bg-color: var(--color-surface--5);
-  --border-color: var(--color-surface--9);
+  --bg-color: var(--color-surface-5);
+  --border-color: var(--color-surface-9);
   --icon-color: var(--color-text--tertiary);
 }
 
@@ -55,7 +55,7 @@
 
 /* Different Tag color schemes */
 .tag__default:hover {
-  --bg-color: var(--color-surface--7);
+  --bg-color: var(--color-surface-7);
 }
 
 .tag__borderless_removable {
@@ -66,7 +66,7 @@
 }
 
 .tag__borderless_removable:hover {
-  --bg-color: var(--color-surface--7);
+  --bg-color: var(--color-surface-7);
   --text-color: var(--color-text--default);
 }
 
@@ -80,7 +80,7 @@
 }
 
 .tag__removable:hover {
-  --bg-color: var(--color-surface--7);
+  --bg-color: var(--color-surface-7);
 }
 
 /* TODO: This css rule will change all icons to red, not just the x one
@@ -101,34 +101,34 @@
 }
 
 .tag__borderless:hover {
-  --bg-color: var(--color-surface--7);
+  --bg-color: var(--color-surface-7);
 }
 
 .tag__simple {
-  --bg-color: var(--color-surface--4);
+  --bg-color: var(--color-surface-4);
   --border-color: transparent;
   --text-color: var(--color-text--tertiary);
 }
 
 .tag__success {
-  --bg-color: var(--old--color-green--10);
+  --bg-color: var(--old--color-accent-green-10);
   --border-color: transparent;
-  --text-color: var(--old--color-green--5);
+  --text-color: var(--old--color-accent-green-5);
 }
 
 .tag__success:hover {
-  --bg-color: var(--old--color-green--10);
-  --border-color: var(--old--color-green--5);
-  --text-color: var(--old--color-green--5);
+  --bg-color: var(--old--color-accent-green-10);
+  --border-color: var(--old--color-accent-green-5);
+  --text-color: var(--old--color-accent-green-5);
 }
 
 .tag__info {
   --bg-color: var(--color-info-background);
-  --border-color: var(--old--color-blue--20);
+  --border-color: var(--old--color-accent-blue-20);
   --text-color: var(--color-info);
   --icon-color: var(--color-info);
 
-  border-width: var(--space--px);
+  border-width: var(--space-px);
 }
 
 .tag__blue {
@@ -169,7 +169,7 @@
 .tag__high_contrast {
   --text-color: rgb(80 217 159);
 
-  padding: var(--space--4) var(--space--8);
+  padding: var(--space-4) var(--space-8);
   border: 1px solid rgb(80 217 159);
   font-weight: var(--font-weight-bold);
   font-size: 0.75rem;
diff --git a/packages/cyberstorm/src/components/TextAreaInput/TextAreaInput.module.css b/packages/cyberstorm/src/components/TextAreaInput/TextAreaInput.module.css
index c2128e644..78381bc65 100644
--- a/packages/cyberstorm/src/components/TextAreaInput/TextAreaInput.module.css
+++ b/packages/cyberstorm/src/components/TextAreaInput/TextAreaInput.module.css
@@ -4,16 +4,16 @@
   align-items: center;
   width: 100%;
   min-height: 300px;
-  padding: var(--space--12) var(--space--16);
+  padding: var(--space-12) var(--space-16);
   border: var(--border-width--2) solid var(--border-color);
 
-  border-radius: var(--border-radius--8);
+  border-radius: var(--radius-md);
   font-weight: var(--font-weight-medium);
 
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   font-family: "Courier New", monospace;
   line-height: var(--line-height--l);
-  background-color: var(--color-surface--4);
+  background-color: var(--color-surface-4);
   resize: vertical;
 
   --border-color: transparent;
diff --git a/packages/cyberstorm/src/components/TextInput/TextInput.module.css b/packages/cyberstorm/src/components/TextInput/TextInput.module.css
index 6741a7c2c..045f65051 100644
--- a/packages/cyberstorm/src/components/TextInput/TextInput.module.css
+++ b/packages/cyberstorm/src/components/TextInput/TextInput.module.css
@@ -15,17 +15,17 @@
   flex-direction: row;
   align-items: center;
   width: 100%;
-  padding: var(--space--8) var(--space--14);
+  padding: var(--space-8) var(--space-14);
   border: var(--border-width--2) solid var(--border-color);
 
-  border-radius: var(--border-radius--8);
+  border-radius: var(--radius-md);
   font-weight: var(--font-weight-medium);
 
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: normal;
-  background-color: var(--color-surface--4);
+  background-color: var(--color-surface-4);
   cursor: text;
-  transition: ease-out var(--animation-length-l);
+  transition: ease-out var(--animation-duration-lg);
 
   --border-color: transparent;
 }
@@ -46,19 +46,19 @@
 }
 
 .input[data-color="red"] {
-  --border-color: var(--old--color-red--5);
+  --border-color: var(--old--color-accent-red-5);
 }
 
 .input[data-color="red"]:hover {
-  --border-color: var(--old--color-red--3);
+  --border-color: var(--old--color-accent-red-3);
 }
 
 .input[data-color="green"] {
-  --border-color: var(--old--color-cyber-green--50);
+  --border-color: var(--old--color-cyber-green-50);
 }
 
 .input[data-color="green"]:hover {
-  --border-color: var(--old--color-cyber-green--80);
+  --border-color: var(--old--color-cyber-green-80);
 }
 
 .hasLeftIcon {
@@ -71,7 +71,7 @@
 
 .leftIcon {
   position: absolute;
-  margin: var(--space--10) var(--space--16);
+  margin: var(--space-10) var(--space-16);
   color: var(--color-text--tertiary);
   line-height: normal;
   pointer-events: none;
@@ -79,7 +79,7 @@
 
 .rightIcon {
   position: absolute;
-  padding: var(--space--14) var(--space--16);
+  padding: var(--space-14) var(--space-16);
   color: var(--color-text--tertiary);
 }
 
diff --git a/packages/cyberstorm/src/components/Title/Title.module.css b/packages/cyberstorm/src/components/Title/Title.module.css
index 6eade74c0..9a5160175 100644
--- a/packages/cyberstorm/src/components/Title/Title.module.css
+++ b/packages/cyberstorm/src/components/Title/Title.module.css
@@ -1,7 +1,7 @@
 .root {
   color: var(--color-text--default);
   font: var(--font-heading);
-  font-weight: var(--font-weight-heavy);
+  font-weight: var(--font-weight-extra-bold);
   font-size: 3.188rem;
   line-height: 0.9;
   overflow-wrap: anywhere;
diff --git a/packages/cyberstorm/src/components/Toast/Toast.module.css b/packages/cyberstorm/src/components/Toast/Toast.module.css
index 8b75fc771..25159f214 100644
--- a/packages/cyberstorm/src/components/Toast/Toast.module.css
+++ b/packages/cyberstorm/src/components/Toast/Toast.module.css
@@ -10,7 +10,7 @@
   flex-direction: column;
   width: 100%;
   border-left: 3px solid var(--feature-color);
-  border-radius: var(--border-radius--4);
+  border-radius: var(--radius-sm);
   background-color: var(--background-color);
 
   --background-color: var(--alert-info-bg-color);
@@ -20,7 +20,7 @@
 
 .content {
   display: flex;
-  gap: var(--space--16);
+  gap: var(--space-16);
   align-items: flex-start;
   align-self: stretch;
   width: 100%;
@@ -64,14 +64,14 @@
   min-height: calc(1rem * var(--line-height--m));
   color: var(--text-color);
   font-weight: var(--font-weight-regular);
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
   line-height: var(--line-height--m);
 }
 
 /* Styles for Toast's Icon */
 .icon {
-  width: var(--space--18);
-  height: var(--space--18);
+  width: var(--space-18);
+  height: var(--space-18);
   color: var(--feature-color);
 }
 
diff --git a/packages/cyberstorm/src/components/Tooltip/Tooltip.module.css b/packages/cyberstorm/src/components/Tooltip/Tooltip.module.css
index 3037a2bcc..5b1eb8102 100644
--- a/packages/cyberstorm/src/components/Tooltip/Tooltip.module.css
+++ b/packages/cyberstorm/src/components/Tooltip/Tooltip.module.css
@@ -2,23 +2,23 @@
   z-index: 999;
   max-width: 75vw;
 
-  padding: var(--space--8) var(--space--12);
-  border-radius: var(--border-radius--8);
+  padding: var(--space-8) var(--space-12);
+  border-radius: var(--radius-md);
   color: var(--color-text--default);
 
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--m);
+  font-size: var(--font-size-body-lg);
   line-height: normal;
   overflow-wrap: break-word;
   background-color: var(--background-color);
 
-  box-shadow: var(--box-shadow-default);
-  animation-duration: var(--animation-length-l);
+  box-shadow: var(--shadow-lg);
+  animation-duration: var(--animation-duration-lg);
   animation-timing-function: var(--animation-timing-1);
   user-select: none;
   will-change: transform, opacity;
 
-  --background-color: var(--color-surface--7);
+  --background-color: var(--color-surface-7);
 }
 
 .arrow {
diff --git a/packages/cyberstorm/src/components/ValidationBar/ValidationBar.module.css b/packages/cyberstorm/src/components/ValidationBar/ValidationBar.module.css
index bfbf22b86..94685b9c8 100644
--- a/packages/cyberstorm/src/components/ValidationBar/ValidationBar.module.css
+++ b/packages/cyberstorm/src/components/ValidationBar/ValidationBar.module.css
@@ -1,7 +1,7 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--gap--48);
+  gap: var(--gap-xxxxxxxl);
 }
 
 .inputContainer {
diff --git a/packages/cyberstorm/src/components/WrapperCard/WrapperCard.module.css b/packages/cyberstorm/src/components/WrapperCard/WrapperCard.module.css
index 81b165542..7ce7f5073 100644
--- a/packages/cyberstorm/src/components/WrapperCard/WrapperCard.module.css
+++ b/packages/cyberstorm/src/components/WrapperCard/WrapperCard.module.css
@@ -3,9 +3,9 @@
   flex-direction: column;
   gap: 1rem;
   padding: 1rem;
-  border: var(--space--px) solid;
-  border-color: var(--color-surface--4);
-  border-radius: var(--border-radius--8);
+  border: var(--space-px) solid;
+  border-color: var(--color-surface-4);
+  border-radius: var(--radius-md);
   overflow: clip;
   background: #191b38;
 }
@@ -13,13 +13,13 @@
 .header {
   display: flex;
   flex-direction: row;
-  gap: var(--gap--8);
+  gap: var(--gap-xs);
   align-items: center;
 }
 
 .title {
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size--l);
+  font-size: var(--font-size-body-xxxxl);
   line-height: var(--line-height--l);
 }
 
diff --git a/packages/cyberstorm/src/index.ts b/packages/cyberstorm/src/index.ts
index 81239c957..cf661385f 100644
--- a/packages/cyberstorm/src/index.ts
+++ b/packages/cyberstorm/src/index.ts
@@ -15,7 +15,6 @@ export {
   DropDownDivider,
 } from "./components/DropDown/DropDown";
 export * as EmptyState from "./components/EmptyState/";
-export { Footer } from "./components/Footer/Footer";
 export { Icon } from "./components/Icon/Icon";
 export { Link, type LinkProps } from "./components/Link/Link";
 export {
@@ -90,8 +89,6 @@ export {
   type FrameFloaterProps,
   type FrameHeadingProps,
   type FrameIconProps,
-  type FrameListItemProps,
-  type FrameListProps,
   type FrameModalProps,
   type FramePopoverProps,
   type FrameTextProps,
@@ -101,13 +98,7 @@ export {
   Input,
   type InputTextInputProps,
 } from "./primitiveComponents/Input/Input";
-export {
-  type variants,
-  type colors,
-  type sizes,
-  type TextStyles,
-  type PrimitiveComponentDefaultProps,
-} from "./primitiveComponents/utils/utils";
+export { type PrimitiveComponentDefaultProps } from "./primitiveComponents/utils/utils";
 
 // newComponents
 export { Menu } from "./newComponents/Menu/Menu";
@@ -118,9 +109,7 @@ export { Link as NewLink } from "./newComponents/Link/Link/Link";
 export { LinkButton } from "./newComponents/Link/LinkButton/LinkButton";
 export { Button as NewButton } from "./newComponents/Button/Button";
 export { BreadCrumbs as NewBreadCrumbs } from "./newComponents/BreadCrumbs/BreadCrumbs";
-export { Container } from "./newComponents/Container/Container";
 export { TextInput as NewTextInput } from "./newComponents/TextInput/TextInput";
-export { Text as NewText } from "./newComponents/Text/Text";
 export {
   Select as NewSelect,
   type SelectProps as NewSelectProps,
@@ -133,5 +122,4 @@ export {
   DropDownDivider as NewDropDownDivider,
 } from "./newComponents/DropDown/DropDown";
 export { Image } from "./newComponents/Image/Image";
-export * as List from "./newComponents/List";
 export { AdContainer } from "./newComponents/AdContainer/AdContainer";
diff --git a/packages/cyberstorm/src/newComponents/AdContainer/AdContainer.css b/packages/cyberstorm/src/newComponents/AdContainer/AdContainer.css
new file mode 100644
index 000000000..51f700bdc
--- /dev/null
+++ b/packages/cyberstorm/src/newComponents/AdContainer/AdContainer.css
@@ -0,0 +1,50 @@
+@layer components {
+  .ts-adcontainer {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    border: 1px solid #1f1f42;
+    font-weight: var(--font-weight-regular);
+    font-size: var(--font-size-body-md);
+    line-height: var(--line-height-lg);
+  }
+
+  .ts-adcontainer__fallback {
+    display: flex;
+    flex-flow: wrap;
+    gap: var(--gap-xs);
+    place-content: center center;
+    align-items: center;
+    width: 18.75rem;
+    height: 15.625rem;
+    padding: var(--space-24);
+    color: var(--color-text-tertiary);
+    background: var(--color-3);
+  }
+
+  .ts-adcontainer__icon {
+    width: var(--space-16);
+    animation: heart-beat 2s cubic-bezier(0, -0.76, 0.89, 1.64) infinite;
+  }
+
+  .ts-adcontainer__content {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  @keyframes heart-beat {
+    0% {
+      transform: scale(1);
+    }
+
+    50% {
+      transform: scale(0.9);
+    }
+
+    100% {
+      transform: scale(1);
+    }
+  }
+}
diff --git a/packages/cyberstorm/src/newComponents/AdContainer/AdContainer.module.css b/packages/cyberstorm/src/newComponents/AdContainer/AdContainer.module.css
deleted file mode 100644
index d3780e437..000000000
--- a/packages/cyberstorm/src/newComponents/AdContainer/AdContainer.module.css
+++ /dev/null
@@ -1,45 +0,0 @@
-.root {
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
-  align-items: flex-start;
-  border: 1px solid #1f1f42;
-}
-
-.fallback {
-  display: flex;
-  flex-flow: wrap;
-  gap: var(--gap--8);
-  place-content: center center;
-  align-items: center;
-  width: 18.75rem;
-  height: 15.625rem;
-  padding: var(--space--24);
-  color: var(--color-tertiary);
-  background: var(--color-3);
-}
-
-.icon {
-  width: var(--space--16);
-  animation: heart-beat 2s cubic-bezier(0, -0.76, 0.89, 1.64) infinite;
-}
-
-.content {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-@keyframes heart-beat {
-  0% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(0.9);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
diff --git a/packages/cyberstorm/src/newComponents/AdContainer/AdContainer.tsx b/packages/cyberstorm/src/newComponents/AdContainer/AdContainer.tsx
index e7cf2f178..75a1e6476 100644
--- a/packages/cyberstorm/src/newComponents/AdContainer/AdContainer.tsx
+++ b/packages/cyberstorm/src/newComponents/AdContainer/AdContainer.tsx
@@ -1,7 +1,7 @@
-import styles from "./AdContainer.module.css";
+import "./AdContainer.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faHeart } from "@fortawesome/free-solid-svg-icons";
-import { Container, NewIcon } from "../..";
+import { NewIcon } from "../..";
 
 interface AdContainerProps {
   containerId: string;
@@ -11,28 +11,21 @@ export function AdContainer(props: AdContainerProps) {
   const { containerId } = props;
 
   return (
-    <Container
-      rootClasses={styles.root}
-      csSize="s"
-      csVariant="default"
-      csColor="surface-alpha"
-      csTextStyles={["fontWeightRegular", "fontSizeS", "lineHeightBody"]}
-    >
-      <div className={styles.fallback}>
+    <div className="ts-adcontainer">
+      <div className="ts-adcontainer__fallback">
         Thunderstore development is made possible with ads. Please consider
         making an exception to your adblock.
         <NewIcon
           noWrapper
           csMode="inline"
-          rootClasses={styles.icon}
-          csColor="red"
-          csVariant="default"
+          rootClasses="ts-adcontainer__icon"
+          csVariant="danger"
         >
           <FontAwesomeIcon icon={faHeart} />
         </NewIcon>
       </div>
-      <Container rootClasses={styles.content} id={containerId} />
-    </Container>
+      <div className="ts-adcontainer__content" id={containerId} />
+    </div>
   );
 }
 
diff --git a/packages/cyberstorm/src/newComponents/BreadCrumbs/BreadCrumbs.css b/packages/cyberstorm/src/newComponents/BreadCrumbs/BreadCrumbs.css
new file mode 100644
index 000000000..f5c511ee6
--- /dev/null
+++ b/packages/cyberstorm/src/newComponents/BreadCrumbs/BreadCrumbs.css
@@ -0,0 +1,92 @@
+@layer components {
+  .ts-breadcrumbs {
+    display: flex;
+    gap: var(--space-4);
+    padding-left: var(--space-16);
+    font-weight: var(--font-weight-medium);
+    font-size: var(--font-size-body-sm);
+    line-height: var(--line-height-auto);
+  }
+
+  .ts-breadcrumbs__outer {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-8) var(--space-16);
+    background-color: var(--breadcrumbs__outer-background-color);
+
+    /* skew the container */
+    transform: skew(-30deg);
+  }
+
+  .ts-breadcrumbs__outerhome {
+    z-index: 1;
+  }
+
+  .ts-breadcrumbs__outerstart {
+    padding-left: 0;
+  }
+
+  .ts-breadcrumbs__outerend {
+    padding-right: 0;
+  }
+
+  .ts-breadcrumbs__outerstart::before,
+  .ts-breadcrumbs__outerend::after {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: -1;
+    width: var(--space-32);
+    background-color: var(--breadcrumbs__outer-background-color);
+    transform: skew(30deg);
+    content: "\0020";
+  }
+
+  .ts-breadcrumbs__outerstart::before {
+    left: -1rem;
+    border-radius: 0.5rem 0 0 0.5rem;
+  }
+
+  .ts-breadcrumbs__outerend::after {
+    right: -1rem;
+    border-radius: 0 0.5rem 0.5rem 0;
+  }
+
+  .ts-breadcrumbs__inner {
+    /* gap: var(--space-14);
+    align-items: center; */
+
+    /* unskew the content */
+    transform: skew(30deg);
+  }
+
+  .ts-breadcrumbs__innerhome {
+    display: flex;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+  }
+
+  /* .inner > a {
+    display: block;
+    margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-16));
+    padding: var(--space-8) var(--space-16);
+  } */
+
+  .ts-breadcrumbs__innerend {
+    color: var(--ts-breadcrumbs__innerend-text-color);
+  }
+
+  .ts-breadcrumbs__home {
+    text-decoration: none;
+  }
+
+  .ts-breadcrumbs__homelink {
+    display: inline-block;
+    height: 1em;
+    font-weight: var(--font-weight-regular);
+    font-size: var(--font-size-body-md);
+  }
+}
diff --git a/packages/cyberstorm/src/newComponents/BreadCrumbs/BreadCrumbs.module.css b/packages/cyberstorm/src/newComponents/BreadCrumbs/BreadCrumbs.module.css
deleted file mode 100644
index 71fcf9923..000000000
--- a/packages/cyberstorm/src/newComponents/BreadCrumbs/BreadCrumbs.module.css
+++ /dev/null
@@ -1,97 +0,0 @@
-.root {
-  display: flex;
-  gap: var(--space--4);
-  padding-left: var(--space--16);
-}
-
-.outer {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space--8) var(--space--16);
-  background-color: var(--breadcrumb-bg-color);
-
-  /* skew the container */
-  transform: skew(-30deg);
-
-  --breadcrumb-bg-color: var(--color-6);
-}
-
-.outer:hover {
-  --breadcrumb-bg-color: var(--color-8);
-}
-
-.outerHome {
-  z-index: 1;
-}
-
-.outer__start {
-  padding-left: 0;
-}
-
-.outer__end {
-  padding-right: 0;
-
-  --breadcrumb-bg-color: var(--color-8);
-}
-
-.outer__start::before,
-.outer__end::after {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: -1;
-  width: var(--space--32);
-  background-color: var(--breadcrumb-bg-color);
-  transform: skew(30deg);
-  content: "\0020";
-}
-
-.outer__start::before {
-  left: -1rem;
-  border-radius: 0.5rem 0 0 0.5rem;
-}
-
-.outer__end::after {
-  right: -1rem;
-  border-radius: 0 0.5rem 0.5rem 0;
-}
-
-.inner {
-  /* gap: var(--space--14);
-  align-items: center; */
-  font-weight: var(--font-weight);
-  font-size: var(--font-size);
-  line-height: var(--line-height);
-
-  /* unskew the content */
-  transform: skew(30deg);
-}
-
-.innerHome {
-  display: flex;
-  align-items: center;
-  width: 1em;
-  height: 1em;
-}
-
-/* .inner > a {
-  display: block;
-  margin: calc(-1 * var(--space--8)) calc(-1 * var(--space--16));
-  padding: var(--space--8) var(--space--16);
-} */
-
-.inner__end {
-  color: var(--color-primary);
-}
-
-.home {
-  font-weight: var(--font-weight-regular);
-  text-decoration: none;
-}
-
-.homeLink {
-  display: inline-block;
-  height: 1em;
-}
diff --git a/packages/cyberstorm/src/newComponents/BreadCrumbs/BreadCrumbs.tsx b/packages/cyberstorm/src/newComponents/BreadCrumbs/BreadCrumbs.tsx
index a3f77df73..5b94e99ac 100644
--- a/packages/cyberstorm/src/newComponents/BreadCrumbs/BreadCrumbs.tsx
+++ b/packages/cyberstorm/src/newComponents/BreadCrumbs/BreadCrumbs.tsx
@@ -2,39 +2,57 @@ import React, { PropsWithChildren } from "react";
 
 import { faHouse } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import styles from "./BreadCrumbs.module.css";
-import { classnames } from "../../utils/utils";
+import "./BreadCrumbs.css";
+import { classnames, componentClasses } from "../../utils/utils";
 import { NewIcon, NewLink } from "../..";
 import { Frame } from "../../primitiveComponents/Frame/Frame";
+import {
+  BreadCrumbsVariants,
+  BreadCrumbsSizes,
+  BreadCrumbsModifiers,
+} from "@thunderstore/cyberstorm-theme/src/components";
 
 type BreadCrumbsProps = PropsWithChildren<{
   excludeHome?: boolean;
   rootClasses?: string;
+  csVariant?: BreadCrumbsVariants;
+  csSize?: BreadCrumbsSizes;
+  csModifiers?: BreadCrumbsModifiers[];
 }>;
 
 // TODO: This component is not complete and probably is in need of redesign
 // TODO: Bug: when excludeHome is true, last element's style is wrong
 export function BreadCrumbs(props: BreadCrumbsProps) {
-  const children = React.Children.toArray(props.children);
+  const {
+    children,
+    excludeHome,
+    rootClasses,
+    csVariant = "default",
+    csSize = "medium",
+    csModifiers,
+  } = props;
+  const childrenArray = React.Children.toArray(children);
 
-  const nodes = children.map((node, index) => {
-    const homifiedIndex = props.excludeHome ? index - 1 : index;
-    const isLast = homifiedIndex == children.length - 1;
+  const nodes = childrenArray.map((node, index) => {
+    const homifiedIndex = excludeHome ? index - 1 : index;
+    const isLast = homifiedIndex == childrenArray.length - 1;
     return (
       <Frame
         key={homifiedIndex}
         primitiveType="window"
         rootClasses={classnames(
-          homifiedIndex == -1 ? styles.outer__start : null,
-          styles.outer,
-          isLast ? styles.outer__end : null
+          homifiedIndex == -1 ? "ts-breadcrumbs__outerstart" : null,
+          "ts-breadcrumbs__outer",
+          isLast ? "ts-breadcrumbs__outerend" : null,
+          ...componentClasses(csVariant, csSize, csModifiers)
         )}
       >
         <Frame
           primitiveType="window"
           rootClasses={classnames(
-            styles.inner,
-            isLast ? styles.inner__end : null
+            "ts-breadcrumbs__inner",
+            isLast ? "ts-breadcrumbs__innerend" : null,
+            ...componentClasses(csVariant, csSize, csModifiers)
           )}
         >
           {node}
@@ -48,12 +66,18 @@ export function BreadCrumbs(props: BreadCrumbsProps) {
       key={0}
       primitiveType="window"
       rootClasses={classnames(
-        styles.outer__start,
-        styles.outer,
-        styles.outerHome
+        "ts-breadcrumbs__outerstart",
+        "ts-breadcrumbs__outer",
+        "ts-breadcrumbs__outerhome",
+        ...componentClasses(csVariant, csSize, csModifiers)
       )}
     >
-      <div className={classnames(styles.inner, styles.innerHome)}>
+      <div
+        className={classnames(
+          "ts-breadcrumbs__inner",
+          "ts-breadcrumbs__innerhome"
+        )}
+      >
         <DefaultHomeCrumb />
       </div>
     </Frame>
@@ -62,12 +86,9 @@ export function BreadCrumbs(props: BreadCrumbsProps) {
   return (
     <Frame
       primitiveType="window"
-      rootClasses={classnames(styles.root, props.rootClasses)}
-      csColor="surface"
-      csVariant="default"
-      csTextStyles={["fontWeightMedium", "fontSizeXS", "lineHeightAuto"]}
+      rootClasses={classnames("ts-breadcrumbs", rootClasses)}
     >
-      {props.excludeHome ? null : home}
+      {excludeHome ? null : home}
       {nodes}
     </Frame>
   );
@@ -79,12 +100,11 @@ export function DefaultHomeCrumb() {
       primitiveType="cyberstormLink"
       linkId="Index"
       tooltipText="Home"
-      csTextStyles={["fontSizeS", "fontWeightRegular"]}
       aria-label="Home"
-      rootClasses={styles.homeLink}
+      rootClasses={"ts-breadcrumbs__homelink"}
     >
-      <NewIcon noWrapper csColor="cyber-green" csVariant="default">
-        <FontAwesomeIcon icon={faHouse} className={styles.home} />
+      <NewIcon noWrapper csVariant="cyber">
+        <FontAwesomeIcon icon={faHouse} className={"ts-breadcrumbs__home"} />
       </NewIcon>
     </NewLink>
   );
diff --git a/packages/cyberstorm/src/newComponents/Button/Button.css b/packages/cyberstorm/src/newComponents/Button/Button.css
new file mode 100644
index 000000000..9d592929e
--- /dev/null
+++ b/packages/cyberstorm/src/newComponents/Button/Button.css
@@ -0,0 +1,27 @@
+@layer components {
+  .ts-button {
+    display: flex;
+    flex: none;
+    flex-direction: row;
+    gap: var(--button-gap);
+    align-items: center;
+
+    height: var(--button-height);
+
+    padding: var(--button-padding);
+
+    border: var(--button-border);
+    border-color: var(--button-border-color);
+    border-radius: var(--button-border-radius);
+    color: var(--button-text-color);
+
+    font-weight: var(--button-font-weight);
+    font-size: var(--button-font-size);
+    line-height: var(--button-line-height);
+
+    text-align: center;
+    text-decoration: none;
+    background-color: var(--button-background-color);
+    user-select: none;
+  }
+}
diff --git a/packages/cyberstorm/src/newComponents/Button/Button.tsx b/packages/cyberstorm/src/newComponents/Button/Button.tsx
index 007f60748..c388a1361 100644
--- a/packages/cyberstorm/src/newComponents/Button/Button.tsx
+++ b/packages/cyberstorm/src/newComponents/Button/Button.tsx
@@ -1,7 +1,7 @@
-import buttonStyles from "../../sharedComponentStyles/ButtonStyles/Button.module.css";
-import iconButtonStyles from "../../sharedComponentStyles/ButtonStyles/IconButton.module.css";
+import "./Button.css";
+import "./IconButton.css";
 import React from "react";
-import { classnames } from "../../utils/utils";
+import { classnames, componentClasses } from "../../utils/utils";
 import {
   ActionableButtonProps,
   Actionable,
@@ -9,34 +9,26 @@ import {
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { NewIcon } from "../..";
+import {
+  ButtonVariants,
+  ButtonSizes,
+  ButtonModifiers,
+  IconButtonVariants,
+  IconButtonModifiers,
+  IconButtonSizes,
+} from "@thunderstore/cyberstorm-theme/src/components";
 
 interface ButtonProps extends Omit<ActionableButtonProps, "primitiveType"> {
-  csVariant?:
-    | "default"
-    | "defaultPeek"
-    | "primary"
-    | "secondary"
-    | "tertiary"
-    | "minimal"
-    | "accent"
-    | "special";
-  csSize?: "xs" | "s" | "m" | "l";
+  csVariant?: ButtonVariants;
+  csSize?: ButtonSizes;
+  csModifiers?: ButtonModifiers[];
 }
 
 interface IconButtonProps
-  extends Omit<
-    ActionableButtonProps,
-    "primitiveType" | "csVariant" | "csSize" | "children"
-  > {
-  csVariant?:
-    | "default"
-    | "defaultPeek"
-    | "primary"
-    | "secondary"
-    | "tertiary"
-    | "tertiaryDimmed"
-    | "minimal";
-  csSize?: "xs" | "s" | "m";
+  extends Omit<ActionableButtonProps, "primitiveType" | "children"> {
+  csVariant?: IconButtonVariants;
+  csSize?: IconButtonSizes;
+  csModifiers?: IconButtonModifiers[];
   icon: IconProp;
 }
 
@@ -44,15 +36,16 @@ export type ButtonComponentProps =
   | ({ icon?: false } & ButtonProps)
   | ({ icon: IconProp } & IconButtonProps);
 
+// TODO: Add style support for disabled
 export const Button = React.forwardRef<HTMLButtonElement, ButtonComponentProps>(
   (props: ButtonComponentProps, forwardedRef) => {
-    const { rootClasses, csTextStyles, icon, ...forwardedProps } = props;
+    const { rootClasses, icon, ...forwardedProps } = props;
 
     if (icon) {
       const {
-        csVariant = "default",
-        csColor = "purple",
-        csSize = "m",
+        csVariant = "primary",
+        csSize = "medium",
+        csModifiers,
         ...fProps
       } = forwardedProps as IconButtonProps;
 
@@ -60,13 +53,14 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonComponentProps>(
         <Actionable
           primitiveType="button"
           {...fProps}
-          rootClasses={classnames(iconButtonStyles.iconButton, rootClasses)}
-          csColor={csColor}
-          csSize={csSize}
-          csVariant={csVariant}
+          rootClasses={classnames(
+            "ts-iconbutton",
+            ...componentClasses(csVariant, csSize, csModifiers),
+            rootClasses
+          )}
           ref={forwardedRef}
         >
-          <NewIcon csMode="inline" noWrapper>
+          <NewIcon csMode="inline" noWrapper rootClasses="ts-iconbutton__icon">
             <FontAwesomeIcon icon={icon} />
           </NewIcon>
         </Actionable>
@@ -75,36 +69,21 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonComponentProps>(
 
     const {
       children,
-      csVariant = "default",
-      csColor = "purple",
-      csSize = "m",
+      csVariant = "primary",
+      csSize = "medium",
+      csModifiers,
       ...fProps
     } = forwardedProps as ButtonProps;
 
-    // TODO: Turn into a proper resolver function
-    // Same logic is in LinkButton too
-    const fontStyles = (size: typeof csSize) => {
-      if (size === "xs") {
-        return ["fontSizeXS", "fontWeightBold", "lineHeightAuto"];
-      } else if (size === "s") {
-        return ["fontSizeS", "fontWeightBold", "lineHeightAuto"];
-      } else {
-        return ["fontSizeM", "fontWeightBold", "lineHeightAuto"];
-      }
-    };
-
     return (
       <Actionable
         primitiveType="button"
         {...fProps}
         rootClasses={classnames(
-          ...(csTextStyles ? csTextStyles : fontStyles(csSize)),
-          buttonStyles.button,
+          "ts-button",
+          ...componentClasses(csVariant, csSize, csModifiers),
           rootClasses
         )}
-        csColor={csColor}
-        csSize={csSize}
-        csVariant={csVariant}
         ref={forwardedRef}
       >
         {children}
diff --git a/packages/cyberstorm/src/newComponents/Button/IconButton.css b/packages/cyberstorm/src/newComponents/Button/IconButton.css
new file mode 100644
index 000000000..551ea63e8
--- /dev/null
+++ b/packages/cyberstorm/src/newComponents/Button/IconButton.css
@@ -0,0 +1,22 @@
+@layer components {
+  .ts-iconbutton {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--iconbutton-gap);
+    align-items: center;
+    justify-content: center;
+    width: var(--iconbutton-width);
+    height: var(--iconbutton-height);
+    padding: var(--iconbutton-padding);
+    border: var(--iconbutton-border);
+    border-color: var(--iconbutton-border-color);
+    border-radius: var(--iconbutton-border-radius);
+    color: var(--iconbutton-icon-color);
+    background-color: var(--iconbutton-background-color);
+    user-select: none;
+  }
+
+  .ts-iconbutton__icon {
+    --icon-inline-size: 1rem;
+  }
+}
diff --git a/packages/cyberstorm/src/newComponents/Card/CardCommunity/CardCommunity.css b/packages/cyberstorm/src/newComponents/Card/CardCommunity/CardCommunity.css
new file mode 100644
index 000000000..dc6e36b95
--- /dev/null
+++ b/packages/cyberstorm/src/newComponents/Card/CardCommunity/CardCommunity.css
@@ -0,0 +1,68 @@
+@layer components {
+  .ts-cardcommunity {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-12);
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-body-lg);
+  }
+
+  .ts-cardcommunity:hover .ts-cardcommunity__imagewrapper {
+    filter: brightness(1.2);
+  }
+
+  .ts-cardcommunity:has(:focus-visible) {
+    border-radius: var(--radius-md);
+    outline: 0.2rem solid var(--color-cyber-green-5);
+    outline-offset: 0.5rem;
+  }
+
+  .ts-cardcommunity .ts-cardcommunity__imagewrapper > div {
+    transform-origin: bottom;
+  }
+
+  .ts-cardcommunity:hover .ts-cardcommunity__imagewrapper > div,
+  .ts-cardcommunity:focus-within .ts-cardcommunity__imagewrapper > div {
+    transform: scale(1.035);
+  }
+
+  .ts-cardcommunity__title {
+    overflow: hidden;
+    line-height: var(--line-height-auto);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    --link-color: var(--color-text-primary);
+  }
+
+  .ts-cardcommunity__title:focus-visible {
+    outline: none !important;
+  }
+
+  .ts-cardcommunity__metaitemlist {
+    display: flex;
+    flex-direction: row;
+    gap: var(--gap-md);
+    margin-top: auto;
+  }
+
+  .ts-cardcommunity__metaitem {
+    display: flex;
+    gap: var(--gap-xs);
+    align-items: center;
+    color: var(--color-text-accent);
+    font-size: var(--font-size-body-sm);
+  }
+
+  .ts-cardcommunity__tag {
+    position: absolute;
+    right: 0;
+    z-index: 1;
+    display: flex;
+    flex-flow: row-reverse;
+    flex-wrap: wrap;
+    gap: var(--space-8);
+    margin: var(--space-8);
+  }
+}
diff --git a/packages/cyberstorm/src/newComponents/Card/CardCommunity/CardCommunity.module.css b/packages/cyberstorm/src/newComponents/Card/CardCommunity/CardCommunity.module.css
deleted file mode 100644
index 7440915ee..000000000
--- a/packages/cyberstorm/src/newComponents/Card/CardCommunity/CardCommunity.module.css
+++ /dev/null
@@ -1,59 +0,0 @@
-.root {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space--12);
-}
-
-.root:hover .imageWrapper {
-  filter: brightness(1.2);
-}
-
-.root:has(:focus-visible) {
-  border-radius: var(--border-radius--8);
-  outline: 0.2rem solid var(--color-cyber-green--5);
-  outline-offset: 0.5rem;
-}
-
-.root .imageWrapper > div {
-  transform-origin: bottom;
-}
-
-.root:hover .imageWrapper > div,
-.root:focus-within .imageWrapper > div {
-  transform: scale(1.035);
-}
-
-.title {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.title:focus-visible {
-  outline: none !important;
-}
-
-.metaItemList {
-  display: flex;
-  flex-direction: row;
-  gap: var(--gap--16);
-  margin-top: auto;
-}
-
-.metaItem {
-  display: flex;
-  gap: var(--gap--8);
-  align-items: center;
-}
-
-.tag {
-  position: absolute;
-  right: 0;
-  z-index: 1;
-  display: flex;
-  flex-flow: row-reverse;
-  flex-wrap: wrap;
-  gap: var(--space--8);
-  margin: var(--space--8);
-}
diff --git a/packages/cyberstorm/src/newComponents/Card/CardCommunity/CardCommunity.tsx b/packages/cyberstorm/src/newComponents/Card/CardCommunity/CardCommunity.tsx
index ca33e2983..3aff0bfd6 100644
--- a/packages/cyberstorm/src/newComponents/Card/CardCommunity/CardCommunity.tsx
+++ b/packages/cyberstorm/src/newComponents/Card/CardCommunity/CardCommunity.tsx
@@ -7,10 +7,10 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Community } from "@thunderstore/dapper/types";
 
-import styles from "./CardCommunity.module.css";
 import { numberWithSpaces, formatInteger } from "../../../utils/utils";
 import { NewLink, NewIcon, Image, NewTag } from "../../..";
-import { Container } from "../../Container/Container";
+import { TooltipWrapper } from "../../../primitiveComponents/utils/utils";
+import "./CardCommunity.css";
 
 interface Props {
   community: Community;
@@ -22,15 +22,10 @@ export function CardCommunity(props: Props) {
   const { community, isPopular, isNew } = props;
 
   return (
-    <Container
-      csColor="surface"
-      csTextStyles={["fontSizeM", "fontWeightBold"]}
-      csVariant="primary"
-      rootClasses={styles.root}
-    >
-      <Container rootClasses={styles.tag}>
+    <div className="ts-cardcommunity">
+      <div className="ts-cardcommunity__tag">
         {isPopular ? (
-          <NewTag dark csColor="orange">
+          <NewTag csModifiers={["dark"]} csVariant="orange">
             <NewIcon noWrapper csMode="inline">
               <FontAwesomeIcon icon={faFire} />
             </NewIcon>
@@ -38,14 +33,14 @@ export function CardCommunity(props: Props) {
           </NewTag>
         ) : null}
         {isNew ? (
-          <NewTag dark csColor="green">
+          <NewTag csModifiers={["dark"]} csVariant="green">
             <NewIcon noWrapper csMode="inline">
               <FontAwesomeIcon icon={faHandSparkles} />
             </NewIcon>
             New
           </NewTag>
         ) : null}
-      </Container>
+      </div>
       <NewLink
         primitiveType="cyberstormLink"
         tabIndex={-1}
@@ -56,48 +51,44 @@ export function CardCommunity(props: Props) {
         <Image
           src={community.cover_image_url}
           cardType="community"
-          rootClasses={styles.imageWrapper}
+          rootClasses="ts-cardcommunity__imagewrapper"
         />
       </NewLink>
       <NewLink
         primitiveType="cyberstormLink"
         linkId="Community"
         community={community.identifier}
-        rootClasses={styles.title}
-        csVariant="primary"
-        csTextStyles={["lineHeightAuto"]}
+        rootClasses="ts-cardcommunity__title"
       >
         {community.name}
       </NewLink>
-      <Container rootClasses={styles.metaItemList}>
-        <Container
-          csVariant="accent"
-          csTextStyles={["fontSizeXS"]}
+      <div className="ts-cardcommunity__metaitemlist">
+        <TooltipWrapper
           tooltipText={`${numberWithSpaces(
             community.total_package_count
           )} Packages`}
-          rootClasses={styles.metaItem}
         >
-          <NewIcon csMode="inline" noWrapper>
-            <FontAwesomeIcon icon={faBoxOpen} />
-          </NewIcon>
-          {formatInteger(community.total_package_count)}
-        </Container>
-        <Container
-          csVariant="accent"
-          csTextStyles={["fontSizeXS"]}
+          <div className="ts-cardcommunity__metaitem">
+            <NewIcon csMode="inline" noWrapper>
+              <FontAwesomeIcon icon={faBoxOpen} />
+            </NewIcon>
+            {formatInteger(community.total_package_count)}
+          </div>
+        </TooltipWrapper>
+        <TooltipWrapper
           tooltipText={`${numberWithSpaces(
             community.total_download_count
           )} Downloads`}
-          rootClasses={styles.metaItem}
         >
-          <NewIcon csMode="inline" noWrapper>
-            <FontAwesomeIcon icon={faDownload} />
-          </NewIcon>
-          {formatInteger(community.total_download_count)}
-        </Container>
-      </Container>
-    </Container>
+          <div className="ts-cardcommunity__metaitem">
+            <NewIcon csMode="inline" noWrapper>
+              <FontAwesomeIcon icon={faDownload} />
+            </NewIcon>
+            {formatInteger(community.total_download_count)}
+          </div>
+        </TooltipWrapper>
+      </div>
+    </div>
   );
 }
 
diff --git a/packages/cyberstorm/src/newComponents/Container/Container.module.css b/packages/cyberstorm/src/newComponents/Container/Container.module.css
deleted file mode 100644
index 16566337d..000000000
--- a/packages/cyberstorm/src/newComponents/Container/Container.module.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.container {
-  color: var(--container-color);
-
-  --container-color: var(--color-primary);
-}
-
-.container[data-variant="default"] {
-  --container-color: var(--color-5);
-}
-
-.container[data-variant="primary"] {
-  --container-color: var(--color-primary);
-}
-
-.container[data-variant="secondary"] {
-  --container-color: var(--color-secondary);
-}
-
-.container[data-variant="tertiary"] {
-  --container-color: var(--color-tertiary);
-}
-
-.container[data-variant="accent"] {
-  --container-color: var(--color-accent);
-}
diff --git a/packages/cyberstorm/src/newComponents/Container/Container.tsx b/packages/cyberstorm/src/newComponents/Container/Container.tsx
deleted file mode 100644
index f42e4f14a..000000000
--- a/packages/cyberstorm/src/newComponents/Container/Container.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import styles from "./Container.module.css";
-import React from "react";
-import { Frame, FrameWindowProps } from "../../primitiveComponents/Frame/Frame";
-import { classnames } from "../../utils/utils";
-
-export const Container = React.forwardRef<
-  HTMLDivElement,
-  Omit<FrameWindowProps, "primitiveType">
->((props: Omit<FrameWindowProps, "primitiveType">, forwardedRef) => {
-  const {
-    children,
-    rootClasses,
-    csColor = "purple",
-    csVariant = "primary",
-    ...forwardedProps
-  } = props;
-  const fProps = forwardedProps as FrameWindowProps;
-  return (
-    <Frame
-      {...fProps}
-      primitiveType={"window"}
-      rootClasses={classnames(styles.container, rootClasses)}
-      csColor={csColor}
-      csVariant={csVariant}
-      ref={forwardedRef}
-    >
-      {children}
-    </Frame>
-  );
-});
-
-Container.displayName = "Container";
diff --git a/packages/cyberstorm/src/newComponents/DropDown/DropDown.css b/packages/cyberstorm/src/newComponents/DropDown/DropDown.css
new file mode 100644
index 000000000..8393af5ca
--- /dev/null
+++ b/packages/cyberstorm/src/newComponents/DropDown/DropDown.css
@@ -0,0 +1,35 @@
+@layer components {
+  .ts-dropdown {
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    padding: var(--dropdown-padding);
+    border: var(--dropdown-border);
+    border-color: var(--dropdown-border-color);
+    border-radius: var(--dropdown-border-radius);
+    overflow: hidden;
+    color: var(--dropdown-text-color);
+    background-color: var(--dropdown-background-color);
+    box-shadow: var(--dropdown-box-shadow);
+    transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+    animation: var(--dropdown-animation);
+  }
+
+  .ts-dropdown__item {
+    padding: var(--dropdown__item-padding);
+    overflow: hidden;
+    color: var(--dropdown__item-color);
+    background-color: var(--dropdown__item-background-color);
+    outline: none;
+  }
+
+  .ts-dropdown__item[data-highlighted] {
+    z-index: 999;
+  }
+
+  .ts-dropdown__divider {
+    height: var(--dropdown__divider-height);
+    margin: var(--dropdown__divider-margin);
+    background-color: var(--dropdown__divider-background-color);
+  }
+}
diff --git a/packages/cyberstorm/src/newComponents/DropDown/DropDown.module.css b/packages/cyberstorm/src/newComponents/DropDown/DropDown.module.css
deleted file mode 100644
index 61c8e8b70..000000000
--- a/packages/cyberstorm/src/newComponents/DropDown/DropDown.module.css
+++ /dev/null
@@ -1,123 +0,0 @@
-.dropdown {
-  z-index: 2;
-  display: flex;
-  flex-direction: column;
-  padding: var(--space--8) 0;
-  border: var(--space--px) var(--dropdown-border-color) solid;
-  border-radius: var(--border-radius--8);
-  overflow: hidden;
-  color: var(--dropdown-color);
-  background-color: var(--dropdown-background-color);
-  box-shadow: var(--box-shadow-default);
-  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
-  animation: fade-in var(--animation-length-m) ease;
-
-  --dropdown-color: var(--color-primary);
-  --dropdown-background-color: var(--color-secondary);
-  --dropdown-border-color: var(--color-tertiary);
-}
-
-.dropdown[data-variant="default"] {
-  --dropdown-color: var(--color-5);
-  --dropdown-background-color: var(--color-2);
-  --dropdown-border-color: var(--color-6);
-}
-
-.dropdown[data-variant="primary"] {
-  --dropdown-color: var(--color-primary);
-  --dropdown-background-color: var(--color-secondary);
-  --dropdown-border-color: var(--color-tertiary);
-}
-
-.dropdown[data-variant="secondary"] {
-  --dropdown-color: var(--color-secondary);
-  --dropdown-background-color: var(--color-primary);
-  --dropdown-border-color: var(--color-accent);
-}
-
-.dropdown[data-variant="tertiary"] {
-  --dropdown-color: var(--color-tertiary);
-  --dropdown-background-color: var(--color-accent);
-  --dropdown-border-color: var(--color-secondary);
-}
-
-.dropdown[data-variant="accent"] {
-  --dropdown-color: var(--color-accent);
-  --dropdown-background-color: var(--color-tertiary);
-  --dropdown-border-color: var(--color-secondary);
-}
-
-.dropdownItem {
-  padding: var(--space--12) var(--space--16);
-  overflow: hidden;
-  color: var(--dropdown-item-color, var(--dropdown-color));
-  background-color: var(
-    --dropdown-item-background-color,
-    var(--dropdown-background-color)
-  );
-  outline: none;
-
-  --dropdown-item-color: var(--color-tertiary);
-  --dropdown-item-background-color: var(--color-2);
-  --dropdown-item-highlighted-background-color: var(--color-6);
-}
-
-.dropdownItem[data-highlighted] {
-  z-index: 999;
-  color: var(--dropdown-item-highlighted-color, var(--color-primary));
-  background-color: var(
-    --dropdown-item-highlighted-background-color,
-    var(--color-primary)
-  );
-}
-
-.dropdownItem[data-variant="default"] {
-  --dropdown-item-color: var(--color-8);
-  --dropdown-item-background-color: var(--color-2);
-  --dropdown-item-highlighted-color: var(--color-2);
-  --dropdown-item-highlighted-background-color: var(--color-6);
-}
-
-.dropdownItem[data-variant="primary"] {
-  --dropdown-item-color: var(--color-primary);
-  --dropdown-item-background-color: var(--color-secondary);
-  --dropdown-item-highlighted-color: var(--color-secondary);
-  --dropdown-item-highlighted-background-color: var(--color-primary);
-}
-
-.dropdownItem[data-variant="secondary"] {
-  --dropdown-item-color: var(--color-secondary);
-  --dropdown-item-background-color: var(--color-primary);
-  --dropdown-item-highlighted-color: var(--color-primary);
-  --dropdown-item-highlighted-background-color: var(--color-secondary);
-}
-
-.dropdownItem[data-variant="tertiary"] {
-  --dropdown-item-color: var(--color-tertiary);
-  --dropdown-item-background-color: var(--color-accent);
-  --dropdown-item-highlighted-color: var(--color-accent);
-  --dropdown-item-highlighted-background-color: var(--color-tertiary);
-}
-
-.dropdownItem[data-variant="accent"] {
-  --dropdown-item-color: var(--color-accent);
-  --dropdown-item-background-color: var(--color-tertiary);
-  --dropdown-item-highlighted-color: var(--color-tertiary);
-  --dropdown-item-highlighted-background-color: var(--color-accent);
-}
-
-.divider {
-  height: var(--space--px);
-  margin: var(--space--8) 0;
-  background-color: var(--color-6, var(--color-primary, red));
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
diff --git a/packages/cyberstorm/src/newComponents/DropDown/DropDown.tsx b/packages/cyberstorm/src/newComponents/DropDown/DropDown.tsx
index 32aa8bcd3..94c56fbc0 100644
--- a/packages/cyberstorm/src/newComponents/DropDown/DropDown.tsx
+++ b/packages/cyberstorm/src/newComponents/DropDown/DropDown.tsx
@@ -1,5 +1,6 @@
+import "./DropDown.css";
 import { ReactNode, ReactElement } from "react";
-import styles from "./DropDown.module.css";
+// import styles from "./DropDown.module.css";
 
 import {
   Root,
@@ -9,24 +10,36 @@ import {
   DropdownMenuItemProps,
   Item,
 } from "@radix-ui/react-dropdown-menu";
-import { Container } from "../Container/Container";
-import { classnames } from "../../utils/utils";
+import { classnames, componentClasses } from "../../utils/utils";
 import { PrimitiveComponentDefaultProps } from "../../primitiveComponents/utils/utils";
+import {
+  DropDownVariants,
+  DropDownSizes,
+  DropDownModifiers,
+  DropDownItemModifiers,
+  DropDownItemSizes,
+  DropDownItemVariants,
+  DropDownDividerModifiers,
+  DropDownDividerSizes,
+  DropDownDividerVariants,
+} from "@thunderstore/cyberstorm-theme/src/components";
 
 interface DropDownProps extends PrimitiveComponentDefaultProps {
   defaultOpen?: boolean;
   contentAlignment?: "start" | "center" | "end";
   trigger: ReactNode | ReactElement;
+  csVariant?: DropDownVariants;
+  csSize?: DropDownSizes;
+  csModifiers?: DropDownModifiers[];
 }
 
 export function DropDown(props: DropDownProps) {
   const {
     children,
     rootClasses,
-    csColor,
-    csVariant,
-    csSize,
-    csTextStyles,
+    csVariant = "primary",
+    csSize = "medium",
+    csModifiers,
     defaultOpen = false,
     contentAlignment = "start",
     trigger,
@@ -43,13 +56,10 @@ export function DropDown(props: DropDownProps) {
           align={contentAlignment}
           sideOffset={8}
           className={classnames(
-            styles.dropdown,
-            ...(csTextStyles ? csTextStyles : []),
+            "ts-dropdown",
+            ...componentClasses(csVariant, csSize, csModifiers),
             rootClasses
           )}
-          data-color={csColor}
-          data-variant={csVariant}
-          data-size={csSize}
         >
           {children}
         </Content>
@@ -60,16 +70,19 @@ export function DropDown(props: DropDownProps) {
 
 interface DropDownItemProps
   extends PrimitiveComponentDefaultProps,
-    DropdownMenuItemProps {}
+    DropdownMenuItemProps {
+  csVariant?: DropDownItemVariants;
+  csSize?: DropDownItemSizes;
+  csModifiers?: DropDownItemModifiers[];
+}
 
 export function DropDownItem(props: DropDownItemProps) {
   const {
     children,
     rootClasses,
-    csTextStyles,
-    csColor,
-    csVariant,
-    csSize,
+    csVariant = "primary",
+    csSize = "medium",
+    csModifiers,
     ...fProps
   } = props;
 
@@ -77,24 +90,37 @@ export function DropDownItem(props: DropDownItemProps) {
     <Item
       {...fProps}
       className={classnames(
-        styles.dropdownItem,
-        ...(csTextStyles ? csTextStyles : []),
+        "ts-dropdown__item",
+        ...componentClasses(csVariant, csSize, csModifiers),
         rootClasses
       )}
-      data-color={csColor}
-      data-variant={csVariant}
-      data-size={csSize}
     >
       {children}
     </Item>
   );
 }
 
-export function DropDownDivider(props: PrimitiveComponentDefaultProps) {
-  const { rootClasses, ...fProps } = props;
+interface DropDownDividerProps extends PrimitiveComponentDefaultProps {
+  csVariant?: DropDownDividerVariants;
+  csSize?: DropDownDividerSizes;
+  csModifiers?: DropDownDividerModifiers[];
+}
+
+export function DropDownDivider(props: DropDownDividerProps) {
+  const {
+    rootClasses,
+    csVariant = "primary",
+    csSize = "medium",
+    csModifiers,
+    ...fProps
+  } = props;
   return (
-    <Container
-      rootClasses={classnames(styles.divider, rootClasses)}
+    <div
+      className={classnames(
+        "ts-dropdown__divider",
+        ...componentClasses(csVariant, csSize, csModifiers),
+        rootClasses
+      )}
       {...fProps}
     />
   );
diff --git a/packages/cyberstorm/src/newComponents/Heading/Heading.css b/packages/cyberstorm/src/newComponents/Heading/Heading.css
new file mode 100644
index 000000000..cccb57bba
--- /dev/null
+++ b/packages/cyberstorm/src/newComponents/Heading/Heading.css
@@ -0,0 +1,19 @@
+@layer components {
+  .ts-heading {
+    color: var(--heading-text-color);
+    font-weight: var(--heading-font-weight);
+    font-size: var(--heading-font-size);
+    font-family: var(--heading-font-family);
+    font-style: var(--heading-font-style);
+    line-height: var(--heading-line-height);
+  }
+
+  .ts-display {
+    color: var(--heading-text-color);
+    font-weight: var(--display-font-weight);
+    font-size: var(--display-font-size);
+    font-family: var(--display-font-family);
+    font-style: var(--display-font-style);
+    line-height: var(--display-line-height);
+  }
+}
diff --git a/packages/cyberstorm/src/newComponents/Heading/Heading.module.css b/packages/cyberstorm/src/newComponents/Heading/Heading.module.css
deleted file mode 100644
index 73b77ac89..000000000
--- a/packages/cyberstorm/src/newComponents/Heading/Heading.module.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.heading {
-  color: var(--heading-color);
-
-  --heading-color: var(--color-primary);
-}
-
-.heading[data-variant="primary"] {
-  --heading-color: var(--color-primary);
-}
-
-.heading[data-variant="secondary"] {
-  --heading-color: var(--color-secondary);
-}
-
-.heading[data-variant="tertiary"] {
-  --heading-color: var(--color-tertiary);
-}
-
-.heading[data-variant="accent"] {
-  --heading-color: var(--color-accent);
-}
diff --git a/packages/cyberstorm/src/newComponents/Heading/Heading.tsx b/packages/cyberstorm/src/newComponents/Heading/Heading.tsx
index 7419747ee..c52b45b32 100644
--- a/packages/cyberstorm/src/newComponents/Heading/Heading.tsx
+++ b/packages/cyberstorm/src/newComponents/Heading/Heading.tsx
@@ -1,17 +1,25 @@
-import styles from "./Heading.module.css";
+import "./Heading.css";
 import React from "react";
 import {
   Frame,
   FrameHeadingProps,
   FrameDisplayProps,
 } from "../../primitiveComponents/Frame/Frame";
-import { classnames } from "../../utils/utils";
+import { classnames, componentClasses } from "../../utils/utils";
+import {
+  HeadingVariants,
+  HeadingSizes,
+  HeadingModifiers,
+} from "@thunderstore/cyberstorm-theme/src/components";
 
 interface DefaultProps
   extends React.HTMLAttributes<HTMLHeadingElement>,
     Omit<FrameHeadingProps, "primitiveType">,
     Omit<FrameDisplayProps, "primitiveType"> {
   mode?: "heading" | "display";
+  csVariant?: HeadingVariants;
+  csSize?: HeadingSizes;
+  csModifiers?: HeadingModifiers[];
 }
 
 export const Heading = React.forwardRef<HTMLHeadingElement, DefaultProps>(
@@ -19,21 +27,29 @@ export const Heading = React.forwardRef<HTMLHeadingElement, DefaultProps>(
     const {
       children,
       rootClasses,
-      csVariant = "primary",
       csLevel = "1",
-      csStyleLevel,
+      csVariant = "primary",
+      csModifiers,
+      csSize,
       mode = "heading",
       ...forwardedProps
     } = props;
     const fProps = forwardedProps as DefaultProps;
+
     return (
       <Frame
         {...fProps}
         primitiveType={mode}
-        rootClasses={classnames(styles.heading, rootClasses)}
-        csVariant={csVariant}
+        rootClasses={classnames(
+          `ts-${mode}`,
+          ...componentClasses(
+            csVariant,
+            csSize ? csSize : csLevel,
+            csModifiers
+          ),
+          rootClasses
+        )}
         csLevel={csLevel}
-        csStyleLevel={csStyleLevel ? csStyleLevel : csLevel}
         ref={forwardedRef}
       >
         {children}
diff --git a/packages/cyberstorm/src/newComponents/Icon/Icon.css b/packages/cyberstorm/src/newComponents/Icon/Icon.css
new file mode 100644
index 000000000..6fc27425f
--- /dev/null
+++ b/packages/cyberstorm/src/newComponents/Icon/Icon.css
@@ -0,0 +1,28 @@
+@layer components {
+  .ts-icon__wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ts-icon__wrapper svg,
+  .ts-icon {
+    display: flex;
+
+    flex-shrink: 0;
+    color: var(--icon-color, "currentColor");
+    fill: currentcolor;
+    stroke: currentcolor;
+    block-size: 100%;
+    inline-size: auto;
+    min-inline-size: 100%;
+
+    stroke-width: 0;
+  }
+
+  .ts-icon--inline {
+    display: inline-flex;
+    height: var(--icon-inline-size, 1em);
+    min-inline-size: 1em;
+  }
+}
diff --git a/packages/cyberstorm/src/newComponents/Icon/Icon.module.css b/packages/cyberstorm/src/newComponents/Icon/Icon.module.css
deleted file mode 100644
index 126960a68..000000000
--- a/packages/cyberstorm/src/newComponents/Icon/Icon.module.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.icon {
-  color: var(--icon-color, "currentColor");
-}
-
-.icon[data-variant="default"] {
-  --icon-color: var(--color-7);
-}
-
-.icon[data-variant="primary"] {
-  --icon-color: var(--color-primary);
-}
-
-.icon[data-variant="secondary"] {
-  --icon-color: var(--color-secondary);
-}
-
-.icon[data-variant="tertiary"] {
-  --icon-color: var(--color-tertiary);
-}
-
-.icon[data-variant="accent"] {
-  --icon-color: var(--color-accent);
-}
diff --git a/packages/cyberstorm/src/newComponents/Icon/Icon.tsx b/packages/cyberstorm/src/newComponents/Icon/Icon.tsx
index c4e777f3b..35bb6f5e5 100644
--- a/packages/cyberstorm/src/newComponents/Icon/Icon.tsx
+++ b/packages/cyberstorm/src/newComponents/Icon/Icon.tsx
@@ -1,19 +1,27 @@
 import { Frame, FrameIconProps } from "../../primitiveComponents/Frame/Frame";
 import React from "react";
-import styles from "./Icon.module.css";
-import { classnames } from "../../utils/utils";
+import "./Icon.css";
+import { classnames, componentClasses } from "../../utils/utils";
+import { IconVariants } from "@thunderstore/cyberstorm-theme/src/components";
+
+interface IconProps extends Omit<FrameIconProps, "primitiveType"> {
+  csVariant?: IconVariants;
+}
 
 export const Icon = React.forwardRef<
   HTMLDivElement | HTMLSpanElement | SVGElement,
-  Omit<FrameIconProps, "primitiveType">
->((props: Omit<FrameIconProps, "primitiveType">, forwardedRef) => {
-  const { rootClasses, ...forwardedProps } = props;
+  IconProps
+>((props: IconProps, forwardedRef) => {
+  const { rootClasses, csVariant, ...forwardedProps } = props;
   return (
     <Frame
       primitiveType="icon"
       {...forwardedProps}
       ref={forwardedRef}
-      rootClasses={classnames(styles.icon, rootClasses)}
+      rootClasses={classnames(
+        ...componentClasses(csVariant, undefined, undefined),
+        rootClasses
+      )}
     />
   );
 });
diff --git a/packages/cyberstorm/src/newComponents/Image/Image.css b/packages/cyberstorm/src/newComponents/Image/Image.css
new file mode 100644
index 000000000..8febc95bc
--- /dev/null
+++ b/packages/cyberstorm/src/newComponents/Image/Image.css
@@ -0,0 +1,49 @@
+@layer components {
+  .ts-image {
+    object-fit: cover;
+    aspect-ratio: var(--aspect-ratio);
+  }
+
+  .ts-image--issquare {
+    --aspect-ratio: 1;
+    --image-width: 50%;
+  }
+
+  .ts-image--is3by4 {
+    --aspect-ratio: 3 / 4;
+    --image-width: 30%;
+  }
+
+  .ts-image--fullwidth {
+    --image-width: 100%;
+  }
+
+  .ts-image__wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    color: var(--image-wrapper-color);
+    background-color: var(--image-wrapper-bg-color);
+    transition: var(--animation-duration-sm) ease-out;
+    aspect-ratio: var(--aspect-ratio);
+
+    --image-wrapper-color: var(--color-text-primary);
+    --image-wrapper-bg-color: var(--color-text-tertiary);
+  }
+
+  .ts-image__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--image-width);
+    aspect-ratio: 1;
+    transition: var(--animation-duration-sm) ease-out;
+  }
+
+  .ts-image__wrapper:where(.ts-variant--default) {
+    --image-wrapper-color: var(--color-9);
+    --image-wrapper-bg-color: var(--color-4);
+  }
+}
diff --git a/packages/cyberstorm/src/newComponents/Image/Image.module.css b/packages/cyberstorm/src/newComponents/Image/Image.module.css
deleted file mode 100644
index 392c239d2..000000000
--- a/packages/cyberstorm/src/newComponents/Image/Image.module.css
+++ /dev/null
@@ -1,67 +0,0 @@
-.isSquare {
-  --aspect-ratio: 1;
-  --image-width: 50%;
-}
-
-.is3By4 {
-  --aspect-ratio: 3 / 4;
-  --image-width: 30%;
-}
-
-.fullWidth {
-  --image-width: 100%;
-}
-
-.imageWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--border-radius--8);
-  overflow: hidden;
-  color: var(--image-wrapper-color);
-  background-color: var(--image-wrapper-bg-color);
-  transition: var(--animation-length-s) ease-out;
-  aspect-ratio: var(--aspect-ratio);
-
-  --image-wrapper-color: var(--color-primary);
-  --image-wrapper-bg-color: var(--color-tertiary);
-}
-
-.imageContent {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--image-width);
-  aspect-ratio: 1;
-  transition: var(--animation-length-s) ease-out;
-}
-
-.image {
-  object-fit: cover;
-  aspect-ratio: var(--aspect-ratio);
-}
-
-.imageWrapper[data-variant="default"] {
-  --image-wrapper-color: var(--color-9);
-  --image-wrapper-bg-color: var(--color-4);
-}
-
-.imageWrapper[data-variant="primary"] {
-  --image-wrapper-color: var(--color-primary);
-  --image-wrapper-bg-color: var(--color-tertiary);
-}
-
-.imageWrapper[data-variant="secondary"] {
-  --image-wrapper-color: var(--color-secondary);
-  --image-wrapper-bg-color: var(--color-tertiary);
-}
-
-.imageWrapper[data-variant="tertiary"] {
-  --image-wrapper-color: var(--color-tertiary);
-  --image-wrapper-bg-color: var(--color-primary);
-}
-
-.imageWrapper[data-variant="accent"] {
-  --image-wrapper-color: var(--color-accent);
-  --image-wrapper-bg-color: var(--color-primary);
-}
diff --git a/packages/cyberstorm/src/newComponents/Image/Image.tsx b/packages/cyberstorm/src/newComponents/Image/Image.tsx
index c9e5e44ad..95dbe8250 100644
--- a/packages/cyberstorm/src/newComponents/Image/Image.tsx
+++ b/packages/cyberstorm/src/newComponents/Image/Image.tsx
@@ -1,11 +1,12 @@
 import { faBan, faGamepad } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import styles from "./Image.module.css";
-import { classnames } from "../../utils/utils";
+import "./Image.css";
+import { classnames, componentClasses } from "../../utils/utils";
 import { Frame, FrameWindowProps } from "../../primitiveComponents/Frame/Frame";
-import { Icon } from "../..";
+import { NewIcon } from "../..";
 import React from "react";
+import { ImageVariants } from "@thunderstore/cyberstorm-theme/src/components";
 
 interface ImageProps extends Omit<FrameWindowProps, "primitiveType"> {
   src: string | null;
@@ -15,6 +16,7 @@ interface ImageProps extends Omit<FrameWindowProps, "primitiveType"> {
   alt?: string;
   /** Force 1:1 aspect ratio */
   square?: boolean;
+  csVariant?: ImageVariants;
 }
 
 // TODO: Needs a storybook story
@@ -29,8 +31,7 @@ export const Image = React.forwardRef<HTMLDivElement, ImageProps>(
       alt = "",
       rootClasses,
       square = false,
-      csColor = "surface",
-      csVariant = "default",
+      csVariant = "primary",
       ...forwardedProps
     } = props;
     const fProps = forwardedProps as ImageProps;
@@ -40,25 +41,33 @@ export const Image = React.forwardRef<HTMLDivElement, ImageProps>(
         {...fProps}
         primitiveType="window"
         rootClasses={classnames(
-          styles.imageWrapper,
+          "ts-image__wrapper",
+          ...componentClasses(csVariant, undefined, undefined),
           rootClasses,
-          square ? styles.isSquare : styles.is3By4
+          square ? "ts-image--issquare" : "ts-image--is3by4"
         )}
-        csColor={csColor}
-        csVariant={csVariant}
         ref={forwardedRef}
       >
         {src ? (
           <Frame
             primitiveType="window"
-            rootClasses={classnames(styles.imageContent, styles.fullWidth)}
+            rootClasses={classnames(
+              "ts-image__content",
+              ...componentClasses(csVariant, undefined, undefined),
+              "ts-image--fullwidth"
+            )}
           >
-            <img src={src} alt={alt} className={styles.image} />
+            <img src={src} alt={alt} className="ts-image" />
           </Frame>
         ) : (
-          <Icon wrapperClasses={styles.imageContent}>
+          <NewIcon
+            wrapperClasses={classnames(
+              "ts-image__content",
+              ...componentClasses(csVariant, undefined, undefined)
+            )}
+          >
             <FontAwesomeIcon icon={getIcon(cardType)} />
-          </Icon>
+          </NewIcon>
         )}
       </Frame>
     );
diff --git a/packages/cyberstorm/src/newComponents/Link/Link/Link.css b/packages/cyberstorm/src/newComponents/Link/Link/Link.css
new file mode 100644
index 000000000..c432f23b0
--- /dev/null
+++ b/packages/cyberstorm/src/newComponents/Link/Link/Link.css
@@ -0,0 +1,6 @@
+@layer components {
+  .ts-link {
+    color: var(--link-color);
+    text-decoration: none;
+  }
+}
diff --git a/packages/cyberstorm/src/newComponents/Link/Link/Link.module.css b/packages/cyberstorm/src/newComponents/Link/Link/Link.module.css
deleted file mode 100644
index 8bb51f0b4..000000000
--- a/packages/cyberstorm/src/newComponents/Link/Link/Link.module.css
+++ /dev/null
@@ -1,90 +0,0 @@
-/* Common Link styles */
-.link {
-  color: var(--link-color);
-
-  --link-color: var(--text-color);
-}
-
-.link:hover {
-  --link-color: var(--text-color);
-}
-
-.link:active {
-  --link-color: var(--text-color);
-}
-
-.link[data-variant="default"] {
-  --link-color: var(--color-7);
-}
-
-.link[data-variant="default"]:hover {
-  --link-color: var(--color-9);
-}
-
-.link[data-variant="default"]:active {
-  --link-color: var(--color-9);
-}
-
-.link[data-variant="primary"] {
-  --link-color: var(--color-primary);
-}
-
-.link[data-variant="primary"]:hover {
-  --link-color: var(--color-primary);
-}
-
-.link[data-variant="primary"]:active {
-  --link-color: var(--color-primary);
-}
-
-.link[data-variant="secondary"] {
-  --link-color: var(--color-secondary);
-}
-
-.link[data-variant="secondary"]:hover {
-  --link-color: var(--color-primary);
-}
-
-.link[data-variant="secondary"]:active {
-  --link-color: var(--color-primary);
-}
-
-.link[data-variant="tertiary"] {
-  --link-color: var(--color-tertiary);
-}
-
-.link[data-variant="tertiary"]:hover {
-  --link-color: var(--color-primary);
-}
-
-.link[data-variant="tertiary"]:active {
-  --link-color: var(--color-primary);
-}
-
-.link[data-variant="accent"] {
-  --link-color: var(--color-accent);
-}
-
-.link[data-variant="accent"]:hover {
-  --link-color: var(--color-primary);
-}
-
-.link[data-variant="accent"]:active {
-  --link-color: var(--color-primary);
-}
-
-/* Link variants */
-
-/* auto */
-
-.link[data-variant="auto"] {
-  display: inline-flex;
-  align-items: flex-start;
-}
-
-/* body */
-
-.link[data-mode="body"] {
-  display: flex;
-  align-items: flex-start;
-}
diff --git a/packages/cyberstorm/src/newComponents/Link/Link/Link.tsx b/packages/cyberstorm/src/newComponents/Link/Link/Link.tsx
index 979bb7bde..35584a5ae 100644
--- a/packages/cyberstorm/src/newComponents/Link/Link/Link.tsx
+++ b/packages/cyberstorm/src/newComponents/Link/Link/Link.tsx
@@ -1,32 +1,38 @@
+import "./Link.css";
+import { LinkVariants } from "@thunderstore/cyberstorm-theme/src/components";
 import {
   Actionable,
   ActionableCyberstormLinkProps,
   ActionableLinkProps,
 } from "../../../primitiveComponents/Actionable/Actionable";
-import styles from "./Link.module.css";
 import React from "react";
 import { classnames } from "../../../utils/utils";
 
+interface LinkProps extends ActionableLinkProps {
+  csVariant?: LinkVariants;
+}
+
+interface CyberstormLinkProps extends ActionableCyberstormLinkProps {
+  csVariant?: LinkVariants;
+}
+
 export const Link = React.forwardRef<
   HTMLAnchorElement,
-  ActionableLinkProps | ActionableCyberstormLinkProps
->(
-  (
-    props: ActionableLinkProps | ActionableCyberstormLinkProps,
-    forwardedRef
-  ) => {
-    const { children, rootClasses, csVariant, ...forwardedProps } = props;
-    return (
-      <Actionable
-        {...forwardedProps}
-        csVariant={csVariant ?? "accent"}
-        rootClasses={classnames(styles.link, rootClasses)}
-        ref={forwardedRef}
-      >
-        {children}
-      </Actionable>
-    );
-  }
-);
+  LinkProps | CyberstormLinkProps
+>((props: LinkProps | CyberstormLinkProps, forwardedRef) => {
+  const { children, rootClasses, csVariant, ...forwardedProps } = props;
+  return (
+    <Actionable
+      {...forwardedProps}
+      rootClasses={classnames(
+        csVariant === "primary" ? "ts-link ts-variant--primary" : "ts-link",
+        rootClasses
+      )}
+      ref={forwardedRef}
+    >
+      {children}
+    </Actionable>
+  );
+});
 
 Link.displayName = "Link";
diff --git a/packages/cyberstorm/src/newComponents/Link/LinkButton/Button.css b/packages/cyberstorm/src/newComponents/Link/LinkButton/Button.css
new file mode 100644
index 000000000..ebd9eae46
--- /dev/null
+++ b/packages/cyberstorm/src/newComponents/Link/LinkButton/Button.css
@@ -0,0 +1,26 @@
+@layer components {
+  .ts-button {
+    display: flex;
+    flex: none;
+    flex-direction: row;
+    gap: var(--button-gap);
+    align-items: center;
+
+    height: var(--button-height);
+
+    padding: var(--button-padding);
+
+    border: var(--button-border);
+    border-color: var(--button-border-color);
+    border-radius: var(--button-border-radius);
+    color: var(--button-text-color);
+
+    font-weight: var(--button-font-weight);
+    font-size: var(--button-font-size);
+    line-height: var(--button-line-height);
+
+    text-align: center;
+    background-color: var(--button-background-color);
+    user-select: none;
+  }
+}
diff --git a/packages/cyberstorm/src/newComponents/Link/LinkButton/LinkButton.tsx b/packages/cyberstorm/src/newComponents/Link/LinkButton/LinkButton.tsx
index 4bf3eca71..e643d0cb3 100644
--- a/packages/cyberstorm/src/newComponents/Link/LinkButton/LinkButton.tsx
+++ b/packages/cyberstorm/src/newComponents/Link/LinkButton/LinkButton.tsx
@@ -3,57 +3,53 @@ import {
   ActionableCyberstormLinkProps,
   ActionableLinkProps,
 } from "../../../primitiveComponents/Actionable/Actionable";
-import styles from "../../../sharedComponentStyles/ButtonStyles/Button.module.css";
 import React from "react";
-import { classnames } from "../../../utils/utils";
+import { classnames, componentClasses } from "../../../utils/utils";
+import {
+  ButtonVariants,
+  ButtonSizes,
+  ButtonModifiers,
+} from "@thunderstore/cyberstorm-theme/src/components";
+
+interface LinkButtonProps extends ActionableLinkProps {
+  csVariant?: ButtonVariants;
+  csSize?: ButtonSizes;
+  csModifiers?: ButtonModifiers[];
+}
 
+interface CyberstormLinkButtonProps extends ActionableCyberstormLinkProps {
+  csVariant?: ButtonVariants;
+  csSize?: ButtonSizes;
+  csModifiers?: ButtonModifiers[];
+}
+
+// TODO: Add style support for disabled
 export const LinkButton = React.forwardRef<
   HTMLAnchorElement,
-  ActionableLinkProps | ActionableCyberstormLinkProps
->(
-  (
-    props: ActionableLinkProps | ActionableCyberstormLinkProps,
-    forwardedRef
-  ) => {
-    const {
-      children,
-      rootClasses,
-      csVariant = "default",
-      csColor = "purple",
-      csSize = "m",
-      csTextStyles,
-      ...forwardedProps
-    } = props;
-
-    // TODO: Turn into a proper resolver function
-    // Same logic is in LinkButton too
-    const fontStyles = (size: typeof csSize) => {
-      if (size === "xs") {
-        return ["fontSizeXS", "fontWeightBold", "lineHeightAuto"];
-      } else if (size === "s") {
-        return ["fontSizeS", "fontWeightBold", "lineHeightAuto"];
-      } else {
-        return ["fontSizeM", "fontWeightBold", "lineHeightAuto"];
-      }
-    };
+  LinkButtonProps | CyberstormLinkButtonProps
+>((props: LinkButtonProps | CyberstormLinkButtonProps, forwardedRef) => {
+  const {
+    children,
+    rootClasses,
+    csVariant = "primary",
+    csSize = "meedium",
+    csModifiers,
+    ...forwardedProps
+  } = props;
 
-    return (
-      <Actionable
-        {...forwardedProps}
-        rootClasses={classnames(
-          ...(csTextStyles ? csTextStyles : fontStyles(csSize)),
-          styles.button,
-          rootClasses
-        )}
-        csColor={csColor}
-        csSize={csSize}
-        csVariant={csVariant}
-        ref={forwardedRef}
-      >
-        {children}
-      </Actionable>
-    );
-  }
-);
+  return (
+    <Actionable
+      {...forwardedProps}
+      rootClasses={classnames(
+        "ts-button",
+        ...componentClasses(csVariant, csSize, csModifiers),
+        rootClasses
+      )}
+      ref={forwardedRef}
+    >
+      {children}
+    </Actionable>
+  );
+});
 
 LinkButton.displayName = "LinkButton";
diff --git a/packages/cyberstorm/src/newComponents/List/List/List.module.css b/packages/cyberstorm/src/newComponents/List/List/List.module.css
deleted file mode 100644
index d1663ef58..000000000
--- a/packages/cyberstorm/src/newComponents/List/List/List.module.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap--8);
-  color: var(--list-color);
-  list-style-type: none;
-
-  --list-color: var(--color-accent);
-}
-
-.list[data-variant="default"] {
-  --list-color: var(--color-5);
-}
-
-.list[data-variant="primary"] {
-  --list-color: var(--color-primary);
-}
-
-.list[data-variant="secondary"] {
-  --list-color: var(--color-secondary);
-}
-
-.list[data-variant="tertiary"] {
-  --list-color: var(--color-tertiary);
-}
-
-.list[data-variant="accent"] {
-  --list-color: var(--color-accent);
-}
diff --git a/packages/cyberstorm/src/newComponents/List/List/List.tsx b/packages/cyberstorm/src/newComponents/List/List/List.tsx
deleted file mode 100644
index 3bd4e2be3..000000000
--- a/packages/cyberstorm/src/newComponents/List/List/List.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import styles from "./List.module.css";
-import React from "react";
-import {
-  Frame,
-  FrameListProps,
-} from "../../../primitiveComponents/Frame/Frame";
-import { classnames } from "../../../utils/utils";
-
-export const List = React.forwardRef<
-  HTMLUListElement,
-  Omit<FrameListProps, "primitiveType">
->((props: Omit<FrameListProps, "primitiveType">, forwardedRef) => {
-  const {
-    children,
-    rootClasses,
-    csColor = "purple",
-    csVariant = "accent",
-    ...forwardedProps
-  } = props;
-  const fProps = forwardedProps as FrameListProps;
-  return (
-    <Frame
-      {...fProps}
-      primitiveType={"list"}
-      rootClasses={classnames(styles.list, rootClasses)}
-      csColor={csColor}
-      csVariant={csVariant}
-      ref={forwardedRef}
-    >
-      {children}
-    </Frame>
-  );
-});
-
-List.displayName = "List";
diff --git a/packages/cyberstorm/src/newComponents/List/ListItem/ListItem.module.css b/packages/cyberstorm/src/newComponents/List/ListItem/ListItem.module.css
deleted file mode 100644
index d5268e01f..000000000
--- a/packages/cyberstorm/src/newComponents/List/ListItem/ListItem.module.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.listItem {
-  color: var(--list-item-color);
-}
-
-.list[data-variant="default"] {
-  --list-item-color: var(--color-5);
-}
-
-.list[data-variant="primary"] {
-  --list-item-color: var(--color-primary);
-}
-
-.list[data-variant="secondary"] {
-  --list-item-color: var(--color-secondary);
-}
-
-.list[data-variant="tertiary"] {
-  --list-item-color: var(--color-tertiary);
-}
-
-.list[data-variant="accent"] {
-  --list-item-color: var(--color-accent);
-}
diff --git a/packages/cyberstorm/src/newComponents/List/ListItem/ListItem.tsx b/packages/cyberstorm/src/newComponents/List/ListItem/ListItem.tsx
deleted file mode 100644
index 22a113725..000000000
--- a/packages/cyberstorm/src/newComponents/List/ListItem/ListItem.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import styles from "./ListItem.module.css";
-import React from "react";
-import {
-  Frame,
-  FrameListItemProps,
-} from "../../../primitiveComponents/Frame/Frame";
-import { classnames } from "../../../utils/utils";
-
-export const ListItem = React.forwardRef<
-  HTMLLIElement,
-  Omit<FrameListItemProps, "primitiveType">
->((props: Omit<FrameListItemProps, "primitiveType">, forwardedRef) => {
-  const { children, rootClasses, ...forwardedProps } = props;
-  const fProps = forwardedProps as FrameListItemProps;
-  return (
-    <Frame
-      {...fProps}
-      primitiveType={"listItem"}
-      rootClasses={classnames(styles.listItem, rootClasses)}
-      ref={forwardedRef}
-    >
-      {children}
-    </Frame>
-  );
-});
-
-ListItem.displayName = "ListItem";
diff --git a/packages/cyberstorm/src/newComponents/List/index.ts b/packages/cyberstorm/src/newComponents/List/index.ts
deleted file mode 100644
index ce6b38cd1..000000000
--- a/packages/cyberstorm/src/newComponents/List/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { List as Root } from "./List/List";
-export { ListItem } from "./ListItem/ListItem";
diff --git a/packages/cyberstorm/src/newComponents/Menu/Menu.css b/packages/cyberstorm/src/newComponents/Menu/Menu.css
new file mode 100644
index 000000000..ba25f486e
--- /dev/null
+++ b/packages/cyberstorm/src/newComponents/Menu/Menu.css
@@ -0,0 +1,47 @@
+@layer components {
+  .ts-menu {
+    z-index: 1;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+
+    transform: translateX(-100%);
+    transition: transform var(--animation-duration-sm),
+      display var(--animation-duration-sm) allow-discrete;
+
+    &:popover-open {
+      transform: none;
+
+      @starting-style {
+        & {
+          transform: translateX(-100%);
+        }
+      }
+    }
+  }
+
+  .ts-menu::backdrop {
+    background: hsl(0deg 0% 0% / 0.6);
+  }
+
+  .ts-menu__wrapper {
+    display: none;
+    flex-direction: column;
+    gap: 2rem;
+    width: 80%;
+    height: 100%;
+    padding: 1.5rem;
+    background: #15152d;
+  }
+
+  .ts-menu:popover-open > .ts-menu__wrapper {
+    display: flex;
+  }
+
+  .ts-menu__fakebackdrop {
+    width: 20%;
+    height: 100%;
+    background: transparent;
+  }
+}
diff --git a/packages/cyberstorm/src/newComponents/Menu/Menu.module.css b/packages/cyberstorm/src/newComponents/Menu/Menu.module.css
deleted file mode 100644
index 7241586da..000000000
--- a/packages/cyberstorm/src/newComponents/Menu/Menu.module.css
+++ /dev/null
@@ -1,51 +0,0 @@
-.menuRoot {
-  z-index: 1;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  background: transparent;
-
-  transform: translateX(-100%);
-  transition: transform var(--animation-length-s),
-    display var(--animation-length-s) allow-discrete;
-
-  &:popover-open {
-    transform: none;
-
-    @starting-style {
-      & {
-        transform: translateX(-100%);
-      }
-    }
-  }
-}
-
-.menuRoot::backdrop {
-  background: hsl(0deg 0% 0% / 0.6);
-}
-
-.menuWrapper {
-  display: none;
-  flex-direction: column;
-  gap: 2rem;
-  width: 80%;
-  height: 100%;
-  padding: 1.5rem;
-  background: #15152d;
-}
-
-.menuRoot:popover-open > .menuWrapper {
-  display: flex;
-}
-
-.fakeBackdrop {
-  width: 20%;
-  height: 100%;
-  background: transparent;
-}
-
-.menuCloseButton {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-}
diff --git a/packages/cyberstorm/src/newComponents/Menu/Menu.tsx b/packages/cyberstorm/src/newComponents/Menu/Menu.tsx
index c40b3c024..f52b8b5a6 100644
--- a/packages/cyberstorm/src/newComponents/Menu/Menu.tsx
+++ b/packages/cyberstorm/src/newComponents/Menu/Menu.tsx
@@ -1,23 +1,25 @@
 import { ReactNode } from "react";
 
-import styles from "./Menu.module.css";
+import "./Menu.css";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { NewButton } from "../..";
 import {
   FramePopoverProps,
   Frame,
 } from "../../primitiveComponents/Frame/Frame";
-import { classnames } from "../../utils/utils";
+import { classnames, componentClasses } from "../../utils/utils";
+import { MenuVariants } from "@thunderstore/cyberstorm-theme/src/components";
 
 interface Props extends Omit<FramePopoverProps, "primitiveType"> {
   trigger?: ReactNode;
   controls?: ReactNode;
+  csVariant?: MenuVariants;
 }
 
 // TODO: Add storybook story
 // TODO: Add support for color, size and text systems
 export function Menu(props: Props) {
-  const { rootClasses } = props;
+  const { rootClasses, csVariant } = props;
 
   return (
     <>
@@ -25,13 +27,20 @@ export function Menu(props: Props) {
       <Frame
         primitiveType="popover"
         popoverId={props.popoverId}
-        csColor="pink"
-        csSize="m"
-        rootClasses={classnames(styles.menuRoot, rootClasses)}
+        rootClasses={classnames(
+          "ts-menu",
+          ...componentClasses(csVariant, undefined, undefined),
+          rootClasses
+        )}
         noWrapper
         popoverMode="manual"
       >
-        <div className={styles.menuWrapper}>
+        <div
+          className={classnames(
+            "ts-menu__wrapper",
+            ...componentClasses(csVariant, undefined, undefined)
+          )}
+        >
           {props.controls ? (
             props.controls
           ) : (
@@ -40,7 +49,8 @@ export function Menu(props: Props) {
                 popovertarget: props.popoverId,
                 popovertargetaction: "close",
               }}
-              csVariant="tertiaryDimmed"
+              csVariant="secondary"
+              csModifiers={["subtle", "dimmed"]}
               tooltipText="Close"
               aria-label="Close"
               icon={faXmark}
@@ -49,7 +59,10 @@ export function Menu(props: Props) {
           {props.children}
         </div>
         <button
-          className={styles.fakeBackdrop}
+          className={classnames(
+            "ts-menu__fakebackdrop",
+            ...componentClasses(csVariant, undefined, undefined)
+          )}
           {...{
             popovertarget: props.popoverId,
             popovertargetaction: "close",
diff --git a/packages/cyberstorm/src/newComponents/Modal/Modal.css b/packages/cyberstorm/src/newComponents/Modal/Modal.css
new file mode 100644
index 000000000..8db2b38b1
--- /dev/null
+++ b/packages/cyberstorm/src/newComponents/Modal/Modal.css
@@ -0,0 +1,30 @@
+@layer components {
+  .ts-modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    border: 1px solid var(--color-6);
+    border-radius: var(--frame-modal-border-radius);
+    background: var(--color-2);
+    transform: translate(-50%, -50%);
+  }
+
+  .ts-modal__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--frame-modal-gap);
+    align-items: flex-start;
+    align-self: stretch;
+    justify-content: center;
+    padding: var(--frame-modal-padding);
+    background: transparent;
+  }
+
+  /* .modalCloseButton {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    width: 2.75rem;
+    height: 2.75rem;
+  } */
+}
diff --git a/packages/cyberstorm/src/newComponents/Modal/Modal.module.css b/packages/cyberstorm/src/newComponents/Modal/Modal.module.css
deleted file mode 100644
index 332c6c53d..000000000
--- a/packages/cyberstorm/src/newComponents/Modal/Modal.module.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.modalRoot {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  border: 1px solid var(--color-6);
-  border-radius: var(--frame-modal-border-radius);
-  background: var(--color-2);
-  transform: translate(-50%, -50%);
-}
-
-.modalWrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--frame-modal-gap);
-  align-items: flex-start;
-  align-self: stretch;
-  justify-content: center;
-  padding: var(--frame-modal-padding);
-  background: transparent;
-}
-
-.modalCloseButton {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  width: 2.75rem;
-  height: 2.75rem;
-
-  /* TODO: Fix the specifity issue with button styles */
-  --button-color: var(--color-tertiary) !important;
-}
diff --git a/packages/cyberstorm/src/newComponents/Modal/Modal.tsx b/packages/cyberstorm/src/newComponents/Modal/Modal.tsx
index e760af4a0..2b16f31dd 100644
--- a/packages/cyberstorm/src/newComponents/Modal/Modal.tsx
+++ b/packages/cyberstorm/src/newComponents/Modal/Modal.tsx
@@ -1,17 +1,19 @@
 import { ReactNode } from "react";
 import { Frame, FrameModalProps } from "../../primitiveComponents/Frame/Frame";
-import styles from "./Modal.module.css";
-import { NewButton, NewIcon } from "../..";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import "./Modal.css";
+import { NewButton } from "../..";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { ModalVariants } from "@thunderstore/cyberstorm-theme/src/components";
+import { classnames, componentClasses } from "../../utils/utils";
 
 interface Props extends Omit<FrameModalProps, "primitiveType"> {
   trigger: ReactNode;
+  csVariant?: ModalVariants;
 }
 
 // TODO: Add storybook story
 export function Modal(props: Props) {
-  const { csColor = "surface", csVariant = "default" } = props;
+  const { children, csVariant = "primary" } = props;
 
   return (
     <>
@@ -19,27 +21,27 @@ export function Modal(props: Props) {
       <Frame
         primitiveType="modal"
         popoverId={props.popoverId}
-        csVariant={csVariant}
-        csColor={csColor}
-        csSize="m"
-        rootClasses={styles.modalRoot}
-        wrapperClasses={styles.modalWrapper}
+        rootClasses={classnames(
+          "ts-modal",
+          ...componentClasses(csVariant, undefined, undefined)
+        )}
+        wrapperClasses={classnames(
+          "ts-modal__wrapper",
+          ...componentClasses(csVariant, undefined, undefined)
+        )}
       >
         <NewButton
           {...{
             popovertarget: props.popoverId,
             popovertargetaction: "close",
           }}
-          csVariant="tertiary"
-          csColor={csColor}
-          rootClasses={styles.modalCloseButton}
+          csVariant="secondary"
+          csSize="medium"
+          csModifiers={["subtle"]}
           tooltipText="Close"
-        >
-          <NewIcon noWrapper>
-            <FontAwesomeIcon icon={faXmark} />
-          </NewIcon>
-        </NewButton>
-        {props.children}
+          icon={faXmark}
+        />
+        {children}
       </Frame>
     </>
   );
diff --git a/packages/cyberstorm/src/newComponents/Select/Select.css b/packages/cyberstorm/src/newComponents/Select/Select.css
new file mode 100644
index 000000000..ed6b76e0d
--- /dev/null
+++ b/packages/cyberstorm/src/newComponents/Select/Select.css
@@ -0,0 +1,46 @@
+@layer components {
+  .ts-select {
+    z-index: 999;
+    display: flex;
+    flex-direction: column;
+    gap: var(--select-gap);
+    min-width: var(--radix-popper-anchor-width);
+    max-width: max-content;
+    padding: var(--select-padding);
+    border: var(--select-border);
+    border-radius: var(--select-border-radius);
+    overflow: hidden;
+    color: var(--select-text-color);
+    background-color: var(--select-background-color);
+    box-shadow: var(--select-box-shadow);
+    animation: var(--select-animation);
+  }
+
+  .ts-select__item {
+    display: flex;
+    flex-direction: row;
+
+    gap: var(--select__item-gap);
+    align-items: center;
+    padding: var(--select__item-padding);
+    color: var(--select__item-color);
+
+    font-weight: var(--select__item-font-weight);
+    font-size: var(--select__item-font-size);
+    background-color: var(--select__item-background-color);
+    outline: none;
+    cursor: pointer;
+  }
+
+  .ts-select__trigger {
+    justify-content: space-between;
+    font-weight: var(--select__trigger-font-weight);
+    font-size: var(--select__trigger-font-size);
+  }
+
+  .ts-select__item__icon {
+    width: 1em;
+
+    --icon-color: var(--select__item__icon-color);
+  }
+}
diff --git a/packages/cyberstorm/src/newComponents/Select/Select.module.css b/packages/cyberstorm/src/newComponents/Select/Select.module.css
deleted file mode 100644
index ce60847fd..000000000
--- a/packages/cyberstorm/src/newComponents/Select/Select.module.css
+++ /dev/null
@@ -1,70 +0,0 @@
-.label {
-  font-weight: var(--font-weight-regular);
-}
-
-.content {
-  z-index: 999;
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap--2);
-  min-width: var(--radix-popper-anchor-width);
-  max-width: max-content;
-  padding: var(--space--8) 0;
-  border: var(--space--px) var(--color-surface--6) solid;
-  border-radius: var(--border-radius--8);
-  overflow: hidden;
-  color: var(--color-primary);
-  background-color: var(--color-surface--2);
-  box-shadow: var(--box-shadow-default);
-  animation: fade-in var(--animation-length-l) ease;
-}
-
-.item {
-  display: flex;
-  flex-direction: row;
-
-  gap: var(--gap--12);
-  align-items: center;
-  padding: var(--space--12) var(--space--16);
-  color: var(--color-primary);
-  outline: none;
-  cursor: pointer;
-}
-
-.item[data-highlighted] {
-  color: var(--color-primary);
-  background-color: var(--color-surface--6, var(--color-primary, red));
-}
-
-.item > .itemIcon {
-  width: 1em;
-  color: var(--color-tertiary);
-}
-
-.item[data-highlighted] > .itemIcon {
-  color: var(--color-primary);
-}
-
-.content__wide {
-  justify-content: space-between;
-}
-
-.trigger {
-  justify-content: space-between;
-}
-
-.iconAndLabel {
-  display: flex;
-  gap: var(--gap--16);
-  align-items: center;
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
diff --git a/packages/cyberstorm/src/newComponents/Select/Select.tsx b/packages/cyberstorm/src/newComponents/Select/Select.tsx
index cf682b339..b4d6372f0 100644
--- a/packages/cyberstorm/src/newComponents/Select/Select.tsx
+++ b/packages/cyberstorm/src/newComponents/Select/Select.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./Select.module.css";
+import "./Select.css";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
@@ -11,8 +11,13 @@ import {
   Trigger,
   Viewport,
 } from "@radix-ui/react-select";
-import { classnames } from "../../utils/utils";
-import { Container, NewButton, NewIcon } from "../..";
+import { classnames, componentClasses } from "../../utils/utils";
+import { NewButton, NewIcon } from "../..";
+import {
+  SelectModifiers,
+  SelectSizes,
+  SelectVariants,
+} from "@thunderstore/cyberstorm-theme/src/components";
 
 type SelectOption<T extends string = string> = {
   value: T;
@@ -29,6 +34,9 @@ type _SelectProps<T extends string = string> = {
   placeholder?: string;
   value?: string;
   rootClasses?: string;
+  csVariant?: SelectVariants;
+  csSize?: SelectSizes;
+  csModifiers?: SelectModifiers[];
 };
 
 export type SelectProps<T extends string = string> = _SelectProps<T> &
@@ -49,10 +57,15 @@ export function Select<T extends string>(props: SelectProps<T>) {
     onChange,
     placeholder = "Select",
     value,
+    csVariant = "default",
+    csSize = "medium",
+    csModifiers,
     ...forwardedProps
   } = props;
 
-  const selectItemElements = options ? mapSelectData(options) : null;
+  const selectItemElements = options
+    ? mapSelectData(options, csVariant, csSize, csModifiers)
+    : null;
   const selectedOption = options?.find((o) => o.value === value);
 
   return (
@@ -65,23 +78,23 @@ export function Select<T extends string>(props: SelectProps<T>) {
       <Trigger asChild>
         <NewButton
           csVariant="secondary"
-          csSize="m"
-          csColor="surface-alpha"
-          csTextStyles={["fontSizeS", "fontWeightBold", "lineHeightAuto"]}
+          csSize="medium"
           aria-label={forwardedProps["aria-label"]}
-          rootClasses={classnames(styles.trigger, forwardedProps.rootClasses)}
+          rootClasses={classnames(
+            "ts-select__trigger",
+            ...componentClasses(csVariant, csSize, csModifiers),
+            forwardedProps.rootClasses
+          )}
         >
-          <span className={styles.iconAndLabel}>
-            {selectedOption?.leftIcon ? (
-              <NewIcon csMode="inline" noWrapper csVariant="accent">
-                {selectedOption?.leftIcon}
-              </NewIcon>
-            ) : null}
-            {selectedOption?.label ?? placeholder}
-            {!selectedOption?.label && !selectedOption?.leftIcon
-              ? selectedOption?.value
-              : null}
-          </span>
+          {selectedOption?.leftIcon ? (
+            <NewIcon csMode="inline" noWrapper csVariant="accent">
+              {selectedOption?.leftIcon}
+            </NewIcon>
+          ) : null}
+          {selectedOption?.label ?? placeholder}
+          {!selectedOption?.label && !selectedOption?.leftIcon
+            ? selectedOption?.value
+            : null}
           {icon}
         </NewButton>
       </Trigger>
@@ -90,7 +103,10 @@ export function Select<T extends string>(props: SelectProps<T>) {
         <Content
           position="popper"
           sideOffset={4}
-          className={classnames(styles.content)}
+          className={classnames(
+            "ts-select",
+            ...componentClasses(csVariant, csSize, csModifiers)
+          )}
         >
           <Viewport>{selectItemElements}</Viewport>
         </Content>
@@ -101,21 +117,26 @@ export function Select<T extends string>(props: SelectProps<T>) {
 
 Select.displayName = "Select";
 
-const mapSelectData = (options: SelectOption[]) => {
+const mapSelectData = (
+  options: SelectOption[],
+  csVariant: SelectVariants,
+  csSize: SelectSizes,
+  csModifiers?: SelectModifiers[]
+) => {
   return options.map((option, index) => (
     <Item value={option.value} key={index} asChild>
-      <Container
-        rootClasses={styles.item}
-        csVariant="secondary"
-        csColor="surface"
-        csTextStyles={["fontSizeS", "fontWeightRegular"]}
+      <div
+        className={classnames(
+          "ts-select__item",
+          ...componentClasses(csVariant, csSize, csModifiers)
+        )}
       >
-        <NewIcon csMode="inline" noWrapper rootClasses={styles.itemIcon}>
+        <NewIcon csMode="inline" noWrapper rootClasses="ts-select__item__icon">
           {option.leftIcon}
         </NewIcon>
         {option.label}
         {!option.label && !option.leftIcon ? option.value : null}
-      </Container>
+      </div>
     </Item>
   ));
 };
diff --git a/packages/cyberstorm/src/newComponents/Tag/Tag.css b/packages/cyberstorm/src/newComponents/Tag/Tag.css
new file mode 100644
index 000000000..91068bd50
--- /dev/null
+++ b/packages/cyberstorm/src/newComponents/Tag/Tag.css
@@ -0,0 +1,15 @@
+@layer components {
+  .ts-tag {
+    display: inline-flex;
+    gap: var(--tag-gap);
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--tag-border-radius);
+    color: var(--tag-color);
+    font-weight: var(--tag-font-weight);
+    font-size: var(--tag-font-size);
+    background: var(--tag-background-color);
+    padding-block: var(--tag-padding-block);
+    padding-inline: var(--tag-padding-inline);
+  }
+}
diff --git a/packages/cyberstorm/src/newComponents/Tag/Tag.tsx b/packages/cyberstorm/src/newComponents/Tag/Tag.tsx
index ffd25aa82..f825ff206 100644
--- a/packages/cyberstorm/src/newComponents/Tag/Tag.tsx
+++ b/packages/cyberstorm/src/newComponents/Tag/Tag.tsx
@@ -1,11 +1,17 @@
-import styles from "../../sharedComponentStyles/TagStyles/Tag.module.css";
+import "./Tag.css";
 import React from "react";
 import { Frame, FrameWindowProps } from "../../primitiveComponents/Frame/Frame";
-import { classnames } from "../../utils/utils";
+import { classnames, componentClasses } from "../../utils/utils";
+import {
+  TagModifiers,
+  TagSizes,
+  TagVariants,
+} from "@thunderstore/cyberstorm-theme/src/components";
 
 interface TagProps extends Omit<FrameWindowProps, "primitiveType"> {
-  dark?: boolean;
-  hoverable?: boolean;
+  csVariant?: TagVariants;
+  csSize?: TagSizes;
+  csModifiers?: TagModifiers[];
 }
 
 export const Tag = React.forwardRef<HTMLDivElement, TagProps>(
@@ -13,12 +19,9 @@ export const Tag = React.forwardRef<HTMLDivElement, TagProps>(
     const {
       children,
       rootClasses,
-      csSize = "m",
-      csColor = "surface",
-      // Consume this prop since tag doesn't have other variants
-      csVariant,
-      dark,
-      hoverable,
+      csVariant = "primary",
+      csSize = "medium",
+      csModifiers,
       ...forwardedProps
     } = props;
     const fProps = forwardedProps as FrameWindowProps;
@@ -27,20 +30,10 @@ export const Tag = React.forwardRef<HTMLDivElement, TagProps>(
         {...fProps}
         primitiveType={"window"}
         rootClasses={classnames(
-          styles.tag,
-          hoverable ? styles.hoverable : null,
-          dark ? styles.dark : null,
+          "ts-tag",
+          ...componentClasses(csVariant, csSize, csModifiers),
           rootClasses
         )}
-        csSize={csSize}
-        csColor={csColor}
-        // Tag doesn't have other variants, just re-colors
-        csVariant={"default"}
-        csTextStyles={
-          csSize === "s"
-            ? ["fontSizeXXS", "fontWeightBold"]
-            : ["fontSizeXS", "fontWeightBold"]
-        }
         ref={forwardedRef}
       >
         {children}
diff --git a/packages/cyberstorm/src/newComponents/Text/Text.module.css b/packages/cyberstorm/src/newComponents/Text/Text.module.css
deleted file mode 100644
index ecb2fb755..000000000
--- a/packages/cyberstorm/src/newComponents/Text/Text.module.css
+++ /dev/null
@@ -1,26 +0,0 @@
-/* Common text styles */
-.text {
-  color: var(--text-color);
-
-  --text-color: var(--color-primary);
-}
-
-.text[data-variant="default"] {
-  --text-color: var(--color-7);
-}
-
-.text[data-variant="primary"] {
-  --text-color: var(--color-primary);
-}
-
-.text[data-variant="secondary"] {
-  --text-color: var(--color-secondary);
-}
-
-.text[data-variant="tertiary"] {
-  --text-color: var(--color-tertiary);
-}
-
-.text[data-variant="accent"] {
-  --text-color: var(--color-accent);
-}
diff --git a/packages/cyberstorm/src/newComponents/Text/Text.tsx b/packages/cyberstorm/src/newComponents/Text/Text.tsx
deleted file mode 100644
index 3f664edb9..000000000
--- a/packages/cyberstorm/src/newComponents/Text/Text.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import styles from "./Text.module.css";
-import React from "react";
-import { FrameTextProps, Frame } from "../../primitiveComponents/Frame/Frame";
-import { classnames } from "../../utils/utils";
-
-export const Text = React.forwardRef<
-  HTMLParagraphElement,
-  Omit<FrameTextProps, "primitiveType">
->((props: Omit<FrameTextProps, "primitiveType">, forwardedRef) => {
-  const { children, rootClasses, ...forwardedProps } = props;
-  return (
-    <Frame
-      primitiveType="text"
-      {...forwardedProps}
-      rootClasses={classnames(styles.text, rootClasses)}
-      ref={forwardedRef}
-    >
-      {children}
-    </Frame>
-  );
-});
-
-Text.displayName = "Text";
diff --git a/packages/cyberstorm/src/newComponents/TextInput/TextInput.css b/packages/cyberstorm/src/newComponents/TextInput/TextInput.css
new file mode 100644
index 000000000..69bca9df1
--- /dev/null
+++ b/packages/cyberstorm/src/newComponents/TextInput/TextInput.css
@@ -0,0 +1,61 @@
+@layer components {
+  .ts-textinput__wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: var(--textinput__wrapper-width);
+    font-weight: var(--textinput__wrapper-font-weight);
+    font-size: var(--textinput__wrapper-font-size);
+    line-height: var(--textinput__wrapper-line-height);
+  }
+
+  .ts-textinput__wrapper > input {
+    outline: none;
+  }
+
+  .ts-textinput {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: var(--textinput-width);
+    padding: var(--textinput-padding);
+    border: var(--textinput-border);
+    border-color: var(--textinput-border-color);
+    border-radius: var(--textinput-border-radius);
+    color: var(--textinput-text-color);
+    background-color: var(--textinput-background-color);
+    cursor: text;
+    transition: var(--textinput-transition);
+  }
+
+  .ts-textinput::placeholder {
+    color: var(--textinput__placeholder-color);
+    opacity: var(--textinput__placeholder-opacity);
+  }
+
+  .ts-textinput:focus-within::placeholder {
+    color: transparent;
+  }
+
+  .ts-textinput__lefticon {
+    position: var(--ts-textinput__lefticon-position);
+    margin: var(--ts-textinput__lefticon-margin);
+    color: var(--ts-textinput__lefticon-color);
+    pointer-events: none;
+  }
+
+  .ts-textinput__righticon {
+    position: var(--ts-textinput__righticon-position);
+    padding: var(--ts-textinput__righticon-padding);
+    color: var(--ts-textinput__righticon-color);
+  }
+
+  .ts-textinput__clearvaluebutton {
+    position: absolute;
+    right: var(--ts-textinput__clearvaluebutton-right);
+    display: flex;
+    color: var(--ts-textinput__clearvaluebutton-color);
+    background: inherit;
+    opacity: var(--ts-textinput__clearvaluebutton-opacity);
+  }
+}
diff --git a/packages/cyberstorm/src/newComponents/TextInput/TextInput.module.css b/packages/cyberstorm/src/newComponents/TextInput/TextInput.module.css
deleted file mode 100644
index 8187a3ea9..000000000
--- a/packages/cyberstorm/src/newComponents/TextInput/TextInput.module.css
+++ /dev/null
@@ -1,126 +0,0 @@
-.wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: auto;
-  color: var(--input-wrapper-text-color);
-
-  --input-wrapper-text-color: var(--color-primary);
-}
-
-.wrapper[data-variant="default"] {
-  --input-wrapper-text-color: var(--color-5);
-}
-
-.wrapper[data-variant="primary"] {
-  --input-wrapper-text-color: var(--color-primary);
-}
-
-.wrapper[data-variant="secondary"] {
-  --input-wrapper-text-color: var(--color-secondary);
-}
-
-.wrapper[data-variant="tertiary"] {
-  --input-wrapper-text-color: var(--color-tertiary);
-}
-
-.wrapper[data-variant="accent"] {
-  --input-wrapper-text-color: var(--color-accent);
-}
-
-.wrapper > input {
-  outline: none;
-}
-
-.textInput {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 100%;
-  padding: var(--space--8) var(--space--14);
-  border: var(--border-width--2) solid var(--border-color);
-  border-radius: var(--border-radius--8);
-  color: var(--input-text-color);
-  background-color: var(--input-background-color);
-  cursor: text;
-  transition: ease-out var(--animation-length-xs);
-
-  --border-color: transparent;
-  --input-text-color: var(--color-primary);
-  --input-background-color: var(--color-surface-alpha--5);
-}
-
-.textInput[value] {
-  --input-text-color: var(--color-secondary);
-}
-
-.textInput:hover {
-  --input-background-color: var(--color-surface-alpha--6);
-  --border-color: var(--color-surface-alpha--10);
-}
-
-.textInput:focus-within {
-  --input-text-color: var(--color-primary);
-  --input-background-color: var(--color-black);
-  --border-color: var(--color-7);
-}
-
-.textInput:has(+ .clearValueButton:hover):not(:focus-within) {
-  --input-background-color: var(--color-surface-alpha--6);
-  --border-color: var(--color-surface-alpha--10);
-}
-
-/* DESIGN SYSTEM TODO: Add support for other variants and colors */
-
-.textInput::placeholder {
-  color: var(--color-text--tertiary);
-  opacity: 1;
-}
-
-.textInput[data-size="m"] {
-  height: var(--space--44);
-  padding: var(--space--12)
-    calc(var(--space--16) + var(--right-padding-bonus, 0px)) var(--space--12)
-    calc(var(--space--16) + var(--left-padding-bonus, 0px));
-}
-
-.textInput[data-size="s"] {
-  height: var(--space--36);
-  padding: var(--space--10)
-    calc(var(--space--16) + var(--right-padding-bonus, 0px)) var(--space--10)
-    calc(var(--space--16) + var(--left-padding-bonus, 0px));
-}
-
-.hasLeftIcon {
-  --left-padding-bonus: var(--space--24);
-}
-
-.hasClearValue {
-  --right-padding-bonus: var(--space--16);
-}
-
-.leftIcon {
-  position: absolute;
-  margin: var(--space--10) var(--space--16);
-  color: var(--color-tertiary);
-  pointer-events: none;
-}
-
-.rightIcon {
-  position: absolute;
-  padding: var(--space--14) var(--space--16);
-  color: var(--color-secondary);
-}
-
-.clearValueButton {
-  position: absolute;
-  right: var(--space--16);
-  display: flex;
-  color: var(--color-secondary);
-  background: inherit;
-  opacity: 0.5;
-}
-
-.clearValueButton:hover {
-  opacity: 1;
-}
diff --git a/packages/cyberstorm/src/newComponents/TextInput/TextInput.tsx b/packages/cyberstorm/src/newComponents/TextInput/TextInput.tsx
index 2272c6971..dc5b5b105 100644
--- a/packages/cyberstorm/src/newComponents/TextInput/TextInput.tsx
+++ b/packages/cyberstorm/src/newComponents/TextInput/TextInput.tsx
@@ -1,24 +1,29 @@
-import styles from "./TextInput.module.css";
+import "./TextInput.css";
 import React from "react";
 import {
   Input,
   InputTextInputProps,
 } from "../../primitiveComponents/Input/Input";
-import { classnames } from "../../utils/utils";
+import { classnames, componentClasses } from "../../utils/utils";
 import { Frame } from "../../primitiveComponents/Frame/Frame";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { Actionable } from "../../primitiveComponents/Actionable/Actionable";
-import { colors, variants } from "../../primitiveComponents/utils/utils";
 import { NewIcon } from "../..";
+import {
+  TextInputVariants,
+  TextInputSizes,
+  TextInputModifiers,
+} from "@thunderstore/cyberstorm-theme/src/components";
 
 interface TextInputProps extends Omit<InputTextInputProps, "primitiveType"> {
   leftIcon?: JSX.Element;
   rightIcon?: JSX.Element;
   enterHook?: (value: string | number | readonly string[]) => string | void;
   clearValue?: () => void;
-  wrapperColor?: colors;
-  wrapperVariant?: variants;
+  csVariant?: TextInputVariants;
+  csSize?: TextInputSizes;
+  csModifiers?: TextInputModifiers[];
 }
 
 // TODO: Finish the styles conversion to new system
@@ -30,12 +35,10 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       rightIcon,
       clearValue,
       enterHook,
-      wrapperColor = "purple",
-      wrapperVariant = "tertiary",
       rootClasses,
-      csColor = "purple",
-      csSize = "m",
       csVariant = "primary",
+      csSize = "default",
+      csModifiers,
       ...forwardedProps
     } = props;
     const fProps = forwardedProps as InputTextInputProps;
@@ -47,17 +50,17 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
     return (
       <Frame
         primitiveType="window"
-        rootClasses={classnames(styles.wrapper, rootClasses)}
-        csColor={wrapperColor}
-        csVariant={wrapperVariant}
-        csTextStyles={["lineHeightAuto", "fontWeightRegular", "fontSizeM"]}
+        rootClasses={classnames(
+          "ts-textinput__wrapper",
+          ...componentClasses(csVariant, csSize, csModifiers),
+          rootClasses
+        )}
       >
         {leftIcon ? (
           <NewIcon
             csMode="inline"
             noWrapper
-            rootClasses={styles.leftIcon}
-            csTextStyles={["fontWeightRegular"]}
+            rootClasses="ts-textinput__lefticon"
           >
             {leftIcon}
           </NewIcon>
@@ -66,14 +69,11 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           {...fProps}
           primitiveType={"textInput"}
           rootClasses={classnames(
-            styles.textInput,
-            leftIcon ? styles.hasLeftIcon : null,
-            clearValue ? styles.hasClearValue : null
+            "ts-textinput",
+            leftIcon ? "ts-textinput__haslefticon" : null,
+            clearValue ? "ts-textinput__hasclearvalue" : null,
+            ...componentClasses(csVariant, csSize, csModifiers)
           )}
-          csColor={csColor}
-          csSize={csSize}
-          csVariant={csVariant}
-          csTextStyles={["fontSizeM", "fontWeightRegular"]}
           ref={forwardedRef}
           onKeyDown={onEnter}
         >
@@ -83,11 +83,12 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           <Actionable
             primitiveType="button"
             onClick={() => clearValue()}
-            rootClasses={styles.clearValueButton}
+            rootClasses={classnames(
+              "ts-textinput__clearvaluebutton",
+              ...componentClasses(csVariant, csSize, csModifiers)
+            )}
             tooltipText="Clear"
             tooltipSide="left"
-            csColor={csColor}
-            csVariant={"default"}
             aria-label="Clear search input"
           >
             <NewIcon csMode="inline" noWrapper>
diff --git a/packages/cyberstorm/src/primitiveComponents/Actionable/Actionable.tsx b/packages/cyberstorm/src/primitiveComponents/Actionable/Actionable.tsx
index 86717d9ae..318414587 100644
--- a/packages/cyberstorm/src/primitiveComponents/Actionable/Actionable.tsx
+++ b/packages/cyberstorm/src/primitiveComponents/Actionable/Actionable.tsx
@@ -5,7 +5,6 @@ import {
 import React from "react";
 import { ThunderstoreLinkProps } from "../../components/Links/LinkingProvider";
 import { PrimitiveComponentDefaultProps, TooltipWrapper } from "../utils/utils";
-import { classnames } from "../../utils/utils";
 
 export interface ActionableButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -43,10 +42,6 @@ export const Actionable = React.forwardRef<
       children,
       primitiveType,
       rootClasses,
-      csColor,
-      csVariant,
-      csSize,
-      csTextStyles,
       tooltipText,
       tooltipSide,
       ...forwardedProps
@@ -58,17 +53,7 @@ export const Actionable = React.forwardRef<
 
       return (
         <TooltipWrapper tooltipText={tooltipText} tooltipSide={tooltipSide}>
-          <button
-            {...fProps}
-            className={classnames(
-              ...(csTextStyles ? csTextStyles : []),
-              rootClasses
-            )}
-            data-color={csColor}
-            data-size={csSize}
-            data-variant={csVariant}
-            ref={fRef}
-          >
+          <button {...fProps} className={rootClasses} ref={fRef}>
             {children}
           </button>
         </TooltipWrapper>
@@ -79,17 +64,7 @@ export const Actionable = React.forwardRef<
       const fProps = forwardedProps as ActionableLinkProps;
       return (
         <TooltipWrapper tooltipText={tooltipText} tooltipSide={tooltipSide}>
-          <a
-            {...fProps}
-            className={classnames(
-              ...(csTextStyles ? csTextStyles : []),
-              rootClasses
-            )}
-            data-color={csColor}
-            data-variant={csVariant}
-            data-size={csSize}
-            ref={fRef}
-          >
+          <a {...fProps} className={rootClasses} ref={fRef}>
             {children}
           </a>
         </TooltipWrapper>
@@ -103,13 +78,7 @@ export const Actionable = React.forwardRef<
         <TooltipWrapper tooltipText={tooltipText} tooltipSide={tooltipSide}>
           <CyberstormLink
             {...strippedForwardedProps}
-            className={classnames(
-              ...(csTextStyles ? csTextStyles : []),
-              rootClasses
-            )}
-            data-color={csColor}
-            data-variant={csVariant}
-            data-size={csSize}
+            className={rootClasses}
             linkId={linkId}
             ref={fRef}
           >
diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Display.module.css b/packages/cyberstorm/src/primitiveComponents/Frame/Display.module.css
deleted file mode 100644
index 6c001498a..000000000
--- a/packages/cyberstorm/src/primitiveComponents/Frame/Display.module.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.display {
-  font-weight: 700;
-  font-family: inter, sans-serif;
-  font-style: normal;
-  line-height: normal;
-}
-
-.display[data-stylelevel="1"] {
-  font-weight: var(--font-weight-heavy);
-  font-size: calc(var(--space--54) * var(--scaling, 1));
-  font-family: Hubot-Sans, sans-serif;
-  line-height: 115%; /* 62.1px */
-}
-
-.display[data-stylelevel="2"] {
-  font-weight: var(--font-weight-heavy);
-  font-size: calc(var(--space--51) * var(--scaling, 1));
-  font-family: Hubot-Sans, sans-serif;
-}
-
-.display[data-stylelevel="3"] {
-  font-weight: 700;
-  font-size: calc(var(--space--38) * var(--scaling, 1));
-  font-family: Hubot-Sans, sans-serif;
-}
-
-.display[data-stylelevel="4"] {
-  font-size: calc(var(--space--16) * var(--scaling, 1));
-}
-
-.display[data-stylelevel="5"] {
-  font-size: calc(var(--space--14) * var(--scaling, 1));
-}
-
-.display[data-stylelevel="6"] {
-  font-size: calc(var(--space--12) * var(--scaling, 1));
-}
diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx b/packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx
index ed625764f..97bc94098 100644
--- a/packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx
+++ b/packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx
@@ -1,8 +1,3 @@
-import popooverStyles from "./Popover.module.css";
-import modalStyles from "./Modal.module.css";
-import headingStyles from "./Heading.module.css";
-import displayStyles from "./Display.module.css";
-import iconStyles from "./Icon.module.css";
 import { classnames } from "./../../utils/utils";
 import React from "react";
 import { PrimitiveComponentDefaultProps, TooltipWrapper } from "../utils/utils";
@@ -14,18 +9,6 @@ export interface FrameWindowProps
   primitiveType: "window";
 }
 
-export interface FrameListProps
-  extends React.HTMLAttributes<HTMLUListElement>,
-    PrimitiveComponentDefaultProps {
-  primitiveType: "list";
-}
-
-export interface FrameListItemProps
-  extends React.HTMLAttributes<HTMLLIElement>,
-    PrimitiveComponentDefaultProps {
-  primitiveType: "listItem";
-}
-
 // TODO: Turn this into the new "attachable window", used for dropdowns etc
 export interface FrameFloaterProps extends PrimitiveComponentDefaultProps {
   primitiveType: "floater";
@@ -35,7 +18,6 @@ export interface FrameHeadingProps
   extends React.HTMLAttributes<HTMLHeadingElement>,
     PrimitiveComponentDefaultProps {
   primitiveType: "heading";
-  csStyleLevel: "1" | "2" | "3" | "4" | "5" | "6";
   csLevel: "1" | "2" | "3" | "4" | "5" | "6";
 }
 
@@ -43,7 +25,6 @@ export interface FrameDisplayProps
   extends React.HTMLAttributes<HTMLHeadingElement>,
     PrimitiveComponentDefaultProps {
   primitiveType: "display";
-  csStyleLevel: "1" | "2" | "3" | "4" | "5" | "6";
   csLevel: "1" | "2" | "3" | "4" | "5" | "6";
 }
 
@@ -84,15 +65,11 @@ export interface FrameIconProps
 
 export const Frame = React.forwardRef<
   | HTMLDivElement
-  | HTMLUListElement
-  | HTMLLIElement
   | HTMLHeadingElement
   | HTMLParagraphElement
   | HTMLSpanElement
   | SVGElement,
   | FrameWindowProps
-  | FrameListProps
-  | FrameListItemProps
   | FrameFloaterProps
   | FrameHeadingProps
   | FrameDisplayProps
@@ -104,8 +81,6 @@ export const Frame = React.forwardRef<
   (
     props:
       | FrameWindowProps
-      | FrameListProps
-      | FrameListItemProps
       | FrameFloaterProps
       | FrameHeadingProps
       | FrameDisplayProps
@@ -118,10 +93,6 @@ export const Frame = React.forwardRef<
     const {
       children,
       primitiveType,
-      csTextStyles,
-      csColor,
-      csVariant,
-      csSize,
       rootClasses,
       tooltipText,
       tooltipSide,
@@ -132,178 +103,51 @@ export const Frame = React.forwardRef<
       const fProps = forwardedProps as FrameWindowProps;
       return (
         <TooltipWrapper tooltipText={tooltipText} tooltipSide={tooltipSide}>
-          <div
-            {...fProps}
-            className={classnames(
-              ...(csTextStyles ? csTextStyles : []),
-              rootClasses
-            )}
-            data-color={csColor}
-            data-variant={csVariant}
-            data-size={csSize}
-            ref={fRef}
-          >
+          <div {...fProps} className={rootClasses} ref={fRef}>
             {children}
           </div>
         </TooltipWrapper>
       );
     }
-    if (primitiveType === "list") {
-      const fRef = forwardedRef as React.ForwardedRef<HTMLUListElement>;
-      const fProps = forwardedProps as FrameListProps;
-      return (
-        <TooltipWrapper tooltipText={tooltipText} tooltipSide={tooltipSide}>
-          <ul
-            {...fProps}
-            className={classnames(
-              ...(csTextStyles ? csTextStyles : []),
-              rootClasses
-            )}
-            data-color={csColor}
-            data-variant={csVariant}
-            data-size={csSize}
-            ref={fRef}
-          >
-            {children}
-          </ul>
-        </TooltipWrapper>
-      );
-    }
-    if (primitiveType === "listItem") {
-      const fRef = forwardedRef as React.ForwardedRef<HTMLLIElement>;
-      const fProps = forwardedProps as FrameListItemProps;
-      return (
-        <TooltipWrapper tooltipText={tooltipText} tooltipSide={tooltipSide}>
-          <li
-            {...fProps}
-            className={classnames(
-              ...(csTextStyles ? csTextStyles : []),
-              rootClasses
-            )}
-            data-color={csColor}
-            data-variant={csVariant}
-            data-size={csSize}
-            ref={fRef}
-          >
-            {children}
-          </li>
-        </TooltipWrapper>
-      );
-    }
     if (primitiveType === "heading" || primitiveType == "display") {
       const fRef = forwardedRef as React.ForwardedRef<HTMLHeadingElement>;
-      const { csLevel, csStyleLevel, ...strippedForwardedProps } =
-        forwardedProps as FrameHeadingProps | FrameDisplayProps;
-      const primitiveStyles =
-        primitiveType === "heading"
-          ? headingStyles.heading
-          : displayStyles.display;
+      const { csLevel, ...strippedForwardedProps } = forwardedProps as
+        | FrameHeadingProps
+        | FrameDisplayProps;
       let element;
       if (csLevel === "1") {
         element = (
-          <h1
-            {...strippedForwardedProps}
-            className={classnames(
-              ...(csTextStyles ? csTextStyles : []),
-              primitiveStyles,
-              rootClasses
-            )}
-            data-color={csColor}
-            data-variant={csVariant}
-            data-size={csSize}
-            data-stylelevel={csStyleLevel}
-            ref={fRef}
-          >
+          <h1 {...strippedForwardedProps} className={rootClasses} ref={fRef}>
             {children}
           </h1>
         );
       } else if (csLevel === "2") {
         element = (
-          <h2
-            {...strippedForwardedProps}
-            className={classnames(
-              ...(csTextStyles ? csTextStyles : []),
-              primitiveStyles,
-              rootClasses
-            )}
-            data-color={csColor}
-            data-variant={csVariant}
-            data-size={csSize}
-            data-stylelevel={csStyleLevel}
-            ref={fRef}
-          >
+          <h2 {...strippedForwardedProps} className={rootClasses} ref={fRef}>
             {children}
           </h2>
         );
       } else if (csLevel === "3") {
         element = (
-          <h3
-            {...strippedForwardedProps}
-            className={classnames(
-              ...(csTextStyles ? csTextStyles : []),
-              primitiveStyles,
-              rootClasses
-            )}
-            data-color={csColor}
-            data-variant={csVariant}
-            data-size={csSize}
-            data-stylelevel={csStyleLevel}
-            ref={fRef}
-          >
+          <h3 {...strippedForwardedProps} className={rootClasses} ref={fRef}>
             {children}
           </h3>
         );
       } else if (csLevel === "4") {
         element = (
-          <h4
-            {...strippedForwardedProps}
-            className={classnames(
-              ...(csTextStyles ? csTextStyles : []),
-              primitiveStyles,
-              rootClasses
-            )}
-            data-color={csColor}
-            data-variant={csVariant}
-            data-size={csSize}
-            data-stylelevel={csStyleLevel}
-            ref={fRef}
-          >
+          <h4 {...strippedForwardedProps} className={rootClasses} ref={fRef}>
             {children}
           </h4>
         );
       } else if (csLevel === "5") {
         element = (
-          <h5
-            {...strippedForwardedProps}
-            className={classnames(
-              ...(csTextStyles ? csTextStyles : []),
-              primitiveStyles,
-              rootClasses
-            )}
-            data-color={csColor}
-            data-variant={csVariant}
-            data-size={csSize}
-            data-stylelevel={csStyleLevel}
-            ref={fRef}
-          >
+          <h5 {...strippedForwardedProps} className={rootClasses} ref={fRef}>
             {children}
           </h5>
         );
       } else if (csLevel === "6") {
         element = (
-          <h6
-            {...strippedForwardedProps}
-            className={classnames(
-              ...(csTextStyles ? csTextStyles : []),
-              primitiveStyles,
-              rootClasses
-            )}
-            data-color={csColor}
-            data-variant={csVariant}
-            data-size={csSize}
-            data-stylelevel={csStyleLevel}
-            ref={fRef}
-          >
+          <h6 {...strippedForwardedProps} className={rootClasses} ref={fRef}>
             {children}
           </h6>
         );
@@ -319,17 +163,7 @@ export const Frame = React.forwardRef<
       const textProps = forwardedProps as FrameTextProps;
       return (
         <TooltipWrapper tooltipText={tooltipText} tooltipSide={tooltipSide}>
-          <p
-            {...textProps}
-            className={classnames(
-              ...(csTextStyles ? csTextStyles : []),
-              rootClasses
-            )}
-            data-color={csColor}
-            data-variant={csVariant}
-            data-size={csSize}
-            ref={fRef}
-          >
+          <p {...textProps} className={rootClasses} ref={fRef}>
             {children}
           </p>
         </TooltipWrapper>
@@ -350,14 +184,7 @@ export const Frame = React.forwardRef<
             {...strippedForwardedProps}
             id={popoverId}
             {...{ popover: popoverMode }}
-            className={classnames(
-              ...(csTextStyles ? csTextStyles : []),
-              popooverStyles.popover,
-              rootClasses
-            )}
-            data-color={csColor}
-            data-variant={csVariant}
-            data-size={csSize}
+            className={rootClasses}
             ref={fRef}
           >
             {noWrapper ? (
@@ -383,13 +210,7 @@ export const Frame = React.forwardRef<
             {...strippedForwardedProps}
             id={popoverId}
             {...{ popover: "auto" }}
-            className={classnames(
-              ...(csTextStyles ? csTextStyles : []),
-              modalStyles.modal
-            )}
-            data-color={csColor}
-            data-variant={csVariant}
-            data-size={csSize}
+            className={rootClasses}
             ref={fRef}
           >
             {noWrapper ? (
@@ -423,15 +244,11 @@ export const Frame = React.forwardRef<
         cloneElement(child, {
           className: classnames(
             child.props.className,
-            iconStyles.icon,
-            noWrapper && csMode === "inline" ? iconStyles.inline : null,
-            ...(csTextStyles ? csTextStyles : []),
+            "ts-icon",
+            noWrapper && csMode === "inline" ? "ts-icon--inline" : null,
             rootClasses
           ),
           ref: noWrapper ? svgIconRef : null,
-          "data-color": csColor ? csColor : null,
-          "data-variant": csVariant ? csVariant : null,
-          "data-size": csSize ? csSize : null,
           ...svgFProps,
         })
       );
@@ -446,14 +263,10 @@ export const Frame = React.forwardRef<
           <span
             {...strippedForwardedProps}
             className={classnames(
-              iconStyles.iconWrapper,
-              iconStyles.inline,
-              wrapperClasses,
-              ...(csTextStyles ? csTextStyles : [])
+              "ts-icon__wrapper",
+              "ts-icon--inline",
+              wrapperClasses
             )}
-            data-color={csColor}
-            data-variant={csVariant}
-            data-size={csSize}
             ref={spanIconRef}
           >
             {clones}
@@ -464,14 +277,7 @@ export const Frame = React.forwardRef<
         content = (
           <div
             {...strippedForwardedProps}
-            className={classnames(
-              iconStyles.iconWrapper,
-              wrapperClasses,
-              ...(csTextStyles ? csTextStyles : [])
-            )}
-            data-color={csColor}
-            data-variant={csVariant}
-            data-size={csSize}
+            className={classnames("ts-icon__wrapper", wrapperClasses)}
             ref={divIconRef}
           >
             {clones}
diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Heading.module.css b/packages/cyberstorm/src/primitiveComponents/Frame/Heading.module.css
deleted file mode 100644
index c2879194d..000000000
--- a/packages/cyberstorm/src/primitiveComponents/Frame/Heading.module.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.heading {
-  font-weight: 700;
-  font-family: inter, sans-serif;
-  font-style: normal;
-  line-height: normal;
-}
-
-.heading[data-stylelevel="1"] {
-  font-weight: var(--font-weight-heavy);
-  font-size: var(--space--54);
-  font-family: Hubot-Sans, sans-serif;
-  line-height: 115%; /* 62.1px */
-}
-
-.heading[data-stylelevel="2"] {
-  font-size: var(--space--32);
-  line-height: 140%; /* 44.8px */
-}
-
-.heading[data-stylelevel="3"] {
-  font-size: var(--space--20);
-}
-
-.heading[data-stylelevel="4"] {
-  font-size: var(--space--16);
-}
-
-.heading[data-stylelevel="5"] {
-  font-size: var(--space--14);
-}
-
-.heading[data-stylelevel="6"] {
-  font-size: var(--space--12);
-}
diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Icon.module.css b/packages/cyberstorm/src/primitiveComponents/Frame/Icon.module.css
deleted file mode 100644
index 4477fbd6f..000000000
--- a/packages/cyberstorm/src/primitiveComponents/Frame/Icon.module.css
+++ /dev/null
@@ -1,26 +0,0 @@
-/* Wrapper, not necessary */
-.iconWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.iconWrapper svg,
-.icon {
-  display: flex;
-
-  flex-shrink: 0;
-  fill: currentcolor;
-  stroke: currentcolor;
-  block-size: 100%;
-  inline-size: auto;
-  min-inline-size: 100%;
-
-  stroke-width: 0;
-}
-
-.inline {
-  display: inline-flex;
-  height: var(--icon-inline-size, 1em);
-  min-inline-size: 1em;
-}
diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Modal.module.css b/packages/cyberstorm/src/primitiveComponents/Frame/Modal.module.css
deleted file mode 100644
index 153dadbb9..000000000
--- a/packages/cyberstorm/src/primitiveComponents/Frame/Modal.module.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.modal {
-  width: 100%;
-  height: 100%;
-  background: rgba(0 0 0 / 0.6);
-  backdrop-filter: blur(10px);
-}
-
-.modal[data-size="s"] {
-  --frame-modal-gap: 1rem;
-  --frame-modal-padding: 1.5rem 2.25rem;
-  --frame-modal-border-radius: 0.25rem;
-}
-
-.modal[data-size="m"] {
-  --frame-modal-gap: 2rem;
-  --frame-modal-padding: 3rem 5.5rem;
-  --frame-modal-border-radius: 0.5rem;
-}
diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Popover.module.css b/packages/cyberstorm/src/primitiveComponents/Frame/Popover.module.css
deleted file mode 100644
index f53e14f40..000000000
--- a/packages/cyberstorm/src/primitiveComponents/Frame/Popover.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.popover[data-size="s"] {
-  --frame-popover-gap: 1rem;
-  --frame-popover-padding: 1.5rem 2.25rem;
-  --frame-popover-border-radius: 0.25rem;
-}
-
-.popover[data-size="m"] {
-  --frame-popover-gap: 2rem;
-  --frame-popover-padding: 3rem 5.5rem;
-  --frame-popover-border-radius: 0.5rem;
-}
diff --git a/packages/cyberstorm/src/primitiveComponents/Input/Input.tsx b/packages/cyberstorm/src/primitiveComponents/Input/Input.tsx
index 9228ff19f..405416062 100644
--- a/packages/cyberstorm/src/primitiveComponents/Input/Input.tsx
+++ b/packages/cyberstorm/src/primitiveComponents/Input/Input.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { PrimitiveComponentDefaultProps, TooltipWrapper } from "../utils/utils";
-import { classnames } from "../../utils/utils";
 
 export interface InputTextInputProps
   extends React.InputHTMLAttributes<HTMLInputElement>,
@@ -14,10 +13,6 @@ export const Input = React.forwardRef<HTMLInputElement, InputTextInputProps>(
       children,
       primitiveType,
       rootClasses,
-      csTextStyles,
-      csColor,
-      csVariant,
-      csSize,
       tooltipText,
       tooltipSide,
       ...forwardedProps
@@ -29,17 +24,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputTextInputProps>(
 
       return (
         <TooltipWrapper tooltipText={tooltipText} tooltipSide={tooltipSide}>
-          <input
-            {...fProps}
-            className={classnames(
-              ...(csTextStyles ? csTextStyles : []),
-              rootClasses
-            )}
-            data-color={csColor}
-            data-variant={csVariant}
-            data-size={csSize}
-            ref={fRef}
-          >
+          <input {...fProps} className={rootClasses} ref={fRef}>
             {children}
           </input>
         </TooltipWrapper>
diff --git a/packages/cyberstorm/src/primitiveComponents/utils/utils.tsx b/packages/cyberstorm/src/primitiveComponents/utils/utils.tsx
index 9a8369b40..4a4c5bcf4 100644
--- a/packages/cyberstorm/src/primitiveComponents/utils/utils.tsx
+++ b/packages/cyberstorm/src/primitiveComponents/utils/utils.tsx
@@ -1,69 +1,6 @@
 import { PropsWithChildren } from "react";
 import { Tooltip } from "../..";
 
-// TODO: It would be nice if we forced storybook generation of all of the possible combinations.
-// If we do that, we'll have to handle the "unsupported combinations" gracefully somehow.
-// Best would be if we could have typescript warnings and force each "non-supported combination" to be explicitly
-// unsupported. See NewButtons story in storybook for reference
-
-export type variants =
-  | "default"
-  | "defaultPeek"
-  | "primary"
-  | "secondary"
-  | "tertiary"
-  | "tertiaryDimmed"
-  | "minimal"
-  | "accent"
-  | "special";
-
-export type colors =
-  | "surface"
-  | "surface-alpha"
-  | "blue"
-  | "pink"
-  | "red"
-  | "orange"
-  | "green"
-  | "yellow"
-  | "purple"
-  | "cyber-green";
-export const colorsList = [
-  "surface",
-  "surface-alpha",
-  "blue",
-  "pink",
-  "red",
-  "orange",
-  "green",
-  "yellow",
-  "purple",
-  "cyber-green",
-] as const;
-
-export type sizes = "xxs" | "xs" | "s" | "m" | "l";
-
-export const textStyleOptions = [
-  "lineHeightAuto",
-  "lineHeightBody",
-  "fontSizeXXS",
-  "fontSizeXS",
-  "fontSizeS",
-  "fontSizeM",
-  "fontSizeL",
-  "fontWeightRegular",
-  "fontWeightMedium",
-  "fontWeightSemiBold",
-  "fontWeightBold",
-  "fontFamilyInter",
-  "fontFamilyHubot",
-] as const;
-
-// There is an issue with Typescript (eslint) and prettier disagreeing if
-// the type should have parentheses
-// prettier-ignore
-export type TextStyles = (typeof textStyleOptions)[number];
-
 interface TooltipWrapperProps extends PropsWithChildren {
   tooltipText?: string;
   tooltipSide?: "bottom" | "left" | "right" | "top";
@@ -72,10 +9,6 @@ interface TooltipWrapperProps extends PropsWithChildren {
 export interface PrimitiveComponentDefaultProps
   extends PropsWithChildren,
     TooltipWrapperProps {
-  csColor?: colors;
-  csVariant?: variants;
-  csSize?: sizes;
-  csTextStyles?: TextStyles[];
   rootClasses?: string;
 }
 
diff --git a/packages/cyberstorm/src/sharedComponentStyles/ButtonStyles/Button.module.css b/packages/cyberstorm/src/sharedComponentStyles/ButtonStyles/Button.module.css
deleted file mode 100644
index 865222543..000000000
--- a/packages/cyberstorm/src/sharedComponentStyles/ButtonStyles/Button.module.css
+++ /dev/null
@@ -1,190 +0,0 @@
-/* Common Button styles */
-.button {
-  display: flex;
-  flex: none;
-  flex-direction: row;
-
-  gap: var(--button-gap);
-  align-items: center;
-
-  height: var(--button-height);
-
-  padding: var(--button-padding);
-  border: var(--button-border);
-
-  border-radius: var(--button-border-radius);
-  color: var(--button-color);
-
-  text-align: center;
-  background-color: var(--button-bg-color);
-  user-select: none;
-}
-
-.button:where(:not(:focus)) {
-  transition: var(--button-animation-length);
-
-  --button-animation-length: ease-in-out var(--animation-length-s);
-}
-
-/* Button variants */
-
-/* default */
-
-.button[data-variant="default"] {
-  --button-color: var(--color-11);
-  --button-bg-color: var(--color-4);
-}
-
-.button[data-variant="default"]:hover {
-  --button-bg-color: var(--color-3);
-}
-
-.button[data-variant="default"]:active {
-  --button-bg-color: var(--color-2);
-}
-
-/* primary */
-
-.button[data-variant="primary"] {
-  --button-color: var(--color-primary);
-  --button-bg-color: hsl(256deg 60% 52% / 1);
-}
-
-.button[data-variant="primary"]:hover {
-  --button-bg-color: hsl(256deg 67% 56% / 1);
-}
-
-.button[data-variant="primary"]:active {
-  background-color: hsl(256deg 60% 42% / 1);
-}
-
-/* secondary */
-
-.button[data-variant="secondary"] {
-  --button-color: var(--color-primary);
-  --button-bg-color: var(--color-surface-alpha--7);
-}
-
-.button[data-variant="secondary"]:hover {
-  --button-bg-color: var(--color-surface-alpha--8);
-}
-
-.button[data-variant="secondary"]:active {
-  --button-bg-color: var(--color-surface-alpha--6);
-}
-
-/* tertiary */
-
-.button[data-variant="tertiary"] {
-  --button-color: var(--color-primary);
-  --button-bg-color: transparent;
-}
-
-.button[data-variant="tertiary"]:hover {
-  --button-bg-color: var(--color-surface-alpha--8);
-}
-
-.button[data-variant="tertiary"]:active {
-  --button-bg-color: var(--color-surface-alpha--6);
-}
-
-/* accent */
-
-.button[data-variant="accent"] {
-  --button-color: var(--color-2);
-  --button-bg-color: var(--color-7);
-}
-
-.button[data-variant="accent"]:hover {
-  --button-bg-color: var(--color-9);
-}
-
-.button[data-variant="accent"]:active {
-  --button-bg-color: var(--color-6);
-}
-
-/* special */
-
-.button[data-variant="special"] {
-  border: 2px solid transparent;
-  background: linear-gradient(
-        284deg,
-        hsl(275deg 64% 11% / 1) 0%,
-        hsl(156deg 46% 12% / 1) 100%
-      )
-      padding-box,
-    linear-gradient(
-        284deg,
-        hsl(276deg 77% 54% / 1) 0%,
-        hsl(158deg 100% 57% / 1) 100%
-      )
-      border-box;
-}
-
-.button[data-variant="special"]:hover {
-  background: linear-gradient(
-        284deg,
-        hsl(203deg 80% 21% / 1) 0%,
-        hsl(155deg 46% 23% / 1) 100%
-      )
-      padding-box,
-    linear-gradient(
-        284deg,
-        hsl(154deg 65% 67% / 1) 0%,
-        hsl(203deg 92% 63% / 1) 100%
-      )
-      border-box;
-}
-
-.button[data-variant="special"]:active {
-  background: linear-gradient(
-        284deg,
-        hsl(203deg 80% 21% / 1) 0%,
-        hsl(155deg 46% 23% / 1) 100%
-      )
-      padding-box,
-    linear-gradient(
-        284deg,
-        hsl(154deg 65% 67% / 1) 0%,
-        hsl(203deg 92% 63% / 1) 100%
-      )
-      border-box;
-}
-
-/* Button sizes */
-
-/* xs */
-
-.button[data-size="xs"] {
-  --button-height: var(--space--30);
-  --button-padding: var(--space--12);
-  --button-gap: var(--gap--16);
-  --button-border-radius: var(--border-radius--8);
-}
-
-/* s */
-
-.button[data-size="s"] {
-  --button-height: var(--space--36);
-  --button-padding: var(--space--12);
-  --button-gap: var(--gap--16);
-  --button-border-radius: var(--border-radius--8);
-}
-
-/* m */
-
-.button[data-size="m"] {
-  --button-height: var(--space--44);
-  --button-padding: var(--space--12) var(--space--16);
-  --button-gap: var(--gap--16);
-  --button-border-radius: var(--border-radius--8);
-}
-
-/* l */
-
-.button[data-size="l"] {
-  --button-height: var(--space--44);
-  --button-padding: var(--space--12) var(--space--16);
-  --button-gap: var(--gap--16);
-  --button-border-radius: var(--border-radius--8);
-}
diff --git a/packages/cyberstorm/src/sharedComponentStyles/ButtonStyles/IconButton.module.css b/packages/cyberstorm/src/sharedComponentStyles/ButtonStyles/IconButton.module.css
deleted file mode 100644
index 5ef3752c0..000000000
--- a/packages/cyberstorm/src/sharedComponentStyles/ButtonStyles/IconButton.module.css
+++ /dev/null
@@ -1,138 +0,0 @@
-/* Common IconButton styles */
-.iconButton {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: var(--button-rect-size);
-
-  height: var(--button-rect-size);
-  border-radius: var(--border-radius--8);
-  color: var(--button-color);
-  background-color: var(--button-bg-color);
-  user-select: none;
-}
-
-.iconButton:where(:not(:focus)) {
-  transition: var(--button-animation-length);
-
-  --button-animation-length: ease-in-out var(--animation-length-s);
-}
-
-/* IconButton variants */
-
-/* default */
-
-.iconButton[data-variant="default"] {
-  --button-color: var(--color-11);
-  --button-bg-color: var(--color-4);
-}
-
-.iconButton[data-variant="default"]:hover {
-  --button-bg-color: var(--color-3);
-}
-
-.iconButton[data-variant="default"]:active {
-  --button-bg-color: var(--color-2);
-}
-
-/* primary */
-
-.iconButton[data-variant="primary"] {
-  --button-color: var(--color-primary);
-  --button-bg-color: hsl(256deg 60% 52% / 1);
-}
-
-.iconButton[data-variant="primary"]:hover {
-  --button-bg-color: hsl(256deg 67% 56% / 1);
-}
-
-.iconButton[data-variant="primary"]:active {
-  background-color: hsl(256deg 60% 52% / 1);
-}
-
-/* secondary */
-
-.iconButton[data-variant="secondary"] {
-  --button-color: hsl(243deg 100% 88% / 1);
-  --button-bg-color: var(--color-surface-alpha--7);
-}
-
-.iconButton[data-variant="secondary"]:hover {
-  --button-color: var(--color-primary);
-  --button-bg-color: var(--color-surface-alpha--8);
-}
-
-.iconButton[data-variant="secondary"]:active {
-  --button-color: var(--color-primary);
-  --button-bg-color: var(--color-surface-alpha--6);
-}
-
-/* tertiary */
-
-.iconButton[data-variant="tertiary"] {
-  --button-color: hsl(243deg 100% 88% / 1);
-  --button-bg-color: transparent;
-}
-
-.iconButton[data-variant="tertiary"]:hover {
-  --button-color: var(--color-primary);
-  --button-bg-color: var(--color-surface-alpha--7);
-}
-
-.iconButton[data-variant="tertiary"]:active {
-  --button-color: var(--color-primary);
-  --button-bg-color: var(--color-surface-alpha--6);
-}
-
-/* tertiaryDimmed */
-
-.iconButton[data-variant="tertiaryDimmed"] {
-  --button-color: hsl(243deg 28% 49% / 1);
-  --button-bg-color: transparent;
-}
-
-.iconButton[data-variant="tertiaryDimmed"]:hover {
-  --button-color: hsl(243deg 100% 88% / 1);
-  --button-bg-color: var(--color-surface-alpha--7);
-}
-
-.iconButton[data-variant="tertiaryDimmed"]:active {
-  --button-color: hsl(243deg 100% 88% / 1);
-  --button-bg-color: var(--color-surface-alpha--6);
-}
-
-/* accent */
-
-.iconButton[data-variant="minimal"] {
-  --button-color: hsl(243deg 28% 49% / 1);
-  --button-bg-color: transparent;
-}
-
-.iconButton[data-variant="minimal"]:hover {
-  --button-color: hsl(243deg 100% 88% / 1);
-}
-
-.iconButton[data-variant="minimal"]:active {
-  --button-color: hsl(243deg 100% 88% / 1);
-}
-
-/* Button sizes */
-
-/* xs */
-
-.iconButton[data-size="xs"] {
-  --button-rect-size: var(--space--30);
-}
-
-/* s */
-
-.iconButton[data-size="s"] {
-  --button-rect-size: var(--space--36);
-}
-
-/* m */
-
-.iconButton[data-size="m"] {
-  --button-rect-size: var(--space--44);
-}
diff --git a/packages/cyberstorm/src/sharedComponentStyles/TagStyles/Tag.module.css b/packages/cyberstorm/src/sharedComponentStyles/TagStyles/Tag.module.css
deleted file mode 100644
index 47f196a42..000000000
--- a/packages/cyberstorm/src/sharedComponentStyles/TagStyles/Tag.module.css
+++ /dev/null
@@ -1,60 +0,0 @@
-.tag {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--tag-color);
-  background: var(--tag-background-color);
-
-  --tag-color: var(--color-primary);
-  --tag-background-color: var(--color-primary);
-}
-
-.tag[data-variant="default"] {
-  --tag-color: var(--color-1);
-  --tag-background-color: var(--color-7);
-}
-
-.tag[data-variant="default"].hoverable:hover {
-  --tag-background-color: var(--color-8);
-}
-
-.tag[data-variant="default"].dark {
-  --tag-color: var(--color-9);
-  --tag-background-color: var(--color-2);
-}
-
-.tag[data-variant="default"].dark.hoverable:hover {
-  --tag-background-color: var(--color-3);
-}
-
-/* As surface color has different text color, override here */
-
-.tag[data-variant="default"][data-color="surface"] {
-  --tag-color: var(--color-primary);
-  --tag-background-color: var(--color-9);
-}
-
-.tag[data-variant="default"][data-color="surface"].hoverable:hover {
-  --tag-background-color: hsl(240deg 44% 55% / 1);
-}
-
-.tag[data-variant="default"][data-color="surface"].dark {
-  --tag-color: var(--color-primary);
-  --tag-background-color: var(--color-surface-alpha--8);
-}
-
-.tag[data-variant="default"][data-color="surface"].dark.hoverable:hover {
-  --tag-background-color: var(--color-surface-alpha--9);
-}
-
-.tag[data-size="m"] {
-  gap: var(--space--8);
-  padding: var(--space--6) var(--border-radius--8);
-  border-radius: var(--border-radius--8);
-}
-
-.tag[data-size="s"] {
-  gap: var(--gap--4);
-  padding: var(--space--4) var(--space--6);
-  border-radius: var(--border-radius--6);
-}
diff --git a/packages/cyberstorm/src/utils/utils.ts b/packages/cyberstorm/src/utils/utils.ts
index 5d832ab40..2dca67f05 100644
--- a/packages/cyberstorm/src/utils/utils.ts
+++ b/packages/cyberstorm/src/utils/utils.ts
@@ -35,3 +35,21 @@ export const classnames = (
 ): string => {
   return classnames.filter(String).join(" ");
 };
+
+export const componentClasses = (
+  variant?: string,
+  size?: string,
+  modifiers?: string[]
+): string[] => {
+  const listOfClasses = [];
+  if (variant) {
+    listOfClasses.push(`ts-variant--${variant}`);
+  }
+  if (size) {
+    listOfClasses.push(`ts-size--${size}`);
+  }
+  if (modifiers) {
+    listOfClasses.push(...modifiers.map((csm) => `ts-modifier--${csm}`));
+  }
+  return listOfClasses;
+};