diff --git a/docs/data/joy/components/accordion/AccordionTransition.js b/docs/data/joy/components/accordion/AccordionTransition.js
index de2d4476fcba53..15908702f1506d 100644
--- a/docs/data/joy/components/accordion/AccordionTransition.js
+++ b/docs/data/joy/components/accordion/AccordionTransition.js
@@ -9,7 +9,7 @@ import Radio from '@mui/joy/Radio';
 import Stack from '@mui/joy/Stack';
 import Typography from '@mui/joy/Typography';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 export default function AccordionTransition() {
   const [transition, setTransition] = React.useState('0.2s ease');
diff --git a/docs/data/joy/components/badge/BadgeAlignment.js b/docs/data/joy/components/badge/BadgeAlignment.js
index 7f680cd6156126..4d0c4ac31ef6ad 100644
--- a/docs/data/joy/components/badge/BadgeAlignment.js
+++ b/docs/data/joy/components/badge/BadgeAlignment.js
@@ -6,7 +6,7 @@ import IconButton from '@mui/joy/IconButton';
 import ArrowUpward from '@mui/icons-material/ArrowUpward';
 import ArrowDownward from '@mui/icons-material/ArrowDownward';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 export default function BadgeAlignment() {
   const [anchorOrigin, setAnchorOrigin] = React.useState({
diff --git a/docs/data/joy/components/badge/BadgeAlignment.tsx b/docs/data/joy/components/badge/BadgeAlignment.tsx
index 37171c79fe3161..26cef0321dd2f4 100644
--- a/docs/data/joy/components/badge/BadgeAlignment.tsx
+++ b/docs/data/joy/components/badge/BadgeAlignment.tsx
@@ -6,7 +6,7 @@ import IconButton from '@mui/joy/IconButton';
 import ArrowUpward from '@mui/icons-material/ArrowUpward';
 import ArrowDownward from '@mui/icons-material/ArrowDownward';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 export default function BadgeAlignment() {
   const [anchorOrigin, setAnchorOrigin] = React.useState<BadgeProps['anchorOrigin']>(
diff --git a/docs/data/joy/components/grid/InteractiveGrid.js b/docs/data/joy/components/grid/InteractiveGrid.js
index c2faa3bb5819c6..6752884b6f1483 100644
--- a/docs/data/joy/components/grid/InteractiveGrid.js
+++ b/docs/data/joy/components/grid/InteractiveGrid.js
@@ -6,7 +6,7 @@ import RadioGroup from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';
 import Sheet from '@mui/joy/Sheet';
 
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 
 export default function InteractiveGrid() {
diff --git a/docs/data/joy/components/grid/InteractiveGrid.tsx b/docs/data/joy/components/grid/InteractiveGrid.tsx
index 00b0a52f1975a0..8059be0f4b3260 100644
--- a/docs/data/joy/components/grid/InteractiveGrid.tsx
+++ b/docs/data/joy/components/grid/InteractiveGrid.tsx
@@ -6,7 +6,7 @@ import RadioGroup from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';
 import Sheet from '@mui/joy/Sheet';
 import { GridDirection } from '@mui/system';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 
 type GridItemsAlignment =
diff --git a/docs/data/joy/components/grid/SpacingGrid.js b/docs/data/joy/components/grid/SpacingGrid.js
index 79d8eac75e8775..20971a1813de88 100644
--- a/docs/data/joy/components/grid/SpacingGrid.js
+++ b/docs/data/joy/components/grid/SpacingGrid.js
@@ -6,7 +6,7 @@ import RadioGroup from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';
 import Sheet from '@mui/joy/Sheet';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 export default function SpacingGrid() {
   const [spacing, setSpacing] = React.useState(2);
diff --git a/docs/data/joy/components/grid/SpacingGrid.tsx b/docs/data/joy/components/grid/SpacingGrid.tsx
index 6ae4b326be60a8..ebb3466624480a 100644
--- a/docs/data/joy/components/grid/SpacingGrid.tsx
+++ b/docs/data/joy/components/grid/SpacingGrid.tsx
@@ -6,7 +6,7 @@ import RadioGroup from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';
 import Sheet from '@mui/joy/Sheet';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 export default function SpacingGrid() {
   const [spacing, setSpacing] = React.useState(2);
diff --git a/docs/data/joy/components/stack/InteractiveStack.js b/docs/data/joy/components/stack/InteractiveStack.js
index 0ec70fd492dc6c..d5142c84f95783 100644
--- a/docs/data/joy/components/stack/InteractiveStack.js
+++ b/docs/data/joy/components/stack/InteractiveStack.js
@@ -8,7 +8,7 @@ import Radio from '@mui/joy/Radio';
 import Stack from '@mui/joy/Stack';
 import { styled } from '@mui/joy/styles';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 const Item = styled(Sheet)(({ theme }) => ({
   ...theme.typography['body-sm'],
diff --git a/docs/data/joy/components/stack/InteractiveStack.tsx b/docs/data/joy/components/stack/InteractiveStack.tsx
index 17cf59c88e3c4d..971adbb6a0f9c3 100644
--- a/docs/data/joy/components/stack/InteractiveStack.tsx
+++ b/docs/data/joy/components/stack/InteractiveStack.tsx
@@ -8,7 +8,7 @@ import Radio from '@mui/joy/Radio';
 import Stack, { StackProps } from '@mui/joy/Stack';
 import { styled } from '@mui/joy/styles';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 const Item = styled(Sheet)(({ theme }) => ({
   ...theme.typography['body-sm'],
diff --git a/docs/data/joy/customization/approaches/ButtonThemes.js b/docs/data/joy/customization/approaches/ButtonThemes.js
index 558e3bb782cc1a..ee359cacdf3162 100644
--- a/docs/data/joy/customization/approaches/ButtonThemes.js
+++ b/docs/data/joy/customization/approaches/ButtonThemes.js
@@ -6,7 +6,7 @@ import FormLabel from '@mui/joy/FormLabel';
 import Select from '@mui/joy/Select';
 import Option from '@mui/joy/Option';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 const githubTheme = extendTheme({
   cssVarPrefix: 'gh',
diff --git a/docs/data/joy/main-features/automatic-adjustment/ListThemes.js b/docs/data/joy/main-features/automatic-adjustment/ListThemes.js
index cb7a7976d56b70..828ebe8d50fc04 100644
--- a/docs/data/joy/main-features/automatic-adjustment/ListThemes.js
+++ b/docs/data/joy/main-features/automatic-adjustment/ListThemes.js
@@ -10,7 +10,7 @@ import Option from '@mui/joy/Option';
 import ArticleRoundedIcon from '@mui/icons-material/ArticleRounded';
 import ToggleOffRoundedIcon from '@mui/icons-material/ToggleOffRounded';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 export default function ListThemes() {
   const [preset, setPreset] = React.useState('');
diff --git a/docs/data/material/customization/default-theme/DefaultTheme.js b/docs/data/material/customization/default-theme/DefaultTheme.js
index 07024ca8c68148..11d2dd6a76b8ca 100644
--- a/docs/data/material/customization/default-theme/DefaultTheme.js
+++ b/docs/data/material/customization/default-theme/DefaultTheme.js
@@ -8,7 +8,7 @@ import { useTranslate } from '@mui/docs/i18n';
 import ThemeViewer, {
   useNodeIdsLazy,
 } from 'docs/src/modules/components/ThemeViewer';
-import { blue, grey } from 'docs/src/modules/brandingTheme';
+import { blue, grey } from '@mui/docs/branding';
 
 const StyledSwitch = styled(Switch)(({ theme }) => [
   {
diff --git a/docs/data/material/design-resources/connect/connect.md b/docs/data/material/design-resources/connect/connect.md
index 01770968df80cc..b441a460c6ee6d 100644
--- a/docs/data/material/design-resources/connect/connect.md
+++ b/docs/data/material/design-resources/connect/connect.md
@@ -59,7 +59,7 @@ After you've added your custom tokens, click on **Regenerate theme** to include
 Connect can also generate theme styles for customized components, enabling you to completely change their look and feel and create your custom design system from within Figma.
 
 :::info
-This feature is currently limited to the Button and Switch components.
+This feature is currently limited to the Button, Switch, and Typography components.
 Support for more components is coming soon.
 :::
 
diff --git a/docs/lib/sourcing.ts b/docs/lib/sourcing.ts
index 7ade883964584f..7f4dd30bfbbe43 100644
--- a/docs/lib/sourcing.ts
+++ b/docs/lib/sourcing.ts
@@ -44,6 +44,7 @@ const ALLOWED_TAGS = [
   'MUI X',
   'MUI System',
   'Toolpad',
+  'Connect',
 ];
 
 export const getAllBlogPosts = () => {
diff --git a/docs/pages/_document.js b/docs/pages/_document.js
index ecd5633bf5a5b3..a800959e8aa63b 100644
--- a/docs/pages/_document.js
+++ b/docs/pages/_document.js
@@ -9,7 +9,7 @@ import { getInitColorSchemeScript as getMuiInitColorSchemeScript } from '@mui/ma
 import { getInitColorSchemeScript as getJoyInitColorSchemeScript } from '@mui/joy/styles';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import createEmotionCache from 'docs/src/createEmotionCache';
-import { getMetaThemeColor } from 'docs/src/modules/brandingTheme';
+import { getMetaThemeColor } from '@mui/docs/branding';
 
 // You can find a benchmark of the available CSS minifiers under
 // https://github.com/GoalSmashers/css-minification-benchmark
diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx
index 544fcd02b06a42..fc98fa100f8f9a 100644
--- a/docs/pages/blog.tsx
+++ b/docs/pages/blog.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { InferGetStaticPropsType } from 'next';
 import { useRouter } from 'next/router';
-import { alpha } from '@mui/material/styles';
 import Avatar from '@mui/material/Avatar';
 import AvatarGroup from '@mui/material/AvatarGroup';
 import Box from '@mui/material/Box';
@@ -64,19 +63,12 @@ function PostPreview(props: BlogPost) {
           />
         ))}
       </Box>
-      <Typography
-        component="h2"
-        fontWeight="bold"
-        variant="subtitle1"
-        sx={{
-          mb: 0.5,
-        }}
-      >
+      <Typography component="h2" fontWeight="bold" variant="subtitle1" gutterBottom>
         <Link
           aria-describedby={`describe-${props.slug}`}
           href={`/blog/${props.slug}/`}
+          color="text.primary"
           sx={{
-            color: 'text.primary',
             '&:hover': {
               textDecoration: 'underline',
             },
@@ -153,7 +145,7 @@ function PostPreview(props: BlogPost) {
             </Typography>
           )}
           {props.date && (
-            <Typography variant="caption" fontWeight="regular" color="text.secondary">
+            <Typography variant="caption" fontWeight="regular" color="text.tertiary">
               {new Date(props.date).toDateString()}
             </Typography>
           )}
@@ -164,6 +156,7 @@ function PostPreview(props: BlogPost) {
           href={`/blog/${props.slug}`}
           id={`describe-${props.slug}`}
           endIcon={<KeyboardArrowRightRoundedIcon />}
+          size="small"
           sx={{ mt: { xs: 0.5, md: 0 }, p: { xs: 0, sm: '6px 8px' } }}
         >
           Read more
@@ -173,7 +166,7 @@ function PostPreview(props: BlogPost) {
   );
 }
 
-const PAGE_SIZE = 5;
+const PAGE_SIZE = 7;
 
 export default function Blog(props: InferGetStaticPropsType<typeof getStaticProps>) {
   const router = useRouter();
@@ -236,6 +229,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
       { shallow: true },
     );
   };
+
   return (
     <BrandingCssVarsProvider>
       <Head
@@ -257,13 +251,15 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
               </Typography>
             }
           />
+        </Section>
+        <Divider />
+        <Container sx={{ mt: { xs: 2, sm: -6 } }}>
           <Box
             component="ul"
             sx={{
               display: 'grid',
               m: 0,
               p: 0,
-              pt: 8,
               gap: 2,
               gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
             }}
@@ -273,25 +269,18 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
                 key={post.slug}
                 component="li"
                 variant="outlined"
-                sx={[
-                  {
-                    p: 2,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    position: 'relative',
-                    borderColor: 'grey.200',
-                    boxShadow: '0px 4px 12px rgba(170, 180, 190, 0.2)',
-                    '&:focus-within': {
-                      '& a': {
-                        outline: 0,
-                      },
-                    },
-                  },
-                  (theme) =>
-                    theme.applyDarkStyles({
-                      boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.4)',
-                    }),
-                ]}
+                sx={(theme) => ({
+                  p: 2,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  backgroundImage: (theme.vars || theme).palette.gradients.radioSubtle,
+                  boxShadow: '0 4px 12px rgba(170, 180, 190, 0.2)',
+                  ...theme.applyDarkStyles({
+                    background: (theme.vars || theme).palette.primaryDark[900],
+                    backgroundImage: (theme.vars || theme).palette.gradients.radioSubtle,
+                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.4)',
+                  }),
+                })}
               >
                 {post.image && (
                   <Box
@@ -310,8 +299,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
               </Paper>
             ))}
           </Box>
-        </Section>
-        <Divider />
+        </Container>
         <Container
           ref={postListRef}
           sx={{
@@ -325,7 +313,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
           <Typography
             component="h2"
             variant="h6"
-            fontWeight="700"
+            fontWeight="semiBold"
             sx={{ mb: { xs: 1, sm: 2 }, mt: 8 }} // margin-top makes the title appear when scroll into view
           >
             Posts{' '}
@@ -342,94 +330,105 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
           </Typography>
           <Box sx={{ gridRow: 'span 2' }}>
             <Box
-              sx={(theme) => ({
+              sx={{
                 position: 'sticky',
-                top: 100,
-                alignSelf: 'start',
-                mb: 2,
-                mt: { xs: 3, sm: 2, md: 9 }, // margin-top makes the title appear when scroll into view
-                p: 2,
-                borderRadius: 1,
-                border: '1px solid',
-                borderColor: (theme.vars || theme).palette.divider,
-                boxShadow: '0px 2px 6px rgba(170, 180, 190, 0.2)',
-                ...theme.applyDarkStyles({
-                  background: alpha(theme.palette.primaryDark[700], 0.2),
-                  boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.2)',
-                }),
-              })}
+                top: 90,
+                mt: { xs: 0, md: 9 },
+                mb: { xs: 2, md: 0 },
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 2,
+                '& .MuiPaper-root': {
+                  p: 2,
+                  bgcolor: 'transparent',
+                  borderColor: 'divider',
+                },
+              }}
             >
-              <Typography color="text.primary" fontWeight="semiBold" sx={{ mb: 2 }}>
-                Filter by tag
-              </Typography>
-              <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
-                {Object.keys(tagInfo).map((tag) => {
-                  const selected = !!selectedTags[tag];
-                  return (
-                    <Chip
-                      key={tag}
-                      variant={selected ? 'filled' : 'outlined'}
-                      color={selected ? 'primary' : undefined}
-                      {...(selected
-                        ? {
-                            label: tag,
-                            onDelete: () => {
-                              postListRef.current?.scrollIntoView();
-                              removeTag(tag);
-                            },
-                          }
-                        : {
-                            label: tag,
-                            onClick: () => {
-                              postListRef.current?.scrollIntoView();
-                              router.push(
-                                {
-                                  query: {
-                                    ...router.query,
-                                    tags: tag,
+              <Paper variant="outlined">
+                <Typography
+                  color="text.primary"
+                  fontWeight="semiBold"
+                  variant="subtitle2"
+                  sx={{ mb: 2 }}
+                >
+                  Filter posts by tag
+                </Typography>
+                <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
+                  {Object.keys(tagInfo).map((tag) => {
+                    const selected = !!selectedTags[tag];
+                    return (
+                      <Chip
+                        key={tag}
+                        variant={selected ? 'filled' : 'outlined'}
+                        color={selected ? 'primary' : undefined}
+                        {...(selected
+                          ? {
+                              label: tag,
+                              onDelete: () => {
+                                postListRef.current?.scrollIntoView();
+                                removeTag(tag);
+                              },
+                            }
+                          : {
+                              label: tag,
+                              onClick: () => {
+                                postListRef.current?.scrollIntoView();
+                                router.push(
+                                  {
+                                    query: {
+                                      ...router.query,
+                                      tags: tag,
+                                    },
                                   },
-                                },
-                                undefined,
-                                { shallow: true },
-                              );
-                            },
-                          })}
-                      size="small"
-                      sx={{
-                        py: 1.2,
-                      }}
-                    />
-                  );
-                })}
-              </Box>
-              <Divider sx={{ my: 2 }} />
-              <Typography color="text.primary" fontWeight="semiBold" gutterBottom>
-                Want to hear more from us?
-              </Typography>
-              <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-                Get up to date with everything MUI-related through our social media:
-              </Typography>
-              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, '* > svg': { mr: 1 } }}>
-                <Link href="https://github.com/mui" target="_blank" fontSize={14}>
-                  <GitHubIcon fontSize="small" />
-                  GitHub
-                </Link>
-                <Link href="https://twitter.com/MUI_hq" target="_blank" fontSize={14}>
-                  <XIcon fontSize="small" />X
-                </Link>
-                <Link href="https://mui.com/r/discord/" target="_blank" fontSize={14}>
-                  <DiscordIcon fontSize="small" />
-                  Discord
-                </Link>
-                <Link href="https://www.linkedin.com/company/mui/" target="_blank" fontSize={14}>
-                  <LinkedInIcon fontSize="small" />
-                  LinkedIn
-                </Link>
-                <Link href="https://www.youtube.com/@MUI_hq" target="_blank" fontSize={14}>
-                  <YouTubeIcon fontSize="small" />
-                  Youtube
-                </Link>
-              </Box>
+                                  undefined,
+                                  { shallow: true },
+                                );
+                              },
+                            })}
+                        size="small"
+                        sx={{
+                          py: 1.2,
+                        }}
+                      />
+                    );
+                  })}
+                </Box>
+              </Paper>
+              <Paper variant="outlined">
+                <Typography
+                  color="text.primary"
+                  fontWeight="semiBold"
+                  variant="subtitle2"
+                  gutterBottom
+                >
+                  Want to hear more from us?
+                </Typography>
+                <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+                  Get up to date with everything MUI-related through our social media:
+                </Typography>
+                <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, '* > svg': { mr: 1 } }}>
+                  <Link href="https://github.com/mui" target="_blank" fontSize={14}>
+                    <GitHubIcon fontSize="small" />
+                    GitHub
+                  </Link>
+                  <Link href="https://twitter.com/MUI_hq" target="_blank" fontSize={14}>
+                    <XIcon fontSize="small" />X
+                  </Link>
+                  <Link href="https://mui.com/r/discord/" target="_blank" fontSize={14}>
+                    <DiscordIcon fontSize="small" />
+                    Discord
+                  </Link>
+                  <Link href="https://www.linkedin.com/company/mui/" target="_blank" fontSize={14}>
+                    <LinkedInIcon fontSize="small" />
+                    LinkedIn
+                  </Link>
+                  <Link href="https://www.youtube.com/@MUI_hq" target="_blank" fontSize={14}>
+                    <YouTubeIcon fontSize="small" />
+                    Youtube
+                  </Link>
+                </Box>
+              </Paper>
             </Box>
           </Box>
           <div>
diff --git a/docs/pages/blog/introducing-connect.js b/docs/pages/blog/introducing-connect.js
new file mode 100644
index 00000000000000..100b8643fa753f
--- /dev/null
+++ b/docs/pages/blog/introducing-connect.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
+import { docs } from './introducing-connect.md?muiMarkdown';
+
+export default function Page() {
+  return <TopLayoutBlog docs={docs} />;
+}
diff --git a/docs/pages/blog/introducing-connect.md b/docs/pages/blog/introducing-connect.md
new file mode 100644
index 00000000000000..7b87e783d34727
--- /dev/null
+++ b/docs/pages/blog/introducing-connect.md
@@ -0,0 +1,68 @@
+---
+title: 'Introducing Connect: a Figma plugin that exports Material UI code'
+description: Connect is a Figma plugin that lets you generate a theme from the Material UI for Figma Design Kit.
+date: 2024-04-16T00:00:00.000Z
+authors: ['danilo-leal', 'DavidCnoops']
+tags: ['Connect', 'Material UI', 'Product']
+manualCard: true
+---
+
+Over the last few years we've seen designers increasingly seeking out ways to participate more directly and collaborate more effectively in the development process.
+The [Material UI Design Kit for Figma](/store/items/figma-react/) was our first attempt to meet those needs by providing designers with one-to-one mockups of Material UI components for implementing custom design systems.
+But it doesn't go far enough on its own to bridge the gap between design and code—the developer still need to write the designer's custom styles from scratch.
+
+That got us thinking:
+What if designers could generate production-ready code directly from their design software to hand off to developers working with a Material UI codebase?
+
+That's why we created Connect, a Figma plugin for generating styles that can be copied and pasted straight into your Material UI app's theme.
+We're happy to share that the beta version is [available now on Figma](https://www.figma.com/community/plugin/1336346114713490235/connect). 🚀
+
+<img src="/static/blog/introducing-connect/card.png" alt="Connect is a Figma plugin that lets you generate a theme from the Material UI for Figma Design Kit." width="1280" height="640" />
+
+Let's take a look at some of its key features:
+
+## Theme customization
+
+Figma's local variables significantly matured the use of design tokens, making it possible to mirror Material UI more closely.
+Connect relies on these local variables to generate code corresponding to each element and state.
+(As such, it requires [v5.16.0 or later](https://github.com/mui/mui-design-kits/releases/tag/v5.16.0) of the Material UI Design Kit; earlier versions do not support local variables.)
+
+<video preload="metadata" controls muted loop playsinline width="1584" height="1080">
+  <source src="/static/blog/introducing-connect/theme-customization.mp4" type="video/mp4">
+</video>
+
+Visit the documentation to learn [how to insert the generated code into your theme file](/material-ui/design-resources/connect/#using-the-generated-theme).
+
+## Component customization
+
+You can fully customize a component's appearance across multiple states in the Design Kit and then generate the corresponding theme code.
+This is one of the most exciting features because it enables designers to use the visual design tools they're already comfortable with to make changes to the code itself.
+
+<video preload="metadata" controls muted loop playsinline width="1584" height="1080">
+  <source src="/static/blog/introducing-connect/custom-component.mp4" type="video/mp4">
+</video>
+
+:::warning
+While in beta, not all components are supported yet.
+We'll expand component coverage progressively in the coming months.
+For now you can experiment with the Button, Switch, and Typography.
+:::
+
+## Quick Storybook preview
+
+The Connect plugin also bakes in an embedded Storybook preview panel so that you can conveniently play around with your changes and see how they interact with other props and states available in the component API.
+
+<video preload="metadata" autoplay muted loop playsinline width="1584" height="1080">
+  <source src="/static/blog/introducing-connect/storybook.mp4" type="video/mp4">
+</video>
+
+## Try Connect now
+
+Get the beta version of Connect now, available for free in the [Figma Community](https://www.figma.com/community/plugin/1336346114713490235/connect)!
+
+There's still a lot to do, and we're looking forward to hearing from all of you [who requested this plugin years ago](https://github.com/mui/mui-design-kits/issues/10).
+
+- Check out further documentation for [the Connect plugin](/material-ui/design-resources/connect/) and [the Material UI Design Kit](/material-ui/design-resources/material-ui-for-figma/).
+- If you've got any feedback, we'd love to [hear from you](https://mui-connect.canny.io/feedback).
+
+Happy designing! 👨‍🎨
diff --git a/docs/pages/blog/mui-x-v7.md b/docs/pages/blog/mui-x-v7.md
index 9a50cc55f0a669..0db86c47405074 100644
--- a/docs/pages/blog/mui-x-v7.md
+++ b/docs/pages/blog/mui-x-v7.md
@@ -56,11 +56,11 @@ The Data Grid now offers a more responsive experience with smoother scrolling an
 
 On its first announcement, some of these improvements were showcased, but during the beta phase, the scrolling performance was further polished for an even better user experience.
 
-<figure style="padding:0; margin:0">
+<figure>
   <video preload="metadata" autoplay muted loop playsinline width="690" height="417" controls>
     <source src="/static/blog/mui-x-v7/sticky-headers-and-vertical-scrolling.mp4" type="video/mp4">
   </video>
-  <figcaption style="color: #888; font-size: 0.9em; text-align: center;">A before and after showcase, first with horizontal and then with vertical scrolling.</figcaption>
+  <figcaption>A before and after showcase, first with horizontal and then with vertical scrolling.</figcaption>
 </figure>
 
 :::warning
@@ -81,9 +81,9 @@ As part of an overarching project aimed at enhancing usability in managing colum
 
 The goal is to further enhance this panel by incorporating additional column management functions, such as column reordering and pinning. Additionally, the internal component has been extracted to ease the introduction of the upcoming pivoting UI.
 
-<figure style="padding:0; margin:0; margin-bottom:20px">
+<figure>
   <img width="310" alt="The new column management panel design" src="/static/blog/mui-x-v7/column-management-panel.png">
-  <figcaption style="color: #888; font-size: 0.9em; text-align: center;">The new column managemeent panel design</figcaption>
+  <figcaption>The new column managemeent panel design</figcaption>
 </figure>
 
 ### Date Object support in filter model
@@ -98,9 +98,9 @@ Introducing a separate entry point for locales has significantly reduced the bun
 
 As a reference, with the `@mui/x-data-grid` npm package, this change led to a reduction of approximately 19% – shrinking the bundle size from [114.2kB](https://bundlephobia.com/package/@mui/x-data-grid@6.19.2) to [92.9kB](https://bundlephobia.com/package/@mui/x-data-grid@7.0.0).
 
-<figure style="padding:0; margin:0">
+<figure>
   <img width="600" alt="A chart showcasing the bundle size change" src="/static/blog/mui-x-v7/new-bundle-size.png" >
-  <figcaption style="color: #888; font-size: 0.9em; text-align: center;">A chart showcasing the Data Grid's bundle size change.</figcaption>
+  <figcaption>A chart showcasing the Data Grid's bundle size change.</figcaption>
 </figure>
 
 ### New stable features
@@ -233,9 +233,9 @@ The newest gauge charts are designed to offer a visually compelling way to displ
 These charts are particularly useful for showing progress toward a goal or displaying a value within a predefined range.
 With customizable options for pointers, sizes, and colors, they allow for a personalized visual representation that makes it easy for users to interpret data at a glance.
 
-<figure style="padding:0; margin:0; margin-bottom:20px">
+<figure>
   <img alt="Gauge charts" src="/static/blog/mui-x-v7/gauge-charts.png" width="1200" height="800" loading="lazy" />
-  <figcaption style="color: #888; font-size: 0.9em; text-align: center;">Three different styles of Gauge charts.</figcaption>
+  <figcaption>Three different styles of Gauge charts.</figcaption>
 </figure>
 
 Check out the [new charts](/x/react-charts/gauge/) documentation page for detailed information.
@@ -246,9 +246,9 @@ The charts now have click event handlers, so users can interact with chart eleme
 
 This feature makes charts more interactive and transforms the way users can explore the data, improving the overall user experience with details and other information accessed on demand.
 
-<figure style="padding:0; margin:0; margin-bottom:20px">
+<figure>
   <img alt="Gauge charts" src="/static/blog/mui-x-v7/click-handler.png" width="450" height="416" loading="lazy" />
-  <figcaption style="color: #888; font-size: 0.9em; text-align: center;">A pie chart with an item click handler.</figcaption>
+  <figcaption>A pie chart with an item click handler.</figcaption>
 </figure>
 
 You can find more information about specific event handlers for each type of chart by visiting their respective overview page:
@@ -261,9 +261,9 @@ You can find more information about specific event handlers for each type of cha
 
 The Axis component now features a built-in Grid, offering users a structured layout for easier data analysis and visualization.
 
-<figure style="padding:0; margin:0; margin-bottom:20px">
+<figure>
   <img alt="A Chart axis showcasing an horizontal grid" src="/static/blog/mui-x-v7/axis-grid.png" width="1550" height="654" loading="lazy" />
-  <figcaption style="color: #888; font-size: 0.9em; text-align: center;">A Chart axis with an horizontal grid.</figcaption>
+  <figcaption>A Chart axis with an horizontal grid.</figcaption>
 </figure>
 
 For details on its usage and configuration, please refer to the [Grid section](/x/react-charts/axis/#grid) in the documentation.
@@ -272,9 +272,9 @@ For details on its usage and configuration, please refer to the [Grid section](/
 
 The `ChartsReferenceLine` component enhances data visualization, providing users with a clear reference to better understand and analyze key data points.
 
-<figure style="padding:0; margin:0; margin-bottom:20px">
+<figure>
   <img alt="A chart with a reference line" src="/static/blog/mui-x-v7/charts-reference-line.png" width="1200" height="840" loading="lazy" />
-  <figcaption style="color: #888; font-size: 0.9em; text-align: center;">A line chart using a reference line.</figcaption>
+  <figcaption>A line chart using a reference line.</figcaption>
 </figure>
 
 You can find more details on its [documentation](/x/react-charts/axis/#reference-line).
@@ -315,11 +315,11 @@ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
 The latest addition to the Date and Time Pickers suite is the `<DateTimeRangePicker />`, a most anticipated component designed to enrich the user experience with the advanced date and time selection.
 This intuitive picker simplifies the process of selecting date and time ranges, making it ideal for applications that require detailed scheduling or period selection.
 
-<figure style="padding:0; margin:0; margin-bottom:20px">
+<figure>
   <video preload="metadata" autoplay muted loop playsinline width="600" height="510">
     <source src="/static/blog/mui-x-v7/date-time-range-picker.mp4" type="video/mp4">
   </video>
-  <figcaption style="color: #888; font-size: 0.9em; text-align: center;">A video showcasing a date and time range selection.</figcaption>
+  <figcaption>A video showcasing a date and time range selection.</figcaption>
 </figure>
 
 Learn how to use and customize the [new component](/x/react-date-pickers/date-time-range-picker/) now!
diff --git a/docs/pages/careers.tsx b/docs/pages/careers.tsx
index f4d2472df7dfa9..8e2d58f4b98d27 100644
--- a/docs/pages/careers.tsx
+++ b/docs/pages/careers.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import Stack from '@mui/material/Stack';
 import Paper from '@mui/material/Paper';
 import Button from '@mui/material/Button';
@@ -339,12 +339,13 @@ function RemoteAwardCard() {
     >
       <Box
         sx={{
-          aspectRatio: '1/1',
+          mb: 2,
+          maxWidth: { xs: 315, sm: 325 },
+          maxHeight: 315,
           border: '1px solid',
           borderColor: 'divider',
           borderRadius: '6px',
           overflow: 'clip',
-          mb: 2,
         }}
       >
         <Box
@@ -405,9 +406,9 @@ export default function Careers() {
         <OurValues />
         <Divider />
         {/* Perks & benefits */}
-        <Section bg="gradient">
+        <Section bg="gradient" cozy>
           <Grid container spacing={5} alignItems="center">
-            <Grid item md={6}>
+            <Grid md={6}>
               <SectionHeadline
                 overline="Working at MUI"
                 title={
@@ -447,40 +448,54 @@ export default function Careers() {
                 ))}
               </Box>
             </Grid>
-            <Grid item xs={12} md={6}>
-              <Grid container spacing={2}>
-                <Grid item xs={12} md={8}>
-                  <RemoteAwardCard />
-                </Grid>
-                <Grid item xs={12} md={4}>
-                  <Stack spacing={2} useFlexGap sx={{ height: '100%', width: '100%' }}>
-                    {companyInfo.map(({ title, description, routeUrl }) => (
-                      <Paper
-                        component={Link}
-                        href={routeUrl}
-                        noLinkStyle
-                        variant="outlined"
-                        sx={{ p: 2, width: '100%', flexGrow: 1 }}
-                        key={title}
-                      >
-                        <Typography variant="body2" fontWeight="bold" sx={{ mb: 0.5 }}>
-                          {title}
-                        </Typography>
-                        <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
-                          {description}
-                        </Typography>
-                        <Typography variant="body2" fontWeight="bold" color="primary">
-                          Learn more{' '}
-                          <KeyboardArrowRightRounded
-                            fontSize="small"
-                            sx={{ verticalAlign: 'middle' }}
-                          />
-                        </Typography>
-                      </Paper>
-                    ))}
-                  </Stack>
-                </Grid>
-              </Grid>
+            <Grid
+              xs={12}
+              md={6}
+              sx={{
+                p: { xs: 2, sm: 0 },
+                display: 'flex',
+                flexDirection: { xs: 'column', sm: 'row' },
+                gap: 2,
+              }}
+            >
+              <RemoteAwardCard />
+              <Stack spacing={2} useFlexGap>
+                {companyInfo.map(({ title, description, routeUrl }) => (
+                  <Paper
+                    key={title}
+                    component={Link}
+                    href={routeUrl}
+                    noLinkStyle
+                    variant="outlined"
+                    sx={{
+                      p: 2,
+                      width: '100%',
+                      flexGrow: 1,
+                      display: 'flex',
+                      flexDirection: 'column',
+                    }}
+                  >
+                    <Typography variant="body2" fontWeight="bold" sx={{ mb: 0.5 }}>
+                      {title}
+                    </Typography>
+                    <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+                      {description}
+                    </Typography>
+                    <Typography
+                      variant="body2"
+                      fontWeight="bold"
+                      color="primary"
+                      sx={{ mt: 'auto' }}
+                    >
+                      Learn more{' '}
+                      <KeyboardArrowRightRounded
+                        fontSize="small"
+                        sx={{ verticalAlign: 'middle' }}
+                      />
+                    </Typography>
+                  </Paper>
+                ))}
+              </Stack>
             </Grid>
           </Grid>
         </Section>
@@ -584,11 +599,11 @@ export default function Careers() {
             Frequently asked questions
           </Typography>
           <Grid container spacing={2}>
-            <Grid item xs={12} md={6}>
+            <Grid xs={12} md={6}>
               {renderFAQItem(0, true)}
               {renderFAQItem(1)}
             </Grid>
-            <Grid item xs={12} md={6}>
+            <Grid xs={12} md={6}>
               {renderFAQItem(2)}
               <Paper
                 variant="outlined"
diff --git a/docs/pages/experiments/docs/demos.md b/docs/pages/experiments/docs/demos.md
index 9334e1a03b1097..5a630ed5a063fb 100644
--- a/docs/pages/experiments/docs/demos.md
+++ b/docs/pages/experiments/docs/demos.md
@@ -1,12 +1,19 @@
 # Demos
 
-<p class="description">Demos</p>
+<p class="description">The different variants of demo containers we have in the docs.</p>
 
 ## Standard demo
 
+"Standard" refers to when no background is explicitly defined.
+So, it renders the "outlined" background variant.
+
 {{"demo": "DemoInDocs.js"}}
 
-## "bg": "inline" demo
+## "bg": "outlined"
+
+{{"demo": "DemoInDocs.js", "bg": "outlined"}}
+
+## "bg": "inline"
 
 {{"demo": "DemoInDocs.js", "bg": "inline"}}
 
@@ -14,6 +21,10 @@
 
 {{"demo": "DemoInDocs.js", "bg": true}}
 
+## "bg": gradient
+
+{{"demo": "DemoInDocs.js", "bg": "gradient"}}
+
 ## "hideToolbar": true
 
 {{"demo": "DemoInDocs.js", "hideToolbar": true}}
diff --git a/docs/pages/experiments/website/branding-theme-test.tsx b/docs/pages/experiments/website/branding-theme-test.tsx
index eb6ce1645af27b..82e5393540bdbf 100644
--- a/docs/pages/experiments/website/branding-theme-test.tsx
+++ b/docs/pages/experiments/website/branding-theme-test.tsx
@@ -2,12 +2,14 @@ import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import Chip from '@mui/material/Chip';
 import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
 import Divider from '@mui/material/Divider';
 import Head from 'docs/src/modules/components/Head';
 import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import AppHeader from 'docs/src/layouts/AppHeader';
 import Section from 'docs/src/layouts/Section';
 import AppFooter from 'docs/src/layouts/AppFooter';
+import GitHubIcon from '@mui/icons-material/GitHub';
 
 export default function BrandingThemeTest() {
   return (
@@ -30,20 +32,26 @@ export default function BrandingThemeTest() {
           </Stack>
           <Stack direction="row" spacing={2} useFlexGap sx={{ width: 'fit-content', mt: 8 }}>
             <Button variant="contained" size="small" color="primary">
-              This button
+              Contained primary
             </Button>
             <Button variant="contained" size="small" color="secondary">
-              This button
+              Contained secondary
             </Button>
             <Button variant="outlined" size="small" color="primary">
-              This button
+              Outlined primary
             </Button>
             <Button variant="outlined" size="small" color="secondary">
-              This button
+              Outlined secondary
             </Button>
             <Button variant="text" size="small" color="info">
               This button
             </Button>
+            <IconButton color="primary">
+              <GitHubIcon fontSize="small" />
+            </IconButton>
+            <IconButton color="info">
+              <GitHubIcon fontSize="small" />
+            </IconButton>
           </Stack>
         </Section>
         <Divider />
diff --git a/docs/public/static/blog/introducing-connect/card.png b/docs/public/static/blog/introducing-connect/card.png
new file mode 100644
index 00000000000000..fd55e108ab5082
Binary files /dev/null and b/docs/public/static/blog/introducing-connect/card.png differ
diff --git a/docs/public/static/blog/introducing-connect/custom-component.mp4 b/docs/public/static/blog/introducing-connect/custom-component.mp4
new file mode 100644
index 00000000000000..f8721ce26a815d
Binary files /dev/null and b/docs/public/static/blog/introducing-connect/custom-component.mp4 differ
diff --git a/docs/public/static/blog/introducing-connect/storybook.mp4 b/docs/public/static/blog/introducing-connect/storybook.mp4
new file mode 100644
index 00000000000000..c6ddd2e2e5b9f6
Binary files /dev/null and b/docs/public/static/blog/introducing-connect/storybook.mp4 differ
diff --git a/docs/public/static/blog/introducing-connect/theme-customization.mp4 b/docs/public/static/blog/introducing-connect/theme-customization.mp4
new file mode 100644
index 00000000000000..b77be7df826b8a
Binary files /dev/null and b/docs/public/static/blog/introducing-connect/theme-customization.mp4 differ
diff --git a/docs/public/static/branding/about/illustrations/team-globe-distribution-dark.png b/docs/public/static/branding/about/illustrations/team-globe-distribution-dark.png
index 8b59dc339963b1..6fc3e470b0666c 100644
Binary files a/docs/public/static/branding/about/illustrations/team-globe-distribution-dark.png and b/docs/public/static/branding/about/illustrations/team-globe-distribution-dark.png differ
diff --git a/docs/public/static/branding/about/illustrations/team-globe-distribution-light.png b/docs/public/static/branding/about/illustrations/team-globe-distribution-light.png
index 57efc00531a072..69fa20cb434963 100644
Binary files a/docs/public/static/branding/about/illustrations/team-globe-distribution-light.png and b/docs/public/static/branding/about/illustrations/team-globe-distribution-light.png differ
diff --git a/docs/public/static/material-ui/design-resources/connect-storybook.png b/docs/public/static/material-ui/design-resources/connect-storybook.png
index 8ebe4821840d08..c6c0751d407f49 100644
Binary files a/docs/public/static/material-ui/design-resources/connect-storybook.png and b/docs/public/static/material-ui/design-resources/connect-storybook.png differ
diff --git a/docs/public/static/material-ui/design-resources/connect-switch-component-customized-storybook.png b/docs/public/static/material-ui/design-resources/connect-switch-component-customized-storybook.png
index 2ad9b92a43be61..dc944a48b56f94 100644
Binary files a/docs/public/static/material-ui/design-resources/connect-switch-component-customized-storybook.png and b/docs/public/static/material-ui/design-resources/connect-switch-component-customized-storybook.png differ
diff --git a/docs/src/BrandingCssVarsProvider.tsx b/docs/src/BrandingCssVarsProvider.tsx
index 8365b4a886caa6..6cd467f1c10f9d 100644
--- a/docs/src/BrandingCssVarsProvider.tsx
+++ b/docs/src/BrandingCssVarsProvider.tsx
@@ -7,7 +7,7 @@ import {
 } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
-import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme';
+import { getDesignTokens, getThemedComponents } from '@mui/docs/branding';
 import SkipLink from 'docs/src/modules/components/SkipLink';
 import MarkdownLinks from 'docs/src/modules/components/MarkdownLinks';
 
diff --git a/docs/src/BrandingProvider.tsx b/docs/src/BrandingProvider.tsx
index 7c5cf6a60d31b4..29f4ba3bcbcd72 100644
--- a/docs/src/BrandingProvider.tsx
+++ b/docs/src/BrandingProvider.tsx
@@ -1,19 +1,4 @@
-import * as React from 'react';
-import { ThemeProvider, useTheme } from '@mui/material/styles';
-import { brandingDarkTheme, brandingLightTheme } from 'docs/src/modules/brandingTheme';
+// Backwards compatibility for Toolpad and X.
+// TODO: remove when Toolpad and X migrated to `@mui/docs/branding`
 
-interface BrandingProviderProps {
-  children: React.ReactNode;
-  /**
-   * If not `undefined`, the provider is considered nesting and does not render NextNProgressBar & CssBaseline
-   */
-  mode: 'light' | 'dark';
-}
-
-export default function BrandingProvider(props: BrandingProviderProps) {
-  const { children, mode: modeProp } = props;
-  const upperTheme = useTheme();
-  const mode = modeProp || upperTheme.palette.mode;
-  const theme = mode === 'dark' ? brandingDarkTheme : brandingLightTheme;
-  return <ThemeProvider theme={modeProp ? () => theme : theme}>{children}</ThemeProvider>;
-}
+export { BrandingProvider as default } from '@mui/docs/branding';
diff --git a/docs/src/components/about/AboutEnd.tsx b/docs/src/components/about/AboutEnd.tsx
index 02562b245b617a..cdb88fd0eb1e28 100644
--- a/docs/src/components/about/AboutEnd.tsx
+++ b/docs/src/components/about/AboutEnd.tsx
@@ -48,7 +48,7 @@ export default function AboutEnd() {
         alt="A map illustration with pins loosely positioned where team members from MUI are located."
         loading="lazy"
         sx={(theme) => ({
-          mt: -8,
+          mt: -20,
           display: { xs: 'none', sm: 'block' },
           width: '100%',
           aspectRatio: '231/145',
diff --git a/docs/src/components/about/HowToSupport.tsx b/docs/src/components/about/HowToSupport.tsx
index 3c01595592fe34..99bc248bd1db31 100644
--- a/docs/src/components/about/HowToSupport.tsx
+++ b/docs/src/components/about/HowToSupport.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
@@ -12,7 +12,7 @@ import GradientText from 'docs/src/components/typography/GradientText';
 import { Link } from '@mui/docs/Link';
 import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
-import { GlowingIconContainer } from 'docs/src/components/action/InfoCard';
+import { GlowingIconContainer } from '@mui/docs/InfoCard';
 
 function Widget({
   children,
@@ -72,7 +72,7 @@ export default function HowToSupport() {
         description=""
       />
       <Grid container spacing={3}>
-        <Grid item xs={12} sm={6} md={4}>
+        <Grid xs={12} sm={6} md={4}>
           <Widget
             icon={<ForumRoundedIcon fontSize="small" color="primary" />}
             title="Give feedback"
@@ -96,7 +96,7 @@ export default function HowToSupport() {
             </Button>
           </Widget>
         </Grid>
-        <Grid item xs={12} sm={6} md={4}>
+        <Grid xs={12} sm={6} md={4}>
           <Widget
             icon={<PeopleRoundedIcon fontSize="small" color="primary" />}
             title="Join the community"
@@ -157,7 +157,7 @@ export default function HowToSupport() {
             </Button>
           </Widget>
         </Grid>
-        <Grid item xs={12} sm={6} md={4}>
+        <Grid xs={12} sm={6} md={4}>
           <Widget
             icon={<LocalAtmRoundedIcon fontSize="small" color="primary" />}
             title="Support us financially"
diff --git a/docs/src/components/about/OurValues.tsx b/docs/src/components/about/OurValues.tsx
index ad9db9243c4c73..bf29a93161d228 100644
--- a/docs/src/components/about/OurValues.tsx
+++ b/docs/src/components/about/OurValues.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
@@ -70,7 +70,7 @@ export default function OurValues() {
       </Button>
       <Grid container spacing={3} sx={{ mt: { xs: 1, sm: 2 } }}>
         {values.map(({ title, description, darkIcon, lightIcon, height, width }) => (
-          <Grid key={title} item xs={12} md={3}>
+          <Grid key={title} xs={12} md={3}>
             <Paper
               variant="outlined"
               sx={(theme) => ({
@@ -90,14 +90,14 @@ export default function OurValues() {
             >
               <Box sx={{ height: 94 }}>
                 <Box
+                  width={width}
+                  height={height}
                   sx={(theme) => ({
                     background: `${lightIcon}`,
                     ...theme.applyDarkStyles({
                       background: `${darkIcon}`,
                     }),
                   })}
-                  width={width}
-                  height={height}
                 />
               </Box>
               <Box sx={{ flexGrow: 1 }}>
diff --git a/docs/src/components/about/Team.tsx b/docs/src/components/about/Team.tsx
index 087e43d93fbb8f..38e49b5f9d112c 100644
--- a/docs/src/components/about/Team.tsx
+++ b/docs/src/components/about/Team.tsx
@@ -5,7 +5,7 @@ import Button from '@mui/material/Button';
 import Container from '@mui/material/Container';
 import Divider from '@mui/material/Divider';
 import IconButton from '@mui/material/IconButton';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import Paper, { PaperProps } from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import Tooltip from '@mui/material/Tooltip';
@@ -369,7 +369,7 @@ export default function Team() {
               ...profileJson,
             };
             return (
-              <Grid key={profile.name} item xs={12} sm={6} md={3}>
+              <Grid key={profile.name} xs={12} sm={6} md={3}>
                 <Person {...profile} />
               </Grid>
             );
@@ -389,7 +389,7 @@ export default function Team() {
           </Typography>
           <Grid container spacing={2} mt={2}>
             {contributors.map((profile) => (
-              <Grid key={profile.name} item xs={12} sm={6} md={3}>
+              <Grid key={profile.name} xs={12} sm={6} md={3}>
                 <Person {...profile} sx={{ bgcolor: 'primaryDark.600' }} />
               </Grid>
             ))}
@@ -404,7 +404,7 @@ export default function Team() {
           </Typography>
           <Grid container spacing={2} mt={2}>
             {emeriti.map((profile) => (
-              <Grid key={profile.name} item xs={12} sm={6} md={3}>
+              <Grid key={profile.name} xs={12} sm={6} md={3}>
                 <Person {...profile} sx={{ bgcolor: 'primaryDark.600' }} />
               </Grid>
             ))}
diff --git a/docs/src/components/action/InfoCard.tsx b/docs/src/components/action/InfoCard.tsx
index 45ba7e23cbfdb6..9dc1f1de938493 100644
--- a/docs/src/components/action/InfoCard.tsx
+++ b/docs/src/components/action/InfoCard.tsx
@@ -1,114 +1,5 @@
-import * as React from 'react';
-import { alpha } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
-import Typography, { TypographyProps } from '@mui/material/Typography';
-import { Link, LinkProps } from '@mui/docs/Link';
+// Backwards compatibility for Toolpad and X.
+// TODO: remove when Toolpad and X migrated to `@mui/docs/InfoCard`
 
-interface GlowingIconContainerProps {
-  icon: React.ReactNode;
-}
-
-export function GlowingIconContainer({ icon }: GlowingIconContainerProps) {
-  return (
-    <Box
-      sx={(theme) => ({
-        width: 40,
-        height: 40,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        flexShrink: 0,
-        borderRadius: 1,
-        border: '1px solid',
-        borderColor: 'primary.200',
-        bgcolor: 'primary.50',
-        boxShadow: `0px 1px 6px 0px ${alpha(
-          theme.palette.primary[500],
-          0.4,
-        )}, 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset`,
-        ...theme.applyDarkStyles({
-          borderColor: alpha(theme.palette.primary[400], 0.6),
-          bgcolor: 'primary.900',
-          boxShadow: `0 2px 6px 0 ${alpha(
-            theme.palette.primary[600],
-            0.4,
-          )}, 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset`,
-        }),
-      })}
-    >
-      {icon}
-    </Box>
-  );
-}
-
-interface InfoCardProps {
-  classNameDescription?: string;
-  classNameTitle?: string;
-  dense?: boolean;
-  description?: string;
-  icon?: React.ReactNode;
-  link?: string;
-  prefetch?: LinkProps['prefetch'];
-  svg?: React.ReactNode;
-  title: string;
-  titleProps?: TypographyProps;
-}
-
-export default function InfoCard(props: InfoCardProps) {
-  const {
-    classNameDescription,
-    classNameTitle,
-    dense,
-    description,
-    icon,
-    link,
-    svg,
-    title,
-    titleProps,
-    ...other
-  } = props;
-  return (
-    <Paper
-      variant="outlined"
-      component={link ? Link : 'div'}
-      href={link}
-      {...(link
-        ? {
-            noLinkStyle: true,
-            // Fix overloading with prefetch={false}, only prefetch on hover.
-            prefetch: false,
-          }
-        : {})}
-      sx={(theme) => ({
-        p: dense ? 2.5 : 3.5,
-        height: '100%',
-        background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
-        ...theme.applyDarkStyles({
-          bgcolor: 'primaryDark.900',
-          background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
-          borderColor: 'primaryDark.700',
-        }),
-      })}
-      {...other}
-    >
-      {svg && svg}
-      {icon && <GlowingIconContainer icon={icon} />}
-      <Typography
-        fontWeight="bold"
-        component="h3"
-        color="text.primary"
-        variant="body2"
-        mt={icon ? 2 : 0}
-        mb={description ? 0.5 : 0}
-        className={classNameTitle}
-        {...titleProps}
-      >
-        {title}
-      </Typography>
-      <Typography variant="body2" color="text.secondary" className={classNameDescription}>
-        {description}
-      </Typography>
-    </Paper>
-  );
-}
+export * from '@mui/docs/InfoCard';
+export { InfoCard as default } from '@mui/docs/InfoCard';
diff --git a/docs/src/components/banner/AppFrameBanner.tsx b/docs/src/components/banner/AppFrameBanner.tsx
index 139c369d36773b..de435e12058550 100644
--- a/docs/src/components/banner/AppFrameBanner.tsx
+++ b/docs/src/components/banner/AppFrameBanner.tsx
@@ -35,9 +35,9 @@ export default function AppFrameBanner() {
           fontWeight: 'medium',
           textWrap: 'nowrap',
           maxHeight: '34px',
-          backgroundColor: (theme.vars || theme).palette.primary[50],
+          backgroundColor: alpha(theme.palette.primary[50], 0.8),
           border: '1px solid',
-          borderColor: (theme.vars || theme).palette.grey[200],
+          borderColor: (theme.vars || theme).palette.divider,
           borderRadius: 1,
           transition: 'all 150ms ease',
           '&:hover, &:focus-visible': {
@@ -47,11 +47,10 @@ export default function AppFrameBanner() {
         }),
         (theme) =>
           theme.applyDarkStyles({
-            backgroundColor: alpha(theme.palette.primary[900], 0.2),
-            borderColor: (theme.vars || theme).palette.primaryDark[700],
+            backgroundColor: alpha(theme.palette.primary[900], 0.15),
             '&:hover, &:focus-visible': {
-              backgroundColor: alpha(theme.palette.primary[900], 0.6),
-              borderColor: (theme.vars || theme).palette.primary[800],
+              backgroundColor: alpha(theme.palette.primary[900], 0.4),
+              borderColor: (theme.vars || theme).palette.primary[900],
             },
           }),
       ]}
diff --git a/docs/src/components/banner/TableOfContentsBanner.tsx b/docs/src/components/banner/TableOfContentsBanner.tsx
index 66f492e4b3ca8b..79d27a93df033e 100644
--- a/docs/src/components/banner/TableOfContentsBanner.tsx
+++ b/docs/src/components/banner/TableOfContentsBanner.tsx
@@ -34,10 +34,9 @@ export default function TableOfContentsBanner() {
         (theme) =>
           theme.applyDarkStyles({
             backgroundColor: alpha(theme.palette.primary[900], 0.2),
-            borderColor: (theme.vars || theme).palette.divider,
             '&:hover, &:focus-visible': {
               backgroundColor: alpha(theme.palette.primary[900], 0.4),
-              borderColor: (theme.vars || theme).palette.primaryDark[500],
+              borderColor: (theme.vars || theme).palette.primary[900],
             },
           }),
       ]}
diff --git a/docs/src/components/home/DiamondSponsors.tsx b/docs/src/components/home/DiamondSponsors.tsx
index 2746ae899018e9..2f8bbcea77d127 100644
--- a/docs/src/components/home/DiamondSponsors.tsx
+++ b/docs/src/components/home/DiamondSponsors.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useInView } from 'react-intersection-observer';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import Paper from '@mui/material/Paper';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
@@ -46,8 +46,8 @@ export default function DiamondSponsors() {
         sx={(theme) => ({
           mt: 4,
           mb: 1.5,
-          background: `linear-gradient(90deg, ${(theme.vars || theme).palette.primary[400]} 50%, ${
-            (theme.vars || theme).palette.primary[700]
+          background: `linear-gradient(45deg, ${(theme.vars || theme).palette.primary[400]} 50%, ${
+            (theme.vars || theme).palette.primary[800]
           } 100%)`,
           WebkitBackgroundClip: 'text',
           WebkitTextFillColor: 'transparent',
@@ -57,12 +57,12 @@ export default function DiamondSponsors() {
       </Typography>
       <Grid container spacing={{ xs: 2, md: 3 }}>
         {DIAMONDs.map((item) => (
-          <Grid item key={item.name} xs={12} sm={6} md={4}>
+          <Grid key={item.name} xs={12} sm={6} md={4}>
             <SponsorCard logoSize={64} inView={inView} item={item} />
           </Grid>
         ))}
         {spotIsAvailable && (
-          <Grid item xs={12} sm={6} md={4}>
+          <Grid xs={12} sm={6} md={4}>
             <Paper
               variant="outlined"
               sx={{
diff --git a/docs/src/components/home/GoldSponsors.tsx b/docs/src/components/home/GoldSponsors.tsx
index dbb23f042c7564..4c4f641bea60e1 100644
--- a/docs/src/components/home/GoldSponsors.tsx
+++ b/docs/src/components/home/GoldSponsors.tsx
@@ -4,7 +4,7 @@ import Paper from '@mui/material/Paper';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import AddRounded from '@mui/icons-material/AddRounded';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import SponsorCard from 'docs/src/components/home/SponsorCard';
 import { Link } from '@mui/docs/Link';
 import ROUTES from 'docs/src/route';
@@ -98,18 +98,19 @@ export default function GoldSponsors() {
       </Typography>
       <Grid container spacing={{ xs: 2, md: 3 }}>
         {GOLDs.map((item) => (
-          <Grid item key={item.name} xs={12} sm={6} md={4} lg={3}>
+          <Grid key={item.name} xs={12} sm={6} md={4} lg={3}>
             <SponsorCard inView={inView} item={item} />
           </Grid>
         ))}
-        <Grid item xs={12} sm={6} md={4} lg={3}>
+        <Grid xs={12} sm={6} md={4} lg={3}>
           <Paper
             variant="outlined"
             sx={{
               p: 2,
+              height: '100%',
               display: 'flex',
               alignItems: 'center',
-              height: '100%',
+              gap: 2,
               borderStyle: 'dashed',
             }}
           >
@@ -120,14 +121,6 @@ export default function GoldSponsors() {
               target="_blank"
               rel="noopener"
               color="primary"
-              sx={(theme) => ({
-                mr: 2,
-                border: '1px solid',
-                borderColor: 'grey.300',
-                ...theme.applyDarkStyles({
-                  borderColor: 'primaryDark.600',
-                }),
-              })}
             >
               <AddRounded />
             </IconButton>
diff --git a/docs/src/components/home/MaterialDesignComponents.tsx b/docs/src/components/home/MaterialDesignComponents.tsx
index 6796c028965c8e..c83c844faec8c4 100644
--- a/docs/src/components/home/MaterialDesignComponents.tsx
+++ b/docs/src/components/home/MaterialDesignComponents.tsx
@@ -34,7 +34,7 @@ import VerifiedUserRounded from '@mui/icons-material/VerifiedUserRounded';
 import HelpCenterRounded from '@mui/icons-material/HelpCenterRounded';
 import ROUTES from 'docs/src/route';
 import { Link } from '@mui/docs/Link';
-import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme';
+import { getDesignTokens, getThemedComponents } from '@mui/docs/branding';
 
 const Grid = styled('div')(({ theme }) => [
   {
diff --git a/docs/src/components/home/ValueProposition.tsx b/docs/src/components/home/ValueProposition.tsx
index ace718a99fa456..b66739a422fcdb 100644
--- a/docs/src/components/home/ValueProposition.tsx
+++ b/docs/src/components/home/ValueProposition.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import InvertColorsRoundedIcon from '@mui/icons-material/InvertColorsRounded';
 import HandymanRoundedIcon from '@mui/icons-material/HandymanRounded';
 import ArticleRoundedIcon from '@mui/icons-material/ArticleRounded';
@@ -8,7 +8,7 @@ import AccessibilityNewRounded from '@mui/icons-material/AccessibilityNewRounded
 import GradientText from 'docs/src/components/typography/GradientText';
 import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
-import InfoCard from 'docs/src/components/action/InfoCard';
+import { InfoCard } from '@mui/docs/InfoCard';
 
 const content = [
   {
@@ -51,7 +51,7 @@ export default function ValueProposition() {
       />
       <Grid container spacing={3}>
         {content.map(({ icon, title, description }) => (
-          <Grid key={title} item xs={12} sm={6} lg={3}>
+          <Grid key={title} xs={12} sm={6} lg={3}>
             <InfoCard title={title} icon={icon} description={description} />
           </Grid>
         ))}
diff --git a/docs/src/components/markdown/MarkdownElement.tsx b/docs/src/components/markdown/MarkdownElement.tsx
index 37eda97a4d1289..0fa3ed548afea2 100644
--- a/docs/src/components/markdown/MarkdownElement.tsx
+++ b/docs/src/components/markdown/MarkdownElement.tsx
@@ -10,7 +10,7 @@ const Root = styled('div')(({ theme }) => ({
   ...theme.typography.caption,
   color: (theme.vars || theme).palette.text.primary,
   '& pre': {
-    backgroundColor: '#0F1924', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
+    backgroundColor: 'hsl(210, 35%, 9%)', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
     color: '#f8f8f2', // fallback color until Prism's theme is loaded
     overflow: 'auto',
     margin: 0,
diff --git a/docs/src/components/productBaseUI/BaseUIEnd.tsx b/docs/src/components/productBaseUI/BaseUIEnd.tsx
index c1c01797cfcbe2..7704cd55575665 100644
--- a/docs/src/components/productBaseUI/BaseUIEnd.tsx
+++ b/docs/src/components/productBaseUI/BaseUIEnd.tsx
@@ -6,7 +6,7 @@ import ListItem from '@mui/material/ListItem';
 import Typography from '@mui/material/Typography';
 import CompareIcon from '@mui/icons-material/Compare';
 import StyleRoundedIcon from '@mui/icons-material/StyleRounded';
-import { GlowingIconContainer } from 'docs/src/components/action/InfoCard';
+import { GlowingIconContainer } from '@mui/docs/InfoCard';
 import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
 import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
diff --git a/docs/src/components/productBaseUI/BaseUISummary.tsx b/docs/src/components/productBaseUI/BaseUISummary.tsx
index a7b98a436718f7..310b4e5a1d8c7a 100644
--- a/docs/src/components/productBaseUI/BaseUISummary.tsx
+++ b/docs/src/components/productBaseUI/BaseUISummary.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import StyleRoundedIcon from '@mui/icons-material/StyleRounded';
 import AccessibilityNewRounded from '@mui/icons-material/AccessibilityNewRounded';
 import PhishingRoundedIcon from '@mui/icons-material/PhishingRounded';
 import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import GradientText from 'docs/src/components/typography/GradientText';
-import InfoCard from 'docs/src/components/action/InfoCard';
+import { InfoCard } from '@mui/docs/InfoCard';
 
 const content = [
   {
@@ -50,7 +50,7 @@ export default function BaseUISummary() {
       <Box sx={{ mt: 6 }}>
         <Grid container spacing={3}>
           {content.map(({ icon, title, description, link }) => (
-            <Grid key={title} item xs={12} md={4}>
+            <Grid key={title} xs={12} md={4}>
               <InfoCard link={link} title={title} icon={icon} description={description} />
             </Grid>
           ))}
diff --git a/docs/src/components/productCore/CoreProducts.tsx b/docs/src/components/productCore/CoreProducts.tsx
index 331e3c80228ff8..0ffb8a767b9261 100644
--- a/docs/src/components/productCore/CoreProducts.tsx
+++ b/docs/src/components/productCore/CoreProducts.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Grid from '@mui/material/Grid';
 import Section from 'docs/src/layouts/Section';
-import InfoCard from 'docs/src/components/action/InfoCard';
+import { InfoCard } from '@mui/docs/InfoCard';
 
 // Note: All of the commented code will be put back in once logos for each Core product are done.
 
diff --git a/docs/src/components/productDesignKit/DesignKitValues.tsx b/docs/src/components/productDesignKit/DesignKitValues.tsx
index 06cb9895752d30..72bca07d667fdf 100644
--- a/docs/src/components/productDesignKit/DesignKitValues.tsx
+++ b/docs/src/components/productDesignKit/DesignKitValues.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import Palette from '@mui/icons-material/Palette';
 import LibraryBooks from '@mui/icons-material/LibraryBooks';
 import CodeRounded from '@mui/icons-material/CodeRounded';
 import GradientText from 'docs/src/components/typography/GradientText';
 import Section from 'docs/src/layouts/Section';
-import InfoCard from 'docs/src/components/action/InfoCard';
+import { InfoCard } from '@mui/docs/InfoCard';
 
 const content = [
   {
@@ -41,7 +41,7 @@ function DesignKitValues() {
       </Typography>
       <Grid container spacing={3}>
         {content.map(({ icon, title, description }) => (
-          <Grid key={title} item xs={12} sm={6} md={4}>
+          <Grid key={title} xs={12} sm={6} md={4}>
             <InfoCard title={title} icon={icon} description={description} />
           </Grid>
         ))}
diff --git a/docs/src/components/productMaterial/MaterialEnd.tsx b/docs/src/components/productMaterial/MaterialEnd.tsx
index 99d91ad0c83dd6..be40de0a8cfb73 100644
--- a/docs/src/components/productMaterial/MaterialEnd.tsx
+++ b/docs/src/components/productMaterial/MaterialEnd.tsx
@@ -6,7 +6,7 @@ import ListItem from '@mui/material/ListItem';
 import Typography from '@mui/material/Typography';
 import CompareIcon from '@mui/icons-material/Compare';
 import StyleRoundedIcon from '@mui/icons-material/StyleRounded';
-import { GlowingIconContainer } from 'docs/src/components/action/InfoCard';
+import { GlowingIconContainer } from '@mui/docs/InfoCard';
 import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
 import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
diff --git a/docs/src/components/productMaterial/MaterialHero.tsx b/docs/src/components/productMaterial/MaterialHero.tsx
index 0df46b622ac450..dd37121529358d 100644
--- a/docs/src/components/productMaterial/MaterialHero.tsx
+++ b/docs/src/components/productMaterial/MaterialHero.tsx
@@ -59,7 +59,7 @@ import IconImage from 'docs/src/components/icon/IconImage';
 import HeroContainer from 'docs/src/layouts/HeroContainer';
 import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
 import GradientText from 'docs/src/components/typography/GradientText';
-import { getDesignTokens } from 'docs/src/modules/brandingTheme';
+import { getDesignTokens } from '@mui/docs/branding';
 import { Link } from '@mui/docs/Link';
 import ROUTES from 'docs/src/route';
 
diff --git a/docs/src/components/productX/XPlans.tsx b/docs/src/components/productX/XPlans.tsx
index 2b5b04a6938f67..2d5c310ba47fdd 100644
--- a/docs/src/components/productX/XPlans.tsx
+++ b/docs/src/components/productX/XPlans.tsx
@@ -6,7 +6,7 @@ import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import GradientText from 'docs/src/components/typography/GradientText';
 import ROUTES from 'docs/src/route';
-import InfoCard from 'docs/src/components/action/InfoCard';
+import { InfoCard } from '@mui/docs/InfoCard';
 import IconImage from 'docs/src/components/icon/IconImage';
 import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
 
diff --git a/docs/src/layouts/AppFooter.tsx b/docs/src/layouts/AppFooter.tsx
index d8655f2d9cc87d..c0894f21ec8e3f 100644
--- a/docs/src/layouts/AppFooter.tsx
+++ b/docs/src/layouts/AppFooter.tsx
@@ -53,7 +53,7 @@ export default function AppFooter(props: AppFooterProps) {
           <Link prefetch={false} href="/" aria-label="Go to homepage" sx={{ mb: 2 }}>
             <SvgMuiLogotype height={28} width={91} />
           </Link>
-          <Typography variant="body2" fontWeight="bold" gutterBottom>
+          <Typography variant="body2" fontWeight="semiBold" gutterBottom>
             Keep up to date
           </Typography>
           <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
@@ -70,7 +70,7 @@ export default function AppFooter(props: AppFooterProps) {
           }}
         >
           <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-            <Typography fontWeight="bold" variant="body2" sx={{ mb: 0.5 }}>
+            <Typography fontWeight="semiBold" variant="body2" sx={{ mb: 0.5 }}>
               Products
             </Typography>
             <Link prefetch={false} href={ROUTES.productMaterial}>
@@ -93,7 +93,7 @@ export default function AppFooter(props: AppFooterProps) {
             </Link>
           </Box>
           <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-            <Typography fontWeight="bold" variant="body2" sx={{ mb: 0.5 }}>
+            <Typography fontWeight="semiBold" variant="body2" sx={{ mb: 0.5 }}>
               Resources
             </Typography>
             <Link prefetch={false} href={ROUTES.materialIcons}>
@@ -113,7 +113,7 @@ export default function AppFooter(props: AppFooterProps) {
             </Link>
           </Box>
           <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-            <Typography fontWeight="bold" variant="body2" sx={{ mb: 0.5 }}>
+            <Typography fontWeight="semiBold" variant="body2" sx={{ mb: 0.5 }}>
               Explore
             </Typography>
             <Link prefetch={false} href={ROUTES.documentation}>
@@ -133,7 +133,7 @@ export default function AppFooter(props: AppFooterProps) {
             </Link>
           </Box>
           <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-            <Typography fontWeight="bold" variant="body2" sx={{ mb: 0.5 }}>
+            <Typography fontWeight="semiBold" variant="body2" sx={{ mb: 0.5 }}>
               Company
             </Typography>
             <Link prefetch={false} href={ROUTES.about}>
diff --git a/docs/src/layouts/Section.tsx b/docs/src/layouts/Section.tsx
index e15d60292d7586..ff7a0a4d837551 100644
--- a/docs/src/layouts/Section.tsx
+++ b/docs/src/layouts/Section.tsx
@@ -42,13 +42,13 @@ const Section = React.forwardRef<HTMLDivElement, SelectionProps>(function Sectio
         (theme) => ({
           ...(bg === 'gradient'
             ? {
-                background: `linear-gradient(180deg, #FFF 0%, ${
+                background: `linear-gradient(#FFF 0%, ${
                   (theme.vars || theme).palette.primary[50]
                 } 100%)`,
                 ...theme.applyDarkStyles({
-                  background: `linear-gradient(180deg, ${
+                  background: `linear-gradient(${
                     (theme.vars || theme).palette.primaryDark[900]
-                  } 0%, ${alpha(theme.palette.primary[900], 0.16)} 100%)`,
+                  } 0%, ${alpha(theme.palette.primary[900], 0.2)} 100%)`,
                 }),
               }
             : {
diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
index 763ea0e811bac0..b96d36bb7e25a1 100644
--- a/docs/src/modules/brandingTheme.ts
+++ b/docs/src/modules/brandingTheme.ts
@@ -1,1317 +1,4 @@
-import { CSSObject } from '@mui/system';
-import type {} from '@mui/material/themeCssVarsAugmentation';
-import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded';
-import { createTheme, ThemeOptions, Theme, alpha } from '@mui/material/styles';
+// Backwards compatibility for Toolpad and X.
+// TODO: remove when Toolpad and X migrated to `@mui/docs/branding`
 
-interface ApplyDarkStyles {
-  (scheme: CSSObject): CSSObject;
-}
-
-declare module '@mui/material/styles' {
-  interface Theme {
-    applyDarkStyles: ApplyDarkStyles;
-  }
-}
-
-declare module '@mui/material/styles/createPalette' {
-  interface ColorRange {
-    50: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-  }
-
-  interface PaletteColor extends ColorRange {}
-
-  interface Palette {
-    primaryDark: PaletteColor;
-    gradients: {
-      lightGrayRadio: string;
-      stylizedRadio: string;
-      linearSubtle: string;
-    };
-  }
-
-  interface TypeText {
-    tertiary: string;
-  }
-}
-
-declare module '@mui/material/styles/createTypography' {
-  interface TypographyOptions {
-    fontWeightSemiBold?: number;
-    fontWeightExtraBold?: number;
-    fontFamilyCode?: string;
-    fontFamilySystem?: string;
-  }
-
-  interface Typography {
-    fontWeightSemiBold: number;
-    fontWeightExtraBold: number;
-    fontFamilyCode: string;
-    fontFamilySystem: string;
-  }
-}
-
-declare module '@mui/material/Chip' {
-  interface ChipPropsColorOverrides {
-    grey: true;
-  }
-}
-
-declare module '@mui/material/SvgIcon' {
-  interface SvgIconPropsColorOverrides {
-    danger: true;
-  }
-  interface SvgIconPropsSizeOverrides {
-    xs: true;
-    sm: true;
-    md: true;
-    lg: true;
-    xl: true;
-    xl2: true;
-    xl3: true;
-    xl4: true;
-  }
-}
-
-// TODO: enable this once types conflict is fixed
-// declare module '@mui/material/Button' {
-//   interface ButtonPropsVariantOverrides {
-//     code: true;
-//   }
-// }
-
-const defaultTheme = createTheme();
-
-export const blue = {
-  50: '#EBF5FF',
-  100: '#CCE5FF',
-  200: '#99CCFF',
-  300: '#66B2FF',
-  400: '#3399FF',
-  main: '#0073E6',
-  500: '#0073E6',
-  600: '#006BD6',
-  700: '#0061C2',
-  800: '#004C99',
-  900: '#003A75',
-};
-export const blueDark = {
-  50: '#EAEDF1',
-  100: '#DAE0E7',
-  200: '#ACBAC8',
-  300: '#7B91A7',
-  main: '#7B91A7',
-  400: '#4B5E71',
-  500: '#3B4A59',
-  600: '#2F3A46',
-  700: '#1F262E', // contrast 13.64:1
-  800: '#141A1F',
-  900: '#101418',
-};
-export const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C5D0E0', // vs blueDark 900: WCAG 11.6 AAA, APCA 78 Best for text
-  400: '#AEBACB', // vs blueDark 900: WCAG 9 AAA, APCA 63.3 Ok for text
-  500: '#99A7BB', // vs blueDark 900: WCAG 7.5 AAA, APCA 54.3 Only for large text
-  600: '#6F7F95', // vs white bg: WCAG 4.1 AA, APCA 68.7 Ok for text
-  700: '#576375', // vs white bg: WCAG 8.3 AAA, APCA 88.7 Best for text
-  800: '#303740', // vs white bg: WCAG 11.9 AAA, APCA 97.3 Best for text
-  900: '#1C2025',
-};
-export const error = {
-  50: '#FFF0F1',
-  100: '#FFDBDE',
-  200: '#FFBDC2',
-  300: '#FF99A2',
-  400: '#FF7A86',
-  500: '#FF505F',
-  main: '#EB0014', // contrast 4.63:1
-  600: '#EB0014',
-  700: '#C70011',
-  800: '#94000D',
-  900: '#570007',
-};
-export const success = {
-  50: '#E9FBF0',
-  100: '#C6F6D9',
-  200: '#9AEFBC',
-  300: '#6AE79C',
-  400: '#3EE07F',
-  500: '#21CC66',
-  600: '#1DB45A',
-  700: '#1AA251',
-  800: '#178D46',
-  900: '#0F5C2E',
-};
-export const warning = {
-  50: '#FFF9EB',
-  100: '#FFF3C1',
-  200: '#FFECA1',
-  300: '#FFDC48', // vs blueDark900: WCAG 10.4 AAA, APCA 72 Ok for text
-  400: '#F4C000', // vs blueDark900: WCAG 6.4 AA normal, APCA 48 Only large text
-  500: '#DEA500', // vs blueDark900: WCAG 8 AAA normal, APCA 58 Only large text
-  main: '#DEA500',
-  600: '#D18E00', // vs blueDark900: WCAG 6.4 AA normal, APCA 48 Only large text
-  700: '#AB6800', // vs white bg: WCAG 4.4 AA large, APCA 71 Ok for text
-  800: '#8C5800', // vs white bg: WCAG 5.9 AAA large, APCA 80 Best for text
-  900: '#5A3600', // vs white bg: WCAG 10.7 AAA, APCA 95 Best for text
-};
-// context on the Advanced Perceptual Contrast Algorithm (APCA) used above here: https://github.com/w3c/wcag/issues/695
-
-const systemFont = [
-  '-apple-system',
-  'BlinkMacSystemFont',
-  '"Segoe UI"',
-  'Roboto',
-  '"Helvetica Neue"',
-  'Arial',
-  'sans-serif',
-  '"Apple Color Emoji"',
-  '"Segoe UI Emoji"',
-  '"Segoe UI Symbol"',
-];
-
-export const getMetaThemeColor = (mode: 'light' | 'dark') => {
-  const themeColor = {
-    light: blue[600],
-    dark: blueDark[900],
-  };
-  return themeColor[mode];
-};
-
-export const getDesignTokens = (mode: 'light' | 'dark') =>
-  ({
-    palette: {
-      primary: {
-        ...blue,
-        ...(mode === 'dark' && {
-          main: blue[400],
-        }),
-      },
-      secondary: {
-        ...grey,
-        ...(mode === 'light' && {
-          main: blueDark[100],
-          contrastText: blueDark[600],
-        }),
-        ...(mode === 'dark' && {
-          main: blueDark[700],
-          contrastText: blueDark[600],
-        }),
-      },
-      divider: mode === 'dark' ? alpha(blueDark[500], 0.2) : grey[100],
-      primaryDark: blueDark,
-      mode,
-      ...(mode === 'dark' && {
-        background: {
-          default: blueDark[900],
-          paper: alpha(blueDark[800], 0.8),
-        },
-      }),
-      common: {
-        black: '#0B0D0E',
-      },
-      text: {
-        ...(mode === 'light' && {
-          primary: grey[900],
-          secondary: grey[800],
-          tertiary: grey[700],
-        }),
-        ...(mode === 'dark' && {
-          primary: '#fff',
-          secondary: grey[400],
-          tertiary: grey[500],
-        }),
-      },
-      grey: {
-        ...grey,
-        ...(mode === 'light' && {
-          main: grey[100],
-          contrastText: grey[600],
-        }),
-        ...(mode === 'dark' && {
-          main: grey[700],
-          contrastText: grey[600],
-        }),
-      },
-      error,
-      success: {
-        ...success,
-        ...(mode === 'dark' && {
-          main: '#1DB45A', // contrast 6.17:1 (blueDark.800)
-        }),
-        ...(mode === 'light' && {
-          main: '#1AA251', // contrast 3.31:1
-        }),
-      },
-      warning,
-      gradients: {
-        lightGrayRadio:
-          'radial-gradient(50% 50% at 50% 50%, #F0F7FF 0%, rgba(240, 247, 255, 0.05) 100%)',
-        stylizedRadio:
-          mode === 'dark'
-            ? 'linear-gradient(rgba(0 0 0 / 0.1), rgba(0 0 0 / 0.1)), linear-gradient(254.86deg, rgba(0, 58, 117, 0.18) 0%, rgba(11, 13, 14, 0.3) 49.98%, rgba(0, 76, 153, 0.21) 100.95%)'
-            : 'linear-gradient(rgba(255 255 255 / 0.3), rgba(255 255 255 / 0.3)), linear-gradient(254.86deg, rgba(194, 224, 255, 0.12) 0%, rgba(194, 224, 255, 0.12) 0%, rgba(255, 255, 255, 0.3) 49.98%, rgba(240, 247, 255, 0.3) 100.95%)',
-        linearSubtle:
-          mode === 'light'
-            ? `linear-gradient(to top right, ${alpha(blue[50], 0.3)} 40%, ${alpha(
-                grey[50],
-                0.2,
-              )} 100%)`
-            : `linear-gradient(to top right, ${alpha(blue[900], 0.1)} 40%, ${alpha(
-                blueDark[800],
-                0.2,
-              )} 100%)`,
-      },
-    },
-    shape: {
-      borderRadius: 12,
-    },
-    spacing: 8,
-    typography: {
-      fontFamily: ['"IBM Plex Sans"', ...systemFont].join(','),
-      // Match VS Code
-      // https://github.com/microsoft/vscode/blob/b38691f611d1ce3ef437c67a1b047c757b7b4e53/src/vs/editor/common/config/editorOptions.ts#L4578-L4580
-      // https://github.com/microsoft/vscode/blob/d950552131d7350a45dac8b59bf179469c36c2ac/src/vs/editor/standalone/browser/standalone-tokens.css#L10
-      fontFamilyCode: [
-        'Menlo', // macOS
-        'Consolas', // Windows
-        '"Droid Sans Mono"', // Linux
-        'monospace', // fallback
-      ].join(','),
-      fontFamilyTagline: ['"General Sans"', ...systemFont].join(','),
-      fontFamilySystem: systemFont.join(','),
-      fontWeightSemiBold: 600,
-      fontWeightExtraBold: 800,
-      h1: {
-        fontFamily: ['"General Sans"', ...systemFont].join(','),
-        fontSize: 'clamp(2.5rem, 1.125rem + 3.5vw, 3.5em)',
-        fontWeight: 600,
-        lineHeight: 78 / 70,
-        letterSpacing: -0.2,
-        ...(mode === 'light' && {
-          color: blueDark[900],
-        }),
-      },
-      h2: {
-        fontFamily: ['"General Sans"', ...systemFont].join(','),
-        fontSize: 'clamp(1.5rem, 0.9643rem + 1.4286vw, 2.25rem)',
-        fontWeight: 600,
-        lineHeight: 44 / 36,
-        letterSpacing: -0.2,
-        color: mode === 'dark' ? grey[100] : blueDark[700],
-      },
-      h3: {
-        fontFamily: ['"General Sans"', ...systemFont].join(','),
-        fontSize: defaultTheme.typography.pxToRem(36),
-        lineHeight: 44 / 36,
-        letterSpacing: 0.2,
-      },
-      h4: {
-        fontFamily: ['"General Sans"', ...systemFont].join(','),
-        fontSize: defaultTheme.typography.pxToRem(30),
-        lineHeight: 42 / 28,
-        letterSpacing: 0.2,
-      },
-      h5: {
-        fontSize: defaultTheme.typography.pxToRem(24),
-        lineHeight: 36 / 24,
-        letterSpacing: 0.1,
-        color: mode === 'dark' ? blue[300] : blue.main,
-      },
-      h6: {
-        fontSize: defaultTheme.typography.pxToRem(20),
-        lineHeight: 30 / 20,
-      },
-      button: {
-        textTransform: 'initial',
-        fontWeight: 700,
-        letterSpacing: 0,
-      },
-      subtitle1: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-        lineHeight: 24 / 18,
-        letterSpacing: 0,
-        fontWeight: 500,
-      },
-      body1: {
-        fontSize: defaultTheme.typography.pxToRem(16), // 16px
-        lineHeight: 24 / 16,
-        letterSpacing: 0,
-      },
-      body2: {
-        fontSize: defaultTheme.typography.pxToRem(14), // 14px
-        lineHeight: 21 / 14,
-        letterSpacing: 0,
-      },
-      caption: {
-        display: 'inline-block',
-        fontSize: defaultTheme.typography.pxToRem(12), // 12px
-        lineHeight: 18 / 12,
-        letterSpacing: 0,
-        fontWeight: 700,
-      },
-      allVariants: {
-        scrollMarginTop: 'calc(var(--MuiDocs-header-height) + 32px)',
-      },
-    },
-    /**
-     * This utility exists to help transitioning to CSS variables page by page (prevent dark mode flicker).
-     * It will use the proper styling method based on the theme because the component might be on the page that does not support CSS variables yet.
-     *
-     * 😓 Without this utility:
-     * {
-     *   ...theme.vars ? {
-     *     color: theme.vars.palette.primary.main,
-     *     [theme.getColorScheme('dark')]: {
-     *       color: '#fff',
-     *     }
-     *   } : {
-     *     color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary.main,
-     *   }
-     * }
-     *
-     * 🤩 Using the utility:
-     * {
-     *   color: (theme.vars || theme).palette.primary.main,
-     *   ...theme.applyDarkStyles({
-     *     color: '#fff',
-     *   }),
-     * }
-     *
-     * -------------------------------------------------------------------------------------------------
-     * 💡 This util should be used in an array if the styles contain pseudo classes or nested selectors:
-     *
-     * ❌ There is a chance that the upper selectors could be overridden
-     * {
-     *    // the whole selector could be overridden
-     *   '&::before': {
-     *     color: ...
-     *   },
-     *   ...theme.applyDarkStyles({
-     *      '&::before': {
-     *        color: ...
-     *      }
-     *   })
-     * }
-     *
-     * ✅ use an array (supports in both emotion and styled-components)
-     * Only the `color` will be overridden in dark mode.
-     *  [
-     *    '&::before': {
-     *      color: ...
-     *    },
-     *    theme.applyDarkStyles({
-     *      '&::before': {
-     *        color: ...
-     *      }
-     *    })
-     *  ]
-     */
-    applyDarkStyles(css: Parameters<ApplyDarkStyles>[0]) {
-      return (this as Theme).applyStyles('dark', css);
-    },
-  }) as ThemeOptions;
-
-export function getThemedComponents(): ThemeOptions {
-  return {
-    components: {
-      MuiAlert: {
-        styleOverrides: {
-          root: {
-            padding: '12px 16px',
-          },
-          standardWarning: ({ theme }) => [
-            {
-              backgroundColor: alpha(theme.palette.warning[50], 0.5),
-              color: (theme.vars || theme).palette.grey[900],
-              border: '1px solid',
-              borderColor: alpha(theme.palette.warning[600], 0.3),
-              '& .MuiAlert-icon': {
-                color: (theme.vars || theme).palette.warning[700],
-              },
-            },
-            theme.applyDarkStyles({
-              backgroundColor: alpha(theme.palette.warning[700], 0.2),
-              color: (theme.vars || theme).palette.warning[50],
-              '& .MuiAlert-icon': {
-                color: (theme.vars || theme).palette.warning[200],
-              },
-            }),
-          ],
-          icon: {
-            paddingTop: 12,
-            paddingBottom: 0,
-          },
-        },
-      },
-      MuiButtonBase: {
-        defaultProps: {
-          disableTouchRipple: true,
-          disableRipple: true,
-        },
-        styleOverrides: {
-          root: ({ theme }) => ({
-            transition: 'all 100ms ease-in',
-            '&:focus-visible': {
-              outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
-              outlineOffset: '2px',
-            },
-          }),
-        },
-      },
-      MuiButton: {
-        defaultProps: {
-          disableElevation: true,
-        },
-        styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            transition: 'all 120ms ease-in',
-            ...(ownerState.size === 'large' && {
-              ...theme.typography.body1,
-              lineHeight: 21 / 16,
-              padding: theme.spacing('8px', '10px', '10px', '12px'),
-              fontWeight: theme.typography.fontWeightSemiBold,
-              borderRadius: 10,
-              '& > span': { transition: '0.2s', marginLeft: 4 },
-              '&:hover > span': { transform: 'translateX(2px)' },
-            }),
-            ...(ownerState.size === 'medium' && {
-              fontSize: defaultTheme.typography.pxToRem(15),
-              padding: theme.spacing('8px', '12px', '8px', '14px'),
-              fontWeight: theme.typography.fontWeightSemiBold,
-              borderRadius: 8,
-              '& > span': { transition: '0.2s', marginLeft: 4 },
-              '&:hover > span': { transform: 'translateX(2px)' },
-            }),
-            ...(ownerState.size === 'small' && {
-              padding: theme.spacing('6px', 1),
-              fontFamily: theme.typography.fontFamily,
-              fontSize: defaultTheme.typography.pxToRem(13),
-              fontWeight: theme.typography.fontWeightSemiBold,
-              borderRadius: 8,
-              '& .MuiButton-startIcon': {
-                transition: '0.15s',
-                marginRight: 4,
-                marginLeft: -1,
-              },
-              '& .MuiButton-endIcon': {
-                transition: '0.15s',
-                marginLeft: 4,
-              },
-              '&:hover': {
-                '& .MuiButton-startIcon': { transform: 'translateX(-2px)' },
-                '& .MuiButton-endIcon': { transform: 'translateX(2px)' },
-              },
-            }),
-            ...(ownerState.variant === 'outlined' &&
-              ownerState.color === 'secondary' && {
-                color: (theme.vars || theme).palette.text.primary,
-                backgroundColor: alpha(theme.palette.primaryDark[50], 0.3),
-                borderColor: (theme.vars || theme).palette.primaryDark[100],
-                boxShadow: `${alpha(theme.palette.grey[50], 0.5)} 0 2px 0.5px inset, ${alpha(
-                  theme.palette.grey[100],
-                  0.5,
-                )} 0 -2px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
-                '&:hover': {
-                  backgroundColor: (theme.vars || theme).palette.primaryDark[50],
-                },
-                ...theme.applyDarkStyles({
-                  color: (theme.vars || theme).palette.primaryDark[100],
-                  borderColor: alpha(theme.palette.primaryDark[600], 0.5),
-                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
-                  boxShadow: `${alpha(theme.palette.primaryDark[600], 0.1)} 0 2px 0 inset, ${alpha(theme.palette.primaryDark[900], 0.5)} 0 -2px 1px inset, ${theme.palette.common.black} 0 1px 2px 0`,
-                  '&:hover': {
-                    backgroundColor: (theme.vars || theme).palette.primaryDark[700],
-                  },
-                }),
-              }),
-            ...(ownerState.variant === 'outlined' &&
-              ownerState.color === 'primary' && {
-                color: (theme.vars || theme).palette.primary[600],
-                backgroundColor: alpha(theme.palette.primary[50], 0.3),
-                borderColor: (theme.vars || theme).palette.primary[100],
-                boxShadow: `${theme.palette.primary[50]} 0 2px 0.5px inset, ${alpha(
-                  theme.palette.primary[100],
-                  0.2,
-                )} 0 -3px 0 inset, ${alpha(theme.palette.primary[100], 0.3)} 0 1px 2px 0`,
-                '&:hover': {
-                  backgroundColor: (theme.vars || theme).palette.primary[50],
-                  borderColor: (theme.vars || theme).palette.primary[300],
-                },
-                ...theme.applyDarkStyles({
-                  color: (theme.vars || theme).palette.primary[200],
-                  borderColor: alpha(theme.palette.primary[900], 0.7),
-                  backgroundColor: alpha(theme.palette.primary[900], 0.2),
-                  boxShadow: `${alpha(theme.palette.primary[900], 0.1)} 0 2px 1px inset, ${alpha(
-                    theme.palette.common.black,
-                    0.5,
-                  )} 0 -3px 0 inset, ${theme.palette.common.black} 0 1px 2px 0`,
-                  '&:hover': {
-                    backgroundColor: (theme.vars || theme).palette.primary[900],
-                    borderColor: (theme.vars || theme).palette.primary[700],
-                  },
-                }),
-              }),
-            ...(ownerState.variant === 'contained' &&
-              ownerState.color === 'primary' && {
-                color: '#fff',
-                textShadow: `0 1px 1px ${alpha(theme.palette.common.black, 0.6)}`,
-                backgroundColor: (theme.vars || theme).palette.primary[500],
-                backgroundImage: `linear-gradient(180deg, ${alpha(
-                  theme.palette.primary[500],
-                  0.6,
-                )} 0%, ${theme.palette.primary[600]} 100%)`,
-                boxShadow: `${theme.palette.primary[400]} 0 2px 0.5px inset, ${theme.palette.primary[700]} 0 -3px 1px inset, ${alpha(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
-                '&:hover': {
-                  backgroundColor: (theme.vars || theme).palette.primary[700],
-                },
-                '&:active': {
-                  backgroundColor: (theme.vars || theme).palette.primaryDark[700],
-                },
-              }),
-            ...(ownerState.variant === 'text' && {
-              color: (theme.vars || theme).palette.primary[600],
-              ...theme.applyDarkStyles({
-                color: (theme.vars || theme).palette.primary[300],
-              }),
-            }),
-          }),
-        },
-        variants: [
-          {
-            // @ts-ignore internal repo module augmentation issue
-            props: { variant: 'code' },
-            style: ({ theme }) => [
-              {
-                cursor: 'copy',
-                padding: 0,
-                width: 'max-content',
-                backgroundColor: 'transparent',
-                color: (theme.vars || theme).palette.grey[600],
-                fontFamily: theme.typography.fontFamilyCode,
-                fontWeight: 400,
-                fontSize: defaultTheme.typography.pxToRem(12),
-                lineHeight: 21 / 14,
-                letterSpacing: 0,
-                WebkitFontSmoothing: 'subpixel-antialiased',
-                '& .MuiButton-startIcon': {
-                  color: (theme.vars || theme).palette.grey[400],
-                },
-                '& .MuiButton-endIcon': {
-                  display: 'inline-block',
-                  position: 'absolute',
-                  color: (theme.vars || theme).palette.primary.main,
-                  right: -22,
-                  top: -1,
-                  opacity: 0,
-                  transitionProperty: 'opacity',
-                  transitionDuration: '100ms',
-                  transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
-                },
-                '&:hover, &.Mui-focusVisible': {
-                  backgroundColor: 'transparent',
-                  color: (theme.vars || theme).palette.primary.main,
-                  '& .MuiButton-endIcon': {
-                    color: (theme.vars || theme).palette.primary.main,
-                    opacity: 1,
-                  },
-                },
-              },
-              theme.applyDarkStyles({
-                '& .MuiButton-endIcon': {
-                  color: (theme.vars || theme).palette.primary[300],
-                },
-                '&:hover, &.Mui-focusVisible': {
-                  color: (theme.vars || theme).palette.primary[300],
-                  '& .MuiButton-endIcon': {
-                    opacity: 1,
-                  },
-                },
-              }),
-            ],
-          },
-          {
-            // @ts-ignore internal repo module augmentation issue
-            props: { variant: 'codeOutlined' },
-            style: ({ theme }) => [
-              {
-                display: 'inline-block',
-                justifyContent: 'start',
-                overflowX: 'hidden',
-                whiteSpace: 'nowrap',
-                textOverflow: 'ellipsis',
-                position: 'relative',
-                border: '1px solid',
-                color: (theme.vars || theme).palette.grey[900],
-                backgroundColor: alpha(theme.palette.primary[50], 0.3),
-                borderColor: (theme.vars || theme).palette.grey[200],
-                boxShadow: `0px 2px 2px ${alpha(
-                  theme.palette.primary[100],
-                  0.2,
-                )}, inset 0px 4px 4px ${alpha(theme.palette.primary[100], 0.2)}`,
-                fontFamily: theme.typography.fontFamilyCode,
-                fontWeight: 400,
-                fontSize: defaultTheme.typography.pxToRem(12),
-                lineHeight: 21 / 14,
-                letterSpacing: 0,
-                WebkitFontSmoothing: 'subpixel-antialiased',
-                '& .MuiButton-endIcon': {
-                  display: 'inline-block',
-                  position: 'absolute',
-                  top: 12,
-                  right: 0,
-                  marginRight: 10,
-                  color: (theme.vars || theme).palette.grey[600],
-                },
-                '&:hover, &.Mui-focusVisible': {
-                  borderColor: (theme.vars || theme).palette.primary.main,
-                  backgroundColor: (theme.vars || theme).palette.primary[50],
-                  color: (theme.vars || theme).palette.primary[600],
-                  '& .MuiButton-endIcon': {
-                    color: (theme.vars || theme).palette.primary.main,
-                  },
-                },
-              } as const,
-              theme.applyDarkStyles({
-                color: (theme.vars || theme).palette.grey[500],
-                borderColor: (theme.vars || theme).palette.primaryDark[600],
-                backgroundColor: (theme.vars || theme).palette.primaryDark[700],
-                boxShadow: '0px 2px 2px #0B0D0E, inset 0px 4px 4px rgba(20, 25, 31, 0.3)',
-                '& .MuiButton-endIcon': {
-                  color: (theme.vars || theme).palette.grey[400],
-                },
-                '&:hover, &.Mui-focusVisible': {
-                  backgroundColor: (theme.vars || theme).palette.primary[900],
-                  color: (theme.vars || theme).palette.primary[100],
-                  '& .MuiButton-endIcon': {
-                    color: (theme.vars || theme).palette.primary[300],
-                  },
-                },
-              }),
-            ],
-          },
-          {
-            // @ts-ignore internal repo module augmentation issue
-            props: { variant: 'link' },
-            style: ({ theme }) => ({
-              marginBottom: 1,
-              fontSize: theme.typography.pxToRem(14),
-              fontWeight: theme.typography.fontWeightBold,
-              color: (theme.vars || theme).palette.primary[600],
-              '&:hover': {
-                backgroundColor: (theme.vars || theme).palette.primary[50],
-              },
-              ...theme.applyDarkStyles({
-                color: (theme.vars || theme).palette.primary[300],
-                '&:hover': {
-                  backgroundColor: alpha(theme.palette.primary[800], 0.3),
-                },
-              }),
-            }),
-          },
-        ],
-      },
-      MuiIconButton: {
-        variants: [
-          {
-            props: { color: 'primary' },
-            style: ({ theme }) => [
-              {
-                height: 34,
-                width: 34,
-                border: `1px solid`,
-                borderColor: (theme.vars || theme).palette.grey[200],
-                color: (theme.vars || theme).palette.primary[500],
-                borderRadius: theme.shape.borderRadius,
-                boxShadow: `inset 0 1px 2px ${
-                  (theme.vars || theme).palette.grey[50]
-                }, 0 1px 0.5px ${alpha(theme.palette.grey[100], 0.6)}`,
-                '&:hover': {
-                  borderColor: (theme.vars || theme).palette.grey[300],
-                  background: (theme.vars || theme).palette.grey[50],
-                },
-              },
-              theme.applyDarkStyles({
-                borderColor: (theme.vars || theme).palette.primaryDark[700],
-                color: (theme.vars || theme).palette.primary[300],
-                boxShadow: `inset 0 1px 1px ${
-                  (theme.vars || theme).palette.primaryDark[900]
-                }, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`,
-                '&:hover': {
-                  borderColor: (theme.vars || theme).palette.primaryDark[600],
-                  background: alpha(theme.palette.primaryDark[700], 0.4),
-                },
-              }),
-            ],
-          },
-          {
-            props: { color: 'info' },
-            style: ({ theme }) => [
-              {
-                height: 34,
-                width: 34,
-                border: `1px solid`,
-                borderColor: (theme.vars || theme).palette.grey[200],
-                color: (theme.vars || theme).palette.grey[600],
-                borderRadius: theme.shape.borderRadius,
-                boxShadow: `inset 0 1px 2px ${
-                  (theme.vars || theme).palette.grey[50]
-                }, 0 1px 0.5px ${alpha(theme.palette.grey[100], 0.6)}`,
-                '&:hover': {
-                  color: (theme.vars || theme).palette.primary.main,
-                  borderColor: (theme.vars || theme).palette.grey[300],
-                  background: (theme.vars || theme).palette.grey[50],
-                },
-              },
-              theme.applyDarkStyles({
-                borderColor: (theme.vars || theme).palette.primaryDark[700],
-                color: (theme.vars || theme).palette.grey[400],
-                boxShadow: `inset 0 1px 1px ${
-                  (theme.vars || theme).palette.primaryDark[900]
-                }, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`,
-                '&:hover': {
-                  color: (theme.vars || theme).palette.primary[400],
-                  borderColor: (theme.vars || theme).palette.primaryDark[600],
-                  background: alpha(theme.palette.primaryDark[700], 0.4),
-                },
-              }),
-            ],
-          },
-        ],
-      },
-      MuiMenu: {
-        styleOverrides: {
-          paper: ({ theme }) => [
-            {
-              minWidth: 160,
-              color: (theme.vars || theme).palette.text.secondary,
-              backgroundImage: 'none',
-              border: '1px solid',
-              backgroundColor: (theme.vars || theme).palette.background.paper,
-              borderColor: (theme.vars || theme).palette.grey[200],
-              '& .MuiMenuItem-root': {
-                fontSize: theme.typography.pxToRem(14),
-                fontWeight: 500,
-                '&:hover, &:focus': {
-                  backgroundColor: (theme.vars || theme).palette.grey[50],
-                },
-                '&:focus-visible': {
-                  outline: 'none',
-                },
-                '&.Mui-selected': {
-                  fontWeight: 500,
-                  color: (theme.vars || theme).palette.primary[600],
-                  backgroundColor: alpha(theme.palette.primary[100], 0.6),
-                },
-              },
-            },
-            theme.applyDarkStyles({
-              backgroundColor: (theme.vars || theme).palette.primaryDark[900],
-              borderColor: (theme.vars || theme).palette.primaryDark[700],
-              '& .MuiMenuItem-root': {
-                '&:hover, &:focus': {
-                  backgroundColor: (theme.vars || theme).palette.primaryDark[700],
-                },
-                '&.Mui-selected': {
-                  color: (theme.vars || theme).palette.primary[300],
-                  backgroundColor: alpha(theme.palette.primary[900], 0.4),
-                },
-              },
-            }),
-          ],
-        },
-      },
-      MuiPopover: {
-        styleOverrides: {
-          paper: ({ theme }) => ({
-            boxShadow: '0px 4px 20px rgba(170, 180, 190, 0.3)',
-            ...theme.applyDarkStyles({
-              boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.5)',
-            }),
-          }),
-        },
-      },
-      MuiDivider: {
-        styleOverrides: {
-          root: ({ theme }) => ({
-            borderColor: (theme.vars || theme).palette.grey[100],
-            ...theme.applyDarkStyles({
-              borderColor: alpha(theme.palette.primaryDark[700], 0.8),
-            }),
-          }),
-        },
-      },
-      MuiLink: {
-        defaultProps: {
-          underline: 'none',
-        },
-        styleOverrides: {
-          root: ({ theme }) => ({
-            display: 'inline-flex',
-            alignItems: 'center',
-            fontWeight: theme.typography.fontWeightSemiBold,
-            '&.MuiTypography-body1 > svg': {
-              marginTop: 2,
-            },
-            '& svg:last-child': {
-              marginLeft: 2,
-            },
-            '&:focus-visible': {
-              outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
-              outlineOffset: '2px',
-            },
-          }),
-        },
-        variants: [
-          {
-            props: { color: 'primary' },
-            style: ({ theme }) => [
-              {
-                color: (theme.vars || theme).palette.primary[600],
-                '&:hover': {
-                  color: (theme.vars || theme).palette.primary[700],
-                },
-              },
-              theme.applyDarkStyles({
-                color: (theme.vars || theme).palette.primary[300],
-                '&:hover': {
-                  color: (theme.vars || theme).palette.primary[200],
-                },
-              }),
-            ],
-          },
-        ],
-      },
-      MuiChip: {
-        styleOverrides: {
-          root: ({ ownerState: { color, variant }, theme }) => ({
-            fontWeight: theme.typography.fontWeightSemiBold,
-            paddingBottom: 0.2,
-            ...(variant === 'outlined' &&
-              color === 'default' && {
-                backgroundColor: alpha(theme.palette.grey[50], 0.5),
-                color: (theme.vars || theme).palette.grey[900],
-                borderColor: (theme.vars || theme).palette.grey[200],
-                '&:hover': {
-                  backgroundColor: (theme.vars || theme).palette.grey[100],
-                  color: (theme.vars || theme).palette.grey[900],
-                },
-                ...theme.applyDarkStyles({
-                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
-                  color: (theme.vars || theme).palette.grey[300],
-                  borderColor: alpha(theme.palette.primaryDark[500], 0.5),
-                  '&:hover': {
-                    color: (theme.vars || theme).palette.grey[300],
-                    backgroundColor: (theme.vars || theme).palette.primaryDark[700],
-                  },
-                }),
-              }),
-            ...(variant === 'outlined' &&
-              color === 'info' && {
-                backgroundColor: alpha(theme.palette.grey[50], 0.5),
-                color: (theme.vars || theme).palette.grey[900],
-                borderColor: (theme.vars || theme).palette.grey[200],
-                ...theme.applyDarkStyles({
-                  color: (theme.vars || theme).palette.grey[300],
-                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.5),
-                  borderColor: (theme.vars || theme).palette.primaryDark[600],
-                }),
-              }),
-            ...(variant === 'outlined' &&
-              color === 'primary' && {
-                borderColor: (theme.vars || theme).palette.primary[100],
-                backgroundColor: (theme.vars || theme).palette.primary[50],
-                ...theme.applyDarkStyles({
-                  color: (theme.vars || theme).palette.primary[300],
-                  borderColor: alpha(theme.palette.primary[500], 0.2),
-                  backgroundColor: alpha(theme.palette.primary[700], 0.2),
-                }),
-              }),
-            ...(variant === 'outlined' &&
-              color === 'success' && {
-                borderColor: (theme.vars || theme).palette.success[100],
-                backgroundColor: (theme.vars || theme).palette.success[50],
-                color: (theme.vars || theme).palette.success[900],
-                ...theme.applyDarkStyles({
-                  color: (theme.vars || theme).palette.success[300],
-                  borderColor: alpha(theme.palette.success[300], 0.2),
-                  background: alpha(theme.palette.success[800], 0.2),
-                }),
-              }),
-            ...(variant === 'filled' && {
-              ...(color === 'default' && {
-                border: '1px solid transparent',
-                color: (theme.vars || theme).palette.primary[700],
-                backgroundColor: alpha(theme.palette.primary[100], 0.5),
-                '&:hover': {
-                  backgroundColor: (theme.vars || theme).palette.primary[100],
-                },
-                ...theme.applyDarkStyles({
-                  color: '#fff',
-                  backgroundColor: alpha(theme.palette.primaryDark[500], 0.8),
-                  '&:hover': {
-                    backgroundColor: (theme.vars || theme).palette.primaryDark[600],
-                  },
-                }),
-              }),
-              ...(color === 'primary' && {
-                color: (theme.vars || theme).palette.primary[600],
-                backgroundColor: alpha(theme.palette.primary[100], 0.4),
-                '&:hover': {
-                  backgroundColor: (theme.vars || theme).palette.primary[100],
-                },
-                '& .MuiChip-deleteIcon': {
-                  color: (theme.vars || theme).palette.primary[600],
-                  '&:hover': {
-                    color: (theme.vars || theme).palette.primary[700],
-                  },
-                },
-                ...theme.applyDarkStyles({
-                  color: (theme.vars || theme).palette.primary[100],
-                  backgroundColor: alpha(theme.palette.primary[800], 0.5),
-                  '&:hover': {
-                    backgroundColor: alpha(theme.palette.primary[900], 0.5),
-                  },
-                  '& .MuiChip-deleteIcon': {
-                    color: (theme.vars || theme).palette.primary[100],
-                    '&:hover': {
-                      color: (theme.vars || theme).palette.primary[50],
-                    },
-                  },
-                }),
-              }),
-            }),
-            // for labelling product in the search
-            // @ts-ignore internal repo module augmentation issue
-            ...(variant === 'light' && {
-              ...(color === 'default' && {
-                color: (theme.vars || theme).palette.primary[700],
-                backgroundColor: alpha(theme.palette.primary[100], 0.3),
-                ...theme.applyDarkStyles({
-                  color: (theme.vars || theme).palette.primary[200],
-                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.5),
-                }),
-              }),
-              ...(color === 'warning' && {
-                color: (theme.vars || theme).palette.warning[900],
-                backgroundColor: (theme.vars || theme).palette.warning[100],
-                ...theme.applyDarkStyles({
-                  color: '#fff',
-                  backgroundColor: (theme.vars || theme).palette.warning[900],
-                }),
-              }),
-              ...(color === 'success' && {
-                color: (theme.vars || theme).palette.success[900],
-                backgroundColor: (theme.vars || theme).palette.success[100],
-                ...theme.applyDarkStyles({
-                  color: '#fff',
-                  backgroundColor: (theme.vars || theme).palette.success[900],
-                }),
-              }),
-            }),
-          }),
-        },
-      },
-      MuiList: {
-        styleOverrides: {
-          root: {
-            padding: 0,
-          },
-        },
-      },
-      MuiListItemButton: {
-        styleOverrides: {
-          root: ({ theme }) => [
-            {
-              padding: '8px',
-              textTransform: 'none',
-              fontWeight: 500,
-              fontSize: theme.typography.pxToRem(14),
-              color: theme.palette.grey[700],
-              borderRadius: 0,
-              '&:hover': {
-                backgroundColor: theme.palette.grey[50],
-              },
-              '&.Mui-selected': {
-                borderRadius: 10,
-                border: '1px solid',
-                color: (theme.vars || theme).palette.primary[500],
-                borderColor: `${(theme.vars || theme).palette.primary[500]} !important`,
-                backgroundColor: (theme.vars || theme).palette.primary[50],
-                '&:hover': {
-                  backgroundColor: (theme.vars || theme).palette.primary[100],
-                },
-              },
-            } as const,
-            theme.applyDarkStyles({
-              color: theme.palette.grey[300],
-              '&:hover': {
-                backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
-              },
-              '&.Mui-selected': {
-                color: '#fff',
-                borderColor: `${(theme.vars || theme).palette.primary[700]} !important`,
-                backgroundColor: (theme.vars || theme).palette.primaryDark[700],
-                '&:hover': {
-                  backgroundColor: (theme.vars || theme).palette.primaryDark[600],
-                },
-              },
-            }),
-          ],
-        },
-      },
-      MuiSelect: {
-        defaultProps: {
-          IconComponent: ArrowDropDownRounded,
-        },
-        styleOverrides: {
-          iconFilled: {
-            top: 'calc(50% - .25em)',
-          },
-        },
-      },
-      MuiTab: {
-        defaultProps: {
-          disableTouchRipple: true,
-        },
-      },
-      MuiPaper: {
-        styleOverrides: {
-          root: ({ theme, ownerState }) => [
-            {
-              backgroundImage: 'none',
-              backgroundColor: '#fff',
-              '&[href]': {
-                textDecorationLine: 'none',
-              },
-              transition: theme.transitions.create(['border', 'box-shadow'], {
-                duration: theme.transitions.duration.shortest,
-              }),
-              ...(ownerState.variant === 'outlined' && {
-                display: 'block',
-                borderColor: (theme.vars || theme).palette.grey[100],
-                '&[href]': {
-                  textDecorationLine: 'none',
-                  boxShadow: `inset 0 1px 2px ${
-                    (theme.vars || theme).palette.grey[50]
-                  }, 0 1px 2px ${alpha(theme.palette.grey[100], 0.6)}`,
-                  '&:hover': {
-                    borderColor: (theme.vars || theme).palette.primary[200],
-                    boxShadow: `0px 2px 8px ${(theme.vars || theme).palette.primary[100]}`,
-                  },
-                  '&:focus-visible': {
-                    outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
-                    outlineOffset: '2px',
-                  },
-                },
-                ':is(a&), :is(button&)': {
-                  '&:hover': {
-                    borderColor: (theme.vars || theme).palette.primary[200],
-                    boxShadow: `0px 4px 16px ${(theme.vars || theme).palette.grey[200]}`,
-                  },
-                },
-              }),
-            },
-            theme.applyDarkStyles({
-              backgroundColor: (theme.vars || theme).palette.primaryDark[900],
-              ...(ownerState.variant === 'outlined' && {
-                borderColor: (theme.vars || theme).palette.primaryDark[700],
-                backgroundColor: alpha(theme.palette.primaryDark[800], 0.6),
-                '&[href]': {
-                  textDecorationLine: 'none',
-                  boxShadow: `inset 0 1px 1px ${
-                    (theme.vars || theme).palette.primaryDark[900]
-                  }, 0 1px 2px ${(theme.vars || theme).palette.common.black}`,
-                  '&:hover': {
-                    borderColor: alpha(theme.palette.primary[600], 0.5),
-                    boxShadow: `0px 2px 8px ${alpha(theme.palette.primary[900], 0.6)}`,
-                  },
-                },
-                ':is(a&), :is(button&)': {
-                  '&:hover': {
-                    boxShadow: `0px 4px 24px ${(theme.vars || theme).palette.common.black}`,
-                  },
-                },
-              }),
-            }),
-          ],
-        },
-      },
-      MuiTableCell: {
-        styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            padding: theme.spacing(1, 2),
-            borderColor: (theme.vars || theme).palette.divider,
-            ...(ownerState.variant === 'head' && {
-              color: (theme.vars || theme).palette.text.primary,
-              fontWeight: 700,
-            }),
-            ...(ownerState.variant === 'body' && {
-              color: (theme.vars || theme).palette.text.secondary,
-            }),
-          }),
-        },
-      },
-      MuiToggleButtonGroup: {
-        styleOverrides: {
-          root: ({ theme }) => ({
-            backgroundColor: '#fff',
-            ...theme.applyDarkStyles({
-              backgroundColor: (theme.vars || theme).palette.primaryDark[900],
-            }),
-          }),
-        },
-      },
-      MuiToggleButton: {
-        styleOverrides: {
-          root: ({ theme, ownerState }) => [
-            {
-              textTransform: 'none',
-              fontWeight: 'medium',
-              color: theme.palette.text.secondary,
-              borderColor: theme.palette.grey[200],
-              ...(ownerState.size === 'small' && {
-                padding: '0.375rem 0.75rem',
-              }),
-              '&.Mui-selected': {
-                color: (theme.vars || theme).palette.primary[700],
-                borderColor: `${(theme.vars || theme).palette.primary[500]} !important`,
-                backgroundColor: (theme.vars || theme).palette.primary[50],
-                '&:hover': {
-                  backgroundColor: (theme.vars || theme).palette.primary[100],
-                },
-              },
-            } as const,
-            theme.applyDarkStyles({
-              borderColor: theme.palette.primaryDark[700],
-              '&:hover': {
-                backgroundColor: alpha(theme.palette.primaryDark[600], 0.2),
-              },
-              '&.Mui-selected': {
-                color: (theme.vars || theme).palette.primary[200],
-                borderColor: `${(theme.vars || theme).palette.primary[700]} !important`,
-                backgroundColor: alpha(theme.palette.primary[900], 0.4),
-                '&:hover': {
-                  backgroundColor: alpha(theme.palette.primary[900], 0.8),
-                  borderColor: `${(theme.vars || theme).palette.primary[400]} !important`,
-                },
-              },
-            }),
-          ],
-        },
-      },
-      MuiTooltip: {
-        styleOverrides: {
-          tooltip: {
-            borderRadius: 6,
-            padding: '6px 12px',
-          },
-        },
-      },
-      MuiSwitch: {
-        styleOverrides: {
-          root: {
-            width: 32,
-            height: 20,
-            padding: 0,
-            '& .MuiSwitch-switchBase': {
-              '&.Mui-checked': {
-                transform: 'translateX(11px)',
-                color: '#fff',
-              },
-            },
-          },
-          switchBase: {
-            height: 20,
-            width: 20,
-            padding: 0,
-            color: '#fff',
-            '&.Mui-checked + .MuiSwitch-track': {
-              opacity: 1,
-            },
-          },
-          track: ({ theme }) => ({
-            opacity: 1,
-            borderRadius: 32,
-            backgroundColor: theme.palette.grey[400],
-            ...theme.applyDarkStyles({
-              backgroundColor: theme.palette.grey[800],
-            }),
-          }),
-          thumb: {
-            flexShrink: 0,
-            width: '14px',
-            height: '14px',
-          },
-        },
-      },
-      MuiPaginationItem: {
-        styleOverrides: {
-          root: ({ theme }) => [
-            {
-              textTransform: 'none',
-              fontWeight: theme.typography.fontWeightSemiBold,
-              color: theme.palette.grey[700],
-              borderColor: theme.palette.grey[200],
-              borderRadius: '8px',
-              '&.Mui-selected': {
-                color: (theme.vars || theme).palette.primary[500],
-                borderColor: `${(theme.vars || theme).palette.primary[500]} !important`,
-                backgroundColor: (theme.vars || theme).palette.primary[50],
-                '&:hover': {
-                  backgroundColor: (theme.vars || theme).palette.primary[100],
-                },
-              },
-            } as const,
-            theme.applyDarkStyles({
-              color: theme.palette.grey[200],
-              borderColor: theme.palette.primaryDark[700],
-              '&.Mui-selected': {
-                color: theme.palette.primary[100],
-                borderColor: `${(theme.vars || theme).palette.primary[700]} !important`,
-                backgroundColor: alpha(theme.palette.primary[900], 0.5),
-                '&:hover': {
-                  backgroundColor: alpha(theme.palette.primary[900], 0.8),
-                },
-              },
-            }),
-          ],
-        },
-      },
-      MuiCssBaseline: {
-        defaultProps: {
-          enableColorScheme: true,
-        },
-        styleOverrides: {
-          html: {
-            overflowY: 'scroll',
-            // TODO add support for it,
-            // https://github.com/mui/material-ui/issues/40748
-            // scrollbarGutter: 'stable',
-          },
-        },
-      },
-    },
-  };
-}
-
-export const brandingDarkTheme = createTheme({
-  ...getDesignTokens('dark'),
-  ...getThemedComponents(),
-});
-
-export const brandingLightTheme = createTheme({
-  ...getDesignTokens('light'),
-  ...getThemedComponents(),
-});
+export * from '@mui/docs/branding';
diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js
index 80781fd2724f25..abf1775d1768fd 100644
--- a/docs/src/modules/components/ApiPage.js
+++ b/docs/src/modules/components/ApiPage.js
@@ -13,7 +13,7 @@ import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
 import Ad from 'docs/src/modules/components/Ad';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 import PropertiesSection, {
   getPropsToC,
 } from 'docs/src/modules/components/ApiPage/sections/PropertiesSection';
diff --git a/docs/src/modules/components/ApiPage/ApiWarning.tsx b/docs/src/modules/components/ApiPage/ApiWarning.tsx
index f1b6a5dcd11f55..be5457e4e48a48 100644
--- a/docs/src/modules/components/ApiPage/ApiWarning.tsx
+++ b/docs/src/modules/components/ApiPage/ApiWarning.tsx
@@ -6,7 +6,7 @@ import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import {
   brandingDarkTheme as darkTheme,
   brandingLightTheme as lightTheme,
-} from 'docs/src/modules/brandingTheme';
+} from '@mui/docs/branding';
 
 const StyledAlert = styled(Alert)(
   ({ theme }) => ({
diff --git a/docs/src/modules/components/ApiPage/list/ClassesList.tsx b/docs/src/modules/components/ApiPage/list/ClassesList.tsx
index d7366af1b60239..9923913965eeeb 100644
--- a/docs/src/modules/components/ApiPage/list/ClassesList.tsx
+++ b/docs/src/modules/components/ApiPage/list/ClassesList.tsx
@@ -10,7 +10,7 @@ import ExpandableApiItem, {
 import {
   brandingLightTheme as lightTheme,
   brandingDarkTheme as darkTheme,
-} from 'docs/src/modules/brandingTheme';
+} from '@mui/docs/branding';
 import ApiWarning from 'docs/src/modules/components/ApiPage/ApiWarning';
 
 const StyledApiItem = styled(ExpandableApiItem)(
diff --git a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
index 5f5a076ea250dc..bf8d7ec1d833a0 100644
--- a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
+++ b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
@@ -7,7 +7,7 @@ import { Divider, IconButton, SxProps } from '@mui/material';
 import {
   brandingDarkTheme as darkTheme,
   brandingLightTheme as lightTheme,
-} from 'docs/src/modules/brandingTheme';
+} from '@mui/docs/branding';
 
 type DescriptionType = 'props' | 'classes' | 'CSS' | 'slots';
 
diff --git a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
index 801349f37cc536..4b941670f15ae3 100644
--- a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
+++ b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
@@ -6,7 +6,7 @@ import { useTranslate } from '@mui/docs/i18n';
 import {
   brandingDarkTheme as darkTheme,
   brandingLightTheme as lightTheme,
-} from 'docs/src/modules/brandingTheme';
+} from '@mui/docs/branding';
 import ExpandableApiItem, {
   ApiItemContaier,
 } from 'docs/src/modules/components/ApiPage/list/ExpandableApiItem';
diff --git a/docs/src/modules/components/ApiPage/list/SlotsList.tsx b/docs/src/modules/components/ApiPage/list/SlotsList.tsx
index f205d62009f5fd..d05c5a859fa45e 100644
--- a/docs/src/modules/components/ApiPage/list/SlotsList.tsx
+++ b/docs/src/modules/components/ApiPage/list/SlotsList.tsx
@@ -4,7 +4,7 @@ import { styled, alpha } from '@mui/material/styles';
 import {
   brandingLightTheme as lightTheme,
   brandingDarkTheme as darkTheme,
-} from 'docs/src/modules/brandingTheme';
+} from '@mui/docs/branding';
 import { useTranslate } from '@mui/docs/i18n';
 import ExpandableApiItem, {
   ApiItemContaier,
diff --git a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx
index f2546202208eb1..b0b687e10ad9a0 100644
--- a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx
+++ b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx
@@ -5,7 +5,7 @@ import { styled, alpha } from '@mui/material/styles';
 import {
   brandingDarkTheme as darkTheme,
   brandingLightTheme as lightTheme,
-} from 'docs/src/modules/brandingTheme';
+} from '@mui/docs/branding';
 import { getHash } from 'docs/src/modules/components/ApiPage/list/ClassesList';
 import StyledTableContainer from 'docs/src/modules/components/ApiPage/table/StyledTableContainer';
 import { useTranslate } from '@mui/docs/i18n';
diff --git a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
index cf52eef9036d60..b734f241b2c6ed 100644
--- a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
+++ b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
@@ -5,7 +5,7 @@ import { useTranslate } from '@mui/docs/i18n';
 import {
   brandingDarkTheme as darkTheme,
   brandingLightTheme as lightTheme,
-} from 'docs/src/modules/brandingTheme';
+} from '@mui/docs/branding';
 import { Properties, getHash } from 'docs/src/modules/components/ApiPage/list/PropertiesList';
 import StyledTableContainer from 'docs/src/modules/components/ApiPage/table/StyledTableContainer';
 import ApiWarning from 'docs/src/modules/components/ApiPage/ApiWarning';
diff --git a/docs/src/modules/components/ApiPage/table/SlotsTable.tsx b/docs/src/modules/components/ApiPage/table/SlotsTable.tsx
index d08c3e68aa3133..bdaaf23ef987fe 100644
--- a/docs/src/modules/components/ApiPage/table/SlotsTable.tsx
+++ b/docs/src/modules/components/ApiPage/table/SlotsTable.tsx
@@ -5,7 +5,7 @@ import { styled, alpha } from '@mui/material/styles';
 import {
   brandingDarkTheme as darkTheme,
   brandingLightTheme as lightTheme,
-} from 'docs/src/modules/brandingTheme';
+} from '@mui/docs/branding';
 import { SlotsFormatedParams, getHash } from 'docs/src/modules/components/ApiPage/list/SlotsList';
 import StyledTableContainer from 'docs/src/modules/components/ApiPage/table/StyledTableContainer';
 
diff --git a/docs/src/modules/components/ApiPage/table/StyledTableContainer.tsx b/docs/src/modules/components/ApiPage/table/StyledTableContainer.tsx
index a9be6a2fa5150a..c0222301382202 100644
--- a/docs/src/modules/components/ApiPage/table/StyledTableContainer.tsx
+++ b/docs/src/modules/components/ApiPage/table/StyledTableContainer.tsx
@@ -1,5 +1,5 @@
 import { styled, alpha } from '@mui/material/styles';
-import { brandingDarkTheme as darkTheme } from 'docs/src/modules/brandingTheme';
+import { brandingDarkTheme as darkTheme } from '@mui/docs/branding';
 
 const StyledTableContainer = styled('div')(
   ({ theme }) => ({
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
index f1ff5f2f9bae04..08d1eb2c232786 100644
--- a/docs/src/modules/components/AppFrame.js
+++ b/docs/src/modules/components/AppFrame.js
@@ -115,13 +115,12 @@ const StyledAppBar = styled(AppBar, {
     boxShadow: 'none',
     backdropFilter: 'blur(8px)',
     borderStyle: 'solid',
-    borderColor: (theme.vars || theme).palette.grey[100],
+    borderColor: (theme.vars || theme).palette.divider,
     borderWidth: 0,
     borderBottomWidth: 'thin',
     backgroundColor: 'rgba(255,255,255,0.8)',
     color: (theme.vars || theme).palette.grey[800],
     ...theme.applyDarkStyles({
-      borderColor: alpha(theme.palette.primary[100], 0.08),
       backgroundColor: alpha(theme.palette.primaryDark[900], 0.8),
       color: (theme.vars || theme).palette.grey[500],
     }),
@@ -208,7 +207,7 @@ export default function AppFrame(props) {
             </Box>
           </NextLink>
           <GrowingDiv />
-          <Stack direction="row" spacing="10px">
+          <Stack direction="row" spacing={1} useFlexGap>
             <BannerComponent />
             <DeferredAppSearch />
             <Tooltip title={t('appFrame.github')} enterDelay={300}>
diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index a13d1e45f1460d..e3ea4afdf9d3e4 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -144,7 +144,7 @@ const Item = styled(
     theme.applyDarkStyles({
       ...color,
       '&::before': {
-        background: alpha(theme.palette.primaryDark[700], 0.6),
+        background: alpha(theme.palette.primaryDark[500], 0.3),
       },
       '&.app-drawer-active': {
         color: (theme.vars || theme).palette.primary[300],
diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
index 00e9cc24183998..c74297650aa327 100644
--- a/docs/src/modules/components/AppSearch.js
+++ b/docs/src/modules/components/AppSearch.js
@@ -54,10 +54,7 @@ const SearchButton = styled('button')(({ theme }) => [
     cursor: 'pointer',
     transitionProperty: 'all',
     transitionDuration: '150ms',
-    boxShadow: `inset 0 -1px 1px ${(theme.vars || theme).palette.grey[100]}, 0 1px 0.5px ${alpha(
-      theme.palette.grey[100],
-      0.6,
-    )}`,
+    boxShadow: `hsl(200, 0%, 100%) 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1.5px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
     '&:hover': {
       background: (theme.vars || theme).palette.grey[100],
       borderColor: (theme.vars || theme).palette.grey[300],
@@ -70,9 +67,7 @@ const SearchButton = styled('button')(({ theme }) => [
   theme.applyDarkStyles({
     backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
     borderColor: (theme.vars || theme).palette.primaryDark[700],
-    boxShadow: `inset 0 -1px 1px ${(theme.vars || theme).palette.primaryDark[900]}, 0 1px 0.5px ${
-      (theme.vars || theme).palette.common.black
-    }`,
+    boxShadow: `${alpha(theme.palette.primaryDark[600], 0.1)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
     '&:hover': {
       background: (theme.vars || theme).palette.primaryDark[700],
       borderColor: (theme.vars || theme).palette.primaryDark[600],
diff --git a/docs/src/modules/components/AppSettingsDrawer.js b/docs/src/modules/components/AppSettingsDrawer.js
index 8b04f7d36e3dd6..1bde4081dbfd62 100644
--- a/docs/src/modules/components/AppSettingsDrawer.js
+++ b/docs/src/modules/components/AppSettingsDrawer.js
@@ -66,14 +66,25 @@ export default function AppSettingsDrawer(props) {
       open={open}
       PaperProps={{
         elevation: 0,
-        sx: { width: { xs: 310, sm: 360 }, borderRadius: '10px 0px 0px 10px' },
+        sx: {
+          width: { xs: 310, sm: 360 },
+          borderRadius: '10px 0px 0px 10px',
+          border: '1px solid',
+          borderColor: 'divider',
+        },
       }}
       {...other}
     >
       <Box
-        sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', p: (1, 2) }}
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          px: 2,
+          py: 1,
+        }}
       >
-        <Typography variant="body1" fontWeight="500">
+        <Typography variant="body1" fontWeight="medium">
           {t('settings.settings')}
         </Typography>
         <IconButton color="inherit" onClick={onClose} edge="end" aria-label={t('close')}>
@@ -157,8 +168,8 @@ export default function AppSettingsDrawer(props) {
           href="/material-ui/customization/color/#playground"
           data-ga-event-category="settings"
           data-ga-event-action="colors"
-          size="medium"
           variant="outlined"
+          size="small"
           fullWidth
         >
           {t('settings.editDocsColors')}
diff --git a/docs/src/modules/components/BackToTop.tsx b/docs/src/modules/components/BackToTop.tsx
index a3366f7f626fb4..38b35e541700e3 100644
--- a/docs/src/modules/components/BackToTop.tsx
+++ b/docs/src/modules/components/BackToTop.tsx
@@ -35,7 +35,13 @@ export default function BackToTop() {
 
   return (
     <Fade in={trigger}>
-      <Tooltip title="Scroll to top" open={open} onClose={handleClose} onOpen={handleOpen}>
+      <Tooltip
+        title="Scroll to top"
+        placement="left"
+        open={open}
+        onClose={handleClose}
+        onOpen={handleOpen}
+      >
         <Box
           className="mui-fixed"
           sx={{
@@ -46,34 +52,27 @@ export default function BackToTop() {
           }}
         >
           <Fab
-            sx={[
-              (theme) => ({
-                backgroundColor: (theme.vars || theme).palette.primary[100],
-                boxShadow: `0px 4px 20px rgba(170, 180, 190, 0.3)`,
-                '&:hover': {
-                  backgroundColor: (theme.vars || theme).palette.primary[200],
-                },
-                '&:active': {
-                  boxShadow: `0px 4px 20px rgba(170, 180, 190, 0.6)`,
-                },
-              }),
-              (theme) =>
-                theme.applyDarkStyles({
-                  backgroundColor: (theme.vars || theme).palette.primaryDark[400],
-                  boxShadow: `0px 4px 20px rgba(0, 0, 0, 0.5)`,
-                  '&:hover': {
-                    backgroundColor: (theme.vars || theme).palette.primaryDark[500],
-                  },
-                  '&:active': {
-                    boxShadow: `0px 4px 20px rgba(0, 0, 0, 0.7)`,
-                  },
-                }),
-            ]}
             size="small"
             aria-label={t('backToTop')}
             onClick={handleClick}
             data-ga-event-category="docs"
             data-ga-event-action="click-back-to-top"
+            sx={(theme) => ({
+              backgroundColor: (theme.vars || theme).palette.primary[50],
+              border: `1px solid ${(theme.vars || theme).palette.primary[200]}`,
+              boxShadow: `0px 4px 12px rgba(0, 0, 0, 0.1)`,
+              '&:hover': {
+                backgroundColor: (theme.vars || theme).palette.primary[200],
+              },
+              ...theme.applyDarkStyles({
+                backgroundColor: (theme.vars || theme).palette.primary[900],
+                borderColor: (theme.vars || theme).palette.primary[700],
+                boxShadow: `0px 4px 12px rgba(0, 0, 0, 0.8)`,
+                '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.primary[800],
+                },
+              }),
+            })}
           >
             <KeyboardArrowUpRoundedIcon
               sx={(theme: Theme) => ({
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 12cdd5d9c5e1d2..ed82ae5d5aa386 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -21,9 +21,8 @@ import { useCodeStyling } from 'docs/src/modules/utils/codeStylingSolution';
 import { CODE_VARIANTS, CODE_STYLING } from 'docs/src/modules/constants';
 import { useUserLanguage, useTranslate } from '@mui/docs/i18n';
 import stylingSolutionMapping from 'docs/src/modules/utils/stylingSolutionMapping';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider, blue, blueDark, grey } from '@mui/docs/branding';
 import DemoToolbarRoot from 'docs/src/modules/components/DemoToolbarRoot';
-import { blue, blueDark, grey } from 'docs/src/modules/brandingTheme';
 
 /**
  * Removes leading spaces (indentation) present in the `.tsx` previews
@@ -211,6 +210,11 @@ const DemoRootMaterial = styled('div', {
     ...(bg === 'inline' && {
       padding: theme.spacing(0),
     }),
+    ...(bg === 'gradient' && {
+      padding: theme.spacing(12, 8),
+      borderLeftWidth: 1,
+      borderRightWidth: 1,
+    }),
   },
   /* Isolate the demo with an outline. */
   ...(bg === 'outlined' && {
@@ -232,28 +236,25 @@ const DemoRootMaterial = styled('div', {
   /* Prepare the background to display an inner elevation. */
   ...(bg === true && {
     padding: theme.spacing(3),
-    backgroundColor: alpha(theme.palette.grey[50], 0.6),
+    backgroundColor: alpha((theme.vars || theme).palette.grey[50], 0.5),
     border: `1px solid ${(theme.vars || theme).palette.divider}`,
     ...theme.applyDarkStyles({
-      backgroundColor: alpha(theme.palette.primaryDark[700], 0.15),
+      backgroundColor: alpha((theme.vars || theme).palette.primaryDark[700], 0.4),
     }),
   }),
   /* Mostly meant for introduction demos. */
   ...(bg === 'gradient' && {
     overflow: 'auto',
-    padding: theme.spacing(20, 8),
-    border: `1px solid`,
-    borderColor: (theme.vars || theme).palette.divider,
+    padding: theme.spacing(4, 2),
+    border: `1px solid ${(theme.vars || theme).palette.divider}`,
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
     backgroundClip: 'padding-box',
-    backgroundColor: alpha(theme.palette.primary[50], 0.5),
-    backgroundImage: `radial-gradient(140% 108% at 50% 8%, transparent 40%, ${
-      theme.palette.primary[50]
-    } 70%, ${alpha(theme.palette.primary[100], 0.2)} 100%)`,
+    backgroundColor: alpha(theme.palette.primary[50], 0.2),
+    backgroundImage: `radial-gradient(120% 140% at 50% 10%, transparent 40%, ${alpha((theme.vars || theme).palette.primary[100], 0.2)} 70%)`,
     ...theme.applyDarkStyles({
-      borderColor: (theme.vars || theme).palette.divider,
-      backgroundColor: '#00111A',
-      backgroundImage:
-        'radial-gradient(140% 120% at 50% 8%, transparent 40%, #051729 70%, #041425 100%)',
+      backgroundColor: (theme.vars || theme).palette.primaryDark[900],
+      backgroundImage: `radial-gradient(120% 140% at 50% 10%, transparent 30%, ${alpha((theme.vars || theme).palette.primary[900], 0.3)} 80%)`,
     }),
   }),
 }));
@@ -332,6 +333,9 @@ const DemoCodeViewer = styled(HighlightedCode)(() => ({
     maxWidth: 'initial',
     borderRadius: 0,
   },
+  '& .MuiCode-copy': {
+    display: 'none',
+  },
 }));
 
 const AnchorLink = styled('div')({
diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx
index 8877685b09e47d..b73c500fae1727 100644
--- a/docs/src/modules/components/DemoEditor.tsx
+++ b/docs/src/modules/components/DemoEditor.tsx
@@ -2,13 +2,13 @@ import * as React from 'react';
 import SimpleCodeEditor from 'react-simple-code-editor';
 import Box from '@mui/material/Box';
 import { NoSsr } from '@mui/base/NoSsr';
-import { styled, useTheme } from '@mui/material/styles';
+import { styled, alpha, useTheme } from '@mui/material/styles';
 import prism from '@mui/internal-markdown/prism';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import CodeCopyButton from 'docs/src/modules/components/CodeCopyButton';
 import { useTranslate } from '@mui/docs/i18n';
 import { useCodeCopy } from 'docs/src/modules/utils/CodeCopy';
-import { blueDark } from 'docs/src/modules/brandingTheme';
+import { blueDark } from '@mui/docs/branding';
 
 const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [
   {
@@ -16,14 +16,14 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [
       maxHeight: 'min(68vh, 1000px)',
       overflow: 'auto',
       marginTop: -1,
-      backgroundColor: '#0F1924', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
+      backgroundColor: 'hsl(210, 35%, 9%)', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
       border: `1px solid ${(theme.vars || theme).palette.divider}`,
       colorScheme: 'dark',
       '&:hover': {
-        boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primary.light}`,
+        boxShadow: `0 0 0 3px ${alpha((theme.vars || theme).palette.primary[500], 0.5)}`,
       },
       '&:focus-within': {
-        boxShadow: `0 0 0 2px ${(theme.vars || theme).palette.primary.main}`,
+        boxShadow: `0 0 0 2px ${alpha((theme.vars || theme).palette.primary[500], 0.5)}`,
       },
       [theme.breakpoints.up('sm')]: {
         borderRadius: '0 0 12px 12px',
@@ -35,16 +35,13 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [
       maxWidth: 'initial',
       maxHeight: 'initial',
     },
+    '& .MuiCode-copy': {
+      display: 'none',
+    },
   },
   theme.applyDarkStyles({
     '& .scrollContainer': {
       borderColor: (theme.vars || theme).palette.divider,
-      '&:hover': {
-        boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primaryDark[300]}`,
-      },
-      '&:focus-within': {
-        boxShadow: `0 0 0 2px ${(theme.vars || theme).palette.primaryDark[400]}`,
-      },
     },
   }),
 ]) as any;
diff --git a/docs/src/modules/components/DemoSandbox.js b/docs/src/modules/components/DemoSandbox.js
index 57ebf0ace75a40..56134daf603efd 100644
--- a/docs/src/modules/components/DemoSandbox.js
+++ b/docs/src/modules/components/DemoSandbox.js
@@ -13,7 +13,7 @@ import { useTheme, styled, createTheme, ThemeProvider } from '@mui/material/styl
 import rtl from 'jss-rtl';
 import DemoErrorBoundary from 'docs/src/modules/components/DemoErrorBoundary';
 import { useTranslate } from '@mui/docs/i18n';
-import { getDesignTokens } from 'docs/src/modules/brandingTheme';
+import { getDesignTokens } from '@mui/docs/branding';
 import { highDensity } from 'docs/src/modules/components/ThemeContext';
 
 const iframeDefaultJoyTheme = extendTheme({
diff --git a/docs/src/modules/components/DemoToolbarRoot.ts b/docs/src/modules/components/DemoToolbarRoot.ts
index 984115f71f2f7d..071aea7f1df146 100644
--- a/docs/src/modules/components/DemoToolbarRoot.ts
+++ b/docs/src/modules/components/DemoToolbarRoot.ts
@@ -11,11 +11,12 @@ const DemoToolbarRoot = styled('div', {
   {
     display: 'none',
     [theme.breakpoints.up('sm')]: {
+      top: 0,
       display: 'block',
-      border: `1px solid ${(theme.vars || theme).palette.divider}`,
       marginTop: demoOptions.bg === 'inline' ? theme.spacing(1) : -1,
-      top: 0,
       padding: theme.spacing(0.5, 1),
+      border: `1px solid ${(theme.vars || theme).palette.divider}`,
+      borderTopWidth: demoOptions.bg === 'inline' ? 1 : 0,
       backgroundColor: alpha(theme.palette.grey[50], 0.2),
       borderRadius: openDemoSource ? 0 : '0 0 12px 12px',
       transition: theme.transitions.create('border-radius'),
diff --git a/docs/src/modules/components/DiamondSponsors.js b/docs/src/modules/components/DiamondSponsors.js
index 8e4b9d7d0f47ab..4461e562ee4742 100644
--- a/docs/src/modules/components/DiamondSponsors.js
+++ b/docs/src/modules/components/DiamondSponsors.js
@@ -17,10 +17,7 @@ const NativeLink = styled('a')(({ theme }) => ({
   border: '1px solid',
   borderColor: (theme.vars || theme).palette.divider,
   transition: theme.transitions.create(['color', 'border-color']),
-  boxShadow: `inset 0 1px 1px ${(theme.vars || theme).palette.grey[50]}, 0 1px 2px ${alpha(
-    theme.palette.grey[100],
-    0.6,
-  )}`,
+  boxShadow: `${alpha(theme.palette.grey[100], 0.3)} 0 -2px 0 inset`,
   '&:hover': {
     backgroundColor: (theme.vars || theme).palette.grey[50],
   },
@@ -32,12 +29,10 @@ const NativeLink = styled('a')(({ theme }) => ({
     display: 'inline-block',
   },
   ...theme.applyDarkStyles({
-    boxShadow: `inset 0 1px 1px ${(theme.vars || theme).palette.primaryDark[900]}, 0 1px 0.5px ${
-      (theme.vars || theme).palette.common.black
-    }`,
+    boxShadow: `${alpha(theme.palette.primaryDark[600], 0.1)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset`,
     '&:hover': {
       backgroundColor: (theme.vars || theme).palette.primaryDark[800],
-      borderColor: (theme.vars || theme).palette.primaryDark[600],
+      borderColor: (theme.vars || theme).palette.primary[900],
     },
   }),
 }));
@@ -127,24 +122,18 @@ export default function DiamondSponsors() {
           borderRadius: 1,
           border: '1px dashed',
           transition: theme.transitions.create(['color', 'border-color', 'background-color']),
-          backgroundColor: alpha(theme.palette.primary[50], 0.5),
-          borderColor: (theme.vars || theme).palette.grey[200],
-          boxShadow: `inset 0 1px 1px ${
-            (theme.vars || theme).palette.grey[50]
-          }, 0 1px 2px ${alpha(theme.palette.grey[100], 0.5)}`,
+          backgroundColor: alpha(theme.palette.grey[50], 0.5),
+          borderColor: (theme.vars || theme).palette.grey[300],
           '&:hover': {
             backgroundColor: alpha(theme.palette.primary[100], 0.5),
             borderColor: (theme.vars || theme).palette.primary[300],
           },
           ...theme.applyDarkStyles({
-            backgroundColor: alpha(theme.palette.primary[700], 0.1),
-            borderColor: alpha(theme.palette.primary[400], 0.2),
-            boxShadow: `inset 0 1px 1px ${
-              (theme.vars || theme).palette.primaryDark[800]
-            }, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`,
+            backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
+            borderColor: (theme.vars || theme).palette.primaryDark[700],
             '&:hover': {
               backgroundColor: alpha(theme.palette.primary[700], 0.2),
-              borderColor: (theme.vars || theme).palette.primary[400],
+              borderColor: (theme.vars || theme).palette.primary[800],
             },
           }),
         })}
diff --git a/docs/src/modules/components/EditPage.js b/docs/src/modules/components/EditPage.js
index d8b16b3067ee3b..63b658fa4b4266 100644
--- a/docs/src/modules/components/EditPage.js
+++ b/docs/src/modules/components/EditPage.js
@@ -19,6 +19,7 @@ export default function EditPage(props) {
       component="a"
       size="small"
       variant="outlined"
+      color="secondary"
       startIcon={<GitHubIcon sx={{ mr: 0.5 }} />}
       href={
         userLanguage === 'en'
diff --git a/docs/src/modules/components/HighlightedCode.test.js b/docs/src/modules/components/HighlightedCode.test.js
index 8129c9ee38def0..05f7f1b627a523 100644
--- a/docs/src/modules/components/HighlightedCode.test.js
+++ b/docs/src/modules/components/HighlightedCode.test.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer } from '@mui-internal/test-utils';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
-import { getDesignTokens } from 'docs/src/modules/brandingTheme';
+import { getDesignTokens } from '@mui/docs/branding';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 
 describe('HighlightedCode', () => {
diff --git a/docs/src/modules/components/JoyStartingLinksCollection.js b/docs/src/modules/components/JoyStartingLinksCollection.js
index 78aaf32ef30167..fd789c58e134f9 100644
--- a/docs/src/modules/components/JoyStartingLinksCollection.js
+++ b/docs/src/modules/components/JoyStartingLinksCollection.js
@@ -3,7 +3,7 @@ import Grid from '@mui/material/Unstable_Grid2';
 import InstallDesktopRoundedIcon from '@mui/icons-material/InstallDesktopRounded';
 import WebRoundedIcon from '@mui/icons-material/WebRounded';
 import DrawRoundedIcon from '@mui/icons-material/DrawRounded';
-import InfoCard from 'docs/src/components/action/InfoCard';
+import { InfoCard } from '@mui/docs/InfoCard';
 
 const content = [
   {
diff --git a/docs/src/modules/components/JoyThemeBuilder.tsx b/docs/src/modules/components/JoyThemeBuilder.tsx
index e668edbed5979e..fa274153726f15 100644
--- a/docs/src/modules/components/JoyThemeBuilder.tsx
+++ b/docs/src/modules/components/JoyThemeBuilder.tsx
@@ -60,7 +60,7 @@ import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
 import DarkMode from '@mui/icons-material/DarkMode';
 import LightMode from '@mui/icons-material/LightMode';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 import codeSandbox from 'docs/src/modules/sandbox/CodeSandbox';
 import sourceJoyTemplates, { TemplateData } from 'docs/src/modules/joy/sourceJoyTemplates';
 import extractTemplates from 'docs/src/modules/utils/extractTemplates';
diff --git a/docs/src/modules/components/JoyUsageDemo.tsx b/docs/src/modules/components/JoyUsageDemo.tsx
index 3816f8cb40912c..8928e277af5ef7 100644
--- a/docs/src/modules/components/JoyUsageDemo.tsx
+++ b/docs/src/modules/components/JoyUsageDemo.tsx
@@ -18,7 +18,7 @@ import Select from '@mui/joy/Select';
 import Sheet from '@mui/joy/Sheet';
 import Switch from '@mui/joy/Switch';
 import Typography from '@mui/joy/Typography';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 
 const shallowEqual = (item1: { [k: string]: any }, item2: { [k: string]: any }) => {
diff --git a/docs/src/modules/components/JoyVariablesDemo.tsx b/docs/src/modules/components/JoyVariablesDemo.tsx
index 2926d05efc4f63..2d4392d3059bf3 100644
--- a/docs/src/modules/components/JoyVariablesDemo.tsx
+++ b/docs/src/modules/components/JoyVariablesDemo.tsx
@@ -13,7 +13,7 @@ import Input, { inputClasses } from '@mui/joy/Input';
 import ReplayRoundedIcon from '@mui/icons-material/ReplayRounded';
 import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 interface DataItem {
   var: string;
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index b0d0d72b4f7f3b..5d1dc61a55b3c8 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -8,7 +8,7 @@ import RichMarkdownElement from 'docs/src/modules/components/RichMarkdownElement
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
 import { useUserLanguage } from '@mui/docs/i18n';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 import Ad from 'docs/src/modules/components/Ad';
 import AdGuest from 'docs/src/modules/components/AdGuest';
 
diff --git a/docs/src/modules/components/MarkdownDocsV2.js b/docs/src/modules/components/MarkdownDocsV2.js
index fc28e5799cddeb..8833babea4b493 100644
--- a/docs/src/modules/components/MarkdownDocsV2.js
+++ b/docs/src/modules/components/MarkdownDocsV2.js
@@ -12,7 +12,7 @@ import RichMarkdownElement from 'docs/src/modules/components/RichMarkdownElement
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
 import { useTranslate, useUserLanguage } from '@mui/docs/i18n';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 import Ad from 'docs/src/modules/components/Ad';
 import { HEIGHT as AppFrameHeight } from 'docs/src/modules/components/AppFrame';
 import { HEIGHT as TabsHeight } from 'docs/src/modules/components/ComponentPageTabs';
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index e18b2ed63aefa8..7554dd0820ceac 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -5,7 +5,7 @@ import { alpha, darken, styled } from '@mui/material/styles';
 import {
   brandingDarkTheme as darkTheme,
   brandingLightTheme as lightTheme,
-} from 'docs/src/modules/brandingTheme';
+} from '@mui/docs/branding';
 
 const Root = styled('div')(
   ({ theme }) => ({
@@ -24,8 +24,8 @@ const Root = styled('div')(
       lineHeight: 1.5, // Developers like when the code is dense.
       margin: theme.spacing(2, 'auto'),
       padding: theme.spacing(2),
-      backgroundColor: '#0F1924', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
-      color: '#f8f8f2',
+      backgroundColor: 'hsl(210, 35%, 9%)', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
+      color: 'hsl(60, 30%, 96%)',
       colorScheme: 'dark',
       borderRadius: `var(--muidocs-shape-borderRadius, ${
         theme.shape?.borderRadius ?? lightTheme.shape.borderRadius
@@ -344,7 +344,7 @@ const Root = styled('div')(
         },
       },
       '&.MuiCallout-info': {
-        color: `var(--muidocs-palette-primary-900, ${lightTheme.palette.primary[900]})`,
+        color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
         backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`,
         borderColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`,
         '& strong': {
@@ -375,7 +375,7 @@ const Root = styled('div')(
       '&.MuiCallout-warning': {
         color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
         backgroundColor: alpha(lightTheme.palette.warning[50], 0.5),
-        borderColor: `var(--muidocs-palette-warning-200, ${lightTheme.palette.warning[200]})`,
+        borderColor: alpha(lightTheme.palette.warning[700], 0.15),
         '& strong': {
           color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
         },
@@ -540,7 +540,7 @@ const Root = styled('div')(
       fontWeight: 500,
       borderRadius: 6,
       border: 'none',
-      backgroundColor: '#0F1924', // using the code block one-off background color (defined in line 23)
+      backgroundColor: 'hsl(210, 35%, 9%)', // using the code block one-off background color (defined in line 23)
       color: '#FFF',
       transition: theme.transitions.create(['background', 'borderColor', 'display'], {
         duration: theme.transitions.duration.shortest,
@@ -721,8 +721,8 @@ const Root = styled('div')(
         },
         '&.MuiCallout-error': {
           color: `var(--muidocs-palette-error-50, ${darkTheme.palette.error[50]})`,
-          backgroundColor: alpha(darkTheme.palette.error[700], 0.2),
-          borderColor: alpha(darkTheme.palette.error[600], 0.3),
+          backgroundColor: alpha(darkTheme.palette.error[700], 0.15),
+          borderColor: alpha(darkTheme.palette.error[400], 0.1),
           '& strong': {
             color: `var(--muidocs-palette-error-300, ${darkTheme.palette.error[300]})`,
           },
@@ -734,9 +734,9 @@ const Root = styled('div')(
           },
         },
         '&.MuiCallout-info': {
-          color: `var(--muidocs-palette-primary-50, ${darkTheme.palette.primary[50]})`,
-          backgroundColor: alpha(darkTheme.palette.grey[700], 0.2),
-          borderColor: `var(--muidocs-palette-grey-800, ${darkTheme.palette.grey[800]})`,
+          color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`,
+          backgroundColor: alpha(darkTheme.palette.grey[700], 0.15),
+          borderColor: alpha(darkTheme.palette.grey[800], 0.5),
           '& strong': {
             color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`,
           },
@@ -746,8 +746,8 @@ const Root = styled('div')(
         },
         '&.MuiCallout-success': {
           color: `var(--muidocs-palette-success-50, ${darkTheme.palette.success[50]})`,
-          backgroundColor: alpha(darkTheme.palette.success[700], 0.15),
-          borderColor: alpha(lightTheme.palette.success[600], 0.3),
+          backgroundColor: alpha(darkTheme.palette.success[700], 0.12),
+          borderColor: alpha(lightTheme.palette.success[400], 0.1),
           '& strong': {
             color: `var(--muidocs-palette-success-200, ${darkTheme.palette.success[200]})`,
           },
@@ -760,8 +760,8 @@ const Root = styled('div')(
         },
         '&.MuiCallout-warning': {
           color: `var(--muidocs-palette-warning-50, ${darkTheme.palette.warning[50]})`,
-          backgroundColor: alpha(darkTheme.palette.warning[700], 0.15),
-          borderColor: alpha(darkTheme.palette.warning[600], 0.3),
+          backgroundColor: alpha(darkTheme.palette.warning[700], 0.12),
+          borderColor: alpha(darkTheme.palette.warning[400], 0.1),
           '& strong': {
             color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`,
           },
diff --git a/docs/src/modules/components/MaterialStartingLinksCollection.js b/docs/src/modules/components/MaterialStartingLinksCollection.js
index bd6e06ca553e3a..fe209a71381e6b 100644
--- a/docs/src/modules/components/MaterialStartingLinksCollection.js
+++ b/docs/src/modules/components/MaterialStartingLinksCollection.js
@@ -5,7 +5,7 @@ import WebRoundedIcon from '@mui/icons-material/WebRounded';
 import DrawRoundedIcon from '@mui/icons-material/DrawRounded';
 import PlayCircleFilledWhiteRoundedIcon from '@mui/icons-material/PlayCircleFilledWhiteRounded';
 import DesignServicesRoundedIcon from '@mui/icons-material/DesignServicesRounded';
-import InfoCard from 'docs/src/components/action/InfoCard';
+import { InfoCard } from '@mui/docs/InfoCard';
 
 const content = [
   {
diff --git a/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js b/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js
index 254ad2fd0291c2..6bc020895cf542 100644
--- a/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js
+++ b/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Grid from '@mui/material/Unstable_Grid2';
-import InfoCard from 'docs/src/components/action/InfoCard';
+import { InfoCard } from '@mui/docs/InfoCard';
 import HighlightAltRoundedIcon from '@mui/icons-material/HighlightAltRounded';
 import CssRoundedIcon from '@mui/icons-material/CssRounded';
 import DnsRoundedIcon from '@mui/icons-material/DnsRounded';
diff --git a/docs/src/modules/components/MaterialUIDesignResources.js b/docs/src/modules/components/MaterialUIDesignResources.js
index d9ad8648c64555..bd84a5b28c052a 100644
--- a/docs/src/modules/components/MaterialUIDesignResources.js
+++ b/docs/src/modules/components/MaterialUIDesignResources.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Grid from '@mui/material/Unstable_Grid2';
-import InfoCard from 'docs/src/components/action/InfoCard';
+import { InfoCard } from '@mui/docs/InfoCard';
 
 const content = [
   {
diff --git a/docs/src/modules/components/MaterialUIExampleCollection.js b/docs/src/modules/components/MaterialUIExampleCollection.js
index 15fb508ee72374..7414b6c1e5b6e4 100644
--- a/docs/src/modules/components/MaterialUIExampleCollection.js
+++ b/docs/src/modules/components/MaterialUIExampleCollection.js
@@ -11,53 +11,53 @@ import CloudRoundedIcon from '@mui/icons-material/CloudRounded';
 const examples = [
   {
     name: 'Next.js App Router',
-    label: 'View JS example',
-    tsLabel: 'View TS example',
+    label: 'View JavaScript',
+    tsLabel: 'View TypeScript',
     link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs',
     tsLink: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts',
     src: '/static/images/examples/next.svg',
   },
-  {
-    name: 'Vite.js',
-    label: 'View JS example',
-    tsLabel: 'View TS example',
-    link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-vite',
-    tsLink: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-vite-ts',
-    src: '/static/images/examples/vite.svg',
-  },
   {
     name: 'Next.js Pages Router',
-    label: 'View JS example',
-    tsLabel: 'View TS example',
+    label: 'View JavaScript',
+    tsLabel: 'View TypeScript',
     link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router',
     tsLink:
       'https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router-ts',
     src: '/static/images/examples/next.svg',
   },
+  {
+    name: 'Vite.js',
+    label: 'View JavaScript',
+    tsLabel: 'View TypeScript',
+    link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-vite',
+    tsLink: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-vite-ts',
+    src: '/static/images/examples/vite.svg',
+  },
   {
     name: 'Remix',
-    label: 'View TS example',
+    label: 'View TypeScript',
     link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-remix-ts',
     src: '/static/images/examples/remix.svg',
   },
-  {
-    name: 'Tailwind CSS + CRA',
-    label: 'View TS example',
-    link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts',
-    src: '/static/images/examples/tailwindcss.svg',
-  },
   {
     name: 'Create React App',
-    label: 'View JS example',
-    tsLabel: 'View TS example',
+    label: 'View JavaScript',
+    tsLabel: 'View TypeScript',
     link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-cra',
     tsLink: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-ts',
     src: '/static/images/examples/cra.svg',
   },
+  {
+    name: 'Tailwind CSS + Create React App',
+    label: 'View TypeScript',
+    link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-tailwind-ts',
+    src: '/static/images/examples/tailwindcss.svg',
+  },
   {
     name: 'styled-components',
-    label: 'View JS example',
-    tsLabel: 'View TS example',
+    label: 'View JavaScript',
+    tsLabel: 'View TypeScript',
     link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components',
     tsLink:
       'https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts',
@@ -65,31 +65,31 @@ const examples = [
   },
   {
     name: 'Preact',
-    label: 'View JS example',
+    label: 'View JavaScript',
     link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-preact',
     src: '/static/images/examples/preact.svg',
   },
   {
     name: 'CDN',
-    label: 'View JS example',
+    label: 'View JavaScript',
     link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-via-cdn',
     src: <CloudRoundedIcon />,
   },
   {
     name: 'Express.js (server-rendered)',
-    label: 'View JS example',
+    label: 'View JavaScript',
     link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-express-ssr',
     src: '/static/images/examples/express.png',
   },
   {
     name: 'Gatsby',
-    label: 'View JS example',
+    label: 'View JavaScript',
     link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-gatsby',
     src: '/static/images/examples/gatsby.svg',
   },
   {
     name: 'React-admin',
-    label: 'View TS example',
+    label: 'View TypeScript',
     link: 'https://github.com/marmelab/material-ui-react-admin',
     src: '/static/images/examples/reactadmin.svg',
   },
@@ -107,12 +107,7 @@ export default function MaterialUIExampleCollection() {
               display: 'flex',
               alignItems: 'center',
               gap: 2,
-              background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
-              ...theme.applyDarkStyles({
-                bgcolor: 'primaryDark.900',
-                background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
-                borderColor: 'primaryDark.700',
-              }),
+              background: `${(theme.vars || theme).palette.gradients.radioSubtle}`,
             })}
           >
             <Avatar
@@ -159,11 +154,11 @@ export default function MaterialUIExampleCollection() {
                       variant="caption"
                       sx={{
                         display: { xs: 'none', sm: 'block' },
-                        opacity: 0.2,
-                        mr: 0.75,
+                        opacity: 0.1,
+                        mr: 1,
                       }}
                     >
-                      &bull;
+                      /
                     </Typography>
                     <Link
                       href={example.tsLink}
diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js
index 46713fcf715e8b..1ae7af3bea639c 100644
--- a/docs/src/modules/components/ThemeContext.js
+++ b/docs/src/modules/components/ThemeContext.js
@@ -10,11 +10,7 @@ import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/u
 import { getCookie } from 'docs/src/modules/utils/helpers';
 import useLazyCSS from 'docs/src/modules/utils/useLazyCSS';
 import { useUserLanguage } from '@mui/docs/i18n';
-import {
-  getDesignTokens,
-  getThemedComponents,
-  getMetaThemeColor,
-} from 'docs/src/modules/brandingTheme';
+import { getDesignTokens, getThemedComponents, getMetaThemeColor } from '@mui/docs/branding';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import useLocalStorageState from '@mui/utils/useLocalStorageState';
 
diff --git a/docs/src/modules/components/ThemeViewer.tsx b/docs/src/modules/components/ThemeViewer.tsx
index f709c8e4db8df3..60ddb10417cd1f 100644
--- a/docs/src/modules/components/ThemeViewer.tsx
+++ b/docs/src/modules/components/ThemeViewer.tsx
@@ -6,7 +6,7 @@ import ExpandIcon from '@mui/icons-material/ExpandMore';
 import CollapseIcon from '@mui/icons-material/ChevronRight';
 import { TreeView } from '@mui/x-tree-view/TreeView';
 import { TreeItem as MuiTreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem';
-import { blue, blueDark } from 'docs/src/modules/brandingTheme';
+import { blue, blueDark } from '@mui/docs/branding';
 
 function getType(value: any) {
   if (Array.isArray(value)) {
@@ -205,7 +205,7 @@ export default function ThemeViewer({
       sx={{
         color: '#FFF',
         p: 1.5,
-        bgcolor: '#0F1924', // one-off code container color
+        bgcolor: 'hsl(210, 35%, 9%)', // one-off code container color
         borderRadius: 3,
         border: `1px solid ${blueDark[700]}`,
       }}
diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js
index 3290a6ce10894c..2613792305ae93 100644
--- a/docs/src/modules/components/TopLayoutBlog.js
+++ b/docs/src/modules/components/TopLayoutBlog.js
@@ -116,6 +116,11 @@ export const authors = {
     avatar: 'https://avatars.githubusercontent.com/u/16889233',
     github: 'DiegoAndai',
   },
+  DavidCnoops: {
+    name: 'David Cnoops',
+    avatar: 'https://avatars.githubusercontent.com/u/28001064',
+    github: 'DavidCnoops',
+  },
 };
 
 const classes = {
@@ -180,6 +185,19 @@ const Root = styled('div')(
         margin: 'auto',
         marginBottom: 16,
       },
+      '& figure': {
+        margin: 0,
+        padding: 0,
+        marginBottom: 16,
+        '& img, & video': {
+          marginBottom: 8,
+        },
+      },
+      '& figcaption': {
+        color: (theme.vars || theme).palette.text.tertiary,
+        fontSize: theme.typography.pxToRem(14),
+        textAlign: 'center',
+      },
       '& strong': {
         color: (theme.vars || theme).palette.grey[900],
       },
@@ -271,7 +289,7 @@ export default function TopLayoutBlog(props) {
   const { canonicalAsServer } = pathnameToLanguage(router.asPath);
   const card =
     headers.manualCard === 'true'
-      ? `https://mui.com/static/blog/${slug}/card.png`
+      ? `/static/blog/${slug}/card.png`
       : `/edge-functions/og-image/?title=${headers.cardTitle || finalTitle}&authors=${headers.authors
           .map((author) => {
             const { github, name } = authors[author];
diff --git a/packages/mui-docs/.npmignore b/packages/mui-docs/.npmignore
index 81f0fda795522a..43370fa915f41f 100644
--- a/packages/mui-docs/.npmignore
+++ b/packages/mui-docs/.npmignore
@@ -1 +1 @@
-.tsbuildinfo
+*.tsbuildinfo
diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json
index 773cad1039afdb..13eb2d4ae4285c 100644
--- a/packages/mui-docs/package.json
+++ b/packages/mui-docs/package.json
@@ -29,20 +29,20 @@
     "build:node": "node ../../scripts/build.mjs node",
     "build:stable": "node ../../scripts/build.mjs stable",
     "build:types": "node ../../scripts/buildTypes.mjs",
-    "build:copy-files": "node ../../scripts/copyFiles.mjs ./src/translations/translations.json:./translations/translations.json",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs ./src/translations/translations.json:./translations/translations.json ./src/translations/translations.json:./node/translations/translations.json",
     "prebuild": "rimraf build",
     "release": "pnpm build && pnpm publish",
     "test": "exit 0"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@mui/base": "workspace:*",
-    "@mui/utils": "workspace:^",
     "clsx": "^2.1.0",
     "nprogress": "^0.2.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
+    "@mui/material": "workspace:*",
+    "@mui/icons-material": "workspace:*",
     "@types/node": "^18.19.25",
     "@types/prop-types": "^15.7.11",
     "@types/react": "^18.2.55",
@@ -50,9 +50,12 @@
     "react": "^18.2.0"
   },
   "peerDependencies": {
-    "@mui/material": "workspace:^",
+    "@mui/material": "^5.0.0",
+    "@mui/base": "*",
+    "@mui/icons-material": "^5.0.0",
+    "@mui/system": "^5.0.0",
     "@types/react": "^17.0.0 || ^18.0.0",
-    "next": "^13.5.1",
+    "next": "^13.5.1 || ^14",
     "react": "^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
diff --git a/packages/mui-docs/src/InfoCard/InfoCard.tsx b/packages/mui-docs/src/InfoCard/InfoCard.tsx
new file mode 100644
index 00000000000000..56ec11e1f94486
--- /dev/null
+++ b/packages/mui-docs/src/InfoCard/InfoCard.tsx
@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { alpha } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Typography, { TypographyProps } from '@mui/material/Typography';
+import { Link, LinkProps } from '../Link';
+
+interface GlowingIconContainerProps {
+  icon: React.ReactNode;
+}
+
+export function GlowingIconContainer({ icon }: GlowingIconContainerProps) {
+  return (
+    <Box
+      sx={(theme) => ({
+        width: 40,
+        height: 40,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexShrink: 0,
+        borderRadius: 1,
+        border: '1px solid',
+        borderColor: 'primary.200',
+        bgcolor: 'primary.50',
+        boxShadow: `0px 0 0 2px ${alpha(theme.palette.primary[500], 0.1)}, 0px 2px 12px 0px rgba(234, 237, 241, 0.3) inset`,
+        ...theme.applyDarkStyles({
+          borderColor: alpha(theme.palette.primary[400], 0.25),
+          bgcolor: alpha(theme.palette.primary[900], 0.4),
+          boxShadow: `0 0 0 2px ${alpha(theme.palette.primary[600], 0.1)}, 0px 2px 12px 0px rgba(0, 0, 0, 0.25) inset`,
+        }),
+      })}
+    >
+      {icon}
+    </Box>
+  );
+}
+
+interface InfoCardProps {
+  classNameDescription?: string;
+  classNameTitle?: string;
+  dense?: boolean;
+  description?: string;
+  icon?: React.ReactNode;
+  link?: string;
+  prefetch?: LinkProps['prefetch'];
+  svg?: React.ReactNode;
+  title: string;
+  titleProps?: TypographyProps;
+}
+
+export function InfoCard(props: InfoCardProps) {
+  const {
+    classNameDescription,
+    classNameTitle,
+    dense,
+    description,
+    icon,
+    link,
+    svg,
+    title,
+    titleProps,
+    ...other
+  } = props;
+  return (
+    <Paper
+      variant="outlined"
+      component={link ? Link : 'div'}
+      href={link}
+      {...(link
+        ? {
+            noLinkStyle: true,
+            // Fix overloading with prefetch={false}, only prefetch on hover.
+            prefetch: false,
+          }
+        : {})}
+      sx={(theme) => ({
+        p: dense ? 2.5 : 3.5,
+        height: '100%',
+        background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
+        ...theme.applyDarkStyles({
+          bgcolor: alpha(theme.palette.primaryDark[800], 0.25),
+          background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
+          borderColor: 'primaryDark.700',
+        }),
+      })}
+      {...other}
+    >
+      {svg && svg}
+      {icon && <GlowingIconContainer icon={icon} />}
+      <Typography
+        fontWeight="bold"
+        component="h3"
+        color="text.primary"
+        variant="body2"
+        mt={icon ? 2 : 0}
+        mb={description ? 0.5 : 0}
+        className={classNameTitle}
+        {...titleProps}
+      >
+        {title}
+      </Typography>
+      <Typography variant="body2" color="text.secondary" className={classNameDescription}>
+        {description}
+      </Typography>
+    </Paper>
+  );
+}
diff --git a/packages/mui-docs/src/InfoCard/index.ts b/packages/mui-docs/src/InfoCard/index.ts
new file mode 100644
index 00000000000000..c02f552081da9d
--- /dev/null
+++ b/packages/mui-docs/src/InfoCard/index.ts
@@ -0,0 +1 @@
+export * from './InfoCard';
diff --git a/packages/mui-docs/src/branding/BrandingProvider.tsx b/packages/mui-docs/src/branding/BrandingProvider.tsx
new file mode 100644
index 00000000000000..235cac1821f175
--- /dev/null
+++ b/packages/mui-docs/src/branding/BrandingProvider.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ThemeProvider, useTheme } from '@mui/material/styles';
+import { brandingDarkTheme, brandingLightTheme } from './brandingTheme';
+
+export interface BrandingProviderProps {
+  children: React.ReactNode;
+  /**
+   * If not `undefined`, the provider is considered nesting and does not render NextNProgressBar & CssBaseline
+   */
+  mode: 'light' | 'dark';
+}
+
+export function BrandingProvider(props: BrandingProviderProps) {
+  const { children, mode: modeProp } = props;
+  const upperTheme = useTheme();
+  const mode = modeProp || upperTheme.palette.mode;
+  const theme = mode === 'dark' ? brandingDarkTheme : brandingLightTheme;
+  return <ThemeProvider theme={modeProp ? () => theme : theme}>{children}</ThemeProvider>;
+}
diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts
new file mode 100644
index 00000000000000..d6e428314aeeee
--- /dev/null
+++ b/packages/mui-docs/src/branding/brandingTheme.ts
@@ -0,0 +1,1290 @@
+import type { CSSObject } from '@mui/system';
+import type {} from '@mui/material/themeCssVarsAugmentation';
+import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded';
+import { createTheme, ThemeOptions, Theme, alpha } from '@mui/material/styles';
+
+interface ApplyDarkStyles {
+  (scheme: CSSObject): CSSObject;
+}
+
+declare module '@mui/material/styles' {
+  interface Theme {
+    applyDarkStyles: ApplyDarkStyles;
+  }
+}
+
+declare module '@mui/material/styles/createPalette' {
+  interface ColorRange {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+  }
+
+  interface PaletteColor extends ColorRange {}
+
+  interface Palette {
+    primaryDark: PaletteColor;
+    gradients: {
+      radioSubtle: string;
+      linearSubtle: string;
+    };
+  }
+
+  interface TypeText {
+    tertiary: string;
+  }
+}
+
+declare module '@mui/material/styles/createTypography' {
+  interface TypographyOptions {
+    fontWeightSemiBold?: number;
+    fontWeightExtraBold?: number;
+    fontFamilyCode?: string;
+    fontFamilySystem?: string;
+  }
+
+  interface Typography {
+    fontWeightSemiBold: number;
+    fontWeightExtraBold: number;
+    fontFamilyCode: string;
+    fontFamilySystem: string;
+  }
+}
+
+declare module '@mui/material/Chip' {
+  interface ChipPropsColorOverrides {
+    grey: true;
+  }
+}
+
+declare module '@mui/material/SvgIcon' {
+  interface SvgIconPropsColorOverrides {
+    danger: true;
+  }
+  interface SvgIconPropsSizeOverrides {
+    xs: true;
+    sm: true;
+    md: true;
+    lg: true;
+    xl: true;
+    xl2: true;
+    xl3: true;
+    xl4: true;
+  }
+}
+
+// TODO: enable this once types conflict is fixed
+// declare module '@mui/material/Button' {
+//   interface ButtonPropsVariantOverrides {
+//     code: true;
+//   }
+// }
+
+const defaultTheme = createTheme();
+
+export const blue = {
+  50: 'hsl(210, 100%, 96%)',
+  100: 'hsl(210, 100%, 90%)',
+  200: 'hsl(210, 100%, 80%)',
+  300: 'hsl(210, 100%, 70%)',
+  400: 'hsl(210, 100%, 60%)',
+  main: 'hsl(210, 100%, 45%)',
+  500: 'hsl(210, 100%, 45%)',
+  600: 'hsl(210, 100%, 42%)',
+  700: 'hsl(210, 100%, 38%)',
+  800: 'hsl(210, 100%, 30%)',
+  900: 'hsl(210, 100%, 23%)',
+};
+export const blueDark = {
+  50: 'hsl(210, 14%, 92%)',
+  100: 'hsl(210, 14%, 87%)',
+  200: 'hsl(210, 14%, 72%)',
+  300: 'hsl(210, 14%, 56%)',
+  main: 'hsl(210, 14%, 56%)',
+  400: 'hsl(210, 14%, 36%)',
+  500: 'hsl(210, 14%, 28%)',
+  600: 'hsl(210, 14%, 22%)',
+  700: 'hsl(210, 14%, 13%)',
+  800: 'hsl(210, 14%, 9%)',
+  900: 'hsl(210, 14%, 7%)',
+};
+export const grey = {
+  50: 'hsl(215, 15%, 97%)',
+  100: 'hsl(215, 15%, 92%)',
+  200: 'hsl(215, 15%, 89%)',
+  300: 'hsl(215, 15%, 82%)',
+  400: 'hsl(215, 15%, 75%)',
+  500: 'hsl(215, 15%, 65%)',
+  600: 'hsl(215, 15%, 50%)',
+  700: 'hsl(215, 15%, 40%)',
+  800: 'hsl(215, 15%, 22%)',
+  900: 'hsl(215, 15%, 12%)',
+};
+export const error = {
+  50: 'hsl(355, 98%, 97%)',
+  100: 'hsl(355, 98%, 93%)',
+  200: 'hsl(355, 98%, 87%)',
+  300: 'hsl(355, 98%, 80%)',
+  400: 'hsl(355, 98%, 74%)',
+  500: 'hsl(355, 98%, 66%)',
+  main: 'hsl(355, 98%, 66%)',
+  600: 'hsl(355, 98%, 46%)',
+  700: 'hsl(355, 98%, 39%)',
+  800: 'hsl(355, 98%, 29%)',
+  900: 'hsl(355, 98%, 17%)',
+};
+export const success = {
+  50: 'hsl(144, 72%, 95%)',
+  100: 'hsl(144, 72%, 87%)',
+  200: 'hsl(144, 72%, 77%)',
+  300: 'hsl(144, 72%, 66%)',
+  400: 'hsl(144, 72%, 56%)',
+  500: 'hsl(144, 72%, 46%)',
+  600: 'hsl(144, 72%, 41%)',
+  700: 'hsl(144, 72%, 37%)',
+  800: 'hsl(144, 72%, 32%)',
+  900: 'hsl(144, 72%, 21%)',
+};
+export const warning = {
+  50: 'hsl(48, 100%, 96%)',
+  100: 'hsl(48, 100%, 88%)',
+  200: 'hsl(48, 100%, 82%)',
+  300: 'hsl(48, 100%, 64%)',
+  400: 'hsl(48, 100%, 48%)',
+  500: 'hsl(48, 100%, 44%)',
+  main: 'hsl(48, 100%, 44%)',
+  600: 'hsl(40, 100%, 40%)',
+  700: 'hsl(36, 100%, 34%)',
+  800: 'hsl(36, 100%, 27%)',
+  900: 'hsl(36, 100%, 18%)',
+};
+
+const systemFont = [
+  '-apple-system',
+  'BlinkMacSystemFont',
+  '"Segoe UI"',
+  'Roboto',
+  '"Helvetica Neue"',
+  'Arial',
+  'sans-serif',
+  '"Apple Color Emoji"',
+  '"Segoe UI Emoji"',
+  '"Segoe UI Symbol"',
+];
+
+export const getMetaThemeColor = (mode: 'light' | 'dark') => {
+  const themeColor = {
+    light: blue[600],
+    dark: blueDark[900],
+  };
+  return themeColor[mode];
+};
+
+export const getDesignTokens = (mode: 'light' | 'dark') =>
+  ({
+    palette: {
+      primary: {
+        ...blue,
+        ...(mode === 'dark' && {
+          main: blue[400],
+        }),
+      },
+      secondary: {
+        ...grey,
+        ...(mode === 'light' && {
+          main: blueDark[100],
+          contrastText: blueDark[600],
+        }),
+        ...(mode === 'dark' && {
+          main: blueDark[700],
+          contrastText: blueDark[600],
+        }),
+      },
+      divider: mode === 'dark' ? alpha(blueDark[500], 0.3) : grey[100],
+      primaryDark: blueDark,
+      mode,
+      ...(mode === 'dark' && {
+        background: {
+          default: blueDark[900],
+          paper: alpha(blueDark[800], 0.8),
+        },
+      }),
+      common: {
+        black: 'hsl(200, 10%, 4%)',
+      },
+      text: {
+        ...(mode === 'light' && {
+          primary: grey[900],
+          secondary: grey[800],
+          tertiary: grey[700],
+        }),
+        ...(mode === 'dark' && {
+          primary: '#fff',
+          secondary: grey[400],
+          tertiary: grey[500],
+        }),
+      },
+      grey: {
+        ...grey,
+        ...(mode === 'light' && {
+          main: grey[100],
+          contrastText: grey[600],
+        }),
+        ...(mode === 'dark' && {
+          main: grey[700],
+          contrastText: grey[600],
+        }),
+      },
+      error,
+      success: {
+        ...success,
+        ...(mode === 'dark' && {
+          main: success[600],
+        }),
+        ...(mode === 'light' && {
+          main: success[700],
+        }),
+      },
+      warning,
+      gradients: {
+        radioSubtle:
+          mode === 'dark'
+            ? `radial-gradient(100% 100% at 100% 100%, transparent 0, ${alpha(blue[900], 0.3)} 300%)`
+            : `radial-gradient(100% 90% at 50% 0, transparent 0, ${alpha(blue[100], 0.3)} 300%)`,
+        linearSubtle:
+          mode === 'light'
+            ? `linear-gradient(to bottom right, ${alpha(blue[50], 0.3)} 25%, ${alpha(grey[50], 0.2)} 100%)`
+            : `linear-gradient(to bottom right, ${alpha(blue[900], 0.1)} 25%, ${alpha(blueDark[800], 0.2)} 100%)`,
+      },
+    },
+    shape: {
+      borderRadius: 12,
+    },
+    spacing: 8,
+    typography: {
+      fontFamily: ['"IBM Plex Sans"', ...systemFont].join(','),
+      // Match VS Code
+      // https://github.com/microsoft/vscode/blob/b38691f611d1ce3ef437c67a1b047c757b7b4e53/src/vs/editor/common/config/editorOptions.ts#L4578-L4580
+      // https://github.com/microsoft/vscode/blob/d950552131d7350a45dac8b59bf179469c36c2ac/src/vs/editor/standalone/browser/standalone-tokens.css#L10
+      fontFamilyCode: [
+        'Menlo', // macOS
+        'Consolas', // Windows
+        '"Droid Sans Mono"', // Linux
+        'monospace', // fallback
+      ].join(','),
+      fontFamilyTagline: ['"General Sans"', ...systemFont].join(','),
+      fontFamilySystem: systemFont.join(','),
+      fontWeightSemiBold: 600,
+      fontWeightExtraBold: 800,
+      h1: {
+        fontFamily: ['"General Sans"', ...systemFont].join(','),
+        fontSize: 'clamp(2.5rem, 1.125rem + 3.5vw, 3.5em)',
+        fontWeight: 600,
+        lineHeight: 78 / 70,
+        letterSpacing: -0.2,
+        ...(mode === 'light' && {
+          color: blueDark[900],
+        }),
+      },
+      h2: {
+        fontFamily: ['"General Sans"', ...systemFont].join(','),
+        fontSize: 'clamp(1.5rem, 0.9643rem + 1.4286vw, 2.25rem)',
+        fontWeight: 600,
+        lineHeight: 44 / 36,
+        letterSpacing: -0.2,
+        color: mode === 'dark' ? grey[100] : blueDark[700],
+      },
+      h3: {
+        fontFamily: ['"General Sans"', ...systemFont].join(','),
+        fontSize: defaultTheme.typography.pxToRem(36),
+        lineHeight: 44 / 36,
+        letterSpacing: 0.2,
+      },
+      h4: {
+        fontFamily: ['"General Sans"', ...systemFont].join(','),
+        fontSize: defaultTheme.typography.pxToRem(30),
+        lineHeight: 42 / 28,
+        letterSpacing: 0.2,
+      },
+      h5: {
+        fontSize: defaultTheme.typography.pxToRem(24),
+        lineHeight: 36 / 24,
+        letterSpacing: 0.1,
+        color: mode === 'dark' ? blue[300] : blue.main,
+      },
+      h6: {
+        fontSize: defaultTheme.typography.pxToRem(20),
+        lineHeight: 30 / 20,
+      },
+      button: {
+        textTransform: 'initial',
+        fontWeight: 700,
+        letterSpacing: 0,
+      },
+      subtitle1: {
+        fontSize: defaultTheme.typography.pxToRem(18),
+        lineHeight: 24 / 18,
+        letterSpacing: 0,
+        fontWeight: 500,
+      },
+      body1: {
+        fontSize: defaultTheme.typography.pxToRem(16), // 16px
+        lineHeight: 24 / 16,
+        letterSpacing: 0,
+      },
+      body2: {
+        fontSize: defaultTheme.typography.pxToRem(14), // 14px
+        lineHeight: 21 / 14,
+        letterSpacing: 0,
+      },
+      caption: {
+        display: 'inline-block',
+        fontSize: defaultTheme.typography.pxToRem(12), // 12px
+        lineHeight: 18 / 12,
+        letterSpacing: 0,
+        fontWeight: 700,
+      },
+      allVariants: {
+        scrollMarginTop: 'calc(var(--MuiDocs-header-height) + 32px)',
+      },
+    },
+    /**
+     * This utility exists to help transitioning to CSS variables page by page (prevent dark mode flicker).
+     * It will use the proper styling method based on the theme because the component might be on the page that does not support CSS variables yet.
+     *
+     * 😓 Without this utility:
+     * {
+     *   ...theme.vars ? {
+     *     color: theme.vars.palette.primary.main,
+     *     [theme.getColorScheme('dark')]: {
+     *       color: '#fff',
+     *     }
+     *   } : {
+     *     color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary.main,
+     *   }
+     * }
+     *
+     * 🤩 Using the utility:
+     * {
+     *   color: (theme.vars || theme).palette.primary.main,
+     *   ...theme.applyDarkStyles({
+     *     color: '#fff',
+     *   }),
+     * }
+     *
+     * -------------------------------------------------------------------------------------------------
+     * 💡 This util should be used in an array if the styles contain pseudo classes or nested selectors:
+     *
+     * ❌ There is a chance that the upper selectors could be overridden
+     * {
+     *    // the whole selector could be overridden
+     *   '&::before': {
+     *     color: ...
+     *   },
+     *   ...theme.applyDarkStyles({
+     *      '&::before': {
+     *        color: ...
+     *      }
+     *   })
+     * }
+     *
+     * ✅ use an array (supports in both emotion and styled-components)
+     * Only the `color` will be overridden in dark mode.
+     *  [
+     *    '&::before': {
+     *      color: ...
+     *    },
+     *    theme.applyDarkStyles({
+     *      '&::before': {
+     *        color: ...
+     *      }
+     *    })
+     *  ]
+     */
+    applyDarkStyles(css: Parameters<ApplyDarkStyles>[0]) {
+      return (this as Theme).applyStyles('dark', css);
+    },
+  }) as ThemeOptions;
+
+export function getThemedComponents(): ThemeOptions {
+  return {
+    components: {
+      MuiAlert: {
+        styleOverrides: {
+          root: {
+            padding: '12px 16px',
+          },
+          standardWarning: ({ theme }) => [
+            {
+              backgroundColor: alpha(theme.palette.warning[50], 0.5),
+              color: (theme.vars || theme).palette.grey[900],
+              border: '1px solid',
+              borderColor: alpha(theme.palette.warning[600], 0.3),
+              '& .MuiAlert-icon': {
+                color: (theme.vars || theme).palette.warning[700],
+              },
+            },
+            theme.applyDarkStyles({
+              backgroundColor: alpha(theme.palette.warning[700], 0.2),
+              color: (theme.vars || theme).palette.warning[50],
+              '& .MuiAlert-icon': {
+                color: (theme.vars || theme).palette.warning[200],
+              },
+            }),
+          ],
+          icon: {
+            paddingTop: 12,
+            paddingBottom: 0,
+          },
+        },
+      },
+      MuiButtonBase: {
+        defaultProps: {
+          disableTouchRipple: true,
+          disableRipple: true,
+        },
+        styleOverrides: {
+          root: ({ theme }) => ({
+            transition: 'all 100ms ease-in',
+            '&:focus-visible': {
+              outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
+              outlineOffset: '2px',
+            },
+          }),
+        },
+      },
+      MuiButton: {
+        defaultProps: {
+          disableElevation: true,
+        },
+        styleOverrides: {
+          root: ({ theme, ownerState }) => ({
+            transition: 'all 120ms ease-in',
+            ...(ownerState.size === 'large' && {
+              ...theme.typography.body1,
+              lineHeight: 21 / 16,
+              padding: theme.spacing('8px', '10px', '10px', '12px'),
+              fontWeight: theme.typography.fontWeightSemiBold,
+              borderRadius: 10,
+              '& > span': { transition: '0.2s', marginLeft: 4 },
+              '&:hover > span': { transform: 'translateX(2px)' },
+            }),
+            ...(ownerState.size === 'medium' && {
+              fontSize: defaultTheme.typography.pxToRem(15),
+              padding: theme.spacing('8px', '12px', '8px', '14px'),
+              fontWeight: theme.typography.fontWeightSemiBold,
+              borderRadius: 8,
+              '& > span': { transition: '0.2s', marginLeft: 4 },
+              '&:hover > span': { transform: 'translateX(2px)' },
+            }),
+            ...(ownerState.size === 'small' && {
+              padding: theme.spacing('6px', 1),
+              fontFamily: theme.typography.fontFamily,
+              fontSize: defaultTheme.typography.pxToRem(13),
+              fontWeight: theme.typography.fontWeightSemiBold,
+              borderRadius: 8,
+              '& .MuiButton-startIcon': {
+                transition: '0.15s',
+                marginRight: 4,
+                marginLeft: -1,
+              },
+              '& .MuiButton-endIcon': {
+                transition: '0.15s',
+                marginLeft: 4,
+              },
+              '&:hover': {
+                '& .MuiButton-startIcon': { transform: 'translateX(-2px)' },
+                '& .MuiButton-endIcon': { transform: 'translateX(2px)' },
+              },
+            }),
+            ...(ownerState.variant === 'outlined' &&
+              ownerState.color === 'secondary' && {
+                color: (theme.vars || theme).palette.text.primary,
+                backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
+                borderColor: (theme.vars || theme).palette.primaryDark[100],
+                boxShadow: `${alpha(theme.palette.grey[50], 0.5)} 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -2px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+                '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.grey[50],
+                },
+                ...theme.applyDarkStyles({
+                  color: (theme.vars || theme).palette.primaryDark[100],
+                  borderColor: alpha(theme.palette.primaryDark[600], 0.5),
+                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
+                  boxShadow: `${alpha(theme.palette.primaryDark[600], 0.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+                  '&:hover': {
+                    backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+                    borderColor: (theme.vars || theme).palette.primaryDark[600],
+                  },
+                }),
+              }),
+            ...(ownerState.variant === 'outlined' &&
+              ownerState.color === 'primary' && {
+                color: (theme.vars || theme).palette.primary[600],
+                backgroundColor: alpha(theme.palette.primary[50], 0.2),
+                borderColor: (theme.vars || theme).palette.primary[100],
+                boxShadow: `${alpha(theme.palette.primary[50], 0.8)} 0 2px 0 inset, ${alpha(theme.palette.primary[100], 0.4)} 0 -2px 0 inset, ${alpha(theme.palette.primary[100], 0.5)} 0 1px 2px 0`,
+                '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.primary[50],
+                  borderColor: (theme.vars || theme).palette.primary[200],
+                },
+                ...theme.applyDarkStyles({
+                  color: (theme.vars || theme).palette.primary[200],
+                  borderColor: alpha(theme.palette.primary[900], 0.7),
+                  backgroundColor: alpha(theme.palette.primary[900], 0.2),
+                  boxShadow: `${alpha(theme.palette.primary[900], 0.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+                  '&:hover': {
+                    backgroundColor: (theme.vars || theme).palette.primary[900],
+                    borderColor: (theme.vars || theme).palette.primary[700],
+                  },
+                }),
+              }),
+            ...(ownerState.variant === 'contained' &&
+              ownerState.color === 'primary' && {
+                color: '#fff',
+                textShadow: `0 1px 1px ${alpha(theme.palette.common.black, 0.6)}`,
+                backgroundColor: (theme.vars || theme).palette.primary[500],
+                backgroundImage: `linear-gradient(180deg, ${alpha(theme.palette.primary[500], 0.6)} 0%, ${theme.palette.primary[600]} 100%)`,
+                boxShadow: `${theme.palette.primary[400]} 0 2px 0 inset, ${theme.palette.primary[700]} 0 -2px 0 inset, ${alpha(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
+                '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.primary[700],
+                },
+                '&:active': {
+                  backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+                },
+              }),
+            ...(ownerState.variant === 'text' && {
+              color: (theme.vars || theme).palette.primary[600],
+              ...theme.applyDarkStyles({
+                color: (theme.vars || theme).palette.primary[300],
+              }),
+            }),
+          }),
+        },
+        variants: [
+          {
+            // @ts-ignore internal repo module augmentation issue
+            props: { variant: 'code' },
+            style: ({ theme }) => [
+              {
+                cursor: 'copy',
+                padding: 0,
+                width: 'max-content',
+                backgroundColor: 'transparent',
+                color: (theme.vars || theme).palette.grey[600],
+                fontFamily: theme.typography.fontFamilyCode,
+                fontWeight: 400,
+                fontSize: defaultTheme.typography.pxToRem(12),
+                lineHeight: 21 / 14,
+                letterSpacing: 0,
+                WebkitFontSmoothing: 'subpixel-antialiased',
+                '& .MuiButton-startIcon': {
+                  color: (theme.vars || theme).palette.grey[400],
+                },
+                '& .MuiButton-endIcon': {
+                  display: 'inline-block',
+                  position: 'absolute',
+                  color: (theme.vars || theme).palette.primary.main,
+                  right: -22,
+                  top: -1,
+                  opacity: 0,
+                  transitionProperty: 'opacity',
+                  transitionDuration: '100ms',
+                  transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+                },
+                '&:hover, &.Mui-focusVisible': {
+                  backgroundColor: 'transparent',
+                  color: (theme.vars || theme).palette.primary.main,
+                  '& .MuiButton-endIcon': {
+                    color: (theme.vars || theme).palette.primary.main,
+                    opacity: 1,
+                  },
+                },
+              },
+              theme.applyDarkStyles({
+                '& .MuiButton-endIcon': {
+                  color: (theme.vars || theme).palette.primary[300],
+                },
+                '&:hover, &.Mui-focusVisible': {
+                  color: (theme.vars || theme).palette.primary[300],
+                  '& .MuiButton-endIcon': {
+                    opacity: 1,
+                  },
+                },
+              }),
+            ],
+          },
+          {
+            // @ts-ignore internal repo module augmentation issue
+            props: { variant: 'codeOutlined' },
+            style: ({ theme }) => [
+              {
+                display: 'inline-block',
+                justifyContent: 'start',
+                overflowX: 'hidden',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
+                position: 'relative',
+                border: '1px solid',
+                color: (theme.vars || theme).palette.grey[900],
+                backgroundColor: alpha(theme.palette.primary[50], 0.3),
+                borderColor: (theme.vars || theme).palette.grey[200],
+                boxShadow: `0px 2px 2px ${alpha(
+                  theme.palette.primary[100],
+                  0.2,
+                )}, inset 0px 4px 4px ${alpha(theme.palette.primary[100], 0.2)}`,
+                fontFamily: theme.typography.fontFamilyCode,
+                fontWeight: 400,
+                fontSize: defaultTheme.typography.pxToRem(12),
+                lineHeight: 21 / 14,
+                letterSpacing: 0,
+                WebkitFontSmoothing: 'subpixel-antialiased',
+                '& .MuiButton-endIcon': {
+                  display: 'inline-block',
+                  position: 'absolute',
+                  top: 12,
+                  right: 0,
+                  marginRight: 10,
+                  color: (theme.vars || theme).palette.grey[600],
+                },
+                '&:hover, &.Mui-focusVisible': {
+                  borderColor: (theme.vars || theme).palette.primary.main,
+                  backgroundColor: (theme.vars || theme).palette.primary[50],
+                  color: (theme.vars || theme).palette.primary[600],
+                  '& .MuiButton-endIcon': {
+                    color: (theme.vars || theme).palette.primary.main,
+                  },
+                },
+              } as const,
+              theme.applyDarkStyles({
+                color: (theme.vars || theme).palette.grey[500],
+                borderColor: (theme.vars || theme).palette.primaryDark[600],
+                backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+                boxShadow: '0px 2px 2px #0B0D0E, inset 0px 4px 4px rgba(20, 25, 31, 0.3)',
+                '& .MuiButton-endIcon': {
+                  color: (theme.vars || theme).palette.grey[400],
+                },
+                '&:hover, &.Mui-focusVisible': {
+                  backgroundColor: (theme.vars || theme).palette.primary[900],
+                  color: (theme.vars || theme).palette.primary[100],
+                  '& .MuiButton-endIcon': {
+                    color: (theme.vars || theme).palette.primary[300],
+                  },
+                },
+              }),
+            ],
+          },
+          {
+            // @ts-ignore internal repo module augmentation issue
+            props: { variant: 'link' },
+            style: ({ theme }) => ({
+              marginBottom: 1,
+              fontSize: theme.typography.pxToRem(14),
+              fontWeight: theme.typography.fontWeightBold,
+              color: (theme.vars || theme).palette.primary[600],
+              '&:hover': {
+                backgroundColor: (theme.vars || theme).palette.primary[50],
+              },
+              ...theme.applyDarkStyles({
+                color: (theme.vars || theme).palette.primary[300],
+                '&:hover': {
+                  backgroundColor: alpha(theme.palette.primary[800], 0.3),
+                },
+              }),
+            }),
+          },
+        ],
+      },
+      MuiIconButton: {
+        variants: [
+          {
+            props: { color: 'primary' },
+            style: ({ theme }) => [
+              {
+                height: 34,
+                width: 34,
+                border: `1px solid`,
+                borderRadius: theme.shape.borderRadius,
+                color: (theme.vars || theme).palette.primary.main,
+                backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
+                borderColor: (theme.vars || theme).palette.primaryDark[100],
+                boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1.5px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+                '&:hover': {
+                  borderColor: (theme.vars || theme).palette.grey[300],
+                  background: (theme.vars || theme).palette.grey[50],
+                },
+              },
+              theme.applyDarkStyles({
+                color: (theme.vars || theme).palette.primary[300],
+                borderColor: alpha(theme.palette.primaryDark[600], 0.5),
+                backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
+                boxShadow: `${alpha(theme.palette.primaryDark[600], 0.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+                '&:hover': {
+                  borderColor: (theme.vars || theme).palette.primaryDark[500],
+                  background: alpha(theme.palette.primaryDark[700], 0.4),
+                },
+              }),
+            ],
+          },
+          {
+            props: { color: 'info' },
+            style: ({ theme }) => [
+              {
+                height: 34,
+                width: 34,
+                color: (theme.vars || theme).palette.text.tertiary,
+                borderRadius: theme.shape.borderRadius,
+                border: `1px solid`,
+                backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
+                borderColor: (theme.vars || theme).palette.primaryDark[100],
+                boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1.5px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+                '&:hover': {
+                  color: (theme.vars || theme).palette.primary.main,
+                  borderColor: (theme.vars || theme).palette.grey[300],
+                  background: (theme.vars || theme).palette.grey[50],
+                },
+              },
+              theme.applyDarkStyles({
+                borderColor: alpha(theme.palette.primaryDark[600], 0.5),
+                backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
+                boxShadow: `${alpha(theme.palette.primaryDark[600], 0.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+                '&:hover': {
+                  color: (theme.vars || theme).palette.primary[400],
+                  borderColor: (theme.vars || theme).palette.primaryDark[500],
+                  background: alpha(theme.palette.primaryDark[700], 0.4),
+                },
+              }),
+            ],
+          },
+        ],
+      },
+      MuiMenu: {
+        styleOverrides: {
+          paper: ({ theme }) => [
+            {
+              minWidth: 160,
+              color: (theme.vars || theme).palette.text.secondary,
+              backgroundImage: 'none',
+              border: '1px solid',
+              backgroundColor: (theme.vars || theme).palette.background.paper,
+              borderColor: (theme.vars || theme).palette.grey[200],
+              '& .MuiMenuItem-root': {
+                fontSize: theme.typography.pxToRem(14),
+                fontWeight: 500,
+                '&:hover, &:focus': {
+                  backgroundColor: (theme.vars || theme).palette.grey[50],
+                },
+                '&:focus-visible': {
+                  outline: 'none',
+                },
+                '&.Mui-selected': {
+                  fontWeight: 500,
+                  color: (theme.vars || theme).palette.primary[600],
+                  backgroundColor: alpha(theme.palette.primary[100], 0.6),
+                },
+              },
+            },
+            theme.applyDarkStyles({
+              backgroundColor: (theme.vars || theme).palette.primaryDark[900],
+              borderColor: (theme.vars || theme).palette.primaryDark[700],
+              '& .MuiMenuItem-root': {
+                '&:hover, &:focus': {
+                  backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+                },
+                '&.Mui-selected': {
+                  color: (theme.vars || theme).palette.primary[300],
+                  backgroundColor: alpha(theme.palette.primary[900], 0.4),
+                },
+              },
+            }),
+          ],
+        },
+      },
+      MuiPopover: {
+        styleOverrides: {
+          paper: ({ theme }) => ({
+            boxShadow: '0px 4px 20px rgba(170, 180, 190, 0.3)',
+            ...theme.applyDarkStyles({
+              boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.5)',
+            }),
+          }),
+        },
+      },
+      MuiDivider: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            borderColor: (theme.vars || theme).palette.grey[100],
+            ...theme.applyDarkStyles({
+              borderColor: alpha(theme.palette.primaryDark[500], 0.3),
+            }),
+          }),
+        },
+      },
+      MuiLink: {
+        defaultProps: {
+          underline: 'none',
+        },
+        styleOverrides: {
+          root: ({ theme }) => ({
+            display: 'inline-flex',
+            alignItems: 'center',
+            fontWeight: theme.typography.fontWeightSemiBold,
+            '&.MuiTypography-body1 > svg': {
+              marginTop: 2,
+            },
+            '& svg:last-child': {
+              marginLeft: 2,
+            },
+            '&:focus-visible': {
+              outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
+              outlineOffset: '2px',
+            },
+          }),
+        },
+        variants: [
+          {
+            props: { color: 'primary' },
+            style: ({ theme }) => [
+              {
+                color: (theme.vars || theme).palette.primary[600],
+                '&:hover': {
+                  color: (theme.vars || theme).palette.primary[700],
+                },
+              },
+              theme.applyDarkStyles({
+                color: (theme.vars || theme).palette.primary[300],
+                '&:hover': {
+                  color: (theme.vars || theme).palette.primary[200],
+                },
+              }),
+            ],
+          },
+        ],
+      },
+      MuiChip: {
+        styleOverrides: {
+          root: ({ ownerState: { color, variant }, theme }) => ({
+            fontWeight: theme.typography.fontWeightSemiBold,
+            paddingBottom: 0.2,
+            ...(variant === 'outlined' &&
+              color === 'default' && {
+                backgroundColor: alpha(theme.palette.grey[50], 0.5),
+                color: (theme.vars || theme).palette.grey[900],
+                borderColor: (theme.vars || theme).palette.grey[200],
+                '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.grey[100],
+                  color: (theme.vars || theme).palette.grey[900],
+                },
+                ...theme.applyDarkStyles({
+                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
+                  color: (theme.vars || theme).palette.grey[300],
+                  borderColor: alpha(theme.palette.primaryDark[500], 0.5),
+                  '&:hover': {
+                    color: (theme.vars || theme).palette.grey[300],
+                    backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+                  },
+                }),
+              }),
+            ...(variant === 'outlined' &&
+              color === 'info' && {
+                backgroundColor: alpha(theme.palette.grey[50], 0.5),
+                color: (theme.vars || theme).palette.grey[900],
+                borderColor: (theme.vars || theme).palette.grey[200],
+                ...theme.applyDarkStyles({
+                  color: (theme.vars || theme).palette.grey[300],
+                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.5),
+                  borderColor: (theme.vars || theme).palette.primaryDark[600],
+                }),
+              }),
+            ...(variant === 'outlined' &&
+              color === 'primary' && {
+                borderColor: (theme.vars || theme).palette.primary[100],
+                backgroundColor: alpha(theme.palette.primary[100], 0.2),
+                ...theme.applyDarkStyles({
+                  color: (theme.vars || theme).palette.primary[300],
+                  borderColor: alpha(theme.palette.primary[500], 0.2),
+                  backgroundColor: alpha(theme.palette.primary[700], 0.2),
+                }),
+              }),
+            ...(variant === 'outlined' &&
+              color === 'success' && {
+                borderColor: (theme.vars || theme).palette.success[100],
+                backgroundColor: (theme.vars || theme).palette.success[50],
+                color: (theme.vars || theme).palette.success[900],
+                ...theme.applyDarkStyles({
+                  color: (theme.vars || theme).palette.success[300],
+                  borderColor: alpha(theme.palette.success[300], 0.2),
+                  background: alpha(theme.palette.success[800], 0.2),
+                }),
+              }),
+            ...(variant === 'filled' && {
+              ...(color === 'default' && {
+                border: '1px solid transparent',
+                color: (theme.vars || theme).palette.primary[700],
+                backgroundColor: alpha(theme.palette.primary[100], 0.5),
+                '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.primary[100],
+                },
+                ...theme.applyDarkStyles({
+                  color: '#fff',
+                  backgroundColor: alpha(theme.palette.primaryDark[500], 0.8),
+                  '&:hover': {
+                    backgroundColor: (theme.vars || theme).palette.primaryDark[600],
+                  },
+                }),
+              }),
+              ...(color === 'primary' && {
+                color: (theme.vars || theme).palette.primary[600],
+                backgroundColor: alpha(theme.palette.primary[100], 0.4),
+                '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.primary[100],
+                },
+                '& .MuiChip-deleteIcon': {
+                  color: (theme.vars || theme).palette.primary[600],
+                  '&:hover': {
+                    color: (theme.vars || theme).palette.primary[700],
+                  },
+                },
+                '&.Mui-focusVisible': {
+                  backgroundColor: (theme.vars || theme).palette.primary[200],
+                },
+                ...theme.applyDarkStyles({
+                  color: (theme.vars || theme).palette.primary[100],
+                  backgroundColor: alpha(theme.palette.primary[800], 0.5),
+                  '&:hover': {
+                    backgroundColor: alpha(theme.palette.primary[900], 0.5),
+                  },
+                  '& .MuiChip-deleteIcon': {
+                    color: (theme.vars || theme).palette.primary[100],
+                    '&:hover': {
+                      color: (theme.vars || theme).palette.primary[50],
+                    },
+                  },
+                }),
+              }),
+            }),
+            // for labelling product in the search
+            // @ts-ignore internal repo module augmentation issue
+            ...(variant === 'light' && {
+              ...(color === 'default' && {
+                color: (theme.vars || theme).palette.primary[700],
+                backgroundColor: alpha(theme.palette.primary[100], 0.3),
+                ...theme.applyDarkStyles({
+                  color: (theme.vars || theme).palette.primary[200],
+                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.5),
+                }),
+              }),
+              ...(color === 'warning' && {
+                color: (theme.vars || theme).palette.warning[900],
+                backgroundColor: (theme.vars || theme).palette.warning[100],
+                ...theme.applyDarkStyles({
+                  color: '#fff',
+                  backgroundColor: (theme.vars || theme).palette.warning[900],
+                }),
+              }),
+              ...(color === 'success' && {
+                color: (theme.vars || theme).palette.success[900],
+                backgroundColor: (theme.vars || theme).palette.success[100],
+                ...theme.applyDarkStyles({
+                  color: '#fff',
+                  backgroundColor: (theme.vars || theme).palette.success[900],
+                }),
+              }),
+            }),
+          }),
+        },
+      },
+      MuiList: {
+        styleOverrides: {
+          root: {
+            padding: 0,
+          },
+        },
+      },
+      MuiListItemButton: {
+        styleOverrides: {
+          root: ({ theme }) => [
+            {
+              padding: '8px',
+              textTransform: 'none',
+              fontWeight: 500,
+              fontSize: theme.typography.pxToRem(14),
+              color: theme.palette.grey[700],
+              borderRadius: 0,
+              '&:hover': {
+                backgroundColor: theme.palette.grey[50],
+              },
+              '&.Mui-selected': {
+                borderRadius: 10,
+                border: '1px solid',
+                color: (theme.vars || theme).palette.primary[500],
+                borderColor: `${(theme.vars || theme).palette.primary[500]} !important`,
+                backgroundColor: (theme.vars || theme).palette.primary[50],
+                '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.primary[100],
+                },
+              },
+            } as const,
+            theme.applyDarkStyles({
+              color: theme.palette.grey[300],
+              '&:hover': {
+                backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
+              },
+              '&.Mui-selected': {
+                color: '#fff',
+                borderColor: `${(theme.vars || theme).palette.primary[700]} !important`,
+                backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+                '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.primaryDark[600],
+                },
+              },
+            }),
+          ],
+        },
+      },
+      MuiSelect: {
+        defaultProps: {
+          IconComponent: ArrowDropDownRounded,
+        },
+        styleOverrides: {
+          iconFilled: {
+            top: 'calc(50% - .25em)',
+          },
+        },
+      },
+      MuiTab: {
+        defaultProps: {
+          disableTouchRipple: true,
+        },
+      },
+      MuiPaper: {
+        styleOverrides: {
+          root: ({ theme, ownerState }) => [
+            {
+              backgroundImage: 'none',
+              backgroundColor: '#fff',
+              '&[href]': {
+                textDecorationLine: 'none',
+              },
+              transition: theme.transitions.create(['border', 'box-shadow'], {
+                duration: theme.transitions.duration.shortest,
+              }),
+              ...(ownerState.variant === 'outlined' && {
+                display: 'block',
+                borderColor: (theme.vars || theme).palette.grey[100],
+                '&[href]': {
+                  textDecorationLine: 'none',
+                  boxShadow: `hsl(200, 0%, 100%) 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.3)} 0 -2px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+                  '&:hover': {
+                    borderColor: (theme.vars || theme).palette.primary[200],
+                    boxShadow: `0px 2px 8px ${(theme.vars || theme).palette.primary[100]}`,
+                  },
+                  '&:focus-visible': {
+                    outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
+                    outlineOffset: '2px',
+                  },
+                },
+                ':is(a&), :is(button&)': {
+                  '&:hover': {
+                    borderColor: (theme.vars || theme).palette.primary[200],
+                    boxShadow: `0px 4px 16px ${(theme.vars || theme).palette.grey[200]}`,
+                  },
+                },
+              }),
+            },
+            theme.applyDarkStyles({
+              backgroundColor: (theme.vars || theme).palette.primaryDark[900],
+              ...(ownerState.variant === 'outlined' && {
+                borderColor: (theme.vars || theme).palette.primaryDark[700],
+                backgroundColor: alpha(theme.palette.primaryDark[800], 0.6),
+                '&[href]': {
+                  textDecorationLine: 'none',
+                  boxShadow: `${alpha(theme.palette.primaryDark[700], 0.4)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+                  '&:hover': {
+                    borderColor: alpha(theme.palette.primary[600], 0.5),
+                    boxShadow: `0px 2px 8px ${alpha(theme.palette.primary[900], 0.6)}`,
+                  },
+                },
+                ':is(a&), :is(button&)': {
+                  '&:hover': {
+                    boxShadow: `0px 4px 24px ${(theme.vars || theme).palette.common.black}`,
+                  },
+                },
+              }),
+            }),
+          ],
+        },
+      },
+      MuiTableCell: {
+        styleOverrides: {
+          root: ({ theme, ownerState }) => ({
+            padding: theme.spacing(1, 2),
+            borderColor: (theme.vars || theme).palette.divider,
+            ...(ownerState.variant === 'head' && {
+              color: (theme.vars || theme).palette.text.primary,
+              fontWeight: 700,
+            }),
+            ...(ownerState.variant === 'body' && {
+              color: (theme.vars || theme).palette.text.secondary,
+            }),
+          }),
+        },
+      },
+      MuiToggleButtonGroup: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            backgroundColor: '#fff',
+            ...theme.applyDarkStyles({
+              backgroundColor: (theme.vars || theme).palette.primaryDark[900],
+            }),
+          }),
+        },
+      },
+      MuiToggleButton: {
+        styleOverrides: {
+          root: ({ theme, ownerState }) => [
+            {
+              textTransform: 'none',
+              fontWeight: theme.typography.fontWeightMedium,
+              color: theme.palette.text.secondary,
+              borderColor: theme.palette.grey[200],
+              ...(ownerState.size === 'small' && {
+                padding: '0.375rem 0.75rem',
+              }),
+              '&.Mui-selected': {
+                color: (theme.vars || theme).palette.primary[700],
+                borderColor: `${(theme.vars || theme).palette.primary[500]} !important`,
+                backgroundColor: (theme.vars || theme).palette.primary[50],
+                '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.primary[100],
+                },
+              },
+            } as const,
+            theme.applyDarkStyles({
+              borderColor: theme.palette.primaryDark[700],
+              '&:hover': {
+                backgroundColor: alpha(theme.palette.primaryDark[600], 0.2),
+              },
+              '&.Mui-selected': {
+                color: (theme.vars || theme).palette.primary[200],
+                borderColor: `${(theme.vars || theme).palette.primary[700]} !important`,
+                backgroundColor: alpha(theme.palette.primary[900], 0.4),
+                '&:hover': {
+                  backgroundColor: alpha(theme.palette.primary[900], 0.8),
+                  borderColor: `${(theme.vars || theme).palette.primary[400]} !important`,
+                },
+              },
+            }),
+          ],
+        },
+      },
+      MuiTooltip: {
+        styleOverrides: {
+          tooltip: {
+            borderRadius: 6,
+            padding: '6px 12px',
+          },
+        },
+      },
+      MuiSwitch: {
+        styleOverrides: {
+          root: {
+            width: 32,
+            height: 20,
+            padding: 0,
+            '& .MuiSwitch-switchBase': {
+              '&.Mui-checked': {
+                transform: 'translateX(11px)',
+                color: '#fff',
+              },
+            },
+          },
+          switchBase: {
+            height: 20,
+            width: 20,
+            padding: 0,
+            color: '#fff',
+            '&.Mui-checked + .MuiSwitch-track': {
+              opacity: 1,
+            },
+          },
+          track: ({ theme }) => ({
+            opacity: 1,
+            borderRadius: 32,
+            backgroundColor: theme.palette.grey[400],
+            ...theme.applyDarkStyles({
+              backgroundColor: theme.palette.grey[800],
+            }),
+          }),
+          thumb: {
+            flexShrink: 0,
+            width: '14px',
+            height: '14px',
+          },
+        },
+      },
+      MuiPaginationItem: {
+        styleOverrides: {
+          root: ({ theme }) => [
+            {
+              textTransform: 'none',
+              fontWeight: theme.typography.fontWeightSemiBold,
+              color: theme.palette.grey[700],
+              borderColor: theme.palette.grey[200],
+              borderRadius: '8px',
+              '&.Mui-selected': {
+                color: (theme.vars || theme).palette.primary[500],
+                borderColor: `${(theme.vars || theme).palette.primary[500]} !important`,
+                backgroundColor: (theme.vars || theme).palette.primary[50],
+                '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.primary[100],
+                },
+              },
+            } as const,
+            theme.applyDarkStyles({
+              color: theme.palette.grey[200],
+              borderColor: theme.palette.primaryDark[700],
+              '&.Mui-selected': {
+                color: theme.palette.primary[100],
+                borderColor: `${(theme.vars || theme).palette.primary[700]} !important`,
+                backgroundColor: alpha(theme.palette.primary[900], 0.5),
+                '&:hover': {
+                  backgroundColor: alpha(theme.palette.primary[900], 0.8),
+                },
+              },
+            }),
+          ],
+        },
+      },
+      MuiCssBaseline: {
+        defaultProps: {
+          enableColorScheme: true,
+        },
+        styleOverrides: {
+          html: {
+            overflowY: 'scroll',
+            // TODO add support for it,
+            // https://github.com/mui/material-ui/issues/40748
+            // scrollbarGutter: 'stable',
+          },
+        },
+      },
+    },
+  };
+}
+
+export const brandingDarkTheme = createTheme({
+  ...getDesignTokens('dark'),
+  ...getThemedComponents(),
+});
+
+export const brandingLightTheme = createTheme({
+  ...getDesignTokens('light'),
+  ...getThemedComponents(),
+});
diff --git a/packages/mui-docs/src/branding/index.ts b/packages/mui-docs/src/branding/index.ts
new file mode 100644
index 00000000000000..50621de654fd0a
--- /dev/null
+++ b/packages/mui-docs/src/branding/index.ts
@@ -0,0 +1,2 @@
+export * from './brandingTheme';
+export * from './BrandingProvider';
diff --git a/packages/mui-docs/tsconfig.build.json b/packages/mui-docs/tsconfig.build.json
index e51a26ab34c9e5..6ecc42731f24fc 100644
--- a/packages/mui-docs/tsconfig.build.json
+++ b/packages/mui-docs/tsconfig.build.json
@@ -13,5 +13,8 @@
   },
   "include": ["src/**/*.ts*", "src/**/*.json"],
   "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"],
-  "references": [{ "path": "../mui-material/tsconfig.build.json" }]
+  "references": [
+    { "path": "../mui-material/tsconfig.build.json" },
+    { "path": "../mui-system/tsconfig.build.json" }
+  ]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6dc6963882c3fd..97fdc7f0aa4382 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1207,14 +1207,11 @@ importers:
         specifier: ^7.23.9
         version: 7.23.9
       '@mui/base':
-        specifier: workspace:*
+        specifier: '*'
         version: link:../mui-base/build
-      '@mui/material':
-        specifier: workspace:^
-        version: link:../mui-material/build
-      '@mui/utils':
-        specifier: workspace:^
-        version: link:../mui-utils/build
+      '@mui/system':
+        specifier: ^5.0.0
+        version: link:../mui-system/build
       clsx:
         specifier: ^2.1.0
         version: 2.1.0
@@ -1225,6 +1222,12 @@ importers:
         specifier: ^15.8.1
         version: 15.8.1
     devDependencies:
+      '@mui/icons-material':
+        specifier: workspace:*
+        version: link:../mui-icons-material/build
+      '@mui/material':
+        specifier: workspace:*
+        version: link:../mui-material/build
       '@types/node':
         specifier: ^18.19.25
         version: 18.19.25