diff --git a/docs/data/joy/components/alert/alert.md b/docs/data/joy/components/alert/alert.md
index 0e59224b6233cf..16cea74836fdf5 100644
--- a/docs/data/joy/components/alert/alert.md
+++ b/docs/data/joy/components/alert/alert.md
@@ -18,7 +18,7 @@ Alerts should not be confused with alert _dialogs_ ([ARIA](https://www.w3.org/WA
 Use the Joy UI [Modal](https://mui.com/joy-ui/react-modal/) if you need the behavior of a dialog.
 :::
 
-{{"demo": "AlertUsage.js", "hideToolbar": true}}
+{{"demo": "AlertUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
diff --git a/docs/data/joy/components/autocomplete/CustomTags.js b/docs/data/joy/components/autocomplete/CustomTags.js
index 7e808ccc86ed50..1b83a19a03b900 100644
--- a/docs/data/joy/components/autocomplete/CustomTags.js
+++ b/docs/data/joy/components/autocomplete/CustomTags.js
@@ -9,7 +9,6 @@ export default function CustomTags() {
       id="tags-default"
       multiple
       placeholder="Favorites"
-      variant="soft"
       options={top100Films}
       getOptionLabel={(option) => option.title}
       defaultValue={[top100Films[13]]}
diff --git a/docs/data/joy/components/autocomplete/CustomTags.tsx b/docs/data/joy/components/autocomplete/CustomTags.tsx
index 7e808ccc86ed50..1b83a19a03b900 100644
--- a/docs/data/joy/components/autocomplete/CustomTags.tsx
+++ b/docs/data/joy/components/autocomplete/CustomTags.tsx
@@ -9,7 +9,6 @@ export default function CustomTags() {
       id="tags-default"
       multiple
       placeholder="Favorites"
-      variant="soft"
       options={top100Films}
       getOptionLabel={(option) => option.title}
       defaultValue={[top100Films[13]]}
diff --git a/docs/data/joy/components/autocomplete/Playground.js b/docs/data/joy/components/autocomplete/Playground.js
index 0420a8dbc8dd9f..2fc136eb690ba3 100644
--- a/docs/data/joy/components/autocomplete/Playground.js
+++ b/docs/data/joy/components/autocomplete/Playground.js
@@ -27,12 +27,14 @@ export default function Playground() {
     <Box>
       <Box
         sx={{
-          pt: 2,
-          pb: 1,
-          bgcolor: 'background.surface',
+          mt: 3,
+          pt: 4,
           position: 'sticky',
           top: 'var(--MuiDocs-header-height)',
           zIndex: 2,
+          border: '1px solid rgba(62, 80, 96, 0.3)',
+          borderRadius: 'xs',
+          background: 'rgba(0,30,60, 0.95)',
         }}
       >
         <FormControl sx={{ width: 300, mx: 'auto' }}>
@@ -43,7 +45,7 @@ export default function Playground() {
             {...flags.reduce((prev, current) => ({ ...prev, [current]: true }), {})}
           />
         </FormControl>
-        <Divider sx={{ mt: 3, mb: 2 }} />
+        <Divider sx={{ mt: 4, mb: 2 }} />
         <Box sx={{ display: 'flex', alignItems: 'baseline' }}>
           <Typography
             id="flags-playground"
@@ -52,6 +54,7 @@ export default function Playground() {
               textTransform: 'uppercase',
               fontWeight: 'lg',
               letterSpacing: 'md',
+              px: 2,
             }}
           >
             Flags {flags.length ? `(${flags.length})` : ''}
@@ -68,6 +71,7 @@ export default function Playground() {
             </Link>
           )}
         </Box>
+        <Divider sx={{ my: 2 }} />
       </Box>
       <Box sx={{ minWidth: 0, flexBasis: 300, flexGrow: 1 }}>
         <List
diff --git a/docs/data/joy/components/avatar/avatar.md b/docs/data/joy/components/avatar/avatar.md
index f482e46f564ade..bef9d3aded874f 100644
--- a/docs/data/joy/components/avatar/avatar.md
+++ b/docs/data/joy/components/avatar/avatar.md
@@ -12,7 +12,7 @@ githubLabel: 'component: avatar'
 
 The Avatar component can be used to display graphical information about a user in places such as menus, tables, and chats.
 
-{{"demo": "AvatarUsage.js", "hideToolbar": true}}
+{{"demo": "AvatarUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
diff --git a/docs/data/joy/components/badge/badge.md b/docs/data/joy/components/badge/badge.md
index e5a7475593aef0..adebc8063ec43b 100644
--- a/docs/data/joy/components/badge/badge.md
+++ b/docs/data/joy/components/badge/badge.md
@@ -13,7 +13,7 @@ unstyled: /base/react-badge/
 
 The badge component is most frequently used to signal status (online, offline, busy, etc) and whether there's notifications or not.
 
-{{"demo": "BadgeUsage.js", "hideToolbar": true}}
+{{"demo": "BadgeUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 :::success
 To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
diff --git a/docs/data/joy/components/breadcrumbs/breadcrumbs.md b/docs/data/joy/components/breadcrumbs/breadcrumbs.md
index dd36e2b08bc06b..e6948e47d9340f 100644
--- a/docs/data/joy/components/breadcrumbs/breadcrumbs.md
+++ b/docs/data/joy/components/breadcrumbs/breadcrumbs.md
@@ -11,7 +11,7 @@ title: React Breadcrumbs component
 
 The `Breadcrumbs` shows where in the site hierarchy the user is.
 
-{{"demo": "BreadcrumbsUsage.js", "hideToolbar": true}}
+{{"demo": "BreadcrumbsUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 :::success
 To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
diff --git a/docs/data/joy/components/button/button.md b/docs/data/joy/components/button/button.md
index cb2a509bd5473a..e27ac18c864e9d 100644
--- a/docs/data/joy/components/button/button.md
+++ b/docs/data/joy/components/button/button.md
@@ -14,7 +14,7 @@ unstyled: /base/react-button/
 
 Buttons communicate actions that users can take.
 
-{{"demo": "ButtonUsage.js", "hideToolbar": true}}
+{{"demo": "ButtonUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
diff --git a/docs/data/joy/components/checkbox/CheckboxUsage.js b/docs/data/joy/components/checkbox/CheckboxUsage.js
index 2bf7a268f8b256..b0606fcd9b2fb8 100644
--- a/docs/data/joy/components/checkbox/CheckboxUsage.js
+++ b/docs/data/joy/components/checkbox/CheckboxUsage.js
@@ -10,13 +10,13 @@ export default function CheckboxUsage() {
         {
           propName: 'variant',
           knob: 'select',
-          defaultValue: 'outlined',
+          defaultValue: 'soft',
           options: ['plain', 'outlined', 'soft', 'solid'],
         },
         {
           propName: 'color',
           knob: 'color',
-          defaultValue: 'neutral',
+          defaultValue: 'primary',
         },
         {
           propName: 'size',
diff --git a/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js b/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js
index 88b29dbe9935fc..3f292d57e17675 100644
--- a/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js
+++ b/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js
@@ -11,18 +11,19 @@ export default function ExampleButtonCheckbox() {
   const [value, setValue] = React.useState([]);
   return (
     <List
-      variant="soft"
+      variant="outlined"
       aria-label="Screens"
       role="group"
       row
       sx={{
+        bgcolor: 'background.body',
         flexGrow: 0,
         '--List-gap': '8px',
         '--List-padding': '8px',
         '--List-radius': '8px',
       }}
     >
-      {['mobile', 'laptop', 'monitor'].map((item) => (
+      {['Mobile', 'Laptop', 'Monitor'].map((item) => (
         <ListItem key={item}>
           <ListItemDecorator
             sx={{
@@ -33,9 +34,9 @@ export default function ExampleButtonCheckbox() {
           >
             {
               {
-                mobile: <PhoneAndroidIcon />,
-                laptop: <LaptopIcon />,
-                monitor: <TvIcon />,
+                Mobile: <PhoneAndroidIcon />,
+                Laptop: <LaptopIcon />,
+                Monitor: <TvIcon />,
               }[item]
             }
           </ListItemDecorator>
diff --git a/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js b/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js
index c916604acba5d5..c199896884f320 100644
--- a/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js
+++ b/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js
@@ -10,7 +10,10 @@ import Done from '@mui/icons-material/Done';
 export default function ExampleChoiceChipCheckbox() {
   const [value, setValue] = React.useState([]);
   return (
-    <Sheet variant="outlined" sx={{ width: 360, p: 2, borderRadius: 'sm' }}>
+    <Sheet
+      variant="outlined"
+      sx={{ width: 360, p: 2, borderRadius: 'sm', bgcolor: 'background.body' }}
+    >
       <Typography id="rank" level="body2" fontWeight="lg" sx={{ mb: 1.5 }}>
         Choose amenities
       </Typography>
diff --git a/docs/data/joy/components/checkbox/ExampleFilterMemberCheckbox.js b/docs/data/joy/components/checkbox/ExampleFilterMemberCheckbox.js
index 8eb97877bc7302..01114edfde01cd 100644
--- a/docs/data/joy/components/checkbox/ExampleFilterMemberCheckbox.js
+++ b/docs/data/joy/components/checkbox/ExampleFilterMemberCheckbox.js
@@ -19,6 +19,7 @@ export default function ExampleFilterMemberCheckbox() {
       variant="outlined"
       sx={{
         p: 2,
+        bgcolor: 'background.body',
         borderRadius: 'sm',
         width: 360,
         maxWidth: '100%',
diff --git a/docs/data/joy/components/checkbox/ExampleFilterStatusCheckbox.js b/docs/data/joy/components/checkbox/ExampleFilterStatusCheckbox.js
index bd6e8db8bab2a3..f80008ec27bc72 100644
--- a/docs/data/joy/components/checkbox/ExampleFilterStatusCheckbox.js
+++ b/docs/data/joy/components/checkbox/ExampleFilterStatusCheckbox.js
@@ -14,7 +14,10 @@ export default function ExampleFilterStatusCheckbox() {
     wrongAddress: false,
   });
   return (
-    <Sheet variant="outlined" sx={{ p: 2, borderRadius: 'sm', width: 300 }}>
+    <Sheet
+      variant="outlined"
+      sx={{ p: 2, borderRadius: 'sm', width: 300, bgcolor: 'background.body' }}
+    >
       <Typography
         id="filter-status"
         sx={{
diff --git a/docs/data/joy/components/checkbox/OverlayCheckbox.js b/docs/data/joy/components/checkbox/OverlayCheckbox.js
index fadd92846dccc3..ef85864c3a870d 100644
--- a/docs/data/joy/components/checkbox/OverlayCheckbox.js
+++ b/docs/data/joy/components/checkbox/OverlayCheckbox.js
@@ -14,10 +14,10 @@ export default function OverlayCheckbox() {
         '& > div': { p: 2, boxShadow: 'sm', borderRadius: 'xs', display: 'flex' },
       }}
     >
-      <Sheet variant="outlined">
+      <Sheet variant="outlined" sx={{ bgcolor: 'background.body' }}>
         <Checkbox overlay label="It works with any parent" />
       </Sheet>
-      <Sheet variant="outlined">
+      <Sheet variant="outlined" sx={{ bgcolor: 'background.body' }}>
         <Checkbox
           label="Focus outline covers the parent!"
           overlay
diff --git a/docs/data/joy/components/checkbox/checkbox.md b/docs/data/joy/components/checkbox/checkbox.md
index 181c129732d2c0..28bb935799c421 100644
--- a/docs/data/joy/components/checkbox/checkbox.md
+++ b/docs/data/joy/components/checkbox/checkbox.md
@@ -14,7 +14,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
 The `Checkbox` component is the one to be used when you want to allow users to select multiple options.
 For toggling between on and off or single option selection, consider using a switch or radio button, respectively.
 
-{{"demo": "CheckboxUsage.js", "hideToolbar": true}}
+{{"demo": "CheckboxUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 :::success
 To learn how to add more variants or sizes to the component, check out the [Themed components](/joy-ui/customization/themed-components/) page.
diff --git a/docs/data/joy/components/chip/chip.md b/docs/data/joy/components/chip/chip.md
index 6b1f0c36bdd100..25b1261a5bb46f 100644
--- a/docs/data/joy/components/chip/chip.md
+++ b/docs/data/joy/components/chip/chip.md
@@ -14,7 +14,7 @@ Chips are most frequently used in two main use cases: as pills of informative co
 
 The badge component is most frequently used to signal status (online, offline, busy, etc) and whether there's notifications or not.
 
-{{"demo": "ChipUsage.js", "hideToolbar": true}}
+{{"demo": "ChipUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 :::success
 To learn how to add more variants or sizes to the component, check out the [Themed components](/joy-ui/customization/themed-components/) page.
diff --git a/docs/data/joy/components/circular-progress/circular-progress.md b/docs/data/joy/components/circular-progress/circular-progress.md
index 90471d0d25467b..398c834f364fba 100644
--- a/docs/data/joy/components/circular-progress/circular-progress.md
+++ b/docs/data/joy/components/circular-progress/circular-progress.md
@@ -17,7 +17,7 @@ To actually have it represent how long an operation will take, use the [determin
 
 The animations of the components rely on CSS as much as possible to work even before the JavaScript is loaded.
 
-{{"demo": "CircularProgressUsage.js", "hideToolbar": true}}
+{{"demo": "CircularProgressUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
diff --git a/docs/data/joy/components/divider/DividerUsage.js b/docs/data/joy/components/divider/DividerUsage.js
index c93b86612193e0..34dccb8bc6ee88 100644
--- a/docs/data/joy/components/divider/DividerUsage.js
+++ b/docs/data/joy/components/divider/DividerUsage.js
@@ -22,7 +22,7 @@ export default function DividerUsages() {
         },
       ]}
       renderDemo={(props) => (
-        <Sheet>
+        <Sheet sx={{ my: 2, bgcolor: 'transparent' }}>
           <Sheet
             sx={{
               height: 12,
@@ -38,20 +38,20 @@ export default function DividerUsages() {
             sx={{ width: 300, pb: 3 }}
           >
             <Sheet
-              variant="soft"
               sx={{
                 height: props.orientation === 'vertical' ? 120 : 40,
                 flexGrow: 1,
                 borderRadius: 'xs',
+                bgcolor: 'background.level3',
               }}
             />
             <Divider {...props} />
             <Sheet
-              variant="soft"
               sx={{
                 height: props.orientation === 'vertical' ? 120 : 40,
                 flexGrow: 1,
                 borderRadius: 'xs',
+                bgcolor: 'background.level3',
               }}
             />
           </Stack>
diff --git a/docs/data/joy/components/divider/divider.md b/docs/data/joy/components/divider/divider.md
index 9aa5fd90e2e35f..dfd5a051079b84 100644
--- a/docs/data/joy/components/divider/divider.md
+++ b/docs/data/joy/components/divider/divider.md
@@ -12,7 +12,7 @@ githubLabel: 'component: divider'
 
 Dividers separate content into clear groups.
 
-{{"demo": "DividerUsage.js", "hideToolbar": "true"}}
+{{"demo": "DividerUsage.js", "hideToolbar": "true", "bg": "gradient"}}
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
@@ -50,7 +50,7 @@ Use the `Divider` to wrap elements that will be added to it.
 
 Use the `orientation` prop to render a vertical divider.
 
-{{"demo": "VerticalDividers.js", "bg": true}}
+{{"demo": "VerticalDividers.js"}}
 
 #### Vertical with text
 
diff --git a/docs/data/joy/components/linear-progress/linear-progress.md b/docs/data/joy/components/linear-progress/linear-progress.md
index 28584de3d7d3b5..bc56dcb995e07e 100644
--- a/docs/data/joy/components/linear-progress/linear-progress.md
+++ b/docs/data/joy/components/linear-progress/linear-progress.md
@@ -17,7 +17,7 @@ To actually have it represent how long an operation will take, use the [determin
 
 The animations of the components rely on CSS as much as possible to work even before the JavaScript is loaded.
 
-{{"demo": "LinearProgressUsage.js", "hideToolbar": true}}
+{{"demo": "LinearProgressUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
diff --git a/docs/data/joy/components/link/LinkCard.js b/docs/data/joy/components/link/LinkCard.js
index 650f7e31c3096f..3164e71b7deb66 100644
--- a/docs/data/joy/components/link/LinkCard.js
+++ b/docs/data/joy/components/link/LinkCard.js
@@ -10,7 +10,7 @@ export default function Links() {
   return (
     <Card
       sx={{
-        bgcolor: 'background.level1',
+        bgcolor: 'background.body',
         '&:hover, &:focus-within': {
           bgcolor: 'background.level2',
         },
@@ -32,7 +32,7 @@ export default function Links() {
               Joy UI
             </Link>
           </Typography>
-          <Typography level="body2">Spark joy components</Typography>
+          <Typography level="body2">Components that spark joy!</Typography>
         </div>
       </Box>
       <Typography level="body2" display="flex" alignItems="center" gap={0.5}>
diff --git a/docs/data/joy/components/link/link.md b/docs/data/joy/components/link/link.md
index 432956fdf5065c..7766462c3414f0 100644
--- a/docs/data/joy/components/link/link.md
+++ b/docs/data/joy/components/link/link.md
@@ -14,7 +14,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/link/
 The `Link` component represents the HTML `<a>` element.
 It accepts the same props as the [`Typography`](/joy-ui/react-typography/) component, as well as the system props.
 
-{{"demo": "LinkUsage.js", "hideToolbar": true}}
+{{"demo": "LinkUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
diff --git a/docs/data/joy/components/list/DividedList.js b/docs/data/joy/components/list/DividedList.js
index 651c04358d1cff..9f6582db43eb6b 100644
--- a/docs/data/joy/components/list/DividedList.js
+++ b/docs/data/joy/components/list/DividedList.js
@@ -25,8 +25,10 @@ export default function DividedList() {
           <List
             variant="outlined"
             sx={{
+              bgcolor: 'background.body',
               minWidth: 240,
               borderRadius: 'sm',
+              boxShadow: 'sm',
               '--List-decorator-size': '48px',
               '--List-item-paddingLeft': '1.5rem',
               '--List-item-paddingRight': '1rem',
diff --git a/docs/data/joy/components/list/HorizontalDividedList.js b/docs/data/joy/components/list/HorizontalDividedList.js
index 225f70d58f3194..f2d755aa92300a 100644
--- a/docs/data/joy/components/list/HorizontalDividedList.js
+++ b/docs/data/joy/components/list/HorizontalDividedList.js
@@ -11,7 +11,9 @@ export default function HorizontalDividedList() {
       row
       variant="outlined"
       sx={{
+        bgcolor: 'background.body',
         borderRadius: 'sm',
+        boxShadow: 'sm',
         flexGrow: 0,
         mx: 'auto',
         '--List-decorator-size': '48px',
diff --git a/docs/data/joy/components/list/ListVariables.js b/docs/data/joy/components/list/ListVariables.js
index b0f34a0a1a1776..abf24fc6787e48 100644
--- a/docs/data/joy/components/list/ListVariables.js
+++ b/docs/data/joy/components/list/ListVariables.js
@@ -30,7 +30,13 @@ export default function ListVariables() {
       ]}
       renderDemo={(sx) => (
         <List
-          sx={(theme) => ({ ...sx, width: 300, ...theme.variants.outlined.neutral })}
+          sx={(theme) => ({
+            ...sx,
+            width: 300,
+            ...theme.variants.outlined.neutral,
+            bgcolor: 'background.body',
+            borderRadius: 'sm',
+          })}
         >
           <ListItem>
             <ListItemButton>
diff --git a/docs/data/joy/components/list/NestedList.js b/docs/data/joy/components/list/NestedList.js
index 5ebd12bd076f44..0efdde73c046dd 100644
--- a/docs/data/joy/components/list/NestedList.js
+++ b/docs/data/joy/components/list/NestedList.js
@@ -25,7 +25,9 @@ export default function NestedList() {
         size={small ? 'sm' : undefined}
         sx={{
           width: 200,
+          bgcolor: 'background.body',
           borderRadius: 'sm',
+          boxShadow: 'sm',
         }}
       >
         <ListItem nested>
diff --git a/docs/data/joy/components/list/SizesList.js b/docs/data/joy/components/list/SizesList.js
index 662ed09eff77dd..42fb75d1158b60 100644
--- a/docs/data/joy/components/list/SizesList.js
+++ b/docs/data/joy/components/list/SizesList.js
@@ -16,7 +16,7 @@ export default function SizesList() {
         justifyContent: 'center',
         gap: 6,
         flexWrap: 'wrap',
-        '& > *': { minWidth: 0, flexBasis: 120 },
+        '& > *': { minWidth: 0, flexBasis: 200 },
       }}
     >
       {['sm', 'md', 'lg'].map((size) => (
@@ -27,7 +27,12 @@ export default function SizesList() {
           <List
             size={size}
             variant="outlined"
-            sx={{ borderRadius: 'sm', maxWidth: 240 }}
+            sx={{
+              borderRadius: 'sm',
+              maxWidth: 300,
+              boxShadow: 'sm',
+              bgcolor: 'background.body',
+            }}
           >
             <ListItem>
               <ListItemButton>
diff --git a/docs/data/joy/components/list/StickyList.js b/docs/data/joy/components/list/StickyList.js
index 43d2e3f85ad174..bda4f5a122fdcf 100644
--- a/docs/data/joy/components/list/StickyList.js
+++ b/docs/data/joy/components/list/StickyList.js
@@ -8,10 +8,12 @@ import Sheet from '@mui/joy/Sheet';
 export default function StickyList() {
   return (
     <Sheet
+      variant="outlined"
       sx={{
         width: 320,
         maxHeight: 300,
         overflow: 'auto',
+        borderRadius: 'sm',
       }}
     >
       <List>
diff --git a/docs/data/joy/components/list/list.md b/docs/data/joy/components/list/list.md
index ca6460c7d68e10..306b76c03c6ecb 100644
--- a/docs/data/joy/components/list/list.md
+++ b/docs/data/joy/components/list/list.md
@@ -20,7 +20,7 @@ Joy UI provides four list-related components:
 - [`ListDivider`](#divider): A separator between list items.
 - [`ListSubheader`](#nested-list): A label for a nested list.
 
-{{"demo": "ListUsage.js", "hideToolbar": true}}
+{{"demo": "ListUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 ## Component
 
diff --git a/docs/data/joy/components/menu/MenuIconSideNavExample.js b/docs/data/joy/components/menu/MenuIconSideNavExample.js
index 668c85f269aea0..109f82b1df3065 100644
--- a/docs/data/joy/components/menu/MenuIconSideNavExample.js
+++ b/docs/data/joy/components/menu/MenuIconSideNavExample.js
@@ -126,7 +126,7 @@ export default function MenuIconSideNavExample() {
     }, 200);
   };
   return (
-    <Sheet sx={{ borderRadius: 'sm', py: 1, mr: 20 }}>
+    <Sheet sx={{ borderRadius: 'sm', py: 1, mr: 20, bgcolor: 'background.body' }}>
       <List>
         <ListItem>
           <MenuButton
diff --git a/docs/data/joy/components/menu/menu.md b/docs/data/joy/components/menu/menu.md
index e9fbe0809025cc..af6ceecc72744a 100644
--- a/docs/data/joy/components/menu/menu.md
+++ b/docs/data/joy/components/menu/menu.md
@@ -18,7 +18,7 @@ Joy UI provides three menu-related components:
 - `MenuItem`: A menu item which reuses the styles from [`ListItemButton`](/joy-ui/react-list/).
 - `MenuList`: A standalone listbox for composition usage. It also reuses the styles from [`List`](/joy-ui/react-list/).
 
-{{"demo": "MenuUsage.js", "hideToolbar": true}}
+{{"demo": "MenuUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 ## Component
 
@@ -108,4 +108,4 @@ It supports mouse and keyboard navigation between menu items.
 
 This example is quite common in dashboard applications where the side navigation is shrunk into icons, and the menu is triggered by hovering them.
 
-{{"demo": "MenuIconSideNavExample.js", "bg": true}}
+{{"demo": "MenuIconSideNavExample.js"}}
diff --git a/docs/data/joy/components/modal/modal.md b/docs/data/joy/components/modal/modal.md
index 82437c88372e56..59b2bff08b96b4 100644
--- a/docs/data/joy/components/modal/modal.md
+++ b/docs/data/joy/components/modal/modal.md
@@ -17,7 +17,7 @@ Joy UI provides three modal-related components:
 - [`ModalClose`](#dialog): A button for closing the modal.
 - [`ModalDialog`](#dialog): A component for rendering a modal dialog.
 
-{{"demo": "ModalUsage.js", "hideToolbar": true}}
+{{"demo": "ModalUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 ### Features
 
diff --git a/docs/data/joy/components/radio/ExamplePaymentChannels.js b/docs/data/joy/components/radio/ExamplePaymentChannels.js
index ed1c973e50ddc2..557161d2e4ea2b 100644
--- a/docs/data/joy/components/radio/ExamplePaymentChannels.js
+++ b/docs/data/joy/components/radio/ExamplePaymentChannels.js
@@ -56,6 +56,7 @@ export default function ExamplePaymentChannels() {
           sx={{
             borderRadius: 'sm',
             boxShadow: 'sm',
+            bgcolor: 'background.body',
           }}
         >
           {['Credit Card', 'Paypal', 'QR Code'].map((value, index) => (
diff --git a/docs/data/joy/components/radio/IconlessRadio.js b/docs/data/joy/components/radio/IconlessRadio.js
index 9071be7e837884..9cc4b42b0e8c29 100644
--- a/docs/data/joy/components/radio/IconlessRadio.js
+++ b/docs/data/joy/components/radio/IconlessRadio.js
@@ -27,7 +27,15 @@ export default function IconlessRadio() {
         sx={{ gap: 1.5 }}
       >
         {['512GB', '1TB', '2TB'].map((value) => (
-          <Sheet key={value} sx={{ p: 2, borderRadius: 'md' }}>
+          <Sheet
+            key={value}
+            sx={{
+              p: 2,
+              borderRadius: 'md',
+              boxShadow: 'sm',
+              bgcolor: 'background.body',
+            }}
+          >
             <Radio
               label={`${value} SSD storage`}
               overlay
diff --git a/docs/data/joy/components/radio/IconsRadio.js b/docs/data/joy/components/radio/IconsRadio.js
index f9448c0cbf6377..41f3853651f16e 100644
--- a/docs/data/joy/components/radio/IconsRadio.js
+++ b/docs/data/joy/components/radio/IconsRadio.js
@@ -42,7 +42,8 @@ export default function IconsRadio() {
           variant="outlined"
           sx={{
             borderRadius: 'md',
-            bgcolor: 'background.level1',
+            bgcolor: 'background.body',
+            boxShadow: 'sm',
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
diff --git a/docs/data/joy/components/radio/OverlayRadio.js b/docs/data/joy/components/radio/OverlayRadio.js
index 32d9fa6882deb5..0a38a45abf1db2 100644
--- a/docs/data/joy/components/radio/OverlayRadio.js
+++ b/docs/data/joy/components/radio/OverlayRadio.js
@@ -30,6 +30,7 @@ export default function OverlayRadio() {
               alignItems: 'start',
               boxShadow: 'sm',
               borderRadius: 'md',
+              bgcolor: 'background.body',
               gap: 1.5,
             }}
           >
diff --git a/docs/data/joy/components/radio/RadioPositionEnd.js b/docs/data/joy/components/radio/RadioPositionEnd.js
index c84a4c957b82bb..d0efa8187ee17b 100644
--- a/docs/data/joy/components/radio/RadioPositionEnd.js
+++ b/docs/data/joy/components/radio/RadioPositionEnd.js
@@ -20,8 +20,12 @@ export default function RadioPositionEnd() {
           '--List-decorator-size': '32px',
         }}
       >
-        {['Individual', 'Team', 'Interprise'].map((item, index) => (
-          <ListItem variant="outlined" key={item}>
+        {['Individual', 'Team', 'Enterprise'].map((item, index) => (
+          <ListItem
+            variant="outlined"
+            key={item}
+            sx={{ boxShadow: 'sm', bgcolor: 'background.body' }}
+          >
             <ListItemDecorator>
               {[<Person />, <People />, <Apartment />][index]}
             </ListItemDecorator>
diff --git a/docs/data/joy/components/radio/RadioUsage.js b/docs/data/joy/components/radio/RadioUsage.js
index 0d0c7540c2b720..7924106aa0b134 100644
--- a/docs/data/joy/components/radio/RadioUsage.js
+++ b/docs/data/joy/components/radio/RadioUsage.js
@@ -15,13 +15,13 @@ export default function RadioUsage() {
         {
           propName: 'variant',
           knob: 'select',
-          defaultValue: 'outlined',
+          defaultValue: 'soft',
           options: ['plain', 'outlined', 'soft', 'solid'],
         },
         {
           propName: 'color',
           knob: 'color',
-          defaultValue: 'neutral',
+          defaultValue: 'primary',
         },
         {
           propName: 'size',
diff --git a/docs/data/joy/components/radio/radio.md b/docs/data/joy/components/radio/radio.md
index e10bb8943ef6a7..925df4bdbd5209 100644
--- a/docs/data/joy/components/radio/radio.md
+++ b/docs/data/joy/components/radio/radio.md
@@ -15,7 +15,7 @@ The `Radio` component is the one to be used when you want to allow users to sele
 To allow multiple selection, use the `Checkbox` instead.
 For more in-depth about when to use each, visit [the NNg's documentation](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/).
 
-{{"demo": "RadioUsage.js", "hideToolbar": true}}
+{{"demo": "RadioUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 :::success
 To learn how to add more variants or sizes to the component, check out the [Themed components](/joy-ui/customization/themed-components/) page.
@@ -139,7 +139,7 @@ Visit the [WAI-ARIA documentation](https://www.w3.org/WAI/ARIA/apg/patterns/radi
 
 A clone of an [inspiration](https://dribbble.com/shots/11239824-Radio-button-groups) that demonstrate the composition of the components.
 
-{{"demo": "ExampleTiers.js", "bg": true}}
+{{"demo": "ExampleTiers.js"}}
 
 ### Alignment buttons
 
diff --git a/docs/data/joy/components/select/select.md b/docs/data/joy/components/select/select.md
index 2a85dc3cf4cb14..56526c821e46eb 100644
--- a/docs/data/joy/components/select/select.md
+++ b/docs/data/joy/components/select/select.md
@@ -14,7 +14,7 @@ unstyled: /base/react-select/
 
 The `Select` component is used to trigger a popup that displays a list of `Option` components.
 
-{{"demo": "SelectUsage.js", "hideToolbar": true}}
+{{"demo": "SelectUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 :::success
 To learn how to add more variants or sizes to the component, check out the [Themed components](/joy-ui/customization/themed-components/) page.
diff --git a/docs/data/joy/components/sheet/SheetUsage.js b/docs/data/joy/components/sheet/SheetUsage.js
index 70c796699aa0c9..7b69784fec98cd 100644
--- a/docs/data/joy/components/sheet/SheetUsage.js
+++ b/docs/data/joy/components/sheet/SheetUsage.js
@@ -27,6 +27,7 @@ export default function SheetUsage() {
             width: 250,
             height: 200,
             m: 1,
+            mb: 4,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
diff --git a/docs/data/joy/components/sheet/sheet.md b/docs/data/joy/components/sheet/sheet.md
index 42da506688129f..6490e0f528e50c 100644
--- a/docs/data/joy/components/sheet/sheet.md
+++ b/docs/data/joy/components/sheet/sheet.md
@@ -12,7 +12,7 @@ title: React Sheet component
 The `Sheet` container is a generic container.
 It's a sibling to the [`Box`](/system/react-box/) component, and equivalent to Material UI's [`Paper`](/material-ui/react-paper/), with the difference being that it supports Joy UI's global variants out of the box.
 
-{{"demo": "SheetUsage.js", "hideToolbar": true}}
+{{"demo": "SheetUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
diff --git a/docs/data/joy/components/slider/SliderUsage.js b/docs/data/joy/components/slider/SliderUsage.js
index 23f05690770409..0eed2b0ec7685c 100644
--- a/docs/data/joy/components/slider/SliderUsage.js
+++ b/docs/data/joy/components/slider/SliderUsage.js
@@ -51,8 +51,6 @@ export default function SliderUsage() {
             p: 2,
             lineHeight: 0,
             borderRadius: 'sm',
-            bgcolor:
-              props.variant === 'plain' ? 'background.level3' : 'background.surface',
           }}
         >
           <Slider defaultValue={3} max={10} {...props} />
diff --git a/docs/data/joy/components/slider/slider.md b/docs/data/joy/components/slider/slider.md
index efb8f76bc5bcce..6ecbbe5f588214 100644
--- a/docs/data/joy/components/slider/slider.md
+++ b/docs/data/joy/components/slider/slider.md
@@ -13,7 +13,7 @@ unstyled: /base/react-slider/
 
 Sliders are ideal for interface controls that benefit from a visual representation of adjustable content, such as volume or brightness settings, or for applying image filters such as gradients or saturation.
 
-{{"demo": "SliderUsage.js", "hideToolbar": true}}
+{{"demo": "SliderUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 :::success
 To learn how to add more variants or sizes to the component, check out [Themed components](/joy-ui/customization/themed-components/).
diff --git a/docs/data/joy/components/switch/switch.md b/docs/data/joy/components/switch/switch.md
index 9ac70db50c0aad..169224fb8d0ea7 100644
--- a/docs/data/joy/components/switch/switch.md
+++ b/docs/data/joy/components/switch/switch.md
@@ -15,7 +15,7 @@ Switches are very commonly used for adjusting settings on mobile.
 The option that the switch controls, as well as the state it's in,
 should be made clear from the corresponding inline label.
 
-{{"demo": "SwitchUsage.js", "hideToolbar": true}}
+{{"demo": "SwitchUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 :::success
 To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
diff --git a/docs/data/joy/components/tabs/TabDisabled.js b/docs/data/joy/components/tabs/TabDisabled.js
index d1695e9dc28e40..c2c759e35ae056 100644
--- a/docs/data/joy/components/tabs/TabDisabled.js
+++ b/docs/data/joy/components/tabs/TabDisabled.js
@@ -5,7 +5,7 @@ import Tab from '@mui/joy/Tab';
 
 export default function TabDisabled() {
   return (
-    <Tabs aria-label="Disabled tabs" defaultValue={0}>
+    <Tabs aria-label="Disabled tabs" defaultValue={0} sx={{ borderRadius: 'lg' }}>
       <TabList>
         <Tab>First tab</Tab>
         <Tab disabled>Second tab</Tab>
diff --git a/docs/data/joy/components/tabs/TabDisabled.tsx b/docs/data/joy/components/tabs/TabDisabled.tsx
index d1695e9dc28e40..c2c759e35ae056 100644
--- a/docs/data/joy/components/tabs/TabDisabled.tsx
+++ b/docs/data/joy/components/tabs/TabDisabled.tsx
@@ -5,7 +5,7 @@ import Tab from '@mui/joy/Tab';
 
 export default function TabDisabled() {
   return (
-    <Tabs aria-label="Disabled tabs" defaultValue={0}>
+    <Tabs aria-label="Disabled tabs" defaultValue={0} sx={{ borderRadius: 'lg' }}>
       <TabList>
         <Tab>First tab</Tab>
         <Tab disabled>Second tab</Tab>
diff --git a/docs/data/joy/components/tabs/TabDisabled.tsx.preview b/docs/data/joy/components/tabs/TabDisabled.tsx.preview
index fb178b27ee297c..5c90d27f5570fe 100644
--- a/docs/data/joy/components/tabs/TabDisabled.tsx.preview
+++ b/docs/data/joy/components/tabs/TabDisabled.tsx.preview
@@ -1,4 +1,4 @@
-<Tabs aria-label="Disabled tabs" defaultValue={0}>
+<Tabs aria-label="Disabled tabs" defaultValue={0} sx={{ borderRadius: 'lg' }}>
   <TabList>
     <Tab>First tab</Tab>
     <Tab disabled>Second tab</Tab>
diff --git a/docs/data/joy/components/tabs/TabsBasic.js b/docs/data/joy/components/tabs/TabsBasic.js
index 85a0ba2db744b7..7700d27fd85703 100644
--- a/docs/data/joy/components/tabs/TabsBasic.js
+++ b/docs/data/joy/components/tabs/TabsBasic.js
@@ -6,19 +6,19 @@ import TabPanel from '@mui/joy/TabPanel';
 
 export default function TabsBasic() {
   return (
-    <Tabs aria-label="Basic tabs" defaultValue={0}>
+    <Tabs aria-label="Basic tabs" defaultValue={0} sx={{ borderRadius: 'lg' }}>
       <TabList>
         <Tab>First tab</Tab>
         <Tab>Second tab</Tab>
         <Tab>Third tab</Tab>
       </TabList>
-      <TabPanel value={0}>
+      <TabPanel value={0} sx={{ p: 2 }}>
         <b>First</b> tab panel
       </TabPanel>
-      <TabPanel value={1}>
+      <TabPanel value={1} sx={{ p: 2 }}>
         <b>Second</b> tab panel
       </TabPanel>
-      <TabPanel value={2}>
+      <TabPanel value={2} sx={{ p: 2 }}>
         <b>Third</b> tab panel
       </TabPanel>
     </Tabs>
diff --git a/docs/data/joy/components/tabs/TabsBasic.tsx b/docs/data/joy/components/tabs/TabsBasic.tsx
index 85a0ba2db744b7..7700d27fd85703 100644
--- a/docs/data/joy/components/tabs/TabsBasic.tsx
+++ b/docs/data/joy/components/tabs/TabsBasic.tsx
@@ -6,19 +6,19 @@ import TabPanel from '@mui/joy/TabPanel';
 
 export default function TabsBasic() {
   return (
-    <Tabs aria-label="Basic tabs" defaultValue={0}>
+    <Tabs aria-label="Basic tabs" defaultValue={0} sx={{ borderRadius: 'lg' }}>
       <TabList>
         <Tab>First tab</Tab>
         <Tab>Second tab</Tab>
         <Tab>Third tab</Tab>
       </TabList>
-      <TabPanel value={0}>
+      <TabPanel value={0} sx={{ p: 2 }}>
         <b>First</b> tab panel
       </TabPanel>
-      <TabPanel value={1}>
+      <TabPanel value={1} sx={{ p: 2 }}>
         <b>Second</b> tab panel
       </TabPanel>
-      <TabPanel value={2}>
+      <TabPanel value={2} sx={{ p: 2 }}>
         <b>Third</b> tab panel
       </TabPanel>
     </Tabs>
diff --git a/docs/data/joy/components/tabs/TabsBasic.tsx.preview b/docs/data/joy/components/tabs/TabsBasic.tsx.preview
index 088ef73b86168b..35e69f3f6771f4 100644
--- a/docs/data/joy/components/tabs/TabsBasic.tsx.preview
+++ b/docs/data/joy/components/tabs/TabsBasic.tsx.preview
@@ -1,16 +1,16 @@
-<Tabs aria-label="Basic tabs" defaultValue={0}>
+<Tabs aria-label="Basic tabs" defaultValue={0} sx={{ borderRadius: 'lg' }}>
   <TabList>
     <Tab>First tab</Tab>
     <Tab>Second tab</Tab>
     <Tab>Third tab</Tab>
   </TabList>
-  <TabPanel value={0}>
+  <TabPanel value={0} sx={{ p: 2 }}>
     <b>First</b> tab panel
   </TabPanel>
-  <TabPanel value={1}>
+  <TabPanel value={1} sx={{ p: 2 }}>
     <b>Second</b> tab panel
   </TabPanel>
-  <TabPanel value={2}>
+  <TabPanel value={2} sx={{ p: 2 }}>
     <b>Third</b> tab panel
   </TabPanel>
 </Tabs>
\ No newline at end of file
diff --git a/docs/data/joy/components/tabs/TabsBottomNavExample.js b/docs/data/joy/components/tabs/TabsBottomNavExample.js
index 96cea58e69afe7..449a87bf12f9ba 100644
--- a/docs/data/joy/components/tabs/TabsBottomNavExample.js
+++ b/docs/data/joy/components/tabs/TabsBottomNavExample.js
@@ -20,7 +20,7 @@ export default function TabsBottomNavExample() {
         p: 3,
         py: 5,
         borderRadius: 'sm',
-        bgcolor: `${colors[index]}.400`,
+        bgcolor: `${colors[index]}.600`,
       }}
     >
       <Tabs
@@ -29,8 +29,7 @@ export default function TabsBottomNavExample() {
         value={index}
         onChange={(event, value) => setIndex(value)}
         sx={(theme) => ({
-          borderBottomLeftRadius: '1rem',
-          borderBottomRightRadius: '1rem',
+          borderRadius: 'xl',
           maxWidth: 400,
           mx: 'auto',
           boxShadow: theme.shadow.sm,
diff --git a/docs/data/joy/components/tabs/TabsBottomNavExample.tsx b/docs/data/joy/components/tabs/TabsBottomNavExample.tsx
index 7b0a080e6a2253..ff4c8c5ad99968 100644
--- a/docs/data/joy/components/tabs/TabsBottomNavExample.tsx
+++ b/docs/data/joy/components/tabs/TabsBottomNavExample.tsx
@@ -20,7 +20,7 @@ export default function TabsBottomNavExample() {
         p: 3,
         py: 5,
         borderRadius: 'sm',
-        bgcolor: `${colors[index]}.400`,
+        bgcolor: `${colors[index]}.600`,
       }}
     >
       <Tabs
@@ -29,8 +29,7 @@ export default function TabsBottomNavExample() {
         value={index}
         onChange={(event, value) => setIndex(value as number)}
         sx={(theme) => ({
-          borderBottomLeftRadius: '1rem',
-          borderBottomRightRadius: '1rem',
+          borderRadius: 'xl',
           maxWidth: 400,
           mx: 'auto',
           boxShadow: theme.shadow.sm,
diff --git a/docs/data/joy/components/tabs/TabsIcon.js b/docs/data/joy/components/tabs/TabsIcon.js
index d0201996a043ac..66468d48e80194 100644
--- a/docs/data/joy/components/tabs/TabsIcon.js
+++ b/docs/data/joy/components/tabs/TabsIcon.js
@@ -8,7 +8,7 @@ import PersonPinIcon from '@mui/icons-material/PersonPin';
 
 export default function TabsIcon() {
   return (
-    <Tabs aria-label="Icon tabs" defaultValue={0}>
+    <Tabs aria-label="Icon tabs" defaultValue={0} sx={{ borderRadius: 'lg' }}>
       <TabList>
         <Tab>
           <PhoneIcon />
diff --git a/docs/data/joy/components/tabs/TabsIcon.tsx b/docs/data/joy/components/tabs/TabsIcon.tsx
index d0201996a043ac..66468d48e80194 100644
--- a/docs/data/joy/components/tabs/TabsIcon.tsx
+++ b/docs/data/joy/components/tabs/TabsIcon.tsx
@@ -8,7 +8,7 @@ import PersonPinIcon from '@mui/icons-material/PersonPin';
 
 export default function TabsIcon() {
   return (
-    <Tabs aria-label="Icon tabs" defaultValue={0}>
+    <Tabs aria-label="Icon tabs" defaultValue={0} sx={{ borderRadius: 'lg' }}>
       <TabList>
         <Tab>
           <PhoneIcon />
diff --git a/docs/data/joy/components/tabs/TabsIcon.tsx.preview b/docs/data/joy/components/tabs/TabsIcon.tsx.preview
index 5ee4abdd0e0f67..2ee615ae539293 100644
--- a/docs/data/joy/components/tabs/TabsIcon.tsx.preview
+++ b/docs/data/joy/components/tabs/TabsIcon.tsx.preview
@@ -1,4 +1,4 @@
-<Tabs aria-label="Icon tabs" defaultValue={0}>
+<Tabs aria-label="Icon tabs" defaultValue={0} sx={{ borderRadius: 'lg' }}>
   <TabList>
     <Tab>
       <PhoneIcon />
diff --git a/docs/data/joy/components/tabs/TabsIconWithText.js b/docs/data/joy/components/tabs/TabsIconWithText.js
index d797bf3cc799f9..1e10c2dcd06480 100644
--- a/docs/data/joy/components/tabs/TabsIconWithText.js
+++ b/docs/data/joy/components/tabs/TabsIconWithText.js
@@ -10,7 +10,11 @@ import PersonPinIcon from '@mui/icons-material/PersonPin';
 export default function TabsIconWithText() {
   return (
     <div>
-      <Tabs aria-label="Icon tabs" defaultValue={0} sx={{ mb: 2 }}>
+      <Tabs
+        aria-label="Icon tabs"
+        defaultValue={0}
+        sx={{ mb: 2, borderRadius: 'lg' }}
+      >
         <TabList>
           <Tab>
             <ListItemDecorator>
@@ -32,7 +36,7 @@ export default function TabsIconWithText() {
           </Tab>
         </TabList>
       </Tabs>
-      <Tabs aria-label="Icon tabs" defaultValue={0}>
+      <Tabs aria-label="Icon tabs" defaultValue={0} sx={{ borderRadius: 'lg' }}>
         <TabList>
           <Tab orientation="vertical">
             <ListItemDecorator>
diff --git a/docs/data/joy/components/tabs/TabsIconWithText.tsx b/docs/data/joy/components/tabs/TabsIconWithText.tsx
index d797bf3cc799f9..1e10c2dcd06480 100644
--- a/docs/data/joy/components/tabs/TabsIconWithText.tsx
+++ b/docs/data/joy/components/tabs/TabsIconWithText.tsx
@@ -10,7 +10,11 @@ import PersonPinIcon from '@mui/icons-material/PersonPin';
 export default function TabsIconWithText() {
   return (
     <div>
-      <Tabs aria-label="Icon tabs" defaultValue={0} sx={{ mb: 2 }}>
+      <Tabs
+        aria-label="Icon tabs"
+        defaultValue={0}
+        sx={{ mb: 2, borderRadius: 'lg' }}
+      >
         <TabList>
           <Tab>
             <ListItemDecorator>
@@ -32,7 +36,7 @@ export default function TabsIconWithText() {
           </Tab>
         </TabList>
       </Tabs>
-      <Tabs aria-label="Icon tabs" defaultValue={0}>
+      <Tabs aria-label="Icon tabs" defaultValue={0} sx={{ borderRadius: 'lg' }}>
         <TabList>
           <Tab orientation="vertical">
             <ListItemDecorator>
diff --git a/docs/data/joy/components/tabs/TabsPageExample.js b/docs/data/joy/components/tabs/TabsPageExample.js
index e7d6b1e7f8e4a4..88b9b0258a6b79 100644
--- a/docs/data/joy/components/tabs/TabsPageExample.js
+++ b/docs/data/joy/components/tabs/TabsPageExample.js
@@ -17,7 +17,6 @@ export default function TabsPageExample() {
         bgcolor: 'background.body',
         flexGrow: 1,
         m: -3,
-        p: 3,
         overflowX: 'hidden',
         borderRadius: 'md',
       }}
@@ -26,11 +25,15 @@ export default function TabsPageExample() {
         aria-label="Pipeline"
         value={index}
         onChange={(event, value) => setIndex(value)}
-        sx={{ '--Tabs-gap': '0px', maxWidth: 400, mx: 'auto' }}
+        sx={{ '--Tabs-gap': '0px' }}
       >
         <TabList
           variant="plain"
           sx={{
+            width: '100%',
+            maxWidth: 400,
+            mx: 'auto',
+            pt: 2,
             alignSelf: 'flex-start',
             [`& .${tabClasses.root}`]: {
               bgcolor: 'transparent',
@@ -93,40 +96,40 @@ export default function TabsPageExample() {
         />
         <Box
           sx={(theme) => ({
-            '--bg': theme.vars.palette.background.level1,
+            '--bg': theme.vars.palette.background.surface,
             background: 'var(--bg)',
             boxShadow: '0 0 0 100vmax var(--bg)',
             clipPath: 'inset(0 -100vmax)',
-            px: 1.5,
+            px: 4,
             py: 2,
           })}
         >
           <TabPanel value={0}>
             <Typography
-              level="h1"
+              level="h2"
               component="div"
-              fontSize="xl2"
+              fontSize="lg"
               mb={2}
-              textColor="text.secondary"
+              textColor="text.primary"
             >
-              Deals
+              Deals panel
             </Typography>
           </TabPanel>
           <TabPanel value={1}>
             <Typography
-              level="h1"
+              level="h2"
               component="div"
-              fontSize="xl2"
+              fontSize="lg"
               mb={2}
-              textColor="text.secondary"
+              textColor="text.primary"
             >
-              Library
+              Library panel
             </Typography>
           </TabPanel>
           <TabPanel value={2}>
             <Input
               autoFocus
-              placeholder="type a library..."
+              placeholder="Type in third panel..."
               startDecorator={<SearchRounded />}
             />
           </TabPanel>
diff --git a/docs/data/joy/components/tabs/TabsPageExample.tsx b/docs/data/joy/components/tabs/TabsPageExample.tsx
index c49cafc73b4c30..4b9dbb1d42b305 100644
--- a/docs/data/joy/components/tabs/TabsPageExample.tsx
+++ b/docs/data/joy/components/tabs/TabsPageExample.tsx
@@ -17,7 +17,6 @@ export default function TabsPageExample() {
         bgcolor: 'background.body',
         flexGrow: 1,
         m: -3,
-        p: 3,
         overflowX: 'hidden',
         borderRadius: 'md',
       }}
@@ -26,11 +25,15 @@ export default function TabsPageExample() {
         aria-label="Pipeline"
         value={index}
         onChange={(event, value) => setIndex(value as number)}
-        sx={{ '--Tabs-gap': '0px', maxWidth: 400, mx: 'auto' }}
+        sx={{ '--Tabs-gap': '0px' }}
       >
         <TabList
           variant="plain"
           sx={{
+            width: '100%',
+            maxWidth: 400,
+            mx: 'auto',
+            pt: 2,
             alignSelf: 'flex-start',
             [`& .${tabClasses.root}`]: {
               bgcolor: 'transparent',
@@ -93,40 +96,40 @@ export default function TabsPageExample() {
         />
         <Box
           sx={(theme) => ({
-            '--bg': theme.vars.palette.background.level1,
+            '--bg': theme.vars.palette.background.surface,
             background: 'var(--bg)',
             boxShadow: '0 0 0 100vmax var(--bg)',
             clipPath: 'inset(0 -100vmax)',
-            px: 1.5,
+            px: 4,
             py: 2,
           })}
         >
           <TabPanel value={0}>
             <Typography
-              level="h1"
+              level="h2"
               component="div"
-              fontSize="xl2"
+              fontSize="lg"
               mb={2}
-              textColor="text.secondary"
+              textColor="text.primary"
             >
-              Deals
+              Deals panel
             </Typography>
           </TabPanel>
           <TabPanel value={1}>
             <Typography
-              level="h1"
+              level="h2"
               component="div"
-              fontSize="xl2"
+              fontSize="lg"
               mb={2}
-              textColor="text.secondary"
+              textColor="text.primary"
             >
-              Library
+              Library panel
             </Typography>
           </TabPanel>
           <TabPanel value={2}>
             <Input
               autoFocus
-              placeholder="type a library..."
+              placeholder="Type in third panel..."
               startDecorator={<SearchRounded />}
             />
           </TabPanel>
diff --git a/docs/data/joy/components/tabs/TabsPricingExample.js b/docs/data/joy/components/tabs/TabsPricingExample.js
index c497338b232af9..9f4424223becac 100644
--- a/docs/data/joy/components/tabs/TabsPricingExample.js
+++ b/docs/data/joy/components/tabs/TabsPricingExample.js
@@ -11,11 +11,17 @@ export default function TabsPricingExample() {
       size="sm"
       aria-label="Pricing plan"
       defaultValue={0}
-      sx={{ width: 343, '--Tabs-gap': '0px' }}
+      sx={(theme) => ({
+        width: 343,
+        '--Tabs-gap': '0px',
+        borderRadius: 'lg',
+        boxShadow: 'sm',
+        overflow: 'auto',
+        border: `1px solid ${theme.vars.palette.divider}`,
+      })}
     >
       <TabList
-        variant="outlined"
-        sx={(theme) => ({
+        sx={{
           '--List-item-radius': '0px',
           borderRadius: 0,
           [`& .${tabClasses.root}`]: {
@@ -35,21 +41,18 @@ export default function TabsPricingExample() {
               height: 2,
               bgcolor: 'primary.400',
             },
-            '&:not(:first-of-type)': {
-              borderLeft: `1px solid ${theme.vars.palette.divider}`,
-            },
             [`&.${tabClasses.focusVisible}`]: {
               outlineOffset: '-3px',
             },
           },
-        })}
+        }}
       >
         <Tab sx={{ py: 1.5 }}>Community</Tab>
         <Tab>Pro</Tab>
         <Tab>Premium</Tab>
       </TabList>
-      <TabPanel value={0}>
-        <Typography level="inherit" mt={2}>
+      <TabPanel value={0} sx={{ p: 3 }}>
+        <Typography level="inherit">
           Get started with the industry-standard React UI library, MIT-licensed.
         </Typography>
         <Typography textColor="success.400" fontSize="xl3" fontWeight="xl" my={1}>
@@ -59,8 +62,8 @@ export default function TabsPricingExample() {
           </Typography>
         </Typography>
       </TabPanel>
-      <TabPanel value={1}>
-        <Typography level="inherit" mt={2}>
+      <TabPanel value={1} sx={{ p: 3 }}>
+        <Typography level="inherit">
           Best for professional developers building enterprise or data-rich
           applications.
         </Typography>
@@ -71,8 +74,8 @@ export default function TabsPricingExample() {
           </Typography>
         </Typography>
       </TabPanel>
-      <TabPanel value={2}>
-        <Typography level="inherit" mt={2}>
+      <TabPanel value={2} sx={{ p: 3 }}>
+        <Typography level="inherit">
           The most advanced features for data-rich applications, as well as the
           highest priority for support.
         </Typography>
diff --git a/docs/data/joy/components/tabs/TabsPricingExample.tsx b/docs/data/joy/components/tabs/TabsPricingExample.tsx
index c497338b232af9..9f4424223becac 100644
--- a/docs/data/joy/components/tabs/TabsPricingExample.tsx
+++ b/docs/data/joy/components/tabs/TabsPricingExample.tsx
@@ -11,11 +11,17 @@ export default function TabsPricingExample() {
       size="sm"
       aria-label="Pricing plan"
       defaultValue={0}
-      sx={{ width: 343, '--Tabs-gap': '0px' }}
+      sx={(theme) => ({
+        width: 343,
+        '--Tabs-gap': '0px',
+        borderRadius: 'lg',
+        boxShadow: 'sm',
+        overflow: 'auto',
+        border: `1px solid ${theme.vars.palette.divider}`,
+      })}
     >
       <TabList
-        variant="outlined"
-        sx={(theme) => ({
+        sx={{
           '--List-item-radius': '0px',
           borderRadius: 0,
           [`& .${tabClasses.root}`]: {
@@ -35,21 +41,18 @@ export default function TabsPricingExample() {
               height: 2,
               bgcolor: 'primary.400',
             },
-            '&:not(:first-of-type)': {
-              borderLeft: `1px solid ${theme.vars.palette.divider}`,
-            },
             [`&.${tabClasses.focusVisible}`]: {
               outlineOffset: '-3px',
             },
           },
-        })}
+        }}
       >
         <Tab sx={{ py: 1.5 }}>Community</Tab>
         <Tab>Pro</Tab>
         <Tab>Premium</Tab>
       </TabList>
-      <TabPanel value={0}>
-        <Typography level="inherit" mt={2}>
+      <TabPanel value={0} sx={{ p: 3 }}>
+        <Typography level="inherit">
           Get started with the industry-standard React UI library, MIT-licensed.
         </Typography>
         <Typography textColor="success.400" fontSize="xl3" fontWeight="xl" my={1}>
@@ -59,8 +62,8 @@ export default function TabsPricingExample() {
           </Typography>
         </Typography>
       </TabPanel>
-      <TabPanel value={1}>
-        <Typography level="inherit" mt={2}>
+      <TabPanel value={1} sx={{ p: 3 }}>
+        <Typography level="inherit">
           Best for professional developers building enterprise or data-rich
           applications.
         </Typography>
@@ -71,8 +74,8 @@ export default function TabsPricingExample() {
           </Typography>
         </Typography>
       </TabPanel>
-      <TabPanel value={2}>
-        <Typography level="inherit" mt={2}>
+      <TabPanel value={2} sx={{ p: 3 }}>
+        <Typography level="inherit">
           The most advanced features for data-rich applications, as well as the
           highest priority for support.
         </Typography>
diff --git a/docs/data/joy/components/tabs/TabsUsage.js b/docs/data/joy/components/tabs/TabsUsage.js
index 06801939040ee7..2a884518ad7c00 100644
--- a/docs/data/joy/components/tabs/TabsUsage.js
+++ b/docs/data/joy/components/tabs/TabsUsage.js
@@ -5,6 +5,7 @@ import TabList from '@mui/joy/TabList';
 import Tab from '@mui/joy/Tab';
 
 export default function TabsUsage() {
+  const [index, setIndex] = React.useState(0);
   return (
     <JoyUsageDemo
       componentName="Tabs"
@@ -12,7 +13,7 @@ export default function TabsUsage() {
         {
           propName: 'variant',
           knob: 'select',
-          defaultValue: 'soft',
+          defaultValue: 'outlined',
           options: ['plain', 'outlined', 'soft', 'solid'],
           codeBlockDisplay: false,
         },
@@ -44,11 +45,31 @@ export default function TabsUsage() {
         )
       }
       renderDemo={({ size, ...props }) => (
-        <Tabs size={size} defaultValue={1}>
+        <Tabs
+          size={size}
+          value={index}
+          onChange={(event, value) => setIndex(value)}
+          sx={{ borderRadius: 'lg' }}
+        >
           <TabList {...props}>
-            <Tab value={1}>Tab A</Tab>
-            <Tab value={2}>Tab B</Tab>
-            <Tab value={3}>Tab C</Tab>
+            <Tab
+              variant={index === 0 ? 'soft' : 'plain'}
+              color={index === 0 ? 'primary' : 'neutral'}
+            >
+              Tab A
+            </Tab>
+            <Tab
+              variant={index === 1 ? 'soft' : 'plain'}
+              color={index === 1 ? 'primary' : 'neutral'}
+            >
+              Tab B
+            </Tab>
+            <Tab
+              variant={index === 2 ? 'soft' : 'plain'}
+              color={index === 2 ? 'primary' : 'neutral'}
+            >
+              Tab C
+            </Tab>
           </TabList>
         </Tabs>
       )}
diff --git a/docs/data/joy/components/tabs/TabsVariants.js b/docs/data/joy/components/tabs/TabsVariants.js
index 0dcdd500c7e295..2ece9310e8b59e 100644
--- a/docs/data/joy/components/tabs/TabsVariants.js
+++ b/docs/data/joy/components/tabs/TabsVariants.js
@@ -12,6 +12,7 @@ export default function TabsVariants() {
         aria-label="Plain tabs"
         value={index}
         onChange={(event, value) => setIndex(value)}
+        sx={{ borderRadius: 'lg' }}
       >
         <TabList variant="plain">
           <Tab variant={index === 0 ? 'outlined' : 'plain'}>First tab</Tab>
@@ -24,6 +25,7 @@ export default function TabsVariants() {
         aria-label="Outlined tabs"
         value={index}
         onChange={(event, value) => setIndex(value)}
+        sx={{ borderRadius: 'lg' }}
       >
         <TabList variant="outlined">
           <Tab
@@ -51,6 +53,7 @@ export default function TabsVariants() {
         aria-label="Soft tabs"
         value={index}
         onChange={(event, value) => setIndex(value)}
+        sx={{ borderRadius: 'lg' }}
       >
         <TabList variant="soft">
           <Tab
diff --git a/docs/data/joy/components/tabs/TabsVariants.tsx b/docs/data/joy/components/tabs/TabsVariants.tsx
index 45e9ede4d9cdf9..0a6950e7d3fe1c 100644
--- a/docs/data/joy/components/tabs/TabsVariants.tsx
+++ b/docs/data/joy/components/tabs/TabsVariants.tsx
@@ -12,6 +12,7 @@ export default function TabsVariants() {
         aria-label="Plain tabs"
         value={index}
         onChange={(event, value) => setIndex(value as number)}
+        sx={{ borderRadius: 'lg' }}
       >
         <TabList variant="plain">
           <Tab variant={index === 0 ? 'outlined' : 'plain'}>First tab</Tab>
@@ -24,6 +25,7 @@ export default function TabsVariants() {
         aria-label="Outlined tabs"
         value={index}
         onChange={(event, value) => setIndex(value as number)}
+        sx={{ borderRadius: 'lg' }}
       >
         <TabList variant="outlined">
           <Tab
@@ -51,6 +53,7 @@ export default function TabsVariants() {
         aria-label="Soft tabs"
         value={index}
         onChange={(event, value) => setIndex(value as number)}
+        sx={{ borderRadius: 'lg' }}
       >
         <TabList variant="soft">
           <Tab
diff --git a/docs/data/joy/components/tabs/TabsVertical.js b/docs/data/joy/components/tabs/TabsVertical.js
index 489c4b239b8a50..5382103bb9550e 100644
--- a/docs/data/joy/components/tabs/TabsVertical.js
+++ b/docs/data/joy/components/tabs/TabsVertical.js
@@ -10,20 +10,20 @@ export default function TabsVertical() {
       aria-label="Vertical tabs"
       orientation="vertical"
       defaultValue={0}
-      sx={{ minWidth: 300 }}
+      sx={{ minWidth: 300, borderRadius: 'lg' }}
     >
       <TabList>
         <Tab>First tab</Tab>
         <Tab>Second tab</Tab>
         <Tab>Third tab</Tab>
       </TabList>
-      <TabPanel value={0}>
+      <TabPanel value={0} sx={{ p: 2 }}>
         <b>First</b> tab panel
       </TabPanel>
-      <TabPanel value={1}>
+      <TabPanel value={1} sx={{ p: 2 }}>
         <b>Second</b> tab panel
       </TabPanel>
-      <TabPanel value={2}>
+      <TabPanel value={2} sx={{ p: 2 }}>
         <b>Third</b> tab panel
       </TabPanel>
     </Tabs>
diff --git a/docs/data/joy/components/tabs/TabsVertical.tsx b/docs/data/joy/components/tabs/TabsVertical.tsx
index 489c4b239b8a50..5382103bb9550e 100644
--- a/docs/data/joy/components/tabs/TabsVertical.tsx
+++ b/docs/data/joy/components/tabs/TabsVertical.tsx
@@ -10,20 +10,20 @@ export default function TabsVertical() {
       aria-label="Vertical tabs"
       orientation="vertical"
       defaultValue={0}
-      sx={{ minWidth: 300 }}
+      sx={{ minWidth: 300, borderRadius: 'lg' }}
     >
       <TabList>
         <Tab>First tab</Tab>
         <Tab>Second tab</Tab>
         <Tab>Third tab</Tab>
       </TabList>
-      <TabPanel value={0}>
+      <TabPanel value={0} sx={{ p: 2 }}>
         <b>First</b> tab panel
       </TabPanel>
-      <TabPanel value={1}>
+      <TabPanel value={1} sx={{ p: 2 }}>
         <b>Second</b> tab panel
       </TabPanel>
-      <TabPanel value={2}>
+      <TabPanel value={2} sx={{ p: 2 }}>
         <b>Third</b> tab panel
       </TabPanel>
     </Tabs>
diff --git a/docs/data/joy/components/tabs/tabs.md b/docs/data/joy/components/tabs/tabs.md
index e2b73beffd875e..0f7d82d3f09a8c 100644
--- a/docs/data/joy/components/tabs/tabs.md
+++ b/docs/data/joy/components/tabs/tabs.md
@@ -19,7 +19,7 @@ Joy UI provides four tabs-related components:
 - `Tab`: A button to toggle a selected tab.
 - `TabPanel`: A pane that displays on the screen when its value matches with the selected tab.
 
-{{"demo": "TabsUsage.js", "hideToolbar": true}}
+{{"demo": "TabsUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
@@ -120,7 +120,7 @@ You can use those to customize the component on both the `sx` prop and the theme
 
 {{"demo": "TabsPricingExample.js"}}
 
-### Page tabs
+### Page tabs with chips
 
 {{"demo": "TabsPageExample.js"}}
 
diff --git a/docs/data/joy/components/text-field/text-field.md b/docs/data/joy/components/text-field/text-field.md
index 855766f604e789..5f7d8c11378b70 100644
--- a/docs/data/joy/components/text-field/text-field.md
+++ b/docs/data/joy/components/text-field/text-field.md
@@ -14,7 +14,7 @@ unstyled: /base/react-input/
 Text fields allow users to enter text into a UI.
 They typically appear in forms and dialogs.
 
-{{"demo": "TextFieldUsage.js", "hideToolbar": true}}
+{{"demo": "TextFieldUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 
diff --git a/docs/data/joy/components/textarea/TextareaFormProps.js b/docs/data/joy/components/textarea/TextareaFormProps.js
index f7e560df97e2e0..50e59e8291b7fe 100644
--- a/docs/data/joy/components/textarea/TextareaFormProps.js
+++ b/docs/data/joy/components/textarea/TextareaFormProps.js
@@ -21,7 +21,7 @@ export default function TextareaFormProps() {
         }}
       >
         <Textarea
-          placeholder="Try to submit with empty text!"
+          placeholder="Try to submit with no text!"
           required
           sx={{ mb: 1 }}
         />
diff --git a/docs/data/joy/components/textarea/TextareaRows.js b/docs/data/joy/components/textarea/TextareaRows.js
index 40f7333a0dd6d1..786ce50990f3cc 100644
--- a/docs/data/joy/components/textarea/TextareaRows.js
+++ b/docs/data/joy/components/textarea/TextareaRows.js
@@ -7,7 +7,7 @@ export default function TextareaValidator() {
     <Box sx={{ p: 2 }}>
       <Textarea
         placeholder="Type in here…"
-        defaultValue="Try to put the text more than 4 lines."
+        defaultValue="Try to put text longer than 4 lines."
         minRows={2}
         maxRows={4}
       />
diff --git a/docs/data/joy/components/textarea/TextareaValidation.js b/docs/data/joy/components/textarea/TextareaValidation.js
index 7533bcfd8e56de..8b6584298cc32d 100644
--- a/docs/data/joy/components/textarea/TextareaValidation.js
+++ b/docs/data/joy/components/textarea/TextareaValidation.js
@@ -8,7 +8,7 @@ export default function TextareaValidator() {
       <Textarea
         placeholder="Type in here…"
         error
-        defaultValue="Oh no!, something is definitely wrong."
+        defaultValue="Oh no! Something is definitely wrong."
       />
     </Box>
   );
diff --git a/docs/data/joy/components/textarea/textarea.md b/docs/data/joy/components/textarea/textarea.md
index 3df0acb99eddfb..a426f218a88651 100644
--- a/docs/data/joy/components/textarea/textarea.md
+++ b/docs/data/joy/components/textarea/textarea.md
@@ -13,7 +13,7 @@ unstyled: /base/react-textarea-autosize/
 
 Joy UI's textarea component is built on top of the MUI Base [`TextareaAutoSize`](/base/react-textarea-autosize/) component.
 
-{{"demo": "TextareaUsage.js", "hideToolbar": true}}
+{{"demo": "TextareaUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
diff --git a/docs/data/joy/components/tooltip/tooltip.md b/docs/data/joy/components/tooltip/tooltip.md
index 1f26c35521587e..241c0949cf93ff 100644
--- a/docs/data/joy/components/tooltip/tooltip.md
+++ b/docs/data/joy/components/tooltip/tooltip.md
@@ -11,7 +11,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
 
 ## Introduction
 
-{{"demo": "TooltipUsage.js", "hideToolbar": true}}
+{{"demo": "TooltipUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts
index e002525e5c4f01..7dee416d1f5d33 100644
--- a/docs/data/joy/pages.ts
+++ b/docs/data/joy/pages.ts
@@ -82,7 +82,7 @@ const pages = [
       {
         pathname: '/joy-ui/components/utils',
         subheader: 'utils',
-        children: [{ pathname: '/joy-ui/react-css-baseline' }],
+        children: [{ pathname: '/joy-ui/react-css-baseline', title: 'CSS Baseline' }],
       },
     ],
   },
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 01e1c45e4438b9..31209a107c7be4 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -19,6 +19,7 @@ import { useCodeVariant } from 'docs/src/modules/utils/codeVariant';
 import { CODE_VARIANTS } from 'docs/src/modules/constants';
 import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
 import BrandingProvider from 'docs/src/BrandingProvider';
+import { blue, blueDark, grey } from 'docs/src/modules/brandingTheme';
 
 /**
  * Removes leading spaces (indentation) present in the `.tsx` previews
@@ -203,8 +204,8 @@ const DemoRootMaterial = styled('div', {
             0.5,
           )} 0px, transparent 50%),
         radial-gradient(at 80% 0%, ${theme.palette.primaryDark[700]} 0px, transparent 50%),
-        radial-gradient(at 0% 95%, ${theme.palette.primaryDark[600]} 0px, transparent 50%),
-        radial-gradient(at 0% 20%, ${theme.palette.primaryDark[600]} 0px, transparent 35%),
+        radial-gradient(at 0% 95%, ${theme.palette.primaryDark[700]} 0px, transparent 50%),
+        radial-gradient(at 0% 5%, ${theme.palette.primaryDark[700]} 0px, transparent 35%),
         radial-gradient(at 93% 85%, ${alpha(
           theme.palette.primaryDark[500],
           0.8,
@@ -243,16 +244,19 @@ const DemoRootJoy = joyStyled('div', {
     ...(bg === 'inline' && {
       padding: theme.spacing(0),
     }),
-    ...(hiddenToolbar && {
-      paddingTop: theme.spacing(1),
-    }),
   },
   /* Isolate the demo with an outline. */
   ...(bg === 'outlined' && {
     padding: theme.spacing(3),
-    backgroundColor: theme.vars.palette.background.surface,
-    border: `1px solid`,
-    borderColor: theme.vars.palette.divider,
+    backgroundColor:
+      theme.palette.mode === 'dark' ? alpha(blueDark[800], 0.2) : alpha(grey[50], 0.2),
+    backgroundImage:
+      theme.palette.mode === 'dark'
+        ? `
+      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.10'%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");`
+        : `
+      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");`,
+    border: `1px solid ${theme.palette.mode === 'dark' ? alpha(grey[700], 0.3) : grey[100]}`,
     borderLeftWidth: 0,
     borderRightWidth: 0,
   }),
@@ -261,8 +265,31 @@ const DemoRootJoy = joyStyled('div', {
     padding: theme.spacing(3),
     backgroundColor: theme.vars.palette.background.level2,
   }),
+  /* Mostly meant for introduction demos. */
+  ...(bg === 'gradient' && {
+    padding: theme.spacing(0),
+    overflow: 'auto',
+    backgroundColor: theme.palette.mode === 'dark' ? blueDark[800] : alpha(blue[50], 0.5),
+    border: `1px solid ${
+      theme.palette.mode === 'dark' ? alpha(blueDark[500], 0.7) : alpha(blue[100], 0.5)
+    }`,
+    backgroundImage:
+      theme.palette.mode === 'dark'
+        ? `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 51% 52%, ${alpha(blue[50], 0.5)} 0px, transparent 50%),
+      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");`,
+  }),
   ...(hiddenToolbar && {
-    paddingTop: theme.spacing(3),
+    paddingTop: theme.spacing(0),
   }),
 }));
 
diff --git a/docs/src/modules/components/JoyUsageDemo.tsx b/docs/src/modules/components/JoyUsageDemo.tsx
index 4d01d9a331a13a..a49936b4dd514c 100644
--- a/docs/src/modules/components/JoyUsageDemo.tsx
+++ b/docs/src/modules/components/JoyUsageDemo.tsx
@@ -187,26 +187,23 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
   return (
     <Box
       sx={{
-        mt: 2,
         flexGrow: 1,
         maxWidth: '100%',
         display: 'flex',
         flexDirection: { xs: 'column', md: 'row' },
-        gap: 2,
         '& .markdown-body pre': {
           margin: 0,
-          borderRadius: 'sm',
+          borderRadius: 'md',
         },
       }}
     >
-      <Box sx={{ display: 'flex', flexDirection: 'column', flexGrow: 999, minWidth: 0 }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', flexGrow: 999, minWidth: 0, p: 3 }}>
         <Box
           sx={{
             flexGrow: 1,
             m: 'auto',
             display: 'flex',
             alignItems: 'center',
-            p: 1,
           }}
         >
           {renderDemo(demoProps)}
@@ -227,17 +224,18 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
         </BrandingProvider>
       </Box>
       <Sheet
-        variant="outlined"
         sx={{
           flexShrink: 0,
           gap: 2,
-          p: 2,
-          borderRadius: 'sm',
+          p: 3,
+          background: (theme) => `rgba(${theme.vars.palette.neutral.mainChannel} / 0.1)`,
+          backdropFilter: 'blur(8px)',
+          minWidth: '280px',
         }}
       >
         <Box
           sx={{
-            mb: 1,
+            mb: 2,
             display: 'flex',
             justifyContent: 'space-between',
             alignItems: 'center',
@@ -662,7 +660,7 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
                         <Sheet
                           key={placement}
                           variant="soft"
-                          color="neutral"
+                          color="primary"
                           sx={{
                             position: 'relative',
                             height: '14px',
diff --git a/docs/src/modules/components/JoyVariablesDemo.tsx b/docs/src/modules/components/JoyVariablesDemo.tsx
index e2e80372b87712..816cd17bbdf6f0 100644
--- a/docs/src/modules/components/JoyVariablesDemo.tsx
+++ b/docs/src/modules/components/JoyVariablesDemo.tsx
@@ -135,6 +135,7 @@ export default function JoyVariablesDemo(props: {
           flexBasis: 240,
           flexGrow: 1,
           borderRadius: 'sm',
+          boxShadow: 'sm',
         }}
       >
         <List component="div" sx={{ '--List-padding': '1rem', '--List-divider-gap': '0px' }}>