diff --git a/src/button-with-icon/button-with-icon.style.tsx b/src/button-with-icon/button-with-icon.style.tsx
index 96ff647d4..81ecc7dfb 100644
--- a/src/button-with-icon/button-with-icon.style.tsx
+++ b/src/button-with-icon/button-with-icon.style.tsx
@@ -1,4 +1,4 @@
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { Main } from "../button/button.style";
 import { MainStyleProps } from "../button/types";
 import { ButtonIconPosition } from "./types";
@@ -20,24 +20,7 @@ export const MainButtonWithIcon = styled(Main)<MainStylePropsWithIcon>`
 
     svg {
         flex-shrink: 0;
+        height: 1em;
+        width: 1em;
     }
-
-    ${(props) => {
-        switch (props.$buttonSizeStyle) {
-            case "small":
-                return css`
-                    svg {
-                        height: 1rem;
-                        width: 1rem;
-                    }
-                `;
-            default:
-                return css`
-                    svg {
-                        height: 1.125rem;
-                        width: 1.125rem;
-                    }
-                `;
-        }
-    }}
 `;
diff --git a/src/button/button.style.tsx b/src/button/button.style.tsx
index 41ea5046a..dfca62642 100644
--- a/src/button/button.style.tsx
+++ b/src/button/button.style.tsx
@@ -1,10 +1,8 @@
 import styled, { css } from "styled-components";
-import { V2_Color } from "../v2_color/color";
-import { V2_MediaQuery } from "../v2_media/media";
 import { ComponentLoadingSpinner } from "../shared/component-loading-spinner/component-loading-spinner";
-import { V2_TextStyleHelper } from "../v2_text";
 import { MainStyleProps } from "./types";
-import { V2_DesignToken } from "../v2_design-token";
+import { Colour, Font } from "../theme";
+import { MediaQuery } from "../theme";
 
 export const Main = styled.button<MainStyleProps>`
     padding: 0.5rem 1rem;
@@ -16,12 +14,6 @@ export const Main = styled.button<MainStyleProps>`
     align-items: center;
     justify-content: center;
 
-    @media (hover: hover) {
-        &:hover {
-            box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.2);
-        }
-    }
-
     // -----------------------------------------------------------------------------
     // BUTTON STYLE + TEXT COLOR
     // -----------------------------------------------------------------------------
@@ -29,70 +21,79 @@ export const Main = styled.button<MainStyleProps>`
         switch (props.$buttonStyle) {
             case "secondary":
                 return css`
-                    background-color: ${V2_Color.Neutral[8]};
+                    background-color: ${Colour.Primitive.white};
                     border: 1px solid
                         ${props.$buttonIsDanger
-                            ? V2_DesignToken.Button.Danger.Border
-                            : V2_Color.Primary};
+                            ? Colour["border-error-strong"]
+                            : Colour["border-primary"]};
 
                     color: ${props.$buttonIsDanger
-                        ? V2_DesignToken.Button.Danger.Primary
-                        : V2_Color.Primary};
+                        ? Colour["text-error"]
+                        : Colour["text-primary"]};
+
+                    &:hover,
+                    &:active {
+                        background-color: ${Colour["bg-hover-neutral"]};
+                    }
                 `;
             case "light":
                 return css`
-                    background-color: ${V2_Color.Neutral[8]};
-                    border: 1px solid ${V2_Color.Neutral[5]};
+                    background-color: ${Colour.bg};
+                    border: 1px solid ${Colour.border};
 
                     color: ${props.$buttonIsDanger
-                        ? V2_DesignToken.Button.Danger.Primary
-                        : V2_Color.Primary};
-                `;
-            case "disabled":
-                return css`
-                    background-color: ${V2_Color.Neutral[6]};
-                    border: 1px solid transparent;
-                    cursor: not-allowed;
+                        ? Colour["text-error"]
+                        : Colour["text-primary"]};
 
-                    &:hover {
-                        box-shadow: none;
+                    &:hover,
+                    &:active {
+                        background-color: ${Colour["bg-hover-neutral"]};
                     }
-
-                    color: ${V2_Color.Neutral[3]};
                 `;
+
             case "link":
                 return css`
                     background-color: transparent;
-                    border: none;
-                    border-radius: unset;
+                    border: transparent;
+                    color: ${props.$buttonIsDanger
+                        ? Colour["text-error"]
+                        : Colour["text-primary"]};
+                    &:hover,
+                    &:active {
+                        background-color: ${Colour["bg-hover-neutral"]};
+                    }
+                `;
+            case "disabled":
+                return css`
+                    background-color: ${Colour["bg-disabled"]};
+                    border: 1px solid transparent;
+                    cursor: not-allowed;
 
                     &:hover {
                         box-shadow: none;
                     }
 
-                    color: ${props.$buttonIsDanger
-                        ? V2_DesignToken.Button.Danger.Primary
-                        : V2_Color.Primary};
-                    :hover,
-                    :active,
-                    :focus {
-                        color: ${props.$buttonIsDanger
-                            ? V2_DesignToken.Button.Danger.Hover
-                            : V2_Color.Secondary};
-                    }
+                    color: ${Colour["text-disabled"]};
                 `;
             default:
                 return css`
                     background-color: ${props.$buttonIsDanger
-                        ? V2_DesignToken.Button.Danger.BackgroundColor
-                        : V2_Color.Primary};
+                        ? Colour["bg-error-strong"]
+                        : Colour["bg-primary"]};
                     border: 1px solid transparent;
 
