diff --git a/.changeset/curly-jeans-talk.md b/.changeset/curly-jeans-talk.md
new file mode 100644
index 0000000000..573af45dda
--- /dev/null
+++ b/.changeset/curly-jeans-talk.md
@@ -0,0 +1,17 @@
+---
+"@twilio-paste/base-radio-checkbox": patch
+"@twilio-paste/button": patch
+"@twilio-paste/checkbox": patch
+"@twilio-paste/combobox": patch
+"@twilio-paste/file-picker": patch
+"@twilio-paste/file-uploader": patch
+"@twilio-paste/input": patch
+"@twilio-paste/input-box": patch
+"@twilio-paste/menu": patch
+"@twilio-paste/select": patch
+"@twilio-paste/textarea": patch
+"@twilio-paste/visual-picker": patch
+"@twilio-paste/core": patch
+---
+
+[Base Radio Checkbox, Button, Combobox, File Picker, File Uploader, Input, Input Box, Menu, Select, Textarea, Visual Picker] Update styles of form related components
diff --git a/.changeset/lazy-icons-prove.md b/.changeset/lazy-icons-prove.md
new file mode 100644
index 0000000000..dd46fd73ae
--- /dev/null
+++ b/.changeset/lazy-icons-prove.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/design-tokens": patch
+"@twilio-paste/core": patch
+---
+
+[Design Tokens] Update palette and new elevation token
diff --git a/.changeset/selfish-birds-pump.md b/.changeset/selfish-birds-pump.md
new file mode 100644
index 0000000000..7b7a2da3ee
--- /dev/null
+++ b/.changeset/selfish-birds-pump.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/label": minor
+"@twilio-paste/core": minor
+---
+
+[Label] Update font weight, expose new prop for optional variant and fix require dot causing scrolling issue
diff --git a/cypress/integration/token-list/index.spec.ts b/cypress/integration/token-list/index.spec.ts
index 1bba292404..e293f0b12b 100644
--- a/cypress/integration/token-list/index.spec.ts
+++ b/cypress/integration/token-list/index.spec.ts
@@ -47,7 +47,7 @@ describe("Token list filter format control and theme control", function () {
     cy.get('[data-cy="theme-control"]').select("dark").should("have.value", "dark");
     cy.get('[data-cy="tokens-table-container"] li:first dd [data-paste-element="TEXT"]:first').should(
       "include.text",
-      "rgb(18, 28, 45)",
+      "rgb(24, 37, 60)",
     );
     cy.get('[data-cy="theme-control"]').select("default").should("have.value", "default");
     cy.get('[data-cy="tokens-table-container"] li:first dd [data-paste-element="TEXT"]:first').should(
diff --git a/packages/paste-core/components/account-switcher/__tests__/AccountSwitcher.spec.tsx b/packages/paste-core/components/account-switcher/__tests__/AccountSwitcher.spec.tsx
index 1a713117f3..85313e1663 100644
--- a/packages/paste-core/components/account-switcher/__tests__/AccountSwitcher.spec.tsx
+++ b/packages/paste-core/components/account-switcher/__tests__/AccountSwitcher.spec.tsx
@@ -42,7 +42,7 @@ describe("AccountSwitcher", () => {
       });
       expect(screen.getByRole("button", { name: "Switch accounts" })).toHaveStyleRule(
         "background-color",
-        "rgb(214, 31, 31)",
+        "rgb(219, 19, 42)",
       );
       expect(screen.getByRole("menu")).toHaveStyleRule("border-color", "rgb(117, 12, 12)");
       expect(screen.getByRole("menuitem", { name: "Account settings" })).toHaveStyleRule(
@@ -59,7 +59,7 @@ describe("AccountSwitcher", () => {
       });
       expect(screen.getByRole("button", { name: "Switch accounts" })).toHaveStyleRule(
         "background-color",
-        "rgb(214, 31, 31)",
+        "rgb(219, 19, 42)",
       );
       expect(screen.getByRole("menu")).toHaveStyleRule("border-color", "rgb(117, 12, 12)");
       expect(screen.getByRole("menuitem", { name: "Account settings" })).toHaveStyleRule(
diff --git a/packages/paste-core/components/alert-dialog/__tests__/customization.spec.tsx b/packages/paste-core/components/alert-dialog/__tests__/customization.spec.tsx
index ea368ae21a..5ee38c3087 100644
--- a/packages/paste-core/components/alert-dialog/__tests__/customization.spec.tsx
+++ b/packages/paste-core/components/alert-dialog/__tests__/customization.spec.tsx
@@ -83,7 +83,7 @@ describe("Alert Dialog customization", () => {
   });
   it("should apply styles to Alert Dialog with custom element prop", () => {
     const { container } = render(<CustomizedDestructiveAlertDialog />);
-    expect(screen.getByTestId("destructive_alert_dialog")).toHaveStyleRule("background-color", "rgb(214, 31, 31)");
+    expect(screen.getByTestId("destructive_alert_dialog")).toHaveStyleRule("background-color", "rgb(219, 19, 42)");
     expect(container.querySelector('[data-paste-element="FOO_HEADER_WRAPPER"]')).toHaveStyleRule("border", "inherit");
     expect(screen.getByText("Alert Dialog")).toHaveStyleRule("background-color", "rgb(235, 244, 255)");
     expect(
diff --git a/packages/paste-core/components/alert-dialog/__tests__/index.spec.tsx b/packages/paste-core/components/alert-dialog/__tests__/index.spec.tsx
index 2c707229b7..a7cecbd93c 100644
--- a/packages/paste-core/components/alert-dialog/__tests__/index.spec.tsx
+++ b/packages/paste-core/components/alert-dialog/__tests__/index.spec.tsx
@@ -30,7 +30,7 @@ describe("Alert Dialog", () => {
   it("Should have a destructive button style when the destructive prop is included", () => {
     render(<DestructiveAlertDialog />, { wrapper: ThemeWrapper });
     const button = screen.getByRole("button", { name: "Delete" });
-    expect(button).toHaveStyleRule("background-color", "rgb(214, 31, 31)");
+    expect(button).toHaveStyleRule("background-color", "rgb(219, 19, 42)");
   });
 
   it("Should have a disabled destructive button style when the onConfirmDisabled prop is included", () => {
diff --git a/packages/paste-core/components/base-radio-checkbox/src/BaseRadioCheckbox.tsx b/packages/paste-core/components/base-radio-checkbox/src/BaseRadioCheckbox.tsx
index 9a8d0ee4cf..ea6e7ce402 100644
--- a/packages/paste-core/components/base-radio-checkbox/src/BaseRadioCheckbox.tsx
+++ b/packages/paste-core/components/base-radio-checkbox/src/BaseRadioCheckbox.tsx
@@ -55,8 +55,8 @@ const BaseRadioCheckboxControl = React.forwardRef<HTMLSpanElement, BaseRadioChec
           color: "colorTextInverse",
         }}
         _disabledSibling={{
-          borderColor: "colorBorderWeaker",
-          backgroundColor: "colorBackgroundStrong",
+          borderColor: "colorBorderWeak",
+          backgroundColor: "colorBackground",
         }}
         _invalidSibling={{
           borderColor: "colorBorderError",
@@ -65,7 +65,7 @@ const BaseRadioCheckboxControl = React.forwardRef<HTMLSpanElement, BaseRadioChec
           borderColor: "colorBorderErrorStronger",
         }}
         _invalidAndDisabledSibling={{
-          borderColor: "colorBorderWeaker",
+          borderColor: "colorBorderWeak",
         }}
         _checkedAndHoverSibling={{
           borderColor: "colorBorderPrimaryStronger",
@@ -86,8 +86,8 @@ const BaseRadioCheckboxControl = React.forwardRef<HTMLSpanElement, BaseRadioChec
             : undefined
         }
         _checkedAndDisabledSibling={{
-          borderColor: "colorBorderWeaker",
-          backgroundColor: "colorBackgroundStrong",
+          borderColor: "colorBorderWeak",
+          backgroundColor: "colorBackground",
           color: "colorTextWeaker",
         }}
         _checkedAndInvalidSibling={{
@@ -100,8 +100,8 @@ const BaseRadioCheckboxControl = React.forwardRef<HTMLSpanElement, BaseRadioChec
           backgroundColor: "colorBackgroundErrorStronger",
         }}
         _checkedAndInvalidAndDisabledSibling={{
-          borderColor: "colorBorderWeaker",
-          backgroundColor: "colorBackgroundStrong",
+          borderColor: "colorBorderWeak",
+          backgroundColor: "colorBackground",
           color: "colorTextWeaker",
         }}
         {...props}
diff --git a/packages/paste-core/components/button/src/DestructiveButton.tsx b/packages/paste-core/components/button/src/DestructiveButton.tsx
index c599564e2a..746c5f9e8a 100644
--- a/packages/paste-core/components/button/src/DestructiveButton.tsx
+++ b/packages/paste-core/components/button/src/DestructiveButton.tsx
@@ -30,9 +30,9 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextDestructive",
+  color: "colorTextWeaker",
   backgroundColor: "colorBackgroundBody",
-  boxShadow: "shadowBorderWeak",
+  boxShadow: "shadowBorderWeaker",
 });
 
 const disabledStyles: BoxStyleProps = merge(BaseStyles.disabled, {
diff --git a/packages/paste-core/components/button/src/DestructiveIconButton.tsx b/packages/paste-core/components/button/src/DestructiveIconButton.tsx
index d047a1ca66..e0982670ee 100644
--- a/packages/paste-core/components/button/src/DestructiveIconButton.tsx
+++ b/packages/paste-core/components/button/src/DestructiveIconButton.tsx
@@ -21,7 +21,7 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextDestructive",
+  color: "colorTextWeaker",
 });
 
 const disabledStyles = merge(BaseStyles.disabled, {
diff --git a/packages/paste-core/components/button/src/DestructiveLinkButton.tsx b/packages/paste-core/components/button/src/DestructiveLinkButton.tsx
index 698cb6f4c6..360fa7e45c 100644
--- a/packages/paste-core/components/button/src/DestructiveLinkButton.tsx
+++ b/packages/paste-core/components/button/src/DestructiveLinkButton.tsx
@@ -15,11 +15,11 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextLinkDestructive",
+  color: "colorTextWeaker",
   textAlign: "left",
-  _hover: { color: "colorTextLinkDestructiveStronger" },
-  _active: { color: "colorTextLinkDestructiveStronger" },
-  _focus: { color: "colorTextLinkDestructiveStronger" },
+  _hover: { color: "colorTextWeaker" },
+  _active: { color: "colorTextWeaker" },
+  _focus: { color: "colorTextWeaker" },
 });
 
 const disabledStyles: BoxStyleProps = merge(BaseStyles.disabled, {
@@ -30,6 +30,11 @@ const disabledStyles: BoxStyleProps = merge(BaseStyles.disabled, {
   _focus: { color: "colorTextLinkDestructiveWeak" },
 });
 
+const linkSizeStyles = (size: keyof typeof SizeStyles): BoxStyleProps =>
+  merge(SizeStyles[size], {
+    borderRadius: "borderRadius20",
+  });
+
 const ButtonStyleMapping = {
   default: defaultStyles,
   loading: loadingStyles,
@@ -45,7 +50,7 @@ const DestructiveLinkButton = React.forwardRef<HTMLButtonElement, DirectButtonPr
         width={fullWidth ? "100%" : "auto"}
         {...safelySpreadBoxProps({ as, ...props })}
         {...ButtonStyleMapping[buttonState]}
-        {...SizeStyles[size]}
+        {...linkSizeStyles(size)}
       />
     );
   },
diff --git a/packages/paste-core/components/button/src/DestructiveSecondaryButton.tsx b/packages/paste-core/components/button/src/DestructiveSecondaryButton.tsx
index 6a50ab28d8..8387c903ea 100644
--- a/packages/paste-core/components/button/src/DestructiveSecondaryButton.tsx
+++ b/packages/paste-core/components/button/src/DestructiveSecondaryButton.tsx
@@ -30,9 +30,9 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const baseLoadingStyles: BoxStyleProps = {
-  color: "colorTextDestructive",
+  color: "colorTextWeaker",
   backgroundColor: "colorBackgroundBody",
-  boxShadow: "shadowBorderWeak",
+  boxShadow: "shadowBorderWeaker",
 };
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
diff --git a/packages/paste-core/components/button/src/InverseButton.tsx b/packages/paste-core/components/button/src/InverseButton.tsx
index 4c33592ecd..6b8be46e1b 100644
--- a/packages/paste-core/components/button/src/InverseButton.tsx
+++ b/packages/paste-core/components/button/src/InverseButton.tsx
@@ -30,9 +30,9 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextInverse",
+  color: "colorTextInverseWeakest",
   backgroundColor: "colorBackgroundInverseStrong",
-  boxShadow: "shadowBorderInverseWeaker",
+  boxShadow: "shadowBorderInverseWeakest",
 });
 
 const disabledStyles = merge(BaseStyles.disabled, {
diff --git a/packages/paste-core/components/button/src/InverseLinkButton.tsx b/packages/paste-core/components/button/src/InverseLinkButton.tsx
index d17ab0a93c..7813ef99e0 100644
--- a/packages/paste-core/components/button/src/InverseLinkButton.tsx
+++ b/packages/paste-core/components/button/src/InverseLinkButton.tsx
@@ -16,7 +16,7 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextInverse",
+  color: "colorTextInverseWeakest",
   textAlign: "left",
 });
 
@@ -25,6 +25,11 @@ const disabledStyles: BoxStyleProps = merge(BaseStyles.disabled, {
   textAlign: "left",
 });
 
+const linkSizeStyles = (size: keyof typeof SizeStyles): BoxStyleProps =>
+  merge(SizeStyles[size], {
+    borderRadius: "borderRadius20",
+  });
+
 const ButtonStyleMapping = {
   default: defaultStyles,
   loading: loadingStyles,
@@ -40,7 +45,7 @@ const InverseLinkButton = React.forwardRef<HTMLButtonElement, DirectButtonProps>
         width={fullWidth ? "100%" : "auto"}
         {...safelySpreadBoxProps({ as, ...props })}
         {...ButtonStyleMapping[buttonState]}
-        {...SizeStyles[size]}
+        {...linkSizeStyles(size)}
       />
     );
   },
diff --git a/packages/paste-core/components/button/src/LinkButton.tsx b/packages/paste-core/components/button/src/LinkButton.tsx
index 73b2ba6b28..cd96c68bdb 100644
--- a/packages/paste-core/components/button/src/LinkButton.tsx
+++ b/packages/paste-core/components/button/src/LinkButton.tsx
@@ -15,7 +15,7 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextPrimary",
+  color: "colorTextWeaker",
   textAlign: "left",
 });
 
@@ -24,6 +24,11 @@ const disabledStyles: BoxStyleProps = merge(BaseStyles.disabled, {
   textAlign: "left",
 });
 
+const linkSizeStyles = (size: keyof typeof SizeStyles): BoxStyleProps =>
+  merge(SizeStyles[size], {
+    borderRadius: "borderRadius20",
+  });
+
 const ButtonStyleMapping = {
   default: defaultStyles,
   loading: loadingStyles,
@@ -39,7 +44,7 @@ const LinkButton = React.forwardRef<HTMLButtonElement, DirectButtonProps>(
         width={fullWidth ? "100%" : "auto"}
         {...safelySpreadBoxProps({ as, ...props })}
         {...ButtonStyleMapping[buttonState]}
-        {...SizeStyles[size]}
+        {...linkSizeStyles(size)}
       />
     );
   },
diff --git a/packages/paste-core/components/button/src/PrimaryButton.tsx b/packages/paste-core/components/button/src/PrimaryButton.tsx
index b4a09b3e0c..ac0233dc2c 100644
--- a/packages/paste-core/components/button/src/PrimaryButton.tsx
+++ b/packages/paste-core/components/button/src/PrimaryButton.tsx
@@ -30,9 +30,9 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextPrimary",
+  color: "colorTextWeaker",
   backgroundColor: "colorBackgroundBody",
-  boxShadow: "shadowBorderWeak",
+  boxShadow: "shadowBorderWeaker",
 });
 
 const disabledStyles = merge(BaseStyles.disabled, {
diff --git a/packages/paste-core/components/button/src/PrimaryIconButton.tsx b/packages/paste-core/components/button/src/PrimaryIconButton.tsx
index 5b32015e20..08d423ea47 100644
--- a/packages/paste-core/components/button/src/PrimaryIconButton.tsx
+++ b/packages/paste-core/components/button/src/PrimaryIconButton.tsx
@@ -21,7 +21,7 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextPrimary",
+  color: "colorTextWeaker",
 });
 
 const disabledStyles = merge(BaseStyles.disabled, {
diff --git a/packages/paste-core/components/button/src/SecondaryButton.tsx b/packages/paste-core/components/button/src/SecondaryButton.tsx
index 8012a4903c..b2818522cb 100644
--- a/packages/paste-core/components/button/src/SecondaryButton.tsx
+++ b/packages/paste-core/components/button/src/SecondaryButton.tsx
@@ -30,9 +30,9 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const baseLoadingStyles: BoxStyleProps = {
-  color: "colorTextPrimary",
+  color: "colorTextWeaker",
   backgroundColor: "colorBackgroundBody",
-  boxShadow: "shadowBorderWeak",
+  boxShadow: "shadowBorderWeaker",
 };
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
diff --git a/packages/paste-core/components/button/src/SecondaryIconButton.tsx b/packages/paste-core/components/button/src/SecondaryIconButton.tsx
index 56c92f2c36..536fdbc836 100644
--- a/packages/paste-core/components/button/src/SecondaryIconButton.tsx
+++ b/packages/paste-core/components/button/src/SecondaryIconButton.tsx
@@ -21,7 +21,7 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 });
 
 const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
-  color: "colorTextPrimary",
+  color: "colorTextWeaker",
 });
 
 const disabledStyles = merge(BaseStyles.disabled, {
diff --git a/packages/paste-core/components/button/src/styles.ts b/packages/paste-core/components/button/src/styles.ts
index ed8a628e65..2e1669aab0 100644
--- a/packages/paste-core/components/button/src/styles.ts
+++ b/packages/paste-core/components/button/src/styles.ts
@@ -44,7 +44,7 @@ export const SizeStyles: { [key in ButtonSizes]: BoxStyleProps } = {
     paddingBottom: "space30",
     paddingLeft: "space40",
     paddingRight: "space40",
-    borderRadius: "borderRadius20",
+    borderRadius: "borderRadius30",
     fontSize: "fontSize30",
     lineHeight: "lineHeight20",
   },
@@ -53,17 +53,17 @@ export const SizeStyles: { [key in ButtonSizes]: BoxStyleProps } = {
     paddingBottom: "space20",
     paddingLeft: "space30",
     paddingRight: "space30",
-    borderRadius: "borderRadius10",
+    borderRadius: "borderRadius30",
     fontSize: "fontSize30",
     lineHeight: "lineHeight20",
   },
   icon: {
     padding: "space30",
-    borderRadius: "borderRadius20",
+    borderRadius: "borderRadius30",
   },
   icon_small: {
     padding: "space20",
-    borderRadius: "borderRadius20",
+    borderRadius: "borderRadius30",
   },
   reset: {
     paddingTop: "space0",
diff --git a/packages/paste-core/components/card/__test__/card.test.tsx b/packages/paste-core/components/card/__test__/card.test.tsx
index 8f1ae4bf83..ee9176e182 100644
--- a/packages/paste-core/components/card/__test__/card.test.tsx
+++ b/packages/paste-core/components/card/__test__/card.test.tsx
@@ -78,7 +78,7 @@ describe("Customization", () => {
     );
     const renderedCard = screen.getByTestId("customizable-card");
     expect(renderedCard).toHaveStyleRule("background-color", "rgb(244, 244, 246)");
-    expect(renderedCard).toHaveStyleRule("border-color", "rgb(214, 31, 31)");
+    expect(renderedCard).toHaveStyleRule("border-color", "rgb(219, 19, 42)");
   });
 
   it("should add custom styles to Card with a custom element data attribute", (): void => {
@@ -94,6 +94,6 @@ describe("Customization", () => {
     );
     const renderedCard = screen.getByTestId("customizable-card");
     expect(renderedCard).toHaveStyleRule("background-color", "rgb(244, 244, 246)");
-    expect(renderedCard).toHaveStyleRule("border-color", "rgb(214, 31, 31)");
+    expect(renderedCard).toHaveStyleRule("border-color", "rgb(219, 19, 42)");
   });
 });
diff --git a/packages/paste-core/components/checkbox/src/Checkbox.tsx b/packages/paste-core/components/checkbox/src/Checkbox.tsx
index 69eb55a8c5..e3b6cdad41 100644
--- a/packages/paste-core/components/checkbox/src/Checkbox.tsx
+++ b/packages/paste-core/components/checkbox/src/Checkbox.tsx
@@ -21,7 +21,7 @@ const selectAllStyleProps = {
   paddingRight: "space30",
   paddingBottom: "space20",
   paddingLeft: "space30",
-  borderRadius: "borderRadius10",
+  borderRadius: "borderRadius20",
   backgroundColor: "colorBackground",
 };
 
diff --git a/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx b/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx
index 4995a412a7..67f9fa7b3e 100644
--- a/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx
+++ b/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx
@@ -1,7 +1,7 @@
 import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
 import type { BoxProps, BoxStyleProps } from "@twilio-paste/box";
 import { SelectedIcon } from "@twilio-paste/icons/esm/SelectedIcon";
-import type { PositionOptions } from "@twilio-paste/style-props";
+import type { BackgroundColor, PositionOptions } from "@twilio-paste/style-props";
 import { Text } from "@twilio-paste/text";
 import type { HTMLPasteProps } from "@twilio-paste/types";
 import * as React from "react";
@@ -66,10 +66,20 @@ const getVirtualStyles = (startHeight: number): Record<string, unknown> => ({
   position: "absolute" as PositionOptions,
   top: 0,
   left: 0,
-  width: "100%",
+  width: "fill-available",
   transform: `translateY(${startHeight}px)`,
 });
 
+function getBackgroundColor(highlightedProp?: boolean, selectedProp?: boolean): BackgroundColor {
+  if (highlightedProp && selectedProp) {
+    return "colorBackgroundWeak";
+  }
+  if (highlightedProp || selectedProp) {
+    return "colorBackgroundBodyElevationPrimary";
+  }
+  return "colorBackgroundWeaker";
+}
+
 const ComboboxListboxOption = React.forwardRef<HTMLLIElement, ComboboxListboxOptionProps>(
   (
     {
@@ -99,49 +109,35 @@ const ComboboxListboxOption = React.forwardRef<HTMLLIElement, ComboboxListboxOpt
         as="li"
         position="relative"
         element={`${element}_LIST_ITEM`}
-        backgroundColor={highlighted ? "colorBackgroundPrimaryWeakest" : "colorBackgroundWeaker"}
-        color={
-          highlighted
-            ? "colorTextPrimary"
-            : // eslint-disable-next-line unicorn/no-nested-ternary
-            selected
-            ? "colorTextPrimary"
-            : "colorText"
-        }
-        display="flex"
-        justifyContent="space-between"
-        alignItems="center"
-        paddingY="space40"
+        color={highlighted ? "colorTextPrimary" : "colorText"}
         cursor={disabled ? "not-allowed" : "pointer"}
         ref={ref}
-        transition="background-color 150ms ease, color 150ms ease"
-        borderBottomWidth="borderWidth10"
-        borderBottomColor="colorBorderWeaker"
-        borderBottomStyle="solid"
         opacity={disabled ? 0.3 : 1}
-        _before={{
-          content: `""`,
-          position: "absolute",
-          top: 0,
-          bottom: 0,
-          left: 0,
-          borderLeftWidth: "borderWidth20",
-          borderLeftColor: highlighted ? "colorBorderPrimary" : "transparent",
-          borderLeftStyle: "solid",
-        }}
-        _last={{
-          borderBottomColor: "transparent",
-        }}
         {...virtualItemStyles}
-        {...VariantStyles[variant]}
       >
-        <Box as="span">
-          <Text as="span" color="inherit" element={`${element}_LIST_ITEM_TEXT`}>
-            {children}
-          </Text>
-        </Box>
-        <Box as="span" hidden={!selected}>
-          <SelectedIcon decorative color="inherit" />
+        {/* extra box to add proper margin since li is based on absolute positioning */}
+        <Box
+          as="span"
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          marginY="space10"
+          marginX="space20"
+          borderRadius="borderRadius30"
+          backgroundColor={getBackgroundColor(highlighted, selected)}
+          paddingY="space40"
+          transition="background-color 150ms ease, color 150ms ease"
+          {...VariantStyles[variant]}
+        >
+          <Box as="span">
+            <Text as="span" color="inherit" element={`${element}_LIST_ITEM_TEXT`}>
+              {children}
+            </Text>
+          </Box>
+
+          <Box as="span" hidden={!selected}>
+            <SelectedIcon decorative color={highlighted && selected ? "colorTextIcon" : "colorTextPrimary"} />
+          </Box>
         </Box>
       </Box>
     );
diff --git a/packages/paste-core/components/combobox/stories/Combobox.stories.tsx b/packages/paste-core/components/combobox/stories/Combobox.stories.tsx
index 7338ec5e78..c89637c891 100644
--- a/packages/paste-core/components/combobox/stories/Combobox.stories.tsx
+++ b/packages/paste-core/components/combobox/stories/Combobox.stories.tsx
@@ -484,7 +484,7 @@ export const ComboboxDisabledInsertBeforeAndAfterInverse: StoryFn = () => {
       <Combobox
         items={items}
         insertBefore={
-          <Text as="span" color="colorTextInverseWeak" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
+          <Text as="span" color="colorTextInverseWeaker" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
             $10.99
           </Text>
         }
diff --git a/packages/paste-core/components/file-picker/src/FilePicker.tsx b/packages/paste-core/components/file-picker/src/FilePicker.tsx
index 09edb2818d..052c6b6f3e 100644
--- a/packages/paste-core/components/file-picker/src/FilePicker.tsx
+++ b/packages/paste-core/components/file-picker/src/FilePicker.tsx
@@ -127,12 +127,12 @@ const FilePicker = React.forwardRef<HTMLInputElement, FilePickerProps>(
             justifyContent="start"
             as="span"
             type="file"
-            borderRadius="borderRadius30"
+            borderRadius="borderRadius40"
             padding="space20"
             boxShadow="shadowBorder"
             backgroundColor="colorBackgroundBody"
             _focusSibling={{
-              borderRadius: "borderRadius30",
+              borderRadius: "borderRadius40",
               padding: "space20",
               boxShadow: "shadowFocus",
               backgroundColor: "colorBackgroundBody",
diff --git a/packages/paste-core/components/file-uploader/src/FileUploaderDropzone.tsx b/packages/paste-core/components/file-uploader/src/FileUploaderDropzone.tsx
index 8aa61e14bb..42d9e6ad84 100644
--- a/packages/paste-core/components/file-uploader/src/FileUploaderDropzone.tsx
+++ b/packages/paste-core/components/file-uploader/src/FileUploaderDropzone.tsx
@@ -87,7 +87,7 @@ const baseStyles: BoxStyleProps = {
 };
 
 const disabledStyles: BoxStyleProps = {
-  backgroundColor: "colorBackgroundStrong",
+  backgroundColor: "colorBackground",
   borderStyle: "solid",
   borderColor: "colorBorderWeaker",
   cursor: "not-allowed",
diff --git a/packages/paste-core/components/input-box/src/FauxInput/DefaultFauxInput.tsx b/packages/paste-core/components/input-box/src/FauxInput/DefaultFauxInput.tsx
index e859af0bee..0c11c618ec 100644
--- a/packages/paste-core/components/input-box/src/FauxInput/DefaultFauxInput.tsx
+++ b/packages/paste-core/components/input-box/src/FauxInput/DefaultFauxInput.tsx
@@ -36,7 +36,7 @@ const DefaultFauxInput = React.forwardRef<HTMLDivElement, React.PropsWithChildre
         width="100%"
         backgroundColor={backgroundColor}
         boxShadow={boxShadow}
-        borderRadius="borderRadius20"
+        borderRadius="borderRadius30"
         transition="box-shadow 100ms ease-in"
         cursor={disabled ? "not-allowed" : "text"}
         variant={variant}
diff --git a/packages/paste-core/components/input-box/src/FauxInput/InverseFauxInput.tsx b/packages/paste-core/components/input-box/src/FauxInput/InverseFauxInput.tsx
index 17042dbd77..873db8209e 100644
--- a/packages/paste-core/components/input-box/src/FauxInput/InverseFauxInput.tsx
+++ b/packages/paste-core/components/input-box/src/FauxInput/InverseFauxInput.tsx
@@ -32,7 +32,7 @@ const InverseFauxInput = React.forwardRef<HTMLDivElement, FauxInputProps>(
         width="100%"
         backgroundColor={backgroundColor}
         boxShadow={boxShadow}
-        borderRadius="borderRadius20"
+        borderRadius="borderRadius30"
         color="colorTextInverse"
         transition="box-shadow 100ms ease-in"
         cursor={disabled ? "not-allowed" : "text"}
diff --git a/packages/paste-core/components/input-box/src/Prefix.tsx b/packages/paste-core/components/input-box/src/Prefix.tsx
index dc6cea6e9e..653fbf80aa 100644
--- a/packages/paste-core/components/input-box/src/Prefix.tsx
+++ b/packages/paste-core/components/input-box/src/Prefix.tsx
@@ -33,8 +33,8 @@ const Prefix = React.forwardRef<HTMLDivElement, PrefixProps>(
       <Box
         alignItems="flex-start"
         backgroundColor={backgroundColor}
-        borderBottomLeftRadius="borderRadius20"
-        borderTopLeftRadius="borderRadius20"
+        borderBottomLeftRadius="borderRadius30"
+        borderTopLeftRadius="borderRadius30"
         display="flex"
         element={`${element}_PREFIX`}
         lineHeight="lineHeight20"
diff --git a/packages/paste-core/components/input-box/src/Suffix.tsx b/packages/paste-core/components/input-box/src/Suffix.tsx
index 277bd4e661..07da79eb0a 100644
--- a/packages/paste-core/components/input-box/src/Suffix.tsx
+++ b/packages/paste-core/components/input-box/src/Suffix.tsx
@@ -33,8 +33,8 @@ const Suffix = React.forwardRef<HTMLDivElement, SuffixProps>(
       <Box
         alignItems="flex-start"
         backgroundColor={backgroundColor}
-        borderBottomRightRadius="borderRadius20"
-        borderTopRightRadius="borderRadius20"
+        borderBottomRightRadius="borderRadius30"
+        borderTopRightRadius="borderRadius30"
         display="flex"
         element={`${element}_SUFFIX`}
         lineHeight="lineHeight20"
diff --git a/packages/paste-core/components/input/__tests__/input.test.tsx b/packages/paste-core/components/input/__tests__/input.test.tsx
index 5dcd8a8952..08661aff79 100644
--- a/packages/paste-core/components/input/__tests__/input.test.tsx
+++ b/packages/paste-core/components/input/__tests__/input.test.tsx
@@ -346,7 +346,7 @@ describe("Customization", () => {
     expect(renderedInputPrefix).toHaveStyleRule("background-color", "rgb(0, 20, 137)");
     expect(renderedInputSuffix).toHaveStyleRule("background-color", "rgb(0, 20, 137)");
     expect(renderedIncrement).toHaveStyleRule("background-color", "rgb(245, 240, 252)");
-    expect(renderedDecrement).toHaveStyleRule("background-color", "rgb(214, 31, 31)");
+    expect(renderedDecrement).toHaveStyleRule("background-color", "rgb(219, 19, 42)");
   });
 
   it("should add custom styles to Input with a custom element data attribute", (): void => {
@@ -388,7 +388,7 @@ describe("Customization", () => {
     expect(renderedInputPrefix).toHaveStyleRule("background-color", "rgb(244, 244, 246)");
     expect(renderedInputSuffix).toHaveStyleRule("background-color", "rgb(244, 244, 246)");
     expect(renderedIncrement).toHaveStyleRule("background-color", "rgb(245, 240, 252)");
-    expect(renderedDecrement).toHaveStyleRule("background-color", "rgb(214, 31, 31)");
+    expect(renderedDecrement).toHaveStyleRule("background-color", "rgb(219, 19, 42)");
   });
 
   it("should add custom styles to a Input variant with a custom element data attribute", (): void => {
diff --git a/packages/paste-core/components/input/stories/input.stories.tsx b/packages/paste-core/components/input/stories/input.stories.tsx
index cbe1bcbe89..db04a4ea22 100644
--- a/packages/paste-core/components/input/stories/input.stories.tsx
+++ b/packages/paste-core/components/input/stories/input.stories.tsx
@@ -587,7 +587,7 @@ export const InputDisabledInsertBeforeAndAfterInverse = (): React.ReactNode => {
         onBlur={action("handleBlur")}
         variant="inverse"
         insertBefore={
-          <Text as="span" color="colorTextInverseWeak" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
+          <Text as="span" color="colorTextInverseWeaker" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
             $10.99
           </Text>
         }
diff --git a/packages/paste-core/components/label/package.json b/packages/paste-core/components/label/package.json
index 42f6a478d2..cafcd6a351 100644
--- a/packages/paste-core/components/label/package.json
+++ b/packages/paste-core/components/label/package.json
@@ -35,6 +35,7 @@
     "@twilio-paste/screen-reader-only": "^14.0.0",
     "@twilio-paste/style-props": "^10.0.0",
     "@twilio-paste/styling-library": "^4.0.0",
+    "@twilio-paste/text": "^11.0.1",
     "@twilio-paste/theme": "^12.0.0",
     "@twilio-paste/types": "^7.0.0",
     "@twilio-paste/uid-library": "^3.0.0",
@@ -54,6 +55,7 @@
     "@twilio-paste/screen-reader-only": "^14.0.1",
     "@twilio-paste/style-props": "^10.0.1",
     "@twilio-paste/styling-library": "^4.0.1",
+    "@twilio-paste/text": "^11.0.1",
     "@twilio-paste/theme": "^12.0.1",
     "@twilio-paste/types": "^7.0.1",
     "@twilio-paste/uid-library": "^3.0.1",
diff --git a/packages/paste-core/components/label/src/Label.tsx b/packages/paste-core/components/label/src/Label.tsx
index 08dc46676c..42299005af 100644
--- a/packages/paste-core/components/label/src/Label.tsx
+++ b/packages/paste-core/components/label/src/Label.tsx
@@ -2,6 +2,7 @@ import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
 import type { BoxProps } from "@twilio-paste/box";
 import { MediaBody, MediaFigure, MediaObject } from "@twilio-paste/media-object";
 import type { TextColor } from "@twilio-paste/style-props";
+import { Text } from "@twilio-paste/text";
 import type { HTMLPasteProps } from "@twilio-paste/types";
 import * as React from "react";
 
@@ -31,6 +32,13 @@ type LabelBaseProps = {
    * @memberof LabelBaseProps
    */
   required?: boolean;
+  /**
+   * Shows the input is optional.
+   *
+   * @type {boolean}
+   * @memberof LabelBaseProps
+   */
+  optional?: boolean;
   /**
    *
    * @type {LabelVariants}
@@ -44,6 +52,13 @@ type LabelBaseProps = {
    * @memberof LabelBaseProps
    */
   i18nRequiredLabel?: string;
+  /**
+   * Label text for the optional label.
+   *
+   * @type {string}
+   * @memberof LabelBaseProps
+   */
+  i18nOptionalLabel?: string;
   /**
    * Overrides the default element name to apply unique styles with the Customization Provider
    *
@@ -83,11 +98,13 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
       as = "label",
       marginBottom,
       required,
+      optional,
       disabled,
       children,
       variant,
       element = "LABEL",
       i18nRequiredLabel = "",
+      i18nOptionalLabel = "(optional)",
       ...props
     },
     ref,
@@ -124,7 +141,7 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
         textTransform="none"
         element={element}
         fontSize="fontSize30"
-        fontWeight="fontWeightSemibold"
+        fontWeight="fontWeightMedium"
         lineHeight="lineHeight30"
         color={textColor}
         cursor={cursor}
@@ -136,7 +153,20 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
               <RequiredDot element={`${element}_REQUIRED_DOT`} i18nLabel={i18nRequiredLabel} />
             </MediaFigure>
           )}
-          <MediaBody>{children}</MediaBody>
+          <MediaBody>
+            {children}
+            {optional && (
+              <Text
+                as="span"
+                fontStyle="italic"
+                color={variant === "inverse" ? "colorTextInverseWeaker" : "colorTextWeak"}
+                element={`${element}_OPTIONAL_TEXT`}
+                marginLeft="space20"
+              >
+                {i18nOptionalLabel}
+              </Text>
+            )}
+          </MediaBody>
         </MediaObject>
       </Box>
     );
diff --git a/packages/paste-core/components/label/src/RequiredDot.tsx b/packages/paste-core/components/label/src/RequiredDot.tsx
index acb467e725..0b3b8f3793 100644
--- a/packages/paste-core/components/label/src/RequiredDot.tsx
+++ b/packages/paste-core/components/label/src/RequiredDot.tsx
@@ -40,6 +40,7 @@ export const RequiredDot: React.FC<React.PropsWithChildren<RequiredDotProps>> =
         display="block"
         height="4px"
         width="4px"
+        position="relative"
         element={element}
       >
         <ScreenReaderOnly>{i18nLabel}</ScreenReaderOnly>
diff --git a/packages/paste-core/components/label/stories/label.stories.tsx b/packages/paste-core/components/label/stories/label.stories.tsx
index 3c8d577f8e..9f3ac06b32 100644
--- a/packages/paste-core/components/label/stories/label.stories.tsx
+++ b/packages/paste-core/components/label/stories/label.stories.tsx
@@ -22,6 +22,9 @@ export const Default = (): React.ReactNode => {
       <Label htmlFor="label" required>
         Required Label
       </Label>
+      <Label htmlFor="label" optional>
+        Optional Label
+      </Label>
     </>
   );
 };
@@ -35,6 +38,9 @@ export const Disabled = (): React.ReactNode => {
       <Label htmlFor="label" required disabled>
         Required Label
       </Label>
+      <Label htmlFor="label" optional disabled>
+        Optional Label
+      </Label>
     </>
   );
 };
@@ -48,6 +54,9 @@ export const Inverse = (): React.ReactNode => {
       <Label htmlFor="label" required variant="inverse">
         Required Label
       </Label>
+      <Label htmlFor="label" optional variant="inverse">
+        Optional Label
+      </Label>
     </Box>
   );
 };
@@ -78,6 +87,9 @@ export const Customized: Story = () => {
           <Box display="flex" alignContent="start">
             <RequiredDot />
           </Box>
+          <Label optional htmlFor="optional_label">
+            Optional label
+          </Label>
         </Card>
       </Box>
       <Box marginBottom="space70">
@@ -100,6 +112,9 @@ export const Customized: Story = () => {
             <Box display="flex" alignContent="start">
               <RequiredDot data-testid="required_dot" />
             </Box>
+            <Label optional htmlFor="optional_label">
+              Optional label
+            </Label>
           </CustomizationProvider>
         </Card>
       </Box>
@@ -114,6 +129,7 @@ export const Customized: Story = () => {
               FOO_REQUIRED_DOT: { backgroundColor: "colorBackgroundDestructiveStrong" },
               BAR: { backgroundColor: "colorBackgroundDestructiveStrong" },
               BAR_WRAPPER: { cursor: "help" },
+              TAR_OPTIONAL_TEXT: { fontStyle: "normal", color: "colorTextWarningStrong" },
             }}
           >
             <Label htmlFor="label" element="FOO">
@@ -125,6 +141,9 @@ export const Customized: Story = () => {
             <Box display="flex" alignContent="start">
               <RequiredDot data-testid="custom_required_dot" element="BAR" />
             </Box>
+            <Label optional htmlFor="optional_label" element="TAR">
+              Optional label
+            </Label>
           </CustomizationProvider>
         </Card>
       </Box>
diff --git a/packages/paste-core/components/label/type-docs.json b/packages/paste-core/components/label/type-docs.json
index 7ef413585f..9db72a36e8 100644
--- a/packages/paste-core/components/label/type-docs.json
+++ b/packages/paste-core/components/label/type-docs.json
@@ -499,6 +499,13 @@
       "externalProp": true,
       "description": "You must specify the 'htmlFor' prop to associate the label with an input.\n\n\nYou cannot apply htmlFor to a legend element.\n\n\nYou cannot apply htmlFor to a div element."
     },
+    "i18nOptionalLabel": {
+      "type": "string",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": false,
+      "description": "Label text for the optional label."
+    },
     "i18nRequiredLabel": {
       "type": "string",
       "defaultValue": null,
@@ -1601,6 +1608,13 @@
       "required": false,
       "externalProp": true
     },
+    "optional": {
+      "type": "boolean",
+      "defaultValue": null,
+      "required": false,
+      "externalProp": false,
+      "description": "Shows the input is optional."
+    },
     "popover": {
       "type": "\"\" | \"auto\" | \"manual\"",
       "defaultValue": null,
diff --git a/packages/paste-core/components/menu/src/MenuItem.styles.tsx b/packages/paste-core/components/menu/src/MenuItem.styles.tsx
index 9785dfe745..cb5fba3843 100644
--- a/packages/paste-core/components/menu/src/MenuItem.styles.tsx
+++ b/packages/paste-core/components/menu/src/MenuItem.styles.tsx
@@ -12,24 +12,24 @@ const baseVariantStyles: MenuItemVariantStyles = {
     color: "colorText",
     _hover: {
       color: "colorTextPrimary",
-      backgroundColor: "colorBackgroundPrimaryWeakest",
-      borderColor: "colorBorderPrimary",
+      backgroundColor: "colorBackgroundBodyElevationPrimary",
     },
     _focus: {
       color: "colorTextPrimary",
-      backgroundColor: "colorBackgroundPrimaryWeakest",
-      borderColor: "colorBorderPrimary",
+      backgroundColor: "colorBackgroundBodyElevationPrimary",
+    },
+    _checked: {
+      backgroundColor: "colorBackgroundBodyElevationPrimary",
+      color: "colorText",
     },
   },
   [MenuItemVariants.DESTRUCTIVE]: {
     color: "colorTextDestructive",
     _hover: {
       backgroundColor: "colorBackgroundDestructiveWeakest",
-      borderColor: "colorBorderDestructive",
     },
     _focus: {
       backgroundColor: "colorBackgroundDestructiveWeakest",
-      borderColor: "colorBorderDestructive",
     },
   },
 };
@@ -90,16 +90,24 @@ export const StyledMenuItem = React.forwardRef<HTMLDivElement | HTMLAnchorElemen
         fontSize="fontSize30"
         fontWeight="fontWeightNormal"
         lineHeight="lineHeight30"
-        margin="space0"
         outline="none"
         paddingY="space30"
-        borderLeftStyle="solid"
-        borderLeftWidth="borderWidth20"
-        borderColor="transparent"
+        borderRadius="borderRadius30"
+        marginY="space10"
+        marginX="space20"
         cursor="pointer"
         paddingX="space70"
-        width="100%"
+        width="fill-available"
         {...variantStyles[variant]}
+        _checked_hover={
+          {
+            backgroundColor: "colorBackgroundWeak",
+            color: variant === MenuItemVariants.DESTRUCTIVE ? "colorTextDestructive" : "colorTextPrimary",
+            "& [data-paste-element='ICON']": {
+              color: "colorTextIcon",
+            },
+          } as BoxProps["_checked_hover"]
+        }
         _disabled={{
           color: "colorTextWeaker",
           cursor: "not-allowed",
diff --git a/packages/paste-core/components/select/src/Select.tsx b/packages/paste-core/components/select/src/Select.tsx
index 46fc42e505..9962951db4 100644
--- a/packages/paste-core/components/select/src/Select.tsx
+++ b/packages/paste-core/components/select/src/Select.tsx
@@ -91,7 +91,7 @@ export const SelectElement = React.forwardRef<HTMLSelectElement, SelectProps>(
         // must set a solid color to inherit in options for Windows
         backgroundColor={variant === "inverse" ? "colorBackgroundInverse" : "colorBackgroundBody"}
         border="none"
-        borderRadius="borderRadius20"
+        borderRadius="borderRadius30"
         boxShadow="none"
         color="inherit"
         cursor="pointer"
diff --git a/packages/paste-core/components/select/stories/select.stories.tsx b/packages/paste-core/components/select/stories/select.stories.tsx
index 57fe29ef98..cebf1d5c48 100644
--- a/packages/paste-core/components/select/stories/select.stories.tsx
+++ b/packages/paste-core/components/select/stories/select.stories.tsx
@@ -430,7 +430,7 @@ export const SelectDisabedInsertBeforeAndAfterInverse = (): React.ReactNode => {
         onFocus={action("handleFocus")}
         onBlur={action("handleBlur")}
         insertBefore={
-          <Text as="span" color="colorTextInverseWeak" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
+          <Text as="span" color="colorTextInverseWeaker" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
             $10.99
           </Text>
         }
diff --git a/packages/paste-core/components/textarea/__tests__/textarea.test.tsx b/packages/paste-core/components/textarea/__tests__/textarea.test.tsx
index ab3992655c..d41fae4dd4 100644
--- a/packages/paste-core/components/textarea/__tests__/textarea.test.tsx
+++ b/packages/paste-core/components/textarea/__tests__/textarea.test.tsx
@@ -151,10 +151,10 @@ describe("Textarea customization", () => {
     const renderedTextAreaElement = container.querySelector('[data-paste-element="TEXTAREA_VARIANT_ELEMENT"]');
     const renderedTextAreaPrefix = container.querySelector('[data-paste-element="TEXTAREA_VARIANT_PREFIX"]');
     const renderedTextAreaSuffix = container.querySelector('[data-paste-element="TEXTAREA_VARIANT_SUFFIX"]');
-    expect(renderedTextArea).toHaveStyleRule("background-color", "rgb(254, 236, 236)");
-    expect(renderedTextAreaElement).toHaveStyleRule("background-color", "rgb(254, 236, 236)");
-    expect(renderedTextAreaPrefix).toHaveStyleRule("background-color", "rgb(254, 236, 236)");
-    expect(renderedTextAreaSuffix).toHaveStyleRule("background-color", "rgb(254, 236, 236)");
+    expect(renderedTextArea).toHaveStyleRule("background-color", "rgb(254, 245, 245)");
+    expect(renderedTextAreaElement).toHaveStyleRule("background-color", "rgb(254, 245, 245)");
+    expect(renderedTextAreaPrefix).toHaveStyleRule("background-color", "rgb(254, 245, 245)");
+    expect(renderedTextAreaSuffix).toHaveStyleRule("background-color", "rgb(254, 245, 245)");
   });
 
   it("should set custom CSS for custom textarea", () => {
@@ -163,10 +163,10 @@ describe("Textarea customization", () => {
     const renderedTextAreaElement = container.querySelector('[data-paste-element="NEW_TEXTAREA_ELEMENT"]');
     const renderedTextAreaPrefix = container.querySelector('[data-paste-element="NEW_TEXTAREA_PREFIX"]');
     const renderedTextAreaSuffix = container.querySelector('[data-paste-element="NEW_TEXTAREA_SUFFIX"]');
-    expect(renderedTextArea).toHaveStyleRule("background-color", "rgb(254, 236, 236)");
-    expect(renderedTextAreaElement).toHaveStyleRule("color", "rgb(214, 31, 31)");
+    expect(renderedTextArea).toHaveStyleRule("background-color", "rgb(254, 245, 245)");
+    expect(renderedTextAreaElement).toHaveStyleRule("color", "rgb(219, 19, 42)");
     expect(renderedTextAreaPrefix).toHaveStyleRule("padding", "1.5rem");
-    expect(renderedTextAreaSuffix).toHaveStyleRule("border-left-color", "rgb(214, 31, 31)");
+    expect(renderedTextAreaSuffix).toHaveStyleRule("border-left-color", "rgb(219, 19, 42)");
   });
 
   it("should set custom CSS for custom textarea variant", () => {
diff --git a/packages/paste-core/components/textarea/src/TextArea.tsx b/packages/paste-core/components/textarea/src/TextArea.tsx
index 9aedf968f9..16005c24ce 100644
--- a/packages/paste-core/components/textarea/src/TextArea.tsx
+++ b/packages/paste-core/components/textarea/src/TextArea.tsx
@@ -142,7 +142,7 @@ const TextAreaElement = styled(TextareaAutosize)<TextAreaProps>(
       appearance: "none",
       background: "transparent",
       border: "none",
-      borderRadius: "borderRadius20",
+      borderRadius: "borderRadius30",
       boxShadow: "none",
       color: "inherit",
       display: "block",
diff --git a/packages/paste-core/components/textarea/stories/textarea.stories.tsx b/packages/paste-core/components/textarea/stories/textarea.stories.tsx
index b6129f6e4e..fab21edb77 100644
--- a/packages/paste-core/components/textarea/stories/textarea.stories.tsx
+++ b/packages/paste-core/components/textarea/stories/textarea.stories.tsx
@@ -478,7 +478,7 @@ export const TextareaDisabledInsertBeforeAndAfterInverse = (): React.ReactNode =
         onFocus={action("handleFocus")}
         onBlur={action("handleBlur")}
         insertBefore={
-          <Text as="span" color="colorTextInverseWeak" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
+          <Text as="span" color="colorTextInverseWeaker" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
             $10.99
           </Text>
         }
diff --git a/packages/paste-core/components/visual-picker/src/VisualPickerCheckbox.tsx b/packages/paste-core/components/visual-picker/src/VisualPickerCheckbox.tsx
index 05e4a4d1d8..e01617a84b 100644
--- a/packages/paste-core/components/visual-picker/src/VisualPickerCheckbox.tsx
+++ b/packages/paste-core/components/visual-picker/src/VisualPickerCheckbox.tsx
@@ -75,7 +75,7 @@ export const VisualPickerCheckbox = React.forwardRef<HTMLInputElement, VisualPic
         flexDirection="row"
         height="100%"
         width="100%"
-        backgroundColor={disabled || groupIsDisabled ? "colorBackgroundWeak" : undefined}
+        backgroundColor={disabled || groupIsDisabled ? "colorBackground" : undefined}
         borderStyle="solid"
         borderColor={pickerBorderColor}
         borderWidth="borderWidth10"
diff --git a/packages/paste-core/components/visual-picker/src/VisualPickerRadio.tsx b/packages/paste-core/components/visual-picker/src/VisualPickerRadio.tsx
index 907984ed35..9a3c9f940a 100644
--- a/packages/paste-core/components/visual-picker/src/VisualPickerRadio.tsx
+++ b/packages/paste-core/components/visual-picker/src/VisualPickerRadio.tsx
@@ -91,7 +91,7 @@ export const VisualPickerRadio = React.forwardRef<HTMLInputElement, VisualPicker
         flexDirection="row"
         height="100%"
         width="100%"
-        backgroundColor={disabled || groupIsDisabled ? "colorBackgroundWeak" : undefined}
+        backgroundColor={disabled || groupIsDisabled ? "colorBackground" : undefined}
         borderStyle="solid"
         borderColor={pickerBorderColor}
         borderWidth="borderWidth10"
diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json
index 2f0dc2313e..270be1becf 100644
--- a/packages/paste-core/primitives/box/type-docs.json
+++ b/packages/paste-core/primitives/box/type-docs.json
@@ -767,7 +767,7 @@
       "description": "Responsive prop for the CSS `background-attachment` property"
     },
     "backgroundColor": {
-      "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 66 more ... | { ...; }",
+      "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyElevationPrimary\" | \"colorBackgroundBodyInverse\" | ... 67 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
diff --git a/packages/paste-core/primitives/sibling-box/type-docs.json b/packages/paste-core/primitives/sibling-box/type-docs.json
index 667e1aa1d8..791c96521e 100644
--- a/packages/paste-core/primitives/sibling-box/type-docs.json
+++ b/packages/paste-core/primitives/sibling-box/type-docs.json
@@ -869,7 +869,7 @@
       "description": "Responsive prop for the CSS `background-attachment` property"
     },
     "backgroundColor": {
-      "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 66 more ... | { ...; }",
+      "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyElevationPrimary\" | \"colorBackgroundBodyInverse\" | ... 67 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
index 6a1c825964..db69f7a88d 100644
--- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Design Tokens matches the Dark theme 1`] = `
 "{
   \\"color-background-user\\": \\"rgb(34, 9, 74)\\",
-  \\"color-background-notification\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-notification\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-trial\\": \\"rgb(5, 41, 18)\\",
   \\"color-background-subaccount\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-primary-stronger\\": \\"rgb(204, 228, 255)\\",
@@ -11,23 +11,23 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-primary-weaker\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-destructive-weaker\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-inverse-stronger-elevation\\": \\"rgb(64, 79, 110)\\",
-  \\"color-background-body-elevation\\": \\"rgb(25, 39, 62)\\",
+  \\"color-background-body-elevation\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-warning\\": \\"rgb(244, 124, 34)\\",
-  \\"color-background-elevation\\": \\"rgb(25, 39, 62)\\",
+  \\"color-background-elevation\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-warning-weakest\\": \\"rgb(64, 19, 15)\\",
   \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-new\\": \\"rgb(56, 14, 120)\\",
   \\"color-background-inverse-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new-weakest\\": \\"rgb(18, 28, 45)\\",
-  \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
-  \\"color-background-weak\\": \\"rgb(18, 28, 45)\\",
+  \\"color-background-destructive\\": \\"rgb(219, 19, 42)\\",
+  \\"color-background-weak\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-primary\\": \\"rgb(2, 99, 224)\\",
   \\"color-background-primary-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-busy\\": \\"rgb(244, 124, 34)\\",
   \\"color-background-success\\": \\"rgb(20, 176, 83)\\",
   \\"color-background-destructive-weakest\\": \\"rgb(18, 28, 45)\\",
-  \\"color-background-offline\\": \\"rgb(174, 178, 193)\\",
+  \\"color-background-offline\\": \\"rgb(139, 147, 170)\\",
   \\"color-background-row-striped\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-primary-strongest\\": \\"rgb(235, 244, 255)\\",
   \\"color-background-success-weakest\\": \\"rgb(5, 41, 18)\\",
@@ -35,11 +35,11 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-error-strong\\": \\"rgb(245, 138, 138)\\",
   \\"color-background-brand-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-brand\\": \\"rgb(18, 28, 45)\\",
-  \\"color-background-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-neutral-weakest\\": \\"rgb(3, 11, 93)\\",
   \\"color-background-available\\": \\"rgb(20, 176, 83)\\",
   \\"color-background-error-weakest\\": \\"rgb(49, 12, 12)\\",
-  \\"color-background-required\\": \\"rgb(235, 86, 86)\\",
+  \\"color-background-required\\": \\"rgb(236, 91, 91)\\",
   \\"color-background-error-strongest\\": \\"rgb(254, 236, 236)\\",
   \\"color-background-decorative-40-weakest\\": \\"rgb(56, 14, 120)\\",
   \\"color-background-inverse-stronger\\": \\"rgb(57, 71, 98)\\",
@@ -50,7 +50,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-destructive-strong\\": \\"rgb(246, 177, 177)\\",
   \\"color-background-destructive-weak\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-decorative-10-weakest\\": \\"rgb(18, 28, 45)\\",
-  \\"color-background\\": \\"rgb(18, 28, 45)\\",
+  \\"color-background\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-primary-weak\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-weakest\\": \\"rgb(13, 19, 28)\\",
@@ -66,10 +66,11 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
-  \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
-  \\"color-background-strong-elevation\\": \\"rgb(31, 48, 76)\\",
+  \\"color-background-unavailable\\": \\"rgb(219, 19, 42)\\",
+  \\"color-background-strong-elevation\\": \\"rgb(37, 57, 91)\\",
+  \\"color-background-body-elevation-primary\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
-  \\"color-background-weak-elevation\\": \\"rgb(18, 28, 45)\\",
+  \\"color-background-weak-elevation\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-error-stronger\\": \\"rgb(252, 207, 207)\\",
   \\"color-background-brand-stronger\\": \\"rgb(18, 28, 45)\\",
   \\"color-border-error-stronger\\": \\"rgb(252, 207, 207)\\",
@@ -86,9 +87,9 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-border-primary-weaker\\": \\"rgb(31, 48, 76)\\",
   \\"color-border-destructive-weaker\\": \\"rgb(31, 48, 76)\\",
   \\"color-border-new-weaker\\": \\"rgb(88, 23, 189)\\",
-  \\"color-border-destructive\\": \\"rgb(214, 31, 31)\\",
+  \\"color-border-destructive\\": \\"rgb(219, 19, 42)\\",
   \\"color-border-inverse-strong\\": \\"rgb(225, 227, 234)\\",
-  \\"color-border-primary\\": \\"rgb(2, 99, 224)\\",
+  \\"color-border-primary\\": \\"rgb(0, 109, 250)\\",
   \\"color-border-primary-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-border-success\\": \\"rgb(20, 176, 83)\\",
   \\"color-border-destructive-weakest\\": \\"rgb(18, 28, 45)\\",
@@ -99,7 +100,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-border-strong\\": \\"rgb(136, 145, 170)\\",
   \\"color-border-weak\\": \\"rgb(57, 71, 98)\\",
   \\"color-border-neutral\\": \\"rgb(2, 99, 224)\\",
-  \\"color-border-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-border-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-border-error-weakest\\": \\"rgb(49, 12, 12)\\",
   \\"color-border-error-strongest\\": \\"rgb(254, 236, 236)\\",
   \\"color-border-error-strong\\": \\"rgb(246, 177, 177)\\",
@@ -156,7 +157,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-new-weaker\\": \\"0 0 0 1px #5817bd\\",
   \\"shadow-elevation-bottom-inverse-05\\": \\"0 1px 0 0 #1f304c\\",
   \\"shadow-low\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\",
-  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #19273E, -4px 0 8px 0 rgba(0, 0, 0, 0.3), -16px 0 32px 0 rgba(0, 0, 0, 0.2)\\",
+  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #18253C, -4px 0 8px 0 rgba(0, 0, 0, 0.3), -16px 0 32px 0 rgba(0, 0, 0, 0.2)\\",
   \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #c35323\\",
   \\"shadow-elevation-bottom-05\\": \\"0 1px 0 0 #1f304c\\",
@@ -164,8 +165,8 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-focus\\": \\"0 0 0 4px #606b85\\",
   \\"shadow-border-weak\\": \\"0 0 0 1px #394762\\",
   \\"shadow-focus-inverse\\": \\"0 0 0 4px #8891aa\\",
-  \\"shadow-border-primary\\": \\"0 0 0 1px #0263e0\\",
-  \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\",
+  \\"shadow-border-primary\\": \\"0 0 0 1px #006dfa\\",
+  \\"shadow-border-destructive\\": \\"0 0 0 1px #DB132A\\",
   \\"shadow-high\\": \\"0 16px 24px 4px rgba(0, 0, 0, 0.5)\\",
   \\"shadow-right\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-elevation-right-inverse-05\\": \\"1px 0 0 0 #1f304c\\",
@@ -177,10 +178,10 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
-  \\"shadow-elevation-top-20\\": \\"0 0 0 1px #19273E, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
+  \\"shadow-elevation-top-20\\": \\"0 0 0 1px #18253C, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
-  \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\",
+  \\"shadow-border-error\\": \\"0 0 0 1px #DB132A\\",
   \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #1f304c\\",
   \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\",
   \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #001489\\",
@@ -226,7 +227,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-error-weaker\\": \\"0 0 0 1px #ad1111\\",
   \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
   \\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\",
-  \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
+  \\"shadow-border-notification\\": \\"0 1px 0 #DB132A\\",
   \\"shadow-elevation-inverse-05\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-user\\": \\"0 0 0 1px #5817bd\\",
   \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #043cb5\\",
@@ -282,7 +283,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-gray-70\\": \\"rgb(75, 86, 113)\\",
   \\"color-gray-60\\": \\"rgb(96, 107, 133)\\",
   \\"color-gray-50\\": \\"rgb(136, 145, 170)\\",
-  \\"color-gray-40\\": \\"rgb(142, 150, 174)\\",
+  \\"color-gray-40\\": \\"rgb(139, 147, 170)\\",
   \\"color-brand\\": \\"rgb(0, 20, 137)\\",
   \\"color-gray-30\\": \\"rgb(202, 205, 216)\\",
   \\"color-gray-20\\": \\"rgb(225, 227, 234)\\",
@@ -416,20 +417,20 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-text-subaccount\\": \\"rgb(255, 233, 128)\\",
   \\"color-text-destructive-stronger\\": \\"rgb(254, 236, 236)\\",
   \\"color-text-icon-offline\\": \\"rgb(244, 244, 246)\\",
-  \\"color-text-link-destructive\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-link-destructive\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-primary-stronger\\": \\"rgb(153, 205, 255)\\",
   \\"color-text-icon-success\\": \\"rgb(54, 213, 118)\\",
   \\"color-text-warning\\": \\"rgb(255, 179, 122)\\",
   \\"color-text-link-destructive-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-text-icon-neutral\\": \\"rgb(102, 179, 255)\\",
-  \\"color-text-icon-notification\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-notification\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-new\\": \\"rgb(231, 220, 250)\\",
-  \\"color-text-icon-error\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-error\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-inverse-weak\\": \\"rgb(202, 205, 216)\\",
   \\"color-text-icon-available\\": \\"rgb(54, 213, 118)\\",
   \\"color-text-link-destructive-stronger\\": \\"rgb(254, 236, 236)\\",
   \\"color-text-icon-brand-inverse\\": \\"rgb(255, 255, 255)\\",
-  \\"color-text-destructive\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-destructive\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-primary\\": \\"rgb(0, 140, 255)\\",
   \\"color-text-success\\": \\"rgb(162, 246, 195)\\",
   \\"color-text-inverse-new\\": \\"rgb(200, 175, 240)\\",
@@ -442,11 +443,11 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-text-neutral\\": \\"rgb(204, 228, 255)\\",
   \\"color-text-brand\\": \\"rgb(18, 28, 45)\\",
   \\"color-text-link-strongest\\": \\"rgb(255, 255, 255)\\",
-  \\"color-text-error\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-error\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-icon-inverse\\": \\"rgb(225, 227, 234)\\",
   \\"color-text-error-strong\\": \\"rgb(246, 177, 177)\\",
-  \\"color-text-icon-unavailable\\": \\"rgb(235, 86, 86)\\",
-  \\"color-text-error-weak\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-unavailable\\": \\"rgb(236, 91, 91)\\",
+  \\"color-text-error-weak\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-decorative-40\\": \\"rgb(231, 220, 250)\\",
   \\"color-text-link-strong\\": \\"rgb(153, 205, 255)\\",
   \\"color-text-brand-inverse\\": \\"rgb(255, 255, 255)\\",
@@ -488,7 +489,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
 exports[`Design Tokens matches the Global theme 1`] = `
 "{
   \\"color-background-user\\": \\"rgb(200, 175, 240)\\",
-  \\"color-background-notification\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-notification\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-trial\\": \\"rgb(209, 250, 224)\\",
   \\"color-background-subaccount\\": \\"rgb(255, 251, 234)\\",
   \\"color-background-primary-stronger\\": \\"rgb(3, 11, 93)\\",
@@ -505,14 +506,14 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-background-inverse-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-strong\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-new-weakest\\": \\"rgb(250, 247, 253)\\",
-  \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-destructive\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-weak\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-primary\\": \\"rgb(2, 99, 224)\\",
   \\"color-background-primary-weakest\\": \\"rgb(235, 244, 255)\\",
   \\"color-background-busy\\": \\"rgb(244, 124, 34)\\",
   \\"color-background-success\\": \\"rgb(20, 176, 83)\\",
-  \\"color-background-destructive-weakest\\": \\"rgb(254, 236, 236)\\",
-  \\"color-background-offline\\": \\"rgb(142, 150, 174)\\",
+  \\"color-background-destructive-weakest\\": \\"rgb(254, 245, 245)\\",
+  \\"color-background-offline\\": \\"rgb(139, 147, 170)\\",
   \\"color-background-row-striped\\": \\"rgb(244, 244, 246)\\",
   \\"color-background-primary-strongest\\": \\"rgb(6, 3, 58)\\",
   \\"color-background-success-weakest\\": \\"rgb(237, 253, 243)\\",
@@ -520,11 +521,11 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-background-error-strong\\": \\"rgb(117, 12, 12)\\",
   \\"color-background-brand-strong\\": \\"rgb(3, 11, 93)\\",
   \\"color-background-brand\\": \\"rgb(0, 20, 137)\\",
-  \\"color-background-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-neutral-weakest\\": \\"rgb(235, 244, 255)\\",
   \\"color-background-available\\": \\"rgb(20, 176, 83)\\",
-  \\"color-background-error-weakest\\": \\"rgb(254, 236, 236)\\",
-  \\"color-background-required\\": \\"rgb(235, 86, 86)\\",
+  \\"color-background-error-weakest\\": \\"rgb(254, 245, 245)\\",
+  \\"color-background-required\\": \\"rgb(236, 91, 91)\\",
   \\"color-background-error-strongest\\": \\"rgb(49, 12, 12)\\",
   \\"color-background-decorative-40-weakest\\": \\"rgb(245, 240, 252)\\",
   \\"color-background-inverse-stronger\\": \\"rgb(57, 71, 98)\\",
@@ -551,8 +552,9 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(6, 3, 58, 0.4)\\",
-  \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-unavailable\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-strong-elevation\\": \\"rgb(225, 227, 234)\\",
+  \\"color-background-body-elevation-primary\\": \\"rgb(244, 249, 255)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-weak-elevation\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-error-stronger\\": \\"rgb(74, 11, 11)\\",
@@ -571,7 +573,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-border-primary-weaker\\": \\"rgb(204, 228, 255)\\",
   \\"color-border-destructive-weaker\\": \\"rgb(252, 207, 207)\\",
   \\"color-border-new-weaker\\": \\"rgb(231, 220, 250)\\",
-  \\"color-border-destructive\\": \\"rgb(214, 31, 31)\\",
+  \\"color-border-destructive\\": \\"rgb(219, 19, 42)\\",
   \\"color-border-inverse-strong\\": \\"rgb(225, 227, 234)\\",
   \\"color-border-primary\\": \\"rgb(2, 99, 224)\\",
   \\"color-border-primary-weakest\\": \\"rgb(235, 244, 255)\\",
@@ -584,13 +586,13 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-border-strong\\": \\"rgb(96, 107, 133)\\",
   \\"color-border-weak\\": \\"rgb(202, 205, 216)\\",
   \\"color-border-neutral\\": \\"rgb(2, 99, 224)\\",
-  \\"color-border-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-border-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-border-error-weakest\\": \\"rgb(254, 236, 236)\\",
   \\"color-border-error-strongest\\": \\"rgb(49, 12, 12)\\",
   \\"color-border-error-strong\\": \\"rgb(117, 12, 12)\\",
   \\"color-border-error-weak\\": \\"rgb(245, 138, 138)\\",
   \\"color-border-neutral-weak\\": \\"rgb(102, 179, 255)\\",
-  \\"color-border\\": \\"rgb(136, 145, 170)\\",
+  \\"color-border\\": \\"rgb(139, 147, 170)\\",
   \\"color-border-weakest\\": \\"rgb(255, 255, 255)\\",
   \\"color-border-inverse-stronger\\": \\"rgb(244, 244, 246)\\",
   \\"color-border-inverse-weaker\\": \\"rgb(57, 71, 98)\\",
@@ -650,7 +652,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-weak\\": \\"0 0 0 1px #cacdd8\\",
   \\"shadow-focus-inverse\\": \\"0 0 0 4px rgba(255, 255, 255, 0.4)\\",
   \\"shadow-border-primary\\": \\"0 0 0 1px #0263e0\\",
-  \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\",
+  \\"shadow-border-destructive\\": \\"0 0 0 1px #DB132A\\",
   \\"shadow-high\\": \\"0 16px 24px 0 rgba(18, 28, 45, 0.2)\\",
   \\"shadow-right\\": \\"-4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
   \\"shadow-elevation-right-inverse-05\\": \\"1px 0 0 0 #1f304c\\",
@@ -658,14 +660,14 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-bottom-inverse-weaker\\": \\"0 1px 0 #394762\\",
   \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\",
   \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\",
-  \\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\",
+  \\"shadow-border-error-weak\\": \\"0 0 0 1px #EC5B5B\\",
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-elevation-top-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
-  \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\",
+  \\"shadow-border-error\\": \\"0 0 0 1px #DB132A\\",
   \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\",
   \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #cce4ff\\",
@@ -688,7 +690,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\",
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #fccfcf\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
-  \\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
+  \\"shadow-border\\": \\"0 0 0 1px #8B93AA\\",
   \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\",
@@ -711,11 +713,11 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-error-weaker\\": \\"0 0 0 1px #fccfcf\\",
   \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
   \\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\",
-  \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
+  \\"shadow-border-notification\\": \\"0 1px 0 #DB132A\\",
   \\"shadow-elevation-inverse-05\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-user\\": \\"0 0 0 1px #8c5bd8\\",
   \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #cce4ff\\",
-  \\"color-data-visualization-10\\": \\"rgb(235, 86, 86)\\",
+  \\"color-data-visualization-10\\": \\"rgb(236, 91, 91)\\",
   \\"color-data-visualization-1\\": \\"rgb(0, 20, 137)\\",
   \\"color-data-visualization-2\\": \\"rgb(14, 124, 58)\\",
   \\"color-data-visualization-3\\": \\"rgb(13, 58, 31)\\",
@@ -777,7 +779,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-gray-70\\": \\"rgb(75, 86, 113)\\",
   \\"color-gray-60\\": \\"rgb(96, 107, 133)\\",
   \\"color-gray-50\\": \\"rgb(136, 145, 170)\\",
-  \\"color-gray-40\\": \\"rgb(142, 150, 174)\\",
+  \\"color-gray-40\\": \\"rgb(139, 147, 170)\\",
   \\"color-brand\\": \\"rgb(0, 20, 137)\\",
   \\"color-gray-30\\": \\"rgb(202, 205, 216)\\",
   \\"color-gray-20\\": \\"rgb(225, 227, 234)\\",
@@ -901,20 +903,20 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-text-subaccount\\": \\"rgb(84, 51, 8)\\",
   \\"color-text-destructive-stronger\\": \\"rgb(74, 11, 11)\\",
   \\"color-text-icon-offline\\": \\"rgb(96, 107, 133)\\",
-  \\"color-text-link-destructive\\": \\"rgb(214, 31, 31)\\",
+  \\"color-text-link-destructive\\": \\"rgb(219, 19, 42)\\",
   \\"color-text-primary-stronger\\": \\"rgb(3, 11, 93)\\",
   \\"color-text-icon-success\\": \\"rgb(14, 124, 58)\\",
   \\"color-text-warning\\": \\"rgb(141, 49, 24)\\",
   \\"color-text-link-destructive-strongest\\": \\"rgb(49, 12, 12)\\",
   \\"color-text-icon-neutral\\": \\"rgb(0, 20, 137)\\",
-  \\"color-text-icon-notification\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-notification\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-new\\": \\"rgb(109, 46, 209)\\",
-  \\"color-text-icon-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-text-icon-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-text-inverse-weak\\": \\"rgb(202, 205, 216)\\",
   \\"color-text-icon-available\\": \\"rgb(14, 124, 58)\\",
   \\"color-text-link-destructive-stronger\\": \\"rgb(74, 11, 11)\\",
   \\"color-text-icon-brand-inverse\\": \\"rgb(255, 255, 255)\\",
-  \\"color-text-destructive\\": \\"rgb(214, 31, 31)\\",
+  \\"color-text-destructive\\": \\"rgb(219, 19, 42)\\",
   \\"color-text-primary\\": \\"rgb(2, 99, 224)\\",
   \\"color-text-success\\": \\"rgb(14, 124, 58)\\",
   \\"color-text-inverse-new\\": \\"rgb(200, 175, 240)\\",
@@ -927,11 +929,11 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-text-neutral\\": \\"rgb(0, 20, 137)\\",
   \\"color-text-brand\\": \\"rgb(18, 28, 45)\\",
   \\"color-text-link-strongest\\": \\"rgb(6, 3, 58)\\",
-  \\"color-text-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-text-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-text-icon-inverse\\": \\"rgb(136, 145, 170)\\",
   \\"color-text-error-strong\\": \\"rgb(173, 17, 17)\\",
-  \\"color-text-icon-unavailable\\": \\"rgb(214, 31, 31)\\",
-  \\"color-text-error-weak\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-unavailable\\": \\"rgb(219, 19, 42)\\",
+  \\"color-text-error-weak\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-decorative-40\\": \\"rgb(109, 46, 209)\\",
   \\"color-text-link-strong\\": \\"rgb(0, 20, 137)\\",
   \\"color-text-brand-inverse\\": \\"rgb(255, 255, 255)\\",
@@ -951,7 +953,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-text-destructive-weak\\": \\"rgb(246, 177, 177)\\",
   \\"color-text-inverse\\": \\"rgb(255, 255, 255)\\",
   \\"color-text-inverse-weakest\\": \\"rgb(75, 86, 113)\\",
-  \\"color-text-weaker\\": \\"rgb(142, 150, 174)\\",
+  \\"color-text-weaker\\": \\"rgb(139, 147, 170)\\",
   \\"color-text-warning-strong\\": \\"rgb(141, 49, 24)\\",
   \\"color-text-icon-warning\\": \\"rgb(227, 106, 25)\\",
   \\"color-text-error-stronger\\": \\"rgb(74, 11, 11)\\",
@@ -973,7 +975,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
 exports[`Design Tokens matches the Sendgrid theme 1`] = `
 "{
   \\"color-background-user\\": \\"rgb(200, 175, 240)\\",
-  \\"color-background-notification\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-notification\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-trial\\": \\"rgb(209, 250, 224)\\",
   \\"color-background-subaccount\\": \\"rgb(255, 251, 234)\\",
   \\"color-background-primary-stronger\\": \\"rgb(3, 11, 93)\\",
@@ -990,14 +992,14 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-background-inverse-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-strong\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-new-weakest\\": \\"rgb(250, 247, 253)\\",
-  \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-destructive\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-weak\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-primary\\": \\"rgb(2, 99, 224)\\",
   \\"color-background-primary-weakest\\": \\"rgb(235, 244, 255)\\",
   \\"color-background-busy\\": \\"rgb(244, 124, 34)\\",
   \\"color-background-success\\": \\"rgb(20, 176, 83)\\",
-  \\"color-background-destructive-weakest\\": \\"rgb(254, 236, 236)\\",
-  \\"color-background-offline\\": \\"rgb(142, 150, 174)\\",
+  \\"color-background-destructive-weakest\\": \\"rgb(254, 245, 245)\\",
+  \\"color-background-offline\\": \\"rgb(139, 147, 170)\\",
   \\"color-background-row-striped\\": \\"rgb(244, 244, 246)\\",
   \\"color-background-primary-strongest\\": \\"rgb(6, 3, 58)\\",
   \\"color-background-success-weakest\\": \\"rgb(237, 253, 243)\\",
@@ -1005,11 +1007,11 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-background-error-strong\\": \\"rgb(117, 12, 12)\\",
   \\"color-background-brand-strong\\": \\"rgb(3, 11, 93)\\",
   \\"color-background-brand\\": \\"rgb(0, 20, 137)\\",
-  \\"color-background-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-neutral-weakest\\": \\"rgb(235, 244, 255)\\",
   \\"color-background-available\\": \\"rgb(20, 176, 83)\\",
-  \\"color-background-error-weakest\\": \\"rgb(254, 236, 236)\\",
-  \\"color-background-required\\": \\"rgb(235, 86, 86)\\",
+  \\"color-background-error-weakest\\": \\"rgb(254, 245, 245)\\",
+  \\"color-background-required\\": \\"rgb(236, 91, 91)\\",
   \\"color-background-error-strongest\\": \\"rgb(49, 12, 12)\\",
   \\"color-background-decorative-40-weakest\\": \\"rgb(245, 240, 252)\\",
   \\"color-background-inverse-stronger\\": \\"rgb(57, 71, 98)\\",
@@ -1036,8 +1038,9 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(6, 3, 58, 0.4)\\",
-  \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-unavailable\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-strong-elevation\\": \\"rgb(225, 227, 234)\\",
+  \\"color-background-body-elevation-primary\\": \\"rgb(244, 249, 255)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-weak-elevation\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-error-stronger\\": \\"rgb(74, 11, 11)\\",
@@ -1056,7 +1059,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-border-primary-weaker\\": \\"rgb(204, 228, 255)\\",
   \\"color-border-destructive-weaker\\": \\"rgb(252, 207, 207)\\",
   \\"color-border-new-weaker\\": \\"rgb(231, 220, 250)\\",
-  \\"color-border-destructive\\": \\"rgb(214, 31, 31)\\",
+  \\"color-border-destructive\\": \\"rgb(219, 19, 42)\\",
   \\"color-border-inverse-strong\\": \\"rgb(225, 227, 234)\\",
   \\"color-border-primary\\": \\"rgb(2, 99, 224)\\",
   \\"color-border-primary-weakest\\": \\"rgb(235, 244, 255)\\",
@@ -1069,13 +1072,13 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-border-strong\\": \\"rgb(96, 107, 133)\\",
   \\"color-border-weak\\": \\"rgb(202, 205, 216)\\",
   \\"color-border-neutral\\": \\"rgb(2, 99, 224)\\",
-  \\"color-border-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-border-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-border-error-weakest\\": \\"rgb(254, 236, 236)\\",
   \\"color-border-error-strongest\\": \\"rgb(49, 12, 12)\\",
   \\"color-border-error-strong\\": \\"rgb(117, 12, 12)\\",
   \\"color-border-error-weak\\": \\"rgb(245, 138, 138)\\",
   \\"color-border-neutral-weak\\": \\"rgb(102, 179, 255)\\",
-  \\"color-border\\": \\"rgb(136, 145, 170)\\",
+  \\"color-border\\": \\"rgb(139, 147, 170)\\",
   \\"color-border-weakest\\": \\"rgb(255, 255, 255)\\",
   \\"color-border-inverse-stronger\\": \\"rgb(244, 244, 246)\\",
   \\"color-border-inverse-weaker\\": \\"rgb(57, 71, 98)\\",
@@ -1135,7 +1138,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-weak\\": \\"0 0 0 1px #cacdd8\\",
   \\"shadow-focus-inverse\\": \\"0 0 0 4px rgba(255, 255, 255, 0.4)\\",
   \\"shadow-border-primary\\": \\"0 0 0 1px #0263e0\\",
-  \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\",
+  \\"shadow-border-destructive\\": \\"0 0 0 1px #DB132A\\",
   \\"shadow-high\\": \\"0 16px 24px 0 rgba(18, 28, 45, 0.2)\\",
   \\"shadow-right\\": \\"-4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
   \\"shadow-elevation-right-inverse-05\\": \\"1px 0 0 0 #1f304c\\",
@@ -1143,14 +1146,14 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-bottom-inverse-weaker\\": \\"0 1px 0 #394762\\",
   \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\",
   \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\",
-  \\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\",
+  \\"shadow-border-error-weak\\": \\"0 0 0 1px #EC5B5B\\",
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-elevation-top-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
-  \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\",
+  \\"shadow-border-error\\": \\"0 0 0 1px #DB132A\\",
   \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\",
   \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #cce4ff\\",
@@ -1173,7 +1176,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\",
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #fccfcf\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
-  \\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
+  \\"shadow-border\\": \\"0 0 0 1px #8B93AA\\",
   \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\",
@@ -1196,11 +1199,11 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-error-weaker\\": \\"0 0 0 1px #fccfcf\\",
   \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
   \\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\",
-  \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
+  \\"shadow-border-notification\\": \\"0 1px 0 #DB132A\\",
   \\"shadow-elevation-inverse-05\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-user\\": \\"0 0 0 1px #8c5bd8\\",
   \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #cce4ff\\",
-  \\"color-data-visualization-10\\": \\"rgb(235, 86, 86)\\",
+  \\"color-data-visualization-10\\": \\"rgb(236, 91, 91)\\",
   \\"color-data-visualization-1\\": \\"rgb(0, 20, 137)\\",
   \\"color-data-visualization-2\\": \\"rgb(14, 124, 58)\\",
   \\"color-data-visualization-3\\": \\"rgb(13, 58, 31)\\",
@@ -1262,7 +1265,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-gray-70\\": \\"rgb(75, 86, 113)\\",
   \\"color-gray-60\\": \\"rgb(96, 107, 133)\\",
   \\"color-gray-50\\": \\"rgb(136, 145, 170)\\",
-  \\"color-gray-40\\": \\"rgb(142, 150, 174)\\",
+  \\"color-gray-40\\": \\"rgb(139, 147, 170)\\",
   \\"color-brand\\": \\"rgb(0, 20, 137)\\",
   \\"color-gray-30\\": \\"rgb(202, 205, 216)\\",
   \\"color-gray-20\\": \\"rgb(225, 227, 234)\\",
@@ -1386,20 +1389,20 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-text-subaccount\\": \\"rgb(84, 51, 8)\\",
   \\"color-text-destructive-stronger\\": \\"rgb(74, 11, 11)\\",
   \\"color-text-icon-offline\\": \\"rgb(96, 107, 133)\\",
-  \\"color-text-link-destructive\\": \\"rgb(214, 31, 31)\\",
+  \\"color-text-link-destructive\\": \\"rgb(219, 19, 42)\\",
   \\"color-text-primary-stronger\\": \\"rgb(3, 11, 93)\\",
   \\"color-text-icon-success\\": \\"rgb(14, 124, 58)\\",
   \\"color-text-warning\\": \\"rgb(141, 49, 24)\\",
   \\"color-text-link-destructive-strongest\\": \\"rgb(49, 12, 12)\\",
   \\"color-text-icon-neutral\\": \\"rgb(0, 20, 137)\\",
-  \\"color-text-icon-notification\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-notification\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-new\\": \\"rgb(109, 46, 209)\\",
-  \\"color-text-icon-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-text-icon-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-text-inverse-weak\\": \\"rgb(202, 205, 216)\\",
   \\"color-text-icon-available\\": \\"rgb(14, 124, 58)\\",
   \\"color-text-link-destructive-stronger\\": \\"rgb(74, 11, 11)\\",
   \\"color-text-icon-brand-inverse\\": \\"rgb(255, 255, 255)\\",
-  \\"color-text-destructive\\": \\"rgb(214, 31, 31)\\",
+  \\"color-text-destructive\\": \\"rgb(219, 19, 42)\\",
   \\"color-text-primary\\": \\"rgb(2, 99, 224)\\",
   \\"color-text-success\\": \\"rgb(14, 124, 58)\\",
   \\"color-text-inverse-new\\": \\"rgb(200, 175, 240)\\",
@@ -1412,11 +1415,11 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-text-neutral\\": \\"rgb(0, 20, 137)\\",
   \\"color-text-brand\\": \\"rgb(18, 28, 45)\\",
   \\"color-text-link-strongest\\": \\"rgb(6, 3, 58)\\",
-  \\"color-text-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-text-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-text-icon-inverse\\": \\"rgb(136, 145, 170)\\",
   \\"color-text-error-strong\\": \\"rgb(173, 17, 17)\\",
-  \\"color-text-icon-unavailable\\": \\"rgb(214, 31, 31)\\",
-  \\"color-text-error-weak\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-unavailable\\": \\"rgb(219, 19, 42)\\",
+  \\"color-text-error-weak\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-decorative-40\\": \\"rgb(109, 46, 209)\\",
   \\"color-text-link-strong\\": \\"rgb(0, 20, 137)\\",
   \\"color-text-brand-inverse\\": \\"rgb(255, 255, 255)\\",
@@ -1436,7 +1439,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-text-destructive-weak\\": \\"rgb(246, 177, 177)\\",
   \\"color-text-inverse\\": \\"rgb(255, 255, 255)\\",
   \\"color-text-inverse-weakest\\": \\"rgb(75, 86, 113)\\",
-  \\"color-text-weaker\\": \\"rgb(142, 150, 174)\\",
+  \\"color-text-weaker\\": \\"rgb(139, 147, 170)\\",
   \\"color-text-warning-strong\\": \\"rgb(141, 49, 24)\\",
   \\"color-text-icon-warning\\": \\"rgb(227, 106, 25)\\",
   \\"color-text-error-stronger\\": \\"rgb(74, 11, 11)\\",
@@ -1458,7 +1461,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
 exports[`Design Tokens matches the Twilio Dark theme 1`] = `
 "{
   \\"color-background-user\\": \\"rgb(34, 9, 74)\\",
-  \\"color-background-notification\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-notification\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-trial\\": \\"rgb(5, 41, 18)\\",
   \\"color-background-subaccount\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-primary-stronger\\": \\"rgb(204, 228, 255)\\",
@@ -1466,23 +1469,23 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-primary-weaker\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-destructive-weaker\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-inverse-stronger-elevation\\": \\"rgb(64, 79, 110)\\",
-  \\"color-background-body-elevation\\": \\"rgb(25, 39, 62)\\",
+  \\"color-background-body-elevation\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-warning\\": \\"rgb(244, 124, 34)\\",
-  \\"color-background-elevation\\": \\"rgb(25, 39, 62)\\",
+  \\"color-background-elevation\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-warning-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new\\": \\"rgb(56, 14, 120)\\",
-  \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\",
+  \\"color-background-inverse-elevation\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new-weakest\\": \\"rgb(18, 28, 45)\\",
-  \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
-  \\"color-background-weak\\": \\"rgb(18, 28, 45)\\",
+  \\"color-background-destructive\\": \\"rgb(219, 19, 42)\\",
+  \\"color-background-weak\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-primary\\": \\"rgb(0, 109, 250)\\",
   \\"color-background-primary-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-busy\\": \\"rgb(244, 124, 34)\\",
   \\"color-background-success\\": \\"rgb(20, 176, 83)\\",
   \\"color-background-destructive-weakest\\": \\"rgb(18, 28, 45)\\",
-  \\"color-background-offline\\": \\"rgb(174, 178, 193)\\",
+  \\"color-background-offline\\": \\"rgb(139, 147, 170)\\",
   \\"color-background-row-striped\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-primary-strongest\\": \\"rgb(235, 244, 255)\\",
   \\"color-background-success-weakest\\": \\"rgb(18, 28, 45)\\",
@@ -1490,11 +1493,11 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-error-strong\\": \\"rgb(245, 138, 138)\\",
   \\"color-background-brand-strong\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-brand\\": \\"rgb(18, 28, 45)\\",
-  \\"color-background-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-neutral-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-available\\": \\"rgb(20, 176, 83)\\",
   \\"color-background-error-weakest\\": \\"rgb(18, 28, 45)\\",
-  \\"color-background-required\\": \\"rgb(235, 86, 86)\\",
+  \\"color-background-required\\": \\"rgb(236, 91, 91)\\",
   \\"color-background-error-strongest\\": \\"rgb(254, 236, 236)\\",
   \\"color-background-decorative-40-weakest\\": \\"rgb(34, 9, 74)\\",
   \\"color-background-inverse-stronger\\": \\"rgb(57, 71, 98)\\",
@@ -1505,7 +1508,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-destructive-strong\\": \\"rgb(246, 177, 177)\\",
   \\"color-background-destructive-weak\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-decorative-10-weakest\\": \\"rgb(18, 28, 45)\\",
-  \\"color-background\\": \\"rgb(18, 28, 45)\\",
+  \\"color-background\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-primary-weak\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-weakest\\": \\"rgb(13, 19, 28)\\",
@@ -1521,10 +1524,11 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
-  \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
-  \\"color-background-strong-elevation\\": \\"rgb(31, 48, 76)\\",
+  \\"color-background-unavailable\\": \\"rgb(219, 19, 42)\\",
+  \\"color-background-strong-elevation\\": \\"rgb(37, 57, 91)\\",
+  \\"color-background-body-elevation-primary\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
-  \\"color-background-weak-elevation\\": \\"rgb(18, 28, 45)\\",
+  \\"color-background-weak-elevation\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-error-stronger\\": \\"rgb(252, 207, 207)\\",
   \\"color-background-brand-stronger\\": \\"rgb(18, 28, 45)\\",
   \\"color-border-error-stronger\\": \\"rgb(252, 207, 207)\\",
@@ -1541,7 +1545,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-border-primary-weaker\\": \\"rgb(4, 60, 181)\\",
   \\"color-border-destructive-weaker\\": \\"rgb(74, 11, 11)\\",
   \\"color-border-new-weaker\\": \\"rgb(88, 23, 189)\\",
-  \\"color-border-destructive\\": \\"rgb(214, 31, 31)\\",
+  \\"color-border-destructive\\": \\"rgb(219, 19, 42)\\",
   \\"color-border-inverse-strong\\": \\"rgb(225, 227, 234)\\",
   \\"color-border-primary\\": \\"rgb(0, 109, 250)\\",
   \\"color-border-primary-weakest\\": \\"rgb(3, 11, 93)\\",
@@ -1554,7 +1558,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-border-strong\\": \\"rgb(136, 145, 170)\\",
   \\"color-border-weak\\": \\"rgb(57, 71, 98)\\",
   \\"color-border-neutral\\": \\"rgb(0, 109, 250)\\",
-  \\"color-border-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-border-error\\": \\"rgb(219, 19, 42)\\",
   \\"color-border-error-weakest\\": \\"rgb(49, 12, 12)\\",
   \\"color-border-error-strongest\\": \\"rgb(254, 236, 236)\\",
   \\"color-border-error-strong\\": \\"rgb(245, 138, 138)\\",
@@ -1611,7 +1615,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-new-weaker\\": \\"0 0 0 1px #5817bd\\",
   \\"shadow-elevation-bottom-inverse-05\\": \\"0 1px 0 0 #1f304c\\",
   \\"shadow-low\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\",
-  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #19273E, -4px 0 8px 0 rgba(0, 0, 0, 0.3), -16px 0 32px 0 rgba(0, 0, 0, 0.2)\\",
+  \\"shadow-elevation-left-20\\": \\"0 0 0 1px #18253C, -4px 0 8px 0 rgba(0, 0, 0, 0.3), -16px 0 32px 0 rgba(0, 0, 0, 0.2)\\",
   \\"shadow-border-inverse-strong\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border-warning-weaker\\": \\"0 0 0 1px #c35323\\",
   \\"shadow-elevation-bottom-05\\": \\"0 1px 0 0 #1f304c\\",
@@ -1620,7 +1624,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-weak\\": \\"0 0 0 1px #394762\\",
   \\"shadow-focus-inverse\\": \\"0 0 0 1px #394762, 0 0 0 3px #121c2d, 0 0 0 4px #ffffff, 0 0 0 6px rgba(255, 255, 255, 0.2)\\",
   \\"shadow-border-primary\\": \\"0 0 0 1px #006dfa\\",
-  \\"shadow-border-destructive\\": \\"0 0 0 1px #d61f1f\\",
+  \\"shadow-border-destructive\\": \\"0 0 0 1px #DB132A\\",
   \\"shadow-high\\": \\"0 16px 24px 4px rgba(0, 0, 0, 0.5)\\",
   \\"shadow-right\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-elevation-right-inverse-05\\": \\"1px 0 0 0 #1f304c\\",
@@ -1632,10 +1636,10 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
-  \\"shadow-elevation-top-20\\": \\"0 0 0 1px #19273E, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
+  \\"shadow-elevation-top-20\\": \\"0 0 0 1px #18253C, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
-  \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\",
+  \\"shadow-border-error\\": \\"0 0 0 1px #DB132A\\",
   \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #8891aa\\",
   \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\",
   \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #043cb5\\",
@@ -1681,7 +1685,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-error-weaker\\": \\"0 0 0 1px #ad1111\\",
   \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
   \\"shadow-focus-inverse-inset\\": \\"0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\",
-  \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
+  \\"shadow-border-notification\\": \\"0 1px 0 #DB132A\\",
   \\"shadow-elevation-inverse-05\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-user\\": \\"0 0 0 1px #5817bd\\",
   \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #043cb5\\",
@@ -1737,7 +1741,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-gray-70\\": \\"rgb(75, 86, 113)\\",
   \\"color-gray-60\\": \\"rgb(96, 107, 133)\\",
   \\"color-gray-50\\": \\"rgb(136, 145, 170)\\",
-  \\"color-gray-40\\": \\"rgb(142, 150, 174)\\",
+  \\"color-gray-40\\": \\"rgb(139, 147, 170)\\",
   \\"color-brand\\": \\"rgb(0, 20, 137)\\",
   \\"color-gray-30\\": \\"rgb(202, 205, 216)\\",
   \\"color-gray-20\\": \\"rgb(225, 227, 234)\\",
@@ -1871,20 +1875,20 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-text-subaccount\\": \\"rgb(255, 233, 128)\\",
   \\"color-text-destructive-stronger\\": \\"rgb(246, 177, 177)\\",
   \\"color-text-icon-offline\\": \\"rgb(244, 244, 246)\\",
-  \\"color-text-link-destructive\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-link-destructive\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-primary-stronger\\": \\"rgb(153, 205, 255)\\",
   \\"color-text-icon-success\\": \\"rgb(54, 213, 118)\\",
   \\"color-text-warning\\": \\"rgb(255, 179, 122)\\",
   \\"color-text-link-destructive-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-text-icon-neutral\\": \\"rgb(102, 179, 255)\\",
-  \\"color-text-icon-notification\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-notification\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-new\\": \\"rgb(231, 220, 250)\\",
-  \\"color-text-icon-error\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-error\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-inverse-weak\\": \\"rgb(202, 205, 216)\\",
   \\"color-text-icon-available\\": \\"rgb(54, 213, 118)\\",
   \\"color-text-link-destructive-stronger\\": \\"rgb(246, 177, 177)\\",
   \\"color-text-icon-brand-inverse\\": \\"rgb(255, 255, 255)\\",
-  \\"color-text-destructive\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-destructive\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-primary\\": \\"rgb(0, 140, 255)\\",
   \\"color-text-success\\": \\"rgb(162, 246, 195)\\",
   \\"color-text-inverse-new\\": \\"rgb(200, 175, 240)\\",
@@ -1897,11 +1901,11 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-text-neutral\\": \\"rgb(102, 179, 255)\\",
   \\"color-text-brand\\": \\"rgb(18, 28, 45)\\",
   \\"color-text-link-strongest\\": \\"rgb(255, 255, 255)\\",
-  \\"color-text-error\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-error\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-icon-inverse\\": \\"rgb(136, 145, 170)\\",
   \\"color-text-error-strong\\": \\"rgb(246, 177, 177)\\",
-  \\"color-text-icon-unavailable\\": \\"rgb(235, 86, 86)\\",
-  \\"color-text-error-weak\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-unavailable\\": \\"rgb(236, 91, 91)\\",
+  \\"color-text-error-weak\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-decorative-40\\": \\"rgb(200, 175, 240)\\",
   \\"color-text-link-strong\\": \\"rgb(153, 205, 255)\\",
   \\"color-text-brand-inverse\\": \\"rgb(255, 255, 255)\\",
@@ -1943,7 +1947,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
 exports[`Design Tokens matches the Twilio theme 1`] = `
 "{
   \\"color-background-user\\": \\"rgb(250, 247, 253)\\",
-  \\"color-background-notification\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-notification\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-trial\\": \\"rgb(209, 250, 224)\\",
   \\"color-background-subaccount\\": \\"rgb(255, 251, 234)\\",
   \\"color-background-primary-stronger\\": \\"rgb(3, 11, 93)\\",
@@ -1957,7 +1961,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-background-warning-weakest\\": \\"rgb(253, 247, 244)\\",
   \\"color-background-inverse-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new\\": \\"rgb(245, 240, 252)\\",
-  \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\",
+  \\"color-background-inverse-elevation\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-strong\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-new-weakest\\": \\"rgb(250, 247, 253)\\",
   \\"color-background-destructive\\": \\"rgb(199, 35, 35)\\",
@@ -1967,7 +1971,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-background-busy\\": \\"rgb(244, 124, 34)\\",
   \\"color-background-success\\": \\"rgb(20, 176, 83)\\",
   \\"color-background-destructive-weakest\\": \\"rgb(254, 245, 245)\\",
-  \\"color-background-offline\\": \\"rgb(142, 150, 174)\\",
+  \\"color-background-offline\\": \\"rgb(139, 147, 170)\\",
   \\"color-background-row-striped\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-primary-strongest\\": \\"rgb(6, 3, 58)\\",
   \\"color-background-success-weakest\\": \\"rgb(237, 253, 243)\\",
@@ -1979,7 +1983,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-background-neutral-weakest\\": \\"rgb(244, 249, 255)\\",
   \\"color-background-available\\": \\"rgb(20, 176, 83)\\",
   \\"color-background-error-weakest\\": \\"rgb(254, 245, 245)\\",
-  \\"color-background-required\\": \\"rgb(235, 86, 86)\\",
+  \\"color-background-required\\": \\"rgb(236, 91, 91)\\",
   \\"color-background-error-strongest\\": \\"rgb(49, 12, 12)\\",
   \\"color-background-decorative-40-weakest\\": \\"rgb(250, 247, 253)\\",
   \\"color-background-inverse-stronger\\": \\"rgb(57, 71, 98)\\",
@@ -2006,8 +2010,9 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-overlay\\": \\"rgba(96, 107, 133, 0.5)\\",
-  \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-unavailable\\": \\"rgb(219, 19, 42)\\",
   \\"color-background-strong-elevation\\": \\"rgb(225, 227, 234)\\",
+  \\"color-background-body-elevation-primary\\": \\"rgb(244, 249, 255)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-weak-elevation\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-error-stronger\\": \\"rgb(74, 11, 11)\\",
@@ -2045,7 +2050,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-border-error-strong\\": \\"rgb(117, 12, 12)\\",
   \\"color-border-error-weak\\": \\"rgb(245, 138, 138)\\",
   \\"color-border-neutral-weak\\": \\"rgb(102, 179, 255)\\",
-  \\"color-border\\": \\"rgb(136, 145, 170)\\",
+  \\"color-border\\": \\"rgb(139, 147, 170)\\",
   \\"color-border-weakest\\": \\"rgb(255, 255, 255)\\",
   \\"color-border-inverse-stronger\\": \\"rgb(244, 244, 246)\\",
   \\"color-border-inverse-weaker\\": \\"rgb(57, 71, 98)\\",
@@ -2113,7 +2118,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-bottom-inverse-weaker\\": \\"0 1px 0 #394762\\",
   \\"shadow-border-primary-strongest\\": \\"0 0 0 1px #06033a\\",
   \\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\",
-  \\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\",
+  \\"shadow-border-error-weak\\": \\"0 0 0 1px #EC5B5B\\",
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
@@ -2121,7 +2126,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-error\\": \\"0 0 0 1px #c72323\\",
-  \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #8e96ae\\",
+  \\"shadow-border-bottom-decorative-10-weaker\\": \\"0 1px 0 #8B93AA\\",
   \\"shadow-border-bottom-primary\\": \\"0 1px 0 #006dfa\\",
   \\"shadow-border-bottom-decorative-20-weaker\\": \\"0 1px 0 #66b3ff\\",
   \\"shadow-border-inverse-stronger\\": \\"0 0 0 1px #f4f4f6\\",
@@ -2143,7 +2148,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-bottom-notification-stronger\\": \\"0 1px 0 #4a0b0b\\",
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #f58a8a\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
-  \\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
+  \\"shadow-border\\": \\"0 0 0 1px #8B93AA\\",
   \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #66b3ff\\",
@@ -2166,7 +2171,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-error-weaker\\": \\"0 0 0 1px #fccfcf\\",
   \\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
   \\"shadow-focus-inverse-inset\\": \\"0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\",
-  \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
+  \\"shadow-border-notification\\": \\"0 1px 0 #DB132A\\",
   \\"shadow-elevation-inverse-05\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border-user\\": \\"0 0 0 1px #e7dcfa\\",
   \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #cce4ff\\",
@@ -2222,12 +2227,12 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-gray-70\\": \\"rgb(75, 86, 113)\\",
   \\"color-gray-60\\": \\"rgb(96, 107, 133)\\",
   \\"color-gray-50\\": \\"rgb(136, 145, 170)\\",
-  \\"color-gray-40\\": \\"rgb(142, 150, 174)\\",
+  \\"color-gray-40\\": \\"rgb(139, 147, 170)\\",
   \\"color-brand\\": \\"rgb(0, 20, 137)\\",
   \\"color-gray-30\\": \\"rgb(202, 205, 216)\\",
   \\"color-gray-20\\": \\"rgb(225, 227, 234)\\",
   \\"color-gray-10\\": \\"rgb(244, 244, 246)\\",
-  \\"color-data-visualization-10\\": \\"rgb(235, 86, 86)\\",
+  \\"color-data-visualization-10\\": \\"rgb(236, 91, 91)\\",
   \\"color-data-visualization-1\\": \\"rgb(0, 20, 137)\\",
   \\"color-data-visualization-2\\": \\"rgb(14, 124, 58)\\",
   \\"color-data-visualization-3\\": \\"rgb(13, 58, 31)\\",
@@ -2362,7 +2367,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-text-warning\\": \\"rgb(141, 49, 24)\\",
   \\"color-text-link-destructive-strongest\\": \\"rgb(49, 12, 12)\\",
   \\"color-text-icon-neutral\\": \\"rgb(3, 11, 93)\\",
-  \\"color-text-icon-notification\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-notification\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-new\\": \\"rgb(109, 46, 209)\\",
   \\"color-text-icon-error\\": \\"rgb(199, 35, 35)\\",
   \\"color-text-inverse-weak\\": \\"rgb(202, 205, 216)\\",
@@ -2385,8 +2390,8 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-text-error\\": \\"rgb(199, 35, 35)\\",
   \\"color-text-icon-inverse\\": \\"rgb(136, 145, 170)\\",
   \\"color-text-error-strong\\": \\"rgb(117, 12, 12)\\",
-  \\"color-text-icon-unavailable\\": \\"rgb(214, 31, 31)\\",
-  \\"color-text-error-weak\\": \\"rgb(235, 86, 86)\\",
+  \\"color-text-icon-unavailable\\": \\"rgb(219, 19, 42)\\",
+  \\"color-text-error-weak\\": \\"rgb(236, 91, 91)\\",
   \\"color-text-decorative-40\\": \\"rgb(109, 46, 209)\\",
   \\"color-text-link-strong\\": \\"rgb(0, 20, 137)\\",
   \\"color-text-brand-inverse\\": \\"rgb(255, 255, 255)\\",
@@ -2406,7 +2411,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-text-destructive-weak\\": \\"rgb(246, 177, 177)\\",
   \\"color-text-inverse\\": \\"rgb(255, 255, 255)\\",
   \\"color-text-inverse-weakest\\": \\"rgb(75, 86, 113)\\",
-  \\"color-text-weaker\\": \\"rgb(142, 150, 174)\\",
+  \\"color-text-weaker\\": \\"rgb(139, 147, 170)\\",
   \\"color-text-warning-strong\\": \\"rgb(141, 49, 24)\\",
   \\"color-text-icon-warning\\": \\"rgb(195, 83, 35)\\",
   \\"color-text-error-stronger\\": \\"rgb(74, 11, 11)\\",
diff --git a/packages/paste-design-tokens/tokens/aliases/color-palette.yml b/packages/paste-design-tokens/tokens/aliases/color-palette.yml
index 38937153f1..8eb3e98b3d 100644
--- a/packages/paste-design-tokens/tokens/aliases/color-palette.yml
+++ b/packages/paste-design-tokens/tokens/aliases/color-palette.yml
@@ -32,7 +32,7 @@ aliases:
   palette-gray-15: "#edeef2"
   palette-gray-20: "#e1e3ea"
   palette-gray-30: "#cacdd8"
-  palette-gray-40: "#8e96ae"
+  palette-gray-40: "#8B93AA"
   palette-gray-50: "#8891aa"
   palette-gray-55: "#67728e"
   palette-gray-60: "#606b85"
@@ -41,7 +41,7 @@ aliases:
   palette-gray-80: "#394762"
   palette-gray-85: "#25395b"
   palette-gray-90: "#1f304c"
-  palette-gray-95: "#19273E"
+  palette-gray-95: "#18253C"
   palette-gray-100: "#121c2d"
   palette-gray-110: "#0F1621"
 
@@ -122,8 +122,8 @@ aliases:
   palette-red-20: "#fccfcf"
   palette-red-30: "#f6b1b1"
   palette-red-40: "#f58a8a"
-  palette-red-50: "#eb5656"
-  palette-red-60: "#d61f1f"
+  palette-red-50: "#EC5B5B"
+  palette-red-60: "#DB132A"
   palette-red-65: "#c72323"
   palette-red-70: "#ad1111"
   palette-red-80: "#750c0c"
diff --git a/packages/paste-design-tokens/tokens/global/background-color.yml b/packages/paste-design-tokens/tokens/global/background-color.yml
index 8aaadc357c..90eff91951 100644
--- a/packages/paste-design-tokens/tokens/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/global/background-color.yml
@@ -116,7 +116,7 @@ props:
     value: "{!palette-red-60}"
     comment: Background color used for error alerts and toasts.
   color-background-error-weakest:
-    value: "{!palette-red-10}"
+    value: "{!palette-red-05}"
     comment: Weakest background color used for error alerts and toasts.
   color-background-required:
     value: "{!palette-red-50}"
@@ -176,7 +176,7 @@ props:
     value: "{!palette-red-20}"
     comment: Weaker background color used for destructive actions or highlights.
   color-background-destructive-weakest:
-    value: "{!palette-red-10}"
+    value: "{!palette-red-05}"
     comment: Weakest background color used for destructive actions or highlights.
 
   # overlay backgrounds
@@ -221,6 +221,9 @@ props:
   color-background-body-elevation:
     value: "{!palette-gray-05}"
     comment: Elevation token for color-background-body elements.
+  color-background-body-elevation-primary:
+    value: "{!palette-blue-05}"
+    comment: Primary elevation token for color-background-body elements.
   color-background-weak-elevation:
     value: "{!palette-gray-05}"
     comment: Elevation token for color-background-weak elements.
diff --git a/packages/paste-design-tokens/tokens/global/border-color.yml b/packages/paste-design-tokens/tokens/global/border-color.yml
index d8781a7fa0..a772c06685 100644
--- a/packages/paste-design-tokens/tokens/global/border-color.yml
+++ b/packages/paste-design-tokens/tokens/global/border-color.yml
@@ -29,7 +29,7 @@ props:
       - color-background-destructive-weaker
       - color-background-destructive-weakest
   color-border:
-    value: "{!palette-gray-50}"
+    value: "{!palette-gray-40}"
     comment: Default border color
     uicontrol_contrast_pairing:
       # - color-background
diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml
index 45a424d480..050bc20423 100644
--- a/packages/paste-design-tokens/tokens/global/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/global/box-shadow.yml
@@ -39,7 +39,7 @@ props:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-30}"
     comment: Weak shadow border for disabled inputs.
   shadow-border:
-    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-50}"
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-40}"
     comment: Shadow border for inputs.
   shadow-border-strong:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-60}"
diff --git a/packages/paste-design-tokens/tokens/themes/dark/aliases/color-palette.yml b/packages/paste-design-tokens/tokens/themes/dark/aliases/color-palette.yml
index f062895d37..d6efc3d79b 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/aliases/color-palette.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/aliases/color-palette.yml
@@ -42,7 +42,7 @@ aliases:
   palette-gray-10: "#f4f4f6"
   palette-gray-20: "#e1e3ea"
   palette-gray-30: "#cacdd8"
-  palette-gray-40: "#aeb2c1"
+  palette-gray-40: "#8B93AA"
   palette-gray-50: "#8891aa"
   palette-gray-60: "#606b85"
   palette-gray-70: "#4b5671"
@@ -140,8 +140,8 @@ aliases:
   palette-red-20: "#fccfcf"
   palette-red-30: "#f6b1b1"
   palette-red-40: "#f58a8a"
-  palette-red-50: "#eb5656"
-  palette-red-60: "#d61f1f"
+  palette-red-50: "#EC5B5B"
+  palette-red-60: "#DB132A"
   palette-red-70: "#ad1111"
   palette-red-80: "#750c0c"
   palette-red-90: "#4a0b0b"
diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
index 9f8b1a05ed..ed52cd2405 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
@@ -7,7 +7,7 @@ imports:
 props:
   # base background
   color-background:
-    value: "{!palette-gray-100}"
+    value: "{!palette-gray-95}"
     comment: Default background color for any container.
   color-background-strong:
     value: "{!palette-gray-90}"
@@ -28,7 +28,7 @@ props:
     value: "{!palette-gray-80}"
     comment: Stronger inverse background color for any container. Must be used on color-background-body-inverse.
   color-background-weak:
-    value: "{!palette-gray-100}"
+    value: "{!palette-gray-95}"
     comment: Weak default background color.
   color-background-weaker:
     value: "{!palette-gray-100}"
@@ -201,12 +201,15 @@ props:
   color-background-body-elevation:
     value: "{!palette-gray-95}"
     comment: Elevation token for color-background-body elements.
+  color-background-body-elevation-primary:
+    value: "{!palette-gray-95}"
+    comment: Primary elevation token for color-background-body elements.
   color-background-weak-elevation:
-    value: "{!palette-gray-100}"
+    value: "{!palette-gray-90}"
     comment: Elevation token for color-background-weak elements.
   color-background-elevation:
-    value: "{!palette-gray-95}"
+    value: "{!palette-gray-90}"
     comment: Elevation token for color-background elements.
   color-background-strong-elevation:
-    value: "{!palette-gray-90}"
+    value: "{!palette-gray-85}"
     comment: Elevation token for color-background-strong elements.
diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml b/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml
index d46ed7a693..c0ea039506 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml
@@ -31,7 +31,7 @@ props:
     value: "{!palette-blue-30}"
     comment: Strong primary border color
   color-border-primary:
-    value: "{!palette-blue-60}"
+    value: "{!palette-blue-55}"
     comment: Primary border color
   color-border-primary-weak:
     value: "{!palette-gray-80}"
diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
index 08b317da40..2e4aa7da6a 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
@@ -48,7 +48,7 @@ props:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-80}"
     comment: "Weaker shadow border for primary interactions."
   shadow-border-primary:
-    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-60}"
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-55}"
     comment: "Default shadow border for primary interactions."
   shadow-border-primary-strong:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-30}"
diff --git a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
index 0cc18d0203..f8e54a5267 100644
--- a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
@@ -65,18 +65,6 @@ props:
     comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens."
 
   #elevation background
-  color-background-body-elevation:
-    value: "{!palette-gray-95}"
-    comment: Elevation token for color-background-body elements.
-  color-background-weak-elevation:
-    value: "{!palette-gray-100}"
-    comment: Elevation token for color-background-weak elements.
-  color-background-elevation:
-    value: "{!palette-gray-95}"
-    comment: Elevation token for color-background elements.
-  color-background-strong-elevation:
-    value: "{!palette-gray-90}"
-    comment: Elevation token for color-background-strong elements.
   color-background-inverse-weak-elevation:
     value: "{!palette-gray-100}"
     comment: Elevation token for color-background-inverse-weak elements.
diff --git a/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap b/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap
index 1e7b20ed73..453c3f0fae 100644
--- a/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap
+++ b/packages/paste-libraries/data-visualization/__test__/__snapshots__/index.spec.tsx.snap
@@ -18,11 +18,11 @@ Object {
     "rgb(109, 46, 209)",
     "rgb(136, 145, 170)",
     "rgb(117, 12, 12)",
-    "rgb(235, 86, 86)",
+    "rgb(236, 91, 91)",
   ],
   "credits": Object {
     "style": Object {
-      "color": "rgb(142, 150, 174)",
+      "color": "rgb(139, 147, 170)",
     },
   },
   "labels": Object {
@@ -184,11 +184,11 @@ Object {
     "rgb(109, 46, 209)",
     "rgb(136, 145, 170)",
     "rgb(117, 12, 12)",
-    "rgb(235, 86, 86)",
+    "rgb(236, 91, 91)",
   ],
   "credits": Object {
     "style": Object {
-      "color": "rgb(142, 150, 174)",
+      "color": "rgb(139, 147, 170)",
     },
   },
   "labels": Object {
diff --git a/packages/paste-website/src/__tests__/colorGradient.test.tsx b/packages/paste-website/src/__tests__/colorGradient.test.tsx
index 033d0e6c6d..4d2a8bc3ea 100644
--- a/packages/paste-website/src/__tests__/colorGradient.test.tsx
+++ b/packages/paste-website/src/__tests__/colorGradient.test.tsx
@@ -4,7 +4,7 @@ const sampleAliases = ["palette-gray-80", "palette-gray-100", "palette-gray-20",
 const sortedAliases = ["palette-gray-100", "palette-gray-80", "palette-gray-60", "palette-gray-20"];
 const aliasValues = [
   "#121c2d",
-  "#19273E",
+  "#18253C",
   "#1f304c",
   "#25395b",
   "#394762",
@@ -13,7 +13,7 @@ const aliasValues = [
   "#606b85",
   "#67728e",
   "#8891aa",
-  "#8e96ae",
+  "#8B93AA",
   "#cacdd8",
   "#e1e3ea",
   "#edeef2",
diff --git a/packages/paste-website/src/pages/components/label/index.mdx b/packages/paste-website/src/pages/components/label/index.mdx
index 39b0698fdf..863c8c0839 100644
--- a/packages/paste-website/src/pages/components/label/index.mdx
+++ b/packages/paste-website/src/pages/components/label/index.mdx
@@ -167,6 +167,18 @@ Use required indicators to show users which fields they must fill out.
 </>`}
 </LivePreview>
 
+### Optional Label
+
+Use `optional` prop to show users which fields are optional to fill out.
+
+<LivePreview scope={{Input, Label, HelpText}} language="jsx">
+  {`<>
+  <Label htmlFor="email_address_1" optional>Email address</Label>
+  <Input aria-describedby="email_help_text" id="email_address_1" name="email_address_1" type="email" placeholder="example@twilio.com" onChange={() => {}}/>
+  <HelpText id="email_help_text">Use your work email address.</HelpText>
+</>`}
+</LivePreview>
+
 ### Disabled Label
 
 Use the disabled prop if a the label is associated with a disabled form field to show users that they can't interact with the field.
diff --git a/yarn.lock b/yarn.lock
index c6b43a1128..3600dddeac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13284,6 +13284,7 @@ __metadata:
     "@twilio-paste/screen-reader-only": ^14.0.1
     "@twilio-paste/style-props": ^10.0.1
     "@twilio-paste/styling-library": ^4.0.1
+    "@twilio-paste/text": ^11.0.1
     "@twilio-paste/theme": ^12.0.1
     "@twilio-paste/types": ^7.0.1
     "@twilio-paste/uid-library": ^3.0.1
@@ -13304,6 +13305,7 @@ __metadata:
     "@twilio-paste/screen-reader-only": ^14.0.0
     "@twilio-paste/style-props": ^10.0.0
     "@twilio-paste/styling-library": ^4.0.0
+    "@twilio-paste/text": ^11.0.1
     "@twilio-paste/theme": ^12.0.0
     "@twilio-paste/types": ^7.0.0
     "@twilio-paste/uid-library": ^3.0.0