diff --git a/docs/List.md b/docs/List.md
index 08cd538b66d..89737c9fec6 100644
--- a/docs/List.md
+++ b/docs/List.md
@@ -754,16 +754,22 @@ You can use the `empty` prop to replace that page by a custom component:
 {% raw %}
 
 ```jsx
+import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
 import { CreateButton, List } from 'react-admin';
 
 const Empty = ({ basePath, resource }) => (
-    <div style={{ textAlign: 'center', margin: '1em' }}>
-        <h1>No products available</h1>
-        <div>Create one or import from a file</div>
+    <Box textAlign="center" m={1}>
+        <Typography variant="h4" paragraph>
+            No products available
+        </Typography>
+        <Typography variant="body1">
+            Create one or import from a file
+        </Typography>
         <CreateButton basePath={basePath} />
         <Button onClick={...}>Import</Button>
-    </div>
+    </Box>
 );
 
 const ProductList = props => (
@@ -808,7 +814,7 @@ const PostList = props => (
         ...
     </List>
 );
-````
+```
 
 The default value for the `component` prop is `Card`.
 
diff --git a/packages/ra-ui-materialui/src/list/Empty.js b/packages/ra-ui-materialui/src/list/Empty.js
index 9fa123662a8..e4532a031f6 100644
--- a/packages/ra-ui-materialui/src/list/Empty.js
+++ b/packages/ra-ui-materialui/src/list/Empty.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import Inbox from '@material-ui/icons/Inbox';
+import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/styles';
 import { useTranslate } from 'ra-core';
 import { CreateButton } from '../button';
@@ -8,7 +9,6 @@ import inflection from 'inflection';
 const useStyles = makeStyles({
     message: {
         textAlign: 'center',
-        fontFamily: 'Roboto, sans-serif',
         opacity: 0.5,
         margin: '0 1em',
     },
@@ -38,8 +38,12 @@ const Empty = ({ resource, basePath }) => {
         <>
             <div className={classes.message}>
                 <Inbox className={classes.icon} />
-                <h1>{translate('ra.page.empty', { name: resourceName })}</h1>
-                <div>{translate('ra.page.invite')}</div>
+                <Typography variant="h4" paragraph>
+                    {translate('ra.page.empty', { name: resourceName })}
+                </Typography>
+                <Typography variant="body1">
+                    {translate('ra.page.invite')}
+                </Typography>
             </div>
             <div className={classes.toolbar}>
                 <CreateButton variant="contained" basePath={basePath} />