-                    ${V2_MediaQuery.MaxWidth.mobileL} {
+                    ${MediaQuery.MaxWidth.md} {
                         width: 100%;
                     }
 
-                    color: ${V2_Color.Neutral[8]};
+                    color: ${Colour["text-inverse"]};
+
+                    &:hover,
+                    &:active {
+                        background-color: ${props.$buttonIsDanger
+                            ? Colour["bg-error-strong-hover"]
+                            : Colour["bg-primary-hover"]};
+                    }
                 `;
         }
     }}
@@ -104,19 +105,30 @@ export const Main = styled.button<MainStyleProps>`
         switch (props.$buttonSizeStyle) {
             case "small":
                 return css`
-                    height: 2.5rem;
-                    ${V2_TextStyleHelper.getTextStyle("H5", "semibold")}
+                    height: 1.5rem;
+                    ${Font["header-xs-semibold"]}
 
-                    ${V2_MediaQuery.MaxWidth.mobileS} {
+                    ${MediaQuery.MaxWidth.xxs} {
                         height: auto;
                     }
                 `;
+
+            case "large":
+                return css`
+                    height: 2.25rem;
+                    ${Font["header-md-semibold"]}
+
+                    ${MediaQuery.MaxWidth.xxs} {
+                        height: auto;
+                    }
+                `;
+
             default:
                 return css`
                     height: 3rem;
-                    ${V2_TextStyleHelper.getTextStyle("H4", "semibold")}
+                    ${Font["header-xs-semibold"]}
 
-                    ${V2_MediaQuery.MaxWidth.mobileS} {
+                    ${MediaQuery.MaxWidth.xxs} {
                         height: auto;
                     }
                 `;
@@ -128,18 +140,18 @@ export const Spinner = styled(ComponentLoadingSpinner)<MainStyleProps>`
     margin-right: 0.5rem;
     ${(props) => {
         let color = props.$buttonIsDanger
-            ? V2_DesignToken.Button.Danger.Primary
-            : V2_Color.Primary(props);
+            ? Colour["text-error"]
+            : Colour["text-primary"](props);
         switch (props.$buttonStyle) {
             case "secondary":
             case "light":
             case "link":
                 break;
             case "disabled":
-                color = V2_Color.Neutral[3](props);
+                color = Colour["text-disabled"](props);
                 break;
             default:
-                color = V2_Color.Neutral[8](props);
+                color = Colour["text-inverse"](props);
                 break;
         }
 
diff --git a/src/button/types.ts b/src/button/types.ts
index 2bf067295..e7a085e57 100644
--- a/src/button/types.ts
+++ b/src/button/types.ts
@@ -24,7 +24,7 @@ export type MainButtonStyle =
     | "secondary"
     | "light"
     | "link";
-export type MainButtonSize = "default" | "small";
+export type MainButtonSize = "default" | "small" | "large";
 export interface MainStyleProps extends ComponentLoadingSpinnerProps {
     $buttonStyle: MainButtonStyle;
     $buttonSizeStyle?: MainButtonSize | undefined;
diff --git a/src/overlay/overlay.styles.tsx b/src/overlay/overlay.styles.tsx
index 8b1622cff..f1983d59d 100644
--- a/src/overlay/overlay.styles.tsx
+++ b/src/overlay/overlay.styles.tsx
@@ -1,5 +1,6 @@
 import styled, { css } from "styled-components";
 import { StyleProps } from "./types";
+import { Colour } from "../theme";
 
 const getBackdropFilter = (blur: boolean) => {
     let styleString = "";
@@ -37,7 +38,8 @@ export const Wrapper = styled.div<StyleProps>`
     position: absolute;
     left: 0;
     top: 0;
-    background-color: rgba(5, 1, 1, ${(props) => props.$backgroundOpacity});
+    background-color: ${(props) =>
+        props.$stacked ? Colour["overlay-subtle"] : Colour["overlay-strong"]};
     backdrop-filter: ${(props) => getBackdropFilter(props.$backgroundBlur)};
     transition: opacity 200ms ease;
 
diff --git a/src/overlay/overlay.tsx b/src/overlay/overlay.tsx
index be2195388..202bf41ec 100644
--- a/src/overlay/overlay.tsx
+++ b/src/overlay/overlay.tsx
@@ -9,7 +9,6 @@ export const Overlay = ({
     rootId,
     onOverlayClick,
     children,
-    backgroundOpacity,
     backgroundBlur = true,
     disableTransition = false,
     enableOverlayClick = false,
@@ -180,7 +179,7 @@ export const Overlay = ({
         <Wrapper
             data-testid={"overlay-wrapper"}
             $show={show}
-            $backgroundOpacity={backgroundOpacity || (isStacked ? 0.5 : 0.8)}
+            $stacked={isStacked}
             $backgroundBlur={backgroundBlur}
             $disableTransition={disableTransition}
             $enableOverlayClick={enableOverlayClick}
diff --git a/src/overlay/types.ts b/src/overlay/types.ts
index 431cd326d..e057cd93e 100644
--- a/src/overlay/types.ts
+++ b/src/overlay/types.ts
@@ -4,7 +4,6 @@ export interface OverlayProps {
     rootId?:
         | string
         | undefined /* the id of the root element to attach the overlay to */;
-    backgroundOpacity?: number | undefined;
     backgroundBlur?: boolean | undefined;
     disableTransition?: boolean | undefined;
     enableOverlayClick?: boolean | undefined;
@@ -19,7 +18,6 @@ export interface OverlayProps {
  */
 export interface StyleProps {
     $show: boolean;
-    $backgroundOpacity?: number | undefined;
     $backgroundBlur?: boolean | undefined;
     $disableTransition?: boolean | undefined;
     $enableOverlayClick?: boolean | undefined;