diff --git a/packages/manager/.changeset/pr-11757-tech-stories-1740683464911.md b/packages/manager/.changeset/pr-11757-tech-stories-1740683464911.md
new file mode 100644
index 00000000000..4aaf5affe96
--- /dev/null
+++ b/packages/manager/.changeset/pr-11757-tech-stories-1740683464911.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+4.0.0 Design Tokens - New Spacing & Badge Tokens ([#11757](https://github.com/linode/manager/pull/11757))
diff --git a/packages/manager/package.json b/packages/manager/package.json
index bacfbcfadd5..90b594ca2de 100644
--- a/packages/manager/package.json
+++ b/packages/manager/package.json
@@ -24,7 +24,7 @@
     "@fontsource/nunito-sans": "^5.1.1",
     "@hookform/resolvers": "3.9.1",
     "@linode/api-v4": "workspace:*",
-    "@linode/design-language-system": "^3.0.0",
+    "@linode/design-language-system": "^4.0.0",
     "@linode/search": "workspace:*",
     "@linode/ui": "workspace:*",
     "@linode/validation": "workspace:*",
diff --git a/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts b/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts
index a7a40b9a07b..22f172f60c2 100644
--- a/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts
+++ b/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts
@@ -82,8 +82,8 @@ export const StyledAccordion = styled(Accordion, {
         fontWeight: theme.tokens.font.FontWeight.Extrabold,
         letterSpacing: theme.tokens.typography.Heading.OverlineLetterSpacing,
         lineHeight: theme.tokens.font.LineHeight.Xxxs,
-        paddingLeft: theme.tokens.spacing[50],
-        paddingRight: theme.tokens.spacing[50],
+        paddingLeft: theme.tokens.spacing.S12,
+        paddingRight: theme.tokens.spacing.S12,
         textTransform: 'uppercase',
         transition: theme.transitions.create(['opacity']),
         ...(props.isCollapsed && {
@@ -130,8 +130,8 @@ export const StyledAccordion = styled(Accordion, {
       backgroundColor: theme.tokens.color.Neutrals[90],
       maxHeight: '48px',
       minHeight: '48px',
-      paddingLeft: theme.tokens.spacing[50],
-      paddingRight: theme.tokens.spacing[40],
+      paddingLeft: theme.tokens.spacing.S12,
+      paddingRight: theme.tokens.spacing.S8,
       svg: {
         fill: theme.tokens.color.Neutrals['White'],
         stroke: 'transparent',
@@ -139,7 +139,7 @@ export const StyledAccordion = styled(Accordion, {
     },
     // Spacing between the accordion and the next accordion
     '.MuiCollapse-entered .MuiAccordionDetails-root': {
-      marginBottom: theme.tokens.spacing[40],
+      marginBottom: theme.tokens.spacing.S8,
     },
     backgroundColor: theme.tokens.color.Neutrals[90],
   })
diff --git a/packages/manager/src/components/PrimaryNav/PrimaryNavToggle.tsx b/packages/manager/src/components/PrimaryNav/PrimaryNavToggle.tsx
index 86c25482231..d05b59112a7 100644
--- a/packages/manager/src/components/PrimaryNav/PrimaryNavToggle.tsx
+++ b/packages/manager/src/components/PrimaryNav/PrimaryNavToggle.tsx
@@ -76,5 +76,5 @@ const StyledIconButton = styled(IconButton, {
     transition: theme.transitions.create(['color']),
     width: '16px',
   },
-  padding: theme.tokens.spacing[60],
+  padding: theme.tokens.spacing.S16,
 }));
diff --git a/packages/manager/src/components/TypeToConfirm/TypeToConfirm.tsx b/packages/manager/src/components/TypeToConfirm/TypeToConfirm.tsx
index 99aeeaab8c5..10c109d3d22 100644
--- a/packages/manager/src/components/TypeToConfirm/TypeToConfirm.tsx
+++ b/packages/manager/src/components/TypeToConfirm/TypeToConfirm.tsx
@@ -74,8 +74,8 @@ export const TypeToConfirm = (props: TypeToConfirmProps) => {
           {isCloseAccount && (
             <FormGroup
               sx={(theme) => ({
-                marginTop: theme.tokens.spacing[20],
-                paddingLeft: theme.tokens.spacing[10],
+                marginTop: theme.tokens.spacing.S4,
+                paddingLeft: theme.tokens.spacing.S2,
               })}
             >
               <FormControlLabel
diff --git a/packages/manager/src/features/Account/CloseAccountDialog.tsx b/packages/manager/src/features/Account/CloseAccountDialog.tsx
index 68656ba8381..df977417b48 100644
--- a/packages/manager/src/features/Account/CloseAccountDialog.tsx
+++ b/packages/manager/src/features/Account/CloseAccountDialog.tsx
@@ -83,9 +83,9 @@ const CloseAccountDialog = ({ closeDialog, open }: Props) => {
       }}
       typographyStyleSx={(theme) => ({
         borderTop: `1px solid ${theme.tokens.border.Normal}`,
-        marginBottom: theme.tokens.spacing[40],
-        marginTop: theme.tokens.spacing[60],
-        paddingTop: theme.tokens.spacing[60],
+        marginBottom: theme.tokens.spacing.S8,
+        marginTop: theme.tokens.spacing.S16,
+        paddingTop: theme.tokens.spacing.S16,
         width: '100%',
       })}
       expand
@@ -117,7 +117,7 @@ const CloseAccountDialog = ({ closeDialog, open }: Props) => {
       </StyledNoticeWrapper>
       <Typography
         sx={(theme) => ({
-          marginTop: theme.tokens.spacing[60],
+          marginTop: theme.tokens.spacing.S16,
           order: 1,
         })}
       >
diff --git a/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx b/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx
index 4c80bb561ef..f1daef16f1d 100644
--- a/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx
+++ b/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx
@@ -454,7 +454,7 @@ const UpdateContactInformationForm = ({ focusEmail, onClose }: Props) => {
             sx={{
               alignItems: 'flex-start',
               display: 'flex',
-              marginTop: (theme) => theme.tokens.spacing[60],
+              marginTop: (theme) => theme.tokens.spacing.S16,
             }}
           >
             <Checkbox
@@ -462,7 +462,7 @@ const UpdateContactInformationForm = ({ focusEmail, onClose }: Props) => {
                 setBillingAgreementChecked(!billingAgreementChecked)
               }
               sx={(theme) => ({
-                marginRight: theme.tokens.spacing[40],
+                marginRight: theme.tokens.spacing.S8,
                 padding: 0,
               })}
               checked={billingAgreementChecked}
diff --git a/packages/manager/src/features/TopMenu/InternalAdminBanner.tsx b/packages/manager/src/features/TopMenu/InternalAdminBanner.tsx
index c8504d0f5ec..886cb21584d 100644
--- a/packages/manager/src/features/TopMenu/InternalAdminBanner.tsx
+++ b/packages/manager/src/features/TopMenu/InternalAdminBanner.tsx
@@ -11,7 +11,7 @@ export const InternalAdminBanner = (props: InternalAdminBannerProps) => {
   return (
     <Box
       bgcolor={(theme) => theme.tokens.color.Pink[40]}
-      padding={(theme) => theme.tokens.spacing[60]}
+      padding={(theme) => theme.tokens.spacing.S16}
       textAlign="center"
     >
       <Typography
diff --git a/packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx b/packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx
index b598205c1b5..e9bf38aef8d 100644
--- a/packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx
+++ b/packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx
@@ -186,19 +186,19 @@ const StyledChip = styled(Chip, {
 })<{ adjustBorderRadius: boolean }>(({ theme, ...props }) => ({
   '& .MuiChip-icon': {
     margin: 0,
-    marginLeft: theme.tokens.spacing[10],
+    marginLeft: theme.tokens.spacing.S2,
   },
   '& .MuiChip-label': {
     padding: 0,
   },
   backgroundColor: theme.tokens.header.Badge.Background,
-  borderRadius: props.adjustBorderRadius ? theme.tokens.spacing[50] : '50%',
+  borderRadius: props.adjustBorderRadius ? theme.tokens.spacing.S12 : '50%',
   color: theme.tokens.header.Badge.Text,
   flexDirection: 'row-reverse',
   font: theme.tokens.typography.Label.Bold.Xs,
   justifyContent: 'center',
   left: 20,
-  padding: `${theme.tokens.spacing[20]} ${theme.tokens.spacing[30]}`,
+  padding: `${theme.tokens.spacing.S4} ${theme.tokens.spacing.S6}`,
   position: 'absolute',
   top: '-3px',
 }));
diff --git a/packages/manager/src/features/TopMenu/SearchBar/SearchBar.tsx b/packages/manager/src/features/TopMenu/SearchBar/SearchBar.tsx
index 188c4f91353..1fca96ca33b 100644
--- a/packages/manager/src/features/TopMenu/SearchBar/SearchBar.tsx
+++ b/packages/manager/src/features/TopMenu/SearchBar/SearchBar.tsx
@@ -293,7 +293,7 @@ const SearchBarComponent = (props: SearchProps) => {
             top: '50%',
             transform: 'translate(-50%, -50%)',
             visibility: searchActive ? 'visible' : 'hidden',
-            width: `calc(100% - ${theme.tokens.spacing[80]})`,
+            width: `calc(100% - ${theme.tokens.spacing.S32})`,
             zIndex: searchActive ? 3 : 0,
           },
         }}
@@ -433,7 +433,7 @@ const SearchBarComponent = (props: SearchProps) => {
           }}
           sx={(theme) => ({
             '& .MuiInput-root .MuiInput-input': {
-              padding: `${theme.tokens.spacing[30]} ${theme.tokens.spacing[40]}`,
+              padding: `${theme.tokens.spacing.S6} ${theme.tokens.spacing.S8}`,
             },
             '&.MuiAutocomplete-root': {
               '&.Mui-focused, &.Mui-focused:hover': {
@@ -443,7 +443,7 @@ const SearchBarComponent = (props: SearchProps) => {
                 borderColor: theme.tokens.header.Search.Border.Hover,
               },
               '.MuiInput-root': {
-                paddingRight: theme.tokens.spacing[40],
+                paddingRight: theme.tokens.spacing.S8,
               },
               border: `1px solid ${theme.tokens.header.Search.Border.Default}`,
             },
diff --git a/packages/manager/src/features/TopMenu/TopMenu.tsx b/packages/manager/src/features/TopMenu/TopMenu.tsx
index 56b75df6450..418e2de4c91 100644
--- a/packages/manager/src/features/TopMenu/TopMenu.tsx
+++ b/packages/manager/src/features/TopMenu/TopMenu.tsx
@@ -52,7 +52,7 @@ export const TopMenu = React.memo((props: TopMenuProps) => {
             <TopMenuTooltip title="Expand side menu">
               <IconButton
                 sx={(theme) => ({
-                  padding: theme.tokens.spacing[60],
+                  padding: theme.tokens.spacing.S16,
                 })}
                 aria-label="open menu"
                 color="inherit"
@@ -65,13 +65,13 @@ export const TopMenu = React.memo((props: TopMenuProps) => {
           )}
           <Box
             gap={(theme) => ({
-              md: theme.tokens.spacing[80],
-              xs: theme.tokens.spacing[50],
+              md: theme.tokens.spacing.S32,
+              xs: theme.tokens.spacing.S12,
             })}
             sx={(theme) => ({
               paddingLeft: {
                 md: 0,
-                sm: theme.tokens.spacing[60],
+                sm: theme.tokens.spacing.S16,
               },
             })}
             alignItems="center"
@@ -104,17 +104,17 @@ export const TopMenu = React.memo((props: TopMenuProps) => {
           <Stack
             sx={(theme) => ({
               gap: {
-                sm: theme.tokens.spacing[70],
-                xs: theme.tokens.spacing[40],
+                sm: theme.tokens.spacing.S24,
+                xs: theme.tokens.spacing.S8,
               },
               paddingLeft: {
-                sm: theme.tokens.spacing[80],
-                xs: theme.tokens.spacing[60],
+                sm: theme.tokens.spacing.S32,
+                xs: theme.tokens.spacing.S16,
               },
               paddingRight: {
                 md: 0,
-                sm: theme.tokens.spacing[60],
-                xs: theme.tokens.spacing[40],
+                sm: theme.tokens.spacing.S16,
+                xs: theme.tokens.spacing.S8,
               },
             })}
             alignItems="center"
@@ -125,8 +125,8 @@ export const TopMenu = React.memo((props: TopMenuProps) => {
             <Box
               gap={{
                 md: 0,
-                sm: theme.tokens.spacing[60],
-                xs: theme.tokens.spacing[40],
+                sm: theme.tokens.spacing.S16,
+                xs: theme.tokens.spacing.S8,
               }}
               display="flex"
             >
diff --git a/packages/manager/src/features/TopMenu/TopMenuTooltip.tsx b/packages/manager/src/features/TopMenu/TopMenuTooltip.tsx
index a58d8ace287..0ee598029c7 100644
--- a/packages/manager/src/features/TopMenu/TopMenuTooltip.tsx
+++ b/packages/manager/src/features/TopMenu/TopMenuTooltip.tsx
@@ -30,5 +30,5 @@ export const topMenuIconButtonSx = (theme: Theme) => ({
     color: theme.tokens.header.Icon.Hover,
   },
   color: theme.tokens.header.Icon.Default,
-  padding: theme.tokens.spacing[40],
+  padding: theme.tokens.spacing.S8,
 });
diff --git a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
index e81269d7945..def1cd3b865 100644
--- a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
+++ b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
@@ -166,7 +166,7 @@ const StyledUserMenuButton = styled(Button, {
       font: theme.tokens.typography.Label.Bold.S,
     },
     marginLeft: 0,
-    marginRight: theme.tokens.spacing[40],
+    marginRight: theme.tokens.spacing.S8,
   },
   '.MuiStack-root .MuiTypography-root': {
     color: open
@@ -181,6 +181,6 @@ const StyledUserMenuButton = styled(Button, {
     },
   },
   [theme.breakpoints.down('sm')]: {
-    padding: `${theme.tokens.spacing[30]} ${theme.tokens.spacing[40]}`,
+    padding: `${theme.tokens.spacing.S6} ${theme.tokens.spacing.S8}`,
   },
 }));
diff --git a/packages/manager/src/features/TopMenu/UserMenu/UserMenuPopover.tsx b/packages/manager/src/features/TopMenu/UserMenu/UserMenuPopover.tsx
index 1703b99b3e2..c3ad08204b8 100644
--- a/packages/manager/src/features/TopMenu/UserMenu/UserMenuPopover.tsx
+++ b/packages/manager/src/features/TopMenu/UserMenu/UserMenuPopover.tsx
@@ -158,8 +158,8 @@ export const UserMenuPopover = (props: UserMenuPopoverProps) => {
       slotProps={{
         paper: {
           sx: (theme) => ({
-            paddingX: theme.tokens.spacing[70],
-            paddingY: theme.tokens.spacing[60],
+            paddingX: theme.tokens.spacing.S24,
+            paddingY: theme.tokens.spacing.S16,
           }),
         },
       }}
@@ -174,10 +174,10 @@ export const UserMenuPopover = (props: UserMenuPopoverProps) => {
     >
       <Stack
         data-qa-user-menu
-        gap={(theme) => theme.tokens.spacing[60]}
+        gap={(theme) => theme.tokens.spacing.S16}
         minWidth={250}
       >
-        <Stack display="flex" gap={(theme) => theme.tokens.spacing[40]}>
+        <Stack display="flex" gap={(theme) => theme.tokens.spacing.S8}>
           {canSwitchBetweenParentOrProxyAccount && (
             <Typography>Current account:</Typography>
           )}
@@ -218,8 +218,8 @@ export const UserMenuPopover = (props: UserMenuPopoverProps) => {
             <Heading>Account</Heading>
             <Divider />
             <Stack
-              gap={(theme) => theme.tokens.spacing[40]}
-              mt={(theme) => theme.tokens.spacing[40]}
+              gap={(theme) => theme.tokens.spacing.S8}
+              mt={(theme) => theme.tokens.spacing.S8}
             >
               {accountLinks.map((menuLink) =>
                 menuLink.hide ? null : (
diff --git a/packages/ui/.changeset/pr-11757-tech-stories-1740683477384.md b/packages/ui/.changeset/pr-11757-tech-stories-1740683477384.md
new file mode 100644
index 00000000000..332a88931b7
--- /dev/null
+++ b/packages/ui/.changeset/pr-11757-tech-stories-1740683477384.md
@@ -0,0 +1,5 @@
+---
+"@linode/ui": Tech Stories
+---
+
+4.0.0 Design Tokens - New Spacing & Badge Tokens ([#11757](https://github.com/linode/manager/pull/11757))
diff --git a/packages/ui/package.json b/packages/ui/package.json
index e00e859248a..2c4a7562b63 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -18,7 +18,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@linode/design-language-system": "^3.0.0",
+    "@linode/design-language-system": "^4.0.0",
     "@mui/icons-material": "^6.4.5",
     "@mui/material": "^6.4.5",
     "@mui/utils": "^6.4.3",
diff --git a/packages/ui/src/foundations/themes/dark.ts b/packages/ui/src/foundations/themes/dark.ts
index 1860ad51506..fb38938f1a3 100644
--- a/packages/ui/src/foundations/themes/dark.ts
+++ b/packages/ui/src/foundations/themes/dark.ts
@@ -424,34 +424,34 @@ export const darkTheme: ThemeOptions = {
           color: Button.Primary.Default.Text,
         },
         colorError: {
-          backgroundColor: Badge.Negative.Background,
-          color: Badge.Negative.Text,
+          backgroundColor: Badge.Negative.Subtle.Background,
+          color: Badge.Negative.Subtle.Text,
         },
         colorInfo: {
-          backgroundColor: Badge.Informative.Background,
-          color: Badge.Informative.Text,
+          backgroundColor: Badge.Informative.Subtle.Background,
+          color: Badge.Informative.Subtle.Text,
         },
         colorPrimary: {
-          backgroundColor: Badge.Informative.Background,
-          color: Badge.Informative.Text,
+          backgroundColor: Badge.Informative.Subtle.Background,
+          color: Badge.Informative.Subtle.Text,
         },
         colorSecondary: {
           '&.MuiChip-clickable': {
             '&:hover': {
-              backgroundColor: Badge.Informative.Background,
-              color: Badge.Informative.Text,
+              backgroundColor: Badge.Informative.Subtle.Background,
+              color: Badge.Informative.Subtle.Text,
             },
           },
-          backgroundColor: Badge.Informative.Background,
-          color: Badge.Informative.Text,
+          backgroundColor: Badge.Informative.Subtle.Background,
+          color: Badge.Informative.Subtle.Text,
         },
         colorSuccess: {
-          backgroundColor: Badge.Positive.Background,
-          color: Badge.Positive.Text,
+          backgroundColor: Badge.Positive.Subtle.Background,
+          color: Badge.Positive.Subtle.Text,
         },
         colorWarning: {
-          backgroundColor: Badge.Warning.Background,
-          color: Badge.Warning.Text,
+          backgroundColor: Badge.Warning.Subtle.Background,
+          color: Badge.Warning.Subtle.Text,
         },
         outlined: {
           '& .MuiChip-label': {
diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts
index e424fe4a349..fdac84fd8f9 100644
--- a/packages/ui/src/foundations/themes/light.ts
+++ b/packages/ui/src/foundations/themes/light.ts
@@ -544,7 +544,7 @@ export const lightTheme: ThemeOptions = {
           },
           '.MuiButton-startIcon': {
             marginLeft: 0,
-            marginRight: Spacing[20],
+            marginRight: Spacing.S4,
           },
           border: 'none',
           borderRadius: 1,
@@ -1190,7 +1190,7 @@ export const lightTheme: ThemeOptions = {
           [breakpoints.up('lg')]: {
             minWidth: 250,
           },
-          marginTop: Spacing[20],
+          marginTop: Spacing.S4,
           minWidth: 200,
         },
       },
@@ -1507,13 +1507,13 @@ export const lightTheme: ThemeOptions = {
           },
           // Spacing for collapsible inner content
           '.MuiCollapse-root': {
-            padding: Spacing[60],
+            padding: Spacing.S16,
           },
           borderBottom: `1px solid ${Table.Row.Border}`,
           fontSize: Font.FontSize.Xs,
           height: '40px',
           lineHeight: Font.LineHeight.Xs,
-          padding: `0 ${Spacing[50]}`,
+          padding: `0 ${Spacing.S12}`,
         },
         stickyHeader: {
           // No idea where sticky cells are getting their background from
@@ -1566,7 +1566,7 @@ export const lightTheme: ThemeOptions = {
           fontSize: Font.FontSize.Xs,
           svg: {
             height: '16px',
-            margin: `0 ${Spacing[20]}`,
+            margin: `0 ${Spacing.S4}`,
             path: {
               fill: Table.HeaderNested.Text,
             },
@@ -1625,10 +1625,10 @@ export const lightTheme: ThemeOptions = {
       styleOverrides: {
         root: {
           [breakpoints.down('md')]: {
-            padding: `0 ${Spacing[40]}`,
+            padding: `0 ${Spacing.S8}`,
           },
           [breakpoints.up('md')]: {
-            padding: `0 ${Spacing[60]}`, // To override default MUI breakpoint padding
+            padding: `0 ${Spacing.S16}`, // To override default MUI breakpoint padding
           },
           height: topMenuHeight,
           width: '100%',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dda9eb5c370..dd6de0275e8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -98,8 +98,8 @@ importers:
         specifier: workspace:*
         version: link:../api-v4
       '@linode/design-language-system':
-        specifier: ^3.0.0
-        version: 3.0.0
+        specifier: ^4.0.0
+        version: 4.0.0
       '@linode/search':
         specifier: workspace:*
         version: link:../search
@@ -591,8 +591,8 @@ importers:
         specifier: ^11.11.0
         version: 11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
       '@linode/design-language-system':
-        specifier: ^3.0.0
-        version: 3.0.0
+        specifier: ^4.0.0
+        version: 4.0.0
       '@mui/icons-material':
         specifier: ^6.4.5
         version: 6.4.5(@mui/material@6.4.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
@@ -2626,8 +2626,8 @@ packages:
   '@leichtgewicht/ip-codec@2.0.5':
     resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==}
 
-  '@linode/design-language-system@3.0.0':
-    resolution: {integrity: sha512-LbrDgN0YbwDa1qsbPBV+BreFjk06R/CbcPCvWM4BvU6zrxqCkPVdErwfqJvdtDxRColXbIfn6NeFgq0sJaQ+sw==}
+  '@linode/design-language-system@4.0.0':
+    resolution: {integrity: sha512-SKM4AG0GpFjgirKI+7bG3RT6ai3VU7MJJLUvaZsHf0OgmEJ25qWH7DqGOx5FWSTtzX0YemJSrwnKMpL+3CLawg==}
 
   '@linode/eslint-plugin-cloud-manager@0.0.7':
     resolution: {integrity: sha512-83ZDbDQGsXCKxagX6CWszFZbsuX/fHSFn/i+P1FGYDm/0qnIo2XypB/lTdJhHJwvq1j2z+0VDZIMP7YLF5U6Sg==}
@@ -12583,7 +12583,7 @@ snapshots:
 
   '@leichtgewicht/ip-codec@2.0.5': {}
 
-  '@linode/design-language-system@3.0.0': {}
+  '@linode/design-language-system@4.0.0': {}
 
   '@linode/eslint-plugin-cloud-manager@0.0.7(eslint@7.32.0)':
     dependencies: