diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index f6785609c3bb99..64664cbcdd7071 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -99,6 +99,7 @@ const Root = styled('div')(
     '& p, & ul, & ol': {
       marginTop: 0,
       marginBottom: 16,
+      color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
     },
     '& ul': {
       paddingLeft: 30,
@@ -245,11 +246,14 @@ const Root = styled('div')(
       borderRadius: `var(--muidocs-shape-borderRadius, ${
         theme.shape?.borderRadius ?? lightTheme.shape.borderRadius
       }px)`,
-      '& > p, & > ul': {
+      '& > ul, & > p': {
         '&:last-child': {
           margin: 0,
         },
       },
+      '& > p, & ul, li': {
+        color: 'inherit',
+      },
       '&.MuiCallout-error': {
         color: `var(--muidocs-palette-error-900, ${lightTheme.palette.error[900]})`,
         backgroundColor: `var(--muidocs-palette-error-50, ${lightTheme.palette.error[50]})`,
@@ -418,7 +422,7 @@ const Root = styled('div')(
       },
     },
     '& li': {
-      marginBottom: 2,
+      marginBottom: 4,
       '& pre': {
         marginTop: theme.spacing(1),
       },
@@ -452,6 +456,9 @@ const Root = styled('div')(
       '& h5': {
         color: `var(--muidocs-palette-grey-300, ${darkTheme.palette.grey[300]})`,
       },
+      '& p, & ul, & ol': {
+        color: `var(--muidocs-palette-grey-400, ${darkTheme.palette.grey[400]})`,
+      },
       '& h1, & h2, & h3, & h4': {
         '&:hover .anchor-link-style, & .comment-link-style': {
           color: `var(--muidocs-palette-text-secondary, ${darkTheme.palette.text.secondary})`,