diff --git a/docs/data/material/customization/color/ColorTool.js b/docs/data/material/customization/color/ColorTool.js
index 58bd9f2dc7ae58..f50e08975f7b9c 100644
--- a/docs/data/material/customization/color/ColorTool.js
+++ b/docs/data/material/customization/color/ColorTool.js
@@ -237,7 +237,7 @@ function ColorTool() {
             onChange={handleChangeShade(intent)}
             aria-labelledby={`${intent}ShadeSliderLabel`}
           />
-          <Typography>{shades[intentShade]}</Typography>
+          <Typography minWidth={40}>{shades[intentShade]}</Typography>
         </Box>
         <Box sx={{ width: 192 }}>
           {hues.map((hue) => {