diff --git a/docs/src/components/action/Highlighter.tsx b/docs/src/components/action/Highlighter.tsx
index dc91a1e3a6dbf9..a548ffc6423507 100644
--- a/docs/src/components/action/Highlighter.tsx
+++ b/docs/src/components/action/Highlighter.tsx
@@ -45,7 +45,7 @@ export default function Highlighter({
         border: '1px solid transparent',
         transitionProperty: 'all',
         transitionDuration: '150ms',
-        color: (theme) => (theme.palette.mode === 'dark' ? 'grey.600' : 'grey.500'),
+        color: (theme) => (theme.palette.mode === 'dark' ? 'primary.800' : 'primary.300'),
         ...((!disableBorder || selected) && {
           borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.500' : 'grey.200'),
         }),
@@ -53,7 +53,7 @@ export default function Highlighter({
           bgcolor: (theme) =>
             theme.palette.mode === 'dark' ? 'primaryDark.700' : lightSelectedBg[selectedBg],
           borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.300' : 'grey.200'),
-          color: (theme) => (theme.palette.mode === 'dark' ? 'primary.400' : 'primary.500'),
+          color: (theme) => (theme.palette.mode === 'dark' ? 'primary.300' : 'primary.500'),
         }),
         ...(!selected && {
           '&:hover, &:focus': {
diff --git a/docs/src/components/home/DiamondSponsors.tsx b/docs/src/components/home/DiamondSponsors.tsx
index 189d7a9abe0801..349a12e4a08b93 100644
--- a/docs/src/components/home/DiamondSponsors.tsx
+++ b/docs/src/components/home/DiamondSponsors.tsx
@@ -51,7 +51,7 @@ export default function DiamondSponsors() {
           sx={{
             color: (theme) =>
               theme.palette.mode === 'dark'
-                ? theme.palette.primary[400]
+                ? theme.palette.primary[300]
                 : theme.palette.primary[500],
           }}
         >
diff --git a/docs/src/components/home/GoldSponsors.tsx b/docs/src/components/home/GoldSponsors.tsx
index 1ead1c6be2e697..62a70d72066293 100644
--- a/docs/src/components/home/GoldSponsors.tsx
+++ b/docs/src/components/home/GoldSponsors.tsx
@@ -85,7 +85,7 @@ export default function GoldSponsors() {
           sx={{
             color: (theme) =>
               theme.palette.mode === 'dark'
-                ? theme.palette.warning[500]
+                ? theme.palette.warning[300]
                 : theme.palette.warning[700],
           }}
         >
diff --git a/docs/src/components/home/MaterialDesignComponents.tsx b/docs/src/components/home/MaterialDesignComponents.tsx
index 0bc679cf4a892c..f93b5b4ef501ae 100644
--- a/docs/src/components/home/MaterialDesignComponents.tsx
+++ b/docs/src/components/home/MaterialDesignComponents.tsx
@@ -40,7 +40,9 @@ import Link from 'docs/src/modules/components/Link';
 const Grid = styled('div')(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
   backgroundColor:
-    theme.palette.mode === 'dark' ? theme.palette.background.paper : theme.palette.grey[50],
+    theme.palette.mode === 'dark'
+      ? theme.palette.background.paper
+      : alpha(theme.palette.grey[50], 0.4),
   display: 'grid',
   gridTemplateColumns: '1fr',
   gridAutoRows: 240,
@@ -57,10 +59,10 @@ const Grid = styled('div')(({ theme }) => ({
     padding: theme.spacing(2),
     alignSelf: 'stretch',
     border: '1px solid',
-    borderColor: theme.palette.divider,
-    '&:last-of-type': {
-      backgroundColor: theme.palette.background.default,
-    },
+    borderColor:
+      theme.palette.mode === 'dark'
+        ? alpha(theme.palette.primaryDark[600], 0.3)
+        : theme.palette.grey[200],
     [theme.breakpoints.only('xs')]: {
       '&:first-of-type': {
         borderTopLeftRadius: theme.shape.borderRadius,
@@ -69,7 +71,6 @@ const Grid = styled('div')(({ theme }) => ({
       '&:last-of-type': {
         borderBottomLeftRadius: theme.shape.borderRadius,
         borderBottomRightRadius: theme.shape.borderRadius,
-        borderStyle: 'dashed',
       },
       '&:not(:first-of-type)': {
         marginTop: -1,
@@ -175,7 +176,7 @@ function Demo({
           })}
         </ThemeProvider>
       </Box>
-      <Typography fontWeight="bold" variant="body2">
+      <Typography fontWeight="semiBold" variant="body2">
         {name}
       </Typography>
     </Box>
@@ -266,22 +267,6 @@ export function buildTheme(theme: Theme): ThemeOptions {
                 ? theme.palette.primaryDark[400]
                 : theme.palette.primaryDark[600],
           },
-          text: {
-            color:
-              theme.palette.mode === 'dark'
-                ? theme.palette.primaryDark[50]
-                : theme.palette.primaryDark[700],
-          },
-          outlined: {
-            borderColor:
-              theme.palette.mode === 'dark'
-                ? theme.palette.primaryDark[300]
-                : theme.palette.primaryDark[600],
-            color:
-              theme.palette.mode === 'dark'
-                ? theme.palette.primaryDark[50]
-                : theme.palette.primaryDark[700],
-          },
           iconSizeSmall: {
             '& > *:nth-of-type(1)': {
               fontSize: '0.875rem',
@@ -334,8 +319,8 @@ export function buildTheme(theme: Theme): ThemeOptions {
                 : alpha(theme.palette.primaryDark[50], 0.5),
             borderColor:
               theme.palette.mode === 'dark'
-                ? theme.palette.primaryDark[200]
-                : theme.palette.primaryDark[600],
+                ? theme.palette.primaryDark[500]
+                : theme.palette.primaryDark[300],
             '& .MuiAlert-icon': {
               color:
                 theme.palette.mode === 'dark'
@@ -356,6 +341,11 @@ export function buildTheme(theme: Theme): ThemeOptions {
               theme.palette.mode === 'dark'
                 ? theme.palette.primaryDark[50]
                 : theme.palette.primaryDark[700],
+            border: '1px solid',
+            borderColor:
+              theme.palette.mode === 'dark'
+                ? alpha(theme.palette.primaryDark[500], 0.5)
+                : theme.palette.primaryDark[100],
             '& .MuiAlert-icon': {
               color:
                 theme.palette.mode === 'dark'
diff --git a/docs/src/components/home/Testimonials.tsx b/docs/src/components/home/Testimonials.tsx
index 772dddbd4be097..cdb363e05856e9 100644
--- a/docs/src/components/home/Testimonials.tsx
+++ b/docs/src/components/home/Testimonials.tsx
@@ -18,7 +18,13 @@ const Testimonials = () => {
   });
   return (
     <ThemeProvider theme={brandingDarkTheme}>
-      <Box ref={ref} sx={{ bgcolor: 'primaryDark.700' }}>
+      <Box
+        ref={ref}
+        sx={{
+          background: (theme) =>
+            `linear-gradient(85deg, ${theme.palette.primaryDark[700]} 0%, ${theme.palette.primaryDark[600]} 100%)`,
+        }}
+      >
         <Container sx={{ py: { xs: 4, md: 8 } }}>
           <Grid container spacing={3} alignItems="center">
             <Grid item xs={12} md={6} sx={{ zIndex: 1, minHeight: { xs: 400, sm: 307, lg: 355 } }}>
diff --git a/docs/src/components/typography/GradientText.tsx b/docs/src/components/typography/GradientText.tsx
index a53a648b867cbc..50925eb059518b 100644
--- a/docs/src/components/typography/GradientText.tsx
+++ b/docs/src/components/typography/GradientText.tsx
@@ -5,7 +5,7 @@ const GradientText = styled('span')<{
 }>(({ theme, color = 'primary' }) => ({
   background:
     theme.palette.mode === 'dark'
-      ? theme.palette.primary.main
+      ? theme.palette.primary[300]
       : `linear-gradient(to right, ${theme.palette[color].main}, ${theme.palette[color][700]})`,
   WebkitBackgroundClip: 'text',
   WebkitTextFillColor: 'transparent',
diff --git a/docs/src/components/typography/SectionHeadline.tsx b/docs/src/components/typography/SectionHeadline.tsx
index 136e9d4e36abcd..eba051bca3ef36 100644
--- a/docs/src/components/typography/SectionHeadline.tsx
+++ b/docs/src/components/typography/SectionHeadline.tsx
@@ -13,7 +13,7 @@ export default function SectionHeadline({
 }) {
   const globalTheme = useTheme();
   const mode = globalTheme.palette.mode;
-  const overlineColor = mode === 'dark' ? 'primary.400' : 'primary.600';
+  const overlineColor = mode === 'dark' ? 'primary.300' : 'primary.600';
   const titleColor = mode === 'dark' ? 'grey.100' : 'primaryDark.900';
   const descriptionColor = mode === 'dark' ? 'grey.500' : 'grey.800';
   return (