diff --git a/packages/cyberstorm-styles/src/styles/fonts.css b/packages/cyberstorm-styles/src/styles/fonts.css
index 2ba9f858f..0358055f5 100644
--- a/packages/cyberstorm-styles/src/styles/fonts.css
+++ b/packages/cyberstorm-styles/src/styles/fonts.css
@@ -15,3 +15,19 @@
   font-family: Hubot-Sans;
   src: url("../fonts/HubotSans.ttf") format("truetype-variations");
 }
+
+:root {
+  --global--line-height--auto: normal;
+  --global--line-height--body: 170%;
+  --global--font-size--xxs: 0.625rem;
+  --global--font-size--xs: 0.75rem;
+  --global--font-size--s: 0.875rem;
+  --global--font-size--m: 1rem;
+  --global--font-size--l: 1.5rem;
+  --global--font-weight--regular: 400;
+  --global--font-weight--medium: 500;
+  --global--font-weight--semiBold: 600;
+  --global--font-weight--bold: 700;
+  --global--font-family--inter: inter, sans-serif;
+  --global--font-family--hubot: Hubot-Sans, sans-serif;
+}
diff --git a/packages/cyberstorm/src/index.ts b/packages/cyberstorm/src/index.ts
index 81239c957..a223ce017 100644
--- a/packages/cyberstorm/src/index.ts
+++ b/packages/cyberstorm/src/index.ts
@@ -135,3 +135,4 @@ export {
 export { Image } from "./newComponents/Image/Image";
 export * as List from "./newComponents/List";
 export { AdContainer } from "./newComponents/AdContainer/AdContainer";
+import "./sharedComponentStyles/ButtonStyles/ButtonTokens.css";
diff --git a/packages/cyberstorm/src/newComponents/Button/Button.tsx b/packages/cyberstorm/src/newComponents/Button/Button.tsx
index 007f60748..58f14ffdf 100644
--- a/packages/cyberstorm/src/newComponents/Button/Button.tsx
+++ b/packages/cyberstorm/src/newComponents/Button/Button.tsx
@@ -10,16 +10,23 @@ import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { NewIcon } from "../..";
 
-interface ButtonProps extends Omit<ActionableButtonProps, "primitiveType"> {
+interface Modifiers {
+  dimmed?: boolean;
+  subtle?: boolean;
+  disabled?: boolean;
+}
+
+interface ButtonProps extends Omit<ActionableButtonProps, "primitiveType" | "csVariant">, Modifiers {
   csVariant?:
-    | "default"
-    | "defaultPeek"
     | "primary"
     | "secondary"
     | "tertiary"
-    | "minimal"
     | "accent"
-    | "special";
+    | "special"
+    | "info"
+    | "success"
+    | "warning"
+    | "danger";
   csSize?: "xs" | "s" | "m" | "l";
 }
 
@@ -27,14 +34,12 @@ interface IconButtonProps
   extends Omit<
     ActionableButtonProps,
     "primitiveType" | "csVariant" | "csSize" | "children"
-  > {
+  >, Modifiers {
   csVariant?:
-    | "default"
-    | "defaultPeek"
     | "primary"
     | "secondary"
     | "tertiary"
-    | "tertiaryDimmed"
+    | "danger"
     | "minimal";
   csSize?: "xs" | "s" | "m";
   icon: IconProp;
@@ -46,12 +51,11 @@ export type ButtonComponentProps =
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonComponentProps>(
   (props: ButtonComponentProps, forwardedRef) => {
-    const { rootClasses, csTextStyles, icon, ...forwardedProps } = props;
+    const { rootClasses, csTextStyles, icon, dimmed, subtle, disabled,  ...forwardedProps } = props;
 
     if (icon) {
       const {
         csVariant = "default",
-        csColor = "purple",
         csSize = "m",
         ...fProps
       } = forwardedProps as IconButtonProps;
@@ -61,9 +65,6 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonComponentProps>(
           primitiveType="button"
           {...fProps}
           rootClasses={classnames(iconButtonStyles.iconButton, rootClasses)}
-          csColor={csColor}
-          csSize={csSize}
-          csVariant={csVariant}
           ref={forwardedRef}
         >
           <NewIcon csMode="inline" noWrapper>
@@ -75,36 +76,25 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonComponentProps>(
 
     const {
       children,
-      csVariant = "default",
-      csColor = "purple",
+      csVariant = "primary",
       csSize = "m",
       ...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}
+        disabled={disabled}
         rootClasses={classnames(
-          ...(csTextStyles ? csTextStyles : fontStyles(csSize)),
           buttonStyles.button,
+          getSize(csSize),
+          getVariant(csVariant),
+          dimmed ? buttonStyles["button--dimmed"] : null,
+          subtle ? buttonStyles["button--subtle"] : null,
+          disabled ? buttonStyles["button--disabled"] : null,
           rootClasses
         )}
-        csColor={csColor}
-        csSize={csSize}
-        csVariant={csVariant}
         ref={forwardedRef}
       >
         {children}
@@ -114,3 +104,26 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonComponentProps>(
 );
 
 Button.displayName = "Button";
+
+const getVariant = (scheme: string) => {
+  return {
+    primary: buttonStyles.button__primary,
+    secondary: buttonStyles.button__secondary,
+    tertiary: buttonStyles.button__tertiary,
+    accent: buttonStyles.button__accent,
+    special: buttonStyles.button__special,
+    info: buttonStyles.button__info,
+    success: buttonStyles.button__success,
+    warning: buttonStyles.button__warning,
+    danger: buttonStyles.button__danger,
+  }[scheme];
+};
+
+const getSize = (scheme: string) => {
+  return {
+    xs: buttonStyles["button--size-xs"],
+    s: buttonStyles["button--size-s"],
+    m: buttonStyles["button--size-m"],
+    l: buttonStyles["button--size-l"],
+  }[scheme];
+};
\ No newline at end of file
diff --git a/packages/cyberstorm/src/newComponents/Link/LinkButton/LinkButton.tsx b/packages/cyberstorm/src/newComponents/Link/LinkButton/LinkButton.tsx
index 4bf3eca71..680b066b6 100644
--- a/packages/cyberstorm/src/newComponents/Link/LinkButton/LinkButton.tsx
+++ b/packages/cyberstorm/src/newComponents/Link/LinkButton/LinkButton.tsx
@@ -3,51 +3,53 @@ import {
   ActionableCyberstormLinkProps,
   ActionableLinkProps,
 } from "../../../primitiveComponents/Actionable/Actionable";
-import styles from "../../../sharedComponentStyles/ButtonStyles/Button.module.css";
+import buttonStyles from "../../../sharedComponentStyles/ButtonStyles/Button.module.css";
 import React from "react";
 import { classnames } from "../../../utils/utils";
 
+interface Modifiers {
+  dimmed?: boolean;
+  subtle?: boolean;
+  disabled?: boolean;
+}
+
+interface LinkProps extends ActionableLinkProps, Modifiers {}
+interface CyberstormLinkProps extends ActionableCyberstormLinkProps, Modifiers {}
+
+
 export const LinkButton = React.forwardRef<
   HTMLAnchorElement,
-  ActionableLinkProps | ActionableCyberstormLinkProps
+  LinkProps | CyberstormLinkProps
 >(
   (
-    props: ActionableLinkProps | ActionableCyberstormLinkProps,
+    props: LinkProps | CyberstormLinkProps,
     forwardedRef
   ) => {
     const {
       children,
       rootClasses,
       csVariant = "default",
-      csColor = "purple",
       csSize = "m",
       csTextStyles,
+      dimmed,
+      subtle,
+      disabled,
       ...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"];
-      }
-    };
-
     return (
       <Actionable
         {...forwardedProps}
+        // disabled={disabled} TODO: Implement disabled for a tags?
         rootClasses={classnames(
-          ...(csTextStyles ? csTextStyles : fontStyles(csSize)),
-          styles.button,
+          buttonStyles.button,
+          getSize(csSize),
+          getVariant(csVariant),
+          dimmed ? buttonStyles["button--dimmed"] : null,
+          subtle ? buttonStyles["button--subtle"] : null,
+          disabled ? buttonStyles["button--disabled"] : null,
           rootClasses
         )}
-        csColor={csColor}
-        csSize={csSize}
-        csVariant={csVariant}
         ref={forwardedRef}
       >
         {children}
@@ -57,3 +59,26 @@ export const LinkButton = React.forwardRef<
 );
 
 LinkButton.displayName = "LinkButton";
+
+const getVariant = (scheme: string) => {
+  return {
+    primary: buttonStyles.button__primary,
+    secondary: buttonStyles.button__secondary,
+    tertiary: buttonStyles.button__tertiary,
+    accent: buttonStyles.button__accent,
+    special: buttonStyles.button__special,
+    info: buttonStyles.button__info,
+    success: buttonStyles.button__success,
+    warning: buttonStyles.button__warning,
+    danger: buttonStyles.button__danger,
+  }[scheme];
+};
+
+const getSize = (scheme: string) => {
+  return {
+    xs: buttonStyles["button--size-xs"],
+    s: buttonStyles["button--size-s"],
+    m: buttonStyles["button--size-m"],
+    l: buttonStyles["button--size-l"],
+  }[scheme];
+};
\ No newline at end of file
diff --git a/packages/cyberstorm/src/sharedComponentStyles/ButtonStyles/Button.module.css b/packages/cyberstorm/src/sharedComponentStyles/ButtonStyles/Button.module.css
index d98972c10..85fcc3b47 100644
--- a/packages/cyberstorm/src/sharedComponentStyles/ButtonStyles/Button.module.css
+++ b/packages/cyberstorm/src/sharedComponentStyles/ButtonStyles/Button.module.css
@@ -3,188 +3,231 @@
   display: flex;
   flex: none;
   flex-direction: row;
-
-  gap: var(--button-gap);
   align-items: center;
+  text-align: center;
+  user-select: none;
 
-  height: var(--button-height);
+  font-weight: var(--button---font-weight);
+  line-height: var(--button---line-height);
 
+  font-size: var(--button-font-size);
+  gap: var(--button-gap);
+  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);
+  transition: var(--button---animation-length);
 }
 
 /* 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__primary {
+  --button-color: var(--button--primary---color);
+  --button-bg-color: var(--button--primary---bg-color);
+  --button--variant--subtle---color: var(--button--primary--subtle---color);
+  --button--variant--subtle---bg-color: var(--button--primary--subtle---bg-color);
+}
+.button__primary:hover {
+  --button-bg-color: var(--button--primary--hover---bg-color);
+  --button--variant--subtle---color: var(--button--primary--subtle--hover---color);
+  --button--variant--subtle---bg-color: var(--button--primary--subtle--hover---bg-color);
+}
+.button__primary:active {
+  --button-bg-color: var(--button--primary--active---bg-color);
+  --button--variant--subtle---color: var(--button--primary--subtle--active---color);
+  --button--variant--subtle---bg-color: var(--button--primary--subtle--active---bg-color);
 }
-
-.button[data-variant="primary"]:active {
-  background-color: hsl(256deg 60% 52% / 1);
-}
-
 /* secondary */
-
-.button[data-variant="secondary"] {
-  --button-color: var(--color-primary);
-  --button-bg-color: var(--color-6);
+.button__secondary {
+  --button-color: var(--button--secondary---color);
+  --button-bg-color: var(--button--secondary---bg-color);
+  --button--variant--subtle---color: var(--button--secondary--subtle---color);
+  --button--variant--subtle---bg-color: var(--button--secondary--subtle---bg-color);
+}
+.button__secondary:hover {
+  --button-bg-color: var(--button--secondary--hover---bg-color);
+  --button--variant--subtle---color: var(--button--secondary--subtle--hover---color);
+  --button--variant--subtle---bg-color: var(--button--secondary--subtle--hover---bg-color);
+}
+.button__secondary:active {
+  --button-bg-color: var(--button--secondary--active---bg-color);
+  --button--variant--subtle---color: var(--button--secondary--subtle--active---color);
+  --button--variant--subtle---bg-color: var(--button--secondary--subtle--active---bg-color);
 }
-
-.button[data-variant="secondary"]:hover {
-  --button-bg-color: var(--color-7);
-}
-
-.button[data-variant="secondary"]:active {
-  --button-bg-color: var(--color-5);
-}
-
 /* tertiary */
-
-.button[data-variant="tertiary"] {
-  --button-color: var(--color-primary);
-  --button-bg-color: transparent;
-}
-
-.button[data-variant="tertiary"]:hover {
-  --button-bg-color: var(--color-6);
-}
-
-.button[data-variant="tertiary"]:active {
-  --button-bg-color: var(--color-5);
+.button__tertiary {
+  --button-color: var(--button--tertiary---color);
+  --button-bg-color: var(--button--tertiary---bg-color);
+  --button--variant--subtle---color: var(--button--tertiary--subtle---color);
+  --button--variant--subtle---bg-color: var(--button--tertiary--subtle---bg-color);
+}
+.button__tertiary:hover {
+  --button-bg-color: var(--button--tertiary--hover---bg-color);
+  --button--variant--subtle---color: var(--button--tertiary--subtle--hover---color);
+  --button--variant--subtle---bg-color: var(--button--tertiary--subtle--hover---bg-color);
+}
+.button__tertiary:active {
+  --button-bg-color: var(--button--tertiary--active---bg-color);
+  --button--variant--subtle---color: var(--button--tertiary--subtle--active---color);
+  --button--variant--subtle---bg-color: var(--button--tertiary--subtle--active---bg-color);
 }
-
 /* 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__accent {
+  --button-color: var(--button--accent---color);
+  --button-bg-color: var(--button--accent---bg-color);
+  --button--variant--subtle---color: var(--button--accent--subtle---color);
+  --button--variant--subtle---bg-color: var(--button--accent--subtle---bg-color);
+}
+.button__accent:hover {
+  --button-bg-color: var(--button--accent--hover---bg-color);
+  --button--variant--subtle---color: var(--button--accent--subtle--hover---color);
+  --button--variant--subtle---bg-color: var(--button--accent--subtle--hover---bg-color);
+}
+.button__accent:active {
+  --button-bg-color: var(--button--accent--active---bg-color);
+  --button--variant--subtle---color: var(--button--accent--subtle--active---color);
+  --button--variant--subtle---bg-color: var(--button--accent--subtle--active---bg-color);
 }
-
-.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__special {
+  background: var(--button-bg);
+  --button-color: var(--button--special---color);
+  --button-bg: var(--button--special---bg);
+  --button-border: var(--button--special---border);
+  --button--variant--subtle---color: var(--button--special--subtle---color);
+  --button--variant--subtle---bg: var(--button--special--subtle---bg);
+}
+.button__special:hover {
+  --button-bg: var(--button--special--hover---bg);
+  --button--variant--subtle---color: var(--button--special--subtle--hover---color);
+  --button--variant--subtle---bg: var(--button--special--subtle--hover---bg);
+}
+.button__special:active {
+  --button-bg: var(--button--special--active---bg);
+  --button--variant--subtle---color: var(--button--special--subtle--active---color);
+  --button--variant--subtle---bg: var(--button--special--subtle--active---bg);
+}
+/* info */
+.button__info {
+  --button-color: var(--button--info---color);
+  --button-bg-color: var(--button--info---bg-color);
+  --button--variant--subtle---color: var(--button--info--subtle---color);
+  --button--variant--subtle---bg-color: var(--button--info--subtle---bg-color);
+}
+.button__info:hover {
+  --button-bg-color: var(--button--info--hover---bg-color);
+  --button--variant--subtle---color: var(--button--info--subtle--hover---color);
+  --button--variant--subtle---bg-color: var(--button--info--subtle--hover---bg-color);
+}
+.button__info:active {
+  --button-bg-color: var(--button--info--active---bg-color);
+  --button--variant--subtle---color: var(--button--info--subtle--active---color);
+  --button--variant--subtle---bg-color: var(--button--info--subtle--active---bg-color);
+}
+/* success */
+.button__success {
+  --button-color: var(--button--success---color);
+  --button-bg-color: var(--button--success---bg-color);
+  --button--variant--subtle---color: var(--button--success--subtle---color);
+  --button--variant--subtle---bg-color: var(--button--success--subtle---bg-color);
+}
+.button__success:hover {
+  --button-bg-color: var(--button--success--hover---bg-color);
+  --button--variant--subtle---color: var(--button--success--subtle--hover---color);
+  --button--variant--subtle---bg-color: var(--button--success--subtle--hover---bg-color);
+}
+.button__success:active {
+  --button-bg-color: var(--button--success--active---bg-color);
+  --button--variant--subtle---color: var(--button--success--subtle--active---color);
+  --button--variant--subtle---bg-color: var(--button--success--subtle--active---bg-color);
+}
+/* warning */
+.button__warning {
+  --button-color: var(--button--warning---color);
+  --button-bg-color: var(--button--warning---bg-color);
+  --button--variant--subtle---color: var(--button--warning--subtle---color);
+  --button--variant--subtle---bg-color: var(--button--warning--subtle---bg-color);
+}
+.button__warning:hover {
+  --button-bg-color: var(--button--warning--hover---bg-color);
+  --button--variant--subtle---color: var(--button--warning--subtle--hover---color);
+  --button--variant--subtle---bg-color: var(--button--warning--subtle--hover---bg-color);
+}
+.button__warning:active {
+  --button-bg-color: var(--button--warning--active---bg-color);
+  --button--variant--subtle---color: var(--button--warning--subtle--active---color);
+  --button--variant--subtle---bg-color: var(--button--warning--subtle--active---bg-color);
+}
+/* danger */
+.button__danger {
+  --button-color: var(--button--danger---color);
+  --button-bg-color: var(--button--danger---bg-color);
+  --button--variant--subtle---color: var(--button--danger--subtle---color);
+  --button--variant--subtle---bg-color: var(--button--danger--subtle---bg-color);
+}
+.button__danger:hover {
+  --button-bg-color: var(--button--danger--hover---bg-color);
+  --button--variant--subtle---color: var(--button--danger--subtle--hover---color);
+  --button--variant--subtle---bg-color: var(--button--danger--subtle--hover---bg-color);
+}
+.button__danger:active {
+  --button-bg-color: var(--button--danger--active---bg-color);
+  --button--variant--subtle---color: var(--button--danger--subtle--active---color);
+  --button--variant--subtle---bg-color: var(--button--danger--subtle--active---bg-color);
 }
-
-.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);
+.button--size-xs {
+  --button-font-size: var(--button--size-xs---font-size);
+  --button-height: var(--button--size-xs---height);
+  --button-padding: var(--button--size-xs---padding);
+  --button-gap: var(--button--size-xs---gap);
+  --button-border-radius: var(--button--size-xs---border-radius);
 }
-
 /* 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);
+.button--size-s {
+  --button-font-size: var(--button--size-s---font-size);
+  --button-height: var(--button--size-s---height);
+  --button-padding: var(--button--size-s---padding);
+  --button-gap: var(--button--size-s---gap);
+  --button-border-radius: var(--button--size-s---border-radius);
 }
-
 /* 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);
+.button--size-m {
+  --button-font-size: var(--button--size-m---font-size);
+  --button-height: var(--button--size-m---height);
+  --button-padding: var(--button--size-m---padding);
+  --button-gap: var(--button--size-m---gap);
+  --button-border-radius: var(--button--size-m---border-radius);
 }
-
 /* 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);
-}
+.button--size-l {
+  --button-font-size: var(--button--size-l---font-size);
+  --button-height: var(--button--size-l---height);
+  --button-padding: var(--button--size-l---padding);
+  --button-gap: var(--button--size-l---gap);
+  --button-border-radius: var(--button--size-l---border-radius);
+}
+/* Button modifiers */
+/* dimmed */
+.button--dimmed {
+  filter: brightness(80%);
+}
+/* subtle (AKA "bg on hover") */
+.button--subtle {
+  color: var(--button--variant--subtle---color);
+  --button-bg-color: var(--button--variant--subtle---bg-color);
+}
+.button__special.button--subtle {
+  --button-bg: var(--button--variant--subtle---bg); 
+}
+
+/* disabled */
+.button--disabled {
+  opacity: 0.5;
+}
\ No newline at end of file
diff --git a/packages/cyberstorm/src/sharedComponentStyles/ButtonStyles/ButtonTokens.css b/packages/cyberstorm/src/sharedComponentStyles/ButtonStyles/ButtonTokens.css
new file mode 100644
index 000000000..2fae277fb
--- /dev/null
+++ b/packages/cyberstorm/src/sharedComponentStyles/ButtonStyles/ButtonTokens.css
@@ -0,0 +1,174 @@
+:root {
+    /* COMPONENT */
+    --button---font-weight: var(--global--font-weight--bold);
+    --button---line-height: var(--global--line-height--auto);
+    --button---animation-length: ease-in-out var(--animation-length-s);
+    /* VARIANTS */
+    /* primary */
+    --button--primary---color: var(--color-primary);
+    --button--primary---bg-color: hsl(256deg 60% 52% / 1);
+    --button--primary--hover---bg-color: hsl(256deg 67% 56% / 1);
+    --button--primary--active---bg-color: hsl(256deg 60% 52% / 1);
+    /* primary modifiers */
+    --button--primary--subtle---color: var(--color-primary);
+    --button--primary--subtle---bg-color: transparent;
+    --button--primary--subtle--hover---color: var(--color-primary);
+    --button--primary--subtle--hover---bg-color: hsl(256deg 60% 52% / 1);
+    --button--primary--subtle--active---color: var(--color-primary);
+    --button--primary--subtle--active---bg-color: hsl(256deg 67% 56% / 1);
+    /* secondary */
+    --button--secondary---color: var(--color-primary);
+    --button--secondary---bg-color: var(--color-surface-alpha--6);
+    --button--secondary--hover---bg-color: var(--color-surface-alpha--7);
+    --button--secondary--active---bg-color: var(--color-surface-alpha--5);
+    /* secondary modifiers */
+    --button--secondary--subtle---color: var(--color-primary);
+    --button--secondary--subtle---bg-color: transparent;
+    --button--secondary--subtle--hover---color: var(--color-surface-alpha--6);
+    --button--secondary--subtle--hover---bg-color: var(--color-primary);
+    --button--secondary--subtle--active---color: var(--color-surface-alpha--7);
+    --button--secondary--subtle--active---bg-color: var(--color-primary);
+    /* tertiary */
+    --button--tertiary---color: var(--color-primary);
+    --button--tertiary---bg-color: transparent;
+    --button--tertiary--hover---bg-color: var(--color-surface-alpha--6);
+    --button--tertiary--active---bg-color: var(--color-surface-alpha--5);
+    /* tertiary modifiers */
+    --button--tertiary--subtle---color: var(--color-primary);
+    --button--tertiary--subtle---bg-color: transparent;
+    --button--tertiary--subtle--hover---color: var(--color-primary);
+    --button--tertiary--subtle--hover---bg-color: var(--button--tertiary--hover---bg-color);
+    --button--tertiary--subtle--active---color: var(--color-primary);
+    --button--tertiary--subtle--active---bg-color: var(--button--tertiary--active---bg-color);
+    /* accent */
+    --button--accent---color: var(--color-cyber-green--2);
+    --button--accent---bg-color: var(--color-cyber-green--7);
+    --button--accent--hover---bg-color: var(--color-cyber-green--9);
+    --button--accent--active---bg-color: var(--color-cyber-green--6);
+    /* accent modifiers */
+    --button--accent--subtle---color: var(--color-primary);
+    --button--accent--subtle---bg-color: transparent;
+    --button--accent--subtle--hover---color: var(--color-cyber-green--2);
+    --button--accent--subtle--hover---bg-color: var(--color-cyber-green--7);
+    --button--accent--subtle--active---color: var(--color-cyber-green--2);
+    --button--accent--subtle--active---bg-color: var(--color-cyber-green--9);
+    /* special */
+    --button--special---color: var(--color-primary);
+    --button--special---bg: 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--hover---bg: 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--active---bg: 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---border: 2px solid transparent;
+    /* special modifiers */
+    --button--special--subtle---color: var(--color-primary);
+    --button--special--subtle---bg: transparent;
+    --button--special--subtle--hover---color: var(--color-primary);
+    --button--special--subtle--hover---bg: var(--button--special---bg);
+    --button--special--subtle--active---color: var(--color-primary);
+    --button--special--subtle--active---bg: var(--button--special--hover---bg);
+    /* info */
+    --button--info---color: var(--color-blue--11);
+    --button--info---bg-color: var(--color-blue--4);
+    --button--info--hover---bg-color: var(--color-blue--3);
+    --button--info--active---bg-color: var(--color-blue--2);
+    /* info modifiers */
+    --button--info--subtle---color: var(--color-primary);
+    --button--info--subtle---bg-color: transparent;
+    --button--info--subtle--hover---color: var(--color-blue--11);
+    --button--info--subtle--hover---bg-color: var(--color-blue--4);
+    --button--info--subtle--active---color: var(--color-blue--11);
+    --button--info--subtle--active---bg-color: var(--color-blue--3);
+    /* success */
+    --button--success---color: var(--color-green--11);
+    --button--success---bg-color: var(--color-green--4);
+    --button--success--hover---bg-color: var(--color-green--3);
+    --button--success--active---bg-color: var(--color-green--2);
+    /* success modifiers */
+    --button--success--subtle---color: var(--color-primary);
+    --button--success--subtle---bg-color: transparent;
+    --button--success--subtle--hover---color: var(--color-green--11);
+    --button--success--subtle--hover---bg-color: var(--color-green--4);
+    --button--success--subtle--active---color: var(--color-green--11);
+    --button--success--subtle--active---bg-color: var(--color-green--3);
+    /* warning */
+    --button--warning---color: var(--color-yellow--11);
+    --button--warning---bg-color: var(--color-yellow--4);
+    --button--warning--hover---bg-color: var(--color-yellow--3);
+    --button--warning--active---bg-color: var(--color-yellow--2);
+    /* warning modifiers */
+    --button--warning--subtle---color: var(--color-primary);
+    --button--warning--subtle---bg-color: transparent;
+    --button--warning--subtle--hover---color: var(--color-yellow--11);
+    --button--warning--subtle--hover---bg-color: var(--color-yellow--4);
+    --button--warning--subtle--active---color: var(--color-yellow--11);
+    --button--warning--subtle--active---bg-color: var(--color-yellow--3);
+    /* danger */
+    --button--danger---color: var(--color-red--11);
+    --button--danger---bg-color: var(--color-red--4);
+    --button--danger--hover---bg-color: var(--color-red--3);
+    --button--danger--active---bg-color: var(--color-red--2);
+    /* danger modifiers */
+    --button--danger--subtle---color: var(--color-primary);
+    --button--danger--subtle---bg-color: transparent;
+    --button--danger--subtle--hover---color: var(--color-red--11);
+    --button--danger--subtle--hover---bg-color: var(--color-red--4);
+    --button--danger--subtle--active---color: var(--color-red--11);
+    --button--danger--subtle--active---bg-color: var(--color-red--3);
+    /* SIZES */
+    /* xs */
+    --button--size-xs---font-size: var(--global--font-size--xs);
+    --button--size-xs---height: var(--space--30);
+    --button--size-xs---padding: var(--space--12);
+    --button--size-xs---gap: var(--gap--16);
+    --button--size-xs---border-radius: var(--border-radius--8);
+    /* s */
+    --button--size-s---font-size: var(--global--font-size--s);
+    --button--size-s---height: var(--space--36);
+    --button--size-s---padding: var(--space--12);
+    --button--size-s---gap: var(--gap--16);
+    --button--size-s---border-radius: var(--border-radius--8);
+    /* m */
+    --button--size-m---font-size: var(--global--font-size--s);
+    --button--size-m---height: var(--space--44);
+    --button--size-m---padding: var(--space--12) var(--space--16);
+    --button--size-m---gap: var(--gap--16);
+    --button--size-m---border-radius: var(--border-radius--8);
+    /* l */
+    --button--size-l---font-size: var(--global--font-size--m);
+    --button--size-l---height: var(--space--44);
+    --button--size-l---padding: var(--space--12) var(--space--16);
+    --button--size-l---gap: var(--gap--16);
+    --button--size-l---border-radius: var(--border-radius--8);
+}
\ No newline at end of file