diff --git a/.stylelintrc.js b/.stylelintrc.js
index 5ca7d8af49ca68..3fbebcc38f0350 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -7,6 +7,7 @@ module.exports = {
   ],
   rules: {
     'alpha-value-notation': null,
+    'custom-property-pattern': null,
     'declaration-colon-newline-after': null,
     'function-parentheses-newline-inside': null, // not compatible with prettier
     'media-feature-range-notation': null,
diff --git a/docs/pages/_document.js b/docs/pages/_document.js
index d49fc3be4466a5..a88fd85330e2aa 100644
--- a/docs/pages/_document.js
+++ b/docs/pages/_document.js
@@ -84,10 +84,11 @@ export default class MyDocument extends Document {
             href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap"
             rel="stylesheet"
           />
-          <link // prevent font flash
+          {/* ========== Font preload (prevent font flash) ============= */}
+          <link
             rel="preload"
             // optimized for english characters (40kb -> 6kb)
-            href="/static/fonts/PlusJakartaSans-ExtraBold-subset.woff2"
+            href="/static/fonts/GeneralSans-Semibold-subset.woff2"
             as="font"
             type="font/woff2"
             crossOrigin="anonymous"
@@ -96,14 +97,32 @@ export default class MyDocument extends Document {
             // the above <link> does not work in mobile device, this inline <style> fixes it without blocking resources
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
-              __html: `@font-face{font-family:'PlusJakartaSans-ExtraBold';font-style:normal;font-weight:800;font-display:swap;src:url('/static/fonts/PlusJakartaSans-ExtraBold-subset.woff2') format('woff2');}`,
+              __html: `@font-face{font-family:'General Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/GeneralSans-Semibold-subset.woff2') format('woff2');}`,
             }}
           />
+          <link
+            rel="preload"
+            // optimized for english characters (40kb -> 6kb)
+            href="/static/fonts/IBMPlexSans-Regular-subset.woff2"
+            as="font"
+            type="font/woff2"
+            crossOrigin="anonymous"
+          />
           <style
             // the above <link> does not work in mobile device, this inline <style> fixes it without blocking resources
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
-              __html: `@font-face{font-family:'PlusJakartaSans-Bold';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/PlusJakartaSans-Bold-subset.woff2') format('woff2');}`,
+              __html: `@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/IBMPlexSans-Regular-subset.woff2') format('woff2');}`,
+            }}
+          />
+          {/* =========================================================== */}
+          <style
+            // Loads General Sans: Regular (400), Medium (500), SemiBold (600), Bold (700)
+            // Typeface documentation: https://www.fontshare.com/fonts/general-sans
+            // use https://cssminifier.com/ to minify
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{
+              __html: `@font-face{font-family:'General Sans';src:url(/static/fonts/GeneralSans-Regular.woff2) format('woff2'),url(/static/fonts/GeneralSans-Regular.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap;}@font-face{font-family:'General Sans';src:url(/static/fonts/GeneralSans-Medium.woff2) format('woff2'),url(/static/fonts/GeneralSans-Medium.ttf) format('truetype');font-weight:500;font-style:normal;font-display:swap;}@font-face{font-family:'General Sans';src:url(/static/fonts/GeneralSans-SemiBold.woff2) format('woff2'),url(/static/fonts/GeneralSans-SemiBold.ttf) format('truetype');font-weight:600;font-style:normal;font-display:swap;}@font-face{font-family:'General Sans';src:url(/static/fonts/GeneralSans-Bold.woff2) format('woff2'),url(/static/fonts/GeneralSans-Bold.ttf) format('truetype');font-weight:700;font-style:normal;font-display:swap;}`,
             }}
           />
           <style
diff --git a/docs/pages/about.tsx b/docs/pages/about.tsx
index d927c417091596..f1d0ffa777f399 100644
--- a/docs/pages/about.tsx
+++ b/docs/pages/about.tsx
@@ -21,6 +21,7 @@ import AppFooter from 'docs/src/layouts/AppFooter';
 import MuiStatistics from 'docs/src/components/home/MuiStatistics';
 import GradientText from 'docs/src/components/typography/GradientText';
 import ROUTES from 'docs/src/route';
+import Section from 'docs/src/layouts/Section';
 import IconImage from 'docs/src/components/icon/IconImage';
 import ForumRoundedIcon from '@mui/icons-material/ForumRounded';
 import PeopleRoundedIcon from '@mui/icons-material/PeopleRounded';
@@ -101,7 +102,7 @@ function Person(props: Profile & { sx?: PaperProps['sx'] }) {
                 borderRadius: 1,
                 backgroundColor: 'primary.100',
                 ...theme.applyDarkStyles({
-                  backgroundColor: 'primary.700',
+                  backgroundColor: 'primary.900',
                 }),
               })}
             />
@@ -193,11 +194,55 @@ function Widget({
   icon: React.ReactElement;
 }) {
   return (
-    <Paper variant="outlined" sx={{ height: '100%', px: 2, pt: 2, pb: 1.5 }}>
-      <Typography component="div" variant="body2" fontWeight="bold" sx={{ mb: 1 }}>
-        <Box sx={{ display: 'inline-block', lineHeight: 0, verticalAlign: 'bottom', mr: 1 }}>
-          {icon}
-        </Box>
+    <Paper
+      variant="outlined"
+      sx={(theme) => ({
+        p: 4,
+        height: '100%',
+        position: 'relative',
+        borderRadius: '12px',
+        border: '1px solid',
+        borderColor: 'grey.100',
+        background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
+
+        ...theme.applyDarkStyles({
+          bgcolor: 'primaryDark.900',
+          borderColor: 'primaryDark.700',
+          background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
+        }),
+      })}
+    >
+      <Box
+        sx={(theme) => ({
+          width: 40,
+          height: 40,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          borderRadius: 1,
+          border: '1px solid',
+          borderColor: 'primary.200',
+          bgcolor: 'primary.50',
+          boxShadow:
+            '0px 1px 6px 0px rgba(194, 224, 255, 1), 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset',
+          ...theme.applyDarkStyles({
+            borderColor: 'primary.400',
+            bgcolor: 'primary.900',
+            boxShadow:
+              '0px 1px 6px 0px rgba(0, 89, 178, 1), 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset',
+          }),
+        })}
+      >
+        {icon}
+      </Box>
+      <Typography
+        fontWeight="bold"
+        component="h3"
+        color="text.primary"
+        variant="body2"
+        mt={2}
+        mb={0.5}
+      >
         {title}
       </Typography>
       {children}
@@ -643,8 +688,9 @@ function AboutContent() {
       <Container>
         <Box
           sx={{
-            height: '40vh',
-            minHeight: 300,
+            pt: 12,
+
+            minHeight: 200,
             display: 'flex',
             flexDirection: 'column',
             justifyContent: 'center',
@@ -675,48 +721,41 @@ function AboutContent() {
         </Box>
         <References companies={CORE_CUSTOMERS} />
       </Container>
-      <Box
-        sx={(theme) => ({
-          bgcolor: 'grey.50',
-          ...theme.applyDarkStyles({
-            bgcolor: 'primaryDark.900',
-          }),
-        })}
-      >
-        <Container sx={{ py: { xs: 4, md: 8 } }}>
-          <Grid container alignItems="center" spacing={4}>
-            <Grid item xs={12} md={6}>
-              <Typography variant="h2" sx={{ my: 1 }}>
-                Our ultimate goal
-              </Typography>
-              <Typography color="text.secondary" sx={{ mb: 1, maxWidth: 450 }}>
-                We aim high trying to design the most effective and efficient tool for building UIs,
-                for developers and designers. MUI started back in 2014, to unify React and Material
-                Design. Since then, we&apos;ve become a community of over 2M developers from every
-                corner of the world.
-              </Typography>
-              <Typography color="text.secondary" sx={{ mb: 2 }}>
-                We plan on doing all that cultivating our values:
-              </Typography>
-              {[
-                'Customer obsessed. We put our customers front & center.',
-                'Transparency. Most of our work is public.',
-                'Freedom. We work from anywhere in the world.',
-                'Autonomy. We want to create a safe, high-trust team.',
-                "Excellence. We're aiming high, and we know it.",
-              ].map((text) => (
-                <Box key={text} sx={{ display: 'flex', alignItems: 'flex-start', mt: 1 }}>
-                  <IconImage name="yes" />
-                  <Typography variant="body2" color="text.primary" fontWeight={700} sx={{ ml: 1 }}>
-                    {text}
-                  </Typography>
-                </Box>
-              ))}
-            </Grid>
-            <MuiStatistics />
+      <Divider />
+      <Section bg="gradient" cozy>
+        <Grid container alignItems="center" spacing={4}>
+          <Grid item xs={12} md={6}>
+            <Typography variant="h2" sx={{ my: 1 }}>
+              Our <GradientText>ultimate</GradientText> goal
+            </Typography>
+            <Typography color="text.secondary" sx={{ mb: 1, maxWidth: 450 }}>
+              We aim high trying to design the most effective and efficient tool for building UIs,
+              for developers and designers. MUI started back in 2014, to unify React and Material
+              Design. Since then, we&apos;ve become a community of over 2M developers from every
+              corner of the world.
+            </Typography>
+            <Typography color="text.secondary" sx={{ mb: 2 }}>
+              We plan on doing all that cultivating our values:
+            </Typography>
+            {[
+              'Customer obsessed. We put our customers front & center.',
+              'Transparency. Most of our work is public.',
+              'Freedom. We work from anywhere in the world.',
+              'Autonomy. We want to create a safe, high-trust team.',
+              "Excellence. We're aiming high, and we know it.",
+            ].map((text) => (
+              <Box key={text} sx={{ display: 'flex', alignItems: 'center', mt: 1 }}>
+                <IconImage name="yes" />
+                <Typography variant="body2" color="text.primary" fontWeight={600} sx={{ ml: 1.5 }}>
+                  {text}
+                </Typography>
+              </Box>
+            ))}
           </Grid>
-        </Container>
-      </Box>
+          <MuiStatistics />
+        </Grid>
+      </Section>
+      <Divider />
       <Container sx={{ py: { xs: 4, md: 8 } }}>
         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
           <div>
@@ -751,7 +790,7 @@ function AboutContent() {
         >
           Company
         </Typography>
-        <Typography color="text.secondary" sx={{ maxWidth: { md: 500 } }}>
+        <Typography color="text.secondary" sx={{ maxWidth: { md: 450 } }}>
           The development of the project and its ecosystem is guided by an international team.
         </Typography>
         <Box sx={{ pt: 2 }}>
@@ -764,7 +803,8 @@ function AboutContent() {
           </Grid>
         </Box>
       </Container>
-      <Box data-mui-color-scheme="dark" sx={{ bgcolor: 'primaryDark.700' }}>
+      <Divider />
+      <Box data-mui-color-scheme="dark" sx={{ bgcolor: 'primaryDark.900' }}>
         <Container sx={{ py: { xs: 4, sm: 8 } }}>
           <Typography
             component="h3"
@@ -811,11 +851,12 @@ function AboutContent() {
           </Box>
         </Container>
       </Box>
-      <Container sx={{ py: { xs: 4, md: 8 } }}>
+      <Divider />
+      <Container sx={{ py: { xs: 4, md: 12 } }}>
         <Typography variant="h2" sx={{ mt: 1, mb: { xs: 2, sm: 4 } }}>
           How can you support us?
         </Typography>
-        <Grid container spacing={2}>
+        <Grid container spacing={3}>
           <Grid item xs={12} sm={6} md={4}>
             <Widget
               icon={<ForumRoundedIcon fontSize="small" color="primary" />}
@@ -835,6 +876,7 @@ function AboutContent() {
                 size="small"
                 href="https://github.com/mui/material-ui/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc"
                 endIcon={<KeyboardArrowRightRounded />}
+                sx={{ ml: -1 }}
               >
                 Leave your feedback{' '}
               </Button>
@@ -854,6 +896,7 @@ function AboutContent() {
                   typography: 'body2',
                   color: 'text.secondary',
                   pl: 2,
+                  mb: 2,
                 }}
               >
                 <li>
@@ -894,6 +937,7 @@ function AboutContent() {
                 size="small"
                 href="https://github.com/mui/material-ui"
                 endIcon={<KeyboardArrowRightRounded />}
+                sx={{ ml: -1 }}
               >
                 See the repository
               </Button>
@@ -920,6 +964,7 @@ function AboutContent() {
                 size="small"
                 href="https://opencollective.com/mui"
                 endIcon={<KeyboardArrowRightRounded />}
+                sx={{ ml: -1 }}
               >
                 See Open Collective{' '}
               </Button>
@@ -927,6 +972,7 @@ function AboutContent() {
           </Grid>
         </Grid>
       </Container>
+      <Divider />
       <HeroEnd />
       <Divider />
     </React.Fragment>
diff --git a/docs/pages/base-ui.tsx b/docs/pages/base-ui.tsx
new file mode 100644
index 00000000000000..05f62dd1f2a6c0
--- /dev/null
+++ b/docs/pages/base-ui.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+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 AppFooter from 'docs/src/layouts/AppFooter';
+import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
+import BaseUIHero from 'docs/src/components/productBaseUI/BaseUIHero';
+import BaseUISummary from 'docs/src/components/productBaseUI/BaseUISummary';
+import BaseUIComponents from 'docs/src/components/productBaseUI/BaseUIComponents';
+import BaseUICustomization from 'docs/src/components/productBaseUI/BaseUICustomization';
+import BaseUIEnd from 'docs/src/components/productBaseUI/BaseUIEnd';
+import BaseUITestimonial from 'docs/src/components/productBaseUI/BaseUITestimonial';
+
+export default function Core() {
+  return (
+    <BrandingCssVarsProvider>
+      <Head
+        title="Base UI: Ship accessible & sleek components"
+        description='Base UI gives you a set of foundational \"headless\" components that you can build with using any styling solution you choose—no need to override any default style engine or theme.'
+        card="/static/blog/introducing-mui-base/card.png"
+      >
+        <link
+          href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+      <AppHeaderBanner />
+      <AppHeader gitHubRepository="https://github.com/mui/material-ui" />
+      <main id="main-content">
+        <BaseUIHero />
+        <BaseUISummary />
+        <Divider />
+        <BaseUIComponents />
+        <Divider />
+        <BaseUICustomization />
+        <Divider />
+        <BaseUITestimonial />
+        <Divider />
+        <BaseUIEnd />
+        <Divider />
+      </main>
+      <AppFooter />
+    </BrandingCssVarsProvider>
+  );
+}
diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx
index 2e53f9016e0171..2a998399c00989 100644
--- a/docs/pages/blog.tsx
+++ b/docs/pages/blog.tsx
@@ -24,6 +24,10 @@ import { authors as AUTHORS } from 'docs/src/modules/components/TopLayoutBlog';
 import HeroEnd from 'docs/src/components/home/HeroEnd';
 import Link from 'docs/src/modules/components/Link';
 import generateRssFeed from 'docs/scripts/generateRSSFeed';
+import TwitterIcon from '@mui/icons-material/Twitter';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import LinkedInIcon from '@mui/icons-material/LinkedIn';
+import YouTubeIcon from '@mui/icons-material/YouTube';
 
 export const getStaticProps = () => {
   const data = getAllBlogPosts();
@@ -45,18 +49,21 @@ function PostPreview(props: BlogPost) {
             sx={[
               (theme) => ({
                 fontWeight: 500,
-                color: (theme.vars || theme).palette.grey[700],
-                background: (theme.vars || theme).palette.grey[100],
+                color: (theme.vars || theme).palette.primary[600],
+                background: (theme.vars || theme).palette.primary[50],
+                border: '1px solid',
+                borderColor: (theme.vars || theme).palette.primary[100],
                 '&:hover': {
-                  background: (theme.vars || theme).palette.grey[100],
+                  background: (theme.vars || theme).palette.primary[50],
                 },
               }),
               (theme) =>
                 theme.applyDarkStyles({
-                  color: (theme.vars || theme).palette.grey[50],
-                  background: alpha(theme.palette.grey[700], 0.5),
+                  color: (theme.vars || theme).palette.primary[100],
+                  background: alpha(theme.palette.primary[900], 0.4),
+                  borderColor: alpha(theme.palette.primary[800], 0.5),
                   '&:hover': {
-                    background: alpha(theme.palette.grey[700], 0.5),
+                    background: alpha(theme.palette.primary[900], 0.4),
                   },
                 }),
             ]}
@@ -98,7 +105,7 @@ function PostPreview(props: BlogPost) {
                 width: 28,
                 height: 28,
                 border: 3,
-                borderColor: (theme.vars || theme).palette.grey[100],
+                borderColor: '#FFF',
                 backgroundColor: (theme.vars || theme).palette.grey[100],
                 color: (theme.vars || theme).palette.grey[800],
                 fontSize: theme.typography.pxToRem(13),
@@ -163,7 +170,6 @@ function PostPreview(props: BlogPost) {
           aria-describedby={`describe-${props.slug}`}
           href={`/blog/${props.slug}`}
           id={`describe-${props.slug}`}
-          size="small"
           endIcon={<KeyboardArrowRightRoundedIcon />}
           sx={(theme) => ({
             mt: { xs: 1, md: 0 },
@@ -256,75 +262,103 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
       />
       <AppHeader />
       <main id="main-content">
-        <Section bg="gradient" sx={{ backgroundSize: '100% 300px', backgroundRepeat: 'no-repeat' }}>
-          <Typography variant="body2" color="primary.600" fontWeight="bold" textAlign="center">
-            Blog
-          </Typography>
-          <Typography component="h1" variant="h2" textAlign="center" sx={{ mb: { xs: 5, md: 10 } }}>
-            The <GradientText>latest</GradientText> about MUI
-          </Typography>
-          <Box
-            component="ul"
-            sx={{
-              display: 'grid',
-              m: 0,
-              p: 0,
-              gap: 2,
-              gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
-            }}
-          >
-            {[firstPost, secondPost].map((post) => (
-              <Paper
-                key={post.slug}
-                component="li"
-                variant="outlined"
-                sx={[
-                  {
-                    p: 2,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    position: 'relative',
-                    transition: 'all ease 120ms',
-                    '&:hover, &:focus-within': {
-                      borderColor: 'grey.300',
-                      boxShadow: '0px 4px 20px rgba(170, 180, 190, 0.3)',
-                    },
-                    '&:focus-within': {
-                      '& a': {
-                        outline: 0,
-                      },
-                    },
-                  },
-                  (theme) =>
-                    theme.applyDarkStyles({
+        <Box
+          sx={(theme) => ({
+            background: `linear-gradient(180deg, #FFF 50%, 
+          ${(theme.vars || theme).palette.primary[50]} 100%)
+        `,
+            ...theme.applyDarkStyles({
+              background: `linear-gradient(180deg, ${
+                (theme.vars || theme).palette.primaryDark[800]
+              } 50%, 
+          ${alpha(theme.palette.primary[900], 0.2)} 100%)
+          `,
+            }),
+          })}
+        >
+          <Section bg="transparent" cozy>
+            <Typography
+              variant="body2"
+              color="primary.main"
+              fontWeight="bold"
+              textAlign="center"
+              gutterBottom
+            >
+              Blog
+            </Typography>
+            <Typography
+              component="h1"
+              variant="h2"
+              textAlign="center"
+              sx={{ mb: { xs: 5, md: 10 } }}
+            >
+              The <GradientText>latest</GradientText> about MUI
+            </Typography>
+            <Box
+              component="ul"
+              sx={{
+                display: 'grid',
+                m: 0,
+                p: 0,
+                gap: 2,
+                gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+              }}
+            >
+              {[firstPost, secondPost].map((post) => (
+                <Paper
+                  key={post.slug}
+                  component="li"
+                  variant="outlined"
+                  sx={[
+                    {
+                      p: 2,
+                      display: 'flex',
+                      flexDirection: 'column',
+                      position: 'relative',
+                      transition: 'all ease 120ms',
                       '&:hover, &:focus-within': {
-                        borderColor: 'primary.600',
-                        boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.5)',
+                        borderColor: 'grey.300',
+                        boxShadow: '0px 4px 20px rgba(170, 180, 190, 0.3)',
                       },
-                    }),
-                ]}
-              >
-                {post.image && (
-                  <Box
-                    component="img"
-                    src={post.image}
-                    sx={{
-                      aspectRatio: '16 / 9',
-                      width: '100%',
-                      height: 'auto',
-                      objectFit: 'cover',
-                      borderRadius: '4px',
-                    }}
-                  />
-                )}
-                <PostPreview {...post} />
-              </Paper>
-            ))}
-          </Box>
-        </Section>
+                      '&:focus-within': {
+                        '& a': {
+                          outline: 0,
+                        },
+                      },
+                    },
+                    (theme) =>
+                      theme.applyDarkStyles({
+                        '&:hover, &:focus-within': {
+                          borderColor: 'primary.600',
+                          boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.5)',
+                        },
+                      }),
+                  ]}
+                >
+                  {post.image && (
+                    <Box
+                      component="img"
+                      src={post.image}
+                      sx={{
+                        aspectRatio: '16 / 9',
+                        width: '100%',
+                        height: 'auto',
+                        objectFit: 'cover',
+                        borderRadius: '4px',
+                      }}
+                    />
+                  )}
+                  <PostPreview {...post} />
+                </Paper>
+              ))}
+            </Box>
+          </Section>
+        </Box>
+        <Divider />
         <Container
           ref={postListRef}
           sx={{
+            py: { xs: 4, sm: 6, md: 8 },
             mt: -6,
             display: 'grid',
             gridTemplateColumns: { md: '1fr 380px' },
@@ -333,8 +367,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
         >
           <Typography
             component="h2"
-            color="text.primary"
-            variant="h5"
+            variant="h6"
             fontWeight="700"
             sx={{ mb: { xs: 1, sm: 2 }, mt: 8 }} // margin-top makes the title appear when scroll into view
           >
@@ -369,7 +402,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
                 }),
               })}
             >
-              <Typography color="text.primary" fontWeight="500" sx={{ mb: 2 }}>
+              <Typography color="text.primary" fontWeight="semiBold" sx={{ mb: 2 }}>
                 Filter by tag
               </Typography>
               <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
@@ -379,6 +412,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
                     <Chip
                       key={tag}
                       variant={selected ? 'filled' : 'outlined'}
+                      color={selected ? 'primary' : undefined}
                       {...(selected
                         ? {
                             label: tag,
@@ -411,6 +445,31 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
                   );
                 })}
               </Box>
+              <Divider sx={{ mt: 3, mb: 2 }} />
+              <Typography color="text.primary" fontWeight="semiBold" sx={{ mb: 1 }}>
+                Want to hear more from us?
+              </Typography>
+              <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+                Stay on the loop about 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}>
+                  <TwitterIcon fontSize="small" />
+                  Twitter
+                </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>
             </Box>
           </Box>
           <Box>
@@ -448,6 +507,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
           </Box>
         </Container>
       </main>
+      <Divider />
       <HeroEnd />
       <Divider />
       <AppFooter />
diff --git a/docs/pages/careers.tsx b/docs/pages/careers.tsx
index 6c47ac9c4978cb..51e3058aeaf62c 100644
--- a/docs/pages/careers.tsx
+++ b/docs/pages/careers.tsx
@@ -18,6 +18,7 @@ import MuiStatistics from 'docs/src/components/home/MuiStatistics';
 import GradientText from 'docs/src/components/typography/GradientText';
 import IconImage from 'docs/src/components/icon/IconImage';
 import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
+import Section from 'docs/src/layouts/Section';
 import MuiAccordion from '@mui/material/Accordion';
 import MuiAccordionSummary from '@mui/material/AccordionSummary';
 import MuiAccordionDetail from '@mui/material/AccordionDetails';
@@ -282,7 +283,7 @@ function CareersContent() {
       <Container>
         <Box
           sx={{
-            height: '40vh',
+            height: '30vh',
             minHeight: 300,
             display: 'flex',
             flexDirection: 'column',
@@ -307,12 +308,13 @@ function CareersContent() {
               minHeight: 48, // a hack to reduce CLS (layout shift)
             }}
           >
-            Our mission is to enable developers at every level of ability to build great UIs,
-            faster.
+            Our mission is to enable developers at every level of ability
+            <br /> to build great UIs, faster.
           </Typography>
         </Box>
       </Container>
       {/* Our ultimate goal */}
+      <Divider />
       <Box
         sx={(theme) => ({
           bgcolor: 'grey.50',
@@ -321,11 +323,11 @@ function CareersContent() {
           }),
         })}
       >
-        <Container sx={{ py: { xs: 4, md: 8 } }}>
+        <Section bg="gradient" cozy>
           <Grid container alignItems="center" spacing={4}>
             <Grid item xs={12} md={6}>
               <Typography variant="h2" sx={{ my: 1 }}>
-                Our ultimate goal
+                Our <GradientText>ultimate</GradientText> goal
               </Typography>
               <Typography color="text.secondary" sx={{ mb: 1, maxWidth: 450 }}>
                 We aim high trying to design the most effective and efficient tool for building UIs,
@@ -343,9 +345,9 @@ function CareersContent() {
                 'Freedom. We work from anywhere in the world.',
                 'Autonomy. We want to create a safe, high-trust team.',
               ].map((text) => (
-                <Box key={text} sx={{ display: 'flex', alignItems: 'flex-start', mt: 1 }}>
+                <Box key={text} sx={{ display: 'flex', alignItems: 'center', mt: 1 }}>
                   <IconImage name="yes" />
-                  <Typography variant="body2" color="text.primary" fontWeight={700} sx={{ ml: 1 }}>
+                  <Typography variant="body2" color="text.primary" fontWeight={600} sx={{ ml: 1 }}>
                     {text}
                   </Typography>
                 </Box>
@@ -353,104 +355,73 @@ function CareersContent() {
             </Grid>
             <MuiStatistics />
           </Grid>
-        </Container>
+        </Section>
       </Box>
+      <Divider />
       {/* Perks & benefits */}
-      <div>
-        <Container sx={{ py: 4 }}>
-          <Grid container alignItems="center" spacing={{ xs: 2, sm: 4 }}>
-            <Grid item xs={12} md={6} sx={{ pr: { sm: 0, md: 4 } }}>
-              <Typography variant="h2" sx={{ my: 1 }} id="perks-amp-benefits">
-                {'Perks & benefits'}
+      <Section bg="transparent" cozy>
+        <Grid container alignItems="center" spacing={{ xs: 2, sm: 4 }}>
+          <Grid item xs={12} md={6} sx={{ pr: { sm: 0, md: 4 } }}>
+            <Typography variant="h2" sx={{ my: 1 }} id="perks-amp-benefits">
+              {'Perks & benefits'}
+            </Typography>
+            <Typography color="text.secondary" sx={{ mb: 2 }}>
+              To help you go above and beyond with us, we provide:
+            </Typography>
+            {[
+              ['Remote work:', 'Our entire company is distributed.'],
+              [
+                'Retreats:',
+                'We meet up every eight months for a week of working and having fun together!',
+              ],
+              [
+                'Equipment:',
+                'We will provide the hardware of your choice (initial grant of $2,500 USD).',
+              ],
+              ['Time off:', 'We provide 33 days of paid time off globally.'],
+            ].map((textArray) => (
+              <Box key={textArray[0]} sx={{ display: 'flex', alignItems: 'center', mt: 1 }}>
+                <IconImage name="yes" />
+                <Typography variant="body2" color="text.primary" sx={{ ml: 1 }}>
+                  <span style={{ fontWeight: 600 }}>{`${textArray[0]}  `}</span>
+                  {textArray[1]}
+                </Typography>
+              </Box>
+            ))}
+          </Grid>
+          <Grid item xs={12} sm={12} md={6}>
+            <Paper
+              component={Link}
+              href={ROUTES.blog}
+              noLinkStyle
+              variant="outlined"
+              sx={{ p: 2, width: { xs: '100%', sm: '50%' } }}
+            >
+              <Typography variant="body2" fontWeight="bold" sx={{ mb: 0.5 }}>
+                Blog
               </Typography>
-              <Typography color="text.secondary" sx={{ mb: 2 }}>
-                To help you go above and beyond with us, we provide:
+              <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+                Check behind the scenes and news from the company.
               </Typography>
-              {[
-                ['Remote work:', 'Our entire company is distributed.'],
-                [
-                  'Retreats:',
-                  'We meet up every eight months for a week of working and having fun together!',
-                ],
-                [
-                  'Equipment:',
-                  'We will provide the hardware of your choice (initial grant of $2,500 USD).',
-                ],
-                ['Time off:', 'We provide 33 days of paid time off globally.'],
-              ].map((textArray) => (
-                <Box key={textArray[0]} sx={{ display: 'flex', alignItems: 'flex-start', mt: 1 }}>
-                  <IconImage name="yes" />
-                  <Typography variant="body2" color="text.primary" sx={{ ml: 1 }}>
-                    <span style={{ fontWeight: 700 }}>{`${textArray[0]}  `}</span>
-                    {textArray[1]}
-                  </Typography>
-                </Box>
-              ))}
-            </Grid>
-            <Grid item xs={12} sm={12} md={6} container spacing={2}>
-              <Grid item xs={12} sm={12} md={6}>
-                <Paper
-                  component={Link}
-                  href={ROUTES.handbook}
-                  noLinkStyle
-                  variant="outlined"
-                  sx={{ p: 2 }}
-                >
-                  <Typography variant="body2" fontWeight="bold" sx={{ mb: 0.5 }}>
-                    Handbook
-                  </Typography>
-                  <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
-                    See how we run the company and the way we work.
-                  </Typography>
-                  <Typography
-                    sx={(theme) => ({
-                      color: 'primary.600',
-                      ...theme.applyDarkStyles({
-                        color: 'primary.400',
-                      }),
-                    })}
-                    variant="body2"
-                    fontWeight="bold"
-                  >
-                    Learn more{' '}
-                    <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
-                  </Typography>
-                </Paper>
-              </Grid>
-              <Grid item xs={12} sm={12} md={6}>
-                <Paper
-                  component={Link}
-                  href={ROUTES.blog}
-                  noLinkStyle
-                  variant="outlined"
-                  sx={{ p: 2 }}
-                >
-                  <Typography variant="body2" fontWeight="bold" sx={{ mb: 0.5 }}>
-                    Blog
-                  </Typography>
-                  <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
-                    Check behind the scenes and news from the company.
-                  </Typography>
-                  <Typography
-                    sx={(theme) => ({
-                      color: 'primary.600',
-                      ...theme.applyDarkStyles({
-                        color: 'primary.400',
-                      }),
-                    })}
-                    variant="body2"
-                    fontWeight="bold"
-                  >
-                    Learn more{' '}
-                    <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
-                  </Typography>
-                </Paper>
-              </Grid>
-            </Grid>
+              <Typography
+                sx={(theme) => ({
+                  color: 'primary.600',
+                  ...theme.applyDarkStyles({
+                    color: 'primary.400',
+                  }),
+                })}
+                variant="body2"
+                fontWeight="bold"
+              >
+                Learn more{' '}
+                <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
+              </Typography>
+            </Paper>
           </Grid>
-        </Container>
-      </div>
+        </Grid>
+      </Section>
       {/* Open roles */}
+      <Divider />
       <Container sx={{ py: { xs: 4, md: 8 } }}>
         <div>
           <Typography variant="h2" sx={{ my: 1 }} id="open-roles">
@@ -511,8 +482,9 @@ function CareersContent() {
         </Stack>
       </Container>
       {/* Next roles */}
+      <Divider />
       {nextRolesData.length > 0 ? (
-        <Box data-mui-color-scheme="dark" sx={{ bgcolor: 'primaryDark.700' }}>
+        <Box data-mui-color-scheme="dark" sx={{ bgcolor: 'primaryDark.900' }}>
           <Container sx={{ py: { xs: 4, md: 8 } }}>
             <Box
               sx={{
@@ -567,8 +539,9 @@ function CareersContent() {
           </Container>
         </Box>
       ) : null}
+      <Divider />
       {/* Frequently asked questions */}
-      <Container sx={{ py: { xs: 4, sm: 6, md: 8 } }}>
+      <Section bg="transparent">
         <Typography variant="h2" sx={{ mb: { xs: 2, sm: 4 } }}>
           Frequently asked questions
         </Typography>
@@ -587,7 +560,7 @@ function CareersContent() {
                 borderColor: 'grey.300',
                 bgcolor: 'white',
                 ...theme.applyDarkStyles({
-                  borderColor: 'primaryDark.400',
+                  borderColor: 'primaryDark.600',
                   bgcolor: 'primaryDark.800',
                 }),
               })}
@@ -606,7 +579,7 @@ function CareersContent() {
             </Paper>
           </Grid>
         </Grid>
-      </Container>
+      </Section>
     </React.Fragment>
   );
 }
diff --git a/docs/pages/core.tsx b/docs/pages/core.tsx
index 77fe7752aa050f..96587de929e8f0 100644
--- a/docs/pages/core.tsx
+++ b/docs/pages/core.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
+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 CoreHero from 'docs/src/components/productCore/CoreHero';
 import CoreProducts from 'docs/src/components/productCore/CoreProducts';
-import MaterialHeroEnd from 'docs/src/components/productMaterial/MaterialHeroEnd';
+import CoreHeroEnd from 'docs/src/components/productCore/CoreHeroEnd';
 import References, { CORE_CUSTOMERS } from 'docs/src/components/home/References';
 import AppFooter from 'docs/src/layouts/AppFooter';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
@@ -22,8 +23,11 @@ export default function Core() {
       <main id="main-content">
         <CoreHero />
         <CoreProducts />
+        <Divider />
         <References companies={CORE_CUSTOMERS} />
-        <MaterialHeroEnd />
+        <Divider />
+        <CoreHeroEnd />
+        <Divider />
       </main>
       <AppFooter stackOverflowUrl="https://stackoverflow.com/questions/tagged/material-ui" />
     </BrandingCssVarsProvider>
diff --git a/docs/pages/design-kits.tsx b/docs/pages/design-kits.tsx
index 6931105d34d36b..f5f937f6e5e678 100644
--- a/docs/pages/design-kits.tsx
+++ b/docs/pages/design-kits.tsx
@@ -17,8 +17,8 @@ export default function DesignKits() {
   return (
     <BrandingCssVarsProvider>
       <Head
-        title="MUI in your favorite design tool"
-        description="Pick your favorite design tool to enjoy and use MUI components. Boost consistency and facilitate communication when working with developers."
+        title="Material UI in your favorite design tool"
+        description="Pick your favorite design tool to enjoy and use Material UI components. Boost consistency and facilitate communication when working with developers."
         card="/static/social-previews/designkits-preview.jpg"
       />
       <AppHeaderBanner />
@@ -26,10 +26,15 @@ export default function DesignKits() {
       <main id="main-content">
         <DesignKitHero />
         <References companies={DESIGNKITS_CUSTOMERS} />
+        <Divider />
         <DesignKitValues />
+        <Divider />
         <DesignKitDemo />
+        <Divider />
         <DesignKitFAQ />
+        <Divider />
         <Testimonials />
+        <Divider />
         <HeroEnd />
       </main>
       <Divider />
diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx
index 498cffac6346ec..d7de6eefff4ffd 100644
--- a/docs/pages/index.tsx
+++ b/docs/pages/index.tsx
@@ -50,11 +50,17 @@ export default function Home() {
       <main id="main-content">
         <Hero />
         <References companies={CORE_CUSTOMERS} />
+        <Divider />
         <ProductSuite />
+        <Divider />
         <ValueProposition />
+        <Divider />
         <DesignSystemComponents />
+        <Divider />
         <Testimonials />
+        <Divider />
         <Sponsors />
+        <Divider />
         <HeroEnd />
         <Divider />
       </main>
diff --git a/docs/pages/material-ui.tsx b/docs/pages/material-ui.tsx
index a26cd54a27b608..3d1f57f20b0706 100644
--- a/docs/pages/material-ui.tsx
+++ b/docs/pages/material-ui.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+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';
@@ -6,7 +7,7 @@ import MaterialHero from 'docs/src/components/productMaterial/MaterialHero';
 import MaterialComponents from 'docs/src/components/productMaterial/MaterialComponents';
 import MaterialTheming from 'docs/src/components/productMaterial/MaterialTheming';
 import MaterialStyling from 'docs/src/components/productMaterial/MaterialStyling';
-import MaterialHeroEnd from 'docs/src/components/productMaterial/MaterialHeroEnd';
+import CoreHeroEnd from 'docs/src/components/productCore/CoreHeroEnd';
 import References, { CORE_CUSTOMERS } from 'docs/src/components/home/References';
 import AppFooter from 'docs/src/layouts/AppFooter';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
@@ -24,10 +25,15 @@ export default function Core() {
       <main id="main-content">
         <MaterialHero />
         <References companies={CORE_CUSTOMERS} />
+        <Divider />
         <MaterialComponents />
+        <Divider />
         <MaterialTheming />
+        <Divider />
         <MaterialStyling />
-        <MaterialHeroEnd />
+        <Divider />
+        <CoreHeroEnd />
+        <Divider />
       </main>
       <AppFooter stackOverflowUrl="https://stackoverflow.com/questions/tagged/material-ui" />
     </BrandingCssVarsProvider>
diff --git a/docs/pages/pricing.tsx b/docs/pages/pricing.tsx
index 99a784ab86d131..5975681931d3c4 100644
--- a/docs/pages/pricing.tsx
+++ b/docs/pages/pricing.tsx
@@ -36,10 +36,14 @@ export default function Pricing() {
           <Container sx={{ display: { xs: 'none', md: 'block' } }}>
             <PricingTable />
           </Container>
+          <Divider />
         </LicenseTypeProvider>
-        <Testimonials />
         <PricingWhatToExpect />
+        <Divider />
         <PricingFAQ />
+        <Divider />
+        <Testimonials />
+        <Divider />
         <HeroEnd />
         <Divider />
       </main>
diff --git a/docs/pages/templates.tsx b/docs/pages/templates.tsx
index c6e3d0543efde7..2bf1fe2679db3f 100644
--- a/docs/pages/templates.tsx
+++ b/docs/pages/templates.tsx
@@ -16,7 +16,7 @@ export default function Templates() {
   return (
     <BrandingCssVarsProvider>
       <Head
-        title="Fully built templates for your app - MUI"
+        title="Fully built Material UI templates - MUI"
         description="A collection of 4.5 average rating templates, selected and curated by MUI's team of maintainers to get your projects up and running today."
         card="/static/social-previews/templates-preview.jpg"
       />
@@ -25,9 +25,13 @@ export default function Templates() {
       <main id="main-content">
         <TemplateHero />
         <References companies={TEMPLATES_CUSTOMERS} />
+        <Divider />
         <ValueProposition />
+        <Divider />
         <TemplateDemo />
+        <Divider />
         <Testimonials />
+        <Divider />
         <HeroEnd />
       </main>
       <Divider />
diff --git a/docs/pages/x.tsx b/docs/pages/x.tsx
index bf91d7744b3c23..b2bb29af5c501b 100644
--- a/docs/pages/x.tsx
+++ b/docs/pages/x.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+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';
@@ -25,11 +26,17 @@ export default function X() {
       <main id="main-content">
         <XHero />
         <References companies={ADVANCED_CUSTOMERS} />
+        <Divider />
         <XComponents />
+        <Divider />
         <XDataGrid />
+        <Divider />
         <XTheming />
+        <Divider />
         <XPlans />
+        <Divider />
         <XRoadmap />
+        <Divider />
       </main>
       <AppFooter stackOverflowUrl="https://stackoverflow.com/questions/tagged/mui-x" />
     </BrandingCssVarsProvider>
diff --git a/docs/public/static/branding/base-ui/headless-ui-dark.svg b/docs/public/static/branding/base-ui/headless-ui-dark.svg
new file mode 100644
index 00000000000000..c1ce8dd253ac64
--- /dev/null
+++ b/docs/public/static/branding/base-ui/headless-ui-dark.svg
@@ -0,0 +1,29 @@
+<svg width="116" height="37" viewBox="0 0 116 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="115" height="36" rx="7.5" fill="#14191F"/>
+<g clip-path="url(#clip0_6585_844580)">
+<mask id="mask0_6585_844580" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="11" y="10" width="93" height="17">
+<path d="M11.9922 10.5002H103.992V26.5002H11.9922V10.5002Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_6585_844580)">
+<path d="M36.8927 15.7051C35.9002 15.7051 35.1122 16.0701 34.6307 16.8291V12.9751H33.0547V23.1936H34.6307V19.2816C34.6307 17.7926 35.4477 17.1796 36.4837 17.1796C37.4762 17.1796 38.1187 17.7631 38.1187 18.8726V23.1936H39.6942V18.7121C39.6942 16.8146 38.5272 15.7051 36.8927 15.7051ZM42.2672 20.2156H48.0752C48.1042 20.0111 48.1337 19.7776 48.1337 19.5586C48.1337 17.4566 46.6452 15.7051 44.4707 15.7051C42.1797 15.7051 40.6182 17.3836 40.6182 19.5441C40.6182 21.7341 42.1797 23.3831 44.5872 23.3831C46.0172 23.3831 47.1122 22.7846 47.7832 21.7921L46.4847 21.0331C46.1347 21.5441 45.4777 21.9381 44.6022 21.9381C43.4347 21.9381 42.5152 21.3541 42.2672 20.2156ZM42.2522 18.9306C42.4712 17.8361 43.2742 17.1356 44.4562 17.1356C45.4047 17.1356 46.3237 17.6756 46.5427 18.9306H42.2532H42.2522ZM54.8917 15.8951V16.9311C54.3367 16.1721 53.4762 15.7051 52.3377 15.7051C50.3527 15.7051 48.7042 17.3691 48.7042 19.5441C48.7042 21.7041 50.3532 23.3831 52.3377 23.3831C53.4762 23.3831 54.3372 22.9161 54.8917 22.1426V23.1936H56.4677V15.8946H54.8917V15.8951ZM52.5857 21.8801C51.2727 21.8801 50.2802 20.9016 50.2802 19.5441C50.2802 18.1866 51.2727 17.2086 52.5857 17.2086C53.8992 17.2086 54.8917 18.1866 54.8917 19.5441C54.8917 20.9016 53.8992 21.8801 52.5857 21.8801ZM63.7187 12.9751V16.9311C63.1642 16.1721 62.3032 15.7051 61.1647 15.7051C59.1802 15.7051 57.5312 17.3691 57.5312 19.5441C57.5312 21.7041 59.1802 23.3831 61.1647 23.3831C62.3032 23.3831 63.1642 22.9161 63.7187 22.1426V23.1936H65.2947V12.9751H63.7187ZM61.4132 21.8801C60.0997 21.8801 59.1072 20.9016 59.1072 19.5441C59.1072 18.1866 60.0997 17.2086 61.4132 17.2086C62.7262 17.2086 63.7187 18.1866 63.7187 19.5441C63.7187 20.9016 62.7262 21.8801 61.4132 21.8801ZM66.7667 23.1936H68.3432V12.5376H66.7667V23.1936ZM71.0487 20.2156H76.8567C76.8857 20.0111 76.9152 19.7776 76.9152 19.5586C76.9152 17.4566 75.4267 15.7051 73.2522 15.7051C70.9612 15.7051 69.3997 17.3836 69.3997 19.5441C69.3997 21.7341 70.9612 23.3831 73.3687 23.3831C74.7987 23.3831 75.8932 22.7846 76.5647 21.7921L75.2657 21.0331C74.9157 21.5441 74.2592 21.9381 73.3832 21.9381C72.2162 21.9381 71.2967 21.3541 71.0487 20.2156ZM71.0337 18.9306C71.2527 17.8361 72.0557 17.1356 73.2377 17.1356C74.1862 17.1356 75.1052 17.6756 75.3242 18.9306H71.0337ZM79.0672 17.9091C79.0672 17.3841 79.5637 17.1356 80.1327 17.1356C80.7312 17.1356 81.2417 17.3981 81.5047 17.9676L82.8327 17.2231C82.3217 16.2596 81.3292 15.7051 80.1327 15.7051C78.6442 15.7051 77.4622 16.5661 77.4622 17.9386C77.4622 20.5511 81.3877 19.8216 81.3877 21.1206C81.3877 21.7046 80.8477 21.9381 80.1472 21.9381C79.3447 21.9381 78.7612 21.5441 78.5277 20.8871L77.1702 21.6751C77.6372 22.7261 78.6882 23.3831 80.1472 23.3831C81.7232 23.3831 82.9932 22.5951 82.9932 21.1351C82.9932 18.4351 79.0672 19.2376 79.0672 17.9091ZM84.9872 17.9091C84.9872 17.3841 85.4837 17.1356 86.0527 17.1356C86.6507 17.1356 87.1617 17.3981 87.4242 17.9676L88.7522 17.2231C88.2417 16.2596 87.2492 15.7051 86.0527 15.7051C84.5642 15.7051 83.3822 16.5661 83.3822 17.9386C83.3822 20.5511 87.3077 19.8216 87.3077 21.1206C87.3077 21.7046 86.7677 21.9381 86.0672 21.9381C85.2647 21.9381 84.6807 21.5441 84.4472 20.8871L83.0902 21.6751C83.5572 22.7261 84.6077 23.3831 86.0672 23.3831C87.6432 23.3831 88.9127 22.5951 88.9127 21.1351C88.9127 18.4351 84.9872 19.2376 84.9872 17.9091ZM97.0082 21.5101C98.1017 21.5101 98.9112 20.8561 98.9112 19.7836V16.4386H97.9312V19.7056C97.9312 20.1886 97.6757 20.5506 97.0082 20.5506C96.3407 20.5506 96.0847 20.1886 96.0847 19.7056V16.4381H95.1122V19.7836C95.1122 20.8561 95.9217 21.5101 97.0082 21.5101ZM99.9357 16.4381V21.4101H100.916V16.4381H99.9357Z" fill="#6AB8FE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M100.529 14.0533H95.4571C94.919 14.0535 94.403 14.2673 94.0225 14.6478C93.642 15.0282 93.4282 15.5442 93.4281 16.0823V21.1563C93.4282 21.6944 93.642 22.2104 94.0225 22.5909C94.403 22.9714 94.919 23.1852 95.4571 23.1853H100.529C101.067 23.1852 101.583 22.9714 101.964 22.5909C102.344 22.2104 102.558 21.6944 102.558 21.1563V16.0828C102.558 15.8163 102.506 15.5524 102.404 15.3061C102.302 15.0599 102.152 14.8361 101.964 14.6476C101.776 14.4591 101.552 14.3096 101.306 14.2075C101.059 14.1055 100.796 14.0534 100.529 14.0533ZM95.4571 13.0383C95.0574 13.0384 94.6616 13.1172 94.2924 13.2702C93.9232 13.4232 93.5877 13.6474 93.3051 13.9301C93.0226 14.2128 92.7984 14.5483 92.6455 14.9176C92.4927 15.2869 92.414 15.6827 92.4141 16.0823V21.1563C92.414 21.556 92.4927 21.9518 92.6455 22.3211C92.7984 22.6903 93.0226 23.0259 93.3051 23.3086C93.5877 23.5912 93.9232 23.8155 94.2924 23.9685C94.6616 24.1215 95.0574 24.2003 95.4571 24.2003H100.529C100.929 24.2003 101.325 24.1216 101.694 23.9686C102.063 23.8156 102.399 23.5914 102.681 23.3087C102.964 23.0261 103.188 22.6905 103.341 22.3212C103.494 21.9519 103.573 21.5561 103.573 21.1563V16.0828C103.573 15.6831 103.494 15.2872 103.341 14.9178C103.188 14.5485 102.964 14.2128 102.681 13.9301C102.399 13.6474 102.063 13.4231 101.694 13.2701C101.325 13.1171 100.929 13.0383 100.529 13.0383H95.4571Z" fill="#7064F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M95.4571 14.0533H100.529C101.067 14.0535 101.583 14.2673 101.964 14.6478C102.344 15.0282 102.558 15.5442 102.558 16.0823V21.1563C102.558 21.6944 102.344 22.2104 101.964 22.5909C101.583 22.9714 101.067 23.1852 100.529 23.1853H95.4571C94.919 23.1852 94.403 22.9714 94.0225 22.5909C93.642 22.2104 93.4282 21.6944 93.4281 21.1563V16.0828C93.428 15.8163 93.4804 15.5524 93.5824 15.3061C93.6843 15.0599 93.8337 14.8361 94.0221 14.6476C94.2106 14.4591 94.4342 14.3096 94.6805 14.2075C94.9267 14.1055 95.1905 14.0534 95.4571 14.0533ZM92.4141 16.0823C92.414 15.6827 92.4927 15.2869 92.6455 14.9176C92.7984 14.5483 93.0226 14.2128 93.3051 13.9301C93.5877 13.6474 93.9232 13.4232 94.2924 13.2702C94.6616 13.1172 95.0574 13.0384 95.4571 13.0383H100.529C100.929 13.0383 101.325 13.1171 101.694 13.2701C102.063 13.423 102.399 13.6473 102.681 13.9299C102.964 14.2126 103.188 14.5482 103.341 14.9175C103.494 15.2868 103.573 15.6826 103.573 16.0823V21.1563C103.573 21.5561 103.494 21.9519 103.341 22.3212C103.188 22.6905 102.964 23.0261 102.681 23.3087C102.399 23.5914 102.063 23.8156 101.694 23.9686C101.325 24.1216 100.929 24.2003 100.529 24.2003H95.4571C95.0574 24.2003 94.6616 24.1215 94.2924 23.9685C93.9232 23.8155 93.5877 23.5912 93.3051 23.3086C93.0226 23.0259 92.7984 22.6903 92.6455 22.3211C92.4927 21.9518 92.414 21.556 92.4141 21.1563V16.0828V16.0823Z" fill="#6AB8FE"/>
+<path d="M15.2542 20.4415L25.0141 17.1825C24.8191 15.9625 24.6801 15.1475 24.5191 14.5255C24.3456 13.8565 24.2081 13.6775 24.1542 13.6155C23.966 13.4001 23.7317 13.2299 23.4686 13.1175C23.3926 13.085 23.1796 13.0095 22.4906 13.051C21.7616 13.095 20.8046 13.244 19.2891 13.484C17.7741 13.724 16.8177 13.8785 16.1112 14.0615C15.4427 14.235 15.2632 14.373 15.2012 14.427C14.9862 14.6155 14.8162 14.8495 14.7037 15.1125C14.6712 15.1885 14.5957 15.4015 14.6372 16.091C14.6812 16.82 14.8302 17.7775 15.0702 19.293C15.1372 19.718 15.1977 20.098 15.2542 20.4415Z" fill="url(#paint0_linear_6585_844580)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5584 19.6902C12.0944 16.7582 11.8619 15.2922 12.3649 14.1152C12.6271 13.5013 13.0243 12.9545 13.5269 12.5152C14.4904 11.6737 15.9559 11.4417 18.8869 10.9772C21.8189 10.5122 23.2844 10.2802 24.4619 10.7832C25.0754 11.0455 25.6219 11.4427 26.0609 11.9452C26.9029 12.9092 27.1349 14.3752 27.5989 17.3077C28.0634 20.2397 28.2954 21.7062 27.7924 22.8827C27.5303 23.4965 27.1333 24.0434 26.6309 24.4827C25.6674 25.3247 24.2014 25.5567 21.2699 26.0212C18.3389 26.4857 16.8729 26.7177 15.6964 26.2147C15.0829 25.9524 14.5363 25.5552 14.0974 25.0527C13.2554 24.0887 13.0229 22.6227 12.5584 19.6902ZM17.7289 24.8972C18.5139 24.8497 19.5249 24.6912 21.0214 24.4542C22.5184 24.2172 23.5279 24.0552 24.2899 23.8577C25.0274 23.6662 25.3674 23.4797 25.5869 23.2877C25.9098 23.0053 26.165 22.6538 26.3334 22.2592C26.4484 21.9912 26.5209 21.6102 26.4749 20.8492C26.4274 20.0642 26.2689 19.0527 26.0319 17.5557C25.7949 16.0587 25.6334 15.0482 25.4359 14.2867C25.2444 13.5487 25.0574 13.2087 24.8659 12.9892C24.5837 12.6661 24.2323 12.4108 23.8379 12.2422C23.5699 12.1272 23.1889 12.0547 22.4279 12.1007C21.6429 12.1482 20.6324 12.3067 19.1354 12.5437C17.6389 12.7812 16.6289 12.9427 15.8674 13.1402C15.1294 13.3317 14.7899 13.5187 14.5704 13.7102C14.2473 13.9926 13.992 14.3441 13.8234 14.7387C13.7089 15.0067 13.6364 15.3877 13.6824 16.1487C13.7299 16.9342 13.8879 17.9452 14.1254 19.4422C14.3624 20.9392 14.5239 21.9497 14.7214 22.7112C14.9129 23.4492 15.0994 23.7892 15.2914 24.0087C15.5736 24.3318 15.925 24.5871 16.3194 24.7557C16.5874 24.8707 16.9674 24.9432 17.7289 24.8972Z" fill="url(#paint1_linear_6585_844580)"/>
+</g>
+</g>
+<rect x="0.5" y="0.5" width="115" height="36" rx="7.5" stroke="#2F3A46" stroke-dasharray="4 4"/>
+<defs>
+<linearGradient id="paint0_linear_6585_844580" x1="18.3517" y1="10.5" x2="20.8912" y2="26.3665" gradientUnits="userSpaceOnUse">
+<stop stop-color="#66E3FF"/>
+<stop offset="1" stop-color="#7064F9"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6585_844580" x1="18.3469" y1="10.5002" x2="20.8864" y2="26.3667" gradientUnits="userSpaceOnUse">
+<stop stop-color="#66E3FF"/>
+<stop offset="1" stop-color="#7064F9"/>
+</linearGradient>
+<clipPath id="clip0_6585_844580">
+<rect width="92" height="16" fill="white" transform="translate(12 10.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/docs/public/static/branding/base-ui/headless-ui.svg b/docs/public/static/branding/base-ui/headless-ui.svg
new file mode 100644
index 00000000000000..8bb22cbb239e82
--- /dev/null
+++ b/docs/public/static/branding/base-ui/headless-ui.svg
@@ -0,0 +1,29 @@
+<svg width="116" height="37" viewBox="0 0 116 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="115" height="36" rx="7.5" fill="white"/>
+<g clip-path="url(#clip0_6585_829046)">
+<mask id="mask0_6585_829046" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="11" y="10" width="93" height="17">
+<path d="M11.9922 10.5002H103.992V26.5002H11.9922V10.5002Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_6585_829046)">
+<path d="M36.8927 15.7051C35.9002 15.7051 35.1122 16.0701 34.6307 16.8291V12.9751H33.0547V23.1936H34.6307V19.2816C34.6307 17.7926 35.4477 17.1796 36.4837 17.1796C37.4762 17.1796 38.1187 17.7631 38.1187 18.8726V23.1936H39.6942V18.7121C39.6942 16.8146 38.5272 15.7051 36.8927 15.7051ZM42.2672 20.2156H48.0752C48.1042 20.0111 48.1337 19.7776 48.1337 19.5586C48.1337 17.4566 46.6452 15.7051 44.4707 15.7051C42.1797 15.7051 40.6182 17.3836 40.6182 19.5441C40.6182 21.7341 42.1797 23.3831 44.5872 23.3831C46.0172 23.3831 47.1122 22.7846 47.7832 21.7921L46.4847 21.0331C46.1347 21.5441 45.4777 21.9381 44.6022 21.9381C43.4347 21.9381 42.5152 21.3541 42.2672 20.2156ZM42.2522 18.9306C42.4712 17.8361 43.2742 17.1356 44.4562 17.1356C45.4047 17.1356 46.3237 17.6756 46.5427 18.9306H42.2532H42.2522ZM54.8917 15.8951V16.9311C54.3367 16.1721 53.4762 15.7051 52.3377 15.7051C50.3527 15.7051 48.7042 17.3691 48.7042 19.5441C48.7042 21.7041 50.3532 23.3831 52.3377 23.3831C53.4762 23.3831 54.3372 22.9161 54.8917 22.1426V23.1936H56.4677V15.8946H54.8917V15.8951ZM52.5857 21.8801C51.2727 21.8801 50.2802 20.9016 50.2802 19.5441C50.2802 18.1866 51.2727 17.2086 52.5857 17.2086C53.8992 17.2086 54.8917 18.1866 54.8917 19.5441C54.8917 20.9016 53.8992 21.8801 52.5857 21.8801ZM63.7187 12.9751V16.9311C63.1642 16.1721 62.3032 15.7051 61.1647 15.7051C59.1802 15.7051 57.5312 17.3691 57.5312 19.5441C57.5312 21.7041 59.1802 23.3831 61.1647 23.3831C62.3032 23.3831 63.1642 22.9161 63.7187 22.1426V23.1936H65.2947V12.9751H63.7187ZM61.4132 21.8801C60.0997 21.8801 59.1072 20.9016 59.1072 19.5441C59.1072 18.1866 60.0997 17.2086 61.4132 17.2086C62.7262 17.2086 63.7187 18.1866 63.7187 19.5441C63.7187 20.9016 62.7262 21.8801 61.4132 21.8801ZM66.7667 23.1936H68.3432V12.5376H66.7667V23.1936ZM71.0487 20.2156H76.8567C76.8857 20.0111 76.9152 19.7776 76.9152 19.5586C76.9152 17.4566 75.4267 15.7051 73.2522 15.7051C70.9612 15.7051 69.3997 17.3836 69.3997 19.5441C69.3997 21.7341 70.9612 23.3831 73.3687 23.3831C74.7987 23.3831 75.8932 22.7846 76.5647 21.7921L75.2657 21.0331C74.9157 21.5441 74.2592 21.9381 73.3832 21.9381C72.2162 21.9381 71.2967 21.3541 71.0487 20.2156ZM71.0337 18.9306C71.2527 17.8361 72.0557 17.1356 73.2377 17.1356C74.1862 17.1356 75.1052 17.6756 75.3242 18.9306H71.0337ZM79.0672 17.9091C79.0672 17.3841 79.5637 17.1356 80.1327 17.1356C80.7312 17.1356 81.2417 17.3981 81.5047 17.9676L82.8327 17.2231C82.3217 16.2596 81.3292 15.7051 80.1327 15.7051C78.6442 15.7051 77.4622 16.5661 77.4622 17.9386C77.4622 20.5511 81.3877 19.8216 81.3877 21.1206C81.3877 21.7046 80.8477 21.9381 80.1472 21.9381C79.3447 21.9381 78.7612 21.5441 78.5277 20.8871L77.1702 21.6751C77.6372 22.7261 78.6882 23.3831 80.1472 23.3831C81.7232 23.3831 82.9932 22.5951 82.9932 21.1351C82.9932 18.4351 79.0672 19.2376 79.0672 17.9091ZM84.9872 17.9091C84.9872 17.3841 85.4837 17.1356 86.0527 17.1356C86.6507 17.1356 87.1617 17.3981 87.4242 17.9676L88.7522 17.2231C88.2417 16.2596 87.2492 15.7051 86.0527 15.7051C84.5642 15.7051 83.3822 16.5661 83.3822 17.9386C83.3822 20.5511 87.3077 19.8216 87.3077 21.1206C87.3077 21.7046 86.7677 21.9381 86.0672 21.9381C85.2647 21.9381 84.6807 21.5441 84.4472 20.8871L83.0902 21.6751C83.5572 22.7261 84.6077 23.3831 86.0672 23.3831C87.6432 23.3831 88.9127 22.5951 88.9127 21.1351C88.9127 18.4351 84.9872 19.2376 84.9872 17.9091ZM97.0082 21.5101C98.1017 21.5101 98.9112 20.8561 98.9112 19.7836V16.4386H97.9312V19.7056C97.9312 20.1886 97.6757 20.5506 97.0082 20.5506C96.3407 20.5506 96.0847 20.1886 96.0847 19.7056V16.4381H95.1122V19.7836C95.1122 20.8561 95.9217 21.5101 97.0082 21.5101ZM99.9357 16.4381V21.4101H100.916V16.4381H99.9357Z" fill="#7064F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M100.529 14.0533H95.4571C94.919 14.0535 94.403 14.2673 94.0225 14.6478C93.642 15.0282 93.4282 15.5442 93.4281 16.0823V21.1563C93.4282 21.6944 93.642 22.2104 94.0225 22.5909C94.403 22.9714 94.919 23.1852 95.4571 23.1853H100.529C101.067 23.1852 101.583 22.9714 101.964 22.5909C102.344 22.2104 102.558 21.6944 102.558 21.1563V16.0828C102.558 15.8163 102.506 15.5524 102.404 15.3061C102.302 15.0599 102.152 14.8361 101.964 14.6476C101.776 14.4591 101.552 14.3096 101.306 14.2075C101.059 14.1055 100.796 14.0534 100.529 14.0533ZM95.4571 13.0383C95.0574 13.0384 94.6616 13.1172 94.2924 13.2702C93.9232 13.4232 93.5877 13.6474 93.3051 13.9301C93.0226 14.2128 92.7984 14.5483 92.6455 14.9176C92.4927 15.2869 92.414 15.6827 92.4141 16.0823V21.1563C92.414 21.556 92.4927 21.9518 92.6455 22.3211C92.7984 22.6903 93.0226 23.0259 93.3051 23.3086C93.5877 23.5912 93.9232 23.8155 94.2924 23.9685C94.6616 24.1215 95.0574 24.2003 95.4571 24.2003H100.529C100.929 24.2003 101.325 24.1216 101.694 23.9686C102.063 23.8156 102.399 23.5914 102.681 23.3087C102.964 23.0261 103.188 22.6905 103.341 22.3212C103.494 21.9519 103.573 21.5561 103.573 21.1563V16.0828C103.573 15.6831 103.494 15.2872 103.341 14.9178C103.188 14.5485 102.964 14.2128 102.681 13.9301C102.399 13.6474 102.063 13.4231 101.694 13.2701C101.325 13.1171 100.929 13.0383 100.529 13.0383H95.4571Z" fill="#7064F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M95.4571 14.0533H100.529C101.067 14.0535 101.583 14.2673 101.964 14.6478C102.344 15.0282 102.558 15.5442 102.558 16.0823V21.1563C102.558 21.6944 102.344 22.2104 101.964 22.5909C101.583 22.9714 101.067 23.1852 100.529 23.1853H95.4571C94.919 23.1852 94.403 22.9714 94.0225 22.5909C93.642 22.2104 93.4282 21.6944 93.4281 21.1563V16.0828C93.428 15.8163 93.4804 15.5524 93.5824 15.3061C93.6843 15.0599 93.8337 14.8361 94.0221 14.6476C94.2106 14.4591 94.4342 14.3096 94.6805 14.2075C94.9267 14.1055 95.1905 14.0534 95.4571 14.0533ZM92.4141 16.0823C92.414 15.6827 92.4927 15.2869 92.6455 14.9176C92.7984 14.5483 93.0226 14.2128 93.3051 13.9301C93.5877 13.6474 93.9232 13.4232 94.2924 13.2702C94.6616 13.1172 95.0574 13.0384 95.4571 13.0383H100.529C100.929 13.0383 101.325 13.1171 101.694 13.2701C102.063 13.423 102.399 13.6473 102.681 13.9299C102.964 14.2126 103.188 14.5482 103.341 14.9175C103.494 15.2868 103.573 15.6826 103.573 16.0823V21.1563C103.573 21.5561 103.494 21.9519 103.341 22.3212C103.188 22.6905 102.964 23.0261 102.681 23.3087C102.399 23.5914 102.063 23.8156 101.694 23.9686C101.325 24.1216 100.929 24.2003 100.529 24.2003H95.4571C95.0574 24.2003 94.6616 24.1215 94.2924 23.9685C93.9232 23.8155 93.5877 23.5912 93.3051 23.3086C93.0226 23.0259 92.7984 22.6903 92.6455 22.3211C92.4927 21.9518 92.414 21.556 92.4141 21.1563V16.0828V16.0823Z" fill="#7064F9"/>
+<path d="M15.2542 20.4415L25.0141 17.1825C24.8191 15.9625 24.6801 15.1475 24.5191 14.5255C24.3456 13.8565 24.2081 13.6775 24.1542 13.6155C23.966 13.4001 23.7317 13.2299 23.4686 13.1175C23.3926 13.085 23.1796 13.0095 22.4906 13.051C21.7616 13.095 20.8046 13.244 19.2891 13.484C17.7741 13.724 16.8177 13.8785 16.1112 14.0615C15.4427 14.235 15.2632 14.373 15.2012 14.427C14.9862 14.6155 14.8162 14.8495 14.7037 15.1125C14.6712 15.1885 14.5957 15.4015 14.6372 16.091C14.6812 16.82 14.8302 17.7775 15.0702 19.293C15.1372 19.718 15.1977 20.098 15.2542 20.4415Z" fill="url(#paint0_linear_6585_829046)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5584 19.6902C12.0944 16.7582 11.8619 15.2922 12.3649 14.1152C12.6271 13.5013 13.0243 12.9545 13.5269 12.5152C14.4904 11.6737 15.9559 11.4417 18.8869 10.9772C21.8189 10.5122 23.2844 10.2802 24.4619 10.7832C25.0754 11.0455 25.6219 11.4427 26.0609 11.9452C26.9029 12.9092 27.1349 14.3752 27.5989 17.3077C28.0634 20.2397 28.2954 21.7062 27.7924 22.8827C27.5303 23.4965 27.1333 24.0434 26.6309 24.4827C25.6674 25.3247 24.2014 25.5567 21.2699 26.0212C18.3389 26.4857 16.8729 26.7177 15.6964 26.2147C15.0829 25.9524 14.5363 25.5552 14.0974 25.0527C13.2554 24.0887 13.0229 22.6227 12.5584 19.6902ZM17.7289 24.8972C18.5139 24.8497 19.5249 24.6912 21.0214 24.4542C22.5184 24.2172 23.5279 24.0552 24.2899 23.8577C25.0274 23.6662 25.3674 23.4797 25.5869 23.2877C25.9098 23.0053 26.165 22.6538 26.3334 22.2592C26.4484 21.9912 26.5209 21.6102 26.4749 20.8492C26.4274 20.0642 26.2689 19.0527 26.0319 17.5557C25.7949 16.0587 25.6334 15.0482 25.4359 14.2867C25.2444 13.5487 25.0574 13.2087 24.8659 12.9892C24.5837 12.6661 24.2323 12.4108 23.8379 12.2422C23.5699 12.1272 23.1889 12.0547 22.4279 12.1007C21.6429 12.1482 20.6324 12.3067 19.1354 12.5437C17.6389 12.7812 16.6289 12.9427 15.8674 13.1402C15.1294 13.3317 14.7899 13.5187 14.5704 13.7102C14.2473 13.9926 13.992 14.3441 13.8234 14.7387C13.7089 15.0067 13.6364 15.3877 13.6824 16.1487C13.7299 16.9342 13.8879 17.9452 14.1254 19.4422C14.3624 20.9392 14.5239 21.9497 14.7214 22.7112C14.9129 23.4492 15.0994 23.7892 15.2914 24.0087C15.5736 24.3318 15.925 24.5871 16.3194 24.7557C16.5874 24.8707 16.9674 24.9432 17.7289 24.8972Z" fill="url(#paint1_linear_6585_829046)"/>
+</g>
+</g>
+<rect x="0.5" y="0.5" width="115" height="36" rx="7.5" stroke="#E0E3E7" stroke-dasharray="4 4"/>
+<defs>
+<linearGradient id="paint0_linear_6585_829046" x1="18.3517" y1="10.5" x2="20.8912" y2="26.3665" gradientUnits="userSpaceOnUse">
+<stop stop-color="#66E3FF"/>
+<stop offset="1" stop-color="#7064F9"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6585_829046" x1="18.3469" y1="10.5002" x2="20.8864" y2="26.3667" gradientUnits="userSpaceOnUse">
+<stop stop-color="#66E3FF"/>
+<stop offset="1" stop-color="#7064F9"/>
+</linearGradient>
+<clipPath id="clip0_6585_829046">
+<rect width="92" height="16" fill="white" transform="translate(12 10.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/docs/public/static/branding/base-ui/nhost-2x.jpg b/docs/public/static/branding/base-ui/nhost-2x.jpg
new file mode 100644
index 00000000000000..213722ec01957d
Binary files /dev/null and b/docs/public/static/branding/base-ui/nhost-2x.jpg differ
diff --git a/docs/public/static/branding/base-ui/nhost.jpg b/docs/public/static/branding/base-ui/nhost.jpg
new file mode 100644
index 00000000000000..e9fc65018deee4
Binary files /dev/null and b/docs/public/static/branding/base-ui/nhost.jpg differ
diff --git a/docs/public/static/branding/base-ui/radix-dark.svg b/docs/public/static/branding/base-ui/radix-dark.svg
new file mode 100644
index 00000000000000..ba98b6a5ed315e
--- /dev/null
+++ b/docs/public/static/branding/base-ui/radix-dark.svg
@@ -0,0 +1,21 @@
+<svg width="77" height="37" viewBox="0 0 77 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="76" height="36" rx="7.5" fill="#14191F"/>
+<g clip-path="url(#clip0_6585_844566)">
+<path d="M19.1984 25.9999C16.5475 25.9999 14.3984 23.8509 14.3984 21.1999C14.3984 18.5489 16.5475 16.3999 19.1984 16.3999V25.9999Z" fill="white"/>
+<path d="M19.1984 11H14.3984V15.8H19.1984V11Z" fill="white"/>
+<path d="M22.2008 15.8C23.5262 15.8 24.6008 14.7255 24.6008 13.4C24.6008 12.0745 23.5262 11 22.2008 11C20.8753 11 19.8008 12.0745 19.8008 13.4C19.8008 14.7255 20.8753 15.8 22.2008 15.8Z" fill="white"/>
+</g>
+<g clip-path="url(#clip1_6585_844566)">
+<path d="M43.0801 23.6469H44.7179C44.5988 23.0242 44.538 22.4319 44.538 21.7181V18.7414C44.538 16.7366 43.3932 15.7495 41.3393 15.7495C39.4789 15.7495 38.2138 16.7215 38.0501 18.3769H39.8807C39.9403 17.6631 40.4463 17.1923 41.2798 17.1923C42.1431 17.1923 42.7086 17.6479 42.7086 18.5895V18.954L40.4463 19.2122C38.9134 19.3944 37.7227 20.0323 37.7227 21.5814C37.7227 22.9786 38.7942 23.8139 40.2677 23.8139C41.4733 23.8139 42.4901 23.3127 42.9116 22.4319C42.9301 22.9596 43.0801 23.6469 43.0801 23.6469ZM40.7886 22.4623C40.0296 22.4623 39.6128 22.0826 39.6128 21.4751C39.6128 20.6702 40.223 20.4879 41.0268 20.3816L42.7086 20.1842V20.655C42.7086 21.87 41.771 22.4623 40.7886 22.4623ZM51.0236 23.6469H52.899V12.7144H50.9939V17.1923C50.6367 16.4177 49.7735 15.7495 48.5977 15.7495C46.5538 15.7495 45.1352 17.4049 45.1352 19.7893C45.1352 22.1889 46.5538 23.8292 48.5977 23.8292C49.7437 23.8292 50.6515 23.1912 51.0236 22.4167V23.6469ZM51.0385 19.926C51.0385 21.4295 50.339 22.4016 49.1334 22.4016C47.8981 22.4016 47.1194 21.384 47.1194 19.7893C47.1194 18.2098 47.8981 17.1771 49.1334 17.1771C50.339 17.1771 51.0385 18.1491 51.0385 19.6526V19.926ZM54.0115 14.6256H56.0357V12.7272H54.0115V14.6256ZM54.071 23.6469H55.9761V15.9317H54.071V23.6469ZM58.3554 23.6469L60.2456 21.0043L62.1209 23.6469H64.3088L61.3767 19.607L64.0707 15.9317H62.0316L60.3497 18.3161L58.6828 15.9317H56.4949L59.2186 19.6982L56.3163 23.6469H58.3554Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.8728 23.6427V19.7963H33.3705L35.7187 23.6427H37.8075L35.2289 19.5082C36.3957 19.1337 37.4185 18.1829 37.4185 16.5838C37.4185 14.4806 35.9425 13.3569 33.4724 13.3569H29V23.6427H30.8728ZM30.8728 14.8695V18.2981H33.3849C34.8111 18.2981 35.5314 17.7075 35.5314 16.5838C35.5314 15.4602 34.7468 14.8695 33.2564 14.8695H30.8728Z" fill="white"/>
+</g>
+<rect x="0.5" y="0.5" width="76" height="36" rx="7.5" stroke="#2F3A46" stroke-dasharray="4 4"/>
+<defs>
+<clipPath id="clip0_6585_844566">
+<rect width="15" height="15" fill="white" transform="translate(12 11)"/>
+</clipPath>
+<clipPath id="clip1_6585_844566">
+<rect width="36" height="11.5715" fill="white" transform="translate(29 12.7144)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/docs/public/static/branding/base-ui/radix.svg b/docs/public/static/branding/base-ui/radix.svg
new file mode 100644
index 00000000000000..082a5c84c6cde9
--- /dev/null
+++ b/docs/public/static/branding/base-ui/radix.svg
@@ -0,0 +1,21 @@
+<svg width="77" height="37" viewBox="0 0 77 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="76" height="36" rx="7.5" fill="white"/>
+<g clip-path="url(#clip0_6585_829032)">
+<path d="M19.1984 25.9999C16.5475 25.9999 14.3984 23.8509 14.3984 21.1999C14.3984 18.5489 16.5475 16.3999 19.1984 16.3999V25.9999Z" fill="#1D1D1D"/>
+<path d="M19.1984 11H14.3984V15.8H19.1984V11Z" fill="#1D1D1D"/>
+<path d="M22.2008 15.8C23.5262 15.8 24.6008 14.7255 24.6008 13.4C24.6008 12.0745 23.5262 11 22.2008 11C20.8753 11 19.8008 12.0745 19.8008 13.4C19.8008 14.7255 20.8753 15.8 22.2008 15.8Z" fill="#1D1D1D"/>
+</g>
+<g clip-path="url(#clip1_6585_829032)">
+<path d="M43.0801 23.6469H44.7179C44.5988 23.0242 44.538 22.4319 44.538 21.7181V18.7414C44.538 16.7366 43.3932 15.7495 41.3393 15.7495C39.4789 15.7495 38.2138 16.7215 38.0501 18.3769H39.8807C39.9403 17.6631 40.4463 17.1923 41.2798 17.1923C42.1431 17.1923 42.7086 17.6479 42.7086 18.5895V18.954L40.4463 19.2122C38.9134 19.3944 37.7227 20.0323 37.7227 21.5814C37.7227 22.9786 38.7942 23.8139 40.2677 23.8139C41.4733 23.8139 42.4901 23.3127 42.9116 22.4319C42.9301 22.9596 43.0801 23.6469 43.0801 23.6469ZM40.7886 22.4623C40.0296 22.4623 39.6128 22.0826 39.6128 21.4751C39.6128 20.6702 40.223 20.4879 41.0268 20.3816L42.7086 20.1842V20.655C42.7086 21.87 41.771 22.4623 40.7886 22.4623ZM51.0236 23.6469H52.899V12.7144H50.9939V17.1923C50.6367 16.4177 49.7735 15.7495 48.5977 15.7495C46.5538 15.7495 45.1352 17.4049 45.1352 19.7893C45.1352 22.1889 46.5538 23.8292 48.5977 23.8292C49.7437 23.8292 50.6515 23.1912 51.0236 22.4167V23.6469ZM51.0385 19.926C51.0385 21.4295 50.339 22.4016 49.1334 22.4016C47.8981 22.4016 47.1194 21.384 47.1194 19.7893C47.1194 18.2098 47.8981 17.1771 49.1334 17.1771C50.339 17.1771 51.0385 18.1491 51.0385 19.6526V19.926ZM54.0115 14.6256H56.0357V12.7272H54.0115V14.6256ZM54.071 23.6469H55.9761V15.9317H54.071V23.6469ZM58.3554 23.6469L60.2456 21.0043L62.1209 23.6469H64.3088L61.3767 19.607L64.0707 15.9317H62.0316L60.3497 18.3161L58.6828 15.9317H56.4949L59.2186 19.6982L56.3163 23.6469H58.3554Z" fill="#1D1D1D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.8728 23.6427V19.7963H33.3705L35.7187 23.6427H37.8075L35.2289 19.5082C36.3957 19.1337 37.4185 18.1829 37.4185 16.5838C37.4185 14.4806 35.9425 13.3569 33.4724 13.3569H29V23.6427H30.8728ZM30.8728 14.8695V18.2981H33.3849C34.8111 18.2981 35.5314 17.7075 35.5314 16.5838C35.5314 15.4602 34.7468 14.8695 33.2564 14.8695H30.8728Z" fill="#1D1D1D"/>
+</g>
+<rect x="0.5" y="0.5" width="76" height="36" rx="7.5" stroke="#E0E3E7" stroke-dasharray="4 4"/>
+<defs>
+<clipPath id="clip0_6585_829032">
+<rect width="15" height="15" fill="white" transform="translate(12 11)"/>
+</clipPath>
+<clipPath id="clip1_6585_829032">
+<rect width="36" height="11.5715" fill="white" transform="translate(29 12.7144)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/docs/public/static/branding/base-ui/react-aria-dark.svg b/docs/public/static/branding/base-ui/react-aria-dark.svg
new file mode 100644
index 00000000000000..0b9f6d55fcca35
--- /dev/null
+++ b/docs/public/static/branding/base-ui/react-aria-dark.svg
@@ -0,0 +1,15 @@
+<svg width="113" height="37" viewBox="0 0 113 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="112" height="36" rx="7.5" fill="#14191F"/>
+<g clip-path="url(#clip0_6585_844574)">
+<path d="M23.4023 10.7002H30.0023V26.3001L23.4023 10.7002Z" fill="#E1251B"/>
+<path d="M18.66 10.7007H12V26.3006L18.66 10.7007Z" fill="#E1251B"/>
+<path d="M21.0011 16.4607L25.2611 26.3006H22.5011L21.2411 23.1806H18.1211L21.0011 16.4607Z" fill="#E1251B"/>
+</g>
+<path d="M36.786 24H35.204V14.228H39.418C40.2953 14.228 40.986 14.494 41.49 15.026C41.994 15.5487 42.246 16.2627 42.246 17.168C42.246 17.868 42.0827 18.4513 41.756 18.918C41.4387 19.3753 40.9673 19.6973 40.342 19.884L42.456 24H40.692L38.732 20.052H36.786V24ZM39.306 18.722C39.7073 18.722 40.02 18.6193 40.244 18.414C40.468 18.1993 40.58 17.896 40.58 17.504V16.832C40.58 16.44 40.468 16.1413 40.244 15.936C40.02 15.7213 39.7073 15.614 39.306 15.614H36.786V18.722H39.306ZM46.9168 24.168C46.3941 24.168 45.9274 24.0793 45.5168 23.902C45.1061 23.7247 44.7561 23.4727 44.4668 23.146C44.1774 22.81 43.9534 22.4087 43.7948 21.942C43.6454 21.466 43.5708 20.9387 43.5708 20.36C43.5708 19.7813 43.6454 19.2587 43.7948 18.792C43.9534 18.316 44.1774 17.9147 44.4668 17.588C44.7561 17.252 45.1061 16.9953 45.5168 16.818C45.9274 16.6407 46.3941 16.552 46.9168 16.552C47.4488 16.552 47.9154 16.6453 48.3168 16.832C48.7274 17.0187 49.0681 17.28 49.3388 17.616C49.6094 17.9427 49.8101 18.3253 49.9408 18.764C50.0808 19.2027 50.1508 19.674 50.1508 20.178V20.752H45.1528V20.99C45.1528 21.55 45.3161 22.012 45.6428 22.376C45.9788 22.7307 46.4548 22.908 47.0708 22.908C47.5188 22.908 47.8968 22.81 48.2048 22.614C48.5128 22.418 48.7741 22.152 48.9888 21.816L49.8848 22.698C49.6141 23.146 49.2221 23.5053 48.7088 23.776C48.1954 24.0373 47.5981 24.168 46.9168 24.168ZM46.9168 17.742C46.6554 17.742 46.4128 17.7887 46.1888 17.882C45.9741 17.9753 45.7874 18.106 45.6288 18.274C45.4794 18.442 45.3628 18.6427 45.2788 18.876C45.1948 19.1093 45.1528 19.366 45.1528 19.646V19.744H48.5408V19.604C48.5408 19.044 48.3961 18.596 48.1068 18.26C47.8174 17.9147 47.4208 17.742 46.9168 17.742ZM57.174 24C56.7727 24 56.4647 23.888 56.25 23.664C56.0354 23.4307 55.9047 23.1367 55.858 22.782H55.788C55.648 23.2393 55.3914 23.5847 55.018 23.818C54.6447 24.0513 54.192 24.168 53.66 24.168C52.904 24.168 52.3207 23.972 51.91 23.58C51.5087 23.188 51.308 22.6607 51.308 21.998C51.308 21.27 51.5694 20.724 52.092 20.36C52.624 19.996 53.3987 19.814 54.416 19.814H55.732V19.198C55.732 18.75 55.6107 18.4047 55.368 18.162C55.1254 17.9193 54.7474 17.798 54.234 17.798C53.8047 17.798 53.4547 17.8913 53.184 18.078C52.9134 18.2647 52.6847 18.5027 52.498 18.792L51.588 17.966C51.8307 17.5553 52.1714 17.2193 52.61 16.958C53.0487 16.6873 53.6227 16.552 54.332 16.552C55.2747 16.552 55.998 16.7713 56.502 17.21C57.006 17.6487 57.258 18.2787 57.258 19.1V22.754H58.028V24H57.174ZM54.094 23.006C54.57 23.006 54.962 22.9033 55.27 22.698C55.578 22.4833 55.732 22.1987 55.732 21.844V20.794H54.444C53.3894 20.794 52.862 21.1207 52.862 21.774V22.026C52.862 22.3527 52.9694 22.6 53.184 22.768C53.408 22.9267 53.7114 23.006 54.094 23.006ZM62.3376 24.168C61.815 24.168 61.3483 24.0793 60.9376 23.902C60.527 23.7247 60.1816 23.4727 59.9016 23.146C59.6216 22.81 59.407 22.4087 59.2576 21.942C59.1083 21.466 59.0336 20.9387 59.0336 20.36C59.0336 19.7813 59.1083 19.2587 59.2576 18.792C59.407 18.316 59.6216 17.9147 59.9016 17.588C60.1816 17.252 60.527 16.9953 60.9376 16.818C61.3483 16.6407 61.815 16.552 62.3376 16.552C63.0656 16.552 63.663 16.7153 64.1296 17.042C64.5963 17.3687 64.937 17.8027 65.1516 18.344L63.8916 18.932C63.789 18.596 63.607 18.33 63.3456 18.134C63.0936 17.9287 62.7576 17.826 62.3376 17.826C61.7776 17.826 61.353 18.0033 61.0636 18.358C60.7836 18.7033 60.6436 19.156 60.6436 19.716V21.018C60.6436 21.578 60.7836 22.0353 61.0636 22.39C61.353 22.7353 61.7776 22.908 62.3376 22.908C62.7856 22.908 63.1403 22.8007 63.4016 22.586C63.6723 22.362 63.887 22.068 64.0456 21.704L65.2076 22.32C64.965 22.9173 64.601 23.3747 64.1156 23.692C63.6303 24.0093 63.0376 24.168 62.3376 24.168ZM68.6764 24C68.1444 24 67.743 23.8647 67.4724 23.594C67.2017 23.314 67.0664 22.922 67.0664 22.418V17.966H65.9324V16.72H66.5484C66.8004 16.72 66.973 16.664 67.0664 16.552C67.169 16.44 67.2204 16.258 67.2204 16.006V14.732H68.5924V16.72H70.1184V17.966H68.5924V22.754H70.0064V24H68.6764ZM81.2982 24L80.4162 21.354H76.7622L75.9082 24H74.2982L77.6302 14.228H79.6182L82.9502 24H81.2982ZM78.6242 15.684H78.5542L77.1402 19.996H80.0242L78.6242 15.684ZM84.3518 24V16.72H85.8778V18.12H85.9478C86.0504 17.7467 86.2651 17.42 86.5918 17.14C86.9184 16.86 87.3711 16.72 87.9498 16.72H88.3558V18.19H87.7538C87.1471 18.19 86.6804 18.288 86.3538 18.484C86.0364 18.68 85.8778 18.9693 85.8778 19.352V24H84.3518ZM90.4811 15.418C90.1638 15.418 89.9305 15.3433 89.7811 15.194C89.6411 15.0447 89.5711 14.8533 89.5711 14.62V14.382C89.5711 14.1487 89.6411 13.9573 89.7811 13.808C89.9305 13.6587 90.1638 13.584 90.4811 13.584C90.7985 13.584 91.0271 13.6587 91.1671 13.808C91.3071 13.9573 91.3771 14.1487 91.3771 14.382V14.62C91.3771 14.8533 91.3071 15.0447 91.1671 15.194C91.0271 15.3433 90.7985 15.418 90.4811 15.418ZM89.7111 16.72H91.2371V24H89.7111V16.72ZM98.7502 24C98.3489 24 98.0409 23.888 97.8262 23.664C97.6116 23.4307 97.4809 23.1367 97.4342 22.782H97.3642C97.2242 23.2393 96.9676 23.5847 96.5942 23.818C96.2209 24.0513 95.7682 24.168 95.2362 24.168C94.4802 24.168 93.8969 23.972 93.4862 23.58C93.0849 23.188 92.8842 22.6607 92.8842 21.998C92.8842 21.27 93.1456 20.724 93.6682 20.36C94.2002 19.996 94.9749 19.814 95.9922 19.814H97.3082V19.198C97.3082 18.75 97.1869 18.4047 96.9442 18.162C96.7016 17.9193 96.3236 17.798 95.8102 17.798C95.3809 17.798 95.0309 17.8913 94.7602 18.078C94.4896 18.2647 94.2609 18.5027 94.0742 18.792L93.1642 17.966C93.4069 17.5553 93.7476 17.2193 94.1862 16.958C94.6249 16.6873 95.1989 16.552 95.9082 16.552C96.8509 16.552 97.5742 16.7713 98.0782 17.21C98.5822 17.6487 98.8342 18.2787 98.8342 19.1V22.754H99.6042V24H98.7502ZM95.6702 23.006C96.1462 23.006 96.5382 22.9033 96.8462 22.698C97.1542 22.4833 97.3082 22.1987 97.3082 21.844V20.794H96.0202C94.9656 20.794 94.4382 21.1207 94.4382 21.774V22.026C94.4382 22.3527 94.5456 22.6 94.7602 22.768C94.9842 22.9267 95.2876 23.006 95.6702 23.006Z" fill="white"/>
+<rect x="0.5" y="0.5" width="112" height="36" rx="7.5" stroke="#2F3A46" stroke-dasharray="4 4"/>
+<defs>
+<clipPath id="clip0_6585_844574">
+<rect width="18" height="15.5999" fill="white" transform="translate(12 10.7)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/docs/public/static/branding/base-ui/react-aria.svg b/docs/public/static/branding/base-ui/react-aria.svg
new file mode 100644
index 00000000000000..7c4d25147221d8
--- /dev/null
+++ b/docs/public/static/branding/base-ui/react-aria.svg
@@ -0,0 +1,15 @@
+<svg width="113" height="37" viewBox="0 0 113 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="112" height="36" rx="7.5" fill="white"/>
+<g clip-path="url(#clip0_6585_829040)">
+<path d="M23.4023 10.7002H30.0023V26.3001L23.4023 10.7002Z" fill="#E1251B"/>
+<path d="M18.66 10.7007H12V26.3006L18.66 10.7007Z" fill="#E1251B"/>
+<path d="M21.0011 16.4607L25.2611 26.3006H22.5011L21.2411 23.1806H18.1211L21.0011 16.4607Z" fill="#E1251B"/>
+</g>
+<path d="M36.786 24H35.204V14.228H39.418C40.2953 14.228 40.986 14.494 41.49 15.026C41.994 15.5487 42.246 16.2627 42.246 17.168C42.246 17.868 42.0827 18.4513 41.756 18.918C41.4387 19.3753 40.9673 19.6973 40.342 19.884L42.456 24H40.692L38.732 20.052H36.786V24ZM39.306 18.722C39.7073 18.722 40.02 18.6193 40.244 18.414C40.468 18.1993 40.58 17.896 40.58 17.504V16.832C40.58 16.44 40.468 16.1413 40.244 15.936C40.02 15.7213 39.7073 15.614 39.306 15.614H36.786V18.722H39.306ZM46.9168 24.168C46.3941 24.168 45.9274 24.0793 45.5168 23.902C45.1061 23.7247 44.7561 23.4727 44.4668 23.146C44.1774 22.81 43.9534 22.4087 43.7948 21.942C43.6454 21.466 43.5708 20.9387 43.5708 20.36C43.5708 19.7813 43.6454 19.2587 43.7948 18.792C43.9534 18.316 44.1774 17.9147 44.4668 17.588C44.7561 17.252 45.1061 16.9953 45.5168 16.818C45.9274 16.6407 46.3941 16.552 46.9168 16.552C47.4488 16.552 47.9154 16.6453 48.3168 16.832C48.7274 17.0187 49.0681 17.28 49.3388 17.616C49.6094 17.9427 49.8101 18.3253 49.9408 18.764C50.0808 19.2027 50.1508 19.674 50.1508 20.178V20.752H45.1528V20.99C45.1528 21.55 45.3161 22.012 45.6428 22.376C45.9788 22.7307 46.4548 22.908 47.0708 22.908C47.5188 22.908 47.8968 22.81 48.2048 22.614C48.5128 22.418 48.7741 22.152 48.9888 21.816L49.8848 22.698C49.6141 23.146 49.2221 23.5053 48.7088 23.776C48.1954 24.0373 47.5981 24.168 46.9168 24.168ZM46.9168 17.742C46.6554 17.742 46.4128 17.7887 46.1888 17.882C45.9741 17.9753 45.7874 18.106 45.6288 18.274C45.4794 18.442 45.3628 18.6427 45.2788 18.876C45.1948 19.1093 45.1528 19.366 45.1528 19.646V19.744H48.5408V19.604C48.5408 19.044 48.3961 18.596 48.1068 18.26C47.8174 17.9147 47.4208 17.742 46.9168 17.742ZM57.174 24C56.7727 24 56.4647 23.888 56.25 23.664C56.0354 23.4307 55.9047 23.1367 55.858 22.782H55.788C55.648 23.2393 55.3914 23.5847 55.018 23.818C54.6447 24.0513 54.192 24.168 53.66 24.168C52.904 24.168 52.3207 23.972 51.91 23.58C51.5087 23.188 51.308 22.6607 51.308 21.998C51.308 21.27 51.5694 20.724 52.092 20.36C52.624 19.996 53.3987 19.814 54.416 19.814H55.732V19.198C55.732 18.75 55.6107 18.4047 55.368 18.162C55.1254 17.9193 54.7474 17.798 54.234 17.798C53.8047 17.798 53.4547 17.8913 53.184 18.078C52.9134 18.2647 52.6847 18.5027 52.498 18.792L51.588 17.966C51.8307 17.5553 52.1714 17.2193 52.61 16.958C53.0487 16.6873 53.6227 16.552 54.332 16.552C55.2747 16.552 55.998 16.7713 56.502 17.21C57.006 17.6487 57.258 18.2787 57.258 19.1V22.754H58.028V24H57.174ZM54.094 23.006C54.57 23.006 54.962 22.9033 55.27 22.698C55.578 22.4833 55.732 22.1987 55.732 21.844V20.794H54.444C53.3894 20.794 52.862 21.1207 52.862 21.774V22.026C52.862 22.3527 52.9694 22.6 53.184 22.768C53.408 22.9267 53.7114 23.006 54.094 23.006ZM62.3376 24.168C61.815 24.168 61.3483 24.0793 60.9376 23.902C60.527 23.7247 60.1816 23.4727 59.9016 23.146C59.6216 22.81 59.407 22.4087 59.2576 21.942C59.1083 21.466 59.0336 20.9387 59.0336 20.36C59.0336 19.7813 59.1083 19.2587 59.2576 18.792C59.407 18.316 59.6216 17.9147 59.9016 17.588C60.1816 17.252 60.527 16.9953 60.9376 16.818C61.3483 16.6407 61.815 16.552 62.3376 16.552C63.0656 16.552 63.663 16.7153 64.1296 17.042C64.5963 17.3687 64.937 17.8027 65.1516 18.344L63.8916 18.932C63.789 18.596 63.607 18.33 63.3456 18.134C63.0936 17.9287 62.7576 17.826 62.3376 17.826C61.7776 17.826 61.353 18.0033 61.0636 18.358C60.7836 18.7033 60.6436 19.156 60.6436 19.716V21.018C60.6436 21.578 60.7836 22.0353 61.0636 22.39C61.353 22.7353 61.7776 22.908 62.3376 22.908C62.7856 22.908 63.1403 22.8007 63.4016 22.586C63.6723 22.362 63.887 22.068 64.0456 21.704L65.2076 22.32C64.965 22.9173 64.601 23.3747 64.1156 23.692C63.6303 24.0093 63.0376 24.168 62.3376 24.168ZM68.6764 24C68.1444 24 67.743 23.8647 67.4724 23.594C67.2017 23.314 67.0664 22.922 67.0664 22.418V17.966H65.9324V16.72H66.5484C66.8004 16.72 66.973 16.664 67.0664 16.552C67.169 16.44 67.2204 16.258 67.2204 16.006V14.732H68.5924V16.72H70.1184V17.966H68.5924V22.754H70.0064V24H68.6764ZM81.2982 24L80.4162 21.354H76.7622L75.9082 24H74.2982L77.6302 14.228H79.6182L82.9502 24H81.2982ZM78.6242 15.684H78.5542L77.1402 19.996H80.0242L78.6242 15.684ZM84.3518 24V16.72H85.8778V18.12H85.9478C86.0504 17.7467 86.2651 17.42 86.5918 17.14C86.9184 16.86 87.3711 16.72 87.9498 16.72H88.3558V18.19H87.7538C87.1471 18.19 86.6804 18.288 86.3538 18.484C86.0364 18.68 85.8778 18.9693 85.8778 19.352V24H84.3518ZM90.4811 15.418C90.1638 15.418 89.9305 15.3433 89.7811 15.194C89.6411 15.0447 89.5711 14.8533 89.5711 14.62V14.382C89.5711 14.1487 89.6411 13.9573 89.7811 13.808C89.9305 13.6587 90.1638 13.584 90.4811 13.584C90.7985 13.584 91.0271 13.6587 91.1671 13.808C91.3071 13.9573 91.3771 14.1487 91.3771 14.382V14.62C91.3771 14.8533 91.3071 15.0447 91.1671 15.194C91.0271 15.3433 90.7985 15.418 90.4811 15.418ZM89.7111 16.72H91.2371V24H89.7111V16.72ZM98.7502 24C98.3489 24 98.0409 23.888 97.8262 23.664C97.6116 23.4307 97.4809 23.1367 97.4342 22.782H97.3642C97.2242 23.2393 96.9676 23.5847 96.5942 23.818C96.2209 24.0513 95.7682 24.168 95.2362 24.168C94.4802 24.168 93.8969 23.972 93.4862 23.58C93.0849 23.188 92.8842 22.6607 92.8842 21.998C92.8842 21.27 93.1456 20.724 93.6682 20.36C94.2002 19.996 94.9749 19.814 95.9922 19.814H97.3082V19.198C97.3082 18.75 97.1869 18.4047 96.9442 18.162C96.7016 17.9193 96.3236 17.798 95.8102 17.798C95.3809 17.798 95.0309 17.8913 94.7602 18.078C94.4896 18.2647 94.2609 18.5027 94.0742 18.792L93.1642 17.966C93.4069 17.5553 93.7476 17.2193 94.1862 16.958C94.6249 16.6873 95.1989 16.552 95.9082 16.552C96.8509 16.552 97.5742 16.7713 98.0782 17.21C98.5822 17.6487 98.8342 18.2787 98.8342 19.1V22.754H99.6042V24H98.7502ZM95.6702 23.006C96.1462 23.006 96.5382 22.9033 96.8462 22.698C97.1542 22.4833 97.3082 22.1987 97.3082 21.844V20.794H96.0202C94.9656 20.794 94.4382 21.1207 94.4382 21.774V22.026C94.4382 22.3527 94.5456 22.6 94.7602 22.768C94.9842 22.9267 95.2876 23.006 95.6702 23.006Z" fill="#1A2027"/>
+<rect x="0.5" y="0.5" width="112" height="36" rx="7.5" stroke="#E0E3E7" stroke-dasharray="4 4"/>
+<defs>
+<clipPath id="clip0_6585_829040">
+<rect width="18" height="15.5999" fill="white" transform="translate(12 10.7)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/docs/public/static/fonts/GeneralSans-Bold.ttf b/docs/public/static/fonts/GeneralSans-Bold.ttf
new file mode 100644
index 00000000000000..61a5df96586571
Binary files /dev/null and b/docs/public/static/fonts/GeneralSans-Bold.ttf differ
diff --git a/docs/public/static/fonts/GeneralSans-Bold.woff2 b/docs/public/static/fonts/GeneralSans-Bold.woff2
new file mode 100644
index 00000000000000..65b0b4aa13739b
Binary files /dev/null and b/docs/public/static/fonts/GeneralSans-Bold.woff2 differ
diff --git a/docs/public/static/fonts/GeneralSans-Medium.ttf b/docs/public/static/fonts/GeneralSans-Medium.ttf
new file mode 100644
index 00000000000000..e072c8373a01e0
Binary files /dev/null and b/docs/public/static/fonts/GeneralSans-Medium.ttf differ
diff --git a/docs/public/static/fonts/GeneralSans-Medium.woff2 b/docs/public/static/fonts/GeneralSans-Medium.woff2
new file mode 100644
index 00000000000000..c90195fa2b10ec
Binary files /dev/null and b/docs/public/static/fonts/GeneralSans-Medium.woff2 differ
diff --git a/docs/public/static/fonts/GeneralSans-Regular.ttf b/docs/public/static/fonts/GeneralSans-Regular.ttf
new file mode 100644
index 00000000000000..d970a994ebcb1c
Binary files /dev/null and b/docs/public/static/fonts/GeneralSans-Regular.ttf differ
diff --git a/docs/public/static/fonts/GeneralSans-Regular.woff2 b/docs/public/static/fonts/GeneralSans-Regular.woff2
new file mode 100644
index 00000000000000..2bc4672a793a46
Binary files /dev/null and b/docs/public/static/fonts/GeneralSans-Regular.woff2 differ
diff --git a/docs/public/static/fonts/GeneralSans-Semibold-subset.woff2 b/docs/public/static/fonts/GeneralSans-Semibold-subset.woff2
new file mode 100644
index 00000000000000..37d37d3b412e84
Binary files /dev/null and b/docs/public/static/fonts/GeneralSans-Semibold-subset.woff2 differ
diff --git a/docs/public/static/fonts/GeneralSans-Semibold.ttf b/docs/public/static/fonts/GeneralSans-Semibold.ttf
new file mode 100644
index 00000000000000..916b8091adce72
Binary files /dev/null and b/docs/public/static/fonts/GeneralSans-Semibold.ttf differ
diff --git a/docs/public/static/fonts/GeneralSans-Semibold.woff2 b/docs/public/static/fonts/GeneralSans-Semibold.woff2
new file mode 100644
index 00000000000000..b17a037e3ccd19
Binary files /dev/null and b/docs/public/static/fonts/GeneralSans-Semibold.woff2 differ
diff --git a/docs/public/static/fonts/IBMPlexSans-Regular-subset.woff2 b/docs/public/static/fonts/IBMPlexSans-Regular-subset.woff2
new file mode 100644
index 00000000000000..beb09d432f484f
Binary files /dev/null and b/docs/public/static/fonts/IBMPlexSans-Regular-subset.woff2 differ
diff --git a/docs/public/static/fonts/PlusJakartaSans-Bold-subset.woff2 b/docs/public/static/fonts/PlusJakartaSans-Bold-subset.woff2
deleted file mode 100644
index d7d8eb0f67e6e9..00000000000000
Binary files a/docs/public/static/fonts/PlusJakartaSans-Bold-subset.woff2 and /dev/null differ
diff --git a/docs/public/static/fonts/PlusJakartaSans-ExtraBold-subset.woff2 b/docs/public/static/fonts/PlusJakartaSans-ExtraBold-subset.woff2
deleted file mode 100644
index b96914a35839a1..00000000000000
Binary files a/docs/public/static/fonts/PlusJakartaSans-ExtraBold-subset.woff2 and /dev/null differ
diff --git a/docs/src/components/action/ArrowButton.tsx b/docs/src/components/action/ArrowButton.tsx
index acd7d904a8ff3d..224a64197995e8 100644
--- a/docs/src/components/action/ArrowButton.tsx
+++ b/docs/src/components/action/ArrowButton.tsx
@@ -35,14 +35,14 @@ export default function ArrowButton({
         },
         (theme) =>
           theme.applyDarkStyles({
-            color: '#fff',
-            borderColor: 'primaryDark.300',
+            color: 'primary.200',
+            borderColor: 'primaryDark.400',
             '&:hover': {
-              borderColor: 'primaryDark.200',
+              borderColor: 'primary.300',
             },
             '&.Mui-disabled': {
-              color: '#fff',
-              borderColor: 'primary.700',
+              color: 'primaryDark.200',
+              borderColor: 'primaryDark.400',
             },
           }),
         ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
diff --git a/docs/src/components/action/Frame.tsx b/docs/src/components/action/Frame.tsx
index e08c89928b4edc..dbf83a57ae587e 100644
--- a/docs/src/components/action/Frame.tsx
+++ b/docs/src/components/action/Frame.tsx
@@ -10,11 +10,11 @@ const FrameDemo = React.forwardRef<HTMLDivElement, BoxProps>(function FrameDemo(
         (theme) => ({
           position: 'relative',
           border: '1px solid',
-          bgcolor: 'grey.100',
-          borderColor: 'grey.200',
+          background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
+          borderColor: 'grey.100',
           ...theme.applyDarkStyles({
-            bgcolor: 'primaryDark.700',
-            borderColor: 'primaryDark.600',
+            background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
+            borderColor: 'primaryDark.700',
           }),
         }),
         ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
@@ -31,33 +31,38 @@ const FrameInfo = React.forwardRef<HTMLDivElement, BoxProps>(function FrameInfo(
       sx={{
         color: '#fff',
         p: 2,
-        bgcolor: 'primaryDark.800',
+        bgcolor: 'common.black',
         border: '1px solid',
         borderColor: 'primaryDark.700',
         colorScheme: 'dark',
+        '* pre, code': {
+          bgcolor: 'common.black',
+        },
         ...props.sx,
       }}
     />
   );
 });
 
-function Frame(props: BoxProps) {
+function Frame({ sx, ...props }: BoxProps) {
   return (
     <Box
       {...props}
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        '& > div:first-of-type': {
-          borderTopLeftRadius: '12px',
-          borderTopRightRadius: '12px',
-        },
-        '& > div:last-of-type': {
-          borderBottomLeftRadius: '12px',
-          borderBottomRightRadius: '12px',
+      sx={[
+        {
+          display: 'flex',
+          flexDirection: 'column',
+          '& > div:first-of-type': {
+            borderTopLeftRadius: '12px',
+            borderTopRightRadius: '12px',
+          },
+          '& > div:last-of-type': {
+            borderBottomLeftRadius: '12px',
+            borderBottomRightRadius: '12px',
+          },
         },
-        ...props.sx,
-      }}
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
     />
   );
 }
diff --git a/docs/src/components/action/Highlighter.tsx b/docs/src/components/action/Highlighter.tsx
index 89856876d60a2b..d937173ea83bde 100644
--- a/docs/src/components/action/Highlighter.tsx
+++ b/docs/src/components/action/Highlighter.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import ButtonBase, { ButtonBaseProps } from '@mui/material/ButtonBase';
+import { alpha } from '@mui/material/styles';
 
 export default function Highlighter({
   disableBorder = false,
   selected = false,
-  selectedBg = 'white',
   sx,
   ...props
 }: {
@@ -12,10 +12,6 @@ export default function Highlighter({
   selectedBg?: 'white' | 'comfort';
   selected?: boolean;
 } & ButtonBaseProps) {
-  const lightSelectedBg = {
-    white: '#fff',
-    comfort: 'grey.50',
-  };
   const ref = React.useRef<null | HTMLButtonElement>(null);
   return (
     <ButtonBase
@@ -49,16 +45,20 @@ export default function Highlighter({
           transitionDuration: '150ms',
           color: 'primary.300',
           ...((!disableBorder || selected) && {
-            borderColor: 'grey.200',
+            borderColor: 'grey.100',
           }),
           ...(selected && {
-            bgcolor: lightSelectedBg[selectedBg],
-            borderColor: 'grey.200',
+            bgcolor: '#FFF',
+            borderColor: 'primary.300',
+            boxShadow: `0px 1px 6px ${
+              (theme.vars || theme).palette.primary[100]
+            }, inset 0px 2px 8px ${(theme.vars || theme).palette.grey[50]}`,
             color: 'primary.500',
           }),
           ...(!selected && {
             '&:hover, &:focus': {
-              bgcolor: 'grey.100',
+              bgcolor: 'primary.50',
+              borderColor: 'primary.100',
               '@media (hover: none)': {
                 bgcolor: 'transparent',
               },
@@ -67,16 +67,20 @@ export default function Highlighter({
           ...theme.applyDarkStyles({
             color: 'primary.800',
             ...((!disableBorder || selected) && {
-              borderColor: 'primaryDark.500',
+              borderColor: 'primaryDark.700',
             }),
             ...(selected && {
-              bgcolor: 'primaryDark.700',
-              borderColor: 'primaryDark.300',
+              bgcolor: `${alpha(theme.palette.primary[900], 0.3)}`,
+              borderColor: 'primary.700',
               color: 'primary.300',
+              boxShadow: `0px 1px 6px ${
+                (theme.vars || theme).palette.primary[800]
+              }, inset 0px 2px 8px ${(theme.vars || theme).palette.primaryDark[800]}`,
             }),
             ...(!selected && {
               '&:hover, &:focus': {
                 bgcolor: 'primaryDark.800',
+                borderColor: 'primaryDark.700',
                 '@media (hover: none)': {
                   bgcolor: 'transparent',
                 },
diff --git a/docs/src/components/action/More.tsx b/docs/src/components/action/More.tsx
index bd8d243625d610..3d24ed81d519bd 100644
--- a/docs/src/components/action/More.tsx
+++ b/docs/src/components/action/More.tsx
@@ -36,7 +36,7 @@ export default (function More(props: ButtonBaseProps) {
           cursor: 'pointer',
           borderRadius: 1,
           height: '100%',
-          border: '2px dashed',
+          border: '1px dashed',
           transitionProperty: 'all',
           transitionDuration: '150ms',
           borderColor: 'grey.200',
@@ -50,7 +50,7 @@ export default (function More(props: ButtonBaseProps) {
         },
         (theme) =>
           theme.applyDarkStyles({
-            borderColor: 'primaryDark.500',
+            borderColor: 'primaryDark.600',
             '&:hover, &:focus': {
               bgcolor: 'primaryDark.700',
             },
diff --git a/docs/src/components/action/NpmCopyButton.tsx b/docs/src/components/action/NpmCopyButton.tsx
new file mode 100644
index 00000000000000..90654783f804a1
--- /dev/null
+++ b/docs/src/components/action/NpmCopyButton.tsx
@@ -0,0 +1,97 @@
+import * as React from 'react';
+import copy from 'clipboard-copy';
+import Button, { ButtonProps } from '@mui/base/Button';
+import { styled, SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded';
+import CheckRounded from '@mui/icons-material/CheckRounded';
+
+const StyledButton = styled(Button)`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  outline: 0;
+  border: 0;
+  margin: 0;
+  user-select: none;
+  vertical-align: middle;
+  text-decoration: none;
+  text-transform: initial;
+  scroll-snap-margin-top: calc(var(--MuiDocs-header-height) + 32px);
+  scroll-margin-top: calc(var(--MuiDocs-header-height) + 32px);
+  min-width: 64px;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  box-shadow: none;
+  border-radius: 6px;
+  cursor: copy;
+  padding: 0;
+  width: max-content;
+  background-color: transparent;
+  color: var(--muidocs-palette-grey-600);
+  font-family: Menlo, Consolas, 'Droid Sans Mono', monospace;
+  font-weight: 400;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+  -webkit-font-smoothing: subpixel-antialiased;
+  margin-top: 16px;
+
+  & svg {
+    display: inline-block;
+    position: absolute;
+    color: var(--muidocs-palette-primary-main);
+    right: -20px;
+    top: 1px;
+    opacity: 0;
+    transition-property: opacity;
+    transition-duration: 100ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &:hover,
+  &.Mui-focusVisible {
+    color: var(--muidocs-palette-primary-main);
+
+    & svg {
+      opacity: 1;
+    }
+  }
+`;
+
+export default function NpmCopyButton({
+  installation,
+  onClick,
+  sx,
+  ...props
+}: ButtonProps & { installation: string; sx?: SxProps<Theme> }) {
+  const [copied, setCopied] = React.useState(false);
+  const handleCopy = () => {
+    setCopied(true);
+    copy(installation).then(() => {
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+  return (
+    <Button
+      slots={{ root: StyledButton }}
+      onClick={(event) => {
+        handleCopy();
+        onClick?.(event);
+      }}
+      {...props}
+    >
+      <strong>$</strong>&nbsp;{installation}
+      {copied ? (
+        <CheckRounded color="primary" sx={{ fontSize: 15 }} />
+      ) : (
+        <ContentCopyRounded sx={{ fontSize: 15 }} />
+      )}
+    </Button>
+  );
+}
diff --git a/docs/src/components/action/StylingInfo.tsx b/docs/src/components/action/StylingInfo.tsx
index 7e02ca7ff7326a..7f9a7b988f85fd 100644
--- a/docs/src/components/action/StylingInfo.tsx
+++ b/docs/src/components/action/StylingInfo.tsx
@@ -42,7 +42,7 @@ export default function StylingInfo({
         px: 2,
         pt: 1,
         pb: 2,
-        bgcolor: ({ palette }) => alpha(palette.primaryDark[700], 0.5),
+        background: ({ palette }) => alpha(palette.primaryDark[900], 0.95),
         backdropFilter: 'blur(8px)',
         zIndex: 1,
         borderTop: '1px solid',
@@ -62,9 +62,9 @@ export default function StylingInfo({
           bottom: '100%',
           transform: hidden || !appeared ? 'translateY(-10px)' : 'translateY(50%)',
           opacity: appeared ? 1 : 0,
-          bgcolor: 'primaryDark.500',
+          bgcolor: 'primary.600',
           '&:hover, &.Mui-focused': {
-            bgcolor: 'primaryDark.600',
+            bgcolor: 'primary.700',
           },
         }}
       >
diff --git a/docs/src/components/animation/FlashCode.tsx b/docs/src/components/animation/FlashCode.tsx
index 87cb0e3da13ab9..c1319d639b3d4c 100644
--- a/docs/src/components/animation/FlashCode.tsx
+++ b/docs/src/components/animation/FlashCode.tsx
@@ -16,10 +16,11 @@ const FlashCode = styled('div', {
     transition: '0.3s',
     ...theme.typography.caption,
     backgroundColor: theme.vars
-      ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.2)`
-      : alpha(theme.palette.primary.main, 0.2),
+      ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.15)`
+      : alpha(theme.palette.primary.main, 0.1),
     border: '1px solid',
     borderColor: (theme.vars || theme).palette.primary.dark,
+    zIndex: 1,
   }),
 );
 
diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx
index 6a9c6da97c89de..ede835fdb037f5 100644
--- a/docs/src/components/header/HeaderNavBar.tsx
+++ b/docs/src/components/header/HeaderNavBar.tsx
@@ -54,7 +54,7 @@ const Navigation = styled('nav')(({ theme }) => [
   },
   theme.applyDarkStyles({
     '& li': {
-      '& > a, & > div': {
+      '& > a, & > button': {
         '&:hover': {
           backgroundColor: (theme.vars || theme).palette.primaryDark[700],
           color: (theme.vars || theme).palette.primaryDark[200],
diff --git a/docs/src/components/home/AdvancedShowcase.tsx b/docs/src/components/home/AdvancedShowcase.tsx
index eb15b1a3a92594..306f5e19923e09 100644
--- a/docs/src/components/home/AdvancedShowcase.tsx
+++ b/docs/src/components/home/AdvancedShowcase.tsx
@@ -1729,6 +1729,7 @@ export default function DataTable() {
               display: 'none',
             },
             '& pre': {
+              bgcolor: 'transparent !important',
               '&::-webkit-scrollbar': {
                 display: 'none',
               },
diff --git a/docs/src/components/home/DesignKits.tsx b/docs/src/components/home/DesignKits.tsx
index 6e2e875484a0c1..4b8fadd61815d7 100644
--- a/docs/src/components/home/DesignKits.tsx
+++ b/docs/src/components/home/DesignKits.tsx
@@ -226,8 +226,8 @@ export default function DesignKits() {
     <Box
       sx={{
         mx: { xs: -2, sm: -3, md: 0 },
-        my: { md: -8 },
-        height: { xs: 300, sm: 360, md: 'calc(100% + 160px)' },
+        my: { md: -18 },
+        height: { xs: 300, sm: 360, md: 'calc(100% + 320px)' },
         overflow: 'hidden',
         position: 'relative',
         width: { xs: '100vw', md: '50vw' },
diff --git a/docs/src/components/home/DesignSystemComponents.tsx b/docs/src/components/home/DesignSystemComponents.tsx
index 337054b94ea83a..8ca84926b30afe 100644
--- a/docs/src/components/home/DesignSystemComponents.tsx
+++ b/docs/src/components/home/DesignSystemComponents.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import dynamic from 'next/dynamic';
 import { useInView } from 'react-intersection-observer';
 import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
+import Section from 'docs/src/layouts/Section';
 import Typography from '@mui/material/Typography';
 import GradientText from 'docs/src/components/typography/GradientText';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
@@ -33,17 +33,18 @@ function DesignSystemComponents() {
     rootMargin: '500px',
   });
   return (
-    <Container ref={ref} sx={{ py: { xs: 4, sm: 6, md: 8 } }}>
+    <Section ref={ref}>
       <SectionHeadline
         overline="Production-ready components"
         title={
           <Typography variant="h2" sx={{ mt: 1, mb: { xs: 2, sm: 4 }, maxWidth: 500 }}>
-            Beautiful and powerful, <GradientText>right out of the box</GradientText>
+            Beautiful and powerful,
+            <br /> <GradientText>right out of the box</GradientText>
           </Typography>
         }
       />
       {inView ? <MaterialDesignComponents /> : <Placeholder />}
-    </Container>
+    </Section>
   );
 }
 
diff --git a/docs/src/components/home/DiamondSponsors.tsx b/docs/src/components/home/DiamondSponsors.tsx
index 52036f679fa52c..8955826225ff75 100644
--- a/docs/src/components/home/DiamondSponsors.tsx
+++ b/docs/src/components/home/DiamondSponsors.tsx
@@ -40,22 +40,23 @@ export default function DiamondSponsors() {
   const spotIsAvailable = maxNumberOfDiamondSponsors > DIAMONDs.length;
   return (
     <Box ref={ref}>
-      <Box sx={{ mb: 1 }}>
-        <Typography
-          component="h3"
-          variant="h5"
-          fontWeight="extraBold"
-          sx={(theme) => ({
-            color: 'primary.500',
-            ...theme.applyDarkStyles({
-              color: 'primary.300',
-            }),
-          })}
-        >
-          Diamond
-        </Typography>
-      </Box>
-      <Grid container spacing={{ xs: 2, md: 4 }}>
+      <Typography
+        component="h3"
+        variant="h6"
+        fontWeight="bold"
+        sx={(theme) => ({
+          mt: 4,
+          mb: 2,
+          background: `linear-gradient(90deg, ${(theme.vars || theme).palette.primary[400]} 50%, ${
+            (theme.vars || theme).palette.primary[700]
+          } 100%)`,
+          WebkitBackgroundClip: 'text',
+          WebkitTextFillColor: 'transparent',
+        })}
+      >
+        Diamond
+      </Typography>
+      <Grid container spacing={{ xs: 2, md: 3 }}>
         {DIAMONDs.map((item) => (
           <Grid item key={item.name} xs={12} sm={6} md={4}>
             <SponsorCard logoSize={64} inView={inView} item={item} />
diff --git a/docs/src/components/home/GetStartedButtons.tsx b/docs/src/components/home/GetStartedButtons.tsx
index 115541de2d709a..bed52a5cde921f 100644
--- a/docs/src/components/home/GetStartedButtons.tsx
+++ b/docs/src/components/home/GetStartedButtons.tsx
@@ -55,7 +55,7 @@ export default function GetStartedButtons(props: GetStartedButtonsProps) {
         <Button
           size="large"
           // @ts-expect-error
-          variant="code"
+          variant="codeOutlined"
           endIcon={copied ? <CheckRounded color="primary" /> : <ContentCopyRounded />}
           onClick={handleCopy}
           sx={{
diff --git a/docs/src/components/home/GetStartedButtons2.tsx b/docs/src/components/home/GetStartedButtons2.tsx
new file mode 100644
index 00000000000000..429f46aee1334a
--- /dev/null
+++ b/docs/src/components/home/GetStartedButtons2.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import Box, { BoxProps } from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
+import ROUTES from 'docs/src/route';
+import Link from 'docs/src/modules/components/Link';
+import NpmCopyButton from 'docs/src/components/action/NpmCopyButton';
+
+interface GetStartedButtons2Props extends BoxProps {
+  getStartedUrl?: string;
+  learnUrl?: string;
+  learnLabel?: string;
+  installation?: string;
+}
+
+export default function GetStartedButtons2(props: GetStartedButtons2Props) {
+  const { getStartedUrl = ROUTES.documentation, learnUrl, learnLabel, ...other } = props;
+  return (
+    <React.Fragment>
+      <Box
+        {...other}
+        sx={{
+          display: 'flex',
+          flexWrap: { xs: 'wrap', md: 'nowrap' },
+          '&& > *': {
+            minWidth: { xs: '100%', md: '0%' },
+          },
+          ...other.sx,
+        }}
+      >
+        <Button
+          href={getStartedUrl}
+          component={Link}
+          noLinkStyle
+          size="large"
+          variant="contained"
+          endIcon={<KeyboardArrowRightRounded />}
+          sx={{
+            flexShrink: 0,
+            mr: { xs: 0, md: 1.5 },
+            mb: { xs: 2, md: 0 },
+          }}
+        >
+          Get started
+        </Button>
+        <Button
+          href={learnUrl}
+          component={Link}
+          noLinkStyle
+          variant="outlined"
+          size="large"
+          color="secondary"
+          endIcon={<KeyboardArrowRightRounded />}
+        >
+          {learnLabel}
+        </Button>
+      </Box>
+      <NpmCopyButton installation="npm install @mui/base" sx={{ mt: 2 }} />
+    </React.Fragment>
+  );
+}
diff --git a/docs/src/components/home/GoldSponsors.tsx b/docs/src/components/home/GoldSponsors.tsx
index 38083516e5ec56..da279a59da1c44 100644
--- a/docs/src/components/home/GoldSponsors.tsx
+++ b/docs/src/components/home/GoldSponsors.tsx
@@ -70,21 +70,22 @@ export default function GoldSponsors() {
   });
   return (
     <Box ref={ref}>
-      <Box sx={{ mb: 1 }}>
-        <Typography
-          component="h3"
-          variant="h5"
-          fontWeight="extraBold"
-          sx={(theme) => ({
-            color: 'warning.700',
-            ...theme.applyDarkStyles({
-              color: 'warning.300',
-            }),
-          })}
-        >
-          Gold
-        </Typography>
-      </Box>
+      <Typography
+        component="h3"
+        variant="h6"
+        fontWeight="bold"
+        sx={(theme) => ({
+          mt: 4,
+          mb: 2,
+          background: `linear-gradient(90deg, ${(theme.vars || theme).palette.warning[400]} 50%, ${
+            (theme.vars || theme).palette.warning[700]
+          } 100%)`,
+          WebkitBackgroundClip: 'text',
+          WebkitTextFillColor: 'transparent',
+        })}
+      >
+        Gold
+      </Typography>
       <Grid container spacing={{ xs: 2, md: 3 }}>
         {GOLDs.map((item) => (
           <Grid item key={item.name} xs={12} sm={6} md={4} lg={3}>
diff --git a/docs/src/components/home/Hero.tsx b/docs/src/components/home/Hero.tsx
index a269f33bd476e5..e11761a66138a4 100644
--- a/docs/src/components/home/Hero.tsx
+++ b/docs/src/components/home/Hero.tsx
@@ -90,10 +90,12 @@ export default function Hero() {
   const isMdUp = useMediaQuery(globalTheme.breakpoints.up('md'));
   return (
     <HeroContainer
+      linearGradient
       left={
         <Box sx={{ textAlign: { xs: 'center', md: 'left' } }}>
           <Typography variant="h1" sx={{ my: 2, maxWidth: 500 }}>
-            <GradientText>Move faster</GradientText> with intuitive React UI tools
+            <GradientText>Move faster</GradientText> <br />
+            with intuitive React UI tools
           </Typography>
           <Typography color="text.secondary" sx={{ mb: 3, maxWidth: 500 }}>
             MUI offers a comprehensive suite of UI tools to help you ship new features faster. Start
diff --git a/docs/src/components/home/HeroEnd.tsx b/docs/src/components/home/HeroEnd.tsx
index 059db1388f9135..3349c5af88a6f2 100644
--- a/docs/src/components/home/HeroEnd.tsx
+++ b/docs/src/components/home/HeroEnd.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import dynamic from 'next/dynamic';
 import { useInView } from 'react-intersection-observer';
 import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
+import Section from 'docs/src/layouts/Section';
+import { alpha } from '@mui/material/styles';
 
 function Placeholder() {
   return <Box sx={{ height: { xs: 587, sm: 303, md: 289 } }} />;
@@ -19,19 +20,21 @@ export default function HeroEnd() {
     <Box
       ref={ref}
       sx={(theme) => ({
-        background: `linear-gradient(180deg, ${
-          (theme.vars || theme).palette.grey[50]
-        } 0%, #FFFFFF 100%)`,
+        background: `linear-gradient(180deg, #FFF 50%, 
+          ${(theme.vars || theme).palette.primary[50]} 100%)
+        `,
         ...theme.applyDarkStyles({
           background: `linear-gradient(180deg, ${
-            (theme.vars || theme).palette.primaryDark[900]
-          } 0%, #001E3C 100%)`,
+            (theme.vars || theme).palette.primaryDark[800]
+          } 50%, 
+          ${alpha(theme.palette.primary[900], 0.2)} 100%)
+          `,
         }),
       })}
     >
-      <Container sx={{ py: { xs: 4, sm: 6, md: 8 } }}>
+      <Section bg="transparent" cozy>
         {inView ? <StartToday /> : <Placeholder />}
-      </Container>
+      </Section>
     </Box>
   );
 }
diff --git a/docs/src/components/home/ProductSuite.tsx b/docs/src/components/home/ProductSuite.tsx
index 2d94df2ccc14ae..8104e9bb8f68d0 100644
--- a/docs/src/components/home/ProductSuite.tsx
+++ b/docs/src/components/home/ProductSuite.tsx
@@ -2,9 +2,9 @@ import * as React from 'react';
 import dynamic from 'next/dynamic';
 import { useInView } from 'react-intersection-observer';
 import Grid from '@mui/material/Grid';
-import Container from '@mui/material/Container';
 import Box, { BoxProps } from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
+import Section from 'docs/src/layouts/Section';
 import GradientText from 'docs/src/components/typography/GradientText';
 import ProductsSwitcher from 'docs/src/components/home/ProductsSwitcher';
 import { PrefetchStoreTemplateImages } from 'docs/src/components/home/StoreTemplatesBanner';
@@ -47,58 +47,46 @@ function ProductSuite() {
     rootMargin: '200px',
   });
   return (
-    <Box
-      ref={ref}
-      sx={(theme) => ({
-        bgcolor: 'grey.50',
-        py: { xs: 4, sm: 6, md: 8 },
-        overflow: 'hidden',
-        ...theme.applyDarkStyles({
-          bgcolor: 'primaryDark.900',
-        }),
-      })}
-    >
-      <Container>
-        <Grid container spacing={2}>
-          <Grid item md={6}>
-            <Box maxWidth={500}>
-              <SectionHeadline
-                overline="Products"
-                title={
-                  <Typography variant="h2" sx={{ my: 1 }}>
-                    Every component you need is <GradientText>ready for production</GradientText>
-                  </Typography>
-                }
-                description="Build at an accelerated pace without sacrificing flexibility or control."
-              />
-            </Box>
-            <Box sx={{ mt: 4 }} />
-            <ProductsSwitcher
-              inView={inView}
-              productIndex={productIndex}
-              setProductIndex={setProductIndex}
+    <Section bg="gradient" ref={ref}>
+      <Grid container spacing={2}>
+        <Grid item md={6}>
+          <Box maxWidth={500}>
+            <SectionHeadline
+              overline="Products"
+              title={
+                <Typography variant="h2" sx={{ my: 1 }}>
+                  Every component you need is <GradientText>ready for production</GradientText>
+                </Typography>
+              }
+              description="Build at an accelerated pace without sacrificing flexibility or control."
             />
-          </Grid>
-          <Grid
-            item
-            xs={12}
-            md={6}
-            sx={productIndex === 0 ? { minHeight: { xs: 777, sm: 757, md: 'unset' } } : {}}
-          >
-            {inView && (
-              <React.Fragment>
-                <PrefetchStoreTemplateImages />
-                <PrefetchDesignKitImages />
-                {productIndex === 0 && <CoreShowcase />}
-                {productIndex === 1 && <AdvancedShowcase />}
-                {productIndex === 2 && <StoreTemplatesBanner />}
-                {productIndex === 3 && <DesignKits />}
-              </React.Fragment>
-            )}
-          </Grid>
+          </Box>
+          <Box sx={{ mt: 4 }} />
+          <ProductsSwitcher
+            inView={inView}
+            productIndex={productIndex}
+            setProductIndex={setProductIndex}
+          />
         </Grid>
-      </Container>
-    </Box>
+        <Grid
+          item
+          xs={12}
+          md={6}
+          sx={productIndex === 0 ? { minHeight: { xs: 777, sm: 757, md: 'unset' } } : {}}
+        >
+          {inView && (
+            <React.Fragment>
+              <PrefetchStoreTemplateImages />
+              <PrefetchDesignKitImages />
+              {productIndex === 0 && <CoreShowcase />}
+              {productIndex === 1 && <AdvancedShowcase />}
+              {productIndex === 2 && <StoreTemplatesBanner />}
+              {productIndex === 3 && <DesignKits />}
+            </React.Fragment>
+          )}
+        </Grid>
+      </Grid>
+    </Section>
   );
 }
 
diff --git a/docs/src/components/home/References.tsx b/docs/src/components/home/References.tsx
index fb80972868f14f..313ae9465e0f14 100644
--- a/docs/src/components/home/References.tsx
+++ b/docs/src/components/home/References.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import dynamic from 'next/dynamic';
 import { useInView } from 'react-intersection-observer';
 import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
+import Section from 'docs/src/layouts/Section';
 import Typography from '@mui/material/Typography';
 import {
   CORE_CUSTOMERS,
@@ -29,28 +29,25 @@ function References({
     threshold: 0,
   });
   return (
-    <Container ref={ref} sx={{ py: { xs: 4, sm: 6, md: 10 } }}>
+    <Section ref={ref}>
       <Box sx={{ minHeight: { xs: 236, sm: 144, md: 52 } }}>
         {inView && <CompaniesGrid data={companies} />}
       </Box>
       <Typography
         textAlign="center"
         variant="body2"
-        sx={(theme) => ({
-          color: 'grey.800',
-          ...theme.applyDarkStyles({
-            color: 'grey.500',
-          }),
-          minHeight: 42, // hard-coded to reduce CLS (layout shift)
+        color="text.secondary"
+        sx={{
           mt: 4,
           mx: 'auto',
           maxWidth: 400,
-        })}
+          minHeight: 42, // hard-coded to reduce CLS (layout shift)
+        }}
       >
         The world&apos;s best product teams trust MUI to deliver an unrivaled experience for both
         developers and users.
       </Typography>
-    </Container>
+    </Section>
   );
 }
 
diff --git a/docs/src/components/home/Sponsors.tsx b/docs/src/components/home/Sponsors.tsx
index 73290f59164252..1a64a40543e22a 100644
--- a/docs/src/components/home/Sponsors.tsx
+++ b/docs/src/components/home/Sponsors.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
+import Section from 'docs/src/layouts/Section';
 import DiamondSponsors from 'docs/src/components/home/DiamondSponsors';
 import GoldSponsors from 'docs/src/components/home/GoldSponsors';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
@@ -9,7 +8,7 @@ import GradientText from 'docs/src/components/typography/GradientText';
 
 export default function Sponsors() {
   return (
-    <Container sx={{ py: { xs: 4, md: 8 } }}>
+    <Section cozy>
       <SectionHeadline
         id="sponsors"
         overline="Sponsors"
@@ -21,8 +20,7 @@ export default function Sponsors() {
         description="The development of these open-source tools is accelerated by our generous sponsors."
       />
       <DiamondSponsors />
-      <Box sx={{ mb: 4 }} />
       <GoldSponsors />
-    </Container>
+    </Section>
   );
 }
diff --git a/docs/src/components/home/StoreTemplatesBanner.tsx b/docs/src/components/home/StoreTemplatesBanner.tsx
index cbeb47448d3684..63a258c5ec8fe5 100644
--- a/docs/src/components/home/StoreTemplatesBanner.tsx
+++ b/docs/src/components/home/StoreTemplatesBanner.tsx
@@ -221,8 +221,8 @@ export default function StoreTemplatesBanner() {
     <Box
       sx={{
         mx: { xs: -2, sm: -3, md: 0 },
-        my: { md: -8 },
-        height: { xs: 300, sm: 360, md: 'calc(100% + 160px)' },
+        my: { md: -18 },
+        height: { xs: 300, sm: 360, md: 'calc(100% + 320px)' },
         overflow: 'hidden',
         position: 'relative',
         width: { xs: '100vw', md: '50vw' },
@@ -237,11 +237,6 @@ export default function StoreTemplatesBanner() {
           width: '100%',
           height: '100%',
           pointerEvents: 'none',
-          background: `linear-gradient(to bottom, ${
-            (theme.vars || theme).palette.grey[50]
-          } 0%, ${transparent} 30%, ${transparent} 70%, ${
-            (theme.vars || theme).palette.grey[50]
-          } 100%)`,
           zIndex: 2,
           ...theme.applyDarkStyles({
             background: `linear-gradient(to bottom, ${
diff --git a/docs/src/components/home/Testimonials.tsx b/docs/src/components/home/Testimonials.tsx
index 35850adb217b4e..9196df13daf844 100644
--- a/docs/src/components/home/Testimonials.tsx
+++ b/docs/src/components/home/Testimonials.tsx
@@ -5,6 +5,7 @@ import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
 import MuiStatistics from 'docs/src/components/home/MuiStatistics';
+import { alpha } from '@mui/material/styles';
 
 const UserFeedbacks = dynamic(() => import('./UserFeedbacks'));
 
@@ -19,12 +20,14 @@ function Testimonials() {
       data-mui-color-scheme="dark"
       ref={ref}
       sx={(theme) => ({
-        background: `linear-gradient(85deg, ${(theme.vars || theme).palette.primaryDark[700]} 0%, ${
-          (theme.vars || theme).palette.primaryDark[600]
-        } 100%)`,
+        background: `linear-gradient(180deg, ${
+          (theme.vars || theme).palette.primaryDark[900]
+        } 2%, ${alpha(theme.palette.primaryDark[700], 0.5)} 80%),
+        ${(theme.vars || theme).palette.primaryDark[900]}
+        `,
       })}
     >
-      <Container sx={{ py: { xs: 4, md: 8 } }}>
+      <Container sx={{ py: { xs: 8, md: 12 } }}>
         <Grid container spacing={3} alignItems="center">
           <Grid item xs={12} md={6} sx={{ zIndex: 1, minHeight: { xs: 400, sm: 307, lg: 355 } }}>
             {inView && <UserFeedbacks />}
diff --git a/docs/src/components/home/UserFeedbacks.tsx b/docs/src/components/home/UserFeedbacks.tsx
index c88f7eda695556..3ebb6db5e75cc6 100644
--- a/docs/src/components/home/UserFeedbacks.tsx
+++ b/docs/src/components/home/UserFeedbacks.tsx
@@ -55,18 +55,18 @@ function Feedback({
 const TESTIMONIALS = [
   {
     quote:
-      '"MUI offers a wide variety of high-quality components that have allowed us to ship features faster. MUI has been used by more than a hundred engineers in our organization. What\'s more, MUI\'s well-architected customization system has allowed us to differentiate ourselves in the marketplace."',
+      '"MUI looks great and lets us deliver fast, thanks to their solid API design and documentation - it\'s refreshing to use a component library where you get everything you need from their site rather than Stack Overflow. We think the upcoming version, with extra themes and customizability, will make MUI even more of a game changer. We\'re extremely grateful to the team for the time and effort spent maintaining the project."',
     profile: {
-      avatarSrc: 'https://avatars.githubusercontent.com/u/28296253?s=58',
-      avatarSrcSet: 'https://avatars.githubusercontent.com/u/28296253?s=116 2x',
-      name: 'Joona Rahko',
-      role: 'Staff Software Engineer',
+      avatarSrc: 'https://avatars.githubusercontent.com/u/197016?s=58',
+      avatarSrcSet: 'https://avatars.githubusercontent.com/u/197016?s=116 2x',
+      name: 'Jean-Laurent de Morlhon',
+      role: 'VP of Engineering',
       company: (
         <img
-          src="/static/branding/companies/unity-blue.svg"
-          width="56"
+          src="/static/branding/companies/docker-blue.svg"
+          width="81"
           height="21"
-          alt="Unity logo"
+          alt="Docker logo"
           loading="lazy"
         />
       ),
@@ -74,18 +74,18 @@ const TESTIMONIALS = [
   },
   {
     quote:
-      '"MUI looks great and lets us deliver fast, thanks to their solid API design and documentation - it\'s refreshing to use a component library where you get everything you need from their site rather than Stack Overflow. We think the upcoming version, with extra themes and customizability, will make MUI even more of a game changer. We\'re extremely grateful to the team for the time and effort spent maintaining the project."',
+      '"MUI offers a wide variety of high quality components that have allowed us to ship features faster. MUI has been used by more than a hundred engineers in our organization. What\'s more, MUI\'s well architected customization system has allowed us to differentiate ourselves in the marketplace."',
     profile: {
-      avatarSrc: 'https://avatars.githubusercontent.com/u/197016?s=58',
-      avatarSrcSet: 'https://avatars.githubusercontent.com/u/197016?s=116 2x',
-      name: 'Jean-Laurent de Morlhon',
-      role: 'VP of Engineering',
+      avatarSrc: 'https://avatars.githubusercontent.com/u/28296253?s=58',
+      avatarSrcSet: 'https://avatars.githubusercontent.com/u/28296253?s=116 2x',
+      name: 'Joona Rahko',
+      role: 'Staff Software Engineer',
       company: (
         <img
-          src="/static/branding/companies/docker-blue.svg"
-          width="81"
+          src="/static/branding/companies/unity-blue.svg"
+          width="56"
           height="21"
-          alt="Docker logo"
+          alt="Unity logo"
           loading="lazy"
         />
       ),
diff --git a/docs/src/components/home/ValueProposition.tsx b/docs/src/components/home/ValueProposition.tsx
index 8c9829fb75c2a0..68ab2e3afaa85c 100644
--- a/docs/src/components/home/ValueProposition.tsx
+++ b/docs/src/components/home/ValueProposition.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid';
+import Section from 'docs/src/layouts/Section';
 import GradientText from 'docs/src/components/typography/GradientText';
 import InvertColorsRoundedIcon from '@mui/icons-material/InvertColorsRounded';
 import HandymanRoundedIcon from '@mui/icons-material/HandymanRounded';
@@ -40,31 +40,69 @@ const content = [
 
 function ValueProposition() {
   return (
-    <Container sx={{ py: { xs: 4, sm: 6, md: 8 } }}>
+    <Section>
       <SectionHeadline
         overline="Why build with MUI?"
         title={
           <Typography variant="h2" sx={{ mt: 1, mb: { xs: 2, sm: 4 }, maxWidth: 500 }}>
-            A <GradientText>delightful</GradientText> experience for you and your users
+            A <GradientText>delightful experience</GradientText> <br />
+            for you and your users
           </Typography>
         }
       />
-      <Grid container spacing={2}>
+      <Grid container spacing={3}>
         {content.map(({ icon, title, description }) => (
-          <Grid key={title} item xs={12} sm={6} md={3}>
-            <Paper variant="outlined" sx={{ p: 2, height: '100%' }}>
-              <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+          <Grid key={title} item xs={12} sm={3}>
+            <Paper
+              variant="outlined"
+              sx={(theme) => ({
+                p: 3,
+                height: '100%',
+                position: 'relative',
+                borderRadius: 1,
+                border: '1px solid',
+                borderColor: (theme.vars || theme).palette.grey[100],
+                background: (theme.vars || theme).palette.gradients.linearSubtle,
+                ...theme.applyDarkStyles({
+                  bgcolor: (theme.vars || theme).palette.primaryDark[900],
+                  borderColor: (theme.vars || theme).palette.primaryDark[700],
+                  background: (theme.vars || theme).palette.gradients.linearSubtle,
+                }),
+              })}
+            >
+              <Box
+                sx={(theme) => ({
+                  width: 40,
+                  height: 40,
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  borderRadius: 1,
+                  border: '1px solid',
+                  borderColor: (theme.vars || theme).palette.primary[200],
+                  bgcolor: (theme.vars || theme).palette.primary[50],
+                  boxShadow:
+                    '0px 1px 6px 0px rgba(194, 224, 255, 1), 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset',
+                  ...theme.applyDarkStyles({
+                    borderColor: (theme.vars || theme).palette.primary[400],
+                    bgcolor: (theme.vars || theme).palette.primary[900],
+                    boxShadow:
+                      '0px 1px 6px 0px rgba(0, 89, 178, 1), 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset',
+                  }),
+                })}
+              >
                 {icon}
-                <Typography
-                  fontWeight="bold"
-                  component="h3"
-                  color="text.primary"
-                  variant="body2"
-                  sx={{ ml: 1 }}
-                >
-                  {title}
-                </Typography>
               </Box>
+              <Typography
+                fontWeight="bold"
+                component="h3"
+                variant="body2"
+                color="text.primary"
+                gutterBottom
+                mt={2}
+              >
+                {title}
+              </Typography>
               <Typography variant="body2" color="text.secondary">
                 {description}
               </Typography>
@@ -72,7 +110,7 @@ function ValueProposition() {
           </Grid>
         ))}
       </Grid>
-    </Container>
+    </Section>
   );
 }
 
diff --git a/docs/src/components/home/XGridGlobalStyles.tsx b/docs/src/components/home/XGridGlobalStyles.tsx
index 3f7fda22fd72bd..5bad2522a45f08 100644
--- a/docs/src/components/home/XGridGlobalStyles.tsx
+++ b/docs/src/components/home/XGridGlobalStyles.tsx
@@ -22,6 +22,7 @@ export default function XGridGlobalStyles({
               // toolbar
               // style GridToolbar
               '& .MuiDataGrid-toolbarContainer': {
+                flexShrink: 0,
                 padding: theme.spacing(1, 1, 0.5, 1),
                 '& > button': {
                   flexShrink: 0,
diff --git a/docs/src/components/markdown/MarkdownElement.tsx b/docs/src/components/markdown/MarkdownElement.tsx
index 743acee35aeded..37eda97a4d1289 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: (theme.vars || theme).palette.primaryDark[800],
+    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', // fallback color until Prism's theme is loaded
     overflow: 'auto',
     margin: 0,
diff --git a/docs/src/components/pricing/EarlyBird.tsx b/docs/src/components/pricing/EarlyBird.tsx
index ab1edb6738e141..6babff9cd1b4e7 100644
--- a/docs/src/components/pricing/EarlyBird.tsx
+++ b/docs/src/components/pricing/EarlyBird.tsx
@@ -6,6 +6,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import Link from 'docs/src/modules/components/Link';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
+import { alpha } from '@mui/material/styles';
 
 export default function EarlyBird() {
   return (
@@ -20,10 +21,13 @@ export default function EarlyBird() {
       <Stack
         sx={(theme) => ({
           borderRadius: 1,
-          p: 2,
-          bgcolor: 'primary.50',
+          px: 2,
+          py: 3,
+          background: `linear-gradient(180deg, ${alpha(theme.palette.primary[50], 0.2)}  50%, 
+          ${(theme.vars || theme).palette.primary[50]} 100%)
+          `,
           border: '1px solid',
-          borderColor: 'primary.100',
+          borderColor: 'grey.100',
           display: 'flex',
           flexDirection: {
             xs: 'column',
@@ -35,8 +39,10 @@ export default function EarlyBird() {
             sm: 'center',
           },
           ...theme.applyDarkStyles({
-            bgcolor: 'primaryDark.900',
-            borderColor: 'primaryDark.500',
+            background: `linear-gradient(180deg, ${alpha(theme.palette.primary[900], 0.4)}  50%, 
+            ${alpha(theme.palette.primary[800], 0.6)} 100%)
+            `,
+            borderColor: 'primaryDark.600',
           }),
         })}
       >
@@ -62,7 +68,7 @@ export default function EarlyBird() {
             flexShrink: 0,
             ml: { xs: 0, sm: 2 },
             mt: { xs: 3, sm: 0 },
-            width: { xs: '100%', sm: '50%', md: '15%' },
+            width: { xs: '100%', sm: '50%', md: 'fit-content' },
           }}
         >
           Buy now
diff --git a/docs/src/components/pricing/HeroPricing.tsx b/docs/src/components/pricing/HeroPricing.tsx
index b0b576a3a914f9..b5e558347ae75f 100644
--- a/docs/src/components/pricing/HeroPricing.tsx
+++ b/docs/src/components/pricing/HeroPricing.tsx
@@ -9,31 +9,22 @@ export default function HeroPricing() {
     <Container>
       <Box
         sx={{
-          height: '32vh',
+          height: '30vh',
           display: 'flex',
           flexDirection: 'column',
           justifyContent: 'center',
           alignItems: 'center',
         }}
       >
-        <Typography
-          component="h1"
-          variant="body2"
-          sx={(theme) => ({
-            color: 'primary.600',
-            ...theme.applyDarkStyles({
-              color: 'primary.400',
-            }),
-          })}
-          fontWeight="bold"
-        >
+        <Typography component="h1" variant="body2" color="primary.main" fontWeight="bold">
           Pricing
         </Typography>
         <Typography variant="h2" sx={{ my: 1 }}>
           Start using <GradientText>MUI</GradientText> for free!
         </Typography>
         <Typography color="text.secondary" textAlign="center" sx={{ maxWidth: 500 }}>
-          Switch to a commercial plan to access advanced features & technical support.
+          Switch to a commercial plan to access advanced
+          <br /> features & technical support.
         </Typography>
       </Box>
     </Container>
diff --git a/docs/src/components/pricing/PricingFAQ.tsx b/docs/src/components/pricing/PricingFAQ.tsx
index f85656d7d5e4d8..eafc33c9e94e6f 100644
--- a/docs/src/components/pricing/PricingFAQ.tsx
+++ b/docs/src/components/pricing/PricingFAQ.tsx
@@ -2,7 +2,6 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
 import Link from '@mui/material/Link';
 import Paper from '@mui/material/Paper';
@@ -11,6 +10,7 @@ import MuiAccordion from '@mui/material/Accordion';
 import MuiAccordionSummary from '@mui/material/AccordionSummary';
 import MuiAccordionDetail from '@mui/material/AccordionDetails';
 import KeyboardArrowDownRounded from '@mui/icons-material/KeyboardArrowDownRounded';
+import Section from 'docs/src/layouts/Section';
 
 const faqData = [
   {
@@ -260,7 +260,7 @@ export default function PricingFAQ() {
     );
   }
   return (
-    <Container sx={{ py: { xs: 4, sm: 6, md: 8 } }}>
+    <Section cozy>
       <Typography id="faq" variant="h2" sx={{ mb: { xs: 2, sm: 4 } }}>
         Frequently asked questions
       </Typography>
@@ -310,6 +310,6 @@ export default function PricingFAQ() {
           </Paper>
         </Grid>
       </Grid>
-    </Container>
+    </Section>
   );
 }
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index ff1dc6c5463421..2772d9facd0460 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -384,6 +384,8 @@ function RowHead({ children, startIcon, ...props }: BoxProps & { startIcon?: Rea
           display: 'flex',
           alignItems: 'center',
           bgcolor: 'grey.50',
+          border: '1px solid',
+          borderColor: 'divider',
         },
         (theme) =>
           theme.applyDarkStyles({
@@ -1089,7 +1091,7 @@ export default function PricingTable({
   const renderRow = (key: string) => renderMasterRow(key, gridSx, plans);
 
   return (
-    <Box ref={tableRef} {...props} sx={{ pt: 2, pb: 8, ...props.sx }}>
+    <Box ref={tableRef} {...props} sx={{ pt: 8, pb: 8, ...props.sx }}>
       <StickyHead container={tableRef} disableCalculation={columnHeaderHidden} />
       {!columnHeaderHidden && (
         <Box sx={gridSx}>
diff --git a/docs/src/components/pricing/PricingWhatToExpect.tsx b/docs/src/components/pricing/PricingWhatToExpect.tsx
index 9d740a2ad47f38..bd7318323f99fc 100644
--- a/docs/src/components/pricing/PricingWhatToExpect.tsx
+++ b/docs/src/components/pricing/PricingWhatToExpect.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import Paper from '@mui/material/Paper';
 import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
@@ -9,206 +8,194 @@ import AllInclusiveOutlinedIcon from '@mui/icons-material/AllInclusiveOutlined';
 import ReplayRoundedIcon from '@mui/icons-material/ReplayRounded';
 import AcUnitIcon from '@mui/icons-material/AcUnit';
 import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined';
+import Section from 'docs/src/layouts/Section';
 import Link from 'docs/src/modules/components/Link';
 import GradientText from 'docs/src/components/typography/GradientText';
 
 export default function PricingWhatToExpect() {
   return (
-    <Box
-      sx={(theme) => ({
-        background: `linear-gradient(0deg, ${
-          (theme.vars || theme).palette.grey[50]
-        } 0%, #FFFFFF 100%)`,
-        ...theme.applyDarkStyles({
-          background: `linear-gradient(0deg, ${
-            (theme.vars || theme).palette.primaryDark[900]
-          } 0%, #001E3C 100%)`,
-        }),
-      })}
-    >
-      <Container sx={{ py: { xs: 4, sm: 6, md: 8 } }} id="what-to-expect">
-        <Typography
-          variant="h2"
-          sx={{ maxWidth: { xs: 280, sm: 320, md: 400 }, mb: { xs: 2, sm: 4 } }}
-        >
-          Key information about <GradientText>the paid plans</GradientText>
-        </Typography>
-        <Box
-          display="grid"
-          gap={2}
-          sx={{
-            gridTemplateColumns: {
-              sm: 'repeat(1, minmax(0, 1fr))',
-              md: 'repeat(2, minmax(0, 1fr))',
-              lg: 'repeat(3, minmax(0, 1fr))',
-            },
-          }}
-        >
-          <Box display="flex" flexDirection="column" gap={2}>
-            <Paper variant="outlined" sx={{ p: 2, height: 'fit-content' }}>
-              <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
-                <AcUnitIcon fontSize="small" color="primary" />
-                <Typography
-                  fontWeight="bold"
-                  component="h3"
-                  color="text.primary"
-                  variant="body2"
-                  sx={{ ml: 1 }}
-                >
-                  Perpetual license type
-                </Typography>
-              </Box>
-              <Typography variant="body2" color="text.secondary" component="div">
-                The Perpetual license type offers the right to keep using your licensed versions
-                forever in production and development. It comes with 12 months of maintenance (free
-                updates & support).
-                <br />
-                Upon expiration, you can renew your maintenance plan with a discount that depends on
-                when you renew:
-                <ul>
-                  <li>before the suppord expires: 50% discount</li>
-                  <li>up to 60 days after the support has expired: 25% discount</li>
-                  <li>more than 60 days after the support has expired: 10% discount</li>
-                </ul>
+    <Section id="what-to-expect">
+      <Typography
+        variant="h2"
+        sx={{ maxWidth: { xs: 280, sm: 320, md: 400 }, mb: { xs: 2, sm: 4 } }}
+      >
+        Key information about <GradientText>the paid plans</GradientText>
+      </Typography>
+      <Box
+        display="grid"
+        gap={3}
+        sx={{
+          gridTemplateColumns: {
+            sm: 'repeat(1, minmax(0, 1fr))',
+            md: 'repeat(2, minmax(0, 1fr))',
+            lg: 'repeat(3, minmax(0, 1fr))',
+          },
+        }}
+      >
+        <Box display="flex" flexDirection="column" gap={3}>
+          <Paper variant="outlined" sx={{ p: 2, height: 'fit-content' }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+              <AcUnitIcon fontSize="small" color="primary" />
+              <Typography
+                fontWeight="bold"
+                component="h3"
+                color="text.primary"
+                variant="body2"
+                sx={{ ml: 1 }}
+              >
+                Perpetual license type
               </Typography>
-            </Paper>
-            <Paper variant="outlined" sx={{ p: 2, height: 'fit-content', gridColumn: 'span 1' }}>
-              <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
-                <FunctionsIcon fontSize="small" color="primary" />
-                <Typography
-                  fontWeight="bold"
-                  component="h3"
-                  color="text.primary"
-                  variant="body2"
-                  sx={{ ml: 1 }}
-                >
-                  Required quantity
-                </Typography>
-              </Box>
-              <Typography variant="body2" color="text.secondary">
-                The number of developers licensed must correspond to the maximum number of
-                concurrent developers contributing changes to the front-end code of the projects
-                that use the software.
-                <br />
-                You can learn more about this in{' '}
-                <Link
-                  target="_blank"
-                  rel="noopener"
-                  href="https://mui.com/legal/mui-x-eula/#required-quantity-of-licenses"
-                >
-                  the EULA
-                </Link>
-                .
+            </Box>
+            <Typography variant="body2" color="text.secondary" component="div">
+              The Perpetual license type offers the right to keep using your licensed versions
+              forever in production and development. It comes with 12 months of maintenance (free
+              updates & support).
+              <br />
+              Upon expiration, you can renew your maintenance plan with a discount that depends on
+              when you renew:
+              <ul>
+                <li>before the suppord expires: 50% discount</li>
+                <li>up to 60 days after the support has expired: 25% discount</li>
+                <li>more than 60 days after the support has expired: 10% discount</li>
+              </ul>
+            </Typography>
+          </Paper>
+          <Paper variant="outlined" sx={{ p: 2, height: 'fit-content', gridColumn: 'span 1' }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+              <FunctionsIcon fontSize="small" color="primary" />
+              <Typography
+                fontWeight="bold"
+                component="h3"
+                color="text.primary"
+                variant="body2"
+                sx={{ ml: 1 }}
+              >
+                Required quantity
               </Typography>
-            </Paper>
-          </Box>
-          <Box display="flex" flexDirection="column" gap={2}>
-            <Paper variant="outlined" sx={{ p: 2, height: 'fit-content' }}>
-              <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
-                <AllInclusiveOutlinedIcon fontSize="small" color="primary" />
-                <Typography
-                  fontWeight="bold"
-                  component="h3"
-                  color="text.primary"
-                  variant="body2"
-                  sx={{ ml: 1 }}
-                >
-                  Perpetual vs. Annual license type
-                </Typography>
-              </Box>
-              <Typography variant="body2" color="text.secondary">
-                On both license types, any version released before the end of your license term is
-                forever available for applications deployed in production.
-                <br />
-                The difference regards the right to use the components for development purposes.
-                Only the perpetual license type allows you to continue development once your license
-                expires.
+            </Box>
+            <Typography variant="body2" color="text.secondary">
+              The number of developers licensed must correspond to the maximum number of concurrent
+              developers contributing changes to the front-end code of the projects that use the
+              software.
+              <br />
+              You can learn more about this in{' '}
+              <Link
+                target="_blank"
+                rel="noopener"
+                href="https://mui.com/legal/mui-x-eula/#required-quantity-of-licenses"
+              >
+                the EULA
+              </Link>
+              .
+            </Typography>
+          </Paper>
+        </Box>
+        <Box display="flex" flexDirection="column" gap={3}>
+          <Paper variant="outlined" sx={{ p: 2, height: 'fit-content' }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+              <AllInclusiveOutlinedIcon fontSize="small" color="primary" />
+              <Typography
+                fontWeight="bold"
+                component="h3"
+                color="text.primary"
+                variant="body2"
+                sx={{ ml: 1 }}
+              >
+                Perpetual vs. Annual license type
               </Typography>
-            </Paper>
-            <Paper variant="outlined" sx={{ p: 2, height: 'fit-content' }}>
-              <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
-                <HelpOutlineOutlinedIcon fontSize="small" color="primary" />
-                <Typography
-                  fontWeight="bold"
-                  component="h3"
-                  color="text.primary"
-                  variant="body2"
-                  sx={{ ml: 1 }}
-                >
-                  Maintenance and support
-                </Typography>
-              </Box>
-              <Typography variant="body2" color="text.secondary">
-                With your purchase, you receive support and access to new versions for the duration
-                of your subscription. You can{' '}
-                <Link href="https://mui.com/x/introduction/support/#technical-support">
-                  learn more about support
-                </Link>{' '}
-                in the docs. Note that, except for critical issues, such as security flaws, we
-                release bug fixes and other improvements on top of the latest version, instead of
-                patching older versions.
+            </Box>
+            <Typography variant="body2" color="text.secondary">
+              On both license types, any version released before the end of your license term is
+              forever available for applications deployed in production.
+              <br />
+              The difference regards the right to use the components for development purposes. Only
+              the perpetual license type allows you to continue development once your license
+              expires.
+            </Typography>
+          </Paper>
+          <Paper variant="outlined" sx={{ p: 2, height: 'fit-content' }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+              <HelpOutlineOutlinedIcon fontSize="small" color="primary" />
+              <Typography
+                fontWeight="bold"
+                component="h3"
+                color="text.primary"
+                variant="body2"
+                sx={{ ml: 1 }}
+              >
+                Maintenance and support
               </Typography>
-            </Paper>
-          </Box>
-          <Box display="flex" flexDirection="column" gap={2}>
-            <Paper variant="outlined" sx={{ p: 2, height: 'fit-content' }}>
-              <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
-                <ReplayRoundedIcon fontSize="small" color="primary" />
-                <Typography
-                  fontWeight="bold"
-                  component="h3"
-                  color="text.primary"
-                  variant="body2"
-                  sx={{ ml: 1 }}
-                >
-                  Annual license type
-                </Typography>
-              </Box>
-              <Typography variant="body2" color="text.secondary">
-                The Annual license type requires an active license to use the software in
-                development. You will need to renew your license if you wish to continue active
-                development after your current license term expires.
-                <br />
-                <br />
-                The license is perpetual in production so you {"don't"} need to renew your license
-                if you have stopped active development with the commercial components.
-                <br />
-                <br />
-                You can learn more about this in{' '}
-                <Link
-                  target="_blank"
-                  rel="noopener"
-                  href="https://mui.com/legal/mui-x-eula/#perpetual-in-production"
-                >
-                  the EULA
-                </Link>
-                .
+            </Box>
+            <Typography variant="body2" color="text.secondary">
+              With your purchase, you receive support and access to new versions for the duration of
+              your subscription. You can{' '}
+              <Link href="https://mui.com/x/introduction/support/#technical-support">
+                learn more about support
+              </Link>{' '}
+              in the docs. Note that, except for critical issues, such as security flaws, we release
+              bug fixes and other improvements on top of the latest version, instead of patching
+              older versions.
+            </Typography>
+          </Paper>
+        </Box>
+        <Box display="flex" flexDirection="column" gap={3}>
+          <Paper variant="outlined" sx={{ p: 2, height: 'fit-content' }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+              <ReplayRoundedIcon fontSize="small" color="primary" />
+              <Typography
+                fontWeight="bold"
+                component="h3"
+                color="text.primary"
+                variant="body2"
+                sx={{ ml: 1 }}
+              >
+                Annual license type
               </Typography>
-            </Paper>
-            <Paper variant="outlined" sx={{ p: 2, height: 'fit-content' }}>
-              <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
-                <LocalOfferOutlinedIcon fontSize="small" color="primary" />
-                <Typography
-                  fontWeight="bold"
-                  component="h3"
-                  color="text.primary"
-                  variant="body2"
-                  sx={{ ml: 1 }}
-                >
-                  Volume discounts
-                </Typography>
-              </Box>
-              <Typography variant="body2" color="text.secondary">
-                The Pro plan is capped at 10 developers licensed; you do not need to pay for
-                additional licenses for more than 10 developers.
-                <br />
-                You can contact <Link href="mailto:sales@mui.com">sales</Link> for a volume discount
-                when licensing over 25 developers under the Premium plan.
+            </Box>
+            <Typography variant="body2" color="text.secondary">
+              The Annual license type requires an active license to use the software in development.
+              You will need to renew your license if you wish to continue active development after
+              your current license term expires.
+              <br />
+              <br />
+              The license is perpetual in production so you {"don't"} need to renew your license if
+              you have stopped active development with the commercial components.
+              <br />
+              <br />
+              You can learn more about this in{' '}
+              <Link
+                target="_blank"
+                rel="noopener"
+                href="https://mui.com/legal/mui-x-eula/#perpetual-in-production"
+              >
+                the EULA
+              </Link>
+              .
+            </Typography>
+          </Paper>
+          <Paper variant="outlined" sx={{ p: 2, height: 'fit-content' }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+              <LocalOfferOutlinedIcon fontSize="small" color="primary" />
+              <Typography
+                fontWeight="bold"
+                component="h3"
+                color="text.primary"
+                variant="body2"
+                sx={{ ml: 1 }}
+              >
+                Volume discounts
               </Typography>
-            </Paper>
-          </Box>
+            </Box>
+            <Typography variant="body2" color="text.secondary">
+              The Pro plan is capped at 10 developers licensed; you do not need to pay for
+              additional licenses for more than 10 developers.
+              <br />
+              You can contact <Link href="mailto:sales@mui.com">sales</Link> for a volume discount
+              when licensing over 25 developers under the Premium plan.
+            </Typography>
+          </Paper>
         </Box>
-      </Container>
-    </Box>
+      </Box>
+    </Section>
   );
 }
diff --git a/docs/src/components/productBaseUI/BaseUIComponents.tsx b/docs/src/components/productBaseUI/BaseUIComponents.tsx
new file mode 100644
index 00000000000000..28c7b4274b974f
--- /dev/null
+++ b/docs/src/components/productBaseUI/BaseUIComponents.tsx
@@ -0,0 +1,234 @@
+import * as React from 'react';
+import { styled as materialStyled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+import GradientText from 'docs/src/components/typography/GradientText';
+import Item, { Group } from 'docs/src/components/action/Item';
+import Highlighter from 'docs/src/components/action/Highlighter';
+import Section from 'docs/src/layouts/Section';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
+import Grid from '@mui/material/Unstable_Grid2';
+import Typography from '@mui/material/Typography';
+import More from 'docs/src/components/action/More';
+import Frame from 'docs/src/components/action/Frame';
+import ROUTES from 'docs/src/route';
+
+// switcher icons
+import SmartButtonRoundedIcon from '@mui/icons-material/SmartButtonRounded';
+import TabUnselectedRoundedIcon from '@mui/icons-material/TabUnselectedRounded';
+import InputRoundedIcon from '@mui/icons-material/InputRounded';
+import MenuOpenRoundedIcon from '@mui/icons-material/MenuOpenRounded';
+import LinearScaleRoundedIcon from '@mui/icons-material/LinearScaleRounded';
+
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
+import BaseButtonDemo from './components/BaseButtonDemo';
+import BaseMenuDemo from './components/BaseMenuDemo';
+import BaseInputDemo from './components/BaseInputDemo';
+import BaseTabsDemo from './components/BaseTabsDemo';
+import BaseSliderDemo from './components/BaseSliderDemo';
+
+const StyledButton = materialStyled(Button)(({ theme }) => ({
+  borderRadius: 40,
+  padding: theme.spacing('2px', 1),
+  fontSize: theme.typography.pxToRem(12),
+  lineHeight: 18 / 12,
+  '&.MuiButton-text': {
+    color: theme.palette.grey[500],
+    border: '1px solid',
+    borderColor: theme.palette.primaryDark[700],
+    '&:hover': {
+      backgroundColor: theme.palette.primaryDark[700],
+    },
+  },
+  '&.MuiButton-outlined': {
+    color: '#fff',
+    backgroundColor: 'var(--palette-primary-dark)',
+    borderColor: 'var(--palette-primary)',
+  },
+}));
+
+const DEMOS = ['Tabs', 'Button', 'Input', 'Menu', 'Slider'] as const;
+
+const CODES: Record<
+  (typeof DEMOS)[number],
+  string | ((styling: 'system' | 'tailwindcss' | 'css') => string)
+> = {
+  Button: BaseButtonDemo.getCode,
+  Menu: BaseMenuDemo.getCode,
+  Input: BaseInputDemo.getCode,
+  Tabs: BaseTabsDemo.getCode,
+  Slider: BaseSliderDemo.getCode,
+};
+
+export default function BaseUIComponents() {
+  const [styling, setStyling] = React.useState<'system' | 'tailwindcss' | 'css'>('system');
+  const [demo, setDemo] = React.useState<(typeof DEMOS)[number]>(DEMOS[0]);
+  const icons = {
+    [DEMOS[0]]: <TabUnselectedRoundedIcon fontSize="small" />,
+    [DEMOS[1]]: <SmartButtonRoundedIcon fontSize="small" />,
+    [DEMOS[2]]: <InputRoundedIcon fontSize="small" />,
+    [DEMOS[3]]: <MenuOpenRoundedIcon fontSize="small" />,
+    [DEMOS[4]]: <LinearScaleRoundedIcon fontSize="small" />,
+  };
+  return (
+    <Section bg="gradient">
+      <Grid container spacing={2}>
+        <Grid md={6} sx={{ minWidth: 0 }}>
+          <Box maxWidth={500} sx={{ mb: 4 }}>
+            <SectionHeadline
+              overline="Unstyled components"
+              title={
+                <Typography variant="h2">
+                  Choose your own
+                  <br /> <GradientText>CSS adventure</GradientText>
+                </Typography>
+              }
+              description="Base UI’s skeletal components give you a sturdy foundation to apply custom styles with ease. With no defaults to override, you’re free to start from scratch using vanilla CSS, Tailwind CSS, MUI System, or any other framework you prefer."
+            />
+          </Box>
+          <Group desktopColumns={2} sx={{ m: -2, p: 2 }}>
+            {DEMOS.map((name) => (
+              <Highlighter key={name} selected={name === demo} onClick={() => setDemo(name)}>
+                <Item icon={React.cloneElement(icons[name])} title={name} />
+              </Highlighter>
+            ))}
+            <More href={ROUTES.baseComponents} />
+          </Group>
+        </Grid>
+        <Grid xs={12} md={6}>
+          <Frame
+            sx={[
+              {
+                height: '100%',
+                '--palette-primary': 'var(--muidocs-palette-primary-main)',
+                '--palette-primary-light': 'var(--muidocs-palette-primary-300)',
+                '--palette-primary-hover': 'var(--muidocs-palette-primary-600)',
+                '--palette-primary-dark': 'var(--muidocs-palette-primary-800)',
+                '--focus-ring': 'rgba(102, 178, 255, 0.3)',
+                '--shadow': '0px 2px 2px rgba(205, 210, 215, 0.5)',
+                ...(styling === 'tailwindcss' && {
+                  '--palette-primary': '#4F46E5',
+                  '--palette-primary-light': '#7B74EC',
+                  '--palette-primary-hover': '#463EC6',
+                  '--palette-primary-dark': '#3730A3',
+                  '--focus-ring': 'rgba(165, 180, 252, 0.6)',
+                  '--shadow': '0px 2px 2px rgba(205, 210, 215, 0.5)',
+                }),
+                ...(styling === 'css' && {
+                  '--palette-primary': '#9333EA',
+                  '--palette-primary-light': '#AC62EF',
+                  '--palette-hover': '#7F17DE',
+                  '--palette-primary-dark': '#581C87',
+                  '--focus-ring': 'rgba(216, 180, 254, 0.6)',
+                  '--shadow': '0px 2px 2px rgba(205, 210, 215, 0.5)',
+                }),
+              },
+              (theme) =>
+                theme.applyDarkStyles({
+                  '--focus-ring': 'rgba(102, 178, 255, 0.3)',
+                  '--shadow': '0px 2px 2px rgba(0, 0, 0, 0.5)',
+                  ...(styling === 'tailwindcss' && {
+                    '--palette-primary': '#5B69F6',
+                    '--palette-primary-hover': '#3446F4',
+                    '--focus-ring': 'rgba(123, 120, 207, 0.6)',
+                    '--shadow': '0px 2px 2px rgba(0, 0, 0, 0.5)',
+                  }),
+                  ...(styling === 'css' && {
+                    '--palette-primary': '#B56FFB',
+                    '--palette-primary-hover': '#A651FB',
+                    '--focus-ring': 'rgba(166, 94, 222, 0.6)',
+                    '--shadow': '0px 2px 2px rgba(0, 0, 0, 0.5)',
+                  }),
+                }),
+            ]}
+          >
+            <Frame.Demo className="mui-default-theme" sx={{ flexGrow: 1 }}>
+              {demo === 'Tabs' && <BaseTabsDemo styling={styling} />}
+              {demo === 'Button' && <BaseButtonDemo styling={styling} />}
+              {demo === 'Menu' && <BaseMenuDemo styling={styling} />}
+              {demo === 'Input' && <BaseInputDemo styling={styling} />}
+              {demo === 'Slider' && <BaseSliderDemo styling={styling} />}
+            </Frame.Demo>
+            <Frame.Info
+              sx={{
+                height: 360,
+                position: 'relative',
+                overflow: 'hidden',
+                pt: 5,
+              }}
+            >
+              <Box
+                sx={{
+                  height: 'calc(100% + 40px)',
+                  overflow: 'auto',
+                  m: -2,
+                  p: 2,
+                  pt: 3,
+                }}
+              >
+                <HighlightedCode
+                  copyButtonHidden
+                  component={MarkdownElement}
+                  code={(() => {
+                    const result = CODES[demo];
+                    if (typeof result === 'function') {
+                      return result(styling);
+                    }
+                    return result;
+                  })()}
+                  language="jsx"
+                />
+              </Box>
+              <Box
+                sx={(theme) => ({
+                  pb: 3,
+                  display: 'flex',
+                  alignItems: 'center',
+                  position: 'absolute',
+                  top: 12,
+                  left: 16,
+                  right: 0,
+                  zIndex: 10,
+                  background: `linear-gradient(to bottom, ${
+                    (theme.vars || theme).palette.common.black
+                  } 30%, transparent)`,
+                })}
+              >
+                <StyledButton
+                  size="small"
+                  variant={styling === 'system' ? 'outlined' : 'text'}
+                  onClick={() => {
+                    setStyling('system');
+                  }}
+                >
+                  MUI System
+                </StyledButton>
+                <StyledButton
+                  size="small"
+                  variant={styling === 'tailwindcss' ? 'outlined' : 'text'}
+                  onClick={() => {
+                    setStyling('tailwindcss');
+                  }}
+                  sx={{ ml: 1 }}
+                >
+                  Tailwind CSS
+                </StyledButton>
+                <StyledButton
+                  size="small"
+                  variant={styling === 'css' ? 'outlined' : 'text'}
+                  onClick={() => {
+                    setStyling('css');
+                  }}
+                  sx={{ ml: 1 }}
+                >
+                  Plain CSS
+                </StyledButton>
+              </Box>
+            </Frame.Info>
+          </Frame>
+        </Grid>
+      </Grid>
+    </Section>
+  );
+}
diff --git a/docs/src/components/productBaseUI/BaseUICustomization.tsx b/docs/src/components/productBaseUI/BaseUICustomization.tsx
new file mode 100644
index 00000000000000..cfb49dc21faeb5
--- /dev/null
+++ b/docs/src/components/productBaseUI/BaseUICustomization.tsx
@@ -0,0 +1,306 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import clsx from 'clsx';
+import SwitchUnstyled from '@mui/base/Switch';
+import useSwitch, { UseSwitchParameters } from '@mui/base/useSwitch';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import SvgTwinkle from 'docs/src/icons/SvgTwinkle';
+import Section from 'docs/src/layouts/Section';
+import Highlighter from 'docs/src/components/action/Highlighter';
+import Item, { Group } from 'docs/src/components/action/Item';
+import GradientText from 'docs/src/components/typography/GradientText';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
+import FlashCode from 'docs/src/components/animation/FlashCode';
+import Frame from 'docs/src/components/action/Frame';
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
+
+const code = `
+import clsx from 'clsx';
+import { styled } from '@mui/system';
+import SwitchUnstyled from '@mui/base/SwitchUnstyled';
+import useSwitch from '@mui/base/useSwitch';
+
+const StyledSwitchRoot = styled('span')(\`
+  font-size: 0;
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 24px;
+  margin: 10px;
+  cursor: pointer;
+  border-radius: 16px;
+  background: #A0AAB4;
+
+  &.Mui-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &.Mui-checked {
+    background: #007FFF;
+    & .MuiSwitch-thumb {
+      left: 20px;
+    }
+  }
+
+  &.Mui-focusVisible {
+    outline: 2px solid #007FFF;
+    outline-offset: 2px;
+  }
+\`);
+
+const StyledSwitchInput = styled('input')\`
+  cursor: inherit;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  z-index: 1;
+  margin: 0;
+\`;
+
+const StyledSwitchThumb = styled('span')\`
+  display: block;
+  width: 16px;
+  height: 16px;
+  top: 4px;
+  left: 4px;
+  border-radius: 16px;
+  background-color: #FFF;
+  position: relative;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 120ms;
+
+  &.Mui-checked {
+    left: 20px;
+  }
+\`;
+
+function SwitchFromHook(props) {
+  const {
+    getInputProps,
+    checked,
+    disabled,
+    focusVisible,
+  } = useSwitch(props);
+
+  const stateClasses = {
+    'Mui-checked': checked,
+    'Mui-disabled': disabled,
+    'Mui-focusVisible': focusVisible,
+  };
+
+  return (
+    <StyledSwitchRoot className={clsx(stateClasses)}>
+      <StyledSwitchThumb className={clsx(stateClasses)} />
+      <StyledSwitchInput {...getInputProps()} aria-label="Demo switch" />
+    </StyledSwitchRoot>
+  );
+}
+
+function App() {
+  return (
+    <SwitchUnstyled
+      slots={{
+        root: StyledSwitchRoot,
+        input: StyledSwitchInput,
+        thumb: StyledSwitchThumb,
+      }}
+    />
+    <SwitchFromHook />
+  )
+}
+`;
+
+const startLine = [6, 89, 64];
+const endLine = [26, 93, 84];
+const scrollTo = [0, 1400, 1140];
+
+const StyledSwitchRoot = styled('span')(`
+  font-size: 0;
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 24px;
+  margin: 10px;
+  cursor: pointer;
+  border-radius: 16px;
+  background: #A0AAB4;
+
+  &.Mui-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &.Mui-checked {
+    background: #007FFF;
+    & .MuiSwitch-thumb {
+      left: 20px;
+    }
+  }
+
+  &.Mui-focusVisible {
+    outline: 2px solid #007FFF;
+    outline-offset: 2px;
+  }
+`);
+
+const StyledSwitchInput = styled('input')`
+  cursor: inherit;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  z-index: 1;
+  margin: 0;
+`;
+
+const StyledSwitchThumb = styled('span')`
+  display: block;
+  width: 16px;
+  height: 16px;
+  top: 4px;
+  left: 4px;
+  border-radius: 16px;
+  background-color: #fff;
+  position: relative;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+
+  &.Mui-checked {
+    left: 20px;
+  }
+`;
+
+function SwitchFromHook(props: UseSwitchParameters) {
+  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
+
+  const stateClasses = {
+    'Mui-checked': checked,
+    'Mui-disabled': disabled,
+    'Mui-focusVisible': focusVisible,
+  };
+
+  return (
+    <StyledSwitchRoot className={clsx(stateClasses)}>
+      <StyledSwitchThumb className={clsx(stateClasses)} />
+      <StyledSwitchInput {...getInputProps()} aria-label="Demo switch" />
+    </StyledSwitchRoot>
+  );
+}
+
+export default function BaseUICustomization() {
+  const [index, setIndex] = React.useState(0);
+  const infoRef = React.useRef<HTMLDivElement | null>(null);
+  function getSelectedProps(i: number) {
+    return {
+      selected: index === i,
+      sx: { '& svg': { opacity: index === i ? 1 : 0.5 } },
+    };
+  }
+  React.useEffect(() => {
+    if (infoRef.current) {
+      infoRef.current.scroll({ top: scrollTo[index], behavior: 'smooth' });
+    }
+  }, [index]);
+  return (
+    <Section>
+      <Grid container spacing={2}>
+        <Grid item md={6} sx={{ minWidth: 0 }}>
+          <Box maxWidth={500} sx={{ mb: 4 }}>
+            <SectionHeadline
+              overline="Customization"
+              title={
+                <Typography variant="h2">
+                  <GradientText>Endless possibilities </GradientText>
+                  <br /> with a lightweight API
+                </Typography>
+              }
+              description="With Base UI, you have the freedom to decide how much you want to customize a component's structure and style."
+            />
+          </Box>
+          <Group sx={{ m: -2, p: 2 }}>
+            <Highlighter disableBorder {...getSelectedProps(0)} onClick={() => setIndex(0)}>
+              <Item
+                icon={<SvgTwinkle />}
+                title="Applying custom CSS rules"
+                description="Your CSS, your rules. With Base UI there are no styles to override, so you can start with a clean slate."
+              />
+            </Highlighter>
+            <Highlighter disableBorder {...getSelectedProps(1)} onClick={() => setIndex(1)}>
+              <Item
+                icon={<SvgTwinkle />}
+                title="Overriding subcomponent slots"
+                description="Default DOM structure doesn't suit your needs? Replace any node with the element you prefer using the `slots` prop."
+              />
+            </Highlighter>
+            <Highlighter disableBorder {...getSelectedProps(2)} onClick={() => setIndex(2)}>
+              <Item
+                icon={<SvgTwinkle />}
+                title="Creating custom components using hooks"
+                description="Base UI includes low-level hooks for adding functionality to your own fully custom-built components."
+              />
+            </Highlighter>
+          </Group>
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <Frame sx={{ height: '100%' }}>
+            <Frame.Demo
+              sx={(theme) => ({
+                overflow: 'auto',
+                flexGrow: 1,
+                height: '140px',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                backgroundSize: '100%, 72px',
+                background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
+                ...theme.applyDarkStyles({
+                  backgroundSize: '72px, 100%',
+                  background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
+                }),
+              })}
+            >
+              <SwitchUnstyled
+                slots={{
+                  root: StyledSwitchRoot,
+                  input: StyledSwitchInput,
+                  thumb: StyledSwitchThumb,
+                }}
+              />
+              <SwitchFromHook defaultChecked />
+            </Frame.Demo>
+            <Frame.Info
+              ref={infoRef}
+              sx={{
+                maxHeight: 450,
+                overflow: 'auto',
+              }}
+            >
+              <Box sx={{ position: 'relative', '&& pre': { bgcolor: 'transparent' } }}>
+                <Box sx={{ position: 'relative', zIndex: 1 }}>
+                  <HighlightedCode
+                    copyButtonHidden
+                    component={MarkdownElement}
+                    code={code}
+                    language="jsx"
+                  />
+                </Box>
+                <FlashCode startLine={startLine[index]} endLine={endLine[index]} sx={{ mx: -1 }} />
+              </Box>
+            </Frame.Info>
+          </Frame>
+        </Grid>
+      </Grid>
+    </Section>
+  );
+}
diff --git a/docs/src/components/productBaseUI/BaseUIEnd.tsx b/docs/src/components/productBaseUI/BaseUIEnd.tsx
new file mode 100644
index 00000000000000..a4bd619da68627
--- /dev/null
+++ b/docs/src/components/productBaseUI/BaseUIEnd.tsx
@@ -0,0 +1,140 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Unstable_Grid2';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import Typography from '@mui/material/Typography';
+import Section from 'docs/src/layouts/Section';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
+import GradientText from 'docs/src/components/typography/GradientText';
+import Link from 'docs/src/modules/components/Link';
+import CompareIcon from '@mui/icons-material/Compare';
+import StyleRoundedIcon from '@mui/icons-material/StyleRounded';
+import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
+import ROUTES from 'docs/src/route';
+import { alpha } from '@mui/material/styles';
+
+export default function BaseUIEnd() {
+  return (
+    <Section
+      data-mui-color-scheme="dark"
+      sx={{
+        color: 'text.secondary',
+        background: (theme) =>
+          `linear-gradient(180deg, ${(theme.vars || theme).palette.primaryDark[800]} 50%, 
+          ${alpha(theme.palette.primary[800], 0.2)} 100%), ${
+            (theme.vars || theme).palette.primaryDark[800]
+          }`,
+      }}
+    >
+      <Grid container spacing={{ xs: 6, sm: 10 }} alignItems="center">
+        <Grid xs={12} sm={6}>
+          <SectionHeadline
+            inverted
+            overline="Community"
+            title={
+              <Typography variant="h2">
+                Join our <GradientText>global community</GradientText>
+              </Typography>
+            }
+            description={
+              <React.Fragment>
+                Base UI wouldn&apos;t be possible without our global community of contributors. Join
+                us today to get help when you need it, and lend a hand when you can.
+              </React.Fragment>
+            }
+          />
+          <Button
+            href={ROUTES.baseDocs}
+            component={Link}
+            noLinkStyle
+            size="large"
+            variant="contained"
+            endIcon={<KeyboardArrowRightRounded />}
+            sx={{ mt: 2 }}
+          >
+            Get started
+          </Button>
+        </Grid>
+        <Grid xs={12} sm={6}>
+          <List sx={{ '& > li': { alignItems: 'flex-start' } }}>
+            <ListItem sx={{ p: 0, mb: 4 }}>
+              <Box
+                sx={(theme) => ({
+                  width: 40,
+                  height: 40,
+                  mr: 2.5,
+                  flexShrink: 0,
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  borderRadius: '12px',
+                  border: '1px solid',
+                  borderColor: 'primary.200',
+                  bgcolor: 'primary.50',
+                  boxShadow:
+                    '0px 1px 6px 0px rgba(194, 224, 255, 1), 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset',
+                  ...theme.applyDarkStyles({
+                    borderColor: 'primary.400',
+                    bgcolor: 'primary.900',
+                    boxShadow:
+                      '0px 1px 6px 0px rgba(0, 89, 178, 1), 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset',
+                  }),
+                })}
+              >
+                <CompareIcon color="primary" />
+              </Box>
+              <div>
+                <Typography sx={{ color: 'text.primary', mb: 0.75 }} fontWeight="500">
+                  Base UI vs. Material UI
+                </Typography>
+                <Typography>
+                  Base UI features many of the same components as Material UI, but without the
+                  Material Design implementation.
+                </Typography>
+              </div>
+            </ListItem>
+            <ListItem sx={{ p: 0 }}>
+              <Box
+                sx={(theme) => ({
+                  width: 40,
+                  height: 40,
+                  mr: 2.5,
+                  flexShrink: 0,
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  borderRadius: '12px',
+                  border: '1px solid',
+                  borderColor: 'primary.200',
+                  bgcolor: 'primary.50',
+                  boxShadow:
+                    '0px 1px 6px 0px rgba(194, 224, 255, 1), 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset',
+                  ...theme.applyDarkStyles({
+                    borderColor: 'primary.400',
+                    bgcolor: 'primary.900',
+                    boxShadow:
+                      '0px 1px 6px 0px rgba(0, 89, 178, 1), 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset',
+                  }),
+                })}
+              >
+                <StyleRoundedIcon color="primary" />
+              </Box>
+              <div>
+                <Typography sx={{ color: 'text.primary', mb: 0.75 }} fontWeight="500">
+                  Does it come with styles?
+                </Typography>
+                <Typography>
+                  Base UI <i>is not packaged</i> with any default theme or built-in style engine.
+                  This makes it a great choice if you need complete control over how your app&apos;s
+                  CSS is implemented.
+                </Typography>
+              </div>
+            </ListItem>
+          </List>
+        </Grid>
+      </Grid>
+    </Section>
+  );
+}
diff --git a/docs/src/components/productBaseUI/BaseUIHero.tsx b/docs/src/components/productBaseUI/BaseUIHero.tsx
new file mode 100644
index 00000000000000..677cd098bf1402
--- /dev/null
+++ b/docs/src/components/productBaseUI/BaseUIHero.tsx
@@ -0,0 +1,108 @@
+import * as React from 'react';
+import dynamic from 'next/dynamic';
+
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+// Local imports
+import HeroContainer from 'docs/src/layouts/HeroContainer';
+import IconImage from 'docs/src/components/icon/IconImage';
+import GradientText from 'docs/src/components/typography/GradientText';
+import ROUTES from 'docs/src/route';
+import GetStartedButtons2 from 'docs/src/components/home/GetStartedButtons2';
+import Link from 'docs/src/modules/components/Link';
+
+const BaseUIThemesDemo = dynamic(() => import('./BaseUIThemesDemo'), {
+  ssr: false,
+  loading: function Loading() {
+    return (
+      <Box
+        sx={[
+          (theme) => ({
+            width: 338,
+            height: 557,
+            borderRadius: '12px',
+            bgcolor: 'grey.100',
+            ...theme.applyDarkStyles({
+              bgcolor: 'primaryDark.800',
+            }),
+          }),
+        ]}
+      />
+    );
+  },
+});
+
+export default function BaseUIHero() {
+  return (
+    <HeroContainer
+      linearGradient
+      disableMobileHidden
+      left={
+        <Box sx={{ textAlign: { xs: 'center', md: 'left' }, ml: { xl: '-40px' } }}>
+          <Typography
+            fontWeight="bold"
+            variant="body2"
+            sx={(theme) => ({
+              color: 'primary.600',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 1,
+              justifyContent: { xs: 'center', md: 'flex-start' },
+              ...theme.applyDarkStyles({
+                color: 'primary.300',
+              }),
+            })}
+          >
+            <IconImage width={28} height={28} name="product-core" />{' '}
+            <Link href={ROUTES.productCore}>MUI Core</Link>{' '}
+            <Typography component="span" variant="inherit" sx={{ color: 'divider' }}>
+              /
+            </Typography>
+            <Typography component="span" variant="inherit" sx={{ color: 'text.primary' }}>
+              Base UI
+            </Typography>
+          </Typography>
+
+          <Typography
+            variant="h1"
+            sx={{
+              my: 2,
+              maxWidth: { xs: 500, md: 'unset' },
+              minWidth: { lg: 650 },
+              position: 'relative',
+              zIndex: 1,
+            }}
+          >
+            A <GradientText>blank canvas</GradientText> for <br />
+            total flexibility
+          </Typography>
+          <Typography color="text.secondary" sx={{ mb: 3, maxWidth: 500 }}>
+            Base UI gives you a set of foundational &quot;headless&quot; components that you can
+            build with using any styling solution you choose—no need to override any default style
+            engine or theme.
+          </Typography>
+          <GetStartedButtons2
+            getStartedUrl={ROUTES.baseDocs}
+            learnUrl={ROUTES.baseQuickstart}
+            learnLabel="Learn Base UI"
+            installation="npm install @mui/base"
+          />
+        </Box>
+      }
+      right={
+        <Box
+          sx={{
+            position: 'relative',
+            height: '100%',
+            padding: '16px',
+            display: 'flex',
+            '& > div': { margin: 'auto' },
+          }}
+        >
+          <BaseUIThemesDemo />
+        </Box>
+      }
+    />
+  );
+}
diff --git a/docs/src/components/productBaseUI/BaseUISummary.tsx b/docs/src/components/productBaseUI/BaseUISummary.tsx
new file mode 100644
index 00000000000000..0d6a058efa7750
--- /dev/null
+++ b/docs/src/components/productBaseUI/BaseUISummary.tsx
@@ -0,0 +1,151 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import GradientText from 'docs/src/components/typography/GradientText';
+import StyleRoundedIcon from '@mui/icons-material/StyleRounded';
+import AccessibilityNewRounded from '@mui/icons-material/AccessibilityNewRounded';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
+import PhishingRoundedIcon from '@mui/icons-material/PhishingRounded';
+import Link from 'docs/src/modules/components/Link';
+
+const content = [
+  {
+    icon: <StyleRoundedIcon color="primary" />,
+    title: 'Completely unstyled',
+    description: 'Nothing to override—start fresh with any style solution or design system.',
+    link: '/base-ui/getting-started/',
+  },
+  {
+    icon: <PhishingRoundedIcon color="primary" />,
+    title: 'Low-level hooks',
+    description:
+      "When it's time to go fully custom, Base UI has you covered with low-level hooks for fine-grained flexibility in component design.",
+    link: '/base-ui/getting-started/usage/#components-vs-hooks',
+  },
+  {
+    icon: <AccessibilityNewRounded color="primary" />,
+    title: 'Accessibility',
+    description:
+      'We take accessibility seriously. The Base UI docs are loaded with guidelines and best practices.',
+    link: '/base-ui/getting-started/quickstart/#components-and-hooks',
+  },
+];
+
+export default function BaseUISummary() {
+  return (
+    <Container sx={{ py: { xs: 6, sm: 10, md: 20 } }}>
+      <SectionHeadline
+        alwaysCenter
+        overline="Why Base UI"
+        title={
+          <Typography variant="h2" sx={{ mt: 1, maxWidth: 600, mx: 'auto' }}>
+            Essential building blocks
+            <br /> for <GradientText>sleek and accessible</GradientText> UIs
+          </Typography>
+        }
+        description="Base UI abstracts away the more frustrating aspects of UI development—like accessibility, cross-browser compatibility, and event handling—so you can skip ahead to design implementation."
+      />
+      <Box sx={{ mt: 8 }}>
+        <Grid container spacing={3}>
+          {content.map(({ icon, title, description, link }) => (
+            <Grid key={title} item xs={12} md={4}>
+              <Paper
+                component={Link}
+                href={link}
+                noLinkStyle
+                variant="outlined"
+                sx={(theme) => ({
+                  p: 4,
+                  height: '100%',
+                  background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
+                  ...theme.applyDarkStyles({
+                    bgcolor: 'primaryDark.900',
+                    background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
+                    borderColor: 'primaryDark.700',
+                  }),
+                })}
+              >
+                <Box
+                  sx={(theme) => ({
+                    width: 40,
+                    height: 40,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    borderRadius: 1,
+                    border: '1px solid',
+                    borderColor: 'primary.200',
+                    bgcolor: 'primary.50',
+                    boxShadow:
+                      '0px 1px 6px 0px rgba(194, 224, 255, 1), 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset',
+                    ...theme.applyDarkStyles({
+                      borderColor: 'primary.400',
+                      bgcolor: 'primary.900',
+                      boxShadow:
+                        '0px 1px 6px 0px rgba(0, 89, 178, 1), 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset',
+                    }),
+                  })}
+                >
+                  {icon}
+                </Box>
+                <Typography
+                  fontWeight="bold"
+                  component="h3"
+                  color="text.primary"
+                  variant="body2"
+                  mt={2}
+                  mb={0.5}
+                >
+                  {title}
+                </Typography>
+                <Typography variant="body2" color="text.secondary">
+                  {description}
+                </Typography>
+              </Paper>
+            </Grid>
+          ))}
+        </Grid>
+      </Box>
+      <Typography fontWeight={500} textAlign="center" mt={8} mb={2} fontSize="0.875rem">
+        Alternative to libraries such as:
+      </Typography>
+      <Box sx={{ display: 'flex', gap: 2, justifyContent: 'center' }}>
+        <Box
+          sx={(theme) => ({
+            background: 'url(/static/branding/base-ui/radix.svg)',
+            ...theme.applyDarkStyles({
+              background: 'url(/static/branding/base-ui/radix-dark.svg)',
+            }),
+          })}
+          width={77}
+          height={37}
+        />
+
+        <Box
+          sx={(theme) => ({
+            background: 'url(/static/branding/base-ui/react-aria.svg)',
+            ...theme.applyDarkStyles({
+              background: 'url(/static/branding/base-ui/react-aria-dark.svg)',
+            }),
+          })}
+          width={113}
+          height={37}
+        />
+
+        <Box
+          sx={(theme) => ({
+            background: 'url(/static/branding/base-ui/headless-ui.svg)',
+            ...theme.applyDarkStyles({
+              background: 'url(/static/branding/base-ui/headless-ui-dark.svg)',
+            }),
+          })}
+          width={116}
+          height={37}
+        />
+      </Box>
+    </Container>
+  );
+}
diff --git a/docs/src/components/productBaseUI/BaseUITestimonial.tsx b/docs/src/components/productBaseUI/BaseUITestimonial.tsx
new file mode 100644
index 00000000000000..d5e89e74fa203d
--- /dev/null
+++ b/docs/src/components/productBaseUI/BaseUITestimonial.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Unstable_Grid2';
+import Section from 'docs/src/layouts/Section';
+import Divider from '@mui/material/Divider';
+import Typography from '@mui/material/Typography';
+import Link from 'docs/src/modules/components/Link';
+import ArrowForward from '@mui/icons-material/ArrowForward';
+
+export default function BaseUITestimonial() {
+  return (
+    <Section>
+      <Grid container spacing={{ xs: 6, sm: 10 }} alignItems="center">
+        <Grid xs={12} sm={6}>
+          <Box
+            sx={{
+              border: '1px solid',
+              borderColor: 'divider',
+              borderRadius: 1,
+              pt: 3,
+              pl: 3,
+              background: 'linear-gradient(260deg, #3399FF 0%, #0059B3 95%)',
+              backgroundClip: 'padding-box',
+              overflow: 'auto',
+              '& img': {
+                width: '100%',
+                borderTopLeftRadius: '12px',
+                display: 'block',
+              },
+            }}
+          >
+            <Typography variant="h4" component="h2" mb={2.5} sx={{ color: '#fff' }}>
+              Nhost&apos;s dashboard
+            </Typography>
+            <img
+              src="/static/branding/base-ui/nhost.jpg"
+              srcSet="/static/branding/base-ui/nhost.jpg 1x, /static/branding/base-ui/nhost-2x.jpg 2x "
+              alt="Screenshot displaying part of the Nhost dashboard that used Base UI to be built."
+              loading="lazy"
+              width="570px"
+            />
+          </Box>
+          <Typography variant="body2" sx={{ mt: 2 }}>
+            Nhost&apos;s new dashboard, powered by Base UI &nbsp;&nbsp;
+            <Typography component="span" variant="inherit" sx={{ color: 'divider' }}>
+              /
+            </Typography>
+            &nbsp;&nbsp;
+            <Link href="https://nhost.io/blog/new-database-ui" target="_blank">
+              View the blog post <ArrowForward fontSize="small" />
+            </Link>
+          </Typography>
+        </Grid>
+        <Grid xs={12} sm={6} sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+          <Typography>
+            “After considering various options, we decided to migrate our custom components to
+            Material UI, and that&apos;s when we discovered Base UI. As a set of headless
+            components, it offered exactly what we needed to implement our design system while
+            maintaining full customizability. The focus on accessibility was also a big plus, as it
+            ensured that our dashboard was usable by everyone. Low-level component hooks were just
+            the icing on the cake.”
+          </Typography>
+          <Divider />
+          <Box sx={{ display: 'flex', gap: 1 }}>
+            <Avatar src="https://media.licdn.com/dms/image/C4D03AQHm6cbz2UDXpw/profile-displayphoto-shrink_800_800/0/1642674447256?e=2147483647&v=beta&t=L8g2vW_8mG8AvB3lwui0CT8969_Cx9QQ0iJXIS47i0o" />
+            <Box sx={{ flex: 1 }}>
+              <Typography variant="body2" fontWeight={600}>
+                Szilárd Dóró
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                Senior Software Engineer
+              </Typography>
+            </Box>
+            <Box
+              component="img"
+              src="https://docs.nhost.io/img/logo.svg"
+              alt=""
+              sx={(theme) => ({
+                width: '80px',
+                alignSelf: 'center',
+                ...theme.applyDarkStyles({
+                  content: `url(https://nhost.io/common/logo.svg)`,
+                }),
+              })}
+            />
+          </Box>
+        </Grid>
+      </Grid>
+    </Section>
+  );
+}
diff --git a/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx b/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
new file mode 100644
index 00000000000000..5eb9fb61d7bb36
--- /dev/null
+++ b/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
@@ -0,0 +1,1080 @@
+import * as React from 'react';
+import clsx from 'clsx';
+
+// Base UI imports
+import Badge, { badgeClasses } from '@mui/base/Badge';
+import Input, { InputProps } from '@mui/base/Input';
+import Button from '@mui/base/Button';
+import Menu, { MenuActions } from '@mui/base/Menu';
+import MenuItem, { menuItemClasses } from '@mui/base/MenuItem';
+import Modal from '@mui/base/Modal';
+import Option from '@mui/base/Option';
+import Popper from '@mui/base/Popper';
+import Select from '@mui/base/Select';
+import Slider, { sliderClasses } from '@mui/base/Slider';
+import Snackbar from '@mui/base/Snackbar';
+import { SnackbarCloseReason } from '@mui/base/useSnackbar';
+import Switch, { switchClasses } from '@mui/base/Switch';
+import Tab from '@mui/base/Tab';
+import Tabs from '@mui/base/Tabs';
+import TabsList from '@mui/base/TabsList';
+import { ListActionTypes } from '@mui/base/useList';
+
+// Other packages
+import { css, styled, keyframes } from '@mui/system';
+
+import Box from '@mui/material/Box';
+import Fade from '@mui/material/Fade';
+
+import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
+import AutoAwesomeRounded from '@mui/icons-material/AutoAwesomeRounded';
+import SmartButtonRounded from '@mui/icons-material/SmartButtonRounded';
+import InputRounded from '@mui/icons-material/InputRounded';
+import PlaylistAddCheckRounded from '@mui/icons-material/PlaylistAddCheckRounded';
+import ToggleOnRoundedIcon from '@mui/icons-material/ToggleOnRounded';
+import LinearScaleRounded from '@mui/icons-material/LinearScaleRounded';
+import CircleNotificationsRounded from '@mui/icons-material/CircleNotificationsRounded';
+import ReportGmailerrorredRounded from '@mui/icons-material/ReportGmailerrorredRounded';
+import MenuOpenRounded from '@mui/icons-material/MenuOpenRounded';
+import FirstPageRounded from '@mui/icons-material/FirstPageRounded';
+import TabRounded from '@mui/icons-material/TabRounded';
+import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
+import InterestsRoundedIcon from '@mui/icons-material/InterestsRounded';
+import RadioRoundedIcon from '@mui/icons-material/RadioRounded';
+
+import ROUTES from 'docs/src/route';
+import Link from 'docs/src/modules/components/Link';
+import heroVariables from 'docs/src/components/productBaseUI/heroVariables';
+
+const Panel = styled('div')({
+  width: 340,
+  backgroundColor: 'var(--muidocs-palette-background-paper)',
+  borderRadius: 'min(var(--border-radius) * 2, 32px)',
+  border: 'var(--border-width) solid',
+  borderColor: 'var(--border-color)',
+  boxShadow: 'var(--Panel-shadow)',
+  overflow: 'hidden',
+});
+
+const StyledLabel = styled('label')({
+  fontSize: 12,
+  fontWeight: 600,
+  color: 'var(--muidocs-palette-text-secondary)',
+  margin: '0.25rem 0',
+});
+
+const StyledLabelCategory = styled('label')({
+  fontSize: 10,
+  fontWeight: 700,
+  textTransform: 'uppercase',
+  letterSpacing: '.08rem',
+  color: 'var(--muidocs-palette-text-secondary)',
+  margin: '0.5rem 0.4rem',
+});
+
+const StyledParagraph = styled('p')({
+  margin: 0,
+  fontSize: 14,
+  fontWeight: 600,
+  color: 'text.primary',
+});
+
+const StyledTabsList = styled('div')({
+  display: 'flex',
+  borderBottom: 'var(--border-width) solid var(--border-color)',
+});
+
+const StyledTab = styled('button')({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 6,
+  position: 'relative',
+  minHeight: 42,
+  flex: 1,
+  padding: '0.75rem',
+  background: 'var(--Tab-background)',
+  border: 'none',
+  fontSize: 14,
+  fontWeight: 600,
+  color: 'var(--muidocs-palette-text-secondary)',
+
+  '&:hover:not(.Mui-selected)': {
+    background: 'var(--Tab-hoverBackground)',
+  },
+
+  '&.Mui-selected': {
+    color: 'var(--color-primary)',
+
+    '&::after': {
+      content: '""',
+      display: 'block',
+      height: 'max(2px, var(--border-width, 0px))',
+      left: 2,
+      right: 2,
+      bottom: 'calc(-1 * min(2px, var(--border-width, 0px)))',
+      position: 'absolute',
+      backgroundColor: 'var(--color-primary)',
+    },
+  },
+});
+
+const StyledSelectButton = styled('button')({
+  width: '100%',
+  maxWidth: '100%',
+  minHeight: 'calc(2 * var(--border-width, 0px) + 37px)',
+  border: 'var(--border-width, 1px) solid',
+  borderColor: 'var(--Select-ringColor, var(--border-color))',
+  borderRadius: 'var(--border-radius)',
+  padding: '8px 12px',
+  backgroundColor: 'var(--Select-background)',
+  display: 'flex',
+  color: 'var(--muidocs-palette-text-secondary)',
+  alignItems: 'center',
+  fontSize: '0.875rem',
+  fontFamily: 'var(--muidocs-font-family)',
+  lineHeight: 21 / 14,
+  boxShadow: 'var(--formControl-shadow, 0px 2px 2px rgba(205, 210, 215, 0.3))',
+
+  '&:hover': {
+    backgroundColor: 'var(--Tab-hoverBackground)',
+  },
+  '& svg:last-child': {
+    marginLeft: 'auto',
+  },
+  '& svg:first-child': {
+    marginRight: 'var(--Select-spacing)',
+  },
+  '&:not(:empty)': {
+    fontWeight: 500,
+  },
+});
+
+const StyledModalButton = styled('button')({
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  padding: '8px 12px',
+  cursor: 'pointer',
+  backgroundColor: 'var(--muidocs-palette-primary-50)',
+  border: '1px solid',
+  borderColor: 'var(--muidocs-palette-primary-100)',
+  borderRadius: 'var(--border-radius)',
+  boxShadow: 'var(--formControl-shadow), inset 0px 4px 4px rgba(205, 210, 215, 0.3)',
+  fontFamily: 'var(--muidocs-font-family)',
+  fontSize: '0.875rem',
+  fontWeight: 600,
+  color: 'var(--muidocs-palette-primary-600)',
+  lineHeight: 21 / 14,
+
+  '&:hover': {
+    backgroundColor: 'var(--muidocs-palette-primary-100)',
+  },
+
+  '[data-mui-color-scheme="dark"] &': {
+    borderColor: 'var(--muidocs-palette-primary-700)',
+    backgroundColor: 'var(--muidocs-palette-primary-900)',
+    color: 'var(--muidocs-palette-primary-200)',
+    boxShadow: 'var(--formControl-shadow), inset 0px 4px 4px rgba(205, 210, 215, 0.15)',
+    '&:hover': {
+      backgroundColor: 'var(--muidocs-palette-primary-800)',
+    },
+  },
+});
+
+const StyledSnackbarButton = styled('button')({
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  padding: '8px 12px',
+  cursor: 'pointer',
+  backgroundColor: 'var(--muidocs-palette-grey-50)',
+  border: '1px solid',
+  borderColor: 'var(--muidocs-palette-grey-200)',
+  borderRadius: 'var(--border-radius)',
+  boxShadow: 'var(--formControl-shadow), inset 0px 4px 4px rgba(205, 210, 215, 0.3)',
+  fontFamily: 'var(--muidocs-font-family)',
+  fontSize: '0.875rem',
+  fontWeight: 600,
+  color: 'var(--muidocs-palette-grey-900)',
+  lineHeight: 21 / 14,
+
+  '&:hover': {
+    backgroundColor: 'var(--muidocs-palette-grey-200)',
+  },
+
+  '[data-mui-color-scheme="dark"] &': {
+    borderColor: 'var(--muidocs-palette-grey-700)',
+    backgroundColor: 'var(--muidocs-palette-grey-900)',
+    color: 'var(--muidocs-palette-grey-200)',
+    boxShadow: 'var(--formControl-shadow), inset 0px 4px 4px rgba(205, 210, 215, 0.05)',
+    '&:hover': {
+      backgroundColor: 'var(--muidocs-palette-grey-800)',
+    },
+  },
+});
+
+const StyledViewCode = styled(Link)({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'end',
+  width: '100%',
+  padding: '12px 16px',
+  cursor: 'pointer',
+  backgroundColor: 'var(--muidocs-palette-primaryDark-700)',
+  border: 'none',
+  borderRadius: 'var(--border-radius)',
+  boxShadow: '0px 2px 2px rgba(205, 210, 215, 0.2), inset 0px 4px 4px rgba(205, 210, 215, 0.2)',
+  fontFamily: 'var(--muidocs-font-family)',
+  fontSize: '0.875rem',
+  fontWeight: 600,
+  color: 'var(--muidocs-palette-primary-200)',
+  lineHeight: 21 / 14,
+
+  '&:hover': {
+    backgroundColor: 'var(--muidocs-palette-primaryDark-800)',
+    color: 'var(--muidocs-palette-primary-100)',
+  },
+
+  '[data-mui-color-scheme="dark"] &': {
+    color: 'var(--muidocs-palette-primary-200)',
+    boxShadow: '0px 2px 2px rgba(205, 210, 215, 0.2), inset 0px 4px 4px rgba(205, 210, 215, 0.08)',
+    '&:hover': {
+      color: 'var(--muidocs-palette-primary-100)',
+      backgroundColor: 'var(--muidocs-palette-primaryDark-800)',
+    },
+  },
+});
+
+const StyledPopper = styled(Popper)({
+  zIndex: 1,
+});
+
+const StyledListbox = styled('ul')({
+  '--_listbox-radius': 'min(var(--border-radius), 12px)',
+  width: 'calc(320px - 1rem)',
+  maxHeight: 'calc(320px - 1rem)',
+  overflow: 'auto',
+  display: 'flex',
+  flexDirection: 'column',
+  border: 'var(--border-width) solid',
+  borderColor: 'var(--Select-ringColor, var(--border-color))',
+  borderRadius: 'var(--_listbox-radius)',
+  backgroundColor: 'var(--muidocs-palette-background-paper)',
+  boxShadow: '0px 4px 40px rgba(62, 80, 96, 0.1)',
+  padding: 'calc(var(--Select-spacing) * 0.5)',
+  gap: 'calc(var(--Select-spacing) * 0.2)',
+  fontFamily: 'var(--muidocs-font-family)',
+  fontSize: '0.875rem',
+  lineHeight: 21 / 14,
+  margin: '6px 0',
+  '& li': {
+    display: 'flex',
+    borderRadius: '12px',
+    '&[role="none"]': {
+      flexDirection: 'column',
+      padding: 0,
+      '& > ul': {
+        padding: 0,
+      },
+    },
+    '&[role="presentation"]': {
+      fontSize: '0.625rem',
+      color: 'var(--muidocs-palette-text-tertiary)',
+      fontWeight: 'bold',
+      textTransform: 'uppercase',
+      letterSpacing: '1px',
+      alignItems: 'center',
+      minHeight: 0,
+      paddingBottom: '0.5rem',
+    },
+    '&[role="option"]': {
+      boxSizing: 'border-box',
+      border: 'var(--border-width) solid transparent',
+      padding: 'calc(var(--Select-spacing) * 0.5)',
+      fontSize: '0.875rem',
+      fontWeight: 500,
+      color: 'var(--muidocs-palette-text-secondary)',
+      alignItems: 'center',
+      cursor: 'pointer',
+      borderRadius: 'calc(var(--_listbox-radius) - var(--Select-spacing) * 0.05)',
+
+      '&:hover, &.MuiOption-highlighted': {
+        backgroundColor: 'var(--Option-hoverBackground, var(--muidocs-palette-grey-50))',
+        color: 'var(--muidocs-palette-text-primary)',
+      },
+
+      '&.Mui-selected': {
+        backgroundColor: 'var(--Option-selectedBackground, var(--muidocs-palette-grey-50))',
+        borderColor: 'var(--border-color)',
+        color: 'var(--muidocs-palette-text-primary)',
+      },
+
+      '& svg:first-child': {
+        color: 'var(--muidocs-palette-primary-main)',
+        marginRight: 'var(--Select-spacing)',
+        fontSize: '1.125rem',
+      },
+    },
+  },
+});
+
+const marks = [
+  {
+    value: 0,
+    label: '0°C',
+  },
+  {
+    value: 25,
+    label: '25°C',
+  },
+  {
+    value: 50,
+    label: '50°C',
+  },
+  {
+    value: 75,
+    label: '75°C',
+  },
+  {
+    value: 100,
+    label: '100°C',
+  },
+];
+
+function valuetext(value: number) {
+  return `${value}°C`;
+}
+
+const StyledSlider = styled(Slider)(`
+  --_margin: 4px;
+  color: var(--color-primary);
+  height: 8px;
+  width: 100%;
+  max-width: calc(100% - var(--_margin));
+  padding: 16px 0;
+  margin: 0 var(--_margin);
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  touch-action: none;
+  -webkit-tap-highlight-color: transparent;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  & .${sliderClasses.rail} {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    border-radius: var(--border-radius);
+    background-color: var(--color-primary-light)
+  }
+
+  & .${sliderClasses.track} {
+    display: block;
+    position: absolute;
+    height: 4px;
+    border-radius: var(--border-radius);
+    background-color: currentColor;
+  }
+
+  & .${sliderClasses.thumb} {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    margin-left: -6px;
+    margin-top: -6px;
+    box-sizing: border-box;
+    border-radius: var(--border-radius);
+    outline: 0;
+    border: 4px solid currentColor;
+    background-color: #fff;
+
+    :hover,
+    &.${sliderClasses.focusVisible} {
+      box-shadow: 0 0 0 0.25rem var(--Slider-thumb-focus);
+    }
+
+    &.${sliderClasses.active} {
+      box-shadow: 0 0 0 0.25rem var(--Slider-thumb-focus);
+    }
+  }
+
+  & .${sliderClasses.mark} {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    border-radius: var(--border-radius);
+    background-color: var(--color-primary-light);
+    top: 44%;
+    transform: translateX(-50%);
+  }
+
+  & .${sliderClasses.markActive} {
+    background-color: var(--color-primary);
+  }
+
+  & .${sliderClasses.markLabel} {
+    font-weight: 600;
+    font-size: 10px;
+    position: absolute;
+    top: 24px;
+    transform: translateX(-50%);
+    margin-top: 8px;
+    &[data-index="0"] {
+      transform: translateX(calc(-1 * var(--_margin)));
+    }
+    &[data-index="4"] {
+      transform: translate(-100%);
+    }
+  }
+`);
+
+const StyledSwitch = styled('span')(`
+  font-size: 0;
+  position: relative;
+  display: inline-block;
+  width: 34px;
+  height: 20px;
+  cursor: pointer;
+
+  &.${switchClasses.disabled} {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  & .${switchClasses.track} {
+    background: var(--Switch-background, var(--muidocs-palette-grey-400));
+    border-radius: max(2px, var(--border-radius) * 4);
+    display: block;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+  }
+
+  & .${switchClasses.thumb} {
+    display: block;
+    width: 14px;
+    height: 14px;
+    top: 3px;
+    left: 3px;
+    border-radius: max(2px, var(--border-radius));
+    background-color: #fff;
+    position: relative;
+    
+    transition-property: left;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 120ms;
+  }
+
+  &.${switchClasses.focusVisible} .${switchClasses.thumb} {
+    background-color: var(--muidocs-palette-grey-500);
+    box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.25);
+  }
+
+  &.${switchClasses.checked} {
+    .${switchClasses.thumb} {
+      left: 17px;
+      top: 3px;
+      background-color: #fff;
+    }
+
+    .${switchClasses.track} {
+      background: var(--muidocs-palette-primary-500);
+    }
+  }
+
+  & .${switchClasses.input} {
+    cursor: inherit;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    z-index: 1;
+    margin: 0;
+  }
+  `);
+
+const Backdrop = React.forwardRef<HTMLDivElement, { open?: boolean; className: string }>(
+  (props, ref) => {
+    const { open, className, ...other } = props;
+    return <div className={clsx({ 'MuiBackdrop-open': open }, className)} ref={ref} {...other} />;
+  },
+);
+
+const StyledModal = styled(Modal)`
+  position: fixed;
+  z-index: 1300;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition-property: visibility;
+  transition-delay: ${({ open }) => (open ? '0s' : '400ms')};
+  visibility: ${({ open }) => (open ? 'visible' : 'hidden')};
+`;
+
+const StyledBackdrop = styled(Backdrop)`
+  z-index: -1;
+  position: fixed;
+  inset: 0;
+  background-color: rgb(0 0 0 / 0.5);
+  -webkit-tap-highlight-color: transparent;
+  opacity: ${({ open }) => (open ? 1 : 0)};
+  transition: opacity 0.3s ease;
+`;
+
+const Dialog = styled('div')({
+  backgroundColor: 'var(--muidocs-palette-background-paper)',
+  borderRadius: 'min(var(--border-radius) * 2, 32px)',
+  border: 'var(--border-width) solid',
+  borderColor: 'var(--border-color)',
+  overflow: 'hidden',
+  padding: '1.5rem',
+  textAlign: 'center',
+  outline: 'none',
+  maxWidth: 500,
+  width: 'auto',
+  transform: 'translateY(8px)',
+  opacity: 0,
+  transition: 'all 0.2s ease-out',
+  '&[data-open="true"]': {
+    transform: 'translateY(0)',
+    opacity: 1,
+    boxShadow: 'var(--Panel-shadow)',
+    transition: 'all 0.3s ease',
+  },
+});
+
+const StyledBadge = styled(Badge)(
+  ({ theme }) => `
+  box-sizing: border-box;
+  list-style: none;
+  font-family: IBM Plex Sans, sans-serif;
+  position: relative;
+  display: inline-block;
+  
+
+  & .${badgeClasses.badge} {
+    --_scale: 1.5em;
+    z-index: auto;
+    position: absolute;
+    top: 0;
+    right: 0;
+    font-size: 0.75rem;
+    border-radius: var(--_scale);
+    line-height: var(--_scale);
+    width: var(--_scale);
+    height: var(--_scale);
+    color: #fff;
+    font-weight: 600;
+    white-space: nowrap;
+    text-align: center;
+    background: var(--muidocs-palette-error-main);
+    outline: 3px solid ${
+      theme.palette.mode === 'dark' ? 'var(--muidocs-palette-primaryDark-900)' : '#FFF'
+    };
+    box-shadow: 0px 2px 24px ${
+      theme.palette.mode === 'dark'
+        ? 'var(--muidocs-palette-primary-900)'
+        : 'var(--muidocs-palette-primary-100)'
+    };
+    transform: translate(50%, -50%);
+    transform-origin: 100% 0;
+  }
+  `,
+);
+
+const StyledMenuItem = styled(MenuItem)(
+  ({ theme }) => `
+  list-style: none;
+  padding: 6px 8px;
+  margin: 4px 0;
+  border-radius: 8px;
+  cursor: default;
+  user-select: none;
+  border-radius: min(var(--border-radius), 8px);
+  font-weight: 500;
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+
+  &.${menuItemClasses.focusVisible} {
+    outline: 3px solid ${
+      theme.palette.mode === 'dark'
+        ? 'var(--muidocs-palette-primary-600)'
+        : 'var(--muidocs-palette-primary-200)'
+    };
+    background-color: ${
+      theme.palette.mode === 'dark'
+        ? 'var(--muidocs-palette-grey-800)'
+        : 'var(--muidocs-palette-grey-100)'
+    };
+    color: ${
+      theme.palette.mode === 'dark'
+        ? 'var(--muidocs-palette-grey-300)'
+        : 'var(--muidocs-palette-grey-900)'
+    };
+  }
+
+  &:hover:not(.${menuItemClasses.disabled}) {
+    background-color: ${
+      theme.palette.mode === 'dark'
+        ? 'var(--muidocs-palette-grey-800)'
+        : 'var(--muidocs-palette-grey-50)'
+    };
+    color: ${
+      theme.palette.mode === 'dark'
+        ? 'var(--muidocs-palette-grey-300)'
+        : 'var(--muidocs-palette-grey-900)'
+    };
+  }
+  `,
+);
+
+const StyledMenuListbox = styled('ul')(`
+  font-family: IBM Plex Sans, sans-serif;
+  font-size: 0.875rem;
+  box-sizing: border-box;
+  padding: 6px;
+  margin: 12px 0;
+  min-width: 230px;
+  border-radius: 12px;
+  overflow: auto;
+  outline: 0px;
+  background-color: var(--muidocs-palette-background-paper);
+  border-radius: min(var(--border-radius), 16px);
+  border: var(--border-width) solid;
+  border-color: var(--border-color);
+  box-shadow: var(--Panel-shadow);
+  `);
+
+const StyledMenuButton = styled(Button)`
+  padding: 0;
+  border: none;
+  background: transparent;
+`;
+
+const snackbarInRight = keyframes`
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+`;
+
+const StyledSnackbar = styled(Snackbar)(css`
+  background-color: var(--muidocs-palette-background-paper);
+  border-radius: min(var(--border-radius), 32px);
+  border: var(--border-width) solid;
+  border-color: var(--border-color);
+  box-shadow: var(--Panel-shadow);
+  position: fixed;
+  z-index: 1200;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  gap: 1rem;
+  right: 16px;
+  bottom: 16px;
+  left: auto;
+  max-width: 560px;
+  min-width: 300px;
+  padding: 0.75rem 1rem;
+  animation: ${snackbarInRight} 200ms;
+  transition: transform 0.2s ease-out;
+
+  & svg {
+    color: var(--muidocs-palette-success-600);
+  }
+
+  & [data-title] {
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  & [data-description] {
+    color: var(--muidocs-palette-text-secondary);
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+`);
+
+const StyledInputElement = styled('input')({
+  marginTop: '8px',
+  width: '100%',
+  maxWidth: '100%',
+  border: 'var(--border-width, 1px) solid',
+  borderColor: 'var(--Select-ringColor, var(--border-color))',
+  borderRadius: 'var(--border-radius)',
+  padding: '8px 12px',
+  backgroundColor: 'var(--Select-background)',
+  display: 'flex',
+  color: 'var(--muidocs-palette-text-secondary)',
+  alignItems: 'center',
+  fontSize: '0.875rem',
+  fontFamily: 'var(--muidocs-font-family)',
+  lineHeight: 21 / 14,
+  boxShadow: 'var(--formControl-shadow, 0px 2px 2px rgba(205, 210, 215, 0.3))',
+
+  '&:hover': {
+    borderColor: 'var(--Input-border)',
+  },
+  '&:focus': {
+    borderColor: 'var(--Input-border)',
+    boxShadow: 'var(--Input-focus-border)',
+  },
+  '&:focus-visible': {
+    // Firefox
+    outline: 0,
+  },
+});
+
+// Input
+const CustomInput = React.forwardRef(function CustomInput(
+  props: InputProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return <Input slots={{ input: StyledInputElement }} {...props} ref={ref} />;
+});
+
+export default function BaseUIThemesDemo() {
+  const [design, setDesign] = React.useState(0);
+  // Modal
+  const [openModal, setOpenModal] = React.useState(false);
+  const handleOpenModal = () => setOpenModal(true);
+  const handleCloseModal = () => setOpenModal(false);
+  // Snackbar
+  const [openSnackbar, setOpenSnackbar] = React.useState(false);
+
+  const handleCloseSnackbar = (_: any, reason: SnackbarCloseReason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpenSnackbar(false);
+  };
+
+  const handleClickSnackbar = () => {
+    setOpenSnackbar(true);
+  };
+  // Menu
+  const [buttonElement, setButtonElement] = React.useState<HTMLButtonElement | null>(null);
+  const [isOpenMenu, setOpenMenu] = React.useState(false);
+  const menuActions = React.useRef<MenuActions>(null);
+  const preventReopen = React.useRef(false);
+
+  const updateAnchor = React.useCallback((node: HTMLButtonElement | null) => {
+    setButtonElement(node);
+  }, []);
+
+  const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (preventReopen.current) {
+      event.preventDefault();
+      preventReopen.current = false;
+      return;
+    }
+
+    setOpenMenu((open) => !open);
+  };
+
+  const handleButtonMouseDown = () => {
+    if (isOpenMenu) {
+      // Prevents the menu from reopening right after closing
+      // when clicking the button.
+      preventReopen.current = true;
+    }
+  };
+
+  const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      setOpenMenu(true);
+      if (event.key === 'ArrowUp') {
+        // Focus the last item when pressing ArrowUp.
+        menuActions.current?.dispatch({
+          type: ListActionTypes.keyDown,
+          key: event.key,
+          event,
+        });
+      }
+    }
+  };
+
+  const createHandleMenuClick = () => {
+    return () => {
+      setOpenMenu(false);
+      buttonElement?.focus();
+    };
+  };
+  return (
+    <Fade in timeout={700}>
+      <Panel sx={{ ...heroVariables[design] }}>
+        <Tabs value={design} onChange={(event, newValue) => setDesign(newValue as number)}>
+          <TabsList slots={{ root: StyledTabsList }}>
+            <Tab slots={{ root: StyledTab }} value={0}>
+              <AutoAwesomeRounded sx={{ fontSize: 15 }} />
+              Sleek
+            </Tab>
+            <Tab slots={{ root: StyledTab }} value={1}>
+              <RadioRoundedIcon sx={{ fontSize: 15 }} />
+              Retro
+            </Tab>
+            <Tab slots={{ root: StyledTab }} value={2}>
+              <InterestsRoundedIcon sx={{ fontSize: 15 }} />
+              Playful
+            </Tab>
+          </TabsList>
+        </Tabs>
+        {/* Notification component */}
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            p: '1rem',
+            borderBottom: 'var(--border-width) solid var(--border-color)',
+          }}
+        >
+          <StyledParagraph>Notifications</StyledParagraph>
+          <StyledMenuButton
+            type="button"
+            onClick={handleButtonClick}
+            onKeyDown={handleButtonKeyDown}
+            onMouseDown={handleButtonMouseDown}
+            ref={updateAnchor}
+            aria-controls={isOpenMenu ? 'simple-menu' : undefined}
+            aria-expanded={isOpenMenu || undefined}
+            aria-haspopup="menu"
+          >
+            <StyledBadge badgeContent={5}>
+              <Box
+                component="img"
+                alt="Michał Dudak, the leading engineer for Base UI."
+                src="/static/branding/about/michal.png"
+                sx={{
+                  display: 'inline-block',
+                  verticalAlign: 'middle',
+                  height: 32,
+                  width: 32,
+                  borderRadius: 'var(--avatar-radius)',
+                  border: 'var(--border-width) solid var(--border-color)',
+                  background: 'var(--color-primary-light)',
+                  '&:hover': {
+                    background: 'var(--color-primary)',
+                  },
+                }}
+              />
+            </StyledBadge>
+          </StyledMenuButton>
+          <Menu
+            actions={menuActions}
+            open={isOpenMenu}
+            onOpenChange={(open) => {
+              setOpenMenu(open);
+            }}
+            anchorEl={buttonElement}
+            slots={{ root: StyledPopper, listbox: StyledMenuListbox }}
+            slotProps={{ root: { disablePortal: true }, listbox: { id: 'simple-menu' } }}
+          >
+            <StyledLabelCategory>Notification menu</StyledLabelCategory>
+            <CustomInput aria-label="Demo input" placeholder="Search for a component…" />
+            <StyledMenuItem onClick={createHandleMenuClick()}>Request a component</StyledMenuItem>
+            <StyledMenuItem onClick={createHandleMenuClick()}>Get started</StyledMenuItem>
+            <StyledMenuItem onClick={createHandleMenuClick()}>View all</StyledMenuItem>
+          </Menu>
+        </Box>
+        {/* Select component */}
+        <Box
+          sx={{
+            p: '1rem 1rem 1.5rem 1rem',
+            display: 'flex',
+            flexDirection: 'column',
+            borderBottom: 'var(--border-width) solid var(--border-color)',
+          }}
+        >
+          <StyledLabel>Select a component</StyledLabel>
+          <Select
+            defaultValue={10}
+            slots={{
+              root: StyledSelectButton,
+              popper: StyledPopper,
+              listbox: StyledListbox,
+            }}
+            slotProps={{
+              popper: {
+                disablePortal: true,
+              },
+            }}
+          >
+            <StyledLabelCategory>Input</StyledLabelCategory>
+            <Option value={10}>
+              <AutoAwesomeRounded fontSize="small" />
+              Autocomplete
+            </Option>
+            <Option value={20}>
+              <SmartButtonRounded fontSize="small" />
+              Button
+            </Option>
+            <Option value={30}>
+              <InputRounded fontSize="small" />
+              Input
+            </Option>
+            <Option value={40}>
+              <PlaylistAddCheckRounded fontSize="small" />
+              Select
+            </Option>
+            <Option value={50}>
+              <ToggleOnRoundedIcon fontSize="small" />
+              Switch
+            </Option>
+            <Option value={60}>
+              <LinearScaleRounded fontSize="small" />
+              Slider
+            </Option>
+            <StyledLabelCategory>Data display</StyledLabelCategory>
+            <Option value={70}>
+              <CircleNotificationsRounded fontSize="small" />
+              Badge
+            </Option>
+            <StyledLabelCategory>Feedback</StyledLabelCategory>
+            <Option value={80}>
+              <ReportGmailerrorredRounded fontSize="small" />
+              Snackbar
+            </Option>
+            <StyledLabelCategory>Navigation</StyledLabelCategory>
+            <Option value={90}>
+              <MenuOpenRounded fontSize="small" />
+              Menu
+            </Option>
+            <Option value={100}>
+              <FirstPageRounded fontSize="small" />
+              Table Pagination
+            </Option>
+            <Option value={110}>
+              <TabRounded fontSize="small" />
+              Tabs
+            </Option>
+          </Select>
+        </Box>
+        {/* Slider component */}
+        <Box
+          sx={{
+            px: '1rem',
+            pt: '1rem',
+            pb: '1.5rem',
+            borderBottom: 'var(--border-width) solid var(--border-color)',
+          }}
+        >
+          <StyledLabel>Choose a temperature</StyledLabel>
+          <StyledSlider
+            aria-label="Temperature"
+            defaultValue={37}
+            getAriaValueText={valuetext}
+            marks={marks}
+          />
+        </Box>
+        {/* Switch component */}
+        <Box
+          sx={{
+            p: '1rem',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '1rem',
+            borderBottom: 'var(--border-width) solid var(--border-color)',
+          }}
+        >
+          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <StyledParagraph id="make-it-your-own">Make it your own</StyledParagraph>
+            <Switch
+              slots={{
+                root: StyledSwitch,
+              }}
+              slotProps={{
+                input: { 'aria-labelledby': 'make-it-your-own' },
+              }}
+              defaultChecked
+            />
+          </Box>
+          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <StyledParagraph id="make-it-your-own">Use every component</StyledParagraph>
+            <Switch
+              slots={{
+                root: StyledSwitch,
+              }}
+              slotProps={{
+                input: { 'aria-labelledby': 'Use every component' },
+              }}
+            />
+          </Box>
+        </Box>
+        {/* Modal and Snackbar component */}
+        <Box
+          sx={{
+            display: 'flex',
+            p: '1rem',
+            gap: '0.5rem',
+            borderBottom: 'var(--border-width) solid var(--border-color)',
+            '& > button': { flex: 1 },
+          }}
+        >
+          <StyledModalButton type="button" onClick={handleOpenModal}>
+            View modal
+          </StyledModalButton>
+          <StyledModal
+            disablePortal
+            aria-labelledby="unstyled-modal-title"
+            aria-describedby="unstyled-modal-description"
+            open={openModal}
+            onClose={handleCloseModal}
+            slots={{ backdrop: StyledBackdrop }}
+            keepMounted
+          >
+            <Dialog data-open={openModal}>
+              <Box
+                component="h2"
+                id="unstyled-modal-title"
+                sx={{ mt: 1, mb: 0.5, textWrap: 'balance' }}
+              >
+                Oh, hey, this is a Base UI modal.
+              </Box>
+              <Box
+                component="p"
+                id="unstyled-modal-description"
+                sx={{ m: 0, mb: 4, color: 'text.secondary', textWrap: 'balance' }}
+              >
+                Base UI modals manages modal stacking when more than one is needed, creates a
+                backdrop to disable interaction with the rest of the app, and a lot more.
+              </Box>
+              <StyledSnackbarButton onClick={handleCloseModal}>Close</StyledSnackbarButton>
+            </Dialog>
+          </StyledModal>
+          <StyledSnackbarButton type="button" onClick={handleClickSnackbar}>
+            View snackbar
+          </StyledSnackbarButton>
+          <StyledSnackbar open={openSnackbar} autoHideDuration={5000} onClose={handleCloseSnackbar}>
+            <CheckCircleRoundedIcon fontSize="small" />
+            <Box>
+              <div data-title>This is a Base UI snackbar.</div>
+              <div data-description>Free to design as you want it.</div>
+            </Box>
+          </StyledSnackbar>
+        </Box>
+        {/* Button "View all components" component */}
+        <Box sx={{ display: 'flex', p: '1rem', gap: '0.5rem', '& > button': { flex: 1 } }}>
+          <StyledViewCode href={ROUTES.baseComponents}>
+            View all components <ChevronRightRoundedIcon fontSize="small" />
+          </StyledViewCode>
+        </Box>
+      </Panel>
+    </Fade>
+  );
+}
diff --git a/docs/src/components/productBaseUI/components/BaseButtonDemo.tsx b/docs/src/components/productBaseUI/components/BaseButtonDemo.tsx
new file mode 100644
index 00000000000000..40f3730c129a9b
--- /dev/null
+++ b/docs/src/components/productBaseUI/components/BaseButtonDemo.tsx
@@ -0,0 +1,134 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/base/Button';
+import { styled, GlobalStyles } from '@mui/system';
+
+const buttonStyles = `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: bold;
+  font-size: 0.875rem;
+  background-color: var(--palette-primary);
+  padding: 10px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  border: none;
+  box-shadow: var(--shadow);
+
+  &:hover {
+    background-color: var(--palette-primary-hover);
+  }
+
+  &.Mui-active {
+    background-color: var(--palette-primary-dark);
+  }
+
+  &.Mui-focusVisible {
+    outline: 4px solid var(--focus-ring);
+  }
+
+  &.Mui-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }`;
+
+const StyledButton = styled('button')(buttonStyles);
+
+export default function BaseButtonDemo({
+  styling,
+}: {
+  styling?: 'system' | 'tailwindcss' | 'css';
+}) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        minHeight: 144,
+        gap: 2,
+        py: 3,
+      }}
+    >
+      {styling === 'system' && (
+        <React.Fragment>
+          <Button slots={{ root: StyledButton }}>Button</Button>
+          <Button disabled slots={{ root: StyledButton }}>
+            Disabled
+          </Button>
+        </React.Fragment>
+      )}
+      {styling === 'css' && (
+        <React.Fragment>
+          <GlobalStyles styles={`.MuiButton-root{${buttonStyles}}`} />
+          <Button>Button</Button>
+          <Button disabled>Disabled</Button>
+        </React.Fragment>
+      )}
+      {styling === 'tailwindcss' && (
+        <React.Fragment>
+          <Button className="transition-all-[150ms_ease] shaodw-[--shadow] cursor-pointer rounded-[8px] border-none bg-[--palette-primary] p-[10px_16px] text-[0.875rem] font-bold text-white transition [font-family:IBM_Plex_sans] hover:bg-[--palette-primary-hover] ui-active:bg-[--palette-primary-dark] ui-disabled:cursor-not-allowed ui-disabled:opacity-50 ui-focus-visible:[outline:4px_solid_var(--focus-ring)]">
+            Button
+          </Button>
+          <Button
+            disabled
+            className="transition-all-[150ms_ease] cursor-pointer rounded-[8px] border-none bg-[--palette-primary] p-[10px_16px] text-[0.875rem] font-bold text-white [font-family:IBM_Plex_sans] ui-active:bg-[--palette-primary-dark] ui-disabled:cursor-not-allowed ui-disabled:opacity-50 ui-focus-visible:[outline:4px_solid_var(--focus-ring)]"
+          >
+            Disabled
+          </Button>
+        </React.Fragment>
+      )}
+    </Box>
+  );
+}
+BaseButtonDemo.getCode = (styling?: 'system' | 'tailwindcss' | 'css') => {
+  if (styling === 'system') {
+    return `import Button from '@mui/base/Button';
+import { styled } from '@mui/system';
+
+const StyledButton = styled('button')\`/* CSS… */\`;
+
+<Button slots={{ root: StyledButton }}>Button</Button>
+<Button slots={{ root: StyledButton }}>Disabled</Button>
+`;
+  }
+  if (styling === 'css') {
+    return `import Button from '@mui/base/Button
+import './styles.css';
+
+<Button>Button</Button>
+<Button disabled>Disabled</Button>
+
+/* styles.css */
+.MuiButton-root {${buttonStyles}}
+`;
+  }
+  if (styling === 'tailwindcss') {
+    return `import Button from '@mui/base/Button
+
+<Button
+  className="transition-all-[150ms_ease] cursor-pointer
+              rounded-[8px] border-none bg-[--palette-primary]
+              p-[10px_16px] text-[0.875rem] font-bold 
+              text-white [font-family:IBM_Plex_sans] 
+              hover:bg-[--palette-primary-hover]
+              shadow-[--shadow]
+              ui-active:bg-[--palette-primary-dark] 
+              ui-disabled:cursor-not-allowed ui-disabled:opacity-50 
+              ui-focus-visible:[outline:4px_solid_var(--focus-ring) transition">
+  Button
+</Button>
+<Button
+  className="transition-all-[150ms_ease] cursor-pointer
+              rounded-[8px] border-none bg-[--palette-primary]
+              p-[10px_16px] text-[0.875rem] font-bold 
+              text-white [font-family:IBM_Plex_sans] 
+              ui-active:bg-[--palette-primary-dark] 
+              ui-disabled:cursor-not-allowed ui-disabled:opacity-50 
+              ui-focus-visible:[outline:4px_solid_var(--focus-ring)]">
+  Disabled
+</Button>`;
+  }
+  return ``;
+};
diff --git a/docs/src/components/productBaseUI/components/BaseInputDemo.tsx b/docs/src/components/productBaseUI/components/BaseInputDemo.tsx
new file mode 100644
index 00000000000000..63efd57caf5bc1
--- /dev/null
+++ b/docs/src/components/productBaseUI/components/BaseInputDemo.tsx
@@ -0,0 +1,302 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import { unstable_useId } from '@mui/material/utils';
+import Box from '@mui/material/Box';
+import InputUnstyled from '@mui/base/Input';
+import { styled, GlobalStyles } from '@mui/system';
+
+const fieldStyles = `
+  --TextInput-height: 64px;
+  --TextInput-paddingTop: 2rem;
+  --TextInput-labelLineHeight: 20px;
+  --TextInput-labelScale: 0.75;
+  width: 320px;
+  padding: 0px 0.75rem;
+  display: inline-flex;
+  position: relative;
+  height: var(--TextInput-height);
+  background: var(--muidocs-palette-background-paper);
+  border: 1px solid;
+  border-color: var(--muidocs-palette-grey-300);
+  border-radius: var(--muidocs-shape-borderRadius);
+  outline-color: transparent;
+  box-shadow: var(--shadow);
+
+  &:hover {
+    border-color: var(--muidocs-palette-grey-400);
+  }
+
+  &:focus-within {
+    border-color: var(--palette-primary);
+    outline: 3px solid;
+    outline-color: var(--focus-ring);
+    & label {
+      color: var(--palette-primary) !important;
+    }
+  }
+  & label {
+    line-height: var(--TextInput-labelLineHeight);
+    position: absolute;
+    display: flex;
+    align-items: center;
+    top: 50%;
+    left: 0.75rem;
+    overflow: hidden;
+    text-align: start;
+    text-overflow: ellipsis;
+    font-weight: 500;
+    color: var(--muidocs-palette-grey-600);
+    white-space: nowrap;
+    pointer-events: none;
+    transform-origin: 0 0;
+    transform: translateY(-50%);
+    transition: transform 0.1s ease-out;
+  }
+
+  :where([data-mui-color-scheme='dark']) & {
+    border-color: var(--muidocs-palette-grey-800);
+    box-shadow: var(--shadow);
+
+    &:hover {
+      border-color: var(--muidocs-palette-grey-700);
+    }
+
+    &:focus-within {
+      border-color: var(--palette-primary);
+      outline-color: var(--focus-ring);
+    }
+  }`;
+const Field = styled('div')(fieldStyles);
+
+const inputStyles = `
+  border: none;
+  padding: var(--TextInput-paddingTop) 0 0.75rem;
+  height: 100%;
+  font-size: 1rem;
+  background: unset;
+  flex: 1;
+  &:focus {
+    outline: none;
+  }
+  &:not(:focus)::placeholder {
+    color: transparent;
+  }
+  &:not(:placeholder-shown) ~ label,
+  &:focus ~ label {
+    transform: translateY(-100%) scale(var(--TextInput-labelScale));
+    font-weight: 600;
+  }`;
+const StyledInput = styled('input')(inputStyles);
+
+const CSS = `.MuiInput-root{${fieldStyles}}
+
+.MuiInput-input{${inputStyles}}`;
+
+const StyledFloatingLabelInput = React.forwardRef<HTMLInputElement, JSX.IntrinsicElements['input']>(
+  function StyledFloatingLabelInput(props, ref) {
+    const id = unstable_useId(props.id);
+    return (
+      <React.Fragment>
+        <StyledInput ref={ref} {...props} id={id} />
+        <label htmlFor={id}>Floating label</label>
+      </React.Fragment>
+    );
+  },
+);
+
+const FloatingLabelInput = React.forwardRef<HTMLInputElement, JSX.IntrinsicElements['input']>(
+  function FloatingLabelInput(props, ref) {
+    const id = unstable_useId(props.id);
+    return (
+      <React.Fragment>
+        <input ref={ref} {...props} id={id} />
+        <label htmlFor={id}>Floating label</label>
+      </React.Fragment>
+    );
+  },
+);
+
+const TailwindFloatingLabelInput = React.forwardRef<
+  HTMLInputElement,
+  JSX.IntrinsicElements['input']
+  // @ts-ignore
+>(function TailwindFloatingLabelInput({ ownerState, ...props }, ref) {
+  const id = unstable_useId(props.id);
+  return (
+    <React.Fragment>
+      <input
+        ref={ref}
+        {...props}
+        className={clsx(
+          'peer h-full flex-1 border-none bg-transparent px-3 pb-[0.75rem] pt-[--TextInput-paddingTop] font-sans text-base placeholder-transparent focus:outline-none focus:ring-0',
+          props.className,
+        )}
+        id={id}
+      />
+      <label
+        className="pointer-events-none absolute left-[0.75rem] top-[50%] flex origin-[0_0] translate-y-[-100%] scale-[--TextInput-labelScale] transform items-center overflow-hidden whitespace-nowrap text-start font-[500] leading-[--TextInput-labelLineHeight] text-[--muidocs-palette-grey-600] transition-transform duration-100 ease-out peer-placeholder-shown:translate-y-[-50%] peer-placeholder-shown:scale-100 peer-placeholder-shown:transform peer-focus:translate-y-[-100%] peer-focus:scale-[--TextInput-labelScale] peer-focus:transform peer-focus:text-[--palette-primary] "
+        htmlFor={id}
+      >
+        Floating label
+      </label>
+    </React.Fragment>
+  );
+});
+
+export default function BaseInputDemo({ styling }: { styling?: 'system' | 'tailwindcss' | 'css' }) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        minHeight: 144,
+        gap: 2,
+        py: 5,
+      }}
+    >
+      {styling === 'system' && (
+        <InputUnstyled
+          placeholder="Type something here"
+          slots={{
+            root: Field,
+            input: StyledFloatingLabelInput,
+          }}
+        />
+      )}
+      {styling === 'css' && (
+        <React.Fragment>
+          <GlobalStyles styles={CSS} />
+          <InputUnstyled placeholder="Type something here" slots={{ input: FloatingLabelInput }} />
+        </React.Fragment>
+      )}
+      {styling === 'tailwindcss' && (
+        <InputUnstyled
+          placeholder="Type something here"
+          className=" p-[0px_0.75rem][box-shadow:var(--shadow)] relative inline-flex h-[--TextInput-height] w-[320px] rounded-[--muidocs-shape-borderRadius] border border-solid border-[--muidocs-palette-grey-300] bg-[--muidocs-palette-background-paper] outline-transparent [--TextInput-height:64px] [--TextInput-labelLineHeight:20px] [--TextInput-labelScale:0.75] [--TextInput-paddingTop:2rem] focus-within:!border-[--palette-primary] focus-within:[outline:3px_solid_var(--focus-ring)] hover:border-[--muidocs-palette-grey-400] dark:border-[--muidocs-palette-grey-800] dark:shadow-[0_2px_4px_0_rgba(0_0_0/0.8)] dark:focus-within:!border-[--palette-primary] dark:focus-within:[outline:3px_solid_var(--focus-ring)] dark:hover:border-[--muidocs-palette-grey-700]"
+          slots={{ input: TailwindFloatingLabelInput }}
+        />
+      )}
+    </Box>
+  );
+}
+
+BaseInputDemo.getCode = (styling?: 'system' | 'tailwindcss' | 'css') => {
+  if (styling === 'system') {
+    return `import Input from '@mui/base/Input';
+    
+const Field = styled('div')\`${fieldStyles}\`;
+const StyledInput = styled('input')\`${inputStyles}/\`;
+
+const FloatingLabelInput = React.forwardRef<HTMLInputElement, JSX.IntrinsicElements['input']>(
+  function FloatingLabelInput(props, ref) {
+    const id = unstable_useId(props.id);
+    return (
+      <React.Fragment>
+        <StyledInput ref={ref} {...props} id={id} />
+        <label htmlFor={id}>Floating label</label>
+      </React.Fragment>
+    );
+  },
+);
+
+<Input
+  placeholder="Placeholder"
+  slots={{
+    root: Field,
+    input: FloatingLabelInput,
+  }}
+/>
+`;
+  }
+  if (styling === 'css') {
+    return `import Input from '@mui/base/Input';
+import './styles.css';
+
+const FloatingLabelInput = React.forwardRef<HTMLInputElement, JSX.IntrinsicElements['input']>(
+  function FloatingLabelInput(props, ref) {
+    const id = unstable_useId(props.id);
+    return (
+      <React.Fragment>
+        <input ref={ref} {...props} id={id} />
+        <label htmlFor={id}>Floating label</label>
+      </React.Fragment>
+    );
+  },
+);
+
+<Input
+  placeholder="Placeholder"
+  slots={{ input: FloatingLabelInput }}
+/>
+
+/* styles.css */
+${CSS}
+`;
+  }
+  if (styling === 'tailwindcss') {
+    return `import Input from '@mui/base/Input';
+
+const FloatingLabelInput = React.forwardRef(
+  function FloatingLabelInput({ ownerState, id, ...props }, ref) {
+  const id = id || 'floating-label';
+  return (
+    <React.Fragment>
+      <input
+        id={id}
+        ref={ref}
+        {...props}
+        className={clsx(
+          'peer h-full flex-1 border-none bg-transparent 
+          px-3 pb-[0.75rem] pt-[--TextInput-paddingTop] 
+          font-sans text-base placeholder-transparent 
+          focus:outline-none focus:ring-0',
+          props.className,
+        )}
+        id={id}
+      />
+      <label
+        className="pointer-events-none absolute left-[0.75rem] 
+        top-[50%] flex origin-[0_0] translate-y-[-100%] 
+        scale-[--TextInput-labelScale] transform items-center 
+        overflow-hidden whitespace-nowrap text-start font-[500] 
+        leading-[--TextInput-labelLineHeight] 
+        text-[--muidocs-palette-grey-600] transition-transform 
+        duration-100 ease-out 
+        peer-placeholder-shown:translate-y-[-50%] 
+        peer-placeholder-shown:scale-100 
+        peer-placeholder-shown:transform 
+        peer-focus:translate-y-[-100%] 
+        peer-focus:scale-[--TextInput-labelScale] 
+        peer-focus:transform peer-focus:text-[--palette-primary]"
+        htmlFor={id}
+      >
+        Floating label
+      </label>
+    </React.Fragment>
+  );
+});
+
+<InputUnstyled
+  placeholder="Type something here"
+  className=" relative inline-flex h-[--TextInput-height] w-[320px] 
+  rounded-[--muidocs-shape-borderRadius] border border-solid 
+  border-[--muidocs-palette-grey-300] 
+  bg-[--muidocs-palette-background-paper] 
+  p-[0px_0.75rem] [box-shadow:var(--shadow)] 
+  outline-transparent [--TextInput-height:64px] 
+  [--TextInput-labelLineHeight:20px] [--TextInput-labelScale:0.75] 
+  [--TextInput-paddingTop:2rem] 
+  focus-within:!border-[--palette-primary] 
+  focus-within:[outline:3px_solid_var(--focus-ring)] 
+  hover:border-[--muidocs-palette-grey-400] dark:border-transparent 
+  dark:shadow-[0_2px_4px_0_rgba(0_0_0/0.8)] 
+  dark:focus-within:!border-[--palette-primary] 
+  dark:focus-within:[outline:3px_solid_var(--focus-ring)] 
+  dark:hover:border-[--muidocs-palette-grey-700]"
+  slots={{ input: FloatingLabelInput }}
+/>
+`;
+  }
+  return '';
+};
diff --git a/docs/src/components/productBaseUI/components/BaseMenuDemo.tsx b/docs/src/components/productBaseUI/components/BaseMenuDemo.tsx
new file mode 100644
index 00000000000000..5338feec9ed323
--- /dev/null
+++ b/docs/src/components/productBaseUI/components/BaseMenuDemo.tsx
@@ -0,0 +1,482 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import ButtonUnstyled from '@mui/base/Button';
+import MenuUnstyled, { MenuActions } from '@mui/base/Menu';
+import MenuItemUnstyled from '@mui/base/MenuItem';
+import PopperUnstyled from '@mui/base/Popper';
+import { ListActionTypes } from '@mui/base/useList';
+import { styled, GlobalStyles } from '@mui/system';
+import Person from '@mui/icons-material/Person';
+
+const buttonStyles = `
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: IBM Plex Sans, sans-serif;
+  font-size: 0.875rem;
+  box-sizing: border-box;
+  min-height: calc(1.5em + 22px);
+  border-radius: 8px;
+  padding: 8px 12px 8px 6px;
+  line-height: 1.5;
+  background: var(--muidocs-palette-background-paper);
+  box-shadow: var(--shadow);
+  border: 1px solid;
+  border-color: var(--muidocs-palette-grey-200);
+  color: var(--muidocs-palette-text-primary);
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 120ms;
+  outline-color: transparent;
+
+  &:hover {
+    background: var(--muidocs-palette-grey-50);
+  }
+
+  & svg {
+    color: var(--palette-primary);
+  }
+
+  &.Mui-focusVisible {
+    outline: 3px solid;
+    outline-color: var(--focus-ring);
+  }
+
+  :where([data-mui-color-scheme='dark']) & {
+    border-color: var(--muidocs-palette-primaryDark-700);
+
+    &:hover {
+      background: var(--muidocs-palette-primaryDark-800);
+    }
+  }`;
+const StyledMenuButton = styled('button')(buttonStyles);
+
+const popperStyles = `
+  z-index: 1000;`;
+const StyledPopper = styled(PopperUnstyled)(popperStyles);
+
+const listboxStyles = `
+  margin: 8px 0;
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  border: 1px solid;
+  border-color: var(--muidocs-palette-grey-200);
+  background: var(--muidocs-palette-background-paper);
+  box-shadow: 0px 4px 40px rgba(205, 210, 215, 0.5);
+
+  :where([data-mui-color-scheme='dark']) & {
+    border-color: var(--muidocs-palette-primaryDark-700);
+    box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.5);
+  }`;
+const StyledListbox = styled('ul')(listboxStyles);
+
+const menuItemStyles = `
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  min-height: 24px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  gap: 4px;
+  &:hover,
+  &.Mui-focusVisible {
+    cursor: default;
+    outline: none;
+    color: var(--muidocs-palette-text-primary);
+    background: var(--muidocs-palette-grey-50);
+    border-color: var(--muidocs-palette-grey-100);
+  }
+
+  :where([data-mui-color-scheme='dark']) & {
+    color: var(--muidocs-palette-grey-300);
+    &:hover,
+    &.Mui-focusVisible {
+      color: var(--muidocs-palette-text-primary);
+      background: var(--muidocs-palette-primaryDark-700);
+      border-color: var(--muidocs-palette-primaryDark-500);
+    }
+  }`;
+const StyledMenuItem = styled('li')(menuItemStyles);
+
+const CSS = `.Mui-base.MuiButton-root{${buttonStyles}};
+
+.Mui-base.MuiMenu-root{${popperStyles}};
+
+.Mui-base.MuiMenu-listbox{${listboxStyles}};
+
+.Mui-base.MuiMenuItem-root{${menuItemStyles}};`;
+
+export default function BaseMenuDemo({ styling }: { styling?: 'system' | 'tailwindcss' | 'css' }) {
+  const [buttonElement, setButtonElement] = React.useState<HTMLButtonElement | null>(null);
+  const [isOpen, setOpen] = React.useState(false);
+  const menuActions = React.useRef<MenuActions>(null);
+  const preventReopen = React.useRef(false);
+
+  const updateAnchor = React.useCallback((node: HTMLButtonElement | null) => {
+    setButtonElement(node);
+  }, []);
+
+  const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (preventReopen.current) {
+      event.preventDefault();
+      preventReopen.current = false;
+      return;
+    }
+
+    setOpen((open) => !open);
+  };
+
+  const handleButtonMouseDown = () => {
+    if (isOpen) {
+      // Prevents the menu from reopening right after closing
+      // when clicking the button.
+      preventReopen.current = true;
+    }
+  };
+
+  const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      setOpen(true);
+      if (event.key === 'ArrowUp') {
+        // Focus the last item when pressing ArrowUp.
+        menuActions.current?.dispatch({
+          type: ListActionTypes.keyDown,
+          key: event.key,
+          event,
+        });
+      }
+    }
+  };
+
+  const createHandleMenuClick = () => {
+    return () => {
+      setOpen(false);
+      buttonElement?.focus();
+    };
+  };
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        minHeight: 144,
+        gap: 2,
+        py: 3,
+      }}
+    >
+      {styling === 'css' && <GlobalStyles styles={CSS} />}
+      {styling === 'tailwindcss' && (
+        <React.Fragment>
+          <ButtonUnstyled
+            className="min-h-[calc(1.5em + 22px)] inline-flex items-center gap-[0.5rem] rounded-[8px] border border-solid border-[--muidocs-palette-grey-200] bg-[--muidocs-palette-background-paper] p-[8px_12px_8px_6px] text-[0.875rem] leading-[1.5] transition-all [box-shadow:var(--shadow)] [font-family:IBM_Plex_sans] hover:bg-[--muidocs-palette-grey-50]  ui-focus-visible:[outline:3px_solid_var(--focus-ring)] dark:border-[--muidocs-palette-primaryDark-700] dark:hover:bg-[--muidocs-palette-primaryDark-800]"
+            type="button"
+            onClick={handleButtonClick}
+            onKeyDown={handleButtonKeyDown}
+            onMouseDown={handleButtonMouseDown}
+            ref={updateAnchor}
+            aria-controls={isOpen ? 'simple-menu' : undefined}
+            aria-expanded={isOpen || undefined}
+            aria-haspopup="menu"
+          >
+            <Person className="text-[--palette-primary]" />
+            My account
+          </ButtonUnstyled>
+          <MenuUnstyled
+            actions={menuActions}
+            open={isOpen}
+            onOpenChange={(open) => {
+              setOpen(open);
+            }}
+            anchorEl={buttonElement}
+            slots={{ root: PopperUnstyled }}
+            slotProps={{
+              root: { placement: 'top', className: 'z-[1000]' },
+              listbox: {
+                id: 'simple-menu',
+                className:
+                  'mx-0 my-[8px] p-[4px] flex flex-col rounded-[8px] border border-solid border-[--muidocs-palette-grey-200] bg-[--muidocs-palette-background-paper] shadow-[0px_4px_40px_rgba(62,80,96,0.1)] dark:border-[--muidocs-palette-primaryDark-700] dark:shadow-[0px_4px_40px_rgba(11,13,14,0.5)]',
+              },
+            }}
+          >
+            <MenuItemUnstyled
+              className="hover:color-[--muidocs-palette-text-primary] flex min-h-[24px] items-center gap-[4px] rounded-[4px] border border-solid border-transparent px-[12px] py-[6px] hover:cursor-default hover:border-[--muidocs-palette-grey-100] hover:bg-[--muidocs-palette-grey-50] ui-focus-visible:cursor-default ui-focus-visible:border-[--muidocs-palette-grey-100] ui-focus-visible:bg-[--muidocs-palette-grey-50] ui-focus-visible:outline-none"
+              onClick={createHandleMenuClick()}
+            >
+              Profile
+            </MenuItemUnstyled>
+            <MenuItemUnstyled
+              className="hover:color-[--muidocs-palette-text-primary] flex min-h-[24px] items-center gap-[4px] rounded-[4px] border border-solid border-transparent px-[12px] py-[6px] hover:cursor-default hover:border-[--muidocs-palette-grey-100] hover:bg-[--muidocs-palette-grey-50] ui-focus-visible:cursor-default ui-focus-visible:border-[--muidocs-palette-grey-100] ui-focus-visible:bg-[--muidocs-palette-grey-50] ui-focus-visible:outline-none"
+              onClick={createHandleMenuClick()}
+            >
+              Language settings
+            </MenuItemUnstyled>
+            <MenuItemUnstyled
+              className="hover:color-[--muidocs-palette-text-primary] flex min-h-[24px] items-center gap-[4px] rounded-[4px] border border-solid border-transparent px-[12px] py-[6px] hover:cursor-default hover:border-[--muidocs-palette-grey-100] hover:bg-[--muidocs-palette-grey-50] ui-focus-visible:cursor-default ui-focus-visible:border-[--muidocs-palette-grey-100] ui-focus-visible:bg-[--muidocs-palette-grey-50] ui-focus-visible:outline-none"
+              onClick={createHandleMenuClick()}
+            >
+              Log out
+            </MenuItemUnstyled>
+          </MenuUnstyled>
+        </React.Fragment>
+      )}
+      {(styling === 'css' || styling === 'system') && (
+        <React.Fragment>
+          <ButtonUnstyled
+            className="Mui-base"
+            slots={{ root: styling !== 'system' ? undefined : StyledMenuButton }}
+            type="button"
+            onClick={handleButtonClick}
+            onKeyDown={handleButtonKeyDown}
+            onMouseDown={handleButtonMouseDown}
+            ref={updateAnchor}
+            aria-controls={isOpen ? 'simple-menu' : undefined}
+            aria-expanded={isOpen || undefined}
+            aria-haspopup="menu"
+          >
+            <Person />
+            My account
+          </ButtonUnstyled>
+          <MenuUnstyled
+            actions={menuActions}
+            open={isOpen}
+            onOpenChange={(open) => {
+              setOpen(open);
+            }}
+            anchorEl={buttonElement}
+            slots={{
+              root: styling !== 'system' ? undefined : StyledPopper,
+              listbox: styling !== 'system' ? undefined : StyledListbox,
+            }}
+            slotProps={{
+              root: { placement: 'bottom', className: 'Mui-base' },
+              listbox: { id: 'simple-menu', className: 'Mui-base' },
+            }}
+          >
+            <MenuItemUnstyled
+              className="Mui-base"
+              slots={{ root: styling !== 'system' ? undefined : StyledMenuItem }}
+              onClick={createHandleMenuClick()}
+            >
+              Profile
+            </MenuItemUnstyled>
+            <MenuItemUnstyled
+              className="Mui-base"
+              slots={{ root: styling !== 'system' ? undefined : StyledMenuItem }}
+              onClick={createHandleMenuClick()}
+            >
+              Language settings
+            </MenuItemUnstyled>
+            <MenuItemUnstyled
+              className="Mui-base"
+              slots={{ root: styling !== 'system' ? undefined : StyledMenuItem }}
+              onClick={createHandleMenuClick()}
+            >
+              Log out
+            </MenuItemUnstyled>
+          </MenuUnstyled>
+        </React.Fragment>
+      )}
+    </Box>
+  );
+}
+
+BaseMenuDemo.getCode = (styling?: 'system' | 'tailwindcss' | 'css') => {
+  if (styling === 'system') {
+    return `import Button from '@mui/base/Button';
+import Menu from '@mui/base/Menu';
+import MenuItem from '@mui/base/MenuItem';
+import Popper from '@mui/base/Popper';
+
+const StyledMenuButton = styled('button')\`${buttonStyles}\`;
+const StyledListbox = styled('ul')\`${listboxStyles}\`;
+const StyledMenuItem = styled('li')\`${menuItemStyles}\`;
+
+function Demo() {
+  const [buttonElement, setButtonElement] = React.useState(null);
+  const updateAnchor = React.useCallback((node) => {
+    setButtonElement(node);
+  }, []);
+  return (
+    <>
+      <Button
+        ref={updateAnchor}
+        slots={{ root: StyledMenuButton }}
+        onClick={() => setOpen((open) => !open)}
+      >
+        My account
+      </Button>
+      <Menu
+        slots={{
+          root: Popper,
+          listbox: StyledListbox,
+        }}
+        anchorEl={buttonElement}
+      >
+        <MenuItem slots={{ root: StyledMenuItem }}>
+          Profile
+        </MenuItem>
+        <MenuItem slots={{ root: StyledMenuItem }}>
+          Language settings
+        </MenuItem>
+        <MenuItem slots={{ root: StyledMenuItem }}>
+          Log out
+        </MenuItem>
+      </Menu>
+    </>
+  )
+}
+`;
+  }
+  if (styling === 'css') {
+    return `import Button from '@mui/base/Button';
+import Menu from '@mui/base/Menu';
+import MenuItem from '@mui/base/MenuItem';
+import Popper from '@mui/base/Popper';
+import './styles.css';
+
+function Demo() {
+  const [buttonElement, setButtonElement] = React.useState(null);
+  const updateAnchor = React.useCallback((node) => {
+    setButtonElement(node);
+  }, []);
+  return (
+    <>
+      <Button
+        ref={updateAnchor}
+        onClick={() => setOpen((open) => !open)}
+      >
+        My account
+      </Button>
+      <Menu
+        slots={{ root: Popper }}
+        anchorEl={buttonElement}
+      >
+        <MenuItem>Profile</MenuItem>
+        <MenuItem>Language settings</MenuItem>
+        <MenuItem>Log out</MenuItem>
+      </Menu>
+    </>
+  )
+}
+
+/* styles.css */
+${CSS}
+`;
+  }
+  if (styling === 'tailwindcss') {
+    return `import Button from '@mui/base/Button';
+import Menu from '@mui/base/Menu';
+import MenuItem from '@mui/base/MenuItem';
+import Popper from '@mui/base/Popper';
+
+function Demo() {
+  const [buttonElement, setButtonElement] = React.useState(null);
+  const updateAnchor = React.useCallback((node) => {
+    setButtonElement(node);
+  }, []);
+  return (
+    <>
+      <ButtonUnstyled
+        className="min-h-[calc(1.5em + 22px)] inline-flex 
+        items-center gap-[0.5rem] rounded-[8px] border 
+        border-solid border-[--muidocs-palette-grey-200] 
+        bg-[--muidocs-palette-background-paper] 
+        p-[8px_12px_8px_6px] text-[0.875rem] 
+        leading-[1.5] transition-all [font-family:IBM_Plex_sans] 
+        [box-shadow:var(--shadow)]
+        hover:bg-[--muidocs-palette-grey-50] 
+        ui-focus-visible:[outline:3px_solid_var(--focus-ring)]
+        dark:border-[--muidocs-palette-primaryDark-700] 
+        dark:hover:bg-[--muidocs-palette-primaryDark-800]"
+        type="button"
+        onClick={handleButtonClick}
+        onKeyDown={handleButtonKeyDown}
+        onMouseDown={handleButtonMouseDown}
+        ref={updateAnchor}
+        aria-controls={isOpen ? 'simple-menu' : undefined}
+        aria-expanded={isOpen || undefined}
+        aria-haspopup="menu"
+      >
+        <Person className="text-[--palette-primary]" />
+        My account
+      </ButtonUnstyled>
+      <MenuUnstyled
+        actions={menuActions}
+        open={isOpen}
+        onOpenChange={(open) => {
+          setOpen(open);
+        }}
+        anchorEl={buttonElement}
+        slots={{ root: PopperUnstyled }}
+        slotProps={{
+          root: { placement: 'top', className: 'z-[1000]' },
+          listbox: {
+            id: 'simple-menu',
+            className:
+              'mx-0 my-[8px] p-[4px] flex flex-col rounded-[8px] 
+              border border-solid border-[--muidocs-palette-grey-200] 
+              bg-[--muidocs-palette-background-paper] 
+              shadow-[0px_4px_40px_rgba(62,80,96,0.1)] 
+              dark:border-[--muidocs-palette-primaryDark-700] 
+              dark:shadow-[0px_4px_40px_rgba(11,13,14,0.5)]',
+          },
+        }}
+      >
+        <MenuItemUnstyled
+          className="hover:color-[--muidocs-palette-text-primary] 
+          flex min-h-[24px] items-center gap-[4px] rounded-[4px] 
+          border border-solid border-transparent px-[12px] 
+          py-[6px] hover:cursor-default 
+          hover:border-[--muidocs-palette-grey-100] 
+          hover:bg-[--muidocs-palette-grey-50] 
+          ui-focus-visible:cursor-default 
+          ui-focus-visible:border-[--muidocs-palette-grey-100] 
+          ui-focus-visible:bg-[--muidocs-palette-grey-50] 
+          ui-focus-visible:outline-none"
+          onClick={createHandleMenuClick()}
+        >
+          Profile
+        </MenuItemUnstyled>
+        <MenuItemUnstyled
+          className="hover:color-[--muidocs-palette-text-primary] 
+          flex min-h-[24px] items-center gap-[4px] rounded-[4px] 
+          border border-solid border-transparent px-[12px] 
+          py-[6px] hover:cursor-default 
+          hover:border-[--muidocs-palette-grey-100] 
+          hover:bg-[--muidocs-palette-grey-50] 
+          ui-focus-visible:cursor-default 
+          ui-focus-visible:border-[--muidocs-palette-grey-100] 
+          ui-focus-visible:bg-[--muidocs-palette-grey-50] 
+          ui-focus-visible:outline-none"
+          onClick={createHandleMenuClick()}
+        >
+          Language settings
+        </MenuItemUnstyled>
+        <MenuItemUnstyled
+          className="hover:color-[--muidocs-palette-text-primary] 
+          flex min-h-[24px] items-center gap-[4px] rounded-[4px] 
+          border border-solid border-transparent px-[12px] 
+          py-[6px] hover:cursor-default 
+          hover:border-[--muidocs-palette-grey-100] 
+          hover:bg-[--muidocs-palette-grey-50] 
+          ui-focus-visible:cursor-default 
+          ui-focus-visible:border-[--muidocs-palette-grey-100] 
+          ui-focus-visible:bg-[--muidocs-palette-grey-50] 
+          ui-focus-visible:outline-none"
+          onClick={createHandleMenuClick()}
+        >
+          Log out
+        </MenuItemUnstyled>
+      </MenuUnstyled>
+    </>
+  )
+}
+`;
+  }
+  return ``;
+};
diff --git a/docs/src/components/productBaseUI/components/BaseSliderDemo.tsx b/docs/src/components/productBaseUI/components/BaseSliderDemo.tsx
new file mode 100644
index 00000000000000..6329053322e1e0
--- /dev/null
+++ b/docs/src/components/productBaseUI/components/BaseSliderDemo.tsx
@@ -0,0 +1,254 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Slider from '@mui/base/Slider';
+import { styled, GlobalStyles } from '@mui/system';
+
+const rootStyles = `color: var(--palette-primary);
+width: 100%;
+padding: 16px 0;
+display: inline-block;
+position: relative;
+cursor: pointer;
+touch-action: none;
+-webkit-tap-highlight-color: transparent;
+
+&:hover {
+  opacity: 1;
+}
+
+&.Mui-disabled {
+  pointer-events: none;
+  cursor: default;
+  color: var(--palette-primary);
+  opacity: 0.5;
+}
+
+& .MuiSlider-rail {
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 4px;
+  border-radius: 2px;
+  background-color: currentColor;
+  opacity: 0.4;
+}
+
+& .MuiSlider-track {
+  display: block;
+  position: absolute;
+  height: 4px;
+  border-radius: 2px;
+  background-color: currentColor;
+}
+
+& .MuiSlider-thumb {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  margin-left: -6px;
+  margin-top: -6px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  outline: 0;
+  border: 3px solid currentColor;
+  background-color: #fff;
+
+  :hover,
+  &.Mui-focusVisible,
+  &.Mui-active {
+    box-shadow: 0 0 0 0.25rem var(--focus-ring);
+  }
+}`;
+const StyledSlider = styled('span')(rootStyles);
+
+const CSS = `.MuiSlider-root {${rootStyles}}`;
+
+export default function BaseTabsDemo({ styling }: { styling?: 'system' | 'tailwindcss' | 'css' }) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        minHeight: 144,
+        gap: 2,
+        py: 3,
+        px: 5,
+        maxWidth: 300,
+        mx: 'auto',
+      }}
+    >
+      {styling === 'css' && <GlobalStyles styles={CSS} />}
+      {(styling === 'system' || styling === 'css') && (
+        <React.Fragment>
+          <Slider
+            slots={{ root: styling !== 'system' ? undefined : StyledSlider }}
+            defaultValue={10}
+          />
+          <Slider
+            slots={{ root: styling !== 'system' ? undefined : StyledSlider }}
+            defaultValue={10}
+            disabled
+          />
+        </React.Fragment>
+      )}
+      {styling === 'tailwindcss' && (
+        <React.Fragment>
+          <Slider
+            defaultValue={10}
+            slotProps={{
+              root: {
+                className:
+                  'py-4 px-0 w-full relative cursor-pointer text-[--palette-primary] touch-action-none tap-highlight-transparent hover:opacity-100 ui-disabled:pointer-events-none ui-disabled:cursor-default ui-disabled:opacity-50 ui-disabled:cursor-default ui-disabled:text-[--palette-primary] ui-disabled:opacity-50',
+              },
+              rail: {
+                className: 'block absolute w-full h-[4px] rounded-[2px] bg-current opacity-40',
+              },
+              track: {
+                className: 'block absolute h-[4px] rounded-[2px] bg-current',
+              },
+              thumb: {
+                className:
+                  'absolute w-[16px] h-[16px] -ml-[6px] -mt-[6px] box-border rounded-[50%] outline-none [border:3px_solid_currentcolor] bg-white hover:shadow-[0_0_0_0.25rem_var(--focus-ring)] ui-focus-visible:shadow-[0_0_0_0.25rem_var(--focus-ring)] ui-active:shadow-[0_0_0_0.25rem_var(--focus-ring)]',
+              },
+            }}
+          />
+          <Slider
+            defaultValue={10}
+            disabled
+            slotProps={{
+              root: {
+                className:
+                  'py-4 px-0 w-full relative cursor-pointer text-[--palette-primary] touch-action-none tap-highlight-transparent hover:opacity-100 ui-disabled:pointer-events-none ui-disabled:cursor-default ui-disabled:opacity-50 ui-disabled:cursor-default ui-disabled:text-[--palette-primary] ui-disabled:opacity-50',
+              },
+              rail: {
+                className: 'block absolute w-full h-[4px] rounded-[2px] bg-current opacity-40',
+              },
+              track: {
+                className: 'block absolute h-[4px] rounded-[2px] bg-current',
+              },
+              thumb: {
+                className:
+                  'absolute w-[16px] h-[16px] -ml-[6px] -mt-[6px] box-border rounded-[50%] outline-none [border:3px_solid_currentcolor] bg-white hover:shadow-[0_0_0_0.25rem_var(--focus-ring)] ui-focus-visible:shadow-[0_0_0_0.25rem_var(--focus-ring)] ui-active:shadow-[0_0_0_0.25rem_var(--focus-ring)]',
+              },
+            }}
+          />
+        </React.Fragment>
+      )}
+    </Box>
+  );
+}
+BaseTabsDemo.getCode = (styling?: 'system' | 'tailwindcss' | 'css') => {
+  if (styling === 'system') {
+    return `import Slider from '@mui/base/Slider';
+import { styled } from '@mui/system';
+
+const StyledSlider = styled('span')\`${rootStyles}/\`;
+
+<Slider
+  defaultValue={10}
+  slots={{ root: StyledSlider }}
+/>
+<Slider
+  disabled
+  defaultValue={10} 
+  slots={{ root: StyledSlider }}
+/>
+`;
+  }
+  if (styling === 'css') {
+    return `import Slider from '@mui/base/Slider';
+import './styles.css';
+
+<Slider
+  defaultValue={10}
+  slots={{ root: StyledSlider }}
+/>
+<Slider
+  disabled
+  defaultValue={10} 
+  slots={{ root: StyledSlider }}
+/>
+
+/* styles.css */
+${CSS}
+`;
+  }
+  if (styling === 'tailwindcss') {
+    return `import Slider from '@mui/base/Slider';
+    
+<Slider
+  defaultValue={10}
+  slotProps={{
+    root: {
+      className:
+        'py-4 px-0 w-full relative 
+        cursor-pointer text-[--palette-primary] 
+        touch-action-none tap-highlight-transparent 
+        hover:opacity-100 
+        ui-disabled:pointer-events-none 
+        ui-disabled:cursor-default 
+        ui-disabled:opacity-50 
+        ui-disabled:cursor-default 
+        ui-disabled:text-[--palette-primary] 
+        ui-disabled:opacity-50',
+    },
+    rail: {
+      className: 'block absolute w-full h-[4px] 
+      rounded-[2px] bg-current opacity-40',
+    },
+    track: {
+      className: 'block absolute h-[4px] 
+      rounded-[2px] bg-current',
+    },
+    thumb: {
+      className:
+        'absolute w-[16px] h-[16px] -ml-[6px] 
+        -mt-[6px] box-border rounded-[50%] 
+        outline-none [border:3px_solid_currentcolor] 
+        bg-white hover:shadow-[0_0_0_0.25rem_var(--focus-ring)] 
+        ui-focus-visible:shadow-[0_0_0_0.25rem_var(--focus-ring)] 
+        ui-active:shadow-[0_0_0_0.25rem_var(--focus-ring)]',
+    },
+  }}
+/>
+<Slider
+  disabled
+  defaultValue={10}
+  slotProps={{
+    root: {
+      className:
+        'py-4 px-0 w-full relative 
+        cursor-pointer text-[--palette-primary] 
+        touch-action-none tap-highlight-transparent 
+        hover:opacity-100 
+        ui-disabled:pointer-events-none 
+        ui-disabled:cursor-default 
+        ui-disabled:opacity-50 
+        ui-disabled:cursor-default 
+        ui-disabled:text-[--palette-primary] 
+        ui-disabled:opacity-50',
+    },
+    rail: {
+      className: 'block absolute w-full h-[4px] 
+      rounded-[2px] bg-current opacity-40',
+    },
+    track: {
+      className: 'block absolute h-[4px] 
+      rounded-[2px] bg-current',
+    },
+    thumb: {
+      className:
+        'absolute w-[16px] h-[16px] -ml-[6px] 
+        -mt-[6px] box-border rounded-[50%] 
+        outline-none [border:3px_solid_currentcolor] 
+        bg-white hover:shadow-[0_0_0_0.25rem_var(--focus-ring)] 
+        ui-focus-visible:shadow-[0_0_0_0.25rem_var(--focus-ring)] 
+        ui-active:shadow-[0_0_0_0.25rem_var(--focus-ring)]',
+    },
+  }}
+/>`;
+  }
+  return '';
+};
diff --git a/docs/src/components/productBaseUI/components/BaseTabsDemo.tsx b/docs/src/components/productBaseUI/components/BaseTabsDemo.tsx
new file mode 100644
index 00000000000000..d7f0854acdbc9b
--- /dev/null
+++ b/docs/src/components/productBaseUI/components/BaseTabsDemo.tsx
@@ -0,0 +1,260 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import TabsUnstyled from '@mui/base/Tabs';
+import TabsListUnstyled from '@mui/base/TabsList';
+import TabPanelUnstyled from '@mui/base/TabPanel';
+import TabUnstyled from '@mui/base/Tab';
+import { styled, GlobalStyles } from '@mui/system';
+
+const tabListStyles = `
+  min-width: 300px;
+  background-color: var(--palette-primary);
+  border-radius: 12px;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: space-between;
+  box-shadow: var(--shadow);
+`;
+const StyledTabsList = styled('div')(tabListStyles);
+
+const tabPanelStyles = `
+  width: 100%;
+  font-family: IBM Plex Sans, sans-serif;
+  font-size: 0.875rem;
+`;
+const StyledTabPanel = styled('div')(tabPanelStyles);
+
+const tabStyles = `
+  font-family: IBM Plex Sans, sans-serif;
+  color: white;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: bold;
+  background-color: transparent;
+  width: 100%;
+  padding: 12px;
+  margin: 6px 6px;
+  border: none;
+  border-radius: 7px;
+  display: flex;
+  justify-content: center;
+
+  &:hover {
+    background-color: var(--palette-primary-light);
+  }
+
+  &:focus-visible {
+    color: #FFF;
+    outline: 3px solid var(--focus-ring);
+  }
+
+  &.Mui-selected {
+    background-color: #FFF;
+    color: var(--palette-primary);
+  }
+`;
+
+const StyledTab = styled('button')(tabStyles);
+
+const CSS = `
+.MuiTabsList-root{${tabListStyles}};
+
+.MuiTabPanel-root{${tabPanelStyles}};
+
+.MuiTab-root{${tabStyles}}`;
+
+export default function BaseTabsDemo({ styling }: { styling: 'system' | 'tailwindcss' | 'css' }) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        minHeight: 144,
+        gap: 2,
+        py: 3,
+      }}
+    >
+      {styling === 'system' && (
+        <TabsUnstyled selectionFollowsFocus defaultValue={0}>
+          <TabsListUnstyled slots={{ root: StyledTabsList }}>
+            <TabUnstyled slots={{ root: StyledTab }}>One</TabUnstyled>
+            <TabUnstyled slots={{ root: StyledTab }}>Two</TabUnstyled>
+            <TabUnstyled slots={{ root: StyledTab }}>Three</TabUnstyled>
+          </TabsListUnstyled>
+          <TabPanelUnstyled slots={{ root: StyledTabPanel }} value={0}>
+            First page
+          </TabPanelUnstyled>
+          <TabPanelUnstyled slots={{ root: StyledTabPanel }} value={1}>
+            Second page
+          </TabPanelUnstyled>
+          <TabPanelUnstyled slots={{ root: StyledTabPanel }} value={2}>
+            Third page
+          </TabPanelUnstyled>
+        </TabsUnstyled>
+      )}
+      {styling === 'css' && (
+        <TabsUnstyled selectionFollowsFocus defaultValue={0}>
+          <GlobalStyles styles={CSS} />
+          <TabsListUnstyled>
+            <TabUnstyled>One</TabUnstyled>
+            <TabUnstyled>Two</TabUnstyled>
+            <TabUnstyled>Three</TabUnstyled>
+          </TabsListUnstyled>
+          <TabPanelUnstyled value={0}>First page</TabPanelUnstyled>
+          <TabPanelUnstyled value={1}>Second page</TabPanelUnstyled>
+          <TabPanelUnstyled value={2}>Third page</TabPanelUnstyled>
+        </TabsUnstyled>
+      )}
+      {styling === 'tailwindcss' && ( // https://play.tailwindcss.com/8jGjUI7EWe
+        <TabsUnstyled selectionFollowsFocus defaultValue={0}>
+          <TabsListUnstyled className="mb-[16px] flex min-w-[300px] content-between items-center justify-center rounded-[12px] bg-[--palette-primary] [box-shadow:var(--shadow)]">
+            <TabUnstyled className="m-[6px] flex w-full cursor-pointer justify-center rounded-[7px] border-none bg-transparent p-[12px] text-[0.875rem] font-bold text-white [font-family:IBM_Plex_sans] hover:bg-[--palette-primary-light] focus:text-white focus-visible:[outline:3px_solid_var(--focus-ring)] ui-selected:bg-white ui-selected:text-[--palette-primary]">
+              One
+            </TabUnstyled>
+            <TabUnstyled className="m-[6px] flex w-full cursor-pointer justify-center rounded-[7px] border-none bg-transparent p-[12px] text-[0.875rem] font-bold text-white [font-family:IBM_Plex_sans] hover:bg-[--palette-primary-light] focus:text-white focus-visible:[outline:3px_solid_var(--focus-ring)] ui-selected:bg-white ui-selected:text-[--palette-primary]">
+              Two
+            </TabUnstyled>
+            <TabUnstyled className="m-[6px] flex w-full cursor-pointer justify-center rounded-[7px] border-none bg-transparent p-[12px] text-[0.875rem] font-bold text-white [font-family:IBM_Plex_sans] hover:bg-[--palette-primary-light] focus:text-white focus-visible:[outline:3px_solid_var(--focus-ring)] ui-selected:bg-white ui-selected:text-[--palette-primary]">
+              Three
+            </TabUnstyled>
+          </TabsListUnstyled>
+          <TabPanelUnstyled className="text-[0.875rem] [font-family:IBM_Plex_sans]" value={0}>
+            First page
+          </TabPanelUnstyled>
+          <TabPanelUnstyled className="text-[0.875rem] [font-family:IBM_Plex_sans]" value={1}>
+            Second page
+          </TabPanelUnstyled>
+          <TabPanelUnstyled className="text-[0.875rem] [font-family:IBM_Plex_sans]" value={2}>
+            Third page
+          </TabPanelUnstyled>
+        </TabsUnstyled>
+      )}
+    </Box>
+  );
+}
+BaseTabsDemo.getCode = (styling: 'system' | 'tailwindcss' | 'css') => {
+  if (styling === 'system') {
+    return `import TabsUnstyled from '@mui/base/Tabs';
+import TabsListUnstyled from '@mui/base/TabsList';
+import TabPanelUnstyled from '@mui/base/TabPanel';
+import TabUnstyled from '@mui/base/Tab';
+import { styled } from '@mui/system';
+
+const StyledTabsList = styled('div')\`${tabListStyles}\`;
+const StyledTabPanel = styled('div')\`${tabPanelStyles}\`;
+const StyledTab = styled('button')\`/${tabStyles}\`;
+
+<TabsUnstyled selectionFollowsFocus defaultValue={0}>
+  <TabsListUnstyled slots={{ root: StyledTabsList }}>
+    <TabUnstyled slots={{ root: StyledTab }}>One</TabUnstyled>
+    <TabUnstyled slots={{ root: StyledTab }}>Two</TabUnstyled>
+    <TabUnstyled slots={{ root: StyledTab }}>Three</TabUnstyled>
+  </TabsListUnstyled>
+  <TabPanelUnstyled slots={{ root: StyledTabPanel }} value={0}>
+    First page
+  </TabPanelUnstyled>
+  <TabPanelUnstyled slots={{ root: StyledTabPanel }} value={1}>
+    Second page
+  </TabPanelUnstyled>
+  <TabPanelUnstyled slots={{ root: StyledTabPanel }} value={2}>
+    Third page
+  </TabPanelUnstyled>
+</TabsUnstyled>
+`;
+  }
+  if (styling === 'tailwindcss') {
+    return `import TabsUnstyled from '@mui/base/Tabs';
+import TabsListUnstyled from '@mui/base/TabsList';
+import TabPanelUnstyled from '@mui/base/TabPanel';
+import TabUnstyled from '@mui/base/Tab';
+
+<TabsUnstyled selectionFollowsFocus defaultValue={0}>
+  <TabsListUnstyled
+    className="mb-[16px] flex min-w-[300px] content-between 
+              items-center justify-center rounded-[12px] 
+              bg-[--palette-primary] [box-shadow:var(--shadow)]">
+    <TabUnstyled 
+      className="m-[6px] flex w-full cursor-pointer 
+                justify-center rounded-[7px] border-none 
+                bg-transparent p-[12px] text-[0.875rem] 
+                font-bold text-white [font-family:IBM_Plex_sans] 
+                focus:text-white 
+                focus:[outline:3px_solid_var(--focus-ring)] 
+                ui-selected:bg-white 
+                ui-selected:text-[--palette-primary]">
+      One
+    </TabUnstyled>
+    <TabUnstyled 
+      className="m-[6px] flex w-full cursor-pointer 
+                justify-center rounded-[7px] border-none 
+                bg-transparent p-[12px] text-[0.875rem] 
+                font-bold text-white [font-family:IBM_Plex_sans] 
+                focus:text-white 
+                focus:[outline:3px_solid_var(--focus-ring)] 
+                ui-selected:bg-white 
+                ui-selected:text-[--palette-primary]">
+      Two
+    </TabUnstyled>
+    <TabUnstyled 
+      className="m-[6px] flex w-full cursor-pointer 
+                justify-center rounded-[7px] border-none 
+                bg-transparent p-[12px] text-[0.875rem] 
+                font-bold text-white [font-family:IBM_Plex_sans] 
+                focus:text-white 
+                focus:[outline:3px_solid_var(--focus-ring)] 
+                ui-selected:bg-white 
+                ui-selected:text-[--palette-primary]">
+      Three
+    </TabUnstyled>
+  </TabsListUnstyled>
+  <TabPanelUnstyled 
+    className="text-[0.875rem] [font-family:IBM_Plex_sans]" 
+    value={0}>
+    First page
+  </TabPanelUnstyled>
+  <TabPanelUnstyled 
+    className="text-[0.875rem] [font-family:IBM_Plex_sans]" 
+    value={1}>
+    Second page
+  </TabPanelUnstyled>
+  <TabPanelUnstyled 
+    className="text-[0.875rem] [font-family:IBM_Plex_sans]" 
+    value={2}>
+    Third page
+  </TabPanelUnstyled>
+</TabsUnstyled>`;
+  }
+  if (styling === 'css') {
+    return `import TabsUnstyled from '@mui/base/Tabs';
+import TabsListUnstyled from '@mui/base/TabsList';
+import TabPanelUnstyled from '@mui/base/TabPanel';
+import TabUnstyled from '@mui/base/Tab';
+import { styled } from '@mui/system';
+import './styles.css';
+
+<TabsUnstyled selectionFollowsFocus defaultValue={0}>
+  <TabsListUnstyled>
+    <TabUnstyled>One</TabUnstyled>
+    <TabUnstyled>Two</TabUnstyled>
+    <TabUnstyled>Three</TabUnstyled>
+  </TabsListUnstyled>
+  <TabPanelUnstyled value={0}>
+    First page
+  </TabPanelUnstyled>
+  <TabPanelUnstyled value={1}>
+    Second page
+  </TabPanelUnstyled>
+  <TabPanelUnstyled value={2}>
+    Third page
+  </TabPanelUnstyled>
+</TabsUnstyled>
+
+/* styles.css */
+${CSS}
+    `;
+  }
+  return '';
+};
diff --git a/docs/src/components/productBaseUI/heroVariables.ts b/docs/src/components/productBaseUI/heroVariables.ts
new file mode 100644
index 00000000000000..e7258e02074122
--- /dev/null
+++ b/docs/src/components/productBaseUI/heroVariables.ts
@@ -0,0 +1,117 @@
+const sleek = {
+  // tokens
+  '--color-primary': 'var(--muidocs-palette-primary-main)',
+  '--color-primary-light': 'var(--muidocs-palette-primary-100)',
+  '--border-width': '1px',
+  '--border-color': 'var(--muidocs-palette-grey-200)',
+  '--border-radius': '8px',
+  '--avatar-radius': '99px',
+  // components
+  '--Panel-shadow': '0 4px 40px 0 rgba(62, 80, 96, 0.15)',
+  '--Tab-hoverBackground': 'var(--muidocs-palette-grey-50)',
+  '--Select-radius': '12px',
+  '--Select-spacing': '12px',
+  '--Input-border': 'var(--muidocs-palette-primary-400)',
+  '--Input-focus-border': '0 0 0 3px var(--muidocs-palette-primary-200)',
+  '--Slider-thumb-focus': 'rgba(0, 127, 255, 0.2)',
+  '--formControl-shadow': '0px 2px 2px rgb(205 210 215 / 20%)',
+  '[data-mui-color-scheme="dark"] &': {
+    // dark tokens
+    '--color-primary': 'var(--muidocs-palette-primary-light)',
+    '--color-primary-light': 'var(--muidocs-palette-primaryDark-600)',
+    '--border-color': 'var(--muidocs-palette-primaryDark-700)',
+    '--formControl-shadow': '0px 2px 2px rgb(0 0 0 / 80%)',
+    // dark components
+    '--Panel-shadow': '0 4px 40px 0 rgba(0, 0, 0, 0.15)',
+    '--Select-background': 'var(--muidocs-palette-primaryDark-800)',
+    '--Tab-hoverBackground': 'var(--muidocs-palette-primaryDark-700)',
+    '--Option-selectedBackground': 'var(--muidocs-palette-primaryDark-800)',
+    '--Option-hoverBackground': 'var(--muidocs-palette-grey-900)',
+    '--Switch-background': 'var(--muidocs-palette-grey-700)',
+    '--Input-border': '0px 2px 2px var(--muidocs-palette-primary-dark)',
+    '--Input-focus-border': '0 0 0 3px var(--muidocs-palette-primary-600)',
+    '--Slider-thumb-focus': 'rgba(0, 127, 255, 0.6)',
+  },
+};
+
+const retro = {
+  // tokens
+  '--color-primary': 'var(--muidocs-palette-primary-main)',
+  '--color-primary-light': 'var(--muidocs-palette-primary-100)',
+  '--border-width': '1px',
+  '--border-color': 'var(--muidocs-palette-grey-900)',
+  '--avatar-radius': '2px',
+  // components
+  '--Panel-shadow': '-8px 8px 0 0 var(--muidocs-palette-grey-800)',
+  '--Tab-background': 'var(--muidocs-palette-primary-50)',
+  '--Tab-hoverBackground': 'var(--muidocs-palette-grey-100)',
+  '--Select-radius': '0px',
+  '--Select-spacing': '12px',
+  '--Select-background': 'var(--muidocs-palette-grey-50)',
+  '--Input-border': 'var(--muidocs-palette-primary-400)',
+  '--Input-focus-border': '0 0 0 3px var(--muidocs-palette-primary-200)',
+  '--Slider-thumb-focus': 'rgba(0, 127, 255, 0.2)',
+  '& *': {
+    fontFamily: 'Menlo,Consolas,"Droid Sans Mono",monospace',
+  },
+  '[data-mui-color-scheme="dark"] &': {
+    // dark tokens
+    '--color-primary': 'var(--muidocs-palette-primary-light)',
+    '--color-primary-light': 'var(--muidocs-palette-primaryDark-600)',
+    '--border-color': 'var(--muidocs-palette-primaryDark-500)',
+    '--formControl-shadow': '0px 2px 2px rgb(0 0 0 / 80%)',
+    // dark components
+    '--Panel-shadow': '-8px 8px 0 0 var(--muidocs-palette-primaryDark-700)',
+    '--Tab-background': 'var(--muidocs-palette-grey-800)',
+    '--Tab-hoverBackground': 'var(--muidocs-palette-grey-700)',
+    '--Select-background': 'var(--muidocs-palette-grey-900)',
+    '--Option-selectedBackground': 'var(--muidocs-palette-grey-800)',
+    '--Option-hoverBackground': 'var(--muidocs-palette-grey-900)',
+    '--Switch-background': 'var(--muidocs-palette-grey-700)',
+    '--Input-border': '0px 2px 2px var(--muidocs-palette-primary-dark)',
+    '--Input-focus-border': '0 0 0 3px var(--muidocs-palette-primary-600)',
+    '--Slider-thumb-focus': 'rgba(0, 127, 255, 0.6)',
+  },
+};
+
+const playful = {
+  // tokens
+  '--color-primary': 'var(--muidocs-palette-primary-main)',
+  '--color-primary-light': 'var(--muidocs-palette-primary-100)',
+  '--border-radius': '24px',
+  '--border-width': '2px',
+  '--border-color': 'var(--muidocs-palette-primary-200)',
+  '--avatar-radius': '999px',
+  // components
+  '--Panel-shadow': '0 4px 40px 0 rgba(51, 153, 255, 0.2)',
+  '--Select-spacing': '12px',
+  '--Select-ringColor': 'var(--muidocs-palette-grey-400)',
+  '--Option-selectedBackground': 'var(--muidocs-palette-primary-50)',
+  '--Tab-background': 'var(--muidocs-palette-primary-50)',
+  '--Tab-hoverBackground': 'var(--muidocs-palette-primary-100)',
+  '--Input-border': 'var(--muidocs-palette-primary-400)',
+  '--Input-focus-border': '0 0 0 3px var(--muidocs-palette-primary-200)',
+  '--Slider-thumb-focus': 'rgba(0, 127, 255, 0.2)',
+  '& *': {
+    fontFamily: 'Poppins, sans-serif',
+  },
+  '[data-mui-color-scheme="dark"] &': {
+    // dark tokens
+    '--color-primary': 'var(--muidocs-palette-primary-light)',
+    '--color-primary-light': 'var(--muidocs-palette-primaryDark-600)',
+    '--border-color': 'var(--muidocs-palette-primary-700)',
+    '--formControl-shadow': '0px 2px 2px rgb(0 0 0 / 80%)',
+    // dark components
+    '--Tab-background': 'var(--muidocs-palette-primary-900)',
+    '--Tab-hoverBackground': 'var(--muidocs-palette-primary-800)',
+    '--Select-ringColor': 'var(--muidocs-palette-grey-700)',
+    '--Option-selectedBackground': 'var(--muidocs-palette-primary-900)',
+    '--Option-hoverBackground': 'var(--muidocs-palette-grey-900)',
+    '--Switch-background': 'var(--muidocs-palette-grey-700)',
+    '--Input-border': '0px 2px 2px var(--muidocs-palette-primary-dark)',
+    '--Input-focus-border': '0 0 0 3px var(--muidocs-palette-primary-600)',
+    '--Slider-thumb-focus': 'rgba(0, 127, 255, 0.6)',
+  },
+};
+
+export default [sleek, retro, playful];
diff --git a/docs/src/components/productCore/CoreHeroEnd.tsx b/docs/src/components/productCore/CoreHeroEnd.tsx
new file mode 100644
index 00000000000000..35f555eeebaf61
--- /dev/null
+++ b/docs/src/components/productCore/CoreHeroEnd.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
+import Section from 'docs/src/layouts/Section';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
+import GradientText from 'docs/src/components/typography/GradientText';
+import Link from 'docs/src/modules/components/Link';
+import ROUTES from 'docs/src/route';
+import MuiStatistics from 'docs/src/components/home/MuiStatistics';
+import { alpha } from '@mui/material/styles';
+
+export default function CoreHeroEnd() {
+  return (
+    <Section
+      cozy
+      data-mui-color-scheme="dark"
+      sx={{
+        background: (theme) =>
+          `linear-gradient(180deg, ${(theme.vars || theme).palette.primaryDark[800]} 50%, 
+        ${alpha(theme.palette.primary[800], 0.2)} 100%), ${
+            (theme.vars || theme).palette.primaryDark[800]
+          }`,
+      }}
+    >
+      <Grid container spacing={2} alignItems="center">
+        <Grid item md={6}>
+          <Box maxWidth={500} sx={{ mb: 4 }}>
+            <SectionHeadline
+              overline="Community"
+              title={
+                <Typography variant="h2">
+                  Join our <GradientText>global community</GradientText>
+                </Typography>
+              }
+              description="The core components were crafted by many hands, all over the world. Join us today to get help when you need it, and lend a hand when you can."
+            />
+            <Button
+              aria-label="Go to documentation"
+              component={Link}
+              href={ROUTES.communityHelp}
+              noLinkStyle
+              size="large"
+              variant="contained"
+              endIcon={<KeyboardArrowRightRounded />}
+              sx={{ width: { xs: '100%', sm: 'auto' } }}
+            >
+              Learn more
+            </Button>
+          </Box>
+        </Grid>
+        <MuiStatistics />
+      </Grid>
+    </Section>
+  );
+}
diff --git a/docs/src/components/productCore/CoreProducts.tsx b/docs/src/components/productCore/CoreProducts.tsx
index 3e05eba394c7d1..5b5e697beecd1c 100644
--- a/docs/src/components/productCore/CoreProducts.tsx
+++ b/docs/src/components/productCore/CoreProducts.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { alpha } from '@mui/material/styles';
 // import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid';
+import Section from 'docs/src/layouts/Section';
 import Link from 'docs/src/modules/components/Link';
 
 // Note: All of the commented code will be put back in once logos for each Core product are done.
@@ -40,7 +40,7 @@ const content = [
 
 export default function CoreProducts() {
   return (
-    <Container sx={{ mb: 4 }}>
+    <Section cozy>
       <Grid container spacing={2}>
         {content.map(({ title, description, link }) => (
           <Grid key={title} item xs={12} md={6}>
@@ -120,6 +120,6 @@ export default function CoreProducts() {
           </Grid>
         ))}
       </Grid>
-    </Container>
+    </Section>
   );
 }
diff --git a/docs/src/components/productDesignKit/DesignKitDemo.tsx b/docs/src/components/productDesignKit/DesignKitDemo.tsx
index a59e4a08637431..ea818a4a0acd37 100644
--- a/docs/src/components/productDesignKit/DesignKitDemo.tsx
+++ b/docs/src/components/productDesignKit/DesignKitDemo.tsx
@@ -39,7 +39,7 @@ export default function TemplateDemo() {
     [DEMOS[2]]: <WidgetsRounded fontSize="small" />,
   };
   return (
-    <Section bg="comfort">
+    <Section bg="gradient" cozy>
       <Grid container spacing={2} alignItems="center">
         <Grid item md={6} sx={{ minWidth: 0 }}>
           <Box maxWidth={500}>
@@ -50,7 +50,7 @@ export default function TemplateDemo() {
                   Upgrade your <GradientText>design workflow</GradientText>
                 </Typography>
               }
-              description="The UI kits contain many of the MUI components with states, variations, colors, typography, and icons. We frequently update it to sync with the most up-to-date MUI release."
+              description="The Design kits contain many of the Material UI components with states, variations, colors, typography, and icons. We frequently update it to sync with the most up-to-date Material UI release."
             />
           </Box>
           <Group desktopColumns={2} sx={{ mt: 4 }}>
@@ -201,7 +201,7 @@ export default function TemplateDemo() {
             <Frame.Info sx={{ display: 'flex', alignItems: 'center', minWidth: 0 }}>
               <Box sx={{ minWidth: 0 }}>
                 <Typography variant="body2" fontWeight={500} noWrap sx={{ mb: 0.5 }}>
-                  e.g. MUI for Figma
+                  e.g. Material UI for Figma
                 </Typography>
               </Box>
               <Button
diff --git a/docs/src/components/productDesignKit/DesignKitFAQ.tsx b/docs/src/components/productDesignKit/DesignKitFAQ.tsx
index 616d2b040f865c..34f26ba29de3af 100644
--- a/docs/src/components/productDesignKit/DesignKitFAQ.tsx
+++ b/docs/src/components/productDesignKit/DesignKitFAQ.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
+import Section from 'docs/src/layouts/Section';
 import InternalLink from 'docs/src/modules/components/Link';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
@@ -137,7 +137,7 @@ export default function DesignKitFAQ() {
     );
   }
   return (
-    <Container sx={{ py: { xs: 4, sm: 6, md: 8 } }}>
+    <Section>
       <Typography variant="h2" sx={{ mb: { xs: 2, sm: 4 } }} id="faq">
         Frequently asked questions
       </Typography>
@@ -159,7 +159,7 @@ export default function DesignKitFAQ() {
               borderColor: 'grey.300',
               bgcolor: 'white',
               ...theme.applyDarkStyles({
-                borderColor: 'primaryDark.400',
+                borderColor: 'primaryDark.600',
                 bgcolor: 'primaryDark.800',
               }),
             })}
@@ -186,6 +186,6 @@ export default function DesignKitFAQ() {
           </Paper>
         </Grid>
       </Grid>
-    </Container>
+    </Section>
   );
 }
diff --git a/docs/src/components/productDesignKit/DesignKitHero.tsx b/docs/src/components/productDesignKit/DesignKitHero.tsx
index 721d7543b44215..cbb801f79cf5af 100644
--- a/docs/src/components/productDesignKit/DesignKitHero.tsx
+++ b/docs/src/components/productDesignKit/DesignKitHero.tsx
@@ -17,6 +17,7 @@ import {
 export default function TemplateHero() {
   return (
     <HeroContainer
+      linearGradient
       left={
         <Box sx={{ textAlign: { xs: 'center', md: 'left' } }}>
           <Typography
@@ -36,12 +37,13 @@ export default function TemplateHero() {
             <IconImage width={28} height={28} name="product-designkits" /> Design kits
           </Typography>
           <Typography variant="h1" sx={{ my: 2, maxWidth: 500 }}>
-            MUI in your favorite
+            Material UI
+            <br /> in your favorite
             <br /> <GradientText>design tool</GradientText>
           </Typography>
           <Typography color="text.secondary" sx={{ mb: 3, maxWidth: 450 }}>
-            Pick your favorite design tool to enjoy and use MUI components. Boost consistency and
-            facilitate communication when working with developers.
+            Pick your favorite design tool to enjoy and use Material UI components. Boost
+            consistency and facilitate communication when working with developers.
           </Typography>
           <Button
             component={Link}
diff --git a/docs/src/components/productDesignKit/DesignKitValues.tsx b/docs/src/components/productDesignKit/DesignKitValues.tsx
index 3561b5023491e0..32bd4d4e364b54 100644
--- a/docs/src/components/productDesignKit/DesignKitValues.tsx
+++ b/docs/src/components/productDesignKit/DesignKitValues.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid';
+import Section from 'docs/src/layouts/Section';
 import GradientText from 'docs/src/components/typography/GradientText';
 import Palette from '@mui/icons-material/Palette';
 import LibraryBooks from '@mui/icons-material/LibraryBooks';
@@ -14,7 +14,7 @@ const content = [
     icon: <Palette fontSize="small" color="primary" />,
     title: 'For designers',
     description:
-      'Save time getting the MUI Core components all setup, leveraging the latest features from your favorite design tool.',
+      'Save time getting the Material UI components all setup, leveraging the latest features from your favorite design tool.',
   },
   {
     icon: <LibraryBooks fontSize="small" color="primary" />,
@@ -32,7 +32,7 @@ const content = [
 
 function DesignKitValues() {
   return (
-    <Container sx={{ py: { xs: 4, sm: 6, md: 8 } }}>
+    <Section>
       <Typography variant="body2" color="primary" fontWeight="bold">
         Collaboration
       </Typography>
@@ -40,30 +40,68 @@ function DesignKitValues() {
         Be more efficient <GradientText>designing and developing</GradientText> with the same
         library
       </Typography>
-      <Grid container spacing={2}>
+      <Grid container spacing={3}>
         {content.map(({ icon, title, description }) => (
           <Grid key={title} item xs={12} sm={6} md={4}>
-            <Paper variant="outlined" sx={{ p: 2, height: '100%' }}>
-              <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+            <Paper
+              variant="outlined"
+              sx={(theme) => ({
+                p: 3,
+                height: '100%',
+                position: 'relative',
+                borderRadius: '12px',
+                border: '1px solid',
+                borderColor: 'grey.100',
+                background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
+
+                ...theme.applyDarkStyles({
+                  bgcolor: 'primaryDark.900',
+                  borderColor: 'primaryDark.700',
+                  background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
+                }),
+              })}
+            >
+              <Box
+                sx={(theme) => ({
+                  width: 40,
+                  height: 40,
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  borderRadius: 1,
+                  border: '1px solid',
+                  borderColor: 'primary.200',
+                  bgcolor: 'primary.50',
+                  boxShadow:
+                    '0px 1px 6px 0px rgba(194, 224, 255, 1), 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset',
+                  ...theme.applyDarkStyles({
+                    borderColor: 'primary.400',
+                    bgcolor: 'primary.900',
+                    boxShadow:
+                      '0px 1px 6px 0px rgba(0, 89, 178, 1), 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset',
+                  }),
+                })}
+              >
                 {icon}
-                <Typography
-                  fontWeight="bold"
-                  component="h3"
-                  color="text.primary"
-                  variant="body2"
-                  sx={{ ml: 1 }}
-                >
-                  {title}
-                </Typography>
               </Box>
-              <Typography variant="body2" color="text.secondary">
+              <Typography
+                fontWeight="bold"
+                component="h3"
+                color="text.primary"
+                variant="body2"
+                mt={2}
+                mb={0.5}
+              >
+                {title}
+              </Typography>
+              <Typography variant="body2" color="text.secondary" mb={2}>
                 {description}
               </Typography>
             </Paper>
           </Grid>
         ))}
       </Grid>
-    </Container>
+    </Section>
   );
 }
 
diff --git a/docs/src/components/productMaterial/MaterialComponents.tsx b/docs/src/components/productMaterial/MaterialComponents.tsx
index f6262367518b85..51deed92906245 100644
--- a/docs/src/components/productMaterial/MaterialComponents.tsx
+++ b/docs/src/components/productMaterial/MaterialComponents.tsx
@@ -42,12 +42,17 @@ const StyledButton = styled(Button)(({ theme }) => ({
   fontSize: theme.typography.pxToRem(12),
   lineHeight: 18 / 12,
   '&.MuiButton-text': {
-    color: theme.palette.grey[400],
+    color: theme.palette.grey[500],
+    border: '1px solid',
+    borderColor: theme.palette.primaryDark[700],
+    '&:hover': {
+      backgroundColor: theme.palette.primaryDark[700],
+    },
   },
   '&.MuiButton-outlined': {
     color: '#fff',
-    backgroundColor: theme.palette.primary[700],
-    borderColor: theme.palette.primary[500],
+    backgroundColor: theme.palette.primary[800],
+    borderColor: theme.palette.primary[700],
     '&:hover': {
       backgroundColor: theme.palette.primary[700],
     },
@@ -142,7 +147,7 @@ export default function MaterialComponents() {
     [DEMOS[4]]: <InfoRounded fontSize="small" />,
   };
   return (
-    <Section bg="comfort">
+    <Section bg="gradient">
       <Grid container spacing={2}>
         <Grid item md={6} sx={{ minWidth: 0 }}>
           <Box maxWidth={500}>
@@ -322,7 +327,7 @@ export default function MaterialComponents() {
                 pt: 5,
               }}
             >
-              <Box sx={{ height: 'calc(100% + 40px)', overflow: 'auto', m: -2, p: 2 }}>
+              <Box sx={{ height: 'calc(100% + 40px)', overflow: 'auto', m: -2, p: 2, pt: 3 }}>
                 <HighlightedCode
                   copyButtonHidden
                   component={MarkdownElement}
@@ -331,15 +336,19 @@ export default function MaterialComponents() {
                 />
               </Box>
               <Box
-                sx={{
-                  pl: 1.5,
+                sx={(theme) => ({
+                  pb: 3,
                   display: 'flex',
                   alignItems: 'center',
                   position: 'absolute',
-                  top: 15,
-                  left: 10,
+                  top: 12,
+                  left: 16,
+                  right: 0,
                   zIndex: 10,
-                }}
+                  background: `linear-gradient(to bottom, ${
+                    (theme.vars || theme).palette.common.black
+                  } 30%, transparent)`,
+                })}
               >
                 <StyledButton
                   size="small"
@@ -358,7 +367,7 @@ export default function MaterialComponents() {
                   }}
                   sx={{ ml: 1 }}
                 >
-                  Custom Theme
+                  Custom theme
                 </StyledButton>
               </Box>
               <StylingInfo appeared={customized} />
diff --git a/docs/src/components/productMaterial/MaterialHero.tsx b/docs/src/components/productMaterial/MaterialHero.tsx
index 3f8e807c5b3878..66e62e67967a7a 100644
--- a/docs/src/components/productMaterial/MaterialHero.tsx
+++ b/docs/src/components/productMaterial/MaterialHero.tsx
@@ -209,6 +209,7 @@ const customTheme = extendTheme({
 export default function MaterialHero() {
   return (
     <HeroContainer
+      linearGradient
       left={
         <Box sx={{ textAlign: { xs: 'center', md: 'left' } }}>
           <Typography
diff --git a/docs/src/components/productMaterial/MaterialHeroEnd.tsx b/docs/src/components/productMaterial/MaterialHeroEnd.tsx
deleted file mode 100644
index 389d83c9676be7..00000000000000
--- a/docs/src/components/productMaterial/MaterialHeroEnd.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Grid from '@mui/material/Grid';
-import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
-import Section from 'docs/src/layouts/Section';
-import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
-import Link from 'docs/src/modules/components/Link';
-import ROUTES from 'docs/src/route';
-import MuiStatistics from 'docs/src/components/home/MuiStatistics';
-
-export default function MaterialHeroEnd() {
-  return (
-    <Section bg="dim" data-mui-color-scheme="dark">
-      <Box>
-        <Grid container spacing={2} alignItems="center">
-          <Grid item md={6}>
-            <Box maxWidth={500} sx={{ mb: 4 }}>
-              <SectionHeadline
-                overline="Community"
-                title="Get and give help by joining our contributors community"
-                description="The Core libraries were crafted by many hands, all over the world. Join the community to help us expand them even further!"
-              />
-              <Button
-                aria-label="Go to documentation"
-                component={Link}
-                href={ROUTES.communityHelp}
-                noLinkStyle
-                size="large"
-                variant="contained"
-                endIcon={<KeyboardArrowRightRounded />}
-                sx={{ width: { xs: '100%', sm: 'auto' } }}
-              >
-                Learn more
-              </Button>
-            </Box>
-          </Grid>
-          <MuiStatistics />
-        </Grid>
-      </Box>
-    </Section>
-  );
-}
diff --git a/docs/src/components/productMaterial/MaterialStyling.tsx b/docs/src/components/productMaterial/MaterialStyling.tsx
index 24051d7efc8fd8..19d85637631044 100644
--- a/docs/src/components/productMaterial/MaterialStyling.tsx
+++ b/docs/src/components/productMaterial/MaterialStyling.tsx
@@ -72,7 +72,7 @@ const startLine = [32, 25, 5];
 const endLine = [44, 30, 8];
 const scrollTo = [540, 320, 0];
 
-const useResizeHandle = (
+export const useResizeHandle = (
   target: React.MutableRefObject<HTMLDivElement | null>,
   options?: { minWidth?: string; maxWidth?: string },
 ) => {
@@ -162,7 +162,7 @@ export default function MaterialStyling() {
   }, [index]);
 
   return (
-    <Section bg="gradient">
+    <Section>
       <Grid container spacing={2}>
         <Grid item md={6} sx={{ minWidth: 0 }}>
           <Box maxWidth={500}>
@@ -204,26 +204,22 @@ export default function MaterialStyling() {
           <Frame sx={{ height: '100%' }}>
             <Frame.Demo
               sx={{
-                bgcolor: 'background.paper',
                 overflow: 'auto',
               }}
             >
               <Box
                 ref={objectRef}
                 style={{ touchAction: dragging ? 'none' : 'auto' }}
-                sx={(theme) => ({
+                sx={{
                   display: 'flex',
                   justifyContent: 'center',
                   alignItems: 'center',
                   position: 'relative',
-                  p: 2,
+                  p: 5,
                   pr: 3,
                   minHeight: index === 2 ? 280 : 'initial',
-                  bgcolor: 'grey.100',
-                  ...theme.applyDarkStyles({
-                    bgcolor: 'primaryDark.700',
-                  }),
-                })}
+                  backgroundColor: 'transparent',
+                }}
               >
                 {index === 2 && (
                   <React.Fragment>
@@ -237,7 +233,7 @@ export default function MaterialStyling() {
                           right: 0,
                           top: 0,
                           height: '100%',
-                          color: 'grey.600',
+                          color: 'grey.500',
                           '&:hover': {
                             color: 'grey.700',
                           },
@@ -274,8 +270,8 @@ export default function MaterialStyling() {
                           typography: 'caption',
                           left: -30,
                           color: 'text.secondary',
-                          borderRadius: '2px',
-                          bgcolor: 'grey.300',
+                          borderRadius: '4px',
+                          bgcolor: 'grey.200',
                           px: 0.5,
                           ...theme.applyDarkStyles({
                             bgcolor: 'grey.800',
@@ -291,8 +287,8 @@ export default function MaterialStyling() {
                           typography: 'caption',
                           left: 7,
                           color: 'text.secondary',
-                          borderRadius: '2px',
-                          bgcolor: 'grey.300',
+                          borderRadius: '4px',
+                          bgcolor: 'grey.200',
                           px: 0.5,
                           ...theme.applyDarkStyles({
                             bgcolor: 'grey.800',
diff --git a/docs/src/components/productTemplate/TemplateDemo.tsx b/docs/src/components/productTemplate/TemplateDemo.tsx
index e66b2403fb2834..9333e696f26a88 100644
--- a/docs/src/components/productTemplate/TemplateDemo.tsx
+++ b/docs/src/components/productTemplate/TemplateDemo.tsx
@@ -132,7 +132,7 @@ export default function TemplateDemo() {
   const templates = TEMPLATES[demo];
 
   return (
-    <Section bg="comfort">
+    <Section bg="gradient">
       <Grid container spacing={2} alignItems="center">
         <Grid item md={6} sx={{ minWidth: 0 }}>
           <Box maxWidth={500}>
@@ -143,7 +143,7 @@ export default function TemplateDemo() {
                   The right template for your <GradientText>specific need</GradientText>
                 </Typography>
               }
-              description="A growing list of templates for multiple use-cases, all powered by MUI Core components and carefully curated by MUI's team."
+              description="A growing list of templates for multiple use-cases, all powered by Material UI components and carefully curated by MUI's team."
             />
           </Box>
           <Group desktopColumns={2} sx={{ mt: 4 }}>
diff --git a/docs/src/components/productTemplate/TemplateHero.tsx b/docs/src/components/productTemplate/TemplateHero.tsx
index a151a3d44ffaca..2cd600b2c3b53f 100644
--- a/docs/src/components/productTemplate/TemplateHero.tsx
+++ b/docs/src/components/productTemplate/TemplateHero.tsx
@@ -15,6 +15,7 @@ import {
 export default function TemplateHero() {
   return (
     <HeroContainer
+      linearGradient
       left={
         <Box sx={{ textAlign: { xs: 'center', md: 'left' } }}>
           <Typography
@@ -34,9 +35,7 @@ export default function TemplateHero() {
             <IconImage width={28} height={28} name="product-templates" /> Templates
           </Typography>
           <Typography variant="h1" sx={{ my: 2, maxWidth: 500 }}>
-            <GradientText>Fully built</GradientText>
-            <br />
-            templates for your app
+            <GradientText>Fully built</GradientText> Material&nbsp;UI templates
           </Typography>
           <Typography color="text.secondary" sx={{ mb: 3, maxWidth: 500 }}>
             A collection of 4.5 average rating templates, selected and curated by MUI&apos;s team of
diff --git a/docs/src/components/productX/XComponents.tsx b/docs/src/components/productX/XComponents.tsx
index d4b0b8f3b54922..faffe750c04cca 100644
--- a/docs/src/components/productX/XComponents.tsx
+++ b/docs/src/components/productX/XComponents.tsx
@@ -87,7 +87,7 @@ export default function XComponents() {
     [DEMOS[4]]: <BarChartRounded fontSize="small" />,
   };
   return (
-    <Section bg="comfort">
+    <Section bg="gradient">
       <Grid container spacing={2}>
         <Grid item md={6} sx={{ minWidth: 0 }}>
           <Box maxWidth={500}>
diff --git a/docs/src/components/productX/XGridFullDemo.tsx b/docs/src/components/productX/XGridFullDemo.tsx
index b12974b772e3aa..b742e3088a3646 100644
--- a/docs/src/components/productX/XGridFullDemo.tsx
+++ b/docs/src/components/productX/XGridFullDemo.tsx
@@ -173,6 +173,8 @@ export default function XGridFullDemo() {
           variant="outlined"
           sx={[
             {
+              overflow: 'auto',
+              borderRadius: '8px',
               height: 328,
               '& .MuiDataGrid-root': {
                 bgcolor: '#fff',
diff --git a/docs/src/components/productX/XHero.tsx b/docs/src/components/productX/XHero.tsx
index 3f9cb665dde337..819579bb9c5968 100644
--- a/docs/src/components/productX/XHero.tsx
+++ b/docs/src/components/productX/XHero.tsx
@@ -88,6 +88,7 @@ export default function XHero() {
 
   return (
     <HeroContainer
+      linearGradient
       left={
         <Box sx={{ textAlign: { xs: 'center', md: 'left' } }}>
           <Typography
@@ -135,6 +136,7 @@ export default function XHero() {
               borderColor: 'grey.200',
               boxShadow: '0px 4px 20px rgba(170, 180, 190, 0.3)',
               mb: { md: 2, lg: 3, xl: 4 },
+              overflow: 'hidden',
               ...theme.applyDarkStyles({
                 backgroundColor: 'primaryDark.800',
                 borderColor: 'primaryDark.600',
diff --git a/docs/src/components/productX/XPlans.tsx b/docs/src/components/productX/XPlans.tsx
index 4121d00ec23fae..d3b8e439c81d42 100644
--- a/docs/src/components/productX/XPlans.tsx
+++ b/docs/src/components/productX/XPlans.tsx
@@ -25,7 +25,7 @@ const Image = styled('img')(({ theme }) => ({
 
 export default function XPlans() {
   return (
-    <Section>
+    <Section cozy>
       <Grid container spacing={2} alignItems="center">
         <Grid item md={6} sx={{ minWidth: 0 }}>
           <Box maxWidth={500} sx={{ mb: { xs: 2, sm: 0 } }}>
@@ -62,7 +62,7 @@ export default function XPlans() {
             >
               <Image
                 src={`/static/branding/mui-x/Mocktable-light.png`}
-                alt=""
+                alt="Illustration of MUI's pricing page."
                 loading="lazy"
                 width="300"
                 sx={(theme) => ({
diff --git a/docs/src/components/productX/XRoadmap.tsx b/docs/src/components/productX/XRoadmap.tsx
index 039ad884e2c0f9..f4c496292221f8 100644
--- a/docs/src/components/productX/XRoadmap.tsx
+++ b/docs/src/components/productX/XRoadmap.tsx
@@ -3,6 +3,7 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Grid from '@mui/material/Grid';
 import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
 import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
@@ -16,6 +17,7 @@ import BarChartRounded from '@mui/icons-material/BarChartRounded';
 import FileUploadRounded from '@mui/icons-material/FileUploadRounded';
 import PendingActionsRounded from '@mui/icons-material/PendingActions';
 import SpeedRounded from '@mui/icons-material/SpeedRounded';
+import { alpha } from '@mui/material/styles';
 
 export default function XRoadmap() {
   function renderList(content: React.ReactElement, nested?: boolean) {
@@ -34,7 +36,7 @@ export default function XRoadmap() {
               display: 'block',
               position: 'absolute',
               width: 2,
-              bgcolor: 'primaryDark.400',
+              bgcolor: 'primaryDark.500',
               top: 24,
               bottom: 10,
               left: 10,
@@ -58,7 +60,7 @@ export default function XRoadmap() {
           display: 'block',
           height: 2,
           width: 15,
-          bgcolor: 'primaryDark.400',
+          bgcolor: 'primaryDark.500',
         },
         '&:after': {
           content: '""',
@@ -73,7 +75,18 @@ export default function XRoadmap() {
     />
   );
   return (
-    <Section data-mui-color-scheme="dark" bg="dim">
+    <Section
+      cozy
+      data-mui-color-scheme="dark"
+      sx={{
+        color: 'text.secondary',
+        background: (theme) =>
+          `linear-gradient(180deg, ${(theme.vars || theme).palette.primaryDark[800]} 50%, 
+        ${alpha(theme.palette.primary[800], 0.2)} 100%), ${
+            (theme.vars || theme).palette.primaryDark[800]
+          }`,
+      }}
+    >
       <Box>
         <Grid container spacing={2} alignItems="center" justifyContent="space-between">
           <Grid item xs={12} md={5}>
@@ -107,7 +120,7 @@ export default function XRoadmap() {
               typography: 'body2',
               '& .MuiPaper-root': {
                 p: 2,
-                bgcolor: 'primaryDark.600',
+                minWidth: { lg: 180 },
               },
               '& svg': {
                 color: 'primary.300',
@@ -115,9 +128,13 @@ export default function XRoadmap() {
             }}
           >
             <Grid item xs={12} sm={4} lg="auto">
-              <Paper variant="outlined" sx={{ minWidth: { lg: 180 } }}>
-                <Box sx={{ fontWeight: 'bold' }}>Released</Box>
-                <Box sx={{ color: 'text.secondary' }}>More updates coming.</Box>
+              <Paper variant="outlined">
+                <Typography fontWeight={600} variant="body2" color="text.primary">
+                  Released
+                </Typography>
+                <Typography color="text.secondary" variant="body2">
+                  More updates coming.
+                </Typography>
                 {renderList(
                   <React.Fragment>
                     <TableChartRounded fontSize="small" />
@@ -129,9 +146,13 @@ export default function XRoadmap() {
               </Paper>
             </Grid>
             <Grid item xs={12} sm={4} lg="auto">
-              <Paper variant="outlined" sx={{ minWidth: { lg: 180 } }}>
-                <Box sx={{ fontWeight: 'bold' }}>Work in progress</Box>
-                <Box sx={{ color: 'text.secondary' }}>Getting there.</Box>
+              <Paper variant="outlined">
+                <Typography fontWeight={600} variant="body2" color="text.primary">
+                  Work in progress
+                </Typography>
+                <Typography color="text.secondary" variant="body2">
+                  Getting there.
+                </Typography>
                 {renderList(
                   <React.Fragment>
                     <Box
@@ -156,9 +177,13 @@ export default function XRoadmap() {
               </Paper>
             </Grid>
             <Grid item xs={12} sm={4} lg="auto">
-              <Paper variant="outlined" sx={{ minWidth: { lg: 180 } }}>
-                <Box sx={{ fontWeight: 'bold' }}>On the list</Box>
-                <Box sx={{ color: 'text.secondary' }}>Starting sometime soon…</Box>
+              <Paper variant="outlined">
+                <Typography fontWeight={600} variant="body2" color="text.primary">
+                  On the list
+                </Typography>
+                <Typography color="text.secondary" variant="body2">
+                  Starting sometime soon…
+                </Typography>
                 {renderList(
                   <React.Fragment>
                     <ShowChartRounded fontSize="small" />
diff --git a/docs/src/components/productX/XTheming.tsx b/docs/src/components/productX/XTheming.tsx
index b9d8c1041e915b..e86ef181a8c59e 100644
--- a/docs/src/components/productX/XTheming.tsx
+++ b/docs/src/components/productX/XTheming.tsx
@@ -94,7 +94,7 @@ export default function XTheming() {
     return columns;
   }
   return (
-    <Section bg="comfort">
+    <Section bg="gradient">
       <Grid container spacing={2}>
         <Grid item md={6} sx={{ minWidth: 0 }}>
           <Box maxWidth={500}>
diff --git a/docs/src/components/showcase/ThemeAccordion.tsx b/docs/src/components/showcase/ThemeAccordion.tsx
index 8855212ee57661..16b62918f5ef26 100644
--- a/docs/src/components/showcase/ThemeAccordion.tsx
+++ b/docs/src/components/showcase/ThemeAccordion.tsx
@@ -77,8 +77,8 @@ export default function ThemeAccordion() {
           </AccordionSummary>
           <AccordionDetails>
             <Typography variant="body2" color="text.secondary">
-              Tag line headings (h1, h2) use Plus Jakarta Sans, whereas the rest of the elements use
-              IBM Plex Sans.
+              Tag line headings (h1, h2) use General Sans, whereas the rest of the elements use IBM
+              Plex Sans.
             </Typography>
           </AccordionDetails>
         </Accordion>
diff --git a/docs/src/components/showcase/ThemeTabs.tsx b/docs/src/components/showcase/ThemeTabs.tsx
index 295e5081e3f687..5ff3c70d268705 100644
--- a/docs/src/components/showcase/ThemeTabs.tsx
+++ b/docs/src/components/showcase/ThemeTabs.tsx
@@ -35,8 +35,13 @@ export default function ThemeTabs() {
               },
             },
             [`& .${tabClasses.root}`]: {
+              minHeight: 48,
+              margin: 0,
               color: 'primary.100',
               fontSize: '1rem',
+              '&:hover': {
+                backgroundColor: 'transparent',
+              },
               '&.Mui-selected': {
                 color: '#fff',
               },
diff --git a/docs/src/components/typography/GradientText.tsx b/docs/src/components/typography/GradientText.tsx
index 89ed23f82b2d10..8926bf0494638a 100644
--- a/docs/src/components/typography/GradientText.tsx
+++ b/docs/src/components/typography/GradientText.tsx
@@ -3,15 +3,11 @@ import { styled } from '@mui/material/styles';
 const GradientText = styled('span')<{
   color?: 'primary' | 'error' | 'success' | 'warning';
 }>(({ theme, color = 'primary' }) => ({
-  background: `linear-gradient(to right, ${(theme.vars || theme).palette[color].main}, ${
-    (theme.vars || theme).palette[color][700]
-  })`,
+  background: `linear-gradient(90deg, ${(theme.vars || theme).palette[color][400]} 5%, ${
+    (theme.vars || theme).palette[color].main
+  } 90%)`,
   WebkitBackgroundClip: 'text',
   WebkitTextFillColor: 'transparent',
-  ...theme.applyDarkStyles({
-    background: (theme.vars || theme).palette.primary[300],
-    WebkitBackgroundClip: 'text',
-  }),
 }));
 
 export default GradientText;
diff --git a/docs/src/components/typography/SectionHeadline.tsx b/docs/src/components/typography/SectionHeadline.tsx
index ede46e652c8194..15e12590b67681 100644
--- a/docs/src/components/typography/SectionHeadline.tsx
+++ b/docs/src/components/typography/SectionHeadline.tsx
@@ -5,11 +5,16 @@ interface SectionHeadlineProps {
   description?: React.ReactNode;
   id?: string;
   overline: React.ReactNode;
-  title: React.ReactNode;
+  title: string | React.ReactElement;
+  alwaysCenter?: boolean;
+  /**
+   * For using with dark background.
+   */
+  inverted?: boolean;
 }
 
 export default function SectionHeadline(props: SectionHeadlineProps) {
-  const { description, id, overline, title } = props;
+  const { description, id, overline, title, alwaysCenter = false, inverted = false } = props;
   return (
     <React.Fragment>
       <Typography
@@ -23,6 +28,9 @@ export default function SectionHeadline(props: SectionHeadlineProps) {
           ...theme.applyDarkStyles({
             color: 'primary.300',
           }),
+          ...(alwaysCenter && {
+            textAlign: 'center',
+          }),
         })}
       >
         {overline}
@@ -31,16 +39,34 @@ export default function SectionHeadline(props: SectionHeadlineProps) {
         <Typography
           variant="h2"
           sx={(theme) => ({
-            color: 'primaryDark.900',
-            ...theme.applyDarkStyles({
-              color: 'grey.100',
+            ...(inverted
+              ? {
+                  color: '#fff',
+                }
+              : {
+                  color: 'primaryDark.900',
+                  ...theme.applyDarkStyles({
+                    color: 'grey.100',
+                  }),
+                }),
+            ...(alwaysCenter && {
+              textAlign: 'center',
             }),
           })}
         >
           {title}
         </Typography>
       ) : (
-        title
+        React.cloneElement(title, {
+          style: {
+            ...(alwaysCenter && {
+              textAlign: 'center',
+            }),
+            ...(inverted && {
+              color: '#fff',
+            }),
+          },
+        })
       )}
       {description && (
         <Typography
@@ -48,9 +74,20 @@ export default function SectionHeadline(props: SectionHeadlineProps) {
             mt: 1,
             mb: 2,
             maxWidth: 450,
-            color: 'grey.800',
-            ...theme.applyDarkStyles({
-              color: 'grey.500',
+            ...(inverted
+              ? {
+                  color: 'grey.400',
+                }
+              : {
+                  color: 'grey.800',
+                  ...theme.applyDarkStyles({
+                    color: 'grey.500',
+                  }),
+                }),
+            ...(alwaysCenter && {
+              textAlign: 'center',
+              mx: 'auto',
+              maxWidth: 600,
             }),
           })}
         >
diff --git a/docs/src/layouts/AppFooter.tsx b/docs/src/layouts/AppFooter.tsx
index a5e7af280b7cfe..73be4e2e72edf6 100644
--- a/docs/src/layouts/AppFooter.tsx
+++ b/docs/src/layouts/AppFooter.tsx
@@ -15,6 +15,7 @@ import EmailSubscribe from 'docs/src/components/footer/EmailSubscribe';
 import ROUTES from 'docs/src/route';
 import Link from 'docs/src/modules/components/Link';
 import SvgStackOverflow from 'docs/src/icons/SvgStackOverflow';
+import { alpha } from '@mui/material/styles';
 
 interface AppFooterProps {
   stackOverflowUrl?: string;
@@ -27,8 +28,7 @@ export default function AppFooter(props: AppFooterProps) {
     <Container component="footer">
       <Box
         sx={{
-          pt: 4,
-          pb: 8,
+          py: 8,
           display: 'grid',
           gridAutoColumns: '1fr',
           alignItems: 'flex-start',
@@ -69,6 +69,7 @@ export default function AppFooter(props: AppFooterProps) {
               Products
             </Typography>
             <Link href={ROUTES.productMaterial}>Material UI</Link>
+            <Link href={ROUTES.productBase}>Base UI</Link>
             <Link href={ROUTES.productAdvanced}>MUI X</Link>
             <Link href={ROUTES.productTemplates}>Templates</Link>
             <Link href={ROUTES.productDesignKits}>Design kits</Link>
@@ -105,18 +106,22 @@ export default function AppFooter(props: AppFooterProps) {
               <Box
                 sx={(theme) => ({
                   px: 0.5,
-                  py: '3px',
+                  py: 0.1,
                   ml: 1,
                   mb: '1px',
-                  borderRadius: 0.5,
-                  fontSize: theme.typography.pxToRem(9),
-                  fontWeight: 700,
+                  fontSize: theme.typography.pxToRem(10),
+                  fontWeight: 'Bold',
                   textTransform: 'uppercase',
-                  color: '#fff',
-                  letterSpacing: '0.1rem',
-                  bgcolor: 'success.main',
+                  letterSpacing: '.04rem',
+                  borderRadius: 8,
+                  border: 1,
+                  borderColor: 'success.300',
+                  bgcolor: alpha(theme.palette.success[100], 0.5),
+                  color: 'success.700',
                   ...theme.applyDarkStyles({
-                    bgcolor: 'success.900',
+                    borderColor: alpha(theme.palette.success[800], 0.5),
+                    bgcolor: alpha(theme.palette.success[800], 0.5),
+                    color: 'success.300',
                   }),
                 })}
               >
@@ -134,15 +139,27 @@ export default function AppFooter(props: AppFooterProps) {
       <Divider />
       <Box
         sx={{
-          my: 3,
+          my: 6,
           display: { xs: 'block', sm: 'flex' },
           alignItems: { sm: 'center' },
           justifyContent: { sm: 'space-between' },
         }}
       >
-        <Link href="/" aria-label="Go to homepage">
-          <SvgMuiLogotype height={28} width={91} />
-        </Link>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: { xs: 'column', sm: 'row' },
+            alignItems: { xs: 'start', sm: 'center' },
+            gap: 1.5,
+          }}
+        >
+          <Link href="/" aria-label="Go to homepage">
+            <SvgMuiLogotype height={28} width={91} />
+          </Link>
+          <Typography color="text.tertiary" variant="caption" fontWeight={400}>
+            Copyright © {new Date().getFullYear()} Material UI SAS, trading as MUI.
+          </Typography>
+        </Box>
         <Box sx={{ mt: { xs: 3, sm: 0 } }}>
           <Stack spacing={2} direction="row">
             <IconButton
@@ -210,9 +227,6 @@ export default function AppFooter(props: AppFooterProps) {
           </Stack>
         </Box>
       </Box>
-      <Typography color="text.secondary" variant="body2" sx={{ mb: 4 }}>
-        Copyright © {new Date().getFullYear()} Material UI SAS, trading as MUI.
-      </Typography>
     </Container>
   );
 }
diff --git a/docs/src/layouts/AppHeader.tsx b/docs/src/layouts/AppHeader.tsx
index 820b1c10c41ed3..293cf21428944d 100644
--- a/docs/src/layouts/AppHeader.tsx
+++ b/docs/src/layouts/AppHeader.tsx
@@ -33,7 +33,7 @@ const Header = styled('header')(({ theme }) => [
   }),
 ]);
 
-const HEIGHT = 56;
+const HEIGHT = 60;
 
 interface AppHeaderProps {
   gitHubRepository?: string;
diff --git a/docs/src/layouts/HeroContainer.tsx b/docs/src/layouts/HeroContainer.tsx
index a9b6749c39683e..78e79122a7617c 100644
--- a/docs/src/layouts/HeroContainer.tsx
+++ b/docs/src/layouts/HeroContainer.tsx
@@ -1,18 +1,22 @@
 import * as React from 'react';
 import Box, { BoxProps } from '@mui/material/Box';
-import { useTheme } from '@mui/material/styles';
 import Container from '@mui/material/Container';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import Grid from '@mui/material/Grid';
+import { useTheme, alpha } from '@mui/material/styles';
 
 export default function HeroContainer({
   left,
   right,
   rightSx,
+  linearGradient,
+  disableMobileHidden,
 }: {
   left: React.ReactElement;
   right: React.ReactElement;
   rightSx?: BoxProps['sx'];
+  linearGradient?: boolean;
+  disableMobileHidden?: boolean;
 }) {
   const frame = React.useRef<null | HTMLDivElement>(null);
   const globalTheme = useTheme();
@@ -41,6 +45,92 @@ export default function HeroContainer({
     };
   }, [isMdUp]);
 
+  const renderRightWrapper = (sx?: BoxProps['sx']) => (
+    <Box
+      id="hero-container-right-area"
+      aria-hidden="true"
+      sx={[
+        (theme) => ({
+          minWidth: '50vw',
+          minHeight: 500,
+          height: 'calc(100vh - 120px)',
+          maxHeight: { md: 700, xl: 1000 },
+          borderBottomLeftRadius: 12,
+          transition: 'max-height 0.3s',
+          position: 'relative',
+          overflow: 'hidden',
+          borderLeft: '1px solid',
+          borderBottom: '1px solid',
+          borderColor: 'divider',
+          ...(linearGradient && {
+            background: `radial-gradient(farthest-corner circle at 0% 0%, ${
+              (theme.vars || theme).palette.grey[50]
+            } 0%, ${(theme.vars || theme).palette.primary[50]} 100%)`,
+          }),
+        }),
+        (theme) =>
+          theme.applyDarkStyles({
+            background: 'primaryDark.900',
+            borderColor: 'primaryDark.700',
+            ...(linearGradient && {
+              background: `radial-gradient(farthest-corner circle at 0% 0%, ${alpha(
+                theme.palette.primary[900],
+                0.3,
+              )} 0%, ${(theme.vars || theme).palette.primaryDark[900]} 100%)`,
+            }),
+          }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+        ...(Array.isArray(rightSx) ? rightSx : [rightSx]),
+      ]}
+    >
+      {right}
+    </Box>
+  );
+  if (disableMobileHidden) {
+    return (
+      <Box sx={{ overflow: 'hidden' }}>
+        <Container
+          sx={{
+            minHeight: 500,
+            height: { md: 'calc(100vh - 120px)' },
+            maxHeight: { md: 700, xl: 1000 },
+            transition: '0.3s',
+          }}
+        >
+          <Grid container alignItems="center" sx={{ height: '100%', mx: 'auto' }}>
+            <Grid
+              item
+              xs={12}
+              md={7}
+              lg={6}
+              sx={{
+                display: { xs: 'flex', md: 'block' },
+                minHeight: { xs: 500, sm: 700, md: 'initial' },
+                m: 'auto',
+                '& > *': {
+                  m: { xs: 'auto', md: 'initial' },
+                },
+              }}
+            >
+              {left}
+            </Grid>
+            <Grid item xs={12} md={5} lg={6} sx={{ maxHeight: '100%' }}>
+              {renderRightWrapper({
+                height: {
+                  xs: 'initial',
+                  md: 'calc(100vh - 120px)',
+                },
+                borderLeftWidth: { xs: 0, md: 1 },
+                borderBottomLeftRadius: { xs: 0, md: 12 },
+                mx: { xs: -2, sm: -3, md: 'initial' },
+              })}
+            </Grid>
+          </Grid>
+        </Container>
+      </Box>
+    );
+  }
+
   return (
     <Box sx={{ overflow: 'hidden' }}>
       <Container
@@ -61,30 +151,7 @@ export default function HeroContainer({
             lg={6}
             sx={{ maxHeight: '100%', display: { xs: 'none', md: 'initial' } }}
           >
-            <Box
-              ref={frame}
-              aria-hidden="true"
-              sx={[
-                {
-                  bgcolor: 'grey.50',
-                  minWidth: '50vw',
-                  minHeight: 500,
-                  height: 'calc(100vh - 120px)',
-                  maxHeight: { md: 700, xl: 1000 },
-                  borderBottomLeftRadius: 10,
-                  transition: 'max-height 0.3s',
-                  position: 'relative',
-                  overflow: 'hidden',
-                },
-                (theme) =>
-                  theme.applyDarkStyles({
-                    bgcolor: 'primaryDark.900',
-                  }),
-                ...(Array.isArray(rightSx) ? rightSx : [rightSx]),
-              ]}
-            >
-              {right}
-            </Box>
+            {renderRightWrapper()}
           </Grid>
         </Grid>
       </Container>
diff --git a/docs/src/layouts/Section.tsx b/docs/src/layouts/Section.tsx
index b14d55425f77db..380d7f00a9ffc7 100644
--- a/docs/src/layouts/Section.tsx
+++ b/docs/src/layouts/Section.tsx
@@ -1,13 +1,18 @@
 import * as React from 'react';
 import Container from '@mui/material/Container';
 import Box, { BoxProps } from '@mui/material/Box';
+import { alpha } from '@mui/material/styles';
 
 interface SelectionProps extends BoxProps {
-  bg?: 'white' | 'comfort' | 'dim' | 'gradient';
+  bg?: 'white' | 'comfort' | 'dim' | 'gradient' | 'transparent';
+  /**
+   * More spacing
+   */
+  cozy?: boolean;
 }
 
-export default function Section(props: SelectionProps) {
-  const { bg = 'white', children, sx, ...other } = props;
+const Section = React.forwardRef<HTMLDivElement, SelectionProps>(function Section(props, ref) {
+  const { bg = 'white', children, sx, cozy = false, ...other } = props;
 
   const map = {
     white: {
@@ -22,22 +27,27 @@ export default function Section(props: SelectionProps) {
       light: 'primaryDark.700',
       dark: 'primaryDark.700',
     },
+    transparent: {
+      light: 'transparent',
+      dark: 'transparent',
+    },
   };
 
   return (
     <Box
+      ref={ref}
       {...other}
       sx={[
         (theme) => ({
           ...(bg === 'gradient'
             ? {
-                background: `linear-gradient(180deg, ${
-                  (theme.vars || theme).palette.grey[50]
-                } 0%, #FFFFFF 100%)`,
+                background: `linear-gradient(180deg, #FFF 0%, ${
+                  (theme.vars || theme).palette.primary[50]
+                } 100%)`,
                 ...theme.applyDarkStyles({
                   background: `linear-gradient(180deg, ${
-                    (theme.vars || theme).palette.primaryDark[900]
-                  } 0%, #001E3C 100%)`,
+                    (theme.vars || theme).palette.primaryDark[800]
+                  } 0%, ${alpha(theme.palette.primary[900], 0.2)} 100%)`,
                 }),
               }
             : {
@@ -46,7 +56,7 @@ export default function Section(props: SelectionProps) {
                   bgcolor: map[bg].dark,
                 }),
               }),
-          py: { xs: 4, sm: 6, md: 8 },
+          py: cozy ? { xs: 6, sm: 10, md: 12 } : { xs: 4, sm: 12, md: 14 },
           overflow: 'hidden',
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
@@ -55,4 +65,6 @@ export default function Section(props: SelectionProps) {
       <Container>{children}</Container>
     </Box>
   );
-}
+});
+
+export default Section;
diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
index 41ad5ac3214bdf..c8e322291fc1aa 100644
--- a/docs/src/modules/brandingTheme.ts
+++ b/docs/src/modules/brandingTheme.ts
@@ -31,6 +31,15 @@ declare module '@mui/material/styles/createPalette' {
 
   interface Palette {
     primaryDark: PaletteColor;
+    gradients: {
+      lightGrayRadio: string;
+      stylizedRadio: string;
+      linearSubtle: string;
+    };
+  }
+
+  interface TypeText {
+    tertiary: string;
   }
 }
 
@@ -79,29 +88,29 @@ export const blue = {
   900: '#003A75',
 };
 export const blueDark = {
-  50: '#E2EDF8',
-  100: '#CEE0F3',
-  200: '#91B9E3',
-  300: '#5090D3',
-  main: '#5090D3',
-  400: '#265D97',
-  500: '#1E4976',
-  600: '#173A5E',
-  700: '#132F4C', // contrast 13.64:1
-  800: '#001E3C',
-  900: '#0A1929',
+  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: '#E7EBF0',
-  200: '#E0E3E7',
-  300: '#CDD2D7', // vs blueDark 900: WCAG 11.6 AAA, APCA 78 Best for text
-  400: '#B2BAC2', // vs blueDark 900: WCAG 9 AAA, APCA 63.3 Ok for text
-  500: '#A0AAB4', // vs blueDark 900: WCAG 7.5 AAA, APCA 54.3 Only for large text
-  600: '#6F7E8C', // vs white bg: WCAG 4.1 AA, APCA 68.7 Ok for text
-  700: '#3E5060', // vs white bg: WCAG 8.3 AAA, APCA 88.7 Best for text
-  800: '#2D3843', // vs white bg: WCAG 11.9 AAA, APCA 97.3 Best for text
-  900: '#1A2027',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD', // vs blueDark 900: WCAG 11.6 AAA, APCA 78 Best for text
+  400: '#B0B8C4', // vs blueDark 900: WCAG 9 AAA, APCA 63.3 Ok for text
+  500: '#9DA8B7', // vs blueDark 900: WCAG 7.5 AAA, APCA 54.3 Only for large text
+  600: '#6B7A90', // vs white bg: WCAG 4.1 AA, APCA 68.7 Ok for text
+  700: '#434D5B', // 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',
@@ -173,7 +182,18 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
           main: blue[400],
         }),
       },
-      divider: mode === 'dark' ? alpha(blue[100], 0.08) : grey[100],
+      secondary: {
+        ...grey,
+        ...(mode === 'light' && {
+          main: blueDark[100],
+          contrastText: blueDark[600],
+        }),
+        ...(mode === 'dark' && {
+          main: blueDark[700],
+          contrastText: blueDark[600],
+        }),
+      },
+      divider: mode === 'dark' ? alpha(blueDark[100], 0.08) : grey[100],
       primaryDark: blueDark,
       mode,
       ...(mode === 'dark' && {
@@ -183,16 +203,18 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
         },
       }),
       common: {
-        black: '#1D1D1D',
+        black: '#0B0D0E',
       },
       text: {
         ...(mode === 'light' && {
           primary: grey[900],
           secondary: grey[700],
+          tertiary: grey[600],
         }),
         ...(mode === 'dark' && {
           primary: '#fff',
           secondary: grey[400],
+          tertiary: grey[400],
         }),
       },
       grey: {
@@ -202,7 +224,7 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
           contrastText: grey[600],
         }),
         ...(mode === 'dark' && {
-          main: blueDark[700],
+          main: grey[700],
           contrastText: grey[600],
         }),
       },
@@ -217,11 +239,29 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
         }),
       },
       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: 10,
+      borderRadius: 12,
     },
-    spacing: 10,
+    spacing: 8,
     typography: {
       fontFamily: ['"IBM Plex Sans"', ...systemFont].join(','),
       // Match VS Code
@@ -233,40 +273,41 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
         '"Droid Sans Mono"', // Linux
         'monospace', // fallback
       ].join(','),
-      fontFamilyTagline: ['"PlusJakartaSans-ExtraBold"', ...systemFont].join(','),
+      fontFamilyTagline: ['"General Sans"', ...systemFont].join(','),
       fontFamilySystem: systemFont.join(','),
       fontWeightSemiBold: 600,
       fontWeightExtraBold: 800,
       h1: {
-        fontFamily: ['"PlusJakartaSans-ExtraBold"', ...systemFont].join(','),
-        fontSize: 'clamp(2.625rem, 1.2857rem + 3.5714vw, 4rem)',
-        fontWeight: 800,
+        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: ['"PlusJakartaSans-ExtraBold"', ...systemFont].join(','),
+        fontFamily: ['"General Sans"', ...systemFont].join(','),
         fontSize: 'clamp(1.5rem, 0.9643rem + 1.4286vw, 2.25rem)',
-        fontWeight: 800,
+        fontWeight: 600,
         lineHeight: 44 / 36,
+        letterSpacing: -0.2,
         color: mode === 'dark' ? grey[100] : blueDark[700],
       },
       h3: {
-        fontFamily: ['"PlusJakartaSans-Bold"', ...systemFont].join(','),
+        fontFamily: ['"General Sans"', ...systemFont].join(','),
         fontSize: defaultTheme.typography.pxToRem(36),
         lineHeight: 44 / 36,
         letterSpacing: 0.2,
       },
       h4: {
-        fontFamily: ['"PlusJakartaSans-Bold"', ...systemFont].join(','),
-        fontSize: defaultTheme.typography.pxToRem(28),
+        fontFamily: ['"General Sans"', ...systemFont].join(','),
+        fontSize: defaultTheme.typography.pxToRem(30),
         lineHeight: 42 / 28,
         letterSpacing: 0.2,
       },
       h5: {
-        fontFamily: ['"PlusJakartaSans-Bold"', ...systemFont].join(','),
         fontSize: defaultTheme.typography.pxToRem(24),
         lineHeight: 36 / 24,
         letterSpacing: 0.1,
@@ -395,18 +436,90 @@ export function getThemedComponents(): ThemeOptions {
         styleOverrides: {
           root: ({ theme, ownerState }) => ({
             ...(ownerState.size === 'large' && {
-              padding: '0.875rem 1rem',
+              padding: theme.spacing(1.5, 1.25, 1.5, 1.5), // 12px 10px
               ...theme.typography.body1,
               lineHeight: 21 / 16,
               fontWeight: 700,
             }),
+            ...(ownerState.variant === 'outlined' &&
+              ownerState.color === 'secondary' && {
+                color: (theme.vars || theme).palette.text.secondary,
+                backgroundColor: alpha(theme.palette.primaryDark[50], 0.3),
+                borderColor: (theme.vars || theme).palette.primaryDark[100],
+                boxShadow: `0px 2px 2px ${alpha(
+                  theme.palette.primaryDark[100],
+                  0.2,
+                )}, inset 0px 4px 4px ${alpha(theme.palette.primaryDark[100], 0.2)}`,
+                '&:hover': {
+                  background: (theme.vars || theme).palette.primaryDark[50],
+                },
+                ...theme.applyDarkStyles({
+                  color: (theme.vars || theme).palette.primaryDark[100],
+                  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)',
+                  '&:hover': {
+                    backgroundColor: (theme.vars || theme).palette.primaryDark[600],
+                  },
+                }),
+              }),
+            ...(ownerState.variant === 'outlined' &&
+              ownerState.color === 'primary' && {
+                color: (theme.vars || theme).palette.primary[500],
+                backgroundColor: alpha(theme.palette.primary[50], 0.3),
+                borderColor: (theme.vars || theme).palette.primary[100],
+                boxShadow: `0px 2px 2px ${alpha(
+                  theme.palette.primary[100],
+                  0.2,
+                )}, inset 0px 4px 4px ${alpha(theme.palette.primary[100], 0.1)}`,
+                '&:hover': {
+                  background: (theme.vars || theme).palette.primary[50],
+                  borderColor: (theme.vars || theme).palette.primary[300],
+                },
+                ...theme.applyDarkStyles({
+                  color: (theme.vars || theme).palette.primary[200],
+                  borderColor: (theme.vars || theme).palette.primary[900],
+                  backgroundColor: alpha(theme.palette.primary[900], 0.4),
+                  boxShadow: '0px 2px 2px #0B0D0E, inset 0px 4px 4px rgba(20, 25, 31, 0.3)',
+                  '&:hover': {
+                    backgroundColor: (theme.vars || theme).palette.primary[900],
+                    borderColor: (theme.vars || theme).palette.primary[700],
+                  },
+                }),
+              }),
             ...(ownerState.size === 'small' && {
               padding: theme.spacing(0.5, 1),
+              fontFamily: theme.typography.fontFamily,
+              fontSize: '0.75rem',
+              fontWeight: 600,
+              borderRadius: '6px',
             }),
             ...(ownerState.variant === 'contained' &&
               ownerState.color === 'primary' && {
-                backgroundColor: (theme.vars || theme).palette.primary[500],
-                color: '#fff',
+                color: '#FFF',
+                background: `linear-gradient(180deg, ${
+                  (theme.vars || theme).palette.primary[500]
+                } 0%, ${(theme.vars || theme).palette.primary[600]} 100%)`,
+                border: '1px solid',
+                borderColor: (theme.vars || theme).palette.primary[400],
+                boxShadow: `0px 2px 4px ${alpha(
+                  theme.palette.primary[700],
+                  0.2,
+                )}, inset 0px 4px 8px ${alpha(theme.palette.primary[200], 0.4)}`,
+                textShadow: `0px 1px 1px ${alpha(theme.palette.grey[900], 0.3)}`,
+                '&:hover': {
+                  background: `linear-gradient(180deg, ${
+                    (theme.vars || theme).palette.primary[500]
+                  } 0%, ${(theme.vars || theme).palette.primary[400]} 100%)`,
+                  boxShadow:
+                    '0px 0px 8px rgba(0, 127, 255, 0.2), inset 0px 4px 8px rgba(102, 178, 255, 0.4)',
+                },
+                ...theme.applyDarkStyles({
+                  boxShadow: `0px 2px 4px ${alpha(
+                    theme.palette.common.black,
+                    0.8,
+                  )}, inset 0px 4px 8px ${alpha(theme.palette.primary[200], 0.4)}`,
+                }),
               }),
           }),
         },
@@ -416,47 +529,110 @@ export function getThemedComponents(): ThemeOptions {
             props: { variant: 'code' },
             style: ({ theme }) => [
               {
-                border: '1px solid',
-                color: (theme.vars || theme).palette.grey[800],
-                borderColor: (theme.vars || theme).palette.grey[300],
-                backgroundColor: (theme.vars || theme).palette.grey[50],
+                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(13), // 14px
+                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': {
-                  borderColor: (theme.vars || theme).palette.primary.main,
-                  backgroundColor: (theme.vars || theme).palette.grey[50],
+                  backgroundColor: 'transparent',
+                  color: (theme.vars || theme).palette.primary.main,
                   '& .MuiButton-endIcon': {
                     color: (theme.vars || theme).palette.primary.main,
+                    opacity: 1,
                   },
                 },
-                '& .MuiButton-startIcon': {
-                  color: (theme.vars || theme).palette.grey[400],
+              },
+              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[700],
+                  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,
+                  },
                 },
               },
               theme.applyDarkStyles({
-                color: (theme.vars || theme).palette.grey[400],
-                borderColor: (theme.vars || theme).palette.primaryDark[400],
+                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.primaryDark[600],
+                  backgroundColor: (theme.vars || theme).palette.primary[900],
+                  color: (theme.vars || theme).palette.primary[100],
                   '& .MuiButton-endIcon': {
                     color: (theme.vars || theme).palette.primary[300],
                   },
                 },
-                '& .MuiButton-endIcon': {
-                  color: (theme.vars || theme).palette.grey[400],
-                },
               }),
             ],
           },
@@ -535,11 +711,11 @@ export function getThemedComponents(): ThemeOptions {
               borderColor: (theme.vars || theme).palette.primaryDark[700],
               '& .MuiMenuItem-root': {
                 '&:hover, &:focus': {
-                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
+                  backgroundColor: (theme.vars || theme).palette.primaryDark[700],
                 },
                 '&.Mui-selected': {
                   color: (theme.vars || theme).palette.primary[300],
-                  backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+                  backgroundColor: alpha(theme.palette.primary[900], 0.4),
                 },
               },
             }),
@@ -606,7 +782,7 @@ export function getThemedComponents(): ThemeOptions {
       MuiChip: {
         styleOverrides: {
           root: ({ ownerState: { color, variant }, theme }) => ({
-            fontWeight: 500,
+            fontWeight: theme.typography.fontWeightSemiBold,
             ...(variant === 'outlined' &&
               color === 'default' && {
                 backgroundColor: alpha(theme.palette.grey[50], 0.5),
@@ -617,23 +793,24 @@ export function getThemedComponents(): ThemeOptions {
                   color: (theme.vars || theme).palette.grey[900],
                 },
                 ...theme.applyDarkStyles({
-                  backgroundColor: alpha(theme.palette.grey[700], 0.3),
+                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
                   color: (theme.vars || theme).palette.grey[300],
-                  borderColor: alpha(theme.palette.grey[100], 0.1),
+                  borderColor: alpha(theme.palette.primaryDark[500], 0.5),
                   '&:hover': {
-                    backgroundColor: (theme.vars || theme).palette.grey[700],
                     color: (theme.vars || theme).palette.grey[300],
+                    backgroundColor: (theme.vars || theme).palette.primaryDark[700],
                   },
                 }),
               }),
             ...(variant === 'outlined' &&
               color === 'primary' && {
-                '&:hover': {
-                  color: (theme.vars || theme).palette.primary[500],
-                },
+                borderColor: (theme.vars || theme).palette.primary[200],
+                ...theme.applyDarkStyles({
+                  borderColor: alpha(theme.palette.primary[500], 0.3),
+                }),
               }),
-            ...(variant === 'filled' &&
-              color === 'default' && {
+            ...(variant === 'filled' && {
+              ...(color === 'default' && {
                 border: '1px solid transparent',
                 color: (theme.vars || theme).palette.primary[700],
                 backgroundColor: alpha(theme.palette.primary[100], 0.5),
@@ -648,6 +825,21 @@ export function getThemedComponents(): ThemeOptions {
                   },
                 }),
               }),
+              ...(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],
+                },
+                ...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),
+                  },
+                }),
+              }),
+            }),
             // for labelling product in the search
             // @ts-ignore internal repo module augmentation issue
             ...(variant === 'light' && {
@@ -753,10 +945,18 @@ export function getThemedComponents(): ThemeOptions {
               },
               ...(ownerState.variant === 'outlined' && {
                 display: 'block',
-                borderColor: (theme.vars || theme).palette.grey[200],
+                borderColor: (theme.vars || theme).palette.grey[100],
+                '&[href]': {
+                  textDecorationLine: 'none',
+                  '&:hover': {
+                    borderColor: (theme.vars || theme).palette.primary[300],
+                    boxShadow: `0px 4px 16px ${(theme.vars || theme).palette.grey[200]}`,
+                  },
+                },
                 ':is(a&), :is(button&)': {
                   '&:hover': {
-                    boxShadow: `0px 4px 20px rgba(170, 180, 190, 0.3)`,
+                    borderColor: (theme.vars || theme).palette.primary[300],
+                    boxShadow: `0px 4px 16px ${(theme.vars || theme).palette.grey[200]}`,
                   },
                 },
               }),
@@ -764,11 +964,17 @@ export function getThemedComponents(): ThemeOptions {
             theme.applyDarkStyles({
               backgroundColor: (theme.vars || theme).palette.primaryDark[900],
               ...(ownerState.variant === 'outlined' && {
-                borderColor: (theme.vars || theme).palette.primaryDark[500],
-                backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+                borderColor: (theme.vars || theme).palette.primaryDark[600],
+                backgroundColor: alpha(theme.palette.primaryDark[700], 0.5),
+                '&[href]': {
+                  textDecorationLine: 'none',
+                  '&:hover': {
+                    boxShadow: `0px 4px 24px ${(theme.vars || theme).palette.common.black}`,
+                  },
+                },
                 ':is(a&), :is(button&)': {
                   '&:hover': {
-                    boxShadow: `0px 4px 20px rgba(0, 0, 0, 0.5)`,
+                    boxShadow: `0px 4px 24px ${(theme.vars || theme).palette.common.black}`,
                   },
                 },
               }),
@@ -822,11 +1028,12 @@ export function getThemedComponents(): ThemeOptions {
               color: theme.palette.grey[300],
               borderColor: theme.palette.primaryDark[500],
               '&.Mui-selected': {
-                color: '#fff',
+                color: (theme.vars || theme).palette.primary[200],
                 borderColor: `${(theme.vars || theme).palette.primary[700]} !important`,
-                backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+                backgroundColor: alpha(theme.palette.primary[900], 0.4),
                 '&:hover': {
-                  backgroundColor: (theme.vars || theme).palette.primaryDark[600],
+                  backgroundColor: alpha(theme.palette.primary[900], 0.8),
+                  borderColor: `${(theme.vars || theme).palette.primary[400]} !important`,
                 },
               },
             }),
@@ -836,6 +1043,7 @@ export function getThemedComponents(): ThemeOptions {
       MuiTooltip: {
         styleOverrides: {
           tooltip: {
+            borderRadius: 6,
             padding: '6px 12px',
           },
         },
diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js
index f2da0d5d7ec3c3..08492d4ed94687 100644
--- a/docs/src/modules/components/AppLayoutDocsFooter.js
+++ b/docs/src/modules/components/AppLayoutDocsFooter.js
@@ -35,6 +35,9 @@ const PaginationDiv = styled('div')(({ theme }) => {
 
 const PageLinkButton = styled(Button)(({ theme }) => ({
   fontWeight: theme.typography.fontWeightMedium,
+  ...theme.applyDarkStyles({
+    color: (theme.vars || theme).palette.primary[300],
+  }),
 }));
 
 const FeedbackGrid = styled(Grid)(({ theme }) => {
@@ -128,7 +131,7 @@ async function postFeedbackOnSlack(data) {
   /**
    Not used because I ignore how to encode that with:
       'content-type': 'application/x-www-form-urlencoded'
-   
+
    const complexSlackMessage = {
      blocks: [
        {
diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index cce4c604e52b00..bacd33727bd0b3 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -171,8 +171,8 @@ const Item = styled(
           background: alpha(theme.palette.primaryDark[700], 0.6),
         },
         '&:after': {
-          background: alpha(theme.palette.primaryDark[700], 0.6),
-          borderColor: alpha(theme.palette.primaryDark[600], 0.5),
+          background: alpha(theme.palette.primaryDark[700], 0.8),
+          borderColor: alpha(theme.palette.primaryDark[600], 0.6),
         },
       }),
       ...(!subheader && {
@@ -225,7 +225,7 @@ export const sxChip = (color) => [
   (theme) =>
     theme.applyDarkStyles({
       borderColor: alpha(theme.palette[color][800], 0.5),
-      bgcolor: alpha(theme.palette[color][900], 0.5),
+      bgcolor: alpha(theme.palette[color][800], 0.5),
       color: (theme.vars || theme).palette[color][300],
       '&:hover': {
         bgcolor: alpha(theme.palette[color][900], 0.5),
diff --git a/docs/src/modules/components/AppSettingsDrawer.js b/docs/src/modules/components/AppSettingsDrawer.js
index a118d08649cb88..d2489cbad4fa43 100644
--- a/docs/src/modules/components/AppSettingsDrawer.js
+++ b/docs/src/modules/components/AppSettingsDrawer.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled, useTheme, alpha } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import Drawer from '@mui/material/Drawer';
 import Box from '@mui/material/Box';
@@ -185,32 +185,9 @@ function AppSettingsDrawer(props) {
           href="/material-ui/customization/color/#playground"
           data-ga-event-category="settings"
           data-ga-event-action="colors"
-          size="small"
+          size="medium"
           variant="outlined"
-          sx={[
-            {
-              width: '100%',
-              mx: 0,
-              py: 1,
-              fontWeight: 500,
-              border: '1px solid',
-              borderColor: 'grey.200',
-              color: 'primary.500',
-              '&:hover': {
-                borderColor: 'grey.300',
-                background: 'grey.50',
-              },
-            },
-            (theme) =>
-              theme.applyDarkStyles({
-                borderColor: 'primaryDark.700',
-                color: 'primary.300',
-                '&:hover': {
-                  borderColor: 'primaryDark.600',
-                  background: alpha(theme.palette.primaryDark[700], 0.4),
-                },
-              }),
-          ]}
+          fullWidth
         >
           {t('settings.editWebsiteColors')}
         </Button>
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index febe0eb83a0d01..4966ac4b1f6ab7 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -253,24 +253,15 @@ const DemoRootMaterial = styled('div', {
         )} 0px, transparent 50%);`,
     ...theme.applyDarkStyles({
       borderColor: alpha(theme.palette.primaryDark[500], 0.7),
-      backgroundColor: (theme.vars || theme).palette.primaryDark[800],
+      backgroundColor: alpha(theme.palette.primary[900], 0.1),
       backgroundImage: `radial-gradient(at 51% 52%, ${alpha(
         theme.palette.primaryDark[700],
         0.5,
       )} 0px, transparent 50%),
-    radial-gradient(at 80% 0%, ${
-      (theme.vars || theme).palette.primaryDark[700]
-    } 0px, transparent 50%),
-    radial-gradient(at 0% 95%, ${
-      (theme.vars || theme).palette.primaryDark[700]
-    } 0px, transparent 50%),
-    radial-gradient(at 0% 5%, ${
-      (theme.vars || theme).palette.primaryDark[700]
-    } 0px, transparent 35%),
-    radial-gradient(at 93% 85%, ${alpha(
-      theme.palette.primaryDark[500],
-      0.8,
-    )} 0px, transparent 50%);`,
+    radial-gradient(at 80% 0%, ${alpha(theme.palette.primary[900], 0.3)} 0px, transparent 50%),
+    radial-gradient(at 0% 95%,  ${alpha(theme.palette.primary[900], 0.5)} 0px, transparent 50%),
+    radial-gradient(at 0% 5%, ${alpha(theme.palette.primary[900], 0.5)} 0px, transparent 35%),
+    radial-gradient(at 93% 85%, ${alpha(theme.palette.primary[900], 0.3)} 0px, transparent 50%);`,
     }),
   }),
 }));
@@ -327,20 +318,18 @@ const DemoRootJoy = joyStyled('div', {
       radial-gradient(at 80% 0%, #FFFFFF 0px, transparent 20%),
       radial-gradient(at 0% 95%, ${alpha(blue[100], 0.3)}, transparent 40%),
       radial-gradient(at 0% 20%, ${blue[50]} 0px, transparent 50%),
-      radial-gradient(at 93% 85%, ${alpha(blue[100], 0.2)} 0px, transparent 50%),
-      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23003A75' fill-opacity='0.03'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");`,
+      radial-gradient(at 93% 85%, ${alpha(blue[100], 0.2)} 0px, transparent 50%);`,
     ...theme.applyDarkStyles({
-      backgroundColor: blueDark[800],
+      backgroundColor: alpha(blue[900], 0.1),
       borderColor: `rgba(${theme.vars.palette.neutral.mainChannel} / 0.1)`,
       backgroundImage: `radial-gradient(at 51% 52%, ${alpha(
         blueDark[700],
         0.5,
       )} 0px, transparent 50%),
-        radial-gradient(at 80% 0%, ${blueDark[700]} 0px, transparent 50%),
-        radial-gradient(at 0% 95%, ${blueDark[700]} 0px, transparent 50%),
-        radial-gradient(at 0% 5%, ${blueDark[700]} 0px, transparent 25%),
-        radial-gradient(at 93% 85%, ${alpha(blueDark[500], 0.8)} 0px, transparent 50%),
-        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23003A75' fill-opacity='0.15'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");`,
+    radial-gradient(at 80% 0%, ${alpha(blue[900], 0.3)} 0px, transparent 50%),
+    radial-gradient(at 0% 95%,  ${alpha(blue[900], 0.5)} 0px, transparent 50%),
+    radial-gradient(at 0% 5%, ${alpha(blue[900], 0.5)} 0px, transparent 35%),
+    radial-gradient(at 93% 85%, ${alpha(blue[900], 0.3)} 0px, transparent 50%);`,
     }),
   }),
 }));
diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx
index af9d8a5e07a20d..0cf77767669137 100644
--- a/docs/src/modules/components/DemoEditor.tsx
+++ b/docs/src/modules/components/DemoEditor.tsx
@@ -15,8 +15,8 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [
     '& .scrollContainer': {
       maxHeight: 'min(68vh, 1000px)',
       overflow: 'auto',
-      backgroundColor: blueDark[800],
       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.
       border: `1px solid ${(theme.vars || theme).palette.divider}`,
       colorScheme: 'dark',
       '&:hover': {
@@ -38,6 +38,7 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [
   },
   theme.applyDarkStyles({
     '& .scrollContainer': {
+      borderColor: (theme.vars || theme).palette.divider,
       '&:hover': {
         boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primaryDark[300]}`,
       },
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index 54fb14f1b0161d..79d4747886a5d5 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -20,7 +20,7 @@ const Root = styled('div')(
       lineHeight: 1.5, // Developers likes when the code is dense.
       margin: theme.spacing(2, 'auto'),
       padding: theme.spacing(2),
-      backgroundColor: `var(--muidocs-palette-primaryDark-800, ${lightTheme.palette.primaryDark[800]})`,
+      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',
       colorScheme: 'dark',
       borderRadius: `var(--muidocs-shape-borderRadius, ${
@@ -61,10 +61,11 @@ const Root = styled('div')(
     '& h1': {
       ...lightTheme.typography.h3,
       fontSize: lightTheme.typography.pxToRem(36),
-      fontFamily: `"PlusJakartaSans-ExtraBold", ${lightTheme.typography.fontFamilySystem}`,
+      fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`,
       margin: '10px 0',
       color: `var(--muidocs-palette-primaryDark-900, ${lightTheme.palette.primaryDark[900]})`,
-      fontWeight: 800,
+      fontWeight: 600,
+      letterSpacing: -0.2,
     },
     '& .description': {
       ...lightTheme.typography.subtitle1,
@@ -76,27 +77,28 @@ const Root = styled('div')(
     },
     '& h2': {
       ...lightTheme.typography.h5,
-      fontFamily: lightTheme.typography.fontFamilySystem,
-      fontWeight: 700,
+      fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`,
+      fontWeight: lightTheme.typography.fontWeightSemiBold,
       color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
       margin: '40px 0 4px',
     },
     '& h3': {
       ...lightTheme.typography.h6,
-      fontFamily: lightTheme.typography.fontFamilySystem,
+      fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`,
       fontWeight: lightTheme.typography.fontWeightSemiBold,
       color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
       margin: '24px 0 8px',
     },
     '& h4': {
       ...lightTheme.typography.subtitle1,
-      fontFamily: lightTheme.typography.fontFamilySystem,
+      fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`,
       fontWeight: lightTheme.typography.fontWeightSemiBold,
       color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
       margin: '24px 0 8px',
     },
     '& h5': {
       ...lightTheme.typography.subtitle2,
+      fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`,
       fontWeight: lightTheme.typography.fontWeightSemiBold,
       color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
       margin: '20px 0 8px',
@@ -549,7 +551,7 @@ const Root = styled('div')(
       '& .MuiCallout-root': {
         '&.MuiCallout-error': {
           color: `var(--muidocs-palette-error-50, ${darkTheme.palette.error[50]})`,
-          backgroundColor: alpha(darkTheme.palette.error[700], 0.15),
+          backgroundColor: alpha(darkTheme.palette.error[700], 0.25),
           borderColor: alpha(lightTheme.palette.error[600], 0.3),
           '& strong': {
             color: `var(--muidocs-palette-error-100, ${darkTheme.palette.error[100]})`,
@@ -568,7 +570,7 @@ const Root = styled('div')(
         },
         '&.MuiCallout-success': {
           color: `var(--muidocs-palette-success-50, ${darkTheme.palette.success[50]})`,
-          backgroundColor: alpha(darkTheme.palette.success[700], 0.15),
+          backgroundColor: alpha(darkTheme.palette.success[700], 0.2),
           borderColor: alpha(lightTheme.palette.success[600], 0.3),
           '& strong': {
             color: `var(--muidocs-palette-success-200, ${darkTheme.palette.success[200]})`,
@@ -579,7 +581,7 @@ const Root = styled('div')(
         },
         '&.MuiCallout-warning': {
           color: `var(--muidocs-palette-warning-50, ${darkTheme.palette.warning[50]})`,
-          backgroundColor: alpha(darkTheme.palette.warning[700], 0.15),
+          backgroundColor: alpha(darkTheme.palette.warning[700], 0.2),
           borderColor: alpha(darkTheme.palette.warning[600], 0.3),
           '& strong': {
             color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`,
diff --git a/docs/src/modules/components/MuiProductSelector.tsx b/docs/src/modules/components/MuiProductSelector.tsx
index 6beff679f07278..49bc45a3d39732 100644
--- a/docs/src/modules/components/MuiProductSelector.tsx
+++ b/docs/src/modules/components/MuiProductSelector.tsx
@@ -127,7 +127,7 @@ export default function MuiProductSelector() {
             {products.map((product) => (
               <Chip
                 key={product.name}
-                color={pageContext.productId === product.id ? 'default' : undefined}
+                color={pageContext.productId === product.id ? 'primary' : undefined}
                 variant={pageContext.productId === product.id ? 'filled' : 'outlined'}
                 component={Link}
                 href={product.href}
diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js
index a808ef4b737341..570d23d6b7bd6d 100644
--- a/docs/src/modules/components/TopLayoutBlog.js
+++ b/docs/src/modules/components/TopLayoutBlog.js
@@ -131,7 +131,7 @@ const Root = styled('div')(
     background: `linear-gradient(180deg, ${
       (theme.vars || theme).palette.grey[50]
     } 0%, #FFFFFF 100%)`,
-    backgroundSize: '100% 300px',
+    backgroundSize: '100% 500px',
     backgroundRepeat: 'no-repeat',
     [`& .${classes.back}`]: {
       display: 'flex',
@@ -210,9 +210,11 @@ const Root = styled('div')(
   }),
   ({ theme }) =>
     theme.applyDarkStyles({
-      background: `linear-gradient(180deg, ${
-        (theme.vars || theme).palette.primaryDark[900]
-      } 0%, #001E3C 100%)`,
+      background: `linear-gradient(180deg, ${alpha(theme.palette.primary[900], 0.2)} 0%, ${
+        (theme.vars || theme).palette.primaryDark[800]
+      } 100%)`,
+      backgroundSize: '100% 500px',
+      backgroundRepeat: 'no-repeat',
       [`& .${classes.container}`]: {
         '& strong': {
           color: (theme.vars || theme).palette.grey[100],
@@ -368,6 +370,7 @@ function TopLayoutBlog(props) {
             return <MarkdownElement key={index} renderedMarkdown={chunk} />;
           })}
         </AppContainer>
+        <Divider />
         <HeroEnd />
         <Divider />
         <AppFooter />
diff --git a/docs/src/route.ts b/docs/src/route.ts
index 249f0db11743c6..225918dfe9f42d 100644
--- a/docs/src/route.ts
+++ b/docs/src/route.ts
@@ -1,5 +1,6 @@
 const ROUTES = {
   productCore: '/core/',
+  productBase: '/base-ui/',
   productMaterial: '/material-ui/',
   productAdvanced: '/x/',
   productToolpad: '/toolpad/',
@@ -11,6 +12,8 @@ const ROUTES = {
   rssFeed: '/feed/blog/rss.xml',
   handbook: 'https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b',
   baseDocs: '/base-ui/getting-started/',
+  baseComponents: '/base-ui/react-components/',
+  baseQuickstart: '/base-ui/getting-started/quickstart/',
   materialDocs: '/material-ui/getting-started/',
   joyDocs: '/joy-ui/getting-started/',
   systemDocs: '/system/getting-started/',
diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
index 9e81e6b31dd56c..bf57e297ad4376 100644
--- a/docs/tailwind.config.js
+++ b/docs/tailwind.config.js
@@ -1,12 +1,15 @@
+/** @type {import('tailwindcss/plugin')} */
+// eslint-disable-next-line import/no-import-module-exports
+import plugin from 'tailwindcss/plugin';
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: 'class',
+  darkMode: ['class', '[data-mui-color-scheme="dark"]'],
   content: [
     './data/**/*.{js,ts,jsx,tsx,mdx}',
     './pages/**/*.{js,ts,jsx,tsx,mdx}',
     './src/**/*.{js,ts,jsx,tsx,mdx}',
   ],
-  // This needs to be kept in sync with docs/src/modules/sandbox/CreateReactApp.tsx
   theme: {
     extend: {
       boxShadow: {
@@ -48,5 +51,29 @@ module.exports = {
     // Remove the Tailwind CSS preflight styles so it can use Material UI's preflight instead (CssBaseline).
     preflight: false,
   },
-  plugins: [],
+  plugins: [
+    plugin(({ addVariant }) => {
+      [
+        'active',
+        'checked',
+        'completed',
+        'disabled',
+        'readOnly',
+        'error',
+        'expanded',
+        'focused',
+        'required',
+        'selected',
+      ].forEach((state) => {
+        addVariant(`ui-${state}`, [`&[class~="Mui-${state}"]`]);
+
+        addVariant(`ui-not-${state}`, [`&:not([class~="Mui-${state}"])`]);
+      });
+
+      // for focus-visible, use the same selector as headlessui
+      // https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-tailwindcss/src/index.ts#LL35C11-L35C11
+      addVariant(`ui-focus-visible`, [`&[class~="Mui-focusVisible"]`, `&:focus-visible`]);
+      addVariant(`ui-not-focus-visible`, [`&:not([class~="Mui-focusVisible"])`]);
+    }),
+  ],
 };