diff --git a/packages/docs/src/components/presets-demo.js b/packages/docs/src/components/presets-demo.js
index d8684b4cc..bfc01811d 100644
--- a/packages/docs/src/components/presets-demo.js
+++ b/packages/docs/src/components/presets-demo.js
@@ -52,7 +52,7 @@ export default () => {
           </Select>
         </label>
         <ThemeContext.Provider value={preset}>
-          <Styled.root>
+          <Styled.root sx={{ bg: 'background', color: 'text', p: 3 }}>
             <Styled.h2>Colors</Styled.h2>
             <ColorPalette omit={['modes', 'header']} />
             <Styled.h2>Typography</Styled.h2>