diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.js b/docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.js
index 360d2c8d2c581a..468eed3736a28b 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.js
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.js
@@ -26,16 +26,6 @@ function Stat({ description, value, sx, ...props }) {
 
 Stat.propTypes = {
   description: PropTypes.node,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([
-    PropTypes.arrayOf(
-      PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool]),
-    ),
-    PropTypes.func,
-    PropTypes.object,
-  ]),
   value: PropTypes.node,
 };
 
@@ -49,7 +39,7 @@ export default function ColorInversionAnyParent() {
           alignItems: 'center',
           rowGap: 2,
           columnGap: 8,
-          p: 2,
+          p: 4,
           background: (theme) =>
             `linear-gradient(45deg, ${theme.vars.palette.neutral[800]}, ${theme.vars.palette.neutral[600]})`,
           borderRadius: 'sm',
@@ -58,15 +48,11 @@ export default function ColorInversionAnyParent() {
       ]}
     >
       <div>
-        <Typography sx={{ my: 2 }}>
+        <Typography sx={{ mb: 2 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-          veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-          commodo consequat.
+          tempor incididunt ut labore et dolore magna aliqua.
         </Typography>
-        <Button variant="soft" sx={{ mt: 1 }}>
-          Learn more
-        </Button>
+        <Button variant="soft">Learn more</Button>
       </div>
       <Box
         sx={{
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.tsx
index 7d07e8c37aa1e7..3052c901dff3e6 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.tsx
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.tsx
@@ -1,26 +1,18 @@
 import * as React from 'react';
 import { applySolidInversion } from '@mui/joy/colorInversion';
-import Box, { BoxProps } from '@mui/joy/Box';
+import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 import Typography from '@mui/joy/Typography';
 
 function Stat({
   description,
   value,
-  sx,
-  ...props
 }: {
   description: React.ReactNode;
   value: React.ReactNode;
-} & BoxProps) {
+}) {
   return (
-    <Box
-      {...props}
-      sx={[
-        { borderLeft: 3, borderColor: 'divider', px: 2, py: 0.5 },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
-    >
+    <Box sx={{ borderLeft: 3, borderColor: 'divider', px: 2, py: 0.5 }}>
       <Typography level="h3" component="div">
         {value}
       </Typography>
@@ -41,24 +33,20 @@ export default function ColorInversionAnyParent() {
           alignItems: 'center',
           rowGap: 2,
           columnGap: 8,
-          p: 2,
+          p: 4,
+          borderRadius: 'sm',
           background: (theme) =>
             `linear-gradient(45deg, ${theme.vars.palette.neutral[800]}, ${theme.vars.palette.neutral[600]})`,
-          borderRadius: 'sm',
         },
         applySolidInversion('neutral'),
       ]}
     >
       <div>
-        <Typography sx={{ my: 2 }}>
+        <Typography sx={{ mb: 2 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-          veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-          commodo consequat.
+          tempor incididunt ut labore et dolore magna aliqua.
         </Typography>
-        <Button variant="soft" sx={{ mt: 1 }}>
-          Learn more
-        </Button>
+        <Button variant="soft">Learn more</Button>
       </div>
       <Box
         sx={{
@@ -70,8 +58,8 @@ export default function ColorInversionAnyParent() {
           gap: 3,
         }}
       >
-        <Stat value="4M" description="Weekly download on NPM" />
-        <Stat value="87k" description="Stars on Github" />
+        <Stat value="4M" description="Weekly downloads" />
+        <Stat value="87k" description="Stars on GitHub" />
         <Stat value="2.7k" description="Open source contributors" />
         <Stat value="18.4k" description="Followers on Twitter" />
       </Box>
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionAnyParentStyled.js b/docs/data/joy/main-features/color-inversion/ColorInversionAnyParentStyled.js
new file mode 100644
index 00000000000000..87786bf8590e21
--- /dev/null
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionAnyParentStyled.js
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/joy/styles';
+import { applySolidInversion } from '@mui/joy/colorInversion';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Typography from '@mui/joy/Typography';
+
+const StyledBox = styled(Box)(
+  ({ theme }) => ({
+    padding: 32,
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr',
+    alignItems: 'center',
+    rowGap: 2,
+    columnGap: 8,
+    borderRadius: 8,
+    background: `linear-gradient(45deg, ${theme.vars.palette.neutral[800]}, ${theme.vars.palette.neutral[600]})`,
+  }),
+  applySolidInversion('neutral'),
+);
+
+function Stat({ description, value }) {
+  return (
+    <Box sx={{ borderLeft: 3, borderColor: 'divider', px: 2, py: 0.5 }}>
+      <Typography level="h3" component="div">
+        {value}
+      </Typography>
+      <Typography level="title-sm" textColor="text.secondary">
+        {description}
+      </Typography>
+    </Box>
+  );
+}
+
+Stat.propTypes = {
+  description: PropTypes.node,
+  value: PropTypes.node,
+};
+
+export default function ColorInversionAnyParentStyled() {
+  return (
+    <StyledBox>
+      <div>
+        <Typography sx={{ mb: 2 }}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </Typography>
+        <Button variant="soft">Learn more</Button>
+      </div>
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: {
+            xs: 'repeat(auto-fill, minmax(min(100%, 180px), 1fr))',
+            sm: '1fr 1fr',
+          },
+          gap: 3,
+        }}
+      >
+        <Stat value="4M" description="Weekly downloads" />
+        <Stat value="87k" description="Stars on GitHub" />
+        <Stat value="2.7k" description="Open source contributors" />
+        <Stat value="18.4k" description="Followers on Twitter" />
+      </Box>
+    </StyledBox>
+  );
+}
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionAnyParentStyled.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionAnyParentStyled.tsx
new file mode 100644
index 00000000000000..2386ec65eb59b1
--- /dev/null
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionAnyParentStyled.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { styled } from '@mui/joy/styles';
+import { applySolidInversion } from '@mui/joy/colorInversion';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Typography from '@mui/joy/Typography';
+
+const StyledBox = styled(Box)(
+  ({ theme }) => ({
+    padding: 32,
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr',
+    alignItems: 'center',
+    rowGap: 2,
+    columnGap: 8,
+    borderRadius: 8,
+    background: `linear-gradient(45deg, ${theme.vars.palette.neutral[800]}, ${theme.vars.palette.neutral[600]})`,
+  }),
+  applySolidInversion('neutral'),
+);
+
+function Stat({
+  description,
+  value,
+}: {
+  description: React.ReactNode;
+  value: React.ReactNode;
+}) {
+  return (
+    <Box sx={{ borderLeft: 3, borderColor: 'divider', px: 2, py: 0.5 }}>
+      <Typography level="h3" component="div">
+        {value}
+      </Typography>
+      <Typography level="title-sm" textColor="text.secondary">
+        {description}
+      </Typography>
+    </Box>
+  );
+}
+
+export default function ColorInversionAnyParentStyled() {
+  return (
+    <StyledBox>
+      <div>
+        <Typography sx={{ mb: 2 }}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </Typography>
+        <Button variant="soft">Learn more</Button>
+      </div>
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: {
+            xs: 'repeat(auto-fill, minmax(min(100%, 180px), 1fr))',
+            sm: '1fr 1fr',
+          },
+          gap: 3,
+        }}
+      >
+        <Stat value="4M" description="Weekly downloads" />
+        <Stat value="87k" description="Stars on GitHub" />
+        <Stat value="2.7k" description="Open source contributors" />
+        <Stat value="18.4k" description="Followers on Twitter" />
+      </Box>
+    </StyledBox>
+  );
+}
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionFooter.js b/docs/data/joy/main-features/color-inversion/ColorInversionFooter.js
index 4e90dfe910092e..5b8c690c6be8b0 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionFooter.js
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionFooter.js
@@ -98,9 +98,7 @@ export default function ColorInversionFooter() {
           </AspectRatio>
           <CardContent>
             <Typography level="body-sm">Intro to the MUI ecosystem</Typography>
-            <Typography level="body-xs" sx={{ mb: 0.5 }}>
-              MUI blog
-            </Typography>
+            <Typography level="body-xs">Blog post</Typography>
           </CardContent>
         </Card>
         <List
@@ -110,7 +108,7 @@ export default function ColorInversionFooter() {
           sx={{ flexGrow: 0, '--ListItem-radius': '8px', '--ListItem-gap': '0px' }}
         >
           <ListItem nested sx={{ width: { xs: '50%', md: 140 } }}>
-            <ListSubheader>Sitemap</ListSubheader>
+            <ListSubheader sx={{ fontWeight: 'xl' }}>Sitemap</ListSubheader>
             <List>
               <ListItem>
                 <ListItemButton>Services</ListItemButton>
@@ -124,7 +122,7 @@ export default function ColorInversionFooter() {
             </List>
           </ListItem>
           <ListItem nested sx={{ width: { xs: '50%', md: 180 } }}>
-            <ListSubheader>Product</ListSubheader>
+            <ListSubheader sx={{ fontWeight: 'xl' }}>Products</ListSubheader>
             <List sx={{ '--ListItemDecorator-size': '32px' }}>
               <ListItem>
                 <ListItemButton>
@@ -163,36 +161,17 @@ export default function ColorInversionFooter() {
                   <Chip
                     variant="soft"
                     size="sm"
-                    sx={{ minHeight: 20, fontSize: 'xs2', ml: 'auto' }}
+                    sx={{
+                      minHeight: 20,
+                      fontSize: 'xs2',
+                      fontWeight: 'lg',
+                      ml: 'auto',
+                    }}
                   >
-                    BETA
+                    Beta
                   </Chip>
                 </ListItemButton>
               </ListItem>
-              <ListItem>
-                <ListItemButton>
-                  <ListItemDecorator>
-                    <img
-                      alt=""
-                      src="/static/branding/product-designkits-dark.svg"
-                      width="24"
-                    />
-                  </ListItemDecorator>
-                  Design kits
-                </ListItemButton>
-              </ListItem>
-              <ListItem>
-                <ListItemButton>
-                  <ListItemDecorator>
-                    <img
-                      alt=""
-                      src="/static/branding/product-templates-dark.svg"
-                      width="24"
-                    />
-                  </ListItemDecorator>
-                  Templates
-                </ListItemButton>
-              </ListItem>
             </List>
           </ListItem>
         </List>
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionFooter.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionFooter.tsx
index 27c04e0be7739c..511a483426f791 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionFooter.tsx
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionFooter.tsx
@@ -103,9 +103,7 @@ export default function ColorInversionFooter() {
           </AspectRatio>
           <CardContent>
             <Typography level="body-sm">Intro to the MUI ecosystem</Typography>
-            <Typography level="body-xs" sx={{ mb: 0.5 }}>
-              MUI blog
-            </Typography>
+            <Typography level="body-xs">Blog post</Typography>
           </CardContent>
         </Card>
         <List
@@ -115,7 +113,7 @@ export default function ColorInversionFooter() {
           sx={{ flexGrow: 0, '--ListItem-radius': '8px', '--ListItem-gap': '0px' }}
         >
           <ListItem nested sx={{ width: { xs: '50%', md: 140 } }}>
-            <ListSubheader>Sitemap</ListSubheader>
+            <ListSubheader sx={{ fontWeight: 'xl' }}>Sitemap</ListSubheader>
             <List>
               <ListItem>
                 <ListItemButton>Services</ListItemButton>
@@ -129,7 +127,7 @@ export default function ColorInversionFooter() {
             </List>
           </ListItem>
           <ListItem nested sx={{ width: { xs: '50%', md: 180 } }}>
-            <ListSubheader>Product</ListSubheader>
+            <ListSubheader sx={{ fontWeight: 'xl' }}>Products</ListSubheader>
             <List sx={{ '--ListItemDecorator-size': '32px' }}>
               <ListItem>
                 <ListItemButton>
@@ -168,36 +166,17 @@ export default function ColorInversionFooter() {
                   <Chip
                     variant="soft"
                     size="sm"
-                    sx={{ minHeight: 20, fontSize: 'xs2', ml: 'auto' }}
+                    sx={{
+                      minHeight: 20,
+                      fontSize: 'xs2',
+                      fontWeight: 'lg',
+                      ml: 'auto',
+                    }}
                   >
-                    BETA
+                    Beta
                   </Chip>
                 </ListItemButton>
               </ListItem>
-              <ListItem>
-                <ListItemButton>
-                  <ListItemDecorator>
-                    <img
-                      alt=""
-                      src="/static/branding/product-designkits-dark.svg"
-                      width="24"
-                    />
-                  </ListItemDecorator>
-                  Design kits
-                </ListItemButton>
-              </ListItem>
-              <ListItem>
-                <ListItemButton>
-                  <ListItemDecorator>
-                    <img
-                      alt=""
-                      src="/static/branding/product-templates-dark.svg"
-                      width="24"
-                    />
-                  </ListItemDecorator>
-                  Templates
-                </ListItemButton>
-              </ListItem>
             </List>
           </ListItem>
         </List>
diff --git a/docs/data/joy/main-features/color-inversion/color-inversion.md b/docs/data/joy/main-features/color-inversion/color-inversion.md
index 11b9f2f225d2e8..b2ac541d72bd65 100644
--- a/docs/data/joy/main-features/color-inversion/color-inversion.md
+++ b/docs/data/joy/main-features/color-inversion/color-inversion.md
@@ -77,19 +77,7 @@ The examples below show how to use it with either the `sx` prop or the `styled`
 
 #### With the styled API
 
-```js
-import { styled } from '@mui/joy/styles';
-import { applySoftInversion } from '@mui/joy/colorInversion';
-
-const StyledBox = styled(Box)(
-  ({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    ...theme.variants.soft.primary,
-  }),
-  applySoftInversion('primary'),
-);
-```
+{{"demo": "ColorInversionAnyParentStyled.js"}}
 
 ## How it works