diff --git a/docs/data/joy/components/autocomplete/autocomplete.md b/docs/data/joy/components/autocomplete/autocomplete.md
index 38ad1ba96c0aee..76752ae8c694ce 100644
--- a/docs/data/joy/components/autocomplete/autocomplete.md
+++ b/docs/data/joy/components/autocomplete/autocomplete.md
@@ -265,6 +265,12 @@ const filterOptions = (options, { inputValue }) => matchSorter(options, inputVal
 <Autocomplete filterOptions={filterOptions} />;
 ```
 
+## CSS variables playground
+
+The Autocomplete component reuses CSS variables from the Input component to give you the consistent customization experience.
+
+{{"demo": "AutocompleteVariables.js", "hideToolbar": true, "bg": "gradient"}}
+
 ## Common examples
 
 ### Hint
@@ -307,12 +313,6 @@ If you would like to prevent the default key handler behavior, you can set the e
 />
 ```
 
-## CSS Variables
-
-The Autocomplete component reuses CSS variables from the Input component to give you the consistent customization experience.
-
-{{"demo": "AutocompleteVariables.js", "hideToolbar": true}}
-
 ## Limitations
 
 ### autocomplete/autofill
diff --git a/docs/data/joy/components/avatar/avatar.md b/docs/data/joy/components/avatar/avatar.md
index 6df65dc0e89519..ff869e3294c58e 100644
--- a/docs/data/joy/components/avatar/avatar.md
+++ b/docs/data/joy/components/avatar/avatar.md
@@ -131,12 +131,12 @@ Combine the Avatar component with the [Badge](/joy-ui/react-badge/) to visually
 
 {{"demo": "BadgeAvatars.js"}}
 
-## CSS variable playground
+## CSS variables playground
 
 Play around with the CSS variables available to the Avatar component to see how the design changes.
 You can use these to customize the component with both the `sx` prop and the theme.
 
-{{"demo": "AvatarGroupVariables.js", "hideToolbar": true }}
+{{"demo": "AvatarGroupVariables.js", "hideToolbar": true, "bg": "gradient"}}
 
 ## Anatomy
 
diff --git a/docs/data/joy/components/breadcrumbs/breadcrumbs.md b/docs/data/joy/components/breadcrumbs/breadcrumbs.md
index d9c17584ac3e36..42bf40566b8e99 100644
--- a/docs/data/joy/components/breadcrumbs/breadcrumbs.md
+++ b/docs/data/joy/components/breadcrumbs/breadcrumbs.md
@@ -65,6 +65,13 @@ The demo below shows how to add an icon to the Link with `startDecorator` and ch
 
 {{"demo": "BreadcrumbsWithIcon.js"}}
 
+## CSS variables playground
+
+Play around with the CSS variables available to the Breadcrumbs component to see how the design changes.
+You can use these to customize the component with both the `sx` prop and the theme.
+
+{{"demo": "BreadcrumbsVariables.js", "hideToolbar": true, "bg": "gradient"}}
+
 ## Common examples
 
 ### Condensed Breadcrumbs
@@ -84,13 +91,6 @@ As an alternative to the behavior of the condensed demo above, consider adding a
 
 {{"demo": "BreadcrumbsWithMenu.js"}}
 
-## CSS variable playground
-
-Play around with the CSS variables available to the Breadcrumbs component to see how the design changes.
-You can use these to customize the component with both the `sx` prop and the theme.
-
-{{"demo": "BreadcrumbsVariables.js", "hideToolbar": true}}
-
 ## Accessibility
 
 (WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/)
diff --git a/docs/data/joy/components/button/button.md b/docs/data/joy/components/button/button.md
index 5a96aa7fdd6ddf..68f90d24210ad8 100644
--- a/docs/data/joy/components/button/button.md
+++ b/docs/data/joy/components/button/button.md
@@ -124,18 +124,18 @@ Use the Icon Button component for a square button to house an icon with no text
 
 {{"demo": "IconButtons.js"}}
 
-## CSS variable playground
+## CSS variables playground
 
 Play around with the CSS variables available to the Button and Icon Button components to see how the design changes.
 You can use these to customize the components with both the `sx` prop and the theme.
 
 ### Button
 
-{{"demo": "ButtonVariables.js", "hideToolbar": true}}
+{{"demo": "ButtonVariables.js", "hideToolbar": true, "bg": "gradient"}}
 
 ### Icon Button
 
-{{"demo": "IconButtonVariables.js", "hideToolbar": true}}
+{{"demo": "IconButtonVariables.js", "hideToolbar": true, "bg": "gradient"}}
 
 ## Accessibility
 
diff --git a/docs/data/joy/components/card/CardVariables.js b/docs/data/joy/components/card/CardVariables.js
index b9ec0bce435847..ceb5c13c73c526 100644
--- a/docs/data/joy/components/card/CardVariables.js
+++ b/docs/data/joy/components/card/CardVariables.js
@@ -1,239 +1,45 @@
 import * as React from 'react';
-import AspectRatio from '@mui/joy/AspectRatio';
-import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
-import Sheet from '@mui/joy/Sheet';
 import Card from '@mui/joy/Card';
 import CardActions from '@mui/joy/CardActions';
-import CardCover from '@mui/joy/CardCover';
 import CardContent from '@mui/joy/CardContent';
-import CardOverflow from '@mui/joy/CardOverflow';
-import CircularProgress from '@mui/joy/CircularProgress';
 import IconButton from '@mui/joy/IconButton';
-import Link from '@mui/joy/Link';
-import FormControl from '@mui/joy/FormControl';
-import FormLabel from '@mui/joy/FormLabel';
-import FormHelperText from '@mui/joy/FormHelperText';
-import Input from '@mui/joy/Input';
 import Typography from '@mui/joy/Typography';
 import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
-import BrandingProvider from 'docs/src/BrandingProvider';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-
-function formatSx(sx) {
-  const lines = Object.keys(sx);
-  if (!lines.length) {
-    return '';
-  }
-  if (lines.length === 1) {
-    return ` sx={${JSON.stringify(sx)
-      .replace('{', '{ ')
-      .replace('}', ' }')
-      .replace(':', ': ')}}`;
-  }
-  return ` sx={${JSON.stringify(sx, null, 2)}}`;
-}
-
-const vars = [
-  {
-    var: '--Card-padding',
-    defaultValue: '16px',
-    type: 'number',
-  },
-  {
-    var: '--Card-radius',
-    defaultValue: '12px',
-    type: 'number',
-  },
-];
+import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 
 export default function CardVariables() {
-  const [sx, setSx] = React.useState({});
   return (
-    <Box
-      sx={{
-        width: '100%',
-        display: 'grid',
-        gridTemplateColumns: { xs: '1fr', md: '1fr auto' },
-        gridTemplateRows: '1fr auto',
-        gap: 2,
-        mt: 2,
-        '& .markdown-body pre': {
-          margin: 0,
-          borderRadius: 'xs',
+    <JoyVariablesDemo
+      componentName="Card"
+      data={[
+        {
+          var: '--Card-padding',
+          defaultValue: '16px',
+          type: 'number',
+        },
+        {
+          var: '--Card-radius',
+          defaultValue: '12px',
+          type: 'number',
         },
-      }}
-    >
-      <Box
-        sx={{
-          alignSelf: 'center',
-          justifyContent: 'center',
-          mx: 'auto',
-          display: 'flex',
-          placeSelf: 'center',
-          gap: 2,
-          flexWrap: 'wrap',
-        }}
-      >
+      ]}
+      renderDemo={(sx) => (
         <Card variant="outlined" sx={{ maxWidth: 240, boxShadow: 'none', ...sx }}>
-          <CardOverflow>
-            <AspectRatio>
-              <img
-                src="https://images.unsplash.com/photo-1523404343994-489a5eefd760?auto=format&fit=crop&w=198"
-                srcSet="https://images.unsplash.com/photo-1523404343994-489a5eefd760?auto=format&fit=crop&w=198&dpr=2 2x"
-                loading="lazy"
-                alt=""
-              />
-            </AspectRatio>
-          </CardOverflow>
-          <AspectRatio
-            variant="outlined"
-            ratio="1"
-            sx={{
-              width: 48,
-              mt: -5,
-              '& > div': {
-                '--variant-borderWidth': '2px',
-                borderColor: 'background.surface',
-              },
-            }}
-          >
-            <img src="/static/images/avatar/6.jpg" loading="lazy" alt="" />
-          </AspectRatio>
           <CardContent>
-            <Typography fontWeight="lg">
-              <Link
-                href="#card-variables"
-                overlay
-                underline="none"
-                textColor="text.primary"
-              >
-                Card title
-              </Link>
-            </Typography>
-            <Typography level="body-sm">A very very long description.</Typography>
+            <Typography fontWeight="lg">Card title</Typography>
+            <Typography level="body-sm">An interesting description.</Typography>
           </CardContent>
           <CardActions buttonFlex="1">
-            <IconButton variant="outlined" color="neutral" size="sm">
-              <BookmarkBorderIcon />
-            </IconButton>
             <Button variant="solid" color="primary" size="sm">
               Buy
             </Button>
+            <IconButton variant="outlined" color="neutral" size="sm">
+              <BookmarkBorderIcon />
+            </IconButton>
           </CardActions>
         </Card>
-        <Card
-          variant="solid"
-          color="neutral"
-          invertedColors
-          sx={{ minWidth: 200, maxWidth: 240, boxShadow: 'none', ...sx }}
-        >
-          <CardCover>
-            <img
-              src="https://images.unsplash.com/photo-1523262297412-fafbd40c6aa4?auto=format&fit=crop&w=198"
-              srcSet="https://images.unsplash.com/photo-1523262297412-fafbd40c6aa4?auto=format&fit=crop&w=198&dpr=2 2x"
-              loading="lazy"
-              alt=""
-            />
-          </CardCover>
-          <CardCover
-            sx={{
-              background:
-                'linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0) 200px), linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0) 300px)',
-              backdropFilter: 'blur(4px)',
-            }}
-          />
-          <CardContent>
-            <CircularProgress
-              determinate
-              value={70}
-              sx={{
-                '--CircularProgress-size': '100px',
-                '--CircularProgress-progressThickness': '8px',
-                '--CircularProgress-trackThickness': '8px',
-                m: 'auto',
-              }}
-            >
-              <Typography>70%</Typography>
-            </CircularProgress>
-          </CardContent>
-          <CardContent sx={{ textAlign: 'center', justifyContent: 'center' }}>
-            <Typography fontWeight="lg" textColor="#fff">
-              Card title
-            </Typography>
-            <Typography level="body-sm" textColor="neutral.300">
-              Long description.
-            </Typography>
-          </CardContent>
-          <CardActions>
-            <Button variant="outlined">Get started</Button>
-          </CardActions>
-        </Card>
-      </Box>
-      <Sheet
-        variant="outlined"
-        sx={{
-          gridRow: 'span 2',
-          display: 'flex',
-          flexWrap: 'wrap',
-          gap: 2,
-          p: 2,
-          borderRadius: 'sm',
-        }}
-      >
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-          <Typography fontWeight="xl" level="body-sm" textColor="text.primary">
-            CSS variables
-          </Typography>
-          {vars.map((data) => (
-            <FormControl key={data.var}>
-              <FormLabel sx={{ '--FormLabel-fontSize': 'var(--joy-fontSize-xs)' }}>
-                {data.var}
-              </FormLabel>
-              <Input
-                size="sm"
-                variant="outlined"
-                defaultValue={
-                  Number(data.defaultValue.replace('px', '')) || undefined
-                }
-                endDecorator={<Typography level="body-xs">px</Typography>}
-                type={data.type}
-                sx={{
-                  maxWidth: 160,
-                  '& .JoyInput-root': { '--Input-paddingInline': '0.5rem' },
-                }}
-                onChange={(event) => {
-                  const { value } = event.target;
-                  setSx((prevSx) => {
-                    if (!value) {
-                      const newSx = { ...prevSx };
-                      // @ts-ignore
-                      delete newSx[data.var];
-                      return newSx;
-                    }
-                    return {
-                      ...prevSx,
-                      [data.var]: `${value}px`,
-                    };
-                  });
-                }}
-              />
-              {data.defaultValue ? (
-                <FormHelperText
-                  sx={{ '--FormHelperText-fontSize': 'var(--joy-fontSize-xs)' }}
-                >{`Default as ${data.defaultValue}`}</FormHelperText>
-              ) : null}
-            </FormControl>
-          ))}
-        </Box>
-      </Sheet>
-      <BrandingProvider mode="dark">
-        <HighlightedCode
-          code={`<Card${formatSx(sx)}>`}
-          language="jsx"
-          sx={{ display: { xs: 'none', md: 'initial' } }}
-        />
-      </BrandingProvider>
-    </Box>
+      )}
+    />
   );
 }
diff --git a/docs/data/joy/components/card/card.md b/docs/data/joy/components/card/card.md
index d662e0537217d5..dbeb0e268ce96f 100644
--- a/docs/data/joy/components/card/card.md
+++ b/docs/data/joy/components/card/card.md
@@ -158,18 +158,18 @@ Learn more about this and other best practices for accessible cards in the [Incl
 
 {{"demo": "InteractiveCard.js"}}
 
-## CSS variable playground
+## CSS variables playground
 
 Play around with the CSS variables available to the Card component to see how the design changes.
 You can use these to customize the component with both the `sx` prop and the theme.
 
+{{"demo": "CardVariables.js", "hideToolbar": true, "bg": "gradient"}}
+
 :::success
 If you need to adjust a Card's padding or border radius, it's preferable to do so using these variables rather than plain CSS properties.
 This is because the variables are also used to calculate a proper radius for the Card's children, to prevent a mismatch between their relative proportions.
 :::
 
-{{"demo": "CardVariables.js" , "hideToolbar": true}}
-
 ## Common examples
 
 ### Bio card
diff --git a/docs/data/joy/components/chip/chip.md b/docs/data/joy/components/chip/chip.md
index 927221d9482d8c..4c97d6960da9c9 100644
--- a/docs/data/joy/components/chip/chip.md
+++ b/docs/data/joy/components/chip/chip.md
@@ -91,10 +91,10 @@ Use checkboxes when you want to enable multiple selection.
 
 {{"demo": "CheckboxChip.js"}}
 
-## CSS variables
+## CSS variables playground
 
 Play around with all the CSS variables available in the slider component to see how the design changes.
 
 You can use those to customize the component on both the `sx` prop and the theme.
 
-{{"demo": "ChipVariables.js", "hideToolbar": true}}
+{{"demo": "ChipVariables.js", "hideToolbar": true, "bg": "gradient"}}
diff --git a/docs/data/joy/components/circular-progress/circular-progress.md b/docs/data/joy/components/circular-progress/circular-progress.md
index e2c8d640a77a79..1e3d4e7113575d 100644
--- a/docs/data/joy/components/circular-progress/circular-progress.md
+++ b/docs/data/joy/components/circular-progress/circular-progress.md
@@ -86,12 +86,12 @@ The size of the Circular Progress is controlled by a button, an icon button, or
 
 {{"demo": "CircularProgressButton.js"}}
 
-## CSS variable playground
+## CSS variables playground
 
 Play around with all the CSS variables available on the component to see how the design changes.
 You can use these to customize the component with both the `sx` prop and the theme.
 
-{{"demo": "CircularProgressVariables.js", "hideToolbar": true}}
+{{"demo": "CircularProgressVariables.js", "hideToolbar": true, "bg": "gradient"}}
 
 ## Accessibility
 
diff --git a/docs/data/joy/components/input/input.md b/docs/data/joy/components/input/input.md
index 7d54391dc628de..88acb10f5b9225 100644
--- a/docs/data/joy/components/input/input.md
+++ b/docs/data/joy/components/input/input.md
@@ -133,6 +133,13 @@ These props may include HTML attributes such as `ref`, `min`, `max`, and `autoco
 
 {{"demo": "InputSlotProps.js"}}
 
+## CSS variables playground
+
+Play around with the CSS variables available to the Input component to see how the design changes.
+You can use these to customize the component with both the `sx` prop and the theme.
+
+{{"demo": "InputVariables.js", "hideToolbar": true, "bg": "gradient"}}
+
 ## Common examples
 
 ### Focus outline
@@ -180,13 +187,6 @@ The demos below illustrate how to do this with two popular libraries.
 
 {{"demo": "InputReactNumberFormat.js"}}
 
-## CSS variable playground
-
-Play around with the CSS variables available to the Input component to see how the design changes.
-You can use these to customize the component with both the `sx` prop and the theme.
-
-{{"demo": "InputVariables.js", "hideToolbar": true}}
-
 ## Accessibility
 
 All inputs should have a descriptive label linked to help users understand its purpose.
diff --git a/docs/data/joy/components/linear-progress/linear-progress.md b/docs/data/joy/components/linear-progress/linear-progress.md
index 42ae936e575a51..f243a8819a2cbe 100644
--- a/docs/data/joy/components/linear-progress/linear-progress.md
+++ b/docs/data/joy/components/linear-progress/linear-progress.md
@@ -69,13 +69,13 @@ Provides a number to `thickness` prop to control the bar's stroke width.
 
 {{"demo": "LinearProgressThickness.js"}}
 
-## CSS variables
+## CSS variables playground
 
 Play around with all the CSS variables available on the component to see how the design changes.
 
 You can use those to customize the component on both the `sx` prop and the theme.
 
-{{"demo": "LinearProgressVariables.js", "hideToolbar": true}}
+{{"demo": "LinearProgressVariables.js", "hideToolbar": true, "bg": "gradient"}}
 
 ## Common examples
 
diff --git a/docs/data/joy/components/list/list.md b/docs/data/joy/components/list/list.md
index 2cdcc82b373d56..5ebd9217aa5757 100644
--- a/docs/data/joy/components/list/list.md
+++ b/docs/data/joy/components/list/list.md
@@ -177,13 +177,13 @@ A selected `ListItemButton` does not apply `:hover` and `:active` global variant
 
 {{"demo": "SelectedList.js"}}
 
-## CSS variables
+## CSS variables playground
 
 Play around with all the CSS variables available in the list component to see how the design changes.
 
 You can use those to customize the component on both the `sx` prop and the theme.
 
-{{"demo": "ListVariables.js", "hideToolbar": true}}
+{{"demo": "ListVariables.js", "hideToolbar": true, "bg": "gradient"}}
 
 ## Common examples
 
diff --git a/docs/data/joy/components/slider/slider.md b/docs/data/joy/components/slider/slider.md
index 4182a35688ff22..f71ab2254d3e47 100644
--- a/docs/data/joy/components/slider/slider.md
+++ b/docs/data/joy/components/slider/slider.md
@@ -75,10 +75,10 @@ You can either invert it by assigning `inverted` to the `track` prop or remove i
 
 {{"demo": "TrackFalseSlider.js"}}
 
-## CSS variables
+## CSS variables playground
 
 Play around with all the CSS variables available in the slider component to see how the design changes.
 
 You can use those to customize the component on both the `sx` prop and the theme.
 
-{{"demo": "SliderVariables.js", "hideToolbar": true}}
+{{"demo": "SliderVariables.js", "hideToolbar": true, "bg": "gradient"}}
diff --git a/docs/data/joy/components/switch/SwitchVariables.js b/docs/data/joy/components/switch/SwitchVariables.js
index e071a2a924550d..bd7d4c3fd880b2 100644
--- a/docs/data/joy/components/switch/SwitchVariables.js
+++ b/docs/data/joy/components/switch/SwitchVariables.js
@@ -10,7 +10,7 @@ export default function SwitchVariables() {
       data={[
         { var: '--Switch-gap', defaultValue: '8px' },
         [
-          'track',
+          'Track',
           [
             { var: '--Switch-trackRadius', defaultValue: '16px' },
             { var: '--Switch-trackWidth', defaultValue: '48px' },
@@ -19,7 +19,7 @@ export default function SwitchVariables() {
           { defaultOpen: true },
         ],
         [
-          'thumb',
+          'Thumb',
           [
             { var: '--Switch-thumbSize', defaultValue: '16px' },
             { var: '--Switch-thumbRadius' },
diff --git a/docs/data/joy/components/switch/switch.md b/docs/data/joy/components/switch/switch.md
index de709590f85a6d..2f4f058c6e7d40 100644
--- a/docs/data/joy/components/switch/switch.md
+++ b/docs/data/joy/components/switch/switch.md
@@ -82,34 +82,13 @@ Similarly to the above, target the thumb's children to display icons inside of i
 
 {{"demo": "ExampleThumbChild.js"}}
 
-## CSS Variables
+## CSS variables playground
 
 Play around with all the CSS variables available in the switch component to see how the design changes.
 
 You can use those to customize the component on both the `sx` prop and the theme.
 
-{{"demo": "SwitchVariables.js"}}
-
-## Accessibility
-
-Here are a few tips to make sure you have an accessible switch component:
-
-- The `Switch` will render with the `checkbox` role as opposed to `switch`.
-  This is mainly because the latter isn't widely supported yet.
-  However, if you believe your audience will support it, make sure to test with assistive technology.
-  Use the `slotProps` prop to change the role:
-
-  ```jsx
-  <Switch slotProps={{ input: { role: 'switch' } }}>
-  ```
-
-- Every form control component should have proper labels.
-  This includes radio buttons, checkboxes, and switches.
-  In most cases, this is done using the `<label>` element.
-  - If a label can't be applied, make sure to add an attribute (e.g. `aria-label`, `aria-labelledby`, `title`) to the input slot inside the `slotProps` prop.
-  ```jsx
-  <Switch value="checkedA" slotProps={{ 'aria-label': 'Switch A' }} />
-  ```
+{{"demo": "SwitchVariables.js", "hideToolbar": true, "bg": "gradient"}}
 
 ## Common examples
 
@@ -149,3 +128,24 @@ Note how we've used the `:active` pseudo-class to replicate the small thumb size
 ### Mantine
 
 {{"demo": "ExampleMantineSwitch.js"}}
+
+## Accessibility
+
+Here are a few tips to make sure you have an accessible switch component:
+
+- The `Switch` will render with the `checkbox` role as opposed to `switch`.
+  This is mainly because the latter isn't widely supported yet.
+  However, if you believe your audience will support it, make sure to test with assistive technology.
+  Use the `slotProps` prop to change the role:
+
+  ```jsx
+  <Switch slotProps={{ input: { role: 'switch' } }}>
+  ```
+
+- Every form control component should have proper labels.
+  This includes radio buttons, checkboxes, and switches.
+  In most cases, this is done using the `<label>` element.
+  - If a label can't be applied, make sure to add an attribute (e.g. `aria-label`, `aria-labelledby`, `title`) to the input slot inside the `slotProps` prop.
+  ```jsx
+  <Switch value="checkedA" slotProps={{ 'aria-label': 'Switch A' }} />
+  ```
diff --git a/docs/data/joy/components/table/table.md b/docs/data/joy/components/table/table.md
index 302a9d882b7d6c..8da1cbd655c327 100644
--- a/docs/data/joy/components/table/table.md
+++ b/docs/data/joy/components/table/table.md
@@ -239,12 +239,12 @@ The header cells always truncate the text to keep the header's height predictabl
 
 {{"demo": "TableTextEllipsis.js"}}
 
-## CSS variable playground
+## CSS variables playground
 
 Play around with the CSS variables available to the Table component to see how the design changes.
 You can use these to customize the components with both the `sx` prop and the theme.
 
-{{"demo": "TableVariables.js"}}
+{{"demo": "TableVariables.js", "hideToolbar": true, "bg": "gradient"}}
 
 ## Usage with Sheet
 
diff --git a/docs/data/joy/components/tabs/tabs.md b/docs/data/joy/components/tabs/tabs.md
index a94331fdfa2af9..7a2f73cc8d003c 100644
--- a/docs/data/joy/components/tabs/tabs.md
+++ b/docs/data/joy/components/tabs/tabs.md
@@ -149,13 +149,13 @@ Screen readers will then properly announce the label.
 <Tabs aria-label="Meaningful label">...</Tabs>
 ```
 
-## CSS Variables
+## CSS variables playground
 
 Play around with all the CSS variables available in the slider component to see how the design changes.
 
 You can use those to customize the component on both the `sx` prop and the theme.
 
-{{"demo": "TabsVariables.js"}}
+{{"demo": "TabsVariables.js", "hideToolbar": true, "bg": "gradient"}}
 
 ## Common examples
 
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index f05635225ba5e6..29d0d65116831c 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -313,7 +313,7 @@ const DemoRootJoy = joyStyled('div', {
     overflow: 'auto',
     backgroundColor: alpha(blue[50], 0.5),
     border: `1px solid`,
-    borderColor: `rgba(${theme.vars.palette.neutral.mainChannel} / 0.1)`,
+    borderColor: grey[100],
     backgroundImage: `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%),
@@ -321,7 +321,7 @@ const DemoRootJoy = joyStyled('div', {
       radial-gradient(at 93% 85%, ${alpha(blue[100], 0.2)} 0px, transparent 50%);`,
     ...theme.applyDarkStyles({
       backgroundColor: alpha(blue[900], 0.1),
-      borderColor: `rgba(${theme.vars.palette.neutral.mainChannel} / 0.1)`,
+      borderColor: alpha(grey[700], 0.3),
       backgroundImage: `radial-gradient(at 51% 52%, ${alpha(
         blueDark[700],
         0.5,
diff --git a/docs/src/modules/components/JoyUsageDemo.tsx b/docs/src/modules/components/JoyUsageDemo.tsx
index f1bab8fd7dd635..dcc1eadb069406 100644
--- a/docs/src/modules/components/JoyUsageDemo.tsx
+++ b/docs/src/modules/components/JoyUsageDemo.tsx
@@ -3,6 +3,7 @@ import Check from '@mui/icons-material/Check';
 import CheckRounded from '@mui/icons-material/CheckRounded';
 import ReplayRoundedIcon from '@mui/icons-material/ReplayRounded';
 import Box from '@mui/joy/Box';
+import Divider from '@mui/joy/Divider';
 import Chip from '@mui/joy/Chip';
 import FormControl from '@mui/joy/FormControl';
 import FormLabel, { formLabelClasses } from '@mui/joy/FormLabel';
@@ -203,14 +204,17 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
       }}
     >
       <Box
-        sx={{
+        sx={(theme) => ({
           display: 'flex',
           flexDirection: 'column',
           flexGrow: 999,
           minWidth: 0,
           p: 3,
-          bgcolor: 'var(--joy-palette-background-surface)',
-        }}
+          bgcolor: '#FFF',
+          [theme.getColorSchemeSelector('dark')]: {
+            backgroundColor: theme.palette.neutral[900],
+          },
+        })}
       >
         <Box
           sx={{
@@ -238,31 +242,36 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
         </BrandingProvider>
       </Box>
       <Sheet
-        sx={{
+        sx={(theme) => ({
           flexShrink: 0,
           gap: 2,
-          p: 3,
           borderLeft: '1px solid',
-          borderColor: (theme) => `rgba(${theme.vars.palette.neutral.mainChannel} / 0.1)`,
-          background: (theme) => `rgba(${theme.vars.palette.primary.mainChannel} / 0.02)`,
+          borderColor: `rgba(${theme.vars.palette.neutral.mainChannel} / 0.1)`,
+          background: `rgba(${theme.vars.palette.primary.mainChannel} / 0.02)`,
           backdropFilter: 'blur(8px)',
           minWidth: '280px',
-        }}
+        })}
       >
         <Box
           sx={{
-            mb: 2,
+            px: 3,
+            py: 2,
             display: 'flex',
             justifyContent: 'space-between',
             alignItems: 'center',
           }}
         >
-          <Typography id="usage-props" component="h3" fontWeight="lg" sx={{ scrollMarginTop: 160 }}>
+          <Typography
+            id="usage-props"
+            component="h3"
+            fontWeight="lg"
+            sx={{ scrollMarginTop: 160, fontFamily: 'General Sans' }}
+          >
             Playground
           </Typography>
           <IconButton
             aria-label="Reset all"
-            variant="soft"
+            variant="outlined"
             color="primary"
             size="sm"
             onClick={() => setProps(initialProps as T)}
@@ -274,11 +283,13 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
             <ReplayRoundedIcon />
           </IconButton>
         </Box>
+        <Divider sx={{ opacity: 0.5 }} />
         <Box
           sx={{
+            p: 3,
             display: 'flex',
             flexDirection: 'column',
-            gap: 2.5,
+            gap: 3,
             [`& .${formLabelClasses.root}`]: {
               fontWeight: 'lg',
             },
@@ -343,7 +354,7 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
                           [propName]: value,
                         }));
                       }}
-                      sx={{ flexWrap: 'wrap', gap: 1 }}
+                      sx={{ flexWrap: 'wrap', gap: 1, '--unstable_RadioGroup-margin': 0 }}
                     >
                       {options.map((value: string, index: number) => {
                         const checked = String(resolvedValue) === value;
@@ -438,7 +449,7 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
                           [propName || 'color']: event.target.value,
                         }))
                       }
-                      sx={{ flexWrap: 'wrap', gap: 1.5 }}
+                      sx={{ flexWrap: 'wrap', gap: 1.5, '--unstable_RadioGroup-margin': 0 }}
                     >
                       {(['primary', 'neutral', 'danger', 'success', 'warning'] as const).map(
                         (value) => {
@@ -449,8 +460,8 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
                               variant="solid"
                               color={value}
                               sx={{
-                                width: 28,
-                                height: 28,
+                                width: 26,
+                                height: 26,
                                 borderRadius: 'xl',
                                 textTransform: 'capitalize',
                               }}
diff --git a/docs/src/modules/components/JoyVariablesDemo.tsx b/docs/src/modules/components/JoyVariablesDemo.tsx
index 918efc2538ce1d..4b439864e6b030 100644
--- a/docs/src/modules/components/JoyVariablesDemo.tsx
+++ b/docs/src/modules/components/JoyVariablesDemo.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
+import Divider from '@mui/joy/Divider';
 import Link from '@mui/joy/Link';
 import List from '@mui/joy/List';
-import ListDivider from '@mui/joy/ListDivider';
 import IconButton from '@mui/joy/IconButton';
 import Typography from '@mui/joy/Typography';
 import Sheet from '@mui/joy/Sheet';
@@ -48,8 +48,7 @@ function SlotVariables({ slot, data, renderField, defaultOpen = false }: SlotVar
         aria-controls={`section-${slot}`}
         component="button"
         underline="none"
-        fontSize="xs"
-        textTransform="uppercase"
+        fontSize="sm"
         fontWeight="lg"
         endDecorator={
           <KeyboardArrowDown
@@ -57,7 +56,11 @@ function SlotVariables({ slot, data, renderField, defaultOpen = false }: SlotVar
           />
         }
         onClick={() => setOpen(!open)}
-        sx={{ justifyContent: 'space-between', color: open ? 'text.primary' : 'text.tertiary' }}
+        sx={{
+          pb: 1,
+          justifyContent: 'space-between',
+          color: open ? 'text.primary' : 'text.tertiary',
+        }}
       >
         {slot}
       </Link>
@@ -69,9 +72,9 @@ function SlotVariables({ slot, data, renderField, defaultOpen = false }: SlotVar
           id={`section-${slot}`}
           sx={{
             display: 'flex',
+            flexDirection: 'column',
             flexWrap: 'wrap',
-            gap: 2,
-            '& > *': { flex: 1 },
+            gap: 1,
           }}
         >
           {data.map((item) => renderField(item))}
@@ -93,28 +96,36 @@ export default function JoyVariablesDemo(props: {
   return (
     <Box
       sx={{
-        m: 0,
-        mt: 2,
         flexGrow: 1,
-        maxWidth: 'calc(100% + 24px)',
+        maxWidth: '100%',
         display: 'flex',
-        flexDirection: { xs: 'column', sm: 'row' },
-        flexWrap: 'wrap',
-        gap: 2,
+        flexDirection: { xs: 'column', md: 'row' },
         '& .markdown-body pre': {
           margin: 0,
-          borderRadius: 'sm',
+          borderRadius: 'md',
         },
       }}
     >
-      <Box sx={{ display: 'flex', flexDirection: 'column', flexGrow: 999 }}>
+      <Box
+        sx={(theme) => ({
+          display: 'flex',
+          flexDirection: 'column',
+          flexGrow: 999,
+          minWidth: 0,
+          p: 3,
+          gap: 3,
+          bgcolor: '#FFF',
+          [theme.getColorSchemeSelector('dark')]: {
+            backgroundColor: theme.palette.neutral[900],
+          },
+        })}
+      >
         <Box
           sx={{
             flexGrow: 1,
             m: 'auto',
             display: 'flex',
             alignItems: 'center',
-            p: 2,
           }}
         >
           {props.renderDemo(sx)}
@@ -127,29 +138,39 @@ export default function JoyVariablesDemo(props: {
                 : `<${componentName} ${formatSx(sx)}${childrenAccepted ? '>' : '/>'}`
             }
             language="jsx"
-            sx={{ display: { xs: 'none', md: 'initial' } }}
+            sx={{ display: { xs: 'none', md: 'block' } }}
           />
         </BrandingProvider>
       </Box>
       <Sheet
-        variant="outlined"
-        sx={{
-          minWidth: 0,
-          flexBasis: 240,
-          flexGrow: 1,
-          borderRadius: 'sm',
-          boxShadow: 'sm',
-        }}
+        sx={(theme) => ({
+          flexShrink: 0,
+          gap: 2,
+          borderLeft: '1px solid',
+          borderColor: `rgba(${theme.vars.palette.neutral.mainChannel} / 0.1)`,
+          background: `rgba(${theme.vars.palette.primary.mainChannel} / 0.02)`,
+          backdropFilter: 'blur(8px)',
+          minWidth: '280px',
+        })}
       >
-        <List component="div" sx={{ '--List-padding': '1rem', '--ListDivider-gap': '0px' }}>
+        <List component="div">
           <Box
-            sx={{ mb: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
+            sx={{
+              px: 3,
+              pt: 1,
+              pb: 2,
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
           >
-            <Typography fontWeight="lg">CSS Variables</Typography>
+            <Typography fontWeight="lg" sx={{ fontFamily: 'General Sans' }}>
+              CSS variables
+            </Typography>
             <IconButton
               aria-label="Reset all"
               variant="outlined"
-              color="neutral"
+              color="primary"
               size="sm"
               onClick={() => setSx({})}
               sx={{
@@ -160,11 +181,13 @@ export default function JoyVariablesDemo(props: {
               <ReplayRoundedIcon />
             </IconButton>
           </Box>
+          <Divider sx={{ opacity: 0.5 }} />
           <Box
             sx={{
+              p: 3,
               display: 'flex',
               flexDirection: 'column',
-              gap: 2,
+              gap: 1,
             }}
           >
             {data.map((dataItem) => {
@@ -173,7 +196,11 @@ export default function JoyVariablesDemo(props: {
                 const resolvedInputAttributes = item.inputAttributes || {};
                 return (
                   <FormControl key={item.var}>
-                    <FormLabel>{item.var}</FormLabel>
+                    <FormLabel
+                      sx={{ fontFamily: 'Menlo, Consolas', '--FormLabel-fontSize': '0.75rem' }}
+                    >
+                      {item.var}
+                    </FormLabel>
                     <Input
                       size="sm"
                       variant="outlined"
@@ -183,28 +210,27 @@ export default function JoyVariablesDemo(props: {
                       }}
                       endDecorator={
                         <React.Fragment>
-                          {typeof resolvedValue === 'string' ? (
+                          {typeof resolvedValue === 'string' && (
                             <Typography level="body-xs" mr={0.5}>
                               px
                             </Typography>
-                          ) : null}
-                          {sx[item.var] && sx[item.var] !== item.defaultValue ? (
-                            <IconButton
-                              tabIndex={-1}
-                              variant="plain"
-                              color="neutral"
-                              size="sm"
-                              onClick={() =>
-                                setSx((prevSx) => {
-                                  const newSx = { ...prevSx };
-                                  delete newSx[item.var];
-                                  return newSx;
-                                })
-                              }
-                            >
-                              <ReplayRoundedIcon fontSize="sm" />
-                            </IconButton>
-                          ) : null}
+                          )}
+                          <IconButton
+                            tabIndex={-1}
+                            variant="plain"
+                            color="neutral"
+                            size="sm"
+                            disabled={!sx[item.var] && sx[item.var] !== item.defaultValue}
+                            onClick={() =>
+                              setSx((prevSx) => {
+                                const newSx = { ...prevSx };
+                                delete newSx[item.var];
+                                return newSx;
+                              })
+                            }
+                          >
+                            <ReplayRoundedIcon fontSize="sm" />
+                          </IconButton>
                         </React.Fragment>
                       }
                       type="number"
@@ -240,14 +266,15 @@ export default function JoyVariablesDemo(props: {
                         [`& .${inputClasses.endDecorator}`]: { alignItems: 'center' },
                       }}
                     />
-                    <FormHelperText>{item.helperText}</FormHelperText>
+                    <FormHelperText sx={{ mb: 1, '--FormHelperText-fontSize': '0.75rem' }}>
+                      {item.helperText}
+                    </FormHelperText>
                   </FormControl>
                 );
               }
               if (Array.isArray(dataItem)) {
                 const [slot, slotData, options] = dataItem;
                 return [
-                  <ListDivider key="divider" />,
                   <SlotVariables
                     key="variables"
                     slot={slot